/*
	PAGE FADE-IN
	DEFAULT BODY SETUP
*/
html {
	background-color: #FFF;
}

body {
	position: relative;
	margin-top: 0px;
	width: auto;
	-webkit-transition: opacity 2s ease-in-out, margin 1.5s ease-in-out;
	-moz-transition: opacity 2s ease-in-out, margin 1.5s ease-in-out;
	transition: opacity 2s ease-in-out, margin 1.5s ease-in-out;
}

html body {
	opacity: 1;
	padding-top: 0px;
}

html body.hidden {
	opacity:0;
}
	
@media only screen and (min-width: 768px) {		
	body.s-p {
		margin-left: 330px;
	}
}

/*
	@note - default table
*/
table {
	position: relative;
	margin: 0 auto;
	width: 100%;
}

	table caption {
		width: 100%;
		line-height: 50px;
		background-color: #F2F2F2;
		text-align: center;
		font-size: 36px;
		font-family: Raleway;
		font-weight: 500;
	}
	
	table tr {
		position: relative;
		width: 100%;
		vertical-align: center;
	}

	table tr td {
		position: relative;
		margin: 0 auto;
		padding: 25px;
		width: 100%;
		display: block;
	}

		table tr td h3 {
			margin: 0 auto;
			max-width: 550px;
			line-height: 40px;
			text-align: center;
			font-family: Lato;
			font-style: italic;
			font-weight: 500;
			font-size: 30px;
		}
		
		table tr td p {
			margin: 0 auto;
			padding: 5px;
			max-width: 550px;
			line-height: 30px;
			text-align: left;
			text-indent: 50px;
			font-size: 18px;
			font-weight: 100;
		}
		
		table tr td ul {
			margin: 0 auto;
			padding-left: 45px;
			max-width: 550px;
		}
		
			table tr td ul li {
				list-style: initial;
			}
			
	@media only screen and (min-width: 600px) {		
		table.bipane tr td {
			width: 50%;
			display: table-cell;
		}
			table.bipane tr td h3 {
				text-align: left;
			}
	}
			
	@media only screen and (min-width: 900px) {		
		
		table.tripane tr:first-child {
			width: 34%;
		}
		
		table.tripane tr td {
			width: 33%;
			display: table-cell;
		}
			table.tripane tr td h3 {
				text-align: left;
			}
	}
	
/*
	SCENE ONE
*/
#scene1 {
	position: relative;
	padding: 25px 0px 50px 0px;
	width: 100%;
	height: 400px;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	text-align: center;
	overflow: hidden;
	z-index: 0;
}

	/* video bg */
	#scene1 #videoBG {
		display: none;
		z-index: -1;
	}
	
	/* scroll awareness icon */
	#scene1 .scrollAwareness {
		display: none;
	}
	
	/*
		@note - small screens only
	*/
	@media only screen and (max-width: 767px) {
		#scene1 {
			background-image: url(/pages/home/backgrounds/scene1-0768.jpg);
		}
	}

	/*
		@note - tablet to desktop devices
	*/
	@media only screen and (min-width: 768px) {
		
		body.hidden #scene1 {
			height: 80%;
		}
		
		#scene1 {
			height: 100%;
			background-image: url(/pages/home/backgrounds/scene1-1024.jpg);
			background-size: 100% auto;
			background-size: cover;
			background-position: center center;
			-webkit-transition: all 2s ease-in-out;
			-moz-transition: all 2s ease-in-out;
			transition: all 2s ease-in-out;
		}
			
		#scene1 .scrollAwareness {
			position: absolute;
			bottom: 0px;
			left: 50%;
			margin-left: -25px;
			width: 50px;
			height: 50px;
			line-height: 50px;
			font-size: 50px;
			color: #FFF;
			animation: scroll_awareness 3s infinite;
			display: block;
			z-index: 1;
		}
		
		@keyframes scroll_awareness {
			0% {
				bottom: 100px;
				opacity: 0.1;
				color: #FFF;
			}
			
			50% {
				bottom: 50px;
				opacity: 1;
				color: #f66d52;
			}
			
			100% {
				bottom: 0px;
				opacity: 0.1;
				color: #FFF;
			}
		}
	}

	/*
		@note - desktop devices only
	*/
	@media only screen and (min-width: 1224px) {
				
		/*
			@note - VIDEO BACKGROUND
		*/
		body.s-p-c #scene1 #videoBG {
			position: absolute;
			top: 0px;
			left: 0px;
			width: auto;
			height: auto;
			min-width: 100%;
			min-height: 100%;
			display: block;
			z-index: 0;
		}
		
	}
	@media only screen and (min-width: 1554px) {
				
		/*
			@note - VIDEO BACKGROUND
		*/
		body.s-p #scene1 #videoBG {
			position: absolute;
			top: 0px;
			left: 0px;
			width: auto;
			height: auto;
			min-width: 100%;
			min-height: 100%;
			display: block;
			z-index: 0;
		}
		
	}

