@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

@font-face {
  font-family: "Neue Haas Grotesk W01";
  font-style: normal;
  font-weight: 500;
  src:  url("../fonts/fca16206-1413-42b5-b3dd-ce6499d2bd3f.eot?#iefix") format("eot"),
        url("../fonts/34ae0cd2-c49c-4df4-8270-fcda21c1b715.woff2") format("woff2"),
        url("../fonts/9e666926-4bc9-4013-849e-dffa25a41dbd.woff") format("woff"),
        url("../fonts/37e13425-7daf-407c-ba41-43ebd7d30855.ttf") format("truetype"),
        url("../fonts/9cd38052-e8fa-4a89-bfee-01d1675c9aa1.svg#9cd38052-e8fa-4a89-bfee-01d1675c9aa1") format("svg");
}

@font-face {
  font-family: "Neue Haas Grotesk W01 Disp";
  font-style: normal;
  font-weight: 500;
  src:  url("../fonts/c34970a0-5fd3-4c92-b10d-b8dbd145f0e6.eot?#iefix") format("eot"),
        url("../fonts/1d2142cb-3e68-48df-b188-f1ac45a47a8b.woff2") format("woff2"),
        url("../fonts/9dc6c76b-0260-4292-af1d-0bc9eecbded2.woff") format("woff"),
        url("../fonts/ed18aa48-557e-4d1f-a53c-58399a7c1bc4.ttf") format("truetype"),
        url("../fonts/5b9068b3-d518-4b0a-a5a2-1aa25714df22.svg#5b9068b3-d518-4b0a-a5a2-1aa25714df22") format("svg");
}

