/* hero banner styles for metlife.com/careers | 5-16-14 - RHCIV */

#layoutDefHomepage #leftContent2ndRowCol1-3 {margin:0px 0 0 15px !important}
.slide {width:663px; overflow:hidden; color:#fff}
#slides-controls { height:20px; bottom:35px;  position:relative; padding:5px; text-align:center;float:right;} /* width & left position removed and added float:right*/
#slides-controls a {margin:5px; width:12px; height:12px; background:#fff; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; border:1px solid #82858a; text-indent:-9000px; display:block; overflow:hidden; float:left}
#slides-controls a:hover {background:#808080}
#slides-controls a.highlight {background:#000; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; border:1px solid #fff}


.BigCarouselBanner {height:281px; width:663px; float:left;overflow:hidden;position:relative;}
.shortCarouselBanner {height:150px; width:663px; float:left;border:1px solid #c3cce1;position:relative;}
.BigCarouselSlides{height:281px; position:relative;}
.shortCarouselSlides{height:150px; width:663px; position:relative;overflow:hidden;}
.BigCarouselslide{height:281px;}
.shortCarouselslide{height:150px;}

.promoBanner {height:130px; width:210px; float:left;border:1px solid #c3cce1;position:relative;}

.promoSlides{height:130px;width:210px;overflow:hidden;}

.promoBanner .promoSlide{height:130px; width:210px;}
.ctaButton a:link,.ctaButton a:visited,.ctaButton a:active{color:White;font-weight:bold;}
.ctaButton a{
max-width:165px;
word-wrap:break-word;
display: block;float:left;
font:bold 16px Arial;
border: 1px solid #CCCECF;
padding: 10px 20px;
text-decoration:none;
text-align: center; 
position:absolute;bottom:10px;left:10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:#2397df url("/assets/hr/careers/btnGradiantBg.jpg") repeat-x top left;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#53ADE6), to(#2296DF));
background: -webkit-linear-gradient(#53ADE6, #2296DF);
background: -moz-linear-gradient(#53ADE6, #2296DF);
background: -ms-linear-gradient(#53ADE6, #2296DF);
background: -o-linear-gradient(#53ADE6, #2296DF);
background: linear-gradient(#53ADE6, #2296DF);
}
.ctaButton a:hover{
background:#2397df url("/assets/hr/careers/btnGradiantBg.jpg") repeat-x top left;
background: #2296DF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2296DF), to(#53ADE6));
background: -webkit-linear-gradient(#2296DF, #53ADE6);
background: -moz-linear-gradient(#2296DF, #53ADE6);
background: -ms-linear-gradient(#2296DF, #53ADE6);
background: -o-linear-gradient(#2296DF, #53ADE6);
background: linear-gradient(#2296DF, #53ADE6);
}
.ctaButton span{
max-width:165px;
word-wrap:break-word;
display: block;float:left;
font:bold 16px Arial;
border: 1px solid #CCCECF;
padding: 10px 20px;
text-decoration:none;
text-align: center; 
position:absolute;bottom:10px;left:10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:#2397df url("/assets/hr/careers/btnGradiantBg.jpg") repeat-x top left;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#53ADE6), to(#2296DF));
background: -webkit-linear-gradient(#53ADE6, #2296DF);
background: -moz-linear-gradient(#53ADE6, #2296DF);
background: -ms-linear-gradient(#53ADE6, #2296DF);
background: -o-linear-gradient(#53ADE6, #2296DF);
background: linear-gradient(#53ADE6, #2296DF);
}


.BigCarouselBanner{
position:relative;
height:281px;
border-radius:6px;
}
.borderLeftTop{
position:absolute;
height:6px;
width:6px;
top:0;
left:0;
background:url("/assets/hr/careers/cornerImages.png") repeat scroll 0 0 transparent;
z-index:11;
}
.borderRightTop{
position:absolute;
height:6px;
width:6px;
top:0;
right: 0px;
z-index:11;
background:url("/assets/hr/careers/cornerImages.png") repeat scroll 0 -8px transparent
}
.borderLeftBottom{
position:absolute;
height:6px;
width:6px;
bottom:0;
left:0;
background:url("/assets/hr/careers/cornerImages.png") repeat scroll 0 -16px transparent;
z-index:11;
}
.borderRightBottom{
position:absolute;
height:6px;
width:6px;
bottom:0;
right:0px;
background:url("/assets/hr/careers/cornerImages.png") repeat scroll 0 -24px transparent;
z-index:11;
}
.promoborderLeftTop{
	position:absolute;
	height:6px;
	width:6px;
	top:-1px;
	left:-2px;
	background:url("/assets/hr/careers/shortBannerBorders.png") repeat scroll 0 0 transparent;
	z-index:11;
}
.promoborderRightTop{
	position:absolute;
	height:6px;
	width:6px;
	top:-1px;
	right: -2px;
	z-index:11;
	background:url("/assets/hr/careers/shortBannerBorders.png") repeat scroll 0 -8px transparent ;
}
.promoborderLeftBottom{
	position:absolute;
	height:6px;
	width:6px;
	bottom:-1px;
	left:-2px;
	background:url("/assets/hr/careers/shortBannerBorders.png") repeat scroll 0 -16px transparent ;
	z-index:11;
}
.promoborderRightBottom{
	position:absolute;
	height:6px;
	width:6px;
	bottom:-1px;
	right:-2px;
	background:url("/assets/hr/careers/shortBannerBorders.png") repeat scroll 0 -24px transparent ;
	z-index:11;
}	
.shortborderLeftTop{
	position:absolute;
	height:6px;
	width:6px;
	top:-1px;
	left:-2px;
	background:url("/assets/hr/careers/shortBannerBorders.png") repeat scroll 0 0 transparent;
	z-index:11;
}
.shortborderRightTop{
	position:absolute;
	height:6px;
	width:6px;
	top:-1px;
	right: -2px;
	z-index:11;
	background:url("/assets/hr/careers/shortBannerBorders.png") repeat scroll 0 -8px transparent;
}
.shortborderLeftBottom{
	position:absolute;
	height:6px;
	width:6px;
	bottom:-1px;
	left:-2px;
	background:url("/assets/hr/careers/shortBannerBorders.png") repeat scroll 0 -16px transparent;
	z-index:11;
}
.shortborderRightBottom{
	position:absolute;
	height:6px;
	width:6px;
	bottom:-1px;
	right:-2px;
	background:url("/assets/hr/careers/shortBannerBorders.png") repeat scroll 0 -24px transparent;
	z-index:11;
	}
.BigCarouselslide  >a{
	display:block;
	width:100%;
	height:100%;
}
.BigCarouselslide  >a img{
	width:100%;
	height:100%;
}
.promoSlide >a{
	display:block;
	width:100%;
	height:100%;
}
.promoSlide >a img{
	width:100%;
	height:100%;
}