/*
	@note - expand gsh east
 */
#scene1 > div.announce
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 75px;
	background-color: #E7AD42;
	text-align: center;
}

	#scene1 > div.announce > span
	{
		padding: 0 10px;
		line-height: 25px;
		font-weight: bold;
		font-size: 16px;
		color: #FFF;
		cursor: default;
		display: inline-block;
	}

	#scene1 > div.announce > a
	{
		padding: 0 10px;
		line-height: 50px;
		font-weight: bold;
		font-size: 18px;
		color: #FFF;
		cursor: pointer;
		display: inline-block;
	}

/*
	@note - SCENE TWO
*/

#scene2 {
	position: relative;
	background-color: #000;
}

	#scene2 h3.title {
		width: auto;
		height: 50px;
		line-height: 50px;
		/* background-color: #F2F2F2; If we bring video back... */
		background-color: #FFF;
		text-align: center;
		font-size: 36px;
		font-family: Raleway;
		font-weight: 500;
	}
	
	#scene2 iframe {
		width: 100%;
		height: auto;
		min-height: 400px;
		display: none;
	}
	
		#scene2.faded iframe {
			display: block;
		}
			
	#scene2 .pane1 {
		padding: 65px 25px;
		width: 100%;
		height: auto;
		background-color: #FFF;
	}
		#scene2 .pane1 h3 {
			margin: 0 auto;
			font-size: 30px;
			line-height: 40px;
			text-align: center;
			font-family: Lato;
			font-style: italic;
			font-weight: 500;
		}
		
		#scene2 .pane1 p {
			margin: 0 auto;
			max-width: 550px;
			line-height: 25px;
			text-align: left;
			text-indent: 50px;
			font-weight: 100;
			font-size: 18px;
			color: #666;
		}
	
	#scene2 .pane2 {
		position: relative;
		width: 100%;
		height: 400px;
		background-color: #FFF;
	}
	
		#scene2 .pane2 .background {
			position: relative;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-repeat: none;
			background-position: center;
			background-image: url(/pages/home/backgrounds/judees-0768.jpg);
		}
		
		#scene2 .pane2 .background .filter {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;
			height: 110px;
			line-height: 50px;
			background-color: rgba(0,0,0,0.45);
			text-align: center;
			font-family: Raleway;
			font-size: 45px;
			font-weight: 900;
			color: #FFF;
			opacity: 1;
				-webkit-transition: opacity .5s ease-in-out;
				-moz-transition: opacity .5s ease-in-out;
				transition: opacity .5s ease-in-out;	
		}
		
		#scene2 .pane2 .background .filter a {
			font-family: "Serif";
			letter-spacing: 10px;
			cursor: pointer;	
		}
		
	@media only screen and (min-width: 500px) {
		#scene2 .pane1 h3 {
			font-size: 45px;
			line-height: 55px;
		}
	}
		
	@media only screen and (min-width: 768px) {
		
		body.s-p-c #scene2 iframe {
			display: block;
		}
		
		body.s-p-c #scene2 {
			height: 450px;
			overflow: hidden;
		}
		
		body.s-p-c #scene2 .pane1 {
			position: absolute;
			top: 50px;
			left: 0%;
			width: 50%;
			height: 400px;
			z-index: 1;
				-webkit-transition: left 1s ease-in-out;
				-moz-transition: left 1s ease-in-out;
				transition: left 1s ease-in-out;
		}
			body.s-p-c #scene2.faded .pane1 {
				left: -50%;
			}
			
			body.s-p-c #scene2 .pane1 h3 {
				line-height: 30px;
				font-size: 24px;
			}
			
			body.s-p-c #scene2 .pane1 p {
				line-height: 25px;
				font-size: 20px;
			}
		
		body.s-p-c #scene2 .pane2 {
			position: absolute;
			top: 50px;
			left: 50%;
			width: 50%;
			height: 400px;
			z-index: 1;
				-webkit-transition: left 1s ease-in-out;
				-moz-transition: left 1s ease-in-out;
				transition: left 1s ease-in-out;
		}
		
			body.s-p-c #scene2.faded .pane2 {
				left: 100%;
			}
				
		body.s-p-c #scene2 .pane2 .background .filter {
			bottom: 50%;
			margin-bottom: -50px;
			height: 100px;
			opacity: 0;
		}
		
		body.s-p-c #scene2 .pane2 .background:hover .filter {
			opacity: 1;
		}
	}
	
	@media only screen and (min-width: 1098px) {
		
		#scene2 iframe {
			display: block;
		}
		
		#scene2 {
			height: 450px;
			overflow: hidden;
		}
		
		#scene2 .pane1 {
			position: absolute;
			top: 50px;
			left: 0%;
			width: 50%;
			height: 400px;
			z-index: 1;
				-webkit-transition: left 1s ease-in-out;
				-moz-transition: left 1s ease-in-out;
				transition: left 1s ease-in-out;
		}
			#scene2.faded .pane1 {
				left: -50%;
			}
			
			#scene2 .pane1 h3 {
				line-height: 30px;
				font-size: 24px;
			}
			
			#scene2 .pane1 p {
				line-height: 25px;
				font-size: 20px;
			}
		
		#scene2 .pane2 {
			position: absolute;
			top: 50px;
			left: 50%;
			width: 50%;
			height: 400px;
			z-index: 1;
				-webkit-transition: left 1s ease-in-out;
				-moz-transition: left 1s ease-in-out;
				transition: left 1s ease-in-out;
		}
		
			#scene2.faded .pane2 {
				left: 100%;
			}
				
		#scene2 .pane2 .background .filter {
			bottom: 50%;
			margin-bottom: -50px;
			height: 100px;
			opacity: 0;
		}
		
		#scene2 .pane2 .background:hover .filter {
			opacity: 1;
		}
	}
	
	@media only screen and (min-width: 1025px) {
		
		body.s-p-c #scene2 .pane1 h3,
		#scene2 .pane1 h3 {
			line-height: 40px;
			font-size: 30px;
		}
		
		body.s-p-c #scene2 .pane1 p,
		#scene2 .pane1 p {
			line-height: 25px;
			font-size: 24px;
		}
	}
	
