#carousel , #carousel li { list-style:none; margin:0; padding:0; }
 
.screen #carousel{
display:block;
width:100%;
height:auto; 
overflow:hidden;
clear:both;
margin:50px auto 50px auto;
position:relative;  
}
 
 

.screen #carousel #carouselControls{ position:relative; height:0px; width:100%;  }
.screen #carousel #carouselControls span{
position:absolute;
top:42px;
display:block;
width:30px;
height:40px;
background-color:#fff;
z-index:5;
background-repeat:no-repeat;
background-position:50% 50%;display:none; cursor:pointer;
}

.screen #carousel #carouselControls span:first-child{
left:2px;
background-image:url(../images/icons/arrowLGrayThin.png)
}

.screen  #carousel #carouselControls span:last-child{
right:2px;
background-image:url(../images/icons/arrowRGrayThin.png)
}

.screen #carousel ul{ width:6000px;   display:block;   }

.screen #carousel li { 
display:block; float:left; 
margin: 0 10px 0 0;
overflow:hidden;
border:0px solid;
border-color:#e9e9e9;
position:relative; 
/* width:245px;min-height:245px;  4 up */
width:324px;height:324px;
} 


.screen #carousel li .imgWrap{width:100%;height:auto; display:block; float:left; margin:0; text-align:left; overflow:hidden; }
.screen #carousel li img{ padding:0px; display:block; margin: 0 ; width:100%; height: auto; z-index:1; border:0px solid #e8e8e8	 }  

.imgWrap{ position:relative} 
.videoButton{
position:absolute;
height:100%;
width:100%;
left:0;
top:0;
background-image:url(../images/videoBtn.png);
background-position:50% 50%;
opacity:0.6;
z-index:10001; 
cursor:pointer;
background-repeat: no-repeat;
} 

.screen #carousel li:hover  img{ 
 opacity:0.8; 
}


/* all text  */
.screen #carousel li .textWrap{
margin:0px auto 0 auto;
width:100%;
position:absolute;
left:0px;
top:0px;
height:100%;
padding:30px 20px 0 20px;
text-align: center;
display:block;
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
cursor:pointer;
} 

.screen #carousel li:hover .textWrap{
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
} 

.screen #carousel li  strong{
color: #fff;
font-size:1.4em;
font-weight:normal;
text-align: center;
text-transform: uppercase; letter-spacing:-1px;
/*text-shadow:1px 1px #888;*/
font-family: "Open Sans", Arial, Helvetica, sans-serif
}

.screen #carousel li  p{ color: #fff; text-align: center; font-size:1.0em;font-family: "Open Sans", Arial, Helvetica, sans-serif; margin-top:12px; clear:both}

 
.screen #carousel hr{ display:none;}


screen #carousel .moreLink{
display:none; 
}

.screen #carousel .moreLink{
display:block;
width:80%;
border:1px solid #fff;
text-align:center;
padding:10px 5px;
position:absolute;
bottom:20px;
left:10%;
font-size:0.75em; font-weight:bold;
text-transform:uppercase 
}
.screen #carousel .moreLink:hover{ background-color:#fff; color:#333333; }

 .mobile #carousel .moreLink{ display:none}

.mobile  #carousel { width:100%; height:auto; margin: 25px  0px ;  display:block; clear:both;  }
.mobile  #carousel ul { width:100%; height:auto; padding:0 0px; position:relative}
 
 

@media only screen  and (max-width: 500px ) {
.mobile  #carousel li{ width:100%; margin:0 0 0px  0;padding-bottom:0px;   height:auto ; clear:both;  text-align:left  }
.mobile  #carousel li:last-child{ }
.mobile  #carousel li .imgWrap{ overflow:hidden; height:auto ;  display:block;  width:100%; } 
.mobile  #carousel li  .textWrap{ display:block;  width:100%; padding:4px 5px 0 0px;   } 
.mobile  #carousel li img{width:100%; height:auto ; }
}			

@media only screen  and (min-width: 500px ) {
.mobile  #carousel li{ width:48%; margin:0 0 0px  0;  height:auto ; clear:none;  text-align:left; display: block;   }
.mobile  #carousel li:nth-child(2n+1){ clear:both;float:left; }
.mobile  #carousel li:nth-child(2n+2){ float:right  ; }
.mobile  #carousel li .imgWrap{ overflow:hidden; height:auto ;  display:block;  width:100%; } 
.mobile  #carousel li  .textWrap{ display:block;  width:100%; padding:4px 5px 0 0px;   } 
.mobile  #carousel li img{width:100%; height:auto ; }
}			

.mobile #carousel  li hr{ border:10x solid #e9e9e9; background:none; margin: 10px auto 20px auto; padding:0; height:2px}
.mobile #carousel  li:last-child hr{ display:none;}

.mobile #carousel li  strong{ display:block; text-transform:uppercase; font-size:1.1em; margin:0; padding:0}
.mobile #carousel li  p{ font-size:1.0em; margin:0; padding:0}