@charset "utf-8";

img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/* ---- Breakpoints set up for Bootstrap ---- */

/* ---- EXTRA NARROW BANNER WIDTH (<560px) ---- */

@media only screen and (max-width: 560px) {

}

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

}

/* -- Extra Small Layout - 767px and below -- */

.js div#preloader { 
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #fff;
}
.js div#preloader .loader-container { 
    position: inherit;
    top: 30%;
    left: 50%;
    width: 150px;
    margin-left: -75px;
}
.js div#preloader .loader-container img {
    display: block;
    margin: 30px auto;
}

/*--- HEADER ---*/
#header {
	height: 60px;
	background-color: #fff;
	-moz-box-shadow: 0 0px 8px #999;
	-webkit-box-shadow: 0 0px 8px #999;
	box-shadow: 0 0px 8px #999;
	margin: 0;
	width: 100%;
	position: relative;
	top: 0;
	z-index: 100;
}
.hdr-left {
	height: 40px;
	margin-top: 10px;
	/*margin-left: 0;*/
	padding-left: 0px;
}
.headlogo {
	display: block;
	min-width: 100px;
	height: 40px;
	background: url(../images/xs-voya-logo.png) no-repeat top left;
	border-style: none;
}
.hdr-right {
	height: 40px;
	margin-top: 10px;
	/*margin-left: 0;*/
	padding-left: 0px;
}
.headlogo-client {
	display: block;
	float: right;
	min-width: 169px;
	height: 40px;
	background: url(../images/xs-client-logo.jpg) no-repeat top right;
	border-style: none;
}
.hdr-right * {
	margin: 0;
	overflow: all;
}

/*--- HERO ---*/
#banner {
	background-color: #fff;
}
#bnr-cycler {
	position: relative;
	height: 175px;
	margin: 0 auto;
	overflow: hidden;
}
#bnr-cycler img {
	position:absolute;
	left: -moz-calc(50% - 120px);
	left: -webkit-calc(50% - 120px);
	left: -o-calc(50% - 120px);
	left: calc(50% - 120px);
	z-index:3;
	display: block;
	height: 175px;
	width: 240px;
}
#bnr-cycler img.active {
	z-index:5;
}
.bnr-cta {
	background-color: #9ac1a6;
	padding: 5px;
}
.cta-box {
	text-align: center;
	margin: 0 auto;
}
.cta-inner {}
.cta-inner p {
	font-size: 1.7em;
	line-height: 1.2em;
	font-weight: 400;
	color: #fff;
	margin: 0;
}
.cta-btn-box {
	display: none;
    margin: 0;
}
.voya-btn {
	font-size: .9em;
	width: 100%;
}

/*--- GREY BAR ---*/
#banner-btm {
	background-color: #EDECEC;
}
#banner-btm p {
	margin: 5px;
	font-size: .85em;
	color: #d75426;
	text-align: center;
}

/*--- SECTION SELECTOR ---*/
#section-box {
	background-color: #ffae56;
}
.row.sec-row > [class^="col-"] {}
.row.sec-row > [class^="col-"]:nth-child(2) {}
#section-box .sec-box, #section-box .sec-title {
	
}
#section-box .sec-box {
	background: #f58000;
	background: -moz-linear-gradient(top,  #f58000 70%, #d75426 110%);
	background: -webkit-linear-gradient(top,  #f58000 70%,#d75426 110%);
	background: linear-gradient(to bottom,  #f58000 70%,#d75426 110%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f58000', endColorstr='#d75426',GradientType=0 );
	margin: 15px 30px;
	padding: 6px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out; /* IE10 is actually unprefixed */
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
#section-box .sec-box.last {}
#section-box .sec-box:hover {
	background: #d75426;
	cursor: pointer;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out; /* IE10 is actually unprefixed */
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
#section-box .sec-title {
	background-color: #d75426;
	padding: 1px;
}
#section-box h2 {
	text-align: center;
}
#section-box i {
	color: #fff;
	text-align: center;
	margin: 0 auto;
	width: 25%;
	float: left;
}
#section-box p {
	display: block;
	float: left;
	color: #fff;
	text-align: center;
    text-transform: uppercase;
	font-weight: 700;
	font-size: 1.15em;
	margin: 10px 0;
	width: 60%;
}

