@charset "utf-8";
.top {width: 100%; background: url(../img/home/topbg.png) no-repeat; background-size: 100%; overflow: hidden;}
.top .content {max-width: 1800px; margin: 0 auto; }
.top .content .text {width: 45%; float: left; margin-right: 2%;}
.top .content .textstyle {color: white;	font-family: "eurostile", sans-serif; font-weight: 700;	font-size: 1.9em; line-height: 35px; text-shadow:0px 5px 8px #217bc1,5px 0px 8px #217bc1,-5px 0px 8px #217bc1,0px -5px 8px #217bc1; margin-top:35%; text-align: center; margin-right: 30%;}
.top .content .tright {width: 45%; float: left; }
.top .content .logo img {width: 55%; height: auto; margin-top: 30px; margin-left: 25%;  }
.top .content .trailer img {margin-top: 10%; margin-left: 60%; width: 50%; height: auto; margin-bottom: 20%;}
.top .content .smLogo {display: none;}

.purchaseb {margin: 3% auto; text-align: center;}
.purchaseb a, .purchaseb a:visited {color: #fff; text-decoration: none;}
.purchaseb a:hover {color: #52c5ea;}
.purchaseb > div {display: inline-block; vertical-align: middle; background: url(../img/purchase/buttonBg.png); background-size: 100% 100%;  padding-top: 18px;  padding-bottom: 18px;   width: 100%;	max-width: 300px;	margin: 0 auto 30px;	color: #fff;}

.divider {width: 100%; background: url(../img/home/divider.png) repeat-x center; height: 44px;}
.buff {clear: both; height:40px; width: 100%;}

.story {width: 100%; background: url(../img/home/storyBg_01.jpg) no-repeat center top; background-size: cover; overflow: hidden; min-height: 200px; margin-left: auto; margin-right: auto; }
.storylines {width: 100%; background: url(../img/home/lines.png) repeat center top; height: 100%;}
.story .storyHeader {width: 75%; padding-top: 40px; margin-right: auto; margin-left: auto;}

.sectionWrap {width: 70%; background: url(../img/home/storyText_bg.png) no-repeat center top; background-size: 100% 100%; margin: 0 auto;}
.section {width: 100%; display: table; margin: -2.5% auto 0; padding: 10px; }
.section .scol {display: table-cell; width: 45%; padding: 2%; vertical-align: middle;}
.section .scol img {width: 100%; height: auto; margin: 0 auto;}
.section .scol p {color: white; font-size: 24px; text-shadow:0px 5px 8px #217bc1,5px 0px 8px #217bc1,-5px 0px 8px #217bc1,0px -5px 8px #217bc1; text-align: left; line-height: 28px;}
.shid {display: none;}

.spec {width: 100%; background: url(../img/home/specBg.jpg) no-repeat center top; min-height: 200px; text-align: center; padding-bottom: 40px;}
.spec .specHeader img {width: 50%; height: auto; margin-top: 4%;}
.spec .specText {width: 60%; margin: 0 auto; background-size: 100% 100%; padding-left: 10px; padding-right: 10px; }
.blueBoxSpec {
	width: 35%;
	padding: 2%;
	background: linear-gradient(rgba(9, 76, 176, 0.6), rgba(48, 37, 119, 0.6));
	border-radius: 10px;
	border: 2px solid black;
}
.spec .specText p {line-height: 50px;  color: white; font-size: 2.5em; text-shadow:0px 5px 8px #217bc1,5px 0px 8px #217bc1,-5px 0px 8px #217bc1,0px -5px 8px #217bc1; }
.comingSoonText {font-size: 30px;color: white;font-family: "eurostile", sans-serif;font-weight: 700;line-height: 33px;  text-shadow: 0px 5px 8px #217bc1, 5px 0px 8px #217bc1, -5px 0px 8px #217bc1, 0px -5px 8px #217bc1;margin-top: 38%;    text-align: center;margin-right: 30%;}
@media screen and (max-width: 2600px) { 
	.top .content .logo img {width: 60%; height: auto; margin-top: 30px; margin-left: 40%;  }
	.top .content .trailer img {margin-top: 10%; margin-left: 85%; width: 50%; height: auto; margin-bottom: 55%;}
	.top .content .text {width: 40%; float: left; margin-right: 2%;}
}
@media screen and (max-width: 2320px) { 
	.top .content .trailer img {margin-top: 10%; margin-left: 70%; width: 50%; height: auto; margin-bottom: 35%;}
}
@media screen and (max-width: 2100px) { 
	.top .content .trailer img {margin-top: 10%; margin-left: 75%; width: 50%; height: auto; margin-bottom: 30%;}
}
@media screen and (max-width: 1999px) { 
	.top .content .trailer img {margin-top: 10%; margin-left: 60%; width: 50%; height: auto; margin-bottom: 25%;}
}
@media screen and (max-width: 1920px) { 
	.top .content .trailer img {margin-top: 10%; margin-left: 70%; width: 50%; height: auto; margin-bottom: 20%;}
}
@media screen and (max-width: 1900px) { 
	.top .content .trailer img {margin-top: 10%; margin-left: 70%; width: 50%; height: auto; margin-bottom: 20%;}
}
@media screen and (max-width: 1680px) { 
/*	.top .content .textstyle {font-size: 1.9em; line-height: 40px;}*/
	.story .storyHeader {width: 80%; }
	.sectionWrap {width: 75%;}
	.section .scol p {font-size: 22px; line-height: 24px;}
	.colpad {padding-top: 40px; padding-bottom: 20px;}

}
@media screen and (max-width: 1366px) { 
	.top .content .trailer img {margin-top: 10%; margin-left: 70%; width: 50%; height: auto; margin-bottom: 15%;}
	.top .content .textstyle {font-size: 1.45em; line-height: 30px; margin-top:25%;}
	.story .storyHeader {width: 85%; }
	.sectionWrap {width: 85%}
	.section .scol p {font-size: 20px; line-height: 22px;}
	.comingSoonText{font-size:1.3rem;line-height:25px;}
	.purchaseb > div { padding-top: 18px;  padding-bottom: 18px;   width: 100%;	max-width: 250px;	}
}

@media screen and (max-width: 1280px) { 
	.spec .specHeader img {width: 75%; height: auto; margin-top: 4%;}
	.spec .specText {width: 75%; margin: 0 auto; background-size: 100% 100%; min-height: 20px; padding-left: 10px; padding-right: 10px; }
	.spec .specText p {line-height: 40px; font-size: 2.0em; padding-top: 40px; padding-bottom: 40px; }
	.story .storyHeader {width: 90%; }
	.section .scol p {font-size: 19px; line-height: 21px;}

}
@media screen and (max-width: 1024px){
	.purchaseb > div { padding-top: 12px;  padding-bottom: 12px;   width: 100%;	max-width: 250px;	}
		
}

@media screen and (max-width: 1000px) {
	.top .content .textstyle {font-size: 1em; line-height: 21px; margin-top:25%;}
}

@media screen and (max-width: 768px) { 
/*	.top .content .textstyle {font-size: 1.25em; line-height: 25px; margin-top:25%; }*/
	.spec {padding-bottom: 50px;}
	.spec .specHeader img {width: 80%; height: auto; margin-top: 4%;}
	.spec .specText p {line-height: 35px; font-size: 1.5em; }
	.story .storyHeader {width: 95%; }
	.story .storyHeader img {width: 35%; height: auto; }
	.sectionWrap {width: 85%;}
	.section .scol {display: block; width: 99%; margin-left: auto; margin-right: auto; margin-bottom: 20px; padding: 10px;}
	.lhid {display: none;}
	.shid {display: block;}
	.purchaseb > div { padding-top: 12px;  padding-bottom: 12px;   width: 100%;	max-width: 175px;	}
	
}
@media screen and (max-width: 640px) { 
	.top .content .textstyle {font-size: .75em; line-height: 15px; margin-top:25%;}
/*	.top .content .textstyle {font-size: 1em; line-height: 20px; margin-top:25%; }*/
	.top .content .logo img {width: 55%; height: auto; margin-top: 30px; margin-left: 30%;  }
	.purchaseb > div { padding-top: 8px;  padding-bottom: 8px;   width: 100%;	max-width: 125px;	}
	
}
@media screen and (max-width: 480px) { 
	.top {background-size: 180%; background-position: center top; }
	.top .content .smLogo {display: block; text-align: right;}
	.top .content .smLogo img {width: 30%; height: auto; margin-top: 4%; margin-right: 3%;}
	.top .content .text {margin-top:52%; width: 49%; display:inline-block;}
	.top .content .textstyle {font-size: .75em; line-height: 15px; margin-top:6%; text-align: center; margin-right: 0%;}
	.top .content .tright {margin-top: 52%; width: 46%; display: inline-block; }
	.top .content .logo {display: none;}
	.top .content .trailer img {width: 100%; margin: 0 auto;}
	.spec .specHeader img {width: 100%; height: auto; margin-top: 4%;}
	.spec .specText p {line-height: 30px; font-size: 1em; }
	.story .storyHeader img {width: 50%; height: auto; }
	.section {margin-top: -5.5%;}
	.section .col p {font-size: 18px; line-height: 25px;}
	.purchaseb {margin-bottom:-12%;}
	.purchaseb > div { padding: 8px;   width: 90%; margin-left: -3px;}
}