/* INDUCTION PORTAL LOGIN PAGE STYLING ==========================================================================
========================================================================== */

/*-- Style Overrides for BetaBar on the Induction Portal page  --*/
.betabar {
	position: absolute;
	background-color: rgba(225, 225, 225, 0.66);
	z-index: 10;
}

/*-- Base 'FullPage Scrolling' Styling, from Alvaro Trigo - https://github.com/alvarotrigo/fullPage.js, * MIT licensed  --*/
html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow:hidden;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#superContainer {
    height: 100%;
    position: relative;

    /* Touch detection for Windows 8 */
    -ms-touch-action: none;

    /* IE 11 on Windows Phone 8.1*/
    touch-action: none;
}
#section0 { background: url(/templates/default/img/induct_portal_bkgrd.jpg) no-repeat center left 6%; background-size: cover; }
#section1 { background: url(/templates/default/img/footer_bkgrd.svg) no-repeat bottom -157px right -178px; }
.section { background-size: cover; }
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.fp-slide { float: left; }
.fp-slide, .fp-slidesContainer { height: 100%; display: block; }
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp-slidesContainer { float: left; position: relative; }
.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.fp-scrollable { overflow: scroll; }
.fp-notransition {
    -webkit-transition: none !important;
            transition: none !important;
}
#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav.right { right: 17px; }
#fp-nav.left { left: 17px; }
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.fp-slidesNav.bottom { bottom: 17px; }
.fp-slidesNav.top { top: 17px; }
#fp-nav ul,
.fp-slidesNav ul { margin: 0; padding: 0; }
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.fp-slidesNav ul li { display: inline-block; }
#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
 }
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
            transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}
#fp-nav ul li .fp-tooltip.right { right: 20px; }
#fp-nav ul li .fp-tooltip.left { left: 20px; }

