/* GENERAL STYLES*/
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.hub #content #secondary {display: none;}
#aboutHub {width: 100%; background-color: #fff; text-align:center; margin: 0 auto;}
p {line-height: 1.5em; font-size: 14px;}
a {color: #fff; text-decoration: none;}
h3 {font-size: 24px; font-weight: bold; line-height: 1.5em;}
.txt-upper {font-size: 1.5em; font-weight: bold; text-transform: uppercase;}

.symbol { position: absolute; display:inline; z-index: 5;}
.leftSym {left: 0; top: 355px;}
.rightSym {right: 0; top: 300px;}
.clearFix:after {clear: both;}
.border-right { border-right: 1px solid #CCC;}
.videowrapper { position: relative; height: 100%; overflow: hidden; padding-bottom: 30%;}
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.btn {padding: 8px 40px; margin: 5px 0.5%; background-color: #024688; text-transform: uppercase; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); /*transform: translateZ(0px);*/transition-duration: 0.3s;transition-property: box-shadow, transform; backface-visibility: hidden;box-shadow: 0 0 1px rgba(0, 0, 0, 0); text-align: center;}
.btn:hover {cursor: pointer; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);transform: scale(1.1);}
.btn.white {background-color: #fff; margin: 3% 0 2%; text-shadow: none;}
.btn.white:hover {background-color: #333; color:#fff;}
.btn.white:hover a {color:#fff;}
.btn.white a {color:#024688; font-weight: bold; }
.btn.grey:hover {background-color: #333; color:#fff;}
.btn.grey:hover a {color:#fff;}
/* END GENERAL STYLES*/

/* HEADER STYLES */
.headerBG {background-size: cover; height:300px; width: 100%; text-align: center; color: #fff; overflow: hidden; padding: 50px 10px 10px;}
.headerAbout {margin: 0 auto;}
.headerAbout > div {display: inline-block; vertical-align: middle; width: auto; padding: 2%; background-color: rgba(14,107,185, 0.8);}
.headerAbout > div > h1 {margin-top: 20px; color: #fff; font-size: 3em; line-height: 1em; font-weight: normal;}
.headerAbout > div:last-of-type img {width: 90%; max-width: 267px;}

/* CONSOLE SECTION STYLES */
.contentWrapper {width: 100%; color: #fff;}

#consoleAbout {overflow: hidden; width: 100%; margin: 4% auto 0; background-color: #fff; font-size: 0;}
#consoleAbout > div {display: block; padding: 2%; vertical-align: top; font-size: 1rem; width: 100%;}

#consoleAbout > div#leftMenu { background-color: #fff; width: 100%; padding: 0; margin-bottom: 2%;}
#consoleAbout > div#leftMenu > div {width: 44%; padding: 2%; font-size: 1rem; transform: scale(0.9); transition-duration: 0.3s; display: inline-block; text-align: left; vertical-align: top;}
#consoleAbout > div#leftMenu > div:first-of-type { text-align: right; z-index: 4;}
#consoleAbout > div#leftMenu > div:hover {transform: scale(1);}
#consoleAbout > div#leftMenu > div img { width: 100%; height: auto; max-width: 200px; vertical-align: middle;}
#consoleAbout > div#leftMenu > div.active {background-color: #fff;}
#consoleAbout > div#leftMenu > div a  { color: #333;}
.tab-copy { display: inline-block; width: 40%; text-align: left; margin-left: 2%; vertical-align: middle;}

.contentAbout { background: url(//img.game.co.uk/hub/images/AboutPages/menuActive.png) no-repeat left top #024688; background-size: 60px auto; background-position: 30% 0;}
.contentAbout > div {display: none; margin: 2% auto; width: 82%;}
.contentAbout > div.active {display: inline-block;}
.contentAbout > div > div { text-align: left; width: 46%; display: inline-block; padding: 0 2%; vertical-align: top;}
.contentAbout > div > div:last-of-type { position: relative; right: -10%;}
.contentAbout > div > div > p {margin-bottom: 1.2em;}
.contentAbout > div > div > ul {line-height: 1.5em; font-size: 0.875em; list-style: inside disc;}

#contentMedia {width: 100%; background-color: #F2F2F2;}
#contentMedia > div {display: none;}
#contentMedia > div.active {display: inline-block;}
#contentMedia div ul li {display: inline-block; width: 12%; vertical-align: top;}
#contentMedia div ul li:hover { cursor: pointer;}
#contentMedia div ul li img {width: 100%; height: auto;}
#contentMedia div ul li.videoThumb {background-color: #000;}
#contentMedia div ul li.videoThumb img {padding: 8.2% 0;}

.popup {width:100%;height:100%;position:fixed;top:0%;left:0%;display:none; background-color: rgba(0,0,0, 0.3); z-index: 96;}
.popup #popFrame { position: absolute; left: 0; right: 0; top: 15%; margin: 0 auto; width: 70%; max-width: 950px; z-index: 97;}
.popup img {width: 100%; height: auto; max-width: 950px;}
.popup .imgControls {background-color: rgba(0,0,0,0.1); width: 6%; position: absolute; top: 30%; padding: 15% 0; z-index: 98; text-align: center; font-weight: bold; font-size: 2em;}
.popup .imgControls:hover, .popup #closeImg:hover {background-color: #024688; cursor: pointer; }
.popup #nextImg {right: 0;}
.popup #prevImg {left: 0;}
.popup #closeImg {background-color: rgba(2,70,136,0.9); top: 0; right: 0; padding: 2%; font-weight: normal; font-size: 1.5em;}
.popup .videowrapper { padding-bottom: 60%;}

/* ACCORDION STYLES */
.accordion { width: 100%;margin: 0 auto 2%;background: #333;}
.accordion .link {cursor: pointer;display: block;padding: 20px 15px 20px 6%;color: #fff;border-bottom: 1px solid #CCC;position: relative;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}
.accordion li:last-child .link {border-bottom: 0;}
.accordion li h2 { font-size: 1.8em; display: inherit !important; line-height: 1.5em; font-weight: normal; text-align: left;}
.accordion li i {position: absolute;top: 16px;left: 12px;color: #fff;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}
.accordian-icon {display: inline-block;}
.accordion li i.accordian-icon-down {right: 6%;left: auto;top: 55px;}
.accordion li.open .link {background-color: #024688;}
.accordion li.open i.accordian-icon-down {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}
.accordian-icon.accordian-icon-down > img { width: 15%;}

 .submenu {display: none;background: #fff;width: 100%; }
/* END ACCORDION STYLES */

/* TECH SPECS STYLES */
#tech {color: #333; display: none; padding: 2% 2% 4% 2%; margin: 0 auto; width: 100%;}
#tech-nav h3 { font-size: 1.4em;}
#tech-nav div {display: inline-block; padding: 1% 2%;}
#tech-nav div.active, #tech-nav div:hover {background-color: #024688; box-shadow: 0 0 15px -2px #030203 inset; -moz-box-shadow: 0 0 15px -2px #030203 inset; -webkit-box-shadow: 0 0 15px -2px #030203 inset; -o-box-shadow: 0 0 15px -2px #030203 inset;}
#tech-nav div.active a, #tech-nav div:hover a {color: #fff;}
#tech-nav a { text-transform: uppercase; color: #333;}

#tech table {table-layout: fixed; width: 100%; border: 0 none; border-collapse: separate; border-spacing: 2px; margin-top: 4%; line-height: 1.5em;}
#tech tr {background-color: #f5f5f5;}
#tech tr:nth-child(2n+1) {background-color: #eee;}
#tech tr > td {padding: 15px 18px; text-align: left; vertical-align: middle; border: 0 none;}
#tech tr > td:first-of-type {width: 35%;}
#tech b { font-weight: bold;}
.specs {max-width: 1200px; margin: 0 auto;}
.specs > div {display: none;}
.specs > div.active {display: inline-block;}
/* END TECH SPECS STYLES */

/* GAMES SECTION STYLES */
#gamesSec {background-size: cover;}
#gamesSec > li > div { width: 40%; position: relative; left: 56%; padding: 4% 2%; text-align: left;}
#gamesSec > li > div > .videowrapper {padding-bottom: 60%;}
#gamesSec > li > div > p {padding-bottom: 6%; line-height: 1.6em;}

/* VR SECTION STYLES */
#vrSec {background-color: #fff; color: #333;}
#vrHeader { background-size: cover; padding: 15% 0;}
#vrSec > li > div:last-of-type { width: 90%; margin: 0 auto;}
#vrSec > li > div > div { width: 45%; display: inline-block; text-align: left; vertical-align: middle; padding: 4% 2%;}
#vrSec > li > div > div:first-of-type { text-align: right;}
#vrSec > li > div > div img { width: 100%; height: auto; max-width: 472px;}
#vrSec > li > div > div p {padding-bottom: 6%; line-height: 1.6em;}
#vrSec .btn {margin: 0 auto 4%;}

/* ACCESSORIES SECTION STYLES */
.divider#acc {background-size: cover;}
#accessories {color: #333; width: 100%; padding: 2%; margin: 0 auto;}
.acc-item {width: 45%; margin: 2%; display: inline-block; text-align: left; vertical-align: top;}
.acc-item img {width: 100%; max-width: 800px;}
#accessories .btn { margin: 4% auto;}

/* MEMBERSHIP SECTION */
#membership {height: auto; padding: 20px 0; color: #fff; overflow: hidden;}
#membership > div {display: inline-block; vertical-align: middle; margin: 20px 6%; width: 36%; text-align: left; max-width: 530px;}
#membership > div:first-of-type {float: left;}
#membership > div:last-of-type {float: right;}
#membership > div > h2 {font-size: 1.8em; line-height: 1.5em; font-weight: normal; text-align: left;}
#membership > div > h2, .divider#membership > div > img {display: inline-block !important; vertical-align: middle;}
#membership > div > img { width: 100%; height: auto; max-width: 100px; margin-right: 2%;}


/* BREAKPOINTS */
@media only screen and (min-width: 1800px) {
	
	.contentAbout > div {width: 80%;}
	.contentAbout > div > div {width: 40%;}
	#contentMedia > div {width: 85%;}
	
	.accordion .link { padding-left: 20%;}
	.accordion li i.accordian-icon-down {right: 20%;}
	
	#gamesSec > li > div {left: 45%; width: 35%;}
	#vrSec > li > div:last-of-type { width: 68%;}
	#accessories > li {width: 68%; margin: 0  auto}
	.acc-item {width: 20%; vertical-align: top;}
	
	#membership > div {width: 25%;}
	#membership > div:first-of-type, #membership > div:last-of-type {float: none;}
}

@media only screen and (max-width: 1160px) {
	
	.symbol {display: none;}
	.headerBG { height: 250px;}
	.contentAbout > div {width: 100%; padding: 2% 0 2% 6%;}
	.contentAbout > div > div {padding: 0; width: 50%;}
	.contentAbout > div > div:last-of-type {right: 0; width: 44%; padding-left: 5%;}
	#consoleAbout > div#leftMenu > div, #consoleAbout > div#leftMenu > div:first-of-type { text-align: center;}
	#consoleAbout > div#leftMenu > div { width: 48%; padding: 2% 0;}
	#consoleAbout > div#leftMenu > div img { max-width: 160px;}
	.tab-copy { width: 50%;}
	#contentMedia div ul li { width: 16%;}
	
	.accordion .link { padding-left: 3%;}
	.accordion li i.accordian-icon-down { right: 3%;}
}
@media only screen and (max-width: 768px) {
	
	.headerAbout { margin-bottom: 10px;}
	.headerBG {height:auto; padding-top: 20px;}
	.headerAbout > div > h1 {font-size: 2em;}
	
	#contentMedia div ul li { width: 32%;}
	.contentAbout > div {margin-top: 5%;}
	.tab-copy { width: 100%; margin-top: 4%;}
	
	.popup .imgControlsMobile {background-color: rgba(2,70,136,0.9); width: 50%; position: relative; top: 0; padding: 5% 0;}
	.popup #nextImg {float: right;}
	.popup #prevImg {float: left;}
	.popup #nextImg:after {clear: right;}
	.popup #prevImg:after {clear: left;}
	
	.accordion li h2 { font-size: 1.2em;}
	.accordion li i.accordian-icon-down { right: -8%; top: 40px;}
	
	div#techSpecs > div {margin-top: 0;}
	
	/* GAMES SECTION */
	#gamesSec {padding: 6% 2%; background-position: left;}
	#gamesSec > li > div { width: 90%; position: inherit; padding: 2%; margin: 0 auto ; background-color: rgba(0,0,0, 0.5);}
	
	/* VR SECTION */
	#vrHeader {padding: 25% 0;}
	#vrSec > li > div:last-of-type { width: 96%; padding: 4% 2%}
	#vrSec > li > div > div p {padding-bottom: 3%;}
	#vrSec > li > div > div { width: 100%; display: block; padding: 0 2%;}
	#vrSec > li > div > div:first-of-type {text-align: left;}
	
	/* ACCESSORIES SECTION */
	.acc-item {width: 95%;}
	
	/* MEMBERSHIP SECTION */
	#membership > div {width: 90%; max-width: 768px; margin: 0 5px;}
	#membership > div:first-of-type {margin-bottom: 1%; float: none; clear: left;}
	#membership > div:last-of-type {float: none; clear: right;}
	#membership > div > h2 {font-size: 1.5em;}
	#membership > div > h2, #membership > div > img {display: inline !important;}
	#membership > div > img { width: 10%; height: auto; max-width: 50px; margin-right: 2%;}
	#membership > div > h2 > .txt-upper > br {display: none;}
}

/* MOBILE */
body#pgHub.mobile main, body#pgHub.mobile {background-color: #fff;}
body#pgHub.mobile #content { padding: 0 0 20px 0;}
body#pgHub.mobile .headerBG {padding: 10px 0 0 0;}
body#pgHub.mobile .headerAbout { width: 100%;}
body#pgHub.mobile .headerAbout > div > h1 { text-transform: none; font-size: 2.5em;}
body#pgHub.mobile a {color: #fff;}
body#pgHub li { margin-bottom: 0;}
body#pgHub.mobile #membership h2 {margin:0;}

body#pgHub.mobile #consoleAbout > div#leftMenu > div img { max-width: 120px;}
body#pgHub.mobile #consoleAbout > div#leftMenu > div:first-of-type {padding-right: 6%;}
body#pgHub.mobile .contentAbout > div > div { width: 100%; display: block;}
body#pgHub.mobile .contentAbout > div > div:last-of-type {margin-top: 20px;}
body#pgHub.mobile .contentAbout > div {margin: 10% 2%; padding: 2% 0; width: 90%;}
body#pgHub.mobile .contentAbout > div > div > ul { font-size: 1.3em;}
body#pgHub.mobile .contentAbout > div > div > ul > li { margin-bottom: 0;}
body#pgHub.mobile .videowrapper, body#pgHub.mobile .videowrapper iframe {width: 96%; margin: 0 auto;}
body#pgHub.mobile .videowrapper iframe {left: 2%;}
body#pgHub.mobile #consoleAbout > div { width: 100%; padding: 2% 0;}
body#pgHub.mobile #consoleAbout > div#leftMenu {padding: 0;}
body#pgHub.mobile .btn { width: 100%; text-align: center; font-size: 1.5em; padding: 12px 0;}
body#pgHub.mobile .btn.white a {color:#024688; font-weight: bold; }
body#pgHub.mobile .btn.white:hover a {color:#fff;}
body#pgHub.mobile .btn.white:hover {background-color: #333; color:#fff;}
body#pgHub.mobile .popup #popFrame {top: 20%; width: 90%;}
body#pgHub.mobile .popup #popFrame .videowrapper {width: 100%;}
body#pgHub.mobile .popup #popFrame .videowrapper iframe {left: 0; width: 100%;}

body#pgHub.mobile .accordion .link { padding: 5px 15px 10px 15px;}
body#pgHub.mobile .accordion li i.accordian-icon-down {right: 0;}
body#pgHub.mobile #gamesSec { padding: 6% 0%;}
body#pgHub.mobile #tech { padding: 2% 0 4%;}
body#pgHub.mobile .specs { width: 95%; margin: 0 auto;}
body#pgHub.mobile #vrSec > li > div > div {width: 95%;}
body#pgHub.mobile #tech-nav a { color: #333;}
body#pgHub.mobile #tech-nav div.active a, #tech-nav div:hover a {color: #fff;}
body#pgHub.mobile #tech-nav div { padding: 2% 10%;}