/*--- CONTACT BAR ---*/
#contact-box {
	background-color: #af8299;
}
.row.cont-row > [class^="col-"] {
	height: auto;
}
.row.cont-row > [class^="col-"]:first-child {
	background-color: #94225c;
}
#contact-box .cont-title {
	margin: 0px 30px;
	padding: 7px;
}
#contact-box .cont-box {
	background: #f58000;
	background: -moz-linear-gradient(top,  #b73f7c 70%, #94225c 110%);
	background: -webkit-linear-gradient(top,  #b73f7c 70%,#94225c 110%);
	background: linear-gradient(to bottom,  #b73f7c 70%,#94225c 110%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b73f7c', endColorstr='#94225c',GradientType=0 );
	margin: 15px 30px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
#contact-box .cont-box:hover {
	background: #94225c;
	text-decoration: none;
	cursor: pointer;
}
#contact-box .cont-box, #contact-box .cont-box:hover {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out; /* IE10 is actually unprefixed */
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
#contact-box .cont-box a {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
}
#contact-box .cont-box a:visited, #contact-box .cont-box a:focus, #contact-box .cont-box a:active {
	color: #fff;
	outline: 0;
	text-decoration: none;
}
#contact-box .cont-box a:hover {
	text-decoration: none;
}
#contact-box .cont-title p, #contact-box .cont-box p {
	color: #fff;
	margin:0 auto;
	text-align: center;
	font-size: 1.05em;
}
#contact-box .cont-box p {
	padding: 10px 0;
}

/*--- DISCLOSURE BOX ---*/
#disclosure-box {
	background-color: #edecec;
	height: 100%;
	overflow: hidden;
}
#disclosure-box p {
	color: #444;
	font-size: .85em;
	margin: 20px 30px;
}
#disclosure-box p a {
	text-decoration: none;
	color: #888;
}
#disclosure-box p a:visited, #disclosure-box p a:focus, #disclosure-box p a:active {
	text-decoration: none;
	color: #888;
	outline: 0;	
}
#disclosure-box p a:hover {
	text-decoration: underline;
	color: #333;
}


/* -- Small Layout - 768px and up -- */

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

	.js div#preloader { }
	.js div#preloader .loader-container {
	    top: 40%;
	    width: 300px;
	    margin-left: -150px;
	}
	.js div#preloader .loader-container img {
	    display: inline;
	    margin: 10px;
	}

	/*--- HEADER ---*/
	#header {
		height: 60px;
		position: relative;
	}
	.hdr-left {
		height: 50px;
		margin-top: 5px;
	}
	.headlogo {
		min-width: 125px;
		height: 50px;
		background: url(../images/hdr-voya-logo.png) no-repeat top left;
	}
	.hdr-right {
		height: 50px;
		margin-top: 5px;
	}
	.headlogo-client {
		min-width: 190px;
		height: 50px;
		background: url(../images/hdr-client-logo.jpg) no-repeat top right;
	}
	
	/*--- HERO ---*/
	#banner {
		height: 225px;
	}
	#bnr-cycler {
		height: 225px;
	}
	#bnr-cycler img {
		left: 0;
		height: 225px;
		width: 310px;
	}
	.bnr-cta {
		background-color: transparent;
		height: 225px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.cta-box {
		text-align: left;
		margin: 0;
		z-index: 6;
	}
	.cta-inner {
		margin-right: -125px;
		width: 250px;
	}
	.cta-inner p {
		font-size: 1.6em;
		line-height: 1.2em;
		font-weight: 400;
		color: #999;
	}
	.cta-btn-box {
		display: block;
	    margin: 20px 0 0 0;
	}
	.voya-btn {
		font-size: .9em;
		width: auto;
	}

	/*--- GREY BAR ---*/
	#banner-btm p {
		text-align: left;
	}

	/*--- SECTION SELECTOR ---*/
	#section-box {
		background: url(../images/xs-sec-title-bkgd.png) repeat-x;
		background-color: #f58000;
	}
	.row.sec-row > [class^="col-"] {
		height: 120px;
		display: table;
	}
	.row.sec-row > [class^="col-"]:nth-child(2) {
		height: 45px;
	}
	#section-box .sec-box, #section-box .sec-title {
		display: table-cell;
		vertical-align: middle;
		background-position: right;
		background-repeat: no-repeat;
	}
	#section-box .sec-box {
		border: none;
		padding: 10px;
		background-color: transparent;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		background: url(../images/md-sec-btn-bkgd.png) top right no-repeat;
	    -webkit-transition: all 0.5s ease-out;
	    -moz-transition: all 0.5s ease-out;
	    -ms-transition: all 0.5s ease-out; /* IE10 is actually unprefixed */
	    -o-transition: all 0.5s ease-out;
	    transition: all 0.5s ease-out;
	}
	#section-box .sec-box.last {
		background: none;
	}
	#section-box .sec-box:hover {
		border: none;
		background:  url(../images/md-sec-btn-bkgd.png) top right no-repeat #d75426;
	    -webkit-transition: all 0.5s ease-out;
	    -moz-transition: all 0.5s ease-out;
	    -ms-transition: all 0.5s ease-out; /* IE10 is actually unprefixed */
	    -o-transition: all 0.5s ease-out;
	    transition: all 0.5s ease-out;
	}
	#section-box .sec-box.last:hover {
		background: #d75426;
	}
	#section-box .sec-title {
		background-color: #d75426;
	}
	#section-box h2 {}
	#section-box i {
		display: block;
		float: none;
	}
	#section-box p {
		display: block;
		font-size: .85em;
		float: none;
		margin: 5px auto;
	}

	/*--- CONTACT BAR ---*/
	#contact-box {
		background: #b73f7c;
	}
	.row.cont-row > [class^="col-"] {
		height: 60px;
		display: table;
	}
	.row.cont-row > [class^="col-"]:first-child {
		background-color: transparent;
	}
	#contact-box .cont-box, #contact-box .cont-title {
		display: table-cell;
		border: none;
		vertical-align: middle;
		background-position: right;
		background-repeat: no-repeat;
		background: url(../images/contact-arrow.png) center right no-repeat;
	}
	#contact-box .cont-box.last {
		background-image: none;
	}
	#contact-box .cont-box:hover {
		background: url(../images/contact-arrow.png) center right no-repeat #94225c;
		text-decoration: none;
	}
	#contact-box .cont-box, #contact-box .cont-box:hover {}
	#contact-box .cont-box p, #contact-box .cont-title p {
		margin:0 15px;
		text-align: center;
		font-size: .75em;
	}
	#contact-box .cont-box p {
		padding: 21px 0;
	}

