/**********************************************************************
 *
 * 	HOME PAGE ONLY STYLES
 *
 **********************************************************************/

.top-content.home {
	position: relative;
	padding-bottom: 56.25%;
	margin-top: -112px;
	height: 0;
	background: none;
}
.top-content.home .video-wrapper {
	background: transparent url(/img/home/homepage-top.jpg) top center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.top-content.home .video-wrapper video {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
}
.top-content.home .video-content {
	position: absolute;
	width: 100%;
	height: 100%;
	/*background: rgba(255,255,255,0.15);*/
}
.top-content.home .video-content h1 {
	position: absolute;
	top: 38%;
	width: 100%;
	text-align: center;
	height: ;
	font-family: 'Open Sans';
	font-weight: lighter;
	font-size: 42px;
	color: #031c3a;
	height: 125px;
	margin-top: -125px;
	letter-spacing: 2px;
}
.top-content.home .video-content h1 img { width: 500px; }
/*.top-content.home .video-content h1 span { display: block; }*/
.top-content.home .video-content .button-wrapper {
	position: absolute;
	text-align: center;
	width: 100%;
	top: 60%;
}
.top-content.home .video-content .button { padding: 22px 24px 22px 78px; text-transform: none; letter-spacing: 1px; font-size: 13px; width: 230px; display: inline-block; overflow: hidden; }
.top-content.home .video-content .button .button-icon { width: 64px; height: 61px; background-image: url(/img/home/icon-maine.png); }
.home-block.callout-container .inner-slide .button-wrapper { bottom: 80px; }
.top-content.home .video-content .scrollto-wrapper {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 5%;
}
.top-content.home .video-content .scrollto-wrapper a { 
	color: #fff; 
	text-transform: uppercase; 
	font-weight: bold; 
	font-size: 12px; 
	letter-spacing: 1px; 
	font-family: 'Open Sans';
}
.top-content.home .video-content .scrollto-wrapper span { display: block; margin-top: 10px; }
.home-block.callout-container { margin-top: 40px; border: none; }
.pin.logo {
	background: none;
	box-shadow: none;
	position: absolute;
	left: 30px;
	bottom: 0;
	z-index: 1000;
}

#rec-modal *, #rec-modal *:before, #rec-modal *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
	font-family: 'Open Sans';
}

#rec-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: rgba(0,0,0,0.9);
	z-index: 100000;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 500ms ease-out;
    -moz-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out;
}
#rec-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
.rec-modal-inner {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1200px;
	height: 640px;
	margin-top: -320px;
	margin-left: -600px;
}
.rec-modal-content {
	display: block;
	position: relative;
	background: transparent;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.rec-modal-left {
	background: transparent url(https://cccd83150e07cc9ff90d-b90feff38576a34f66db26bae73f9444.ssl.cf2.rackcdn.com/bkg-rec-modal.png) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	width: 50%;
	height: 100%;
	float: left;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}
.rec-modal-right {
	width: 50%;
	height: 100%;
	padding: 0 30px;
	float: left;
	margin: 0;
	background: #fff;
	border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    overflow-y: scroll;
}
.rec-modal-inner .rec-modal-close {
	background: url(/img/close-modal.png) no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 51px;
    position: absolute;
    left: 50%;
    margin-left: -25px;
    text-indent: -99999px;
    top: -70px;
    width: 51px;
}
/* quiz updates for modal */
.quiz-wrapper { width: auto; }
.quiz-title { display: none; }
.question-container { width: 100% !important; }
.dropdown-container { width: 70% !important; }
.question .dropdown-container::after { top: 35%; }
.question .title { font-size: 14px; width: 27% !important; }
.question .dropdown-container .dropdown span { font-size: 12px; }
.question-container .learn-more { margin: 80px 0 0 200px; display: block; clear: both; }
.question { clear: both; }
.question .dropdown-container .placeholder { padding: 7px 35px 7px 8px !important; font-size: 12px; } 
#video-home { display: none; }

@media screen and (min-width:1300px){ /* large screens only */
	.top-content.home .video-content h1 { top: 34%;	}
	.top-content.home .video-content h1 img { width: auto; }
}
@media screen and (max-width:1366px){ /* small laptops (1366x768) */
	.rec-modal-inner {
		width: 100%;
		height: 100%;
		padding: 70px;
		top: 0;
		left: 0;
		margin: 0;
	}
	.rec-modal-inner .rec-modal-close { top: 0; }

	.question-container .learn-more {
		float: right;
    	margin: 50px 0 0;
	}
}
@media screen and (max-width:1100px){
	.top-content.home .video-content h1 { top: 45%;	}
	.top-content.home .video-content h1 img { width: 400px; }
}
@media screen and (max-width:1024px){
	.rec-modal-left, 
	.rec-modal-right {
		width: 100%;
		height: 50%;
		border-radius: 0;
	}
	.rec-modal-left { border-top-left-radius: 8px; border-top-right-radius: 8px; }
	.rec-modal-right { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
}
@media screen and (max-width:900px){
	.top-content.home { display: none; }
}
@media screen and (max-width:600px){
	.home-block.callout-container .inner-slide .button-wrapper {
		width: 50%;
		bottom: 10px;
	}
	.pin.logo {
		width: 100%;
		max-width: 122px;
		top: 15px;
		left: 50%;
		margin-left: -65px;
	}
}