  
 #bannerWrap{
padding: 0;
position:relative;
overflow: hidden ; 
opacity:0;
filter: alpha(opacity=0);
}
 
/*.screen #bannerWrap{ margin:1px auto 30px auto; height:600px; width:1920px; max-width:100%;}
@media screen and ( max-width: 1500px ) and (orientation:landscape) {  
.screen #bannerWrap{ height:470px; width:1920px;}
}
.mobile #bannerWrap{ margin:81px auto 20px auto; height:auto; width:100%;}*/

.screen #bannerWrap{ margin:1px auto 30px auto;  width:100%; background-color:#fff}

.screen #bannerWrap.imageBanners{ height:400px;  }
.screen #bannerWrap.videoBanners{ height:400px;   }


@media screen and ( min-height: 600px ) and (orientation:landscape) {  
.screen #bannerWrap.imageBanners{ height:440px;}
.screen #bannerWrap.videoBanners{ height:530px}
}

@media screen and ( min-height: 700px ) and (orientation:landscape) {  
.screen #bannerWrap.imageBanners{ height:450px; }
.screen #bannerWrap.videoBanners{ height:530px; }
}

@media screen and ( min-height: 800px ) and (orientation:landscape) {  
.screen #bannerWrap.imageBanners{ height:570px; }
.screen #bannerWrap.videoBanners{ height:530px; }
}

@media screen and ( min-height: 900px ) and (orientation:landscape) {  
.screen #bannerWrap.imageBanners{  height:600px; }
.screen #bannerWrap.videoBanners{ height:770px;}  
}


@media screen and (orientation:portrait) { 
.mobile #bannerWrap.imageBanners{ margin:81px auto 20px auto; height:250px; width:100%;}
}

@media screen and (orientation:landscape) { 
.mobile #bannerWrap.imageBanners{ margin:81px auto 20px auto; height:300px; width:100%;}
}

#bannersVideo{position:absolute; left:0px; top:-260px; width:100%; z-index:0; } /* neg margin to offset position of actual video*/

#banners{ height:100%; width:100%;  margin:0; z-index:1 } 
#banners li { width:100%; height:100%;  position:relative; margin:0; padding:0; z-index:1; background-size:cover; background-position:50% 50%; position:absolute; left:0; top:0;display:block  } 


/* text inner  */
#banners li div {
position:absolute;
height:100%;
width:100%;
background-repeat:repeat;
overflow:hidden;
opacity:0;
filter: alpha(opacity=0);
z-index:500;
}

#banners li div {background-image:url(../images/banners/transBlack.png);} /* all except blk text */
#banners li.BLACK div {background-image:url(../images/banners/transWhite.png);}
#banners li.NONE div {background:none; display:none;}
 
 

.screen  #banners li a , .screen #banners li h5  {
display:block;
padding:0;
width:1000px;  border:0px solid #ff0000;  
margin:0 auto;
position: relative;
top: 50%; height: auto;
 -ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align:center
}

.mobile #banners li a , .mobile #banners li h5  {  
display:block;
padding:0 4%;
width:100%;  border:0px solid #ff0000;  
margin:0 auto;
position: relative;
top: 50%; height: auto;
 -ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align:center
}
 

/* read more*/
#banners li  em {
border:1px solid ;
border-color: #fff;
padding:8px 0px; text-align:center;
font-style:normal;
display:block; width:110px;
clear:both;
margin:25px auto 0 auto;
font-size:12px;
text-transform:uppercase;
text-shadow:0px 0px;
color:#FFFFFF;
background-repeat:repeat; 
} 
#banners li em:hover { background-image:url(../images/banners/transBlack.png); background-repeat:repeat}
#banners li  em { display:none}


/* default screen*/
#banners li a strong , 
#banners li h5 strong{
display:block;
color:#fff;
padding:0px 0px; 
text-align:inherit
} 

#banners li   span{
clear:both;
text-align:inherit;
display:block;
padding:20px 0px 0 0;
}

.screen #banners li a strong , 
.screen #banners li h5 strong{
font-size:32px; 
font-family:   "Open Sans", Arial,  Helvetica, sans-serif; letter-spacing:4px; word-spacing:1px;
font-weight: 100; text-transform:uppercase;
/*-webkit-transform:scale(1.2.0, 1.0);
-moz-transform:scale(1.2.0, 1.0);
-ms-transform:scale(1.2.0, 1.0);
-o-transform:scale(1.2.0, 1.0);
transform:scale(1.0,1.2);
*/
}

.screen #banners li a span , 
.screen #banners li h5 span{
font-weight: 100;
font-size:24px;
font-family:  "Open Sans",Helvetica, Verdana, Arial, sans-serif; letter-spacing:1px;
/*-webkit-transform:scale(1.2.0, 1.0);
-moz-transform:scale(1.2.0, 1.0);
-ms-transform:scale(1.2.0, 1.0);
-o-transform:scale(1.2.0, 1.0);
transform:scale(1.2,1.0);
*/
}

/* default phone   */
.mobile  #banners li a strong , 
.mobile #banners li h5 strong{
font-size:25px;
font-family:   Helvetica, sans-serif; letter-spacing:-1px;
font-weight:300;
line-height:1em;
} 
.mobile #banners li   span{
display:block;
font-size:18px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-weight:300;
line-height:1em;
}
 

#banners li.WHITE  a strong ,  #banners li.WHITE  h5 strong ,  #banners li.WHITE  span {  color:#FFFFFF; text-shadow:  1px 1px 1px  #000  ;  } 
#banners li.BLACK  a strong , #banners li.BLACK  h5 strong ,  #banners li.BLACK  span {   color:#000 ;  text-shadow:  1px 1px 1px  #999  ; } 
#banners li.BLUE  a strong , #banners li.BLUE  h5 strong ,  #banners li.BLUE  span {   color: #006699  ;   text-shadow:  1px 1px 1px  #222  ;} 
#banners li.PINK  a strong ,  #banners li.PINK  h5 strong ,  #banners li.PINK  span {   color: #FF3366 ;   text-shadow:  1px 1px 1px  #222  ;} 
#banners li.NONE  a strong ,  #banners li.NONE  h5 strong ,  #banners li.NONE  span { position:absolute;right:-10000px; font-size:0px } 



@media screen and   (orientation:landscape) {  
}

 

.bannerControls{
display:block;
clear:both;
width:50px;
height:100%;
position: absolute; top:0px;
z-index:2;
}

#bannerControlPrevious{ left:10px;}
#bannerControlNext {right:10px}

.bannerControls span {
display:block; 
background-color:#111;
border: 0px solid #fff;
text-decoration:none;
cursor:pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width:50px;
height:50px;
position:absolute;
top:50%;
margin-top:-25px;
z-index:2;
opacity:0;
filter: alpha(opacity=0);
text-indent:-10000px;
} 
#bannerControlPrevious span{
background-position:20px 50%;
background-image: url(../images/icons/arrowLwhite.png);
}
#bannerControlNext span {
background-position:50% 50%;
background-image: url(../images/icons/arrowRwhite.png);
}  
