#pageBanners{ padding:0; position:relative ; height:600px; background-size:cover; background-position:50% 50%;}
.screen #pageBanners{ width:100%; margin:2px auto  0px auto;  }
.mobile  #pageBanners{ width:100%; margin:82px auto 10px auto; padding:0; height:200px;  }

@media screen and ( min-height: 600px ) and (orientation:landscape) {  
.screen #pageBanners{ height:400px;}
}

@media screen and ( min-height: 700px ) and (orientation:landscape) {  
.screen #pageBanners{ height:400px; }
}

@media screen and ( min-height: 800px ) and (orientation:landscape) {  
.screen #pageBanners{ height:420px; }
}

@media screen and ( min-height: 900px ) and (orientation:landscape) {  
.screen #pageBanners{  height:590px; }
}


@media screen and (orientation:portrait) { 
.mobile #pageBanners{ margin:81px auto 10px auto; height:200px; width:100%;   }
}

@media screen and (orientation:landscape) { 
.mobile #pageBanners{ margin:81px auto 10px auto; height:280px; width:100%;}
}


@media screen and  ( min-height: 800px ) and (orientation:portrait) { 
.mobile #pageBanners{ margin:81px auto 10px auto; height:360px; width:100%;  }
}

@media screen and  ( min-width: 800px ) and (orientation:landscape) { 
.mobile #pageBanners{ margin:81px auto 10px auto; height:380px; width:100%;}
}


.screen #pageBanners p{ 
position:absolute; top:50%; top:calc(50% - 50px); left:0;   text-align:center ; width:100%; height:50px; 
letter-spacing:-4px; word-spacing:2px;  display:none
 }
		.screen #pageBanners p strong{
font-weight: normal;
font-size:50px;
color:#fff;
display: block;
text-align:center;
text-shadow:1px 1px 0px #000;
 font-family:"Spinnaker" ,Arial 
}/*title*/
	.screen #pageBanners p em{
font-size:22px;
color:#fff;
display: block;
text-align:center;
font-style:normal;font-weight: 100;
text-shadow:1px 1px 0px #000;
font-family:"Spinnaker",Arial 
} /*heading */
	
 .mobile #pageBanners p{ display:none}  

/*mobile spacer */
#pageBannerNone{ height:80px; text-indent:-20000px;}


#bannerWrap{
padding: 0;
position:relative;
overflow: hidden ;  background-color:#fff
}
 

#bannerWrap{ margin:2px auto 30px auto;  width:100%; }

.screen #bannerWrap{  height:500px; }
@media screen and ( min-height: 600px ) and (orientation:landscape) {  .screen #bannerWrap{  height:400px; }}
@media screen and ( min-height: 700px ) and (orientation:landscape) {  .screen #bannerWrap{  height:500px; }}
@media screen and ( min-height: 800px ) and (orientation:landscape) {  .screen #bannerWrap{  height:700px; }}




 
#banners{ height:100%; width:100%;  margin:0; z-index:1 } 
#banners li { width:50%; height:100%;  position:relative; margin:0; padding:0; z-index:1; background-size:cover; background-position:50% 50%; display:block; float:left  } 
.screen #banners li:first-child { border-right:1px solid #fff}
.screen #banners li:last-child { border-left:1px solid #fff}



.bannersVideo{ position:absolute; left:0px; top:0px; height:100%; z-index:0;}

/* text inner  */
#banners li div {
position:absolute;
height:100%;
width:100%;
background-repeat:repeat;
overflow:hidden;
z-index:500;
display:none;
background-image: url(../images/banners/transGray.png)
}
 
 

#banners li a , #banners li h5  {
display:block;
padding:0  0px;
width:100%; 
margin:0 auto;
position: relative;
top: 50%; height: auto;
 -ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); 

}

 


/* default screen*/
#banners li a strong , 
#banners li h5 strong{
display:block;
color:#fff;
padding:0px 0px; 
opacity:0;
filter: alpha(opacity=0);text-shadow:1px 1px 3px  #333;
} 

#banners li   span{
clear:both;
display:block; 
padding: 0px  0px 0  0px  ;
opacity:0;color:#FFFFFF;
filter: alpha(opacity=0);text-shadow:1px 1px 1px  #000;
}
 
 
.screen #banners li a strong , 
.screen #banners li h5 strong{
font-size:50px; 
text-transform:uppercase; 
font-family: "Spinnaker", Helvetica, sans-serif; letter-spacing:4px; word-spacing:2px;
font-weight: 500; 
}