/*-- Main Induction Page(s) Styling --*/
/* 1st/Login Page */
.induction_main {
	margin-top: -12px;
	-webkit-animation: login-fadein 0.9s;
       -moz-animation: login-fadein 0.9s;
            animation: login-fadein 0.9s;
}
.logo_main {
	width: 100%;
	margin: 12px auto 15px;
	padding: 12px 0;
	text-align: center;
}
.logo_main img { width: 57%; max-width: 330px; }
.induction_login {
    background-color: rgba(219, 218, 215, 0.9);
    width: 93%;
    margin: 0 auto;
    padding: 33px 0 24px;
    border-radius: 6px;
}
@-webkit-keyframes login-fadein {
  0% { 
    opacity: 0;
    -webkit-transform: translateY(2em);
        -ms-transform: translateY(2em);
            transform: translateY(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}
@-moz-keyframes login-fadein {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2em);
        -ms-transform: translateY(2em);
            transform: translateY(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes login-fadein {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2em);
        -ms-transform: translateY(2em);
            transform: translateY(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}
.induction_login_form { margin-bottom: 0; }
.induction_login .login_input {
    color: #808080;
    font-size: 17px;
    width: 100%;
    height: 48px;
    padding: 10px;
}
.induction_login .login_input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
.induction_login .login_buttons { margin-top: 9px; }
.login_button {
	position: relative;
	display: block;
    background-color: transparent;
    color: #7085B9;
	font-size: 1.5rem;
	width: 100%;
	height: 48px;
    border-color: #7085B9;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: border-color 0.4s, color 0.4s;
			transition: border-color 0.4s, color 0.4s;
}
.login_button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #7085B9;
	border-radius: 4px;
	z-index: -1;
	opacity: 0;
	-webkit-transform: scale3d(0.7, 1, 1);
		-ms-transform: scale3d(0.7, 1, 1);
			transform: scale3d(0.7, 1, 1);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
					transition: transform 0.4s, opacity 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
			transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.login_button,
.login_button::before {
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
			transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.login_button:hover { color: #fff; border-color: #7085B9; }
.login_button:hover::before {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}
.induction_login #login_error { color: #C36543; padding: 9px 0 15px; text-align: center; }
.induction_login .forgot_password_link { text-align: center; padding-top: 9px; }
.frontpage_register_links { text-align: center; margin: 48px 0 12px; }

.induction_login .login_rememberme { float: left; left: 22%; color: #fff; }
.login_rememberme { position: relative; margin: 0 auto; text-align: center; }
.induction_checkbox { margin-right: 28px; }
.login_rememberme label {
	cursor: pointer;
	position: absolute;
    font-size: 2.2rem;
	width: 24px;
	height: 24px;
	top: 1px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255,255,255,.4);
	   -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255,255,255,.4);
			box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255,255,255,.4);
	background: -webkit-linear-gradient(top, #BDBAB8 0%, #CFCCC9 84%);
	   background: -moz-linear-gradient(top, #BDBAB8 0%, #CFCCC9 84%);
		background: -ms-linear-gradient(top, #BDBAB8 0%, #CFCCC9 84%);
		 background: -o-linear-gradient(top, #BDBAB8 0%, #CFCCC9 84%);
			background: linear-gradient(top, #BDBAB8 0%, #CFCCC9 84%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.login_rememberme label:after {
	content: '';
	position: absolute;
	background-color: transparent;
	top: 6px;
	left: 4px;
	width: 15px;
	height: 9px;
	border: 3px solid #7085B9;
	border-top: none;
	border-right: none;
	opacity: 0;
	-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
}
.login_rememberme label:hover::after { opacity: 0.3; }
.login_rememberme input[type=checkbox]:checked + label:after { opacity: 1; }
.links_legal { margin-top: 12px; margin-bottom: -12px; }
.links_legal ul {
	list-style: none;
	display: inline-block;
	width: 100%;
	margin: 12px auto -20px;
}
.links_legal li {
	display: list-item;
	background-color: rgba(219, 218, 215, 0.84);
	margin: 0;
	padding: 0;
	height: 48px;
	border-bottom: 1px solid rgba(204, 204, 202, 0.75);
}
.links_legal li:first-child {
	-webkit-box-shadow: 0px -3px 3px -1px rgba(36,24,8,0.15);
	   -moz-box-shadow: 0px -3px 3px -1px rgba(36,24,8,0.15);
			box-shadow: 0px -3px 3px -1px rgba(36,24,8,0.15);
}
.links_legal li:last-child { border-radius: 0 0 4px 4px; border-bottom: 0; }
.links_legal li a {
	display: block;
	font-family: 'pantonbold';
	font-size: 1.7rem;
	line-height: 4.8rem;
}
.links_legal li a:hover { background-color: rgba(195, 193, 188, 0.84); color: #47537B; }
.btn_induction_register {
    margin: 33px auto;
	width: 84%;
    height: 48px;
    font-size: 1.5rem;
	line-height: 4.6rem;
    -webkit-transition: color 0.3s;
            transition: color 0.3s;
}
.btn_induction_register::before { display: none; }
.btn_induction_register span { display: none; }
.btn_induction_register:hover span { opacity: 0; }

/* 2nd/Choices Page */
.induct_opt_main { width: 93%; margin: 24px auto 200px; }
#section1 h2, #section1 h4, #section1 h5 { color: #182853; }
.induction_options {
    display: block;
	position: relative;
    width: 100%;
    height: auto;
    margin-top: 6px;
    padding: 6px;
}
.induction_options p { padding: 0 12px; }
.row induction_options h5 {font-size: 1.2rem;}
.induct_opt_first { margin: 0 auto 24px; left: 0; right: 0; }
.induct_opt_first:after {
    content: "";
    display: block;
    position: relative;
    background-color: #182853;
    width: 93%;
    height: 6px;
	margin: 0 auto;
    margin-top: 39px;
    right: 0%;
    border-radius: 3px;
}
.induction_options img { display: block; margin: 0 auto 24px; }
.icon_building, .icon_contractor { width: 57%; height: 183px; }
.induction_options h4 { margin-bottom: 24px; }
.induct_opt_text { margin-bottom: 24px; }
.induct_opt_text p { margin-bottom: 0.9rem; }
.btn_induct_option {
	position: relative;
	display: block;
    background-color: #fff;
    color: #2B2B2B;
    margin-bottom: 24px;
    border-color: #fff;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: border-color 0.4s, color 0.4s;
			transition: border-color 0.4s, color 0.4s;
}
.btn_induct_option::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #2B2B2B;
	z-index: -1;
	opacity: 0;
	-webkit-transform: scale3d(0.7, 1, 1);
		-ms-transform: scale3d(0.7, 1, 1);
			transform: scale3d(0.7, 1, 1);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
					transition: transform 0.4s, opacity 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
			transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn_induct_option,
.btn_induct_option::before {
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
			transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn_induct_option:hover { color: #fff; border-color: #2B2B2B; }
.btn_induct_option:hover::before {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}
.induct_copyright_info { width: 48%; margin: 0 0 48px 24px; }
.induct_copyright_info p {
	color: #2A2A2A;
	font-size: 1.2rem;
	line-height: 2.2rem;
	margin-bottom: 1rem;
	padding-right: 24px;
}
.induct_copyright_info a { color: #7085B9; }
.induct_copyright_info a:hover { color: #47537B; }

/* MEDIA QUERIES ================================================================================
================================================================================================= */

@media screen and (min-width: 480px) {
    
    /*-- Induction Login Elements --*/
    .induction_login .login_rememberme { left: 28%; }
    
}


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

    /*-- Homepage Login Form --*/
    .frontpage_login {
        background-color: #2D2D2D;
        margin: 0 auto;
        margin-top: 20px;
        padding: 24px 0px;
        border-radius: 3px;
    }
    .frontpage_login_form { margin-bottom: 0; }
    .frontpage_login .login_input_left, .frontpage_login .login_input_right { width: 112%;  margin-top: 6px; }
    .frontpage_login .login_input_left { margin-left: -13%; }
    .frontpage_login .login_input_right { margin-right: -13%; float: right; }
    .frontpage_login .login_buttons { margin-top: 24px; }
    .frontpage_login .login_button { color: #fff; width: 75%; margin-bottom: 1rem; }
    .frontpage_login .login_button:hover { background-color: #DDB947; color: #333; border-color: #3F3F3F; }
    
    /*-- Induction Login Elements --*/    
    .induction_login .login_rememberme { 
        display: block;
        position: absolute;
        left: 30%;
    }
    .induction_login .forgot_password_link {
        display: block;
        position: relative;
        width: 200%;
        margin-top: 33px;
    }
    .induction_options { margin-top: 48px; }
	#section1 h4 { width: 84%; }
	.induct_opt_main { margin-bottom: 120px; }
	.induct_opt_first { position: absolute; width: 88%; }
    .induct_opt {
		position: relative;
		display: block;
		width: 188%;
		margin-top: 552px;
	}
    .icon_building, .icon_contractor { width: 48%; height: 160px; }
    .btn_induct_option { margin-top: 39px; }
	.induct_copyright_info { padding-bottom: 15px; }

}

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

    /*-- Induction Login Elements --*/
	#section0 { background-position: top 60% right 40%; }
	#section1 { background-size: 420px; background-position: bottom -157px right -210px; }
	#section1 h4 { width: 60%; }
	.induct_opt_main { margin-bottom: 200px; }
	.induct_opt { margin-top: 630px; }
	.induction_options h4 { margin-bottom: 39px; }
	.icon_building, .icon_contractor { width: 57%; height: 220px; }
	.induct_copyright_info { margin: 0 0 0 48px; }
	.induct_copyright_info p { font-size: 1.4rem; }

    /*-- Footer Content --*/    
    .footer_menu { margin-bottom: 0; }
    .footer_menu li {
        display: inline;
        margin-left: 10px;
        padding-left: 12px;
        border-bottom: none;
        border-left: 1px solid #ccc;
    }
    .footer_menu li:first-child { margin-left: 0; padding-left: 0; border-left: none; }
    .footer_menu li:hover { background-color: transparent; }
    .footer_menu li a { display: inline-block; font-size: 1.6rem; }
    .footer_menu li a:hover { background-color: transparent; }

}

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

    /*-- Homepage Login Form --*/
    .frontpage_login .login_input_left, .frontpage_login .login_input_right { height: 48px;  }
    .frontpage_login .login_button { height: 48px; font-size: 0.9em; }
    .frontpage_login .login_start { margin-bottom: 24px; }
    .frontpage_login .login_links { width: 75%; margin-top: 12px; }
    .frontpage_login .login_remember { float: left; text-align: left; padding: 0; }
    .forgot_password_link { float: right; text-align: right; }
    
    /*-- Induction Login Elements --*/
    .logo_main { margin-bottom: 0; }
    .induction_login { width: 84%; margin-top: 3%; }
	.login_links { margin: -9px 0 6px 0; }
    .induction_login .login_rememberme { position: relative; left: 0; }
    .induction_login .forgot_password_link {
        text-align: right;
        width: 100%;
        margin-top: 0;
        padding-top: 0;
    }
	.links_legal ul {
		background-color: rgba(219, 218, 215, 0.84);
		margin-top: -6px;
		border-radius: 0 0 4px 4px;
		-webkit-box-shadow: 0px -3px 3px -1px rgba(36,24,8,0.15);
		   -moz-box-shadow: 0px -3px 3px -1px rgba(36,24,8,0.15);
				box-shadow: 0px -3px 3px -1px rgba(36,24,8,0.15);
	}
	.links_legal li {
		display: inline;
		background-color: transparent;
		margin: 0 18px;
		padding-right: 36px;
		border-right: 3px solid #b3bddd;
		border-bottom: none;
	}
	.links_legal li:first-child {
		-webkit-box-shadow: none;
		   -moz-box-shadow: none;
				box-shadow: none;
	}
	.links_legal li:last-child { padding-right: 0; border-radius: 0; border-right: none; }
	.links_legal li a { display: inline-block; font-size: 1.5rem; }
	.links_legal li a:hover { background-color: transparent; }
    .btn_induction_register { width: 75%; }
	.induct_opt_first:after { width: 84%; }

}

@media screen and (min-width: 960px) {
	
	/*-- Induction Login Elements --*/
	#section1 h4 { width: 84%; }
	.induction_options { margin-top: 39px; }
	.induct_opt_first {
		position: inherit;
		width: 100%;
	}
	.induct_opt_first:after {
		position: absolute;
    	top: -6px;
		right: 50%;
		width: 3px;
		height: 88%;
	}
	.induct_opt {
		position: inherit;
		width: 100%;
		margin-top: 0;	
	}
	.induct_opt_text {
		margin-bottom: 24px;
		padding: 0 12px;
		min-height: 280px;
	}
	.induct_copyright_info { width: 48%; margin: 0 0 -33px 57px; }
	
}

@media screen and (min-width: 1025px) {
    
    /*-- Induction Login Elements --*/
	.header_content { margin-top: 39px; margin-bottom: 12px; }
	.logo_main {
		position: absolute;
		text-align: left;
		top: 12px;
		padding: 0 0 24px 48px;
	}
	.logo_main img { width: 420px; max-width: inherit; }
	.induction_main { margin-top: 120px; }
	.induction_login { width: 75%; }
	.induction_login .login_button { margin: 12px 0; }
	.btn_induction_register { width: 57%; }
	.btn_induction_register::before {
		content: ' \ ';
		position: absolute;
		display: block;
		background-color: #F9F9F9;
		width: 6%;
		height: 6px;
		margin-top: 75px;
 		margin-left: 228px;
		-webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
			-ms-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
				transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
		-webkit-transition: -webkit-transform 0.5s;
						transition: transform 0.5s;
	}
	.btn_induction_register:hover::before {
		-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
		  -ms-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
			  transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	}
	.btn_induction_register span {
		position: absolute;
		display: block;
		font-size: 1.5rem;
		font-weight: 400;
		color: #fff;
		text-transform: none;
		font-style: italic;
		margin-left: 291px;
    	margin-top: 24px;
		opacity: 0;
		-webkit-transform: translate3d(-10px,-10px,0);
		  -ms-transform: translate3d(-10px,-10px,0);
			  transform: translate3d(-10px,-10px,0);
		-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
					  transition: transform 0.5s, opacity 0.5s;
	}
	.btn_induction_register:hover span {
		opacity: 1;
		-webkit-transform: translate3d(0,0,0) rotate(-2deg);
		  -ms-transform: translate3d(0,0,0) rotate(-2deg);
			  transform: translate3d(0,0,0) rotate(-2deg);
	}
	.induct_opt_text { min-height: 210px; margin-bottom: 12px; }
	.induct_copyright_info { position: absolute; bottom: 0; margin-bottom: 42px; }
	
}

@media screen and (min-width: 1200px) {
	
	.induct_opt_text { min-height: 150px; }
	.induct_copyright_info { margin-bottom: 6px; }

}