/*
	@note - SCENE THREE
*/
#scene3 {
	position: relative;
	margin: 0 auto;
	padding: 50px 0px;
	width: 100%;
	border: 0px solid #666;
}

	#scene3 h3.title {
		margin: 0 auto;
		width: auto;
		line-height: 50px;
		max-width: 750px;
		background-color: #FFF;
		text-align: center;
		font-size: 36px;
		font-family: Raleway;
		font-weight: 500;
		opacity: 1;
			-webkit-transition: opacity 1.0s ease-in-out;
			-moz-transition: opacity 1.0s ease-in-out;
			transition: opacity 1.0s ease-in-out;	
	}
		#scene3 h3.title.faded {
			opacity: 0;
		}
	
	#scene3 .text {
		margin: 0 auto;
		padding: 25px;
		width: 100%;
		height: auto;
		max-width: 750px;
	}

	#scene3 .text p {
		line-height: 30px;
		text-indent: 50px;
		max-width: 750px;
		font-family: Lato;
		font-weight: 100;
		font-size: 18px;
		color: #666;
		opacity: 1;
			-webkit-transition: opacity 1.0s ease-in-out;
			-moz-transition: opacity 1.0s ease-in-out;
			transition: opacity 1.0s ease-in-out;	
	}
		#scene3 .text p.faded {
			opacity: 0;
		}
		
	#scene3 .text p span {
		font-weight: 500;
	}
	
	@media only screen and (min-width: 768px) {
				
		#scene3 .text p {
			line-height: 40px;
			font-size: 24px;
		}
	}

