/* CSS for jQuery Orbit Plugin 1.3.0

 * www.ZURB.com/playground

 * Copyright 2010, ZURB

 * Free to use under the MIT license.

 * http://www.opensource.org/licenses/mit-license.php

 





/* ADDED BY JONNY JANIERO to use thumbnail image as background

   ================================================== */

.content { position:relative; }

.content .slide-content {position:absolute; top:52%; left:0; width:53%; height:40%; padding:1% 0 0 15%;background:#fff;background:rgba(255,255,255, 0.9);color:#636363;font-size:1em;overflow:hidden;}



.content .slide-content img {  }


@media only screen and (min-width: 40.063em) and (max-width: 64em) {

.content .slide-content {position:absolute; top:20%; left:0; width:55%; height:73%; padding:2%;background:#fff;background:rgba(255,255,255, 0.9);color:#636363;font-size:.8em;overflow:hidden;}

	
}



@media only screen and (max-width: 40em){
.slide-content .text-container span.responsiveText-wrapper  p{display:none!important;}
.content .slide-content {
    color: #636363;
    font-size: .7em;
    height: 96%;
    left: 0;
    overflow: hidden;
    padding: 2%;
    position: absolute;
    top: .3%;
    width: 60%;
    }

} 

/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY

   ================================================== */

/*.orbit-wrapper {

	background: #f2f2f2 url('images/loading.gif') no-repeat center center;
     
}*/



#orbit-inside img.orbit-slide {

	width:100%!important;

	max-width:100%!important;

	height:auto;

}

#orbit-inside a {

	display:block;

	width:100%;

}



/* CONTAINER

   ================================================== */



div.orbit-wrapper {

    height: 1px;

    position: relative;
    
}



div.orbit {

    width: 1px;

    height: 1px;

    position: relative;

    overflow: hidden; }

    

div.orbit.with-bullets {

    margin-bottom: 40px;

}



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: 100%;

    height: 100%; }



/* 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; }



span.rotator {

    display: block;

    width: 40px;

    height: 40px;

    position: absolute;

    top: 0;

    left: -20px;

    background: url(images/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(images/timer-black.png) repeat 0 0; }



span.pause {

    display: block;

    width: 40px;

    height: 40px;

    position: absolute;

    top: 0;

    left: 0;

    background: url(images/pause-black.png) no-repeat;

    z-index: 4;

    opacity: 0; }



span.pause.active {

    background: url(images/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 {

    z-index: 1000;

	padding: 7px 0;

    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: 50%;

    margin-top: -50px;

    cursor: pointer; }



div.slider-nav span.right {

    right: 0; }



div.slider-nav span.left {

    left: 0; }



    

/* FLUID LAYOUT

   ================================================== */

.orbit .fluid-placeholder {

	visibility: hidden;

	position: static;

	display: block;

	width: 100%; }



.orbit, .orbit-wrapper {

	width: 100% !important; }



.orbit-bullets {

    position: absolute;

    z-index: 1000;

    list-style: none;

    top: 85%;

    left: 44%;

    margin-right: 1.5em;

    padding: 0; 

	/*margin:0 0 25px;*/ }

	

.has-thumbs {

	position:relative;

	float:left;

	margin:-40px 0 20px 0;

	left:0;

	bottom:0;

	width:100%;

	padding:3px 0 0; }	



.orbit-bullets li {

    float: left;

    margin-left: 5px;

    cursor: pointer;

    color: #999;

    text-indent: -9999px;

    width: .7em;

    height: .7em;

    overflow: hidden; }



.orbit-bullets li.has-thumb {

    background: none;

    width: 20%;

    height: 80px;

	margin:0 0 3px; }