.screen #banners li a span , 
.screen #banners li h5 span{
font-weight: 100;font-size:24px;
font-family:   "Spinnaker",Helvetica, Verdana, Arial, sans-serif; letter-spacing:0px;
}

.screen #banners   li:first-child a strong, .screen #banners    li:first-child a span{ text-align:right; color:#fff ; padding:0 10% 0 0 ;}
.screen #banners   li:last-child a strong, .screen #banners li:last-child a span{ text-align:left; color:#fff; padding:0 0 0 10%;}




/* read more*/
#banners li  em {
border-radius:3px;
border:2px solid #fff;
padding:12px 0px;
text-align:center;
font-style:normal;
display:block;
width:150px;
font-size:14px;
text-transform:uppercase;
text-shadow:1px 1px 2px  #000;
color:#FFFFFF;
background-repeat:repeat;
font-family:"Spinnaker",Arial, Helvetica, sans-serif;
opacity:0;
filter: alpha(opacity=0);
font-weight: 400;
letter-spacing: 0px;
} 
#banners li em:hover {
background-repeat:repeat;
background-color:#424d59;
border-color:#424d59
}

.screen #banners   li:first-child em{
margin:20px 10% 0 0;
float:right;
/*background-color:#006699*/
}
.screen #banners   li:last-child em{
margin:20px  0 0 10%;
float: left;
/*background-color:#006699*/
}







/*mobile */
.mobile #bannerWrap{ background-color:#fff; overflow:hidden}
.mobile #bannerWrap li{border: none}
@media screen and (max-device-width : 700px)   and  (orientation:portrait)  {  /* phone portrait - stacked     */
.mobile #bannerWrap{ margin:81px auto 20px auto; height:500px; width:100%;} 
.mobile  #bannerWrap li{ width:100%; height:250px;  }
.mobile  #bannerWrap li{ border-bottom:4px solid #fff; } 
}

@media screen  and (max-device-width : 700px)  and (orientation:landscape)  {  /* phone landscape - 50/50    */
.mobile #bannerWrap{ margin:81px auto 20px auto; height:300px; width:100%;} 
.mobile  #bannerWrap li{ width:50%; height:300px; } 
.mobile  #bannerWrap li:first-child{ border-right:2px solid #fff;} 
}

@media screen  and (min-device-width : 700px)   and (orientation:portrait)  { /* ipad 50/50  */
.mobile #bannerWrap{ margin:81px auto 20px auto; height:340px; width:100%;} 
.mobile  #bannerWrap li{ width:50%; height:340px; }
.mobile  #bannerWrap li:first-child{ border-right:4px solid #fff;} 
}
 
@media screen  and (min-device-width : 700px)   and (orientation:landscape)  { /* ipad 50/50  */
.mobile #bannerWrap{ margin:81px auto 20px auto; height:350px; width:100%;} 
.mobile  #bannerWrap li{ width:50%; height:350px;  } 
.mobile  #bannerWrap li:first-child{ border-right:4px solid #fff;} 
}
 

.mobile #banners li div { padding: 0 5%}
.mobile #banners li a , .mobile #banners li h5  {  
display:block;
padding:0%;
width:100%;  
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 strong , 
.mobile #banners li h5 strong{
font-size:34px; 
text-transform:uppercase; text-shadow:1px 1px #000;
font-family:   "Lato", Arial,  Helvetica, sans-serif; letter-spacing:-1px; word-spacing:2px;
font-weight: bold; 
}
.mobile #banners li a span , 
.mobile #banners li h5 span{
display:none
/*padding:6px  0px 0  0px  ;
font-weight: 500;font-size:22px; text-shadow:1px 1px #000;
font-family:  "Lato",Helvetica, Verdana, Arial, sans-serif; letter-spacing:0px;*/
}

/*.mobile #banners   li:first-child a strong, .mobile #banners    li:first-child a span{ text-align:left; color:#fff}
.mobile #banners   li:last-child a strong, .mobile #banners li:last-child a span{ text-align:left; color:#fff}*/
.mobile #banners li  em { 
font-family: Arial,  Helvetica, sans-serif;
color:#333333; border:none;    padding:10px  0px; width:180px; margin-top:16px; font-weight:bold; font-size:14px; letter-spacing:-1px;text-shadow: 1px 1px #fff; background-image:url(../images/bgTrans.png)}