@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

body,html{background-color:#141414; margin:0;  font-size:100%;}
.productWrapper{ width:100%; overflow:hidden; font-family: 'Oswald', sans-serif; background-color:#000;}
.productAreaBG{ width:100%;background-repeat:no-repeat; -moz-background-size:50%;-webkit-background-size:50%;-o-background-size:50%;background-size:50%;}
#bg00{background-image:url(../img/contour/bg01-2.png);background-position:left center;}
#bg01{background-image:url(../img/contour/bg01-2.png);background-position:right center;}
#bg01-2{background-image:url(../img/contour/bg06-2.png);background-position:left center;}
#bg02{background-image:url(../img/contour/bg02-2.png);background-position:right center; }
#bg02a{background-image:url(../img/contour/bg02-2a.png);background-position:right center; }
#bg03{background-image:url(../img/contour/bg03-2.png);background-position:left center; }
#bg04{background-image:url(../img/contour/bg04-3.png);background-position:right center; -moz-background-size:50% ;-webkit-background-size:50% ;-o-background-size:50%;background-size:50%;}
#bg05{background-image:url(../img/contour/bg05-2.png);background-position:left center; }
#bg06{background-image:url(../img/contour/bg06-2.jpg);background-position:right center; }
.productArea{ 
	width:1100px; 
	margin:0 auto;
	overflow:hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	height:800px;
  }
.productAreaL{ width:550px; float:left; position: relative;  top: 50%;  transform: translateY(-50%);}
.productAreaR{ width:550px; float:right; position: relative;  top: 50%;  transform: translateY(-50%);}
#productAreaFull{ height:auto;}
#productAreaFull >span{ display:block;}
#productAreaFull >span >img{ width:100%;}
.productAreaC{ width:60%; padding:5em 0; margin:0 auto;}
#productImg{ 	background-size:cover; margin:0 auto; text-align:center;}
#productImg img{ width:450px; }
#productText{ 	text-align:center; width:80%; margin:0 auto;}
#productText h1{ margin:5px 0; padding:0; font-size:7em; color:#fff; font-weight:700; }
#productText h2{ margin:0; padding:0; font-size:2em; color:#f00;}
#productText >h2 a{ margin:0; padding:15px; font-size:20px; color:#fff; display:block; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f85032+0,f16f5c+50,f6290c+51,f02f17+71,e73827+100;Red+Gloss+%231 */
line-height:37px;
background: #f85032; /* Old browsers */
background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */
margin-top:0.5em; text-decoration:none;}
#productText> h2 a::after{content:''; display:block; background-image:url(../img/contour/play-icon.png);background-position:right center; background-repeat:no-repeat; height:37px; width:37px; float:right; padding-left:10px;}
#productText >h2#subVid::after{ content:''; display:block; position: relative; float:right; top:-10px; right:70px;  background-image:url(../img/contour/sub-Vid.png); height:27px; width:14px;}
#productText h3{ margin:5px 0; padding:6px; font-size:3em; color:#000; font-weight:700; background-color:#fff;}
#productText h4{ margin:0; padding:0; font-size:3em; color:#fff; padding-bottom:10px; border-bottom:1px  solid #F00; }
#productText p{ margin:5px 0; padding:0; font-size:1.2em; color:#fff; text-align:left; font-weight:300; letter-spacing:1px; line-height:1.2em; width:100%}
#productText p a { display:inline-block; padding:5px; color:#F00; border:1px solid #f00; text-decoration:none; }
#productText p a:hover { color:#000; border:1px solid #f00; background-color:#f00 }
#gamelist{ color:#fff; overflow:hidden;}
#gamelisticonM{ height:20px; clear:both;}
#gamelisticonB{ overflow:hidden;}
#gamelisticonB >ul{ margin:10px 0; overflow:hidden;}
#gamelisticonB >ul >li{ width:165px;  display:block; float:left; margin-right:15px; text-align:left;}
#gamelisticonB >ul >li:last-child{ margin-right:0px;}
#gamelisticonB >ul >li >a{color:#000; text-decoration:none;}
#gamelisticonS{ overflow:hidden; padding-bottom:10px;}
#gamelisticonS >ul{margin:10px 0; overflow:hidden;}
#gamelisticonS >ul >li{ width:82px; display:block; float:left; margin-right:7px; text-align:left;}
#gamelisticonS >ul >li:last-child{ margin-right:0px;}
#gamelisticonS >ul >li >a{ color:#000; text-decoration:none;}
#productText p a::after{ content:''; display:block; position: relative; float:right; top:20px; right:0px;  background-image:url(../img/contour/sub-Vid.png); height:27px; width:14px;}

@media screen and (max-width: 1100px){
.productArea{ width:90%; height:600px;}
.productAreaL,.productAreaR{ width:50%;}
.productAreaBG{-moz-background-size:55%;-webkit-background-size:55%;-o-background-size:55%;background-size:55%;}	
}
.i7{
    position: absolute;
    color: #FFF;
    top: 514px;
    right: -76%;
	}