/* ========================= */
/*     Responsive Styles     */
/* ========================= */

/* Desktop screen widths */
@media screen and (min-width:1801px) and (max-width:2000px){
	#bottomRightBG{	width:540px; height:326px;}
}
@media screen and (min-width:1647px) and (max-width:1800px){
	#bottomRightBG{	width:480px; height:290px;}
}
@media screen and (min-width:1501px) and (max-width:1646px){
	h1{ font-size:36px;}
		.exampleText h2{ font-size:22px;}
		.exampleText a,
		.exampleText a:active,
		.exampleText a:visited{ font-size:14px; line-height:14px;}
	#bottomRightBG{	width:440px; height:266px;}
}
@media screen and (min-width:1361px) and (max-width:1500px){
	#textOuter{ width:23.75%;}
		h1{ font-size:36px;}
	#examplesOuter{ width:66%;}
		.exampleText h2{ font-size:20px;}
		.exampleText a,
		.exampleText a:active,
		.exampleText a:visited{ font-size:13px; line-height:13px;}
	#bottomRightBG{ width:440px; height:226px;}
}
@media screen and (min-width:1281px) and (max-width:1360px){
	#textOuter{ width:23.75%;}
		h1{ font-size:34px;}
	#examplesOuter{ width:66%;}
		.exampleText h2{ font-size:18px;}
		.exampleText a,
		.exampleText a:active,
		.exampleText a:visited{ font-size:12px; line-height:12px;}
	#bottomRightBG{	width:440px; height:226px;}
}
@media screen and (max-width:1280px){
	.innerMargin{ padding:0 20px;}
}
@media screen and (min-width:1081px) and (max-width:1280px){
	body{ background-size:1100px 793px;}
		#textOuter{
			width:27.75%;
			padding:0;
		}
			h1{ font-size:30px;}
			p,
			.contentPopup-padding p{ font-size:14px;}
		#examplesOuter{ width:65%;}
			.example{ width:33.333%;}
			.example:nth-child(4n){ display:none;}
				.exampleText h2{ font-size:18px;}
				.exampleText a,
				.exampleText a:active,
				.exampleText a:visited{ font-size:12px; line-height:12px;}
		#bottomRightBG{	width:390px; height:235px;}
}
@media screen and (min-width:1025px) and (max-width:1080px){
	body{ background-size:1000px 721px;}
		#textOuter{
			width:27.75%;
			padding:0;
		}
			h1{ font-size:30px;}
			p,
			.contentPopup-padding p{ font-size:14px;}
		#examplesOuter{ width:65%;}
			.example{ width:33.333%;}
				.exampleText h2{ font-size:18px;}
				.exampleText a,
				.exampleText a:active,
				.exampleText a:visited{ font-size:12px; line-height:12px;}
			.example:nth-child(4n){ display:none;}
		#bottomRightBG{	width:390px; height:235px;}
}

/* Tablet screen widths */
@media screen and (min-width:951px) and (max-width:1024px){
	body{ background-size:1000px 721px;}
		#textOuter{
			width:27.75%;
			padding:0;
		}
			h1{ font-size:30px;}
			p,
			.contentPopup-padding p{ font-size:14px;}
		#examplesOuter{ width:65%;}
			.example{ width:33.333%;}
				.exampleText h2{ font-size:18px;}
				.exampleText a,
				.exampleText a:active,
				.exampleText a:visited{ font-size:12px; line-height:12px;}
			.example:nth-child(4n){ display:none;}
		#bottomRightBG{	width:390px; height:235px;}
		.contentPopup-link,
		.popupBody p.companyCredit{ width:420px;}
}
@media screen and (min-width:769px) and (max-width:950px){
	body{ background-size:800px 577px;}
		.tabletElement,
		a.tabletElement{ display:block;}
		.nonTabletElement,
		a.nonTabletElement{ display:none;}
			p .tabletElement,
			p a.tabletElement{ display:inline-block;}
			p .nonTabletElement,
			p a.nonTabletElement{ display:none;}
		p{ font-size:18px; line-height:30px;}
		header{ margin:0 0 60px 0;}
		#contentArea #contentAreaPadding{ padding:0 10px;}
			#textOuter{
				width:100%;
				float:none;
				margin:0 0 60px 0;
			}
				h1{ font-size:36px;}
			#examplesOuter{
				width:100%;
				float:none;
			}
				.example{ width:25%;}
					.exampleText h2{ font-size:17px; line-height:17px;}
					.exampleText a,
					.exampleText a:active,
					.exampleText a:visited{ font-size:11px; line-height:11px;}
					.contentPopup-link,
					.popupBody p.companyCredit{ width:380px;}
		#bottomRightBG{	width:390px; height:235px;}
		.popupBody p.companyCredit{ width:380px;}
}

