#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 ul{ width:6000px;   display:block;   }

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


.screen #carousel li:hover{   }

.screen #carousel li .imgWrap{width:100%;height:auto;  display:block; 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  a.textWrap, 
.screen  #carousel li  p.textWrap{ display:block;  width:100%; padding:0px 10px  ; margin:15px 0 0 0;font-size:14px;  display:block; clear:both; color:#333333; text-align:center   }
.screen #carousel li  strong{
font-family:"Open Sans";
display:block;
text-transform:uppercase;
font-size:16px;
line-height:1em;
margin:  0 0 5px 0;
padding: 0;text-align:center  ;
letter-spacing:0px;
color: #006699
}

 
.screen #carousel hr{ display:none;}
 

.screen #carousel .moreLink{
display:block;
width:80%; 
text-align:center;
padding:10px 5px; 
margin:14px 10% 0px 10%;
clear:both;  
border-radius:2px; letter-spacing:1px;
font-size:0.8em; font-weight:bold;
text-transform:uppercase ;
background:#fff; color:#fff;
-webkit-transition:border 0.4s ease-in-out;
-moz-transition:border 0.4s ease-in-out;
-o-transition:border 0.4s ease-in-out;
transition:all 0.4s ease-in-out;  
}
.screen #carousel li:hover .moreLink{
background: #fff; border:1px solid #444;
color:#333; 
}
.screen #carousel li .moreLink:hover{ background-color:#444; color:#FFFFFF}

 
 
 

.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}
.mobile  #carousel li .imgWrap{ overflow:hidden; height:auto ;  display:block;  width:100%; } 
.mobile  #carousel li  img {  height:auto ;  display:block;  width:100%; } 
.mobile  #carousel li  a.textWrap, 
.mobile  #carousel li  p.textWrap{ display:block;  width:100%; padding:0px 10px  ; margin:16px 0 0 0;font-size:16px;  display:block; clear:both; color:#333333;   }
.mobile #carousel li  strong{ font-family:"Open Sans" ;display:block; text-transform:uppercase; font-size:20px; line-height:1em; margin:  0 0 10px 0; padding: 0; letter-spacing:-1px; color: #006699 }
 

@media only screen  and (max-width: 500px ) {
.mobile  #carousel li{ width:100%; margin:0 0 20px  0;   height:auto ; clear:both;  text-align:left  }
.mobile  #carousel li:last-child{ } 
}			

@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 hr{ border: none; background:none; margin:0 auto; padding:0; height:40px}
.mobile #carousel  li:last-child hr{ display:none;}



.mobile #carousel .moreLink{
display:none
/*display:block; width:180px;  
text-align:center;
padding: 8px 0px; 
margin:20px auto;
clear:both; border:1px solid #777;
border-radius:2px; letter-spacing:1px;
font-size:14px; font-weight:bold;
text-transform:uppercase ;
background:#fff; color: #006699; */
}