﻿/* Root */
:root{
--grey:#262626;
--black:#000;
--white:#fff;
--white80:rgba(255,255,255,.8);
--white20:rgba(255,255,255,.2);
--green:#00AD87;

--cubic-bezier:cubic-bezier(.4,0,0,1);
--cubic-bezier-1:cubic-bezier(.6,0,0,1);
--cubic-bezier-2:cubic-bezier(0,0,0,1.4);

--line: 1px;

---40: -40px;
---30: -30px;
---24: -24px;
---20: -20px;
---16: -16px;
---12: -12px;
---10: -10px;
---8: -8px;
---4: -4px;
---2: -2px;
---1: -1px;
--1: 1px;
--2: 2px;
--3: 3px;
--4: 4px;
--5: 5px;
--6: 6px;
--8: 8px;
--10: 10px;
--12: 12px;
--14: 14px;
--15: 15px;
--16: 16px;
--18: 18px;
--20: 20px;
--22: 22px;
--24: 24px;
--26: 26px;
--28: 28px;
--30: 30px;
--32: 32px;
--36: 36px;
--40: 40px;
--48: 48px;
--52: 52px;
--56: 56px;
--60: 60px;
--64: 64px;
--70: 70px;
--72: 72px;
--80: 80px;
--84: 84px;
--90: 90px;
--96: 96px;
--112: 112px;
--114: 114px;
--120: 120px;
--128: 128px;
--136: 136px;
--140: 140px;
--148: 148px;
--160: 160px;
--172: 172px;
--180: 180px;
--200: 200px;
--210: 210px;
--240: 240px;
--258: 258px;
--327: 327px;
--354: 354px;
--372: 372px;
--400: 400px;
--440: 440px;
--555: 555px;
--590: 590px;
--670: 670px;
--700: 700px;
--728: 728px;
--920: 920px;
--1030: 1030px;
}