@charset "utf-8";
/* CSS Document */
* {border: 0;margin: 0;padding: 0;}
html, body {min-width: 320px;height: auto;position: relative;}
body {color: #fffff1;font-family: 'Neue Haas Grotesk W01', sans-serif;font-size: 100.01%;
    background: #000e23;
    background: -moz-linear-gradient(top, #000e23 0%, #230323 100%);
    background: -webkit-linear-gradient(top, #000e23 0%,#230323 100%);
    background: linear-gradient(to bottom, #000e23 0%,#230323 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000e23', endColorstr='#230323',GradientType=0 );
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility !important;
}
a, a:link, a:hover {color: #333;text-decoration:none;outline: none;}
a:hover {color: #e30613;}
img {border:0px;}
p {font-size: 0.875em;line-height: 21px;margin-bottom: 9px;}
h1, h2, h3, h4, h5, h6 {font-family: 'Neue Haas Grotesk W01', sans-serif;font-size: 100.01%;}
ul, ol, li {list-style-image: none;list-style-type: none;}
input, textarea, select, button {background: none;font-family: 'Neue Haas Grotesk W01', sans-serif;font-weight: 400;outline:none;width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
input:focus {}
input[type="text"]:disabled {
	-webkit-box-shadow: inset 0px 0px 0px 0px rgba(50, 50, 50, 0);
    -moz-box-shadow: inset 0px 0px 0px 0px rgba(50, 50, 50, 0);
    box-shadow: inset 0px 0px 0px 0px rgba(50, 50, 50, 0);
}
select {text-indent: 0.01px;text-overflow: '';
    -webkit-appearance: none;
	-moz-appearance: none;
}
select:disabled {color: #dadada;
}
select::-ms-expand {display: none;}
fieldset {border-style: none;overflow: hidden;width: 100%;}
textarea {min-height: 165px;resize: none;}
label {}
header, section, footer, aside, nav, main, article, figure {display: block;}

/**************** GENERAL *****************/

.clear {clear: both;}
.display {display: block;}
.no_display {display: none;}
.fleft	{float:left;}
.fright	{float:right;}
.bold	{font-weight:bold;}
.italic {font-style:italic;}
.underline	{border-bottom:1px solid;}
.highlight	{color:#FFF;background-color: #333;}
.pl5 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl10 {padding-left: 10px;}
.pr5 {padding-right: 5px;}
.pr10 {padding-right: 10px;}
.pr20 {padding-right: 20px;}
.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.parent {position: relative;}
.text_indent {overflow: hidden;text-indent: -9999px;}
.vTable {display: table;height: 100%;width: 100%;}
.vAlign {display: table-cell;height: 100%;}
.vAlign.top {vertical-align: top;}
.vAlign.middle {vertical-align: middle;}
.vAlign.bottom {vertical-align: bottom;}
.ta-left {text-align: left;}
.ta-center {text-align: center;}
.ta-right {text-align: right;}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::: CONTENIDO ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.wrapper {height: auto;display: block;width: auto;position: relative;z-index: 2;padding:0 30px 50px 30px;}
.wrapper header, .wrapper .content {display: block;}

/********** HEADER **********/
.wrapper.home header {width: 100%;
    -webkit-align-self: center;
    align-self: center;
}
.logo_container {padding: 30px;text-align: center;}
.logo_container #animation_container {width: auto!important;}

/********** HOME **********/
.wrapper.home .content {width: 100%;
    -webkit-align-self: center;
    align-self: center;
}
.wrapper.home .content > .pad {padding: 30px 0 0 0;}
.wrapper.home .content h1 {font-size: 2em;margin-bottom: 30px;position: relative;z-index: 2;}
.wrapper.home .content h2 {font-size: 1.5em;margin-bottom: 30px;}
.content .home_block {width: 100%;
    display: flex;
    flex-direction: column;
}
.content .home_block .home_block_item {padding: 0 20px 0 0;width: 100%;position: relative;}
.content .home_block.ghost_text .home_block_item::before {color: rgba(255, 255, 255,0.10);position: absolute;left: -12px;top: -38px;font-size: 192px;font-weight: 500;z-index: 1;}
.content .home_block.ghost_text .home_block_item:first-child::before {content: 'ES';}
.content .home_block.ghost_text .home_block_item:last-child::before {content: 'EN';}
.contents {display: block;padding-top: 40px;width: 100%;}
.contents .content_item {font-family: 'Neue Haas Grotesk W01', sans-serif;display: block;font-size: 1.25em;margin-bottom: 20px;width: 100%;}
.contents .content_item .pad {border-left: solid rgba(255,255,255,1) 1px;padding: 5px 20px;}
.contents .content_item a {border-left: solid rgba(255,255,255,1) 1px;color: #fffff1;min-height: 25px;padding: 5px 20px;
    -moz-transition: background-color 0.2s cubic-bezier(.08,.59,.63,.94);
    -webkit-transition: background-color 0.2s cubic-bezier(.08,.59,.63,.94);
    -o-transition: background-color 0.2s cubic-bezier(.08,.59,.63,.94);
    transition: background-color 0.2s cubic-bezier(.08,.59,.63,.94);
}
.contents .content_item a.social_btn.facebook {background-image: url(../images/iconmonstr-facebook-6.svg);background-repeat: no-repeat;display: block;background-position: 20px center;background-size: 18px;}
.contents .content_item a.dont_touch {background-image: url(../images/iconmonstr-danger-1.svg);background-repeat: no-repeat;display: none;background-position: 95% center;background-size: 18px;width: auto;}
.contents .content_item a.dont_touch:hover {background-color: #f00;}
.contents .data_error {background: rgba(255, 0, 0,0.5);padding: 20px;}
.contents .data_error h1 {font-size: 2em;margin-bottom: 20px;}
.contents .data_error h1 span svg {fill: #fff;height: 34px;width: 34px;vertical-align: middle;}
.contents .data_error h2 {margin-bottom: 15px;}

/********** GAME **********/
.wrapper.game {display: block;margin: 0 auto;text-align: center;width: 780px;}
.wrapper.game header {padding: 20px;}
.wrapper.game header:after {content:'';display: block;clear: both;}
.game {padding-top: 30px;width: 100%;}
a.game_logo {display: inline-block;float: left;}
a.return_btn {color: #009bdb;border: solid 1px #009bdb;display: inline-block;float: right;font-family: 'Press Start 2P', cursive;font-size: 0.75em;margin-top: 20px;padding: 8px 15px;
    -moz-transition: 0.2s cubic-bezier(.08,.59,.63,.94);
    -webkit-transition: 0.2s cubic-bezier(.08,.59,.63,.94);
    -o-transition: 0.2s cubic-bezier(.08,.59,.63,.94);
    transition: 0.2s cubic-bezier(.08,.59,.63,.94);
}
a.return_btn:hover {color: #fffff1;background-color: #009bdb;}

/********** DOWNLOAD **********/
.wrapper.donwload {display: block;margin: 50px auto 0 auto;text-align: center;width: 780px;}
.wrapper.donwload header {display: block;}
.wrapper.donwload .contents {display: block;text-align: center;}
.wrapper.download .contents .heading {border-bottom: 1px solid #fffff1;color: #fffff1;font-size: 1.5em;padding: 15px;}
.wrapper.download .contents .data_line {display: table;margin-bottom: 1px;width: 100%;}
.wrapper.download .contents .transfer_data .data_line .data_block_left,
.wrapper.download .contents .transfer_data .data_line .data_block_right {background-color:rgba(255,255,255,0.15);display: table-cell;font-family: 'Neue Haas Grotesk W01 Disp', sans-serif;padding: 10px 15px;text-align: left;}
.wrapper.download .contents .transfer_data .data_line .data_block_left {width: 30%;}
.wrapper.download .contents .transfer_data .data_line .data_block_sep {width: 1px;}
.wrapper.download .contents .transfer_data .data_line .data_block_right {width: 70%;word-break: break-all;}
.btn_download {border: solid 1px #fff;color: #fff;cursor: pointer;font-size: 1.125em;padding: 15px;text-align: center;text-transform: uppercase;position: relative;
    -moz-transition: border-color 0.3s cubic-bezier(.08,.59,.63,.94);
    -webkit-transition: border-color 0.3s cubic-bezier(.08,.59,.63,.94);
    -o-transition: border-color 0.3s cubic-bezier(.08,.59,.63,.94);
    transition: border-color 0.3s cubic-bezier(.08,.59,.63,.94);
}
.btn_download span {font-weight: bold;line-height: 26px;position: relative;z-index: 3;}
.btn_download::before {background: #fff;position: absolute;top: 0;left: 0;bottom: 0;right: 0;content: '';z-index: 1;
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
    -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}
.btn_download::after {background: #10bb1b;position: absolute;top: 0;left: 0;bottom: 0;right: 0;content: '';z-index: 1;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
    -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}
.btn_download svg {fill: #fff;height: 25px;margin-left: 5px;vertical-align: top;}
.btn_download:hover {border-color: #10bb1b;}
.btn_download:hover::before, .btn_download:hover::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
}
.btn_return {cursor: pointer;display: inline-block;font-size: 0.813em;margin-top: 15px;}
.btn_return:hover {text-decoration: underline;}
/********** BACKGROUND GRID **********/
.grid {position: absolute;bottom: 0;left: 0;right: 0;top: 0;z-index: 1;}
.grid .column {background-color: rgba(255,255,255,0.1);height: 100%;width: 1px;position: absolute;top: 0;}
.grid .column.first {display: none;left: 20%;}
.grid .column.second {display: none;left: 40%;}
.grid .column.third {display: none;left: 60%;}
.grid .column.fourth {display: none;left: 80%;}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::: RESPONSIVE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media (min-width: 520px) {
    .wrapper.download {margin: 0 auto;width: 480px;}
    .wrapper.download .contents {padding: 0;text-align: center;}
    .content .home_block {
        flex-direction: row;
    }
    .content .home_block .home_block_item {padding: 0 20px 0 0;width: calc(50% - 20px);}
}

@media (min-width: 760px) {
    html, body {height: 100%;}
    .wrapper.home {height: 100%;padding:0 30px;}
    .wrapper.home .contents {padding-top: 10px;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    .wrapper.home .contents .content_item {font-family: 'Neue Haas Grotesk W01', sans-serif;font-size: 1.25em;width: 50%;
        display: block;
    }
}

@media (min-width: 960px) {
    .wrapper.home {padding: 0;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    .wrapper.home header, .wrapper.home .content {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    .wrapper.home header {width: 33.33%;
        -webkit-align-self: center;
        align-self: center;
    }
    .wrapper.home .content {width: 66.667%;
        -webkit-align-self: center;
        align-self: center;
    }
    .wrapper.home .content h1 {padding-right: 30px;}
    .contents .content_item {width: 50%;}
    .grid .column.first {display: block;left: 33.33%;}
    .grid .column.second {display: block;left: 66.66%;}
    .contents .content_item a.dont_touch {display: block}
}

@media (min-width: 1270px) {
    .wrapper.home header {width: 25%;}
    .wrapper.home .content {width: 75%;}
    .wrapper.home .contents .content_item {width: 33.33%;}
    .grid .column.first {left: 25%;}
    .grid .column.second {left: 50%;}
    .grid .column.third {display: block;left: 75%;}
    .content .home_block {width: 66.6667%;}
}

@media (min-width: 1480px) {
    .wrapper.home header {width: 20%;}
    .wrapper.home .content {width: 60%;}
    .wrapper.home .content h1 {font-size: 2.5em;padding-right: 0;}
    .grid .column.first {left: 20%;}
    .grid .column.second {left: 40%;}
    .grid .column.third {left: 60%;}
    .grid .column.fourth {display: block;left: 80%;}
    .content .home_block .home_block_item {padding: 0 20px 0 0;width: calc(50% - 20px);}
    .content .home_block.ghost_text .home_block_item::before {position: absolute;left: -31px;top: -77px;font-size: 16vw;font-weight: 500;z-index: 1;}
}

@media (min-width: 1600px) {
}

@media (min-height: 780px) and (min-width: 1280px){
}


@media (min-height: 680px) and (min-width: 1600px){
}

@media (min-height: 875px) and (min-width: 1600px) {

}

@media (max-width: 1480px) and (min-width: 1280px) {
    .inner {max-width: 1240px;}
}

@media (max-width: 1279px) and (min-width: 1024px) {
    .inner {max-width: 930px;}
}

@media (max-width: 1023px) and (min-width: 768px) {
    .inner {max-width: 690px;}
}

@media (max-width: 767px) {
}