/* The gallery overlay */

#galleryOverlay *:focus {

    outline: none;

}



#galleryOverlay {

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    opacity: 0;

    z-index: 100000;

    background-color: #fff;

    overflow: hidden;

    display: none;



    -moz-transition: opacity .3s ease;

    -webkit-transition: opacity .3s ease;

    transition: opacity .3s ease;

}



/* This class will trigger the animation */

#galleryOverlay.visible {

    opacity: 1;

}



#gallerySlider {

    height: 100%;



    left: 0;

    top: 0;



    width: 100%;

    white-space: nowrap;

    position: absolute;



    -moz-transition: left 0.4s ease;

    -webkit-transition: left 0.4s ease;

    transition: left 0.4s ease;

}



#gallerySlider .placeholder {

    background: url("preloader.gif") no-repeat center center;

    background-size: 16px 16px;

    height: 100%;

    line-height: 1px;

    text-align: center;

    width: 100%;

    display: inline-block;

}



/* The before element moves the

 * image halfway from the top */

#gallerySlider .placeholder:before {

    content: "";

    display: inline-block;

    height: 50%;

    width: 1px;

    margin-right: -1px;

}



#gallerySlider .placeholder img {

    display: inline-block;

    max-height: 100%;

    max-width: 100%;

    vertical-align: middle;

}



#gallerySlider.rightSpring {

    -moz-animation: rightSpring 0.3s;

    -webkit-animation: rightSpring 0.3s;

}



#gallerySlider.leftSpring {

    -moz-animation: leftSpring 0.3s;

    -webkit-animation: leftSpring 0.3s;

}



/* Firefox Keyframe Animations */



@-moz-keyframes rightSpring {

    0% {

        margin-left: 0px;

    }

    50% {

        margin-left: -30px;

    }

    100% {

        margin-left: 0px;

    }

}



@-moz-keyframes leftSpring {

    0% {

        margin-left: 0px;

    }

    50% {

        margin-left: 30px;

    }

    100% {

        margin-left: 0px;

    }

}



/* Safari and Chrome Keyframe Animations */



@-webkit-keyframes rightSpring {

    0% {

        margin-left: 0px;

    }

    50% {

        margin-left: -30px;

    }

    100% {

        margin-left: 0px;

    }

}



@-webkit-keyframes leftSpring {

    0% {

        margin-left: 0px;

    }

    50% {

        margin-left: 30px;

    }

    100% {

        margin-left: 0px;

    }

}



/* Arrows */



#prevArrow, #nextArrow {

    border: none;

    text-decoration: none;

    opacity: 0.5;

    cursor: pointer;

    position: absolute;

    width: 50px;

    height: 50px;

    top: 50%;

    margin-top: -25px;



    -moz-transition: opacity 0.2s ease;

    -webkit-transition: opacity 0.2s ease;

    transition: opacity 0.2s ease;

}



#prevArrow:hover, #nextArrow:hover, #closeGallery:hover {

    opacity: 1;

}



#prevArrow {

    left: 40px;

    background: url('left.png') #000;

    background-size: 50px 50px;

    background-repeat: no-repeat;

}



#nextArrow {

    right: 40px;

    background: url('right.png') #000;

    background-size: 50px 50px;

    background-repeat: no-repeat;

}



#prevArrow:active {

    left: 35px;

}



#nextArrow:active {

    right: 35px;

}



#closeGallery {

    width: 50px;

    height: 50px;

    background: #000 url('close.png');

    background-size: 50px 50px;

    position: absolute;

    line-height: 50px;

    text-align: center;

    right: 0px;

    top: 0px;

    opacity: 0.5;

    z-index: 99;



    border: none;

    text-decoration: none;

    cursor: pointer;

    position: absolute;



    -moz-transition: opacity 0.2s ease;

    -webkit-transition: opacity 0.2s ease;

    transition: opacity 0.2s ease;

}