input, textarea, button, select, a, img, div{-webkit-tap-highlight-color: transparent;}
/* Doc */
html{height:100%;width:100%;position:relative;background:var(--black);}
body{font-size:var(--15);width:100%;height:100%;position:relative;font-family:'TikTok Sans';font-weight:400;font-style:normal;color:var(--white);min-width:300px;background:var(--grey);-webkit-transition:background 1s;-o-transition:background 1s;transition:background 1s;}
/* a */
a,a:visited,a:active,a:focus{color:var(--white);outline:none;text-decoration:none;transition:color .5s;}
.desktop a:hover{text-decoration:none;color:var(--green);}
:active,:hover,:focus{outline:0;outline-offset:0;}
a img{border:0;}
input,button{-webkit-box-sizing:border-box;box-sizing:border-box;}
input{-webkit-appearance:none;}
p{color:var(--white);line-height:var(--24);margin-bottom:var(--24);font-weight:400;}
/* h1 - h6 */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.caps{color:var(--white);margin:0;font-family: 'Bebas Neue';font-weight:400;text-transform:uppercase;}
h1,.h1{font-size:var(--56);line-height:var(--60);}
h2,.h2{font-size:var(--40);line-height:var(--48);}
h3,.h3{font-size:var(--18);line-height:var(--30);}
h4,.h4{font-size:var(--18);line-height:var(--30);}
h5,.h5{font-size:1em;line-height:1.5em;font-weight:500;}
h6,.h6,.small{font-size:var(--14);line-height:var(--22);}
.caps{font-size:calc(var(--14) - var(--1));line-height:var(--20);letter-spacing:.05em;text-transform:uppercase;font-weight:400;font-family: 'Play';}
/* text */
img{outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
ul{list-style:none;}
.center{text-align:center;}
.right{text-align:right;}
.uppercase{text-transform:uppercase;}
.nowrap{white-space:nowrap;}
.medium{font-weight:500;}
/* div */
.overflow{overflow:hidden;}
.relative{position:relative;}
.w-100{width:100%;}
.h-100{height:100%;}
.h-app-100{min-height:var(--app-height);}
*::selection{color:var(--black);background:var(--green);}
/* ---------------------------------------------- MAIN ---------------------------------------------- */
.main{position:relative;width:100%;height:100vh;height:var(--app-height);overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:0;display:none;}
.ready .main{opacity:1;display:block;}
/* Scroll */
.main-scroll{position:relative;width:100%;min-width:300px;height:100%;}
.scroll-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;will-change:transform;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:none;transform:translateZ(0);}
.scrollbar-track{z-index:9999!important;will-change:transform;}
.scrollbar-track-y{right:0!important;width:var(--8)!important;background:transparent!important;}
.scrollbar-track-y:before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;width:100%;height:100%;background:transparent;opacity:0;transform:scaleX(.5);transform-origin:right center;transition:opacity .3s, transform .3s;}
.scrollbar-thumb{background:transparent!important;border-radius:0!important;width:100%!important;}
.scrollbar-track-y .scrollbar-thumb:before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;width:100%;height:100%;background:var(--green);transform:scaleX(.5);transform-origin:right center;opacity:.5;transition:opacity .3s, transform .3s;}
.desktop .scrollbar-track-y:hover .scrollbar-thumb:before{transform:scaleX(1);opacity:1;}
.desktop .scrollbar-track-y:hover:before{transform:scaleX(1);opacity:1;}
.touch .scroll-container{overflow-y:auto;}
/* ---------------------------------------------- BUTTONS ---------------------------------------------- */
.but{position:relative;display:flex;justify-content:space-between;padding:calc(var(--40) + var(--4)) var(--16) var(--16) var(--16);border-radius:var(--6);width:100%;max-width:calc(var(--327) - var(--8) - var(--1));transition:background .5s;}
.but:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:var(--line) solid var(--white20);border-radius:inherit;}
.but span{position:relative;padding:0 var(--8);display:flex;align-items:center;color:var(--white);transition:color .5s;}
.but-icon{position:relative;width:var(--28);height:var(--28);border-radius:var(--3);background:var(--green);display:flex;align-items:center;justify-content:center;transition:background .5s;}
.but-icon svg{display:block;width:var(--16);}
.desktop .but:hover{background:var(--green);}
.desktop .but:hover span{color:var(--black);}
.desktop .but:hover .but-icon{background:var(--white);}
/* ---------------------------------------------- CONTENT ---------------------------------------------- */
.content{position:relative;overflow:hidden;width:100%;min-height:var(--app-height);}
.content-container{width:100%;padding-left:var(--8);padding-right:var(--8);}
.row{margin-left:var(---4);margin-right:var(---4);}
.row > *{padding-left:var(--4);padding-right:var(--4);}
.row.g-0{margin-left:0;margin-right:0;}
.row.g-0 > *{padding-left:0;padding-right:0;}
.content-wrap{position:relative;background:var(--black);border-radius:var(--16);overflow:hidden;}
.content-inner{position:relative;padding:var(--32);}
.content-video{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.5;}
.content-video video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.green{color:var(--green);}
.white80{color:var(--white80);}
.logo{max-width:calc(var(--148) - var(--1));}
.logo svg{display:block;width:100%;}
.title{max-width:calc(var(--590) + var(--10));}
.design{gap:var(--16);align-items:center;font-size:var(--14);line-height:var(--22);color:var(--white);}
.design-icon{display:block;width:var(--36);min-width:var(--36);border-radius:100%;background:var(--green);}
.design-icon svg{display:block;width:100%;}
.design-text{color:var(--white);}
.design-text span{transition:color .5s;}
.desktop .design:hover .design-text span{color:var(--green);}
.line{width:100%;height:var(--line);background:var(--white20);}
.col-contacts{flex:0 0 100%;width:100%;}
@media (min-width:768px){
.col-contacts{flex:0 0 31.6%;width:31.6%;}
}
.list{display:flex;flex-direction:column;}
.list li{position:relative;padding-left:var(--14);line-height:var(--24);max-width:calc(var(--240) + var(--40) + var(--6));}
.list li:before{content:'';display:block;position:absolute;top:var(--12);left:0;width:var(--4);height:var(--4);background:var(--white);border-radius:100%;}
.phone{color:var(--green);}
.desktop .phone:hover{color:var(--white);}
/* ---------------------------------------------- MARGINS ---------------------------------------------- */
.rg-20{row-gap:var(--20);}
.rg-8{row-gap:var(--8);}
.cg-8{column-gap:var(--8);}
.pt-8{padding-top:var(--8);}
.pb-8{padding-bottom:var(--8);}
.mb-48{margin-bottom:var(--48);}
.mb-32{margin-bottom:var(--32);}
.mb-last-0 > *:last-child{margin-bottom:0;}
/* Opera video */
#detach-button-host{display:none!important;visibility:hidden!important;pointer-events:none!important;opacity:0!important;z-index:-999!important;}
/* ---------------------------------------------- GRID ---------------------------------------------- */
a.grid-trigger{display:block;position:absolute;z-index:9999;right:0;top:100%;margin:0;transform-origin:right top;padding:var(--8) var(--10);color:var(--white);transform:rotate(90deg);background:var(--green);text-transform:uppercase;border-radius:0 0 0 var(--8);transition:all .3s;}
.grid{position:absolute;top:0;left:0;width:100%;height:var(--app-height);opacity:0;z-index:9999;pointer-events:none;transition:opacity .5s;}
.show-grid .grid{opacity:.1;}
.grid-item{height:100%;width:100%;background:red;}

