@charset "UTF-8";
/*@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700);*/
@import url('https://fonts.googleapis.com/css?family=Raleway:200,300,600');
body {background-color:#fff; font-size:18px; color:#000; font-family: 'Raleway', sans-serif; font-weight:300;  line-height:28px; margin: 0; letter-spacing: 0.2px; background-image: url(../img/background.jpg); background-size: 2600px; background-position: center top; background-repeat: no-repeat; background-color: #51caff;}

.content {max-width: 1180px; margin: 0 auto; padding: 0 10px}
.footer {width: 100%; margin-top: 70px; padding: 15px 0 10px 0; background-color:#667ea0; display: table; color: #fff;}
.footer a {color: #fff !important}
.footer a:hover {color: #f0f1f5 !important}
.clear {clear:both;}
.hidden {display: none !important;}
.mobileon {display: none !important}
.mobileoff {display: block}
img {width: 100%;}
.logo {width: 500px; margin: 50px auto 15px auto;}
.videoWrapper {position: relative; padding-bottom: 53.7%; padding-top: 30px; height: 0; overflow: hidden; width:100%; margin: 0 auto 0 auto;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; border: 0;}
.trailer {width: 65%; margin: 25px auto}
.cta {width: 470px; margin: 25px auto; display: table;}
.cta img {float: left; width: auto; height: 60px; margin-right: 45px;}
.cta img:hover {zoom: 1; filter: alpha(opacity=70); opacity: 0.7;}
.x3 {float: left; width: 29%; margin: 1% 2%;}
.x3 img {width: 100%; border: solid 1px #dddee1;}
.x3 a img:hover {zoom: 1; filter: alpha(opacity=70); opacity: 0.7;}
.reviews {width: 45%; padding: 2% 7% 1% 7%; margin: 20px auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff;}
.reviews p {text-transform: uppercase; font-weight: 600; font-size: 19px;}
.medio {text-align: right; color: #0e909c; margin: -10px 0 50px 0; font-size: 17px !important;}
.x2 {float: left; width: 44%; margin: 2%; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; display: table; padding-bottom: 2%; text-align: center;}
.logo-gametopia {width: 250px; margin: 60px auto 30px auto; text-align: center;}
.logo-gametopia p {text-transform: uppercase; margin-top: 0;}
.logo-gametopia img:hover {zoom: 1; filter: alpha(opacity=70); opacity: 0.7;}
iframe {border: 0}
.learn {width: 100%; background-image: url(../img/learn-videogames.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; min-height: 300px; text-align: center; padding: 150px 0 30px 0; margin-top: 30px;}
.learn h3 {margin: 30px 0 0 0; color: #fff;}
.learn p {color: #fff; font-size: 20px; line-height: 28px;}


/*BUTTONS*/
.button{padding: 8px 20px; text-align: center; font-size: 16px; display: inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 10px; background-color: #2dbd78; font-weight: bold;}
a.button {text-decoration: none; color: #fff !important; text-transform: uppercase;}
a.button:hover {background-color: #7cd6ab; color:#fff !important; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
/*END BUTTONS*/

/*LINKS*/
a img {text-decoration: none;border: 0 none;}
a:link, a:visited, a:active {color:#33577f; text-decoration: none;}
a:hover {color:#518ac8;}
.roll:hover {zoom: 1; filter: alpha(opacity=70); opacity: 0.7;}
/* END LINKS*/

/*FONTS*/
h1 {line-height: 36px; font-size: 28px; margin: 0 auto; width: 70%; font-weight: 500; text-align: center; text-transform: uppercase;}
h2 {line-height: 40px; font-size: 32px; font-weight: 200; margin: 10px 5%;}
h3 {font-size:28px; line-height:36px; font-weight: 500; text-transform: uppercase;}
.center {text-align: center !important}
.big {font-size: 28px; line-height: 36px; font-weight: 300;}
.small {font-size: 15px; line-height: 20px;}
.top30 {margin-top: 30px;}
.top0 {margin-top: -5px;}
.green {color: #2dbd78}
.price {font-size: 40px;}
.mid {font-size:26px; line-height: 34px; font-weight: 500;}
.textLeft {text-align: left;}
.legal { font-size:13px !important;}
.strike {text-decoration: line-through;}
/*END FONTS*/

/*SCROLL TO TOP*/
.cd-top {display: inline-block;height: 40px; width: 40px;position: fixed;bottom: 40px;right: 5%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);/* image replacement properties */overflow: hidden;text-indent: 100%;white-space: nowrap;background: url(../img/scroll-top.png) no-repeat center 50%;visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {-webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible {visibility: visible; opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
.no-touch .cd-top:hover {background-color: #e86256; opacity: 1;}
/*FIN SCROLL TO TOP*/




@media only screen and (max-width: 1160px) {
    body {background-size: 1900px;}
}

@media only screen and (max-width: 980px) {
    body {background-size: 1500px;}
   
}
@media only screen and (max-width: 750px) {
    
}
@media only screen and (max-width: 630px) {
    .logo {width: 90%; margin-top: 10px;}
    h1 {width: 97%; font-size: 24px; line-height: 30px;}
     .cta {width: 440px;}
    .cta img {height: 60px; float: left; margin: 0 15px;}
    .trailer, .x3, .x2 {width: 97%;}
    .reviews {width: 86%;}
    .logo-gametopia {width: 200px;}
    .mobileon {display: block !important;}
    .mobileoff {display: none !important;}
    body {background-image: url(../img/blank.gif); }
   
    
}

@media only screen and (max-width: 440px) {
    .cta img {width: 70%; height: auto; float: none; margin: 0 0 15px 0;}
    .cta {width: 97%; text-align: center;}
     .learn {background-position: -1250px top}
}