@font-face {
    font-family: 'winstonmedium';
    src: url('../fonts/winston_medium-webfont.eot');
    src: url('../fonts/winston_medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/winston_medium-webfont.woff2') format('woff2'),
    url('../fonts/winston_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'winstonthin';
    src: url('../fonts/winston_thin-webfont.eot');
    src: url('../fonts/winston_thin-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/winston_thin-webfont.woff2') format('woff2'),
    url('../fonts/winston_thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'winstonbold';
    src: url('../fonts/winston_bold-webfont.eot');
    src: url('../fonts/winston_bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/winston_bold-webfont.woff2') format('woff2'),
    url('../fonts/winston_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.t {font-family: 'winstonthin'; text-transform: uppercase;}
.b {font-family: 'winstonmedium'; text-transform: uppercase;}
.xb {font-family: 'winstonbold'; text-transform: uppercase;}
.u {text-transform: uppercase;}

html {font-size:10px;}
td,table,img {padding:0; border:none;border-collapse:collapse;}
body {width:750px;    font-family: 'Roboto', sans-serif;margin:0; padding:0; background:#000;font-size:3.7vw;color:#fff;scroll-behavior: smooth;line-height:1.2;}
td {}
form {margin:0;}
a {color:inherit;text-decoration:none;}
table {border-collapse:collapse;}

* {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust:none;
    text-size-adjust: none;
}

body {opacity:0;}
body.ready {opacity:1;}


ul, ul li {margin:0;padding:0;list-style:none;}
p,h1,h2,h3,h4,h5 {margin:0;font-weight:normal;box-sizing:border-box;}


body,div,ul,li,img,a,label,td,table,span {box-sizing:border-box;}


.cf {
    padding:30px 30px 0 30px;
    box-sizing:border-box;
    display:inline-block;
    line-height:1.3;
    background: none;

    width:100%;
    -webkit-appearance: none;
    outline:none;
    color:#fff;

    transition:box-shadow .3s ease ;
    border: 2px solid #DCDCDC;
    border-radius:0px;
    font-size:30px;
    font-family: 'Roboto', sans-serif;
    text-decoration:none;

}

textarea.cf {
    width:100%;height:440px;
    color:#fff;
    background: rgba(9, 19, 36, 0.50);
    border-radius:10px;
    margin: auto;
    line-height: 1.3;
    padding:40px 20px 0 40px;
}

::placeholder {
    color:#939598;
    opacity: 1; /* Firefox */
}


.button {
    padding:0;
    box-sizing:border-box;
    display:flex;
    align-items: center;
    justify-content: center;
    height:100px;
    line-height:100px;
    background: linear-gradient(270deg, #0057B0 65.19%, #0071DF 81.02%, #00E2A0 97.52%);
    border:none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    letter-spacing: 2px;

    transform: skewX(-10deg);

    width:100%;
    text-transform:uppercase;
    -webkit-appearance: none;
    outline:none;
    color:#fff;

    transition:all .3s linear ;

    position: relative;


    font-size:7vw;
    font-family: 'winstonmedium';
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;

}

.button span {display: block;transform: skewX(0deg);}

.button.img-right {padding-left:70px;}
.button.img-left {padding-right:20px;}

.button img {margin:0 20px;}

.clickable {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.button.blanque {background:rgba(0, 0, 0, 0.50);}
.button.black {border: 4px solid #000;background: #000;color:#FEEB37;}

.button.large {height:110px;line-height:100px;}





.main {z-index:10;position:fixed;width:750px;margin:auto;height:100%;}

html {height:100%;width:750px;}
body {width:750px;margin: auto;position: relative;height: 100%;overflow: hidden;}

body.desktop {width:100%;background: url(../i/desktop.webp) center center no-repeat;background-size: cover;}
body.info {background: url(../i/info.webp) center top no-repeat;background-size: cover;display: flex;align-items: center;justify-content: center;text-align: center;padding:0 0 33vw 0;}
.splash {background: url(../i/info.webp) center top no-repeat;background-size: cover;display: flex;align-items: center;justify-content: center;text-align: center;padding:0 0 33vw 0;}


.expired-caption {font-size: 52px;line-height: 1.3;margin:5vw 0 5vw 0;line-height: 1.1}
.expired-caption-black {font-size: 8vw;line-height: 1.3;margin:5vw 0 5vw 0;background: #000;transform:skewX(-16deg);color:#FEEB37;padding:1.3vw 2.6vw;line-height:1.13;letter-spacing: 1px;}
.expired-caption-black span {transform: skewX(16deg);display: inline-block}
.expired-s-caption {text-transform: none;font-size: 32px;}

.expired-s-button {margin:50px 0 0 0;}

.swiper-wrapper {height:auto;height:100%;}
.swiper-slide {}
.swiper-slide-main {overflow: hidden;height:100%;width: 100%;}


.p-cloud {transition:all 0.8s ease}

.swiper-container-main {height:100%;position: relative;z-index: 10;}



.scene-line {position:absolute;height:4px;z-index:12;transition: all 1s ease 0.5s;background: #FEEB37; }
.scene-line.line-1 {width:0px;right:100px;top:-4px;transform-origin: right center;transform:skewY(-17deg);}
body.ready-loader .swiper-slide-main.swiper-slide-active .scene-line.line-1 {width:400px}

.logo {position: absolute;left:50px;top:50px;z-index: 100;}

.ptr {position:absolute;cursor:pointer;right:-5px;width:166px;height:146px;background:url(../i/ptr2.png) left center no-repeat;bottom:-10px;display: flex;align-items: center;justify-content: center;z-index:3700;animation:pointer2 3s infinite linear;}



@keyframes pointer{
    0%{transform:translateY(0%)}
    50%{transform:translateY(20%)}
    100%{transform:translateY(0%)}
}


@keyframes pointer2{
    0%{transform:translateX(0%)}
    50%{background-position: left 20px center;}
    100%{transform:translateX(0%)}
}

@keyframes pulse{
    0%{transform:scale(0.9)}
    50%{transform:scale(1.1)}
    100%{transform:scale(0.9)}
}

.popwinalert.fancybox-content {width:500px;background: #000;text-align: center;padding:50px 40px;line-height: 1.5;font-size: 32px;}
body.fancybox-active {height:100%;}
.p-cloud {}
.swiper-slide-age {}
body.ready-loader .swiper-slide-age {opacity: 1;}

.age-wrapper {position:relative;z-index: 900;padding:0 0 0 100px;}
body.ready-loader .age-wrapper {}

.age-caption {font-size:80px;line-height: 1;padding:200px 0 0 0;}
.age-bg {position:absolute;left:0;top:0;width: 100%;height:100%;}
.age-bg img {position:absolute;left:0;top:0;width: 100%;height:100%;object-fit: cover;transform: scale(1.2);opacity:0;transition: transform 8s ease, opacity 2s ease;}

body.ready-loader .age-bg img {transform: scale(1);opacity: 1;}

.age-caption .p-cloud {transition: all .8s ease;opacity: 0;transform: translateY(100%)}
body.ready-loader .age-caption .p-cloud {opacity: 1;transform: translateY(0%)}

.p-cloud.p-cloud-1 {transition-delay:.3s;}
.p-cloud.p-cloud-2 {transition-delay:0.4s;}
.p-cloud.p-cloud-3 {transition-delay:0.5s;}

.age-notice {font-size:28px;padding: 0 80px 80px 0px;background-size: 100% 100%;transition: all .8s ease;opacity: 0;transform: translateY(100%)}

body.ready-loader .age-notice {opacity: 1;transform: translateY(0);line-height: 1.3}

.age-buttons {padding:50px 0px 80px 0px;display: flex;}
.age-buttons .button {width:240px;margin:0 20px 0 0}

.swiper-slide-age.confirmed .age-notice {opacity: 0;transform: translateY(100%)}
.swiper-slide-age.confirmed .age-wrapper {transform: scale(0);opacity:0;}
.swiper-slide-age.confirmed .age-bg img {transform: scale(20);opacity: 1;}




.swiper-container-vertical {width:100%;height:100%;position: absolute;left:0;top:0;z-index:2000;}
.swiper-slide-vertical {width:100%;height:100%;}

.slide-caption {display: flex;padding:10vh 0 0 100px;font-size:90px;line-height: 87px;word-spacing: 10px;}
.slide-caption span {word-spacing: 0px;}
.slide-caption .small {font-size:63px;line-height:65px;}
.slide-caption.icon-caption {padding-left:40px;}
.slide-caption .caption {margin:0 32px 0 0px;}
.slide-caption .icon {margin:0 32px 0 0;}
.slide-cube {width:100%;}
.slide-siga {position: absolute;left: 50px;top: 29vh;transition: transform 1s ease;transform: translateY(100%)}
.slide-siga2 {position: absolute;left:100px;bottom:-40px;transition: transform 1s ease;transform: translateY(100%);z-index: 700;}
.slide-pack {position: absolute;left:407px;bottom:140px;transition: transform 2.3s ease,opacity .3s ease;transform: translateX(100%) rotateY(-150deg);opacity: 0;z-index: 700;}

.swiper-slide-cube.swiper-slide-active .slide-siga  {transform: translateY(0%)}
.swiper-slide-cube.swiper-slide-active .slide-siga2  {transform: translateY(0%)}
.swiper-slide-cube.swiper-slide-active .slide-pack  {transform: translateY(0%);opacity: 1;}
.swiper-3d {perspective: 12000px;}


.slide-buttons-ask {padding:50px 0px 80px 107px;display: flex;}
.slide-buttons-ask .button {width:260px;margin:0 20px 0 0}

.poll-intro {display: flex;padding:40px 0 0 80px;position: relative;z-index:700;}
.poll-intro-text {padding:0 0 0 30px;}
.poll-intro-text .caption {padding:30px 0 20px 0px;font-size:40px;line-height:1;}
.poll-intro-text .note {padding:30px 0 20px 0px;font-size:28px;line-height:1;line-height:32px;}

.slide-capsula {position:relative;width:750px;}
.slide-capsula .w {position:absolute;width:100%;}
.slide-capsula img  {width:100%;height:auto;display: block;}


.slide-capsula .w-1 img {transition: all 2s ease 0.5s;;transform: scale(0) rotate(300deg);opacity: 0}
.slide-capsula .w-2 img {transition: all 2.5s ease 0.3s;;transform: scale(0) rotate(-300deg);opacity: 0}
.slide-capsula .w-3 img {transition: all 2s ease 0s;;transform: scale(0) rotate(90deg);opacity: 1}

.swiper-slide-cube.swiper-slide-active .w-1 img {transform: scale(1) rotate(0);opacity: 1;}
.swiper-slide-cube.swiper-slide-active .w-2 img {transform: scale(1) rotate(0);opacity: 1;}
.swiper-slide-cube.swiper-slide-active .w-3 img {transform: scale(1) rotate(0);opacity: 1;}


.sequence.active {}
.sequence.sequence-1 {display: block;width:100%;height:100%;position: absolute;left:0px;bottom:130px;z-index:600;transform-origin: center bottom;transition: transform 1s ease;}
.sequence.sequence-1.stage-2 {transform: translateX(40px)}
.sequence.sequence-1.stage-3 {transform: translateX(-900px)}


.sequence.active {}
.stage-image {width:750px;position: absolute;left:0;bottom:0;opacity:0;;}
.stage-image.active {opacity:1;}
.sequence.sequence-1 .stage-image img {display: block;width:670px;margin:auto;height:auto;object-fit: cover;object-position: center bottom;transition: object-position 1s ease}
.sequence.started .stage-image img {object-position: center center;}