@charset "utf-8";
#loading {width: 400px;height: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 100001}
#content {z-index: 9}
#content #section1 {position: relative;width: 100%;height: auto;display: block}
#animation_container {position: absolute;margin: auto;left: -100%;right: -100%}
#release-date {width: 30%;height: auto;position: absolute;top: 45%;left: 35%}
#release-date img {width: 100%;height: auto}
#hero-divider {bottom: 0;left: 0;width: 100%;height: auto}
#hero-divider img {width: 100%;height: auto;z-index: 99999;display: block;}
.freeDemo {top: 50%;left: 50%;width: 450px;transform: translate(-50%, -50%);}
.freeDemo img {width: 100%;z-index: 99999;}
/*
.freeDemo {bottom: 12%; right: 3%;width: 15%; height: auto;min-width: 175px;}
.freeDemo img {width: 100%;z-index: 99999;}
*/
a {text-decoration: none;}
.demoText {
	color: #000;
    font-size: 20px;
    font-family: "ebony", sans-serif;
    line-height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 70%;
}
.topBar {
	width: 100%;
	height: 49px;
	position: relative;
	z-index: 99989;
	background: linear-gradient(#897741, #cdcf89 50%, #FFF);
}

#section1 {
    background: #000
}
#section-video{background-image:url(../img/portal/video-sep-top.jpg),url(../img/portal/video-sep-bot.jpg);background-position:center top,center bottom;background-repeat: no-repeat,no-repeat;background-size:100% auto;background-color: #000;width:100%;}
#video-wrapper{width:80%;margin:0 auto}
.video-title{width:25.5%;height:auto}
.video-thumb{width:25%;height:auto;display:block;}
.video-thumb a{text-decoration:none;border:0;outline:none}
.video-thumb img{width:80%;height:auto;margin:auto auto;}
#section2 {position: relative;width: 100%;height: auto;min-height: 100%;display: block}
#sec2-top-divider {width: 100%;height: auto;display: block;top: 0;left: 0}
#sec2-top-divider img {width: 100%;height: auto;display: block;z-index: 9999}
#section2-bg {position: fixed;top: 0;left: 0;width: 100%;height: 200%;background: url(../img/portal/rainbowbar.jpg) left top repeat-y;background-attachment: fixed;z-index: -1;background-size:100% auto}
#sec2-bottom-divider img {width: 100%;height: auto;display: block;z-index: 9999}
#section2-content {text-align: center}
#section2-content .choose-plat-title {max-width: 1000px}
#section3 {position: relative;display: block;background: url(../img/portal/common-bg.jpg) left top repeat;background-size: 1% auto}
#section3-content {text-align: center}
#sec3-bottom-divider img {width: 100%;height: auto;display: block}
#sec3-top-divider img {width: 100%;height: auto;display: block}
#heroTop {display: none;width: 100%}
#content #section1Sm {display: none}
#subsec2 {position: relative;width: 100%;height: auto;min-height: 100%;display: block;background: url(../img/portal/dot-bg.png) left top repeat-y;text-align: center}
.bundleglam img {width: 85%;height: auto;margin: 4% auto 2%}
.bundleSm {display: none}
.blogo {color: #fff;font-size: 18px;font-family: "ebony", sans-serif;line-height: 18px;width: 50%;margin: 2% auto 0}
.blogo img {margin-bottom: 8px}
.bundleretail {color: #000;background: #efa633;font-family: "ebony", sans-serif;padding: 10px 0;width: 250px;display: inline-block;margin: 1%;text-decoration: none;font-size: 2vh}
.bundlelinks {width: 80%;margin: 1% auto}
.bundleretail:hover {background: #d48c19;text-decoration: none}
.ptitle {font-family: "ebony", sans-serif;font-size: 3vh;margin: 4% auto 2%;color: #fff;line-height: 3.5vh}
.dblogo {width: 50%;margin: 2% auto 0}
.dblogo img {margin-bottom: 12px}
.dbinfo {color: #000;background: #efa633;font-family: "ebony", sans-serif;padding: 10px 0;width: 40%;margin: 1% auto;text-decoration: none;font-size: 2vh}
.dtitle {width: 100%;margin: 4% auto}
.dtitle img {width: 27%;height: auto}
.dbox2 {width: 85%;margin: 2% auto;background: transparent;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 1px;text-align: center;color: #6b6b6b;background-image: url(../img/portal/gameplatbg.png);border: 1px solid transparent;padding: 8px 0 15px}
.dbox2 .cmbo {width: 40%}
.section {clear: both;padding: 0;margin: 0}
.col {display: block;float: left;margin: 1% 0 1% 2%}
.col:first-child {margin-left: 0}
.group:before, .group:after {content: "";display: table}
.group:after {clear: both}
.group {zoom: 1}
.columns {width: 49%}
.p3d, .p5d {width: 92%;margin: 2% auto;background: transparent;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 1px;text-align: center;color: #6b6b6b;background-image: url(../img/portal/gameplatbg.png);border: 2px solid #2B2B2B;min-height: 200px}
.p3dsphere {background-image: url(../img/portal/p3dcircle.png);background-repeat: no-repeat;background-position: center center;background-size: 85%;padding: 0;margin: 0}
.p5dstars {background-image: url(../img/portal/p5d_stars.png);background-repeat: no-repeat;background-position: 225% 50%;background-size: 85%;padding: 0;margin: 0}
.prodRetail {display: table;width: 100%}
.prodBlock {display: table-cell;padding: 2%;vertical-align: top;width: 50%}
.logo {margin: 15% auto 3%;color: #fff;font-size: 18px;font-family: "ebony", sans-serif;line-height: 18px}
.vitalogo {margin: 4% auto 0;color: #fff;font-size: 18px;font-family: "ebony", sans-serif;line-height: 18px}
.info {display: inline-block}
.box {width: 90%;margin: 4% auto}
.box img {width: 100%;height: auto}
.specs {width: 55%;display: inline-block;text-align: center;vertical-align: middle}
.small {display: none}
#button, #button2 {color: #fff;cursor: pointer;padding: 10px;width: 81%;font-size: 2vh;border: none;font-family: "ebony", sans-serif;margin: 2px auto;text-align: center}
#button3 {color: #000;cursor: pointer;padding: 10px;width: 99%;font-size: 2vh;border: none;font-family: "ebony", sans-serif;margin: 4% auto 8%;text-align: center}
#button, #button2, #button3 {display: none;background-image: url(../img/portal/downarrow2.png);background-repeat: no-repeat;background-position: 95% 50%}
#button:focus, #button2:focus, #button3:focus {outline: 0}
#button {background-color: #005ac1}
#button2 {background-color: #FE0000}
#button3 {background-color: #efa633}
.retail {text-align: center;padding-bottom: 20px}
.preorderTitle { width: 90%;margin: 3% auto}
.preorderTitle img {width: 59%;height: auto}
.p3dretail {color: #fff;font-size: 2vh;background: #005ac1;text-decoration: none;font-family: "ebony", sans-serif;padding: 10px 0;width: 250px;display: inline-block;margin: 2%}
.p3dretail:hover {background: #4487fe;text-decoration: none}
.p5dretail {color: #fff;font-size: 2vh;background: #FE0000;font-family: "ebony", sans-serif;padding: 10px 0;width: 250px;display: inline-block;margin: 2%;text-decoration: none}
.p5dretail:hover {background: #fb333b;text-decoration: none}
.productinfo {width: 75%;margin: 2% auto;background-image: url(../img/portal/combowheel.png);background-repeat: no-repeat;background-position: center center;background-size: contain;padding: 6%}
.productinfo img {width: 45%;height: auto}
.specstxt {background:rgba(0,0,0,0.5);padding:20px 0 0;margin:30px auto 0;width:50%;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:2px solid #FFF;margin-top: 30px;font-size: 30px;line-height: 38px;font-family: "ebony", sans-serif}
.specstxt .info-table{display:table;table-layout:fixed;width:100%;border-collapse:collapse}
.specstxt p{padding-bottom:20px}
.specstxt .info-row{display:table-row;border-top:1px solid #DDD;width:100%}
.specstxt .info-cell{display:table-cell;vertical-align:middle;padding:10px 5px}
.specstxt .info-left{text-align:right;padding-right:10px}
.specstxt .info-right{text-align:left;border-left:1px solid #DDD;padding-left:10px}
.tble {
    width: 35%
}

/*gameWrap*/
.gameWrap {display: table; width: 96%; margin: 0 auto; padding: 0px;}
.gameWrap .cols {display: table-cell; width: 42%; text-align: center; padding: 0;background-image: url(../img/portal/gameplatbg.png);
    border: 2px solid #2B2B2B; vertical-align: top;}
.gameWrap .mid {display: table-cell; width: 5%;}

/* dayOne */
.dayOne {display:block; width: 96%; margin: 0 auto; padding: 0px;}
.dayOne .cols {display:block;width:90%;margin:0 auto;text-align:center;padding:0;background-image:url(../img/portal/gameplatbg.png);border:2px solid #2B2B2B;vertical-align:top;}
.dayOne .mid {display:inline-block; width: 5%;}
.dayOne .prodRetail {display:block}
.dayOne .prodBlock{display:inline-block;width:100%;margin:0 auto;padding:0}
.dayOne .retail{width:75%;margin:0 auto}
.dayOne .box img {width:100%}

@media only screen and (max-width: 1366px) {
    .down {bottom: 0}
    .arrow {width: 40px}
    .tble {width: 58%}
    .dtitle img {width: 35%;height: auto}
    .specstxt{width:65%}
}

@media only screen and (max-width: 1280px) {
    .down {bottom: 0}
    .arrow {width: 30px}
    .preorder img {width: 18%}
    .prodBlock {display: inline-block;width: 100%;padding: 0}
    .box img {width: 50%;height: auto}
}

@media only screen and (max-width: 1024px) {
    .video-title{width:38%}
    .preorderTitle img {width: 100%}
    .tble {width: 100%}
    .dtitle img {width: 40%;height: auto}
    .dbox2,.dayOne .cols {width: 95%}
    .specstxt{width:75%;font-size:24px}
}

@media only screen and (max-width: 960px) {
    .col {margin: 1% 0}
    .columns {width: 99%;margin: 0 auto}
    .dbox2{padding:0}
    .bundleglam img{width:100%;margin:0;}
    .bundle img {width: 75%;height: auto}
    .dayOne .box{width:100%;margin:0}
    .box {width: 99%;margin: 2% auto;display: inline-block;vertical-align: middle}
    .box img {width: 35%;height: auto}
    .specs {width: 99%;display: inline-block;text-align: center;vertical-align: middle}
    .small {display: block;padding-bottom: 20px}
    .large {display: none}
    .bundle {width: 90%}
    .bundle .block {width: 90%}
    .bundle .block .logo img {width: 20%}
    .dayOne .retail{width:100%}
}

@media only screen and (max-width: 768px) {
    .callout { display: none}
    .gameWrap .cols {display: block; width: 99%; margin-left: auto; margin-right: auto; margin-bottom: 30px;}
    .gameWrap .mid {display: block; width: 99%; margin-left: auto; margin-right: auto; margin-bottom: 30px;}
    .p5dstars {background-image: url(../img/portal/p5d_stars.png);background-repeat: no-repeat;background-position: 300% 50%;background-size: 90%;padding: 0;margin: 0}
    .down {display: none}
    .bundlelinks {width: 90%;margin: 0 auto}
    .productinfo img {width: 100%;height: auto}
    .specstxt {font-size: 20px;line-height: 28px;width:100%}
    #button,#button2,#button3 {display: block}
    .noshow {display: none}
    #content #section1Sm {display: block;position: relative;width: 100%}
	#section1Sm .freeDemo {width: 25%;bottom: 0;right: 0;top: 72%;left: 50%;transform: translate(-50%, -50%);min-width: 100px;}
    #heroTop {width: 100%;display: block;text-align: center;position:relative}
    #hero-mobile{width:100%;height:auto}
    .prebtn {width: 35%;height: auto;position:absolute;left:50%;transform:translateX(-50%);bottom:5%;cursor: pointer}
    #release-date-mobile{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:75%;height:auto}
    #p3d-logo{position:absolute;width:23%;height:auto;bottom:10%;left:5%;cursor:pointer}
    #p5d-logo{position:absolute;width:23%;height:auto;bottom:10%;right:5%;cursor:pointer}
    #p3d-logo img,#p5d-logo img{width:100%;height:auto}
    #content #section1 {display: none}
    .bundleSm img {width: 100%; height: auto;}
    .bundleSm #glm {display: inline-block; vertical-align: middle; margin: 0 auto;}
    .bundleSm #glm img {width: 100%; height: auto;}
    .dtitle img {width: 50%;height: auto}
    .dbox2 .ps {width: 35%}
    .dbox2 .cmbo {width: 90%}
}

@media only screen and (max-width: 640px) {
    .down {bottom: 0}
    .arrow {margin-bottom: 3%}
    .dbinfo {width: 75%}
	.freeDemo {width: 300px;}
	.demoText {font-size: 15px;}
}

@media only screen and (max-width: 480px) {
    .specstxt {margin-top: 10px;font-size: 18px;line-height: 26px}
    .down {display: none}
    .box img {width: 65%;height: auto}
	.demoText {width: 50%;}
}