/*
	@note - SCENE FOUR
*/
#scene4 {
	position: relative;
	padding-top: 522px;
	width: 100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: auto 512px;
	background-position: center top;
		-webkit-transition: background  0.5s ease-in-out;
		-moz-transition: background  0.5s ease-in-out;
		transition: background  0.5s ease-in-out;
	overflow: hidden;
}

#scene4 .benefit {
	position: relative;
	margin: 0 auto;
	padding: 10px 0px 10px 0px;
	width: 100%;
	text-align: left;
	font-size: 100%;
}

#scene4 .benefit p {
	margin: 0 auto;
	padding: 25px;
	width: 100%;
	max-width: 350px;
	text-align: left;
	font-family: Lato;
	font-weight: 100;
	font-size: 18px;
	color: #666;
	display: block;
}

#scene4 .benefit span {
	position: relative;
	text-align: center;
	font-family: Raleway;
	font-weight: bold;
	font-size: 24px;
	display: block;
}

	@media only screen and (min-width: 768px) {
						
		body.s-p-c #scene4 {
			padding: 0;
			height: 80%;
			background-size: cover;
			background-position: center center;
			border: none;
		}
		
		body.s-p-c #scene4 .benefit {
			position: absolute;
			padding: 0px;
			right: 0px;
			bottom: 0px;
				-webkit-transition: bottom 1.0s;
				-moz-transition: bottom 1.0s;
				transition: bottom 1.0s;
			left: 0px;
			width: 100%;
			height: 200px;
			background-color: rgba(0,0,0,0.75);
		}
		
		body.s-p-c #scene4.faded div.benefit {
			bottom: -200px;
		}
		
		body.s-p-c #scene4 .benefit .wrap {
			margin: 0 auto;
			max-width: 768px;
		}
		body.s-p-c #scene4 .benefit p {
			padding: 10px;
			width: 256px;
			height: 200px;
			text-align: center;
			color: #FFF;
			display: block;
		}
		
		body.s-p-c #scene4 .benefit p.l {
			float: left;
		}
		
		body.s-p-c #scene4 .benefit p.r {
			float: right;
		}
		
	}
	
	@media only screen and (min-width: 1098px) {
						
		#scene4 {
			padding: 0;
			height: 80%;
			background-size: cover;
			background-position: center center;
			border: none;
		}
		
		#scene4 .benefit {
			position: absolute;
			padding: 0px;
			right: 0px;
			bottom: 0px;
				-webkit-transition: bottom 1.0s;
				-moz-transition: bottom 1.0s;
				transition: bottom 1.0s;
			left: 0px;
			width: 100%;
			height: 200px;
			background-color: rgba(0,0,0,0.75);
		}
		
		#scene4.faded div.benefit {
			bottom: -200px;
		}
		
		#scene4 .benefit .wrap {
			margin: 0 auto;
			max-width: 768px;
		}
		#scene4 .benefit p {
			padding: 10px;
			width: 256px;
			height: 200px;
			text-align: center;
			color: #FFF;
			display: block;
		}
		
		#scene4 .benefit p.l {
			float: left;
		}
		
		#scene4 .benefit p.r {
			float: right;
		}
		
	}
	/*
		@note - small screens only
	*/
	@media only screen and (max-width: 768px) {
		#scene4 {
			background-image: url(/pages/home/backgrounds/scene3-0768.jpg);
		}
	}
	
	/*
		@note - tablet to desktop devices
	*/
	@media only screen and (min-width: 768px) {
		#scene4 {
			background-image: url(/pages/home/backgrounds/scene3-1024.jpg);
		}
		body.s-p-c #scene4 {
			background-size: 100% auto;
			background-size: cover;
			background-position: center center;
			-webkit-transition: all 2s ease-in-out;
			-moz-transition: all 2s ease-in-out;
			transition: all 2s ease-in-out;
		}
	}
	@media only screen and (min-width: 1098px) {
		#scene4 {
			background-size: 100% auto;
			background-size: cover;
			background-position: center center;
			-webkit-transition: all 2s ease-in-out;
			-moz-transition: all 2s ease-in-out;
			transition: all 2s ease-in-out;
		}
	}
	
	/*
		@note - DESKTOP ONLY
	*/
	@media only screen and (min-width: 1025px) {
		body.s-p-c #scene4 {
			background-attachment: fixed;
		}
	}
	@media only screen and (min-width: 1355px) {
		#scene4 {
			background-attachment: fixed;
		}
	}

	
