/* CSS for jQuery Orbit Plugin 1.2.3
 * www.ZURB.com/playground
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php

/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY ================================================== */
#top_photos {width: 100%; height: calc(100vw / 2); background: #000 url(/orbit/loading.gif) no-repeat center center; overflow: hidden;}
#top_photos>img, #top_photos>div, #top_photos>a {display: none;}

#featured {width: 900px; height: 450px; background: #000 url(/orbit/loading.gif) no-repeat center center; overflow: hidden;}
#featured>img, #featured>div, #featured>a {display: none;}

/* CONTAINER ================================================== */

div.orbit-wrapper {width: 900px; height: 450px; position: relative;}
div.orbit {width: 1px; height: 1px; position: relative; overflow: hidden}
div.orbit>img {position: absolute; top: 0; left: 0; display: none;}
div.orbit>a {border: none; position: absolute; top: 0; left: 0; line-height: 0; display: none;}
.orbit>div {position: absolute; top: 0; left: 0; width: 900px; height: 450px;}

/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */


/* TIMER ================================================== */

div.timer {width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; opacity: .6; cursor: pointer; z-index: 1001; display: none;}

span.rotator {display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url(/orbit/rotator-black.png) no-repeat; z-index: 3;}

span.mask {display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden;}

span.rotator.move {left: 0}

span.mask.move {width: 40px; left: 0; background: url(/orbit/timer-black.png) repeat 0 0;}

span.pause {display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url(/orbit/pause-black.png) no-repeat; z-index: 4; opacity: 0;}

span.pause.active {background: url(/orbit/pause-black.png) no-repeat 0 -40px}

div.timer:hover span.pause, span.pause.active {opacity: 1}


/* CAPTIONS ================================================== */

.orbit-caption {display: none;}

.orbit-wrapper .orbit-caption {background: #000; background: rgba(0,0,0,.6); z-index: 1000; color: #fff; text-align: center; padding: 7px 0; font-size: 13px; position: absolute; right: 0; bottom: 0; width: 100%;}


/* DIRECTIONAL NAV ================================================== */

div.slider-nav {display: block}

div.slider-nav span {width: 78px; height: 100px; text-indent: -9999px; position: absolute; z-index: 1000; top: 40px; /*margin-top: -50px;*/ cursor: pointer;}

div.slider-nav span.right {background: url(/orbit/right-arrow.png); right: 0; opacity: 0.3; filter: alpha(opacity=30);}

div.slider-nav span.left {background: url(/orbit/left-arrow.png); left: 0; opacity: 0.3; filter: alpha(opacity=30);}

div.slider-nav span.right:hover { opacity: 1; filter: alpha(opacity=100);}

div.slider-nav span.left:hover { opacity: 1; filter: alpha(opacity=100);}


/* BULLET NAV ================================================== */

.orbit-bullets {position: relative; z-index: 1000; clear: left; float: right; right: 50%; list-style: none; text-align: center; height: auto; margin: 15px 0 -30px 0; padding: 0;}

.orbit-bullets li {float: left; display: block; left: 50%; position: relative; text-align: center; margin: 0 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url(/orbit/bullets.jpg) no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden;}

.orbit-bullets li.active {color: #222; background-position: -8px 0;}

.orbit-bullets li.has-thumb {background: none; width: 100px; height: 75px;}

.orbit-bullets li.act.has-thumb {background-position: 0 0; border-top: 2px solid #000;}


/* LARGER SLIDER ================================================== */

#text.full #featured {
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50% !important;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	height: 50vw !important;
	max-height: 70vh !important;
	position: relative;
}

#text.full div.orbit-wrapper {
	width: 100vw;
	height: 50vw !important;
	max-height: 70vh !important;
}

#text.full .orbit>div {
	width: 100vw;
	height: 50vw !important;
	max-height: 70vh !important;
}

#top_photos {width: 100%; height: calc(100vw / 2);}

#top_photos div.orbit-wrapper {width: 100%; height: calc(100vw / 2);}
#top_photos .orbit>div {width: 100%; height: calc(100vw / 2);}



@media (min-width: 681px) and (max-width: 980px) {
	.orbit-wrapper {width: 490px; height: 250px;}
	#featured {width: 490px; height: 250px;}
	.orbit>div {width: 490px; height: 250px;}
	div.slider-nav span {width: 39px; height: 50px; top: 20px;}
	div.slider-nav span.right {background-size: 100% 100%;}
	div.slider-nav span.left {background-size: 100% 100%;}
}
@media (max-width: 680px) {
	#text.full #featured, #text #featured {width: 350px; height: 175px;}
}