/*--- DISCLOSURE BOX ---*/
	#disclosure-box {}
	#disclosure-box p {
		margin: 20px 0px;
	}
}




/* -- Medium Layout - 992px and up -- */

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

	/*--- HERO ---*/
	#banner {
		height: 350px;
	}
	#bnr-cycler {
		height: 350px;
	}
	#bnr-cycler img {
		height: 350px;
		width: 482px;
	}
	.bnr-cta {
		height: 350px;
	}
	.cta-inner {
		margin-right: -175px;
		width: 350px;
	}
	.bnr-cta p {
		font-size: 2.2em;
		line-height: 1.2em;
	}
	.voya-btn {
		font-size: 1em;
	}

	/*--- SECTION SELECTOR ---*/
	#section-box {
		background-image: none;
	}
	.row.sec-row > [class^="col-"], .row.sec-row > [class^="col-"]:nth-child(2) {
		height: 120px;
	}
	#section-box .sec-box, #section-box .sec-title {}
	.section-box .sec-box {
		background-image: url(../images/md-sec-btn-bkgd.png);
	}
	#section-box .sec-box.last {}
	#section-box .sec-title {
		background-image: url(../images/md-sec-title-bkgd.png);
		background-color: #f58000;
	}

	/*--- CONTACT BAR ---*/
	#contact-box {}
	.row.cont-row > [class^="col-"] {}
	#contact-box .cont-box {}
	#contact-box .cont-box p, #contact-box .cont-title p {
		font-size: .9em;
	}
}




/* -- Large Layout - 1200px and up -- */

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

	/*--- HERO ---*/
	#banner {
		height: 425px;
	}
	#bnr-cycler {
		height: 425px;
	}
	#bnr-cycler img {
		height: 425px;
		width: 586px;
		min-width: 586px;
	}
	.bnr-cta {
		height: 425px;
	}
	.cta-inner {
		margin-right: -225px;
		width: 450px;
	}
	.bnr-cta p {
		font-size: 2.8em;
		line-height: 1.2em;
	}
	.voya-btn {
		font-size: 1.5em;
	}

	/*--- SECTION SELECTOR ---*/
	.row.sec-row > [class^="col-"], .row.sec-row > [class^="col-"]:nth-child(2) {
		height: 160px;
	}
	#section-box .sec-box, #section-box .sec-title {}
	#section-box .sec-box {
		background-image: url(../images/lg-sec-btn-bkgd.png);
	}
	#section-box .sec-box.last {}
	#section-box .sec-title {
		background-image: url(../images/lg-sec-title-bkgd.png);
	}
	#section-box p {
		font-size: 1em;
	}
	#section-box h2 {
		font-size: 2em;
	}

	/*--- CONTACT BAR ---*/
	#contact-box {}
	.row.cont-row > [class^="col-"] {}
	#contact-box .cont-box {}
	#contact-box .cont-box p, #contact-box .cont-title p {
		font-size: 1em;
	}
}