.outerContainer
    top: 0
    bottom: 0
    left: 0
    right: 0
    height: 100%
    width: 100%
    position: fixed
    background-color: rgba(0, 0, 0, 0.95)
    font-family: sans-serif
    z-index: 1031


.imageContainer
    position: absolute
    float: none
    top: 0px
    bottom: 0px
    left: 0px
    right: 0px


.imageContainer .image,
.imageContainer .preloading-image
    visibility: hidden


.imageContainer .image.active
    position: absolute
    visibility: visible
    background-repeat: no-repeat
    background-size: contain
    background-position: center
    margin: auto auto
    left: 0
    right: 0
    top: 0
    bottom: 0
    height: 100%
    width: 100%
    opacity: 1.0


.arrow
    opacity: 0.0


.arrow:hover
    cursor: pointer


.outerContainer:hover .arrow.activeArrow
    height: calc(20px + 1.5vw)
    position: absolute
    /* use sass variables here once they are ready */
    top: calc(50% - (20px + 1.5vw) / 2)
    bottom: 50%
    z-index: 1
    opacity: 1.0
    transition: all ease-out 0.5s


.arrow.left
    left: 2vw


.arrow.right
    right: 2vw


.arrow:not(.activeArrow):hover
    opacity: 0.0
    cursor: pointer
    transition: all ease-out 0.5s


.buttonContainer
    position: absolute
    top: 20px
    right: 20px
    height: 20px
    text-align: center
    opacity: 1.0
    z-index: 200
    transition: all ease-out 0.5s


.buttonContainer .action
    height: 100%
    cursor: pointer
    vertical-align: top


.buttonContainer .action:focus
    outline: 0


.buttonContainer .action:hover
    background-color: #222
    transition: all ease-out 0.3s


.buttonContainer .action.close
    width: 26px
    height: 26px




md-button-toggle.checked
    background-color: #a0a0a0


.menuButton
    position: absolute
    bottom: 20px
    right: 20px
    text-align: center
    opacity: 1.0
    z-index: 200
    transition: all ease-out 0.5s




/* fallback */
@font-face
    font-family: 'Material Icons'
    font-style: normal
    font-weight: 400
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v19/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2')


.material-icons
    font-family: 'Material Icons'
    font-weight: normal
    font-style: normal
    font-size: 24px
    line-height: 1
    letter-spacing: normal
    text-transform: none
    display: inline-block
    white-space: nowrap
    word-wrap: normal
    direction: ltr
    -webkit-font-feature-settings: 'liga'
    -webkit-font-smoothing: antialiased