/* ---------------------------------------------- MEDIA ---------------------------------------------- */
@media (min-width:1920.02px){
:root{
---40: -2.08333334vw;
---30: -1.5625vw;
---24: -1.25vw;
---20: -1.04166667vw;
---16: -.83333334vw;
---12: -.625vw;
---10: -.52083334vw;
---8: -.41666667vw;
---4: -.20833334vw;
---2: -.10416667vw;
---1: -.05208334vw;
--1: .05208333vw;
--2: .10416666vw;
--3: .15625vw;
--4: .20833333vw;
--5: .26041666vw;
--6: .3125vw;
--8: .41666666vw;
--10: .52083333vw;
--12: .625vw;
--14: .72916666vw;
--15: .78125vw;
--16: .83333333vw;
--18: .9375vw;
--20: 1.04166666vw;
--22: 1.14583333vw;
--24: 1.25vw;
--26: 1.35416666vw;
--28: 1.45833333vw;
--30: 1.5625vw;
--32: 1.66666666vw;
--36: 1.875vw;
--40: 2.08333333vw;
--48: 2.5vw;
--52: 2.70833333vw;
--56: 2.91666666vw;
--60: 3.125vw;
--64: 3.33333333vw;
--70: 3.64583333vw;
--72: 3.75vw;
--80: 4.16666666vw;
--84: 4.375vw;
--90: 4.6875vw;
--96: 5vw;
--112: 5.83333333vw;
--114: 5.9375vw;
--120: 6.25vw;
--128: 6.66666666vw;
--136: 7.08333333vw;
--140: 7.29166666vw;
--148: 7.70833333vw;
--160: 8.33333333vw;
--172: 8.95833333vw;
--180: 9.375vw;
--200: 10.41666666vw;
--210: 10.9375vw;
--240: 12.5vw;
--258: 13.4375vw;
--327: 17.03125vw;
--354: 18.4375vw;
--372: 19.375vw;
--400: 20.83333333vw;
--440: 22.91666666vw;
--555: 28.90625vw;
--590: 30.72916666vw;
--670: 34.89583333vw;
--700: 36.45833333vw;
--728: 37.91666666vw;
--920: 47.91666666vw;
--1030: 53.64583333vw;

}
}

