#carousel { position:relative}
#carousel  hr{ background:none; height:0px; border:none; margin:0;} 
#carousel , #carousel li { list-style:none; margin:0; padding:0; z-index:1}  	
#carousel li { 
display:block;  
position:relative; 
width:100%; 
padding:0 0 0 0 ;
margin:  0px auto;  clear: both;
}  


#carousel li .imgWrap.carouselVideo{ position:relative}
#carousel li .imgWrap.carouselVideo em.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;
}


/*global */
 
#carousel.slider3 li .imgWrap ,
#carousel.slider4 li .imgWrap{
background-position: 50%  50%;
background-size:cover;
background-repeat:no-repeat;
border-radius:0px;
text-indent:-100000px; 
} 

/*moreLink over ride*/
#carousel li .textWrap  .moreLink, a.moreLink{
display:block;
width:200px; 
text-align:center;
padding:10px 5px; 
clear:both;  
border-radius:0px; letter-spacing:1px;
font-size:12px; font-weight:bold;
text-transform:uppercase ;
-webkit-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out; font-family:"Montserrat" , Arial, sans-serif;
transition:all 0.1s ease-in-out; cursor:pointer;
}

#carousel.slider3 li .textWrap .moreLink, a.moreLink{ opacity:0.95 ; margin:20px auto; color:inherit; border:1px solid ; border-color:inherit; }
#carousel.slider4 li .textWrap .moreLink, a.moreLink{ opacity:0.95 ; margin:20px auto; color:inherit; border:1px solid ; border-color:inherit; }
 
#carousel.slider3 li .moreLink:hover, #carousel.slider4 li .moreLink:hover{opacity:1 }

  
#carousel.slider3, #carousel.slider4{ 
display:block;
width:100%;
height:auto; 
overflow:hidden;
clear:both;
margin:20px auto 20px auto;
position:relative;  
}

#gradWrapper{ width:100%; height:1px; position:relative; z-index:1111; }

#carousel #gradFadeLeft, #carousel #gradFadeRight{ display:block;  
height:218px; width:70px; background:none;  position:absolute; 
background-image:url(../images/carousel/mobileGrad.png); background-position:left top; background-repeat: no-repeat ; 
}
#carousel #gradFadeLeft{ left:0px; top:0px; 
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(-180deg) } 
#carousel #gradFadeRight{ right:0px; top:0px} 

@media screen and ( min-width: 320px )   { 

}


#carousel.slider3 ul, #carousel.slider4 ul{ width:6000px;   display:block;  }
#carousel.slider3 li , #carousel.slider4 li { width:320px; margin:0 8px 0 5px; float:left; display:block; clear:none;border:0px solid #e1e1e1;   } 
#carousel.slider3 li  div.innerSection,#carousel.slider4 li  div.innerSection{ width:100%; margin:0 auto; padding:0px;   } 

#carousel.slider3 li .imgWrap , #carousel.slider4 li .imgWrap{
background-position: 50%  50%;
background-size:cover;
background-repeat:no-repeat;
border-radius:0px;
text-indent:-100000px; 
}
#carousel.slider3 li .imgWrap {  display:block;  margin:0  0;   width:100%; height:180px;  }

#carousel.slider3 li:hover .imgWrap, #carousel.slider4 li:hover .imgWrap{opacity:1}

#carousel.slider3 li .imgWrap strong,  #carousel.slider4 li .imgWrap strong{ position:absolute; left:-2000px }
#carousel.slider3 li .textWrap , #carousel.slider4  li .textWrap{ padding-left:20px;}
#carousel.slider3 li .textWrap h1, #carousel.slider4  li .textWrap h1{ display:block;   text-align:left; font-size:14px; font-family:"Montserrat" , Arial, sans-serif; margin:10px auto; font-weight: bold;   }
#carousel.slider3 li .textWrap h2, #carousel.slider4  li .textWrap h2{ display:block; color:#888;   text-align:left; font-size:18px; font-family:"Montserrat" , Arial, sans-serif; margin:10px auto; font-weight:600;   }
#carousel.slider3 li .textWrap p, #carousel.slider4 li .textWrap p{    font-size:16px; margin:6px auto;   text-align:left;    } 

#carouselControls{ clear:both; width:100%; height:1px; position:relative; margin:0 auto; opacity:0;z-index:1001}
#carouselControls span{
position:absolute;
top:90px;
height:40px;
width:40px;
border-radius:100%;
background-size:25px;
background-repeat:no-repeat;
background-position:50% 50% ;
cursor:pointer;
opacity: 0.8;  
}
#carouselControls span:hover{ opacity: 1}
#carouselControls span:first-child{
left:5px; 
background-image:url(../images/carousel/left.png)
}
#carouselControls span:last-child{
right:5px; 
background-image:url(../images/carousel/right.png)
}