/* Mobile screen widths */
@media screen and (max-width:768px){
	body{ background-image:url(../mobile-images/bg-top.jpg); background-size:100% auto;}
		.mobileElement,
		a.mobileElement{ display:block;}
		.nonMobileElement,
		a.nonMobileElement{ display:none;}
			p .mobileElement,
			p a.mobileElement{ display:inline-block;}			
			p .nonMobileElement,
			p a.nonMobileElement{ display:none;}
		#contentArea #contentAreaPadding{ padding:0 10px;}
			#textOuter{
				width:100%;
				float:none;
				margin:0 0 18% 0; padding:0;
			}
				h1{ margin:0 0 7% 0;}
				p{ margin:0 0 5% 0;}
				.popupBody p{ margin:0 0 5% 0;}
			#examplesOuter{
				width:100%;
				float:none;
			}
				#examplesInner{
					width:100%;
					height:auto;
					-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;
					background:none;
				}
					.example{
						width:100%; height:auto;
						margin:0 0 12% 0;
					}
						.exampleBorder{
							position:relative;
							border:none; padding:0 0 58px 0;
						}
							.popupLink{
								width:auto; height:auto;
								border:4px solid #fff;
								-webkit-box-shadow:0 0 10px 2px #c3c3c3; -moz-box-shadow:0 0 10px 2px #c3c3c3; box-shadow:0 0 10px 2px #c3c3c3;
								top:58px;
							}
								.example img{
									width:100%; height:auto;
									position:relative;
								}
								.greyImage{
									display:none;
									opacity:0;
								}
								.hoverImage{
									display:block;
									opacity:1;
								}
								.example .popupLink#Example-SkylineSkyrides img{ top:0; left:0;}
							.exampleText{
								width:100%;
								position:absolute; top:0;
								padding:0 0 24px 0;
							}
								 .exampleText h2{ float:left;}
								 .exampleText a,
								 .exampleText a:active,
								 .exampleText a:visited{ float:right;}
				.contentPopup-link{
					float:none;
					margin:0 auto 40px auto;
				}
				.popupBody p.companyCredit{ width:192px;}
		#bottomRightBG{
			width:100%; height:375px;
			background-image: url(../mobile-images/bg-bottom.jpg); background-size:100% auto;
			right:0;
		}
		body footer{
			position:relative; bottom:0; top:auto;
			padding:0 0 7% 0;
		}
			body footer p{ text-align:center;}
				footer .redText{
					display:block;
					text-align:center;
				}
}
@media screen and (min-width:686px) and (max-width:768px){	
	p{ font-size:26px; line-height:44px;}
	body header{ margin:0 0 18% 0;}
		.exampleText h2{ font-size:34px; line-height:34px;}
		.exampleText a,
		.exampleText a:active,
		.exampleText a:visited{ font-size:24px; line-height:34px;}
	body footer p{ font-size:28px; line-height:28px;}
		footer .redText{ font-size:58px; line-height:100px;}
}
@media screen and (max-width:705px){
	body.popupBody{ padding:30px 20px;}
}
@media screen and (max-width:685px){
	body header{ margin:0 0 12% 0;}
	.exampleBorder{ padding:0 0 38px 0;}
		.popupLink{ top:38px;}
			 .exampleText h2{ font-size:24px; line-height:24px;}
			 .exampleText a,
			 .exampleText a:active,
			 .exampleText a:visited{ font-size:14px; line-height:24px;}
}
@media screen and (min-width:481px) and (max-width:685px){	
	h1{ font-size:50px; line-height:50px;}
	h1.contentPopup-title{ font-size:30px; line-height:30px;}
	p{ font-size:20px; line-height:36px;}
	.popupBody p{ font-size:18px; line-height:30px;}
	body footer p{ font-size:17px; line-height:17px;}
		footer .redText{ font-size:38px; line-height:70px;}
}
@media screen and (max-width:640px){
	#contentPopups .valign-inner{ margin:0 20px;}
		h1.contentPopup-title{ text-align:center;}
		#contentPopup-close{ top:-30px; right:0;}
}
@media screen and (max-width:614px){
	.contentPopup-link{ width:380px;}
		.popupBody p.companyCredit,
		#IECredit{
			width:100%; height:auto;
			margin:0 0 20px 0; padding:0;
			text-align:center;
			vertical-align:middle;
		}
			.popupBody p{ clear:both;}
			.companyCredit span,
			#IECredit span,
			#CTCCredit span{
				display:inline-block;
				float:none;
				position:relative; right:auto; left:auto; top:auto;
				line-height:11px;
				padding:0 14px 0 0;
			}
			.companyCredit a,
			#IECredit a,
			#CTCCredit a{
				width:112px; height:26px;
				display:inline-block;
				float:none;
				position:relative; right:auto; left:auto; top:auto;
				background-size:100% auto;
			}
			#IECredit a{
				width:112px; height:26px;
				line-height:34px;
			}
			#CTCCredit a{
				width:142px; height:36px;
				line-height:54px;
			}
}
@media screen and (min-width:532px) and (max-width:614px){
	.popupBody p{ font-size:26px; line-height:44px;}
}
@media screen and (max-width:580px){
	body header{ margin:0 0 22% 0;}
	body.popupBody .contentPopup-link{
		width:90%;
		float:none;
		margin:0 auto 5% auto;
	}
	.example{ margin:0 0 20% 0;}
		.exampleBorder{ padding:0 0 62px 0;}
			.popupLink{ top:62px;}
				.exampleText h2{ float:none; clear:both;}
				.exampleText a,
				.exampleText a:active,
				.exampleText a:visited{ float:none; clear:both;}
			.exampleText{ padding:0 0 14px 0;}
	.popupBody p.companyCredit,
	#IECredit{ margin:0 0 7% 20px;}
}
@media screen and (min-width:361px) and (max-width:480px){	
	h1{ font-size:36px; line-height:36px;}
	h1.contentPopup-title{ font-size:34px; line-height:34px;}
	p{ font-size:20px; line-height:30px;}
	.popupBody p{ font-size:20px; line-height:32px;}
	body footer p{ font-size:12px; line-height:12px;}
		footer .redText{ font-size:28px; line-height:60px;}
}
@media screen and (max-width:360px){
	.exampleText h2{ font-size:20px; line-height:20px;}
	.exampleText a,
	.exampleText a:active,
	.exampleText a:visited{ font-size:16px; line-height:20px;}
	#footerPadding{ padding:0;}
		body footer p{ font-size:12px; line-height:12px;}
			footer .redText{ font-size:28px; line-height:60px;}
}
@media screen and (min-width:321px) and (max-width:360px){
	h1{ font-size:28px; line-height:28px;}
	h1.contentPopup-title{ font-size:26px; line-height:26px;}
	p{ font-size:18px; line-height:28px;}
	.popupBody p{ font-size:18px; line-height:28px;}
}
@media screen and (max-width:320px){
	h1{ font-size:28px; line-height:28px;}
	h1.contentPopup-title{ font-size:26px; line-height:26px;}
	.exampleText h2{ font-size:24px; line-height:24px;}
	.exampleText a,
	.exampleText a:active,
	.exampleText a:visited{ font-size:14px; line-height:24px;}
	p{ font-size:18px; line-height:28px;}
	.popupBody p{ font-size:18px; line-height:28px;}
	body footer p{ font-size:11px; line-height:11px;}
		footer .redText{ font-size:22px; line-height:40px;}
}

/* Height specfic styles */
@media screen and (max-height:868px){
	@media screen and (min-width:769px) and (max-width:950px){
		body footer{ top:50px; bottom:auto;}
			footer p{ text-align:right;}
	}
}
@media screen and (min-height:729px) and (max-height:868px){
	header{ margin:0 0 100px 0;}
}
@media screen and (max-height:728px){
	header{ margin:0 0 90px 0;}
	#contentPopup-content{ height:440px;}
}
@media screen and (max-height:640px){
	header{ z-index:10;}
	#contentPopup-content{ height:360px;}
	footer{ top:50px; bottom:auto;}
		footer p{ text-align:right;}
}