@media (max-width:1439.98px){
:root{
---40: -2.77777778vw;
---30: -2.08333334vw;
---24: -1.66666667vw;
---20: -1.38888889vw;
---16: -1.11111112vw;
---12: -.83333334vw;
---10: -.69444445vw;
---8: -.55555556vw;
---4: -.27777778vw;
---2: -.13888889vw;
---1: -.06944445vw;
--1: .06944444vw;
--2: .13888888vw;
--3: .20833333vw;
--4: .27777777vw;
--5: .34722222vw;
--6: .41666666vw;
--8: .55555555vw;
--10: .69444444vw;
--12: .83333333vw;
--14: .97222222vw;
--15: 1.04166666vw;
--16: 1.11111111vw;
--18: 1.25vw;
--20: 1.38888888vw;
--22: 1.52777777vw;
--24: 1.66666666vw;
--26: 1.80555555vw;
--28: 1.94444444vw;
--30: 2.08333333vw;
--32: 2.22222222vw;
--36: 2.5vw;
--40: 2.77777777vw;
--48: 3.33333333vw;
--52: 3.61111111vw;
--56: 3.88888888vw;
--60: 4.16666666vw;
--64: 4.44444444vw;
--70: 4.86111111vw;
--72: 5vw;
--80: 5.55555555vw;
--84: 5.83333333vw;
--90: 6.25vw;
--96: 6.66666666vw;
--112: 7.77777777vw;
--114: 7.91666666vw;
--120: 8.33333333vw;
--128: 8.88888888vw;
--136: 9.44444444vw;
--140: 9.72222222vw;
--148: 10.27777777vw;
--160: 11.11111111vw;
--172: 11.94444444vw;
--180: 12.5vw;
--200: 13.88888888vw;
--210: 14.58333333vw;
--240: 16.66666666vw;
--258: 17.91666666vw;
--327: 22.70833333vw;
--354: 24.58333333vw;
--372: 25.83333333vw;
--400: 27.77777777vw;
--440: 30.55555555vw;
--555: 38.54166666vw;
--590: 40.97222222vw;
--670: 46.52777777vw;
--700: 48.61111111vw;
--728: 50.55555555vw;
--920: 63.88888888vw;
--1030: 71.52777777vw;

}
}

@media (max-width:767.98px){
:root{
---40: -10.66666667vw;
---30: -8vw;
---24: -6.4vw;
---20: -5.33333334vw;
---16: -4.26666667vw;
---12: -3.2vw;
---10: -2.66666667vw;
---8: -2.13333334vw;
---4: -1.06666667vw;
---2: -.53333334vw;
---1: -.26666667vw;
--1: .26666666vw;
--2: .53333333vw;
--3: .8vw;
--4: 1.06666666vw;
--5: 1.33333333vw;
--6: 1.6vw;
--8: 2.13333333vw;
--10: 2.66666666vw;
--12: 3.2vw;
--14: 3.73333333vw;
--15: 4vw;
--16: 4.26666666vw;
--18: 4.8vw;
--20: 5.33333333vw;
--22: 5.86666666vw;
--24: 6.4vw;
--26: 6.93333333vw;
--28: 7.46666666vw;
--30: 8vw;
--32: 8.53333333vw;
--36: 9.6vw;
--40: 10.66666666vw;
--48: 12.8vw;
--52: 13.86666666vw;
--56: 14.93333333vw;
--60: 16vw;
--64: 17.06666666vw;
--70: 18.66666666vw;
--72: 19.2vw;
--80: 21.33333333vw;
--84: 22.4vw;
--90: 24vw;
--96: 25.6vw;
--112: 29.86666666vw;
--114: 30.4vw;
--120: 32vw;
--128: 34.13333333vw;
--136: 36.26666666vw;
--140: 37.33333333vw;
--148: 39.46666666vw;
--160: 42.66666666vw;
--172: 45.86666666vw;
--180: 48vw;
--200: 53.33333333vw;
--210: 56vw;
--240: 64vw;
--258: 68.8vw;
--327: 87.2vw;
--354: 94.4vw;
--372: 99.2vw;
--400: 106.66666666vw;
--440: 117.33333333vw;
--555: 148vw;
--590: 157.33333333vw;
--670: 178.66666666vw;
--700: 186.66666666vw;
--728: 194.13333333vw;
--920: 245.33333333vw;
--1030: 274.66666666vw;

}
h1,.h1{font-size:var(--32);line-height:calc(var(--36) + var(--2));}
.content-wrap{border-radius:var(--12);}
.content-inner{padding:var(--32) var(--16);}
.logo{margin-top:calc(var(--14) * -1);margin-bottom:calc(var(--14) * -1);}
.but{max-width:100%;margin-bottom:calc(var(--16) * -1);}
.content-video video{object-position:30% center;}
.design-text span{color:var(--green);}
.rg-m-18{row-gap:var(--18);}
.rg-m-8{row-gap:var(--8);}
.mb-m-96{margin-bottom:var(--96);}
.mb-m-64{margin-bottom:var(--64);}
.mb-m-16{margin-bottom:var(--16);}
}

