@charset "utf-8";
/* The gallery overlay */
#galleryOverlay { width:100%; height:100%; position:fixed; top:0; left:0; opacity:0; z-index:100000; background-color:#222; background-color:rgba(0,0,0,0.8); overflow:hidden; display:none; -moz-transition:opacity 1s ease; -webkit-transition:opacity 1s ease; transition:opacity 1s 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 { display:inline-block; width:100%; height:100%; line-height:1px; text-align:center;}

/* 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-width:80%; max-height:80%; 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; background:url(../images/arrows.png) no-repeat; opacity:0.5; cursor:pointer; position:absolute; width:43px; height:58px; top:50%; margin-top:-29px; -moz-transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease; transition:opacity 0.2s ease;}
#prevArrow:hover, #nextArrow:hover { opacity:1;}
#prevArrow { background-position:left top; left:40px;}
#nextArrow { background-position:right top; right:40px;}