/*
	@note - SCENE FIVE
*/
	
	div#scene5 {
		margin: 0 auto;
		padding: 25px;
		width: 100%;
		max-width: 575px;
		height: auto;
	}
	
	div#scene5 h1 {
		font-family: Lato;
		font-weight: 500;
	}
	
	div#scene5 div {
		
	}
	
	div#scene5 div h3 {
		height: 50px;
		line-height: 50px;
		border-top: 1px solid #e0e0e0;
		font-family: Lato;
		font-style: italic;
		font-weight: 500;
		cursor: pointer;
	}
	
		div#scene5 div h3::before {
			float: right;
			width: 50px;
			height: 50px;
			font-family: "Font Awesome 5 Free";
			content: "\f0Da";
			line-height: 50px;
			font-weight: bold;
			font-size: 14px;
			text-align: center;
			display: inline-block;
		}
		
		div#scene5 div.selected h3::before {
			content: "\f0D7";
		}
	
	div#scene5 div p {
		line-height: 30px;
		text-indent: 50px;
		max-width: 750px;
		font-family: Lato;
		font-weight: 100;
		font-size: 18px;
		color: #666;
		opacity: 1;
		display: none;
	}
		div#scene5 div p span {
			font-weight: 500;	
		}
		
	div#scene5 div ul {
		margin-top: 10px;
		margin-left: 15px;
		padding-left: 15px;
		line-height: 25px;
		font-size: 16px;
		font-weight: 500;
		display: none;
	}	
		div#scene5 div ul li {
			list-style: initial;
		}
		
	div#scene5 div form {
		display: none;
	}
	
	div#scene5 div.selected {	
		padding-bottom: 25px;	
	}
	
	div#scene5 div.selected p,
	div#scene5 div.selected ul,
	div#scene5 div.selected form {
		display: block;
	}
	
/*
	@note - SCENE SIX
*/
	ul#scene6 {
		padding: 10px;
		background-color: #f2f2f2;
		text-align: center;
	}

	ul#scene6 li {
		margin: 10px;
		width: 125px;
		height: 50px;
		background-size: 125px 50px;
		background-repeat: no-repeat;
		display: inline-block;
	}

	ul#scene6 li.title {
		width: auto;
		height: 50px;
		font-size: 36px;
		font-style: italic;
		font-weight: 500;
		display: block;
	}
	
html.ie #scene1,
html.ie #scene4 {
	background-attachment: scroll;
	background-position: center;
}