@font-face {
    font-family: 'Albra Sans';
    src: url('../font/Albra-Sans-Light.woff2') format('woff2'),
    url('../font/Albra-Sans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Albra Sans';
    src: url('../font/Albra-Sans-Regular.woff2') format('woff2'),
    url('../font/Albra-Sans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Albra Sans';
    src: url('../font/Albra-Sans-Black.woff2') format('woff2'),
    url('../font/Albra-Sans-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Albra Sans';
    src: url('../font/Albra-Sans-Medium.woff2') format('woff2'),
    url('../font/Albra-Sans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NaN Fiasco';
    src: url('../font/NaNFiasco-Medium.woff2') format('woff2'),
    url('../font/NaNFiasco-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NaN Fiasco';
    src: url('../font/NaNFiasco-Light.woff2') format('woff2'),
    url('../font/NaNFiasco-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*--------------*/

*{box-sizing:border-box}
body{font-family:'Albra Sans';margin:0;height:100vh;
    background-image:url(../images/comingsoon-bg.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center;background-attachment:fixed; background-color:#000;
    /*background: linear-gradient(-45deg, #5c1c0a, #000000, #042634, #000000);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;*/
}
.coming-soon{max-width:1220px;margin:0 auto;padding:65px 15px;animation:fadein 2.5s;-moz-animation:fadein 2.5s;-webkit-animation:fadein 2.5s;-o-animation:fadein 2.5s; position:relative; z-index:10;}
.cs-header{overflow:hidden;transform: translateY(0vh); transition:2s all ease-in-out; display:none;}
.page-loaded .cs-header{display:block;}
.animMark .cs-header{transform: translateY(-20vh);}
.cs-logo{float:left;padding:12px 0}
.cs-social{float:right;width:178px;text-align:right}
.cs-social a{display:block;width:43px;height:43px;background:url(../images/social-media.png) no-repeat scroll 0 0;text-indent:9999px;margin-left:24px;float: right;}
.cs-social a:first-child{margin-left:0}
.cs-social a.twitter{background-position:-68px 0}
.cs-social a.instagram{background-position:-135px 0}
.cs-content{text-align:center}
.cs-heading {
    color: #e3dad1;
    font-size: 23px;
    line-height: 1;
}
@keyframes fadein {
    from{opacity:0}
    to{opacity:1}
}
@-moz-keyframes fadein {
    from{opacity:0}
    to{opacity:1}
}
@-webkit-keyframes fadein {
    from{opacity:0}
    to{opacity:1}
}
@-o-keyframes fadein {
    from{opacity:0}
    to{opacity:1}
}
@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
.cs-heading h1{margin:10px 0 10px;line-height:normal;font-size:55.6px;font-weight:900}
.cs-heading .letters{opacity:0;}
.cs-heading.animStart .letters{opacity:1;}
.cs-heading .letter {
    transform-origin: 0 100%;
    display: inline-block;
    line-height: 1em; opacity:0;
}
.cs-footer{transform: translateY(0vh); opacity:1; transition:2s all ease-in-out; display:none;}
.page-loaded .cs-footer{display:block;}
.cs-footer .letters{opacity:0;}
.animStart .cs-footer .letters{opacity:1;}
.cs-footer .letter {
    transform-origin: 0 100%;
    display: inline-block;
    line-height: 1em; opacity:0;
}
.animMark .cs-footer{transform: translateY(20vh); opacity:0;}
.cs-footer h2{color:#e3dad1;font-size:34px;font-weight:900;margin:0}
.cs-footer h2 span{opacity:0;}
.cs-carts ul{list-style:none;padding:0;display:flex;align-items:center;margin:70px 0 52px;justify-content:center;height: 310px;}
.cs-carts li{transition:all cubic-bezier(0, 0, 0.11, 0.99) 0s;cursor:pointer;-webkit-tap-highlight-color:transparent; opacity:1; transform:translateY(0%); display:none;}
.page-loaded .cs-carts li{display:block;}
.cs-carts.introAnim li{transition-duration:1s;animation-timing-function:cubic-bezier(0.81, 0.18, 0.21, 0.93);}
.animMark .cs-carts li{opacity:0; transform:translateY(100%);}
.cs-carts img{max-width:75%;display:block}
/*.cs-carts li:hover{transform:scale(1.05)}*/
.card-left{margin-right:-100px}
/*.card-left:hover{margin-right:-60px}*/
.card-right{margin-left:-100px}
/*.card-right:hover{margin-left:-60px}*/
.Card4{z-index:4;width:28%;}
.Card3{z-index:3;width:24%;}
.Card2{z-index:2;width:20%;}
.Card1{z-index:1;width:16%;}
.introAnim .Card4{transition-delay: 0s;}
.introAnim .Card3{transition-delay: 0.2s;}
.introAnim .Card2{transition-delay: 0.4s;}
.introAnim .Card1{transition-delay: 0.6s;}
.notify-me{display:inline-block;width:232px;margin:37px 0;position:relative; z-index:5; text-decoration:none;overflow:hidden;border-radius:24px; opacity:1; transition:all linear 1s;}
.notify-me img{display:block;width:100%}
.notify-me .counter{position:absolute;top:50%;right:10px;height:26px;width:26px;transform:translateY(-50%)}
.notify-me .counter span{border:2px solid #fff;line-height:23px;font-size:13px;font-weight:500;border-radius:100%;background:#0dcfda;color:#fff;font-family:'NaN Fiasco';display:block;transition:all ease-in-out .5s;width:100%;height:100%;transform:scale(1)}
.notify-me .counter span:hover{transform:scale(1.15)}
.notify-me::after{background:#fff;content:"";height:155px;left:-75px;opacity:.4;position:absolute;top:-70px;transform:rotate(35deg);transition:all 1s cubic-bezier(0.19,1,0.22,1);width:50px;z-index:0}
.notify-me:hover::after{left:120%;transition:all 1s cubic-bezier(0.19,1,0.22,1)}

.formDv{position: absolute; left: 0; right: 0; top: 55px; opacity:0; transition:all linear 1s; z-index:1; margin: 30px 0px 0px;}
.formDv form{display:flex;justify-content: center;}
.formDv .fieldDv{margin: 0 5px;}
.formDv .fieldDv input{background: #ffffff5c;border: none;color: #fff;font-family: 'Albra Sans';padding: 15px 20px;font-size: 18px;}
.formDv .fieldDv input:focus{border:none; outline:none;}
.formDv .fieldDv input:-moz-placeholder{color:#fff;}
.formDv .fieldDv input::-moz-placeholder{color:#fff;}
.formDv .fieldDv input:-ms-input-placeholder{color:#fff;}
.formDv .fieldDv input::-webkit-input-placeholder{color:#fff;}
.formDv .btnDv{}
.formDv .btnDv button{background: #fff;border: none;font-family: 'Albra Sans';font-size: 18px;padding: 15px 40px;cursor: pointer;}

.showForm .notify-me{opacity:0;}
.showForm .formDv{opacity:1; z-index:5;}

#webGlContainer{position:fixed; left:0; right:0; top:0; bottom:0; z-index:1; opacity:0.1;}
#nogl {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;border-radius: 3px;line-height: 1.45;text-align: justify;box-shadow: 0px 0px 0px 4px rgba(255,0,41,0.2);background: #FF0029;font-size: 13px;position: absolute;padding: 10px 20px;display: none;margin: -70px 0 0 -130px;height: 140px;width: 260px;color: #fff;left: 50%;top: 50%;}
#nogl h1 {font-weight: 300;font-size: 18px;}
#nogl p {color: rgba(255,255,255,0.7);}
#nogl a {color: #fff;}


.intro{position:fixed; z-index:100; left:0; right:0; top:0; bottom:100%; /*background:#e3dad1; background:#e3dad12e;*/ overflow: hidden;}
.intro.animOn{ animation-name: introEnd; animation-duration: 5.5s; animation-iteration-count: 1;animation-timing-function:cubic-bezier(0.11, 0.44, 0.23, 0.82);}
.intro .logodv{display:flex; justify-content:center; align-items:center; height:100vh; width:100vw; position:relative; z-index:10;}
.intro .logodv svg{width: 50vw;padding: 33vh 0;}
.intro.animOn .logodv svg path{transform:translateY(-100%); animation-name: introLetterAnim; animation-duration: 5s; animation-iteration-count: 1;animation-timing-function:cubic-bezier(0.11, 0.44, 0.23, 0.82);}
.intro .logodv svg path:nth-child(2n){}
.intro.animOn .logodv svg path:nth-child(2n+1){animation-name: introLetterAnimInv;}
.intro .logodv svg path+path{animation-delay: 0.1s;}
.intro .logodv svg path+path+path{animation-delay: 0.2s;}
.intro .logodv svg path+path+path+path{animation-delay: 0.3s;}
.intro .logodv svg path+path+path+path{animation-delay: 0.4s;}
.intro.animOn .logodv svg circle{animation-name: introCircleAnim; animation-duration: 5s; animation-iteration-count: 1; animation-timing-function:cubic-bezier(0.11, 0.44, 0.23, 0.82);animation-delay: 0.8s; transform:translateX(10%); opacity:0;}
.intro .logodv svg circle+circle{animation-delay: 1s;}

@keyframes introLetterAnim {
    0% {transform:translateY(-100%);}
    20% {transform:translateY(0%);}
    80% {transform:translateY(0%);}
    100% {transform:translateY(100%);}
}
@keyframes introLetterAnimInv {
    0% {transform:translateY(100%);}
    20% {transform:translateY(0%);}
    80% {transform:translateY(0%);}
    100% {transform:translateY(100%);}
}
@keyframes introCircleAnim {
    0% {transform:translateX(10%); opacity:0;}
    20% {transform:translateX(0%); opacity:1;}
    60% {transform:translateX(0%); opacity:1;}
    80% {transform:translateX(10%); opacity:0;}
}
@keyframes introEnd {
    0% {bottom:0%;}
    80% {bottom:0%;}
    100% {bottom:100%;}
}

@media (min-width: 1920px)  {
    .cs-carts ul{height: 412px;}
}

@media (min-width: 3840px) {
    .cs-carts ul{height: 425px;}
}

@media only screen and (max-width:768px) {
    .cs-heading h1{margin:30px 0 10px;font-size:68px}
    .cs-footer h2{font-size:28px}
    .notify-me .counter{right:5px}
    .notify-me{width:200px}
    .cs-social{width:150px}
    .cs-social a{margin-left:10px;transform:scale(0.8);}
    .cs-carts ul{height:auto;}
}
@media only screen and (max-width:767px) {
    .cs-heading h1{font-size:35px}
    .cs-heading{font-size:20px}
    .cs-footer h2{font-size:20px}
    .formDv form{display:block}
    .formDv .fieldDv{margin:0 0 12px}
    .card-right{margin-left: -40px;}
    .card-left {margin-right: -40px;}
}
@media only screen and (max-width:479px) {
    .coming-soon{padding:40px 15px}
    .cs-carts li{transition-duration:1s;}
}