/*
@font-face{font-weight:bold;src:url(fonts/montserrat-black.eot);src:url(fonts/montserrat-black.eot?#iefix) format("embedded-opentype"),url(fonts/montserrat-black.woff) format("woff"),url(fonts/montserrat-black.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat Medium';src:url(fonts/montserrat-medium.eot);src:url(fonts/montserrat-medium.eot?#iefix) format("embedded-opentype"),url(fonts/montserrat-medium.woff) format("woff"),url(fonts/montserrat-medium.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat Regular';src:url(fonts/montserrat-regular.eot);src:url(fonts/montserrat-regular.eot?#iefix) format("embedded-opentype"),url(fonts/montserrat-regular.woff) format("woff"),url(fonts/montserrat-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
*/

*{box-sizing:border-box}
html,body{width:100%;height:100%}
body{margin:0;font:1em/1.3 tahoma,'Helvetica CY','Nimbus Sans L',Sans-serif;color:#182d46;background:#fff;overflow-x: hidden;}
.fl{float:left}
.ar{text-align:right}
.fr{float:right}
.cl{clear:both}
.ac{text-align:center}
form{margin:0;padding:0}
input,select,textarea,button{outline:none;font:1em tahoma,'Helvetica CY','Nimbus Sans L',Sans-serif;color:#182d46}
.b,strong,b,.strong{font-weight: bold}

a{outline:none;text-decoration:underline;color:#c263ff;cursor:pointer}
a:hover{text-decoration:none;color:#24136e;}
p,div.par{margin:15px 0}
img{border:0;max-width:100%;max-height:100%;height:auto;width:auto;}
img[align=left]{margin:2px 10px 10px 0}
img[align=right]{margin:2px 0 10px 10px}
header,section,aside,footer,article,time,nav{display:block}
section,article,header,nav,aside{max-width:1920px;margin:0 auto}
.title{margin:0 auto;max-width:1300px;width:100%;padding:0 50px}
.rel{position:relative}
.clear:after,.title:after{content:'';display:block;clear:both}
.flex{display:flex;flex-wrap:wrap;justify-content:space-between}
.flex.al{justify-content:flex-start}
.flex.rev{flex-direction:row-reverse}
.flex.am{align-items:center}
.flex.acc{justify-content:center}
.flex.end{justify-content: end}
.w16{width:16%}
.w25{width:24%}
.w50{width:50%}
.w33{width:32%}
.w49{width:48%}
.w100{width:100%}
.w65{width:65%}
.table{display:table;width:100%;border-collapse:collapse}
.tr{display: table-row}
.td{display: table-cell; vertical-align: middle;}

/*Header start*/

header{
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    width: 100%;
    z-index: 50;
    background: linear-gradient(to right, #020a1f,#2f1332,#651a43);
}
.logotype{
    height:60px;
    padding:10px 0;
    float:left;
}
.bars, .closenav{
    width: 60px;
    height: 60px;
    background: url(files/bars.png) center no-repeat;
    background-size: 20px !important;
    border-right: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer;
    float:right;
}
.bars{
    display:none;
    position: relative;
}
.bars:before{
    content:"Menu";
    position: absolute;
    bottom:5px;
    font-size:11px;
    left:0;
    right:0;
    text-align: center;
    display:block;
    z-index:1;
    color:#fff;
    line-height: 1;
}
.closenav{
    background:url(files/close1.png) center no-repeat;
}
.inok{
    float:right;
    border-left:1px solid rgba(255,255,255,.1);
    width:60px;
    height:60px;
    line-height:60px;
    text-align:center;
}
.language{
    position: relative;
    border-right:1px solid rgba(255,255,255,.1);
}
.inok a, .inok.language span{
    color:#fff;
    transition:0.2s;
    display:block;
    text-decoration:none;
    width: inherit;
    height: inherit;
    cursor:pointer;
    background-size:20px !important;
}
.language > div{
    position: absolute;
    top:60px;
    left:0;
    right:0;
    display: none;
    background:#651a43;
    z-index:10;
}
.language:hover > div{
    display:block;
}
.inok a.phone{
    background:url(files/tel.png) center no-repeat;
}
.inok a.phone:hover{
    
    background-image:url(files/phone.png);
}

.inok a.viber, .inok a.vibermobile{
    background:url(files/viber.png) center no-repeat;
}
.inok a.viber:hover, .inok a.vibermobile:hover{
    
    background-image:url(files/viber-pink.png);
}


.inok a.whatsapp{
    background:url(files/whatsapp.png) center no-repeat;
}
.inok a.whatsapp:hover{
    
    background-image:url(files/whatsapp-pink.png);
}

.inok a.telegram{
    background:url(files/telegram.png) center no-repeat;
}
.inok a.telegram:hover{
    
    background-image:url(files/telegram-pink.png);
}
.inok a.vibermobile{display:none;}
.inok a:hover{
    background-color:#fff;
    color:#c263ff;
}

.language:before, .language:after{
    content: '';
    left: 50%;
    bottom: 10px;
    margin-left: -9px;
    background: #fff;
    position: absolute;
    display: block;
    width: 10px;
    height: 1px;
    z-index: 1;
    transform: rotate(45deg);
}
.language:after{
    transform: rotate(-45deg);
    margin-left: -2px;
}
nav{
    float:right;
}
nav ul, nav ul li{
    margin:0; padding:0; list-style:none;
}
nav > ul > li{float:left; margin-right:30px; line-height:60px; height:60px; display:block; position: relative;}
nav > ul > li > a{
    color:#fff;
    text-decoration:none;
}
nav > ul > li > a:hover, nav > ul > li > a.active{
    color:#c263ff;
}
nav > ul > li > a#dd{
    padding-left:33px;
    background:url(files/arrow-down.png) left center no-repeat;
    background-size:14px 8px;
}
nav > ul > li ul{
    position: absolute;
    display:none;
    background:#fff;
    left:0;
    top:40px;
    z-index:30;
    width:300px;
    border-radius:7px;
}
@media screen and (min-width: 1280px) {
nav > ul > li:hover > ul{display:block !important}
}
nav > ul > li > ul li{
    position: relative;
    border-top:1px solid rgba(0,0,0,.13);
}

nav > ul > li > ul li a{
    color:#163c88;
    display:block;
    text-decoration:none;
    padding:10px 15px;
    line-height:1.15;
    font-size:14px;
}
nav > ul > li > ul li a:hover{
    color:#fff;
    background:#163c88;
}
nav > ul > li > ul > li > ul{
    left:99%;
    top:0;
    overflow: auto;
    max-height: 350px;
    border-radius:0 7px 7px 0;
}
@media screen and (min-width: 1280px) {
nav > ul > li > ul > li:hover > ul{display:block !important;}
nav > ul > li > ul li:first-child{border:0}
}
nav > ul > li > ul > li > ul::-webkit-scrollbar {width: 10px;border-left:0;background:#173b80;}  
nav > ul > li > ul > li > ul::-webkit-scrollbar-thumb {background-color:#c263ff}


/*Main screen on the home page*/
.mainmain{
    background:#0e1d33;
    background-size: cover;
    color:#fff;
    height:100%;
    width:100%;
}
.mainmain > .flex{
    align-items:end;
    padding-bottom:10px;
    padding-top:135px;
    height: inherit;
}
.mainmain .par{margin:30px 0}

@keyframes fadeInAnimation {
            0% {
                opacity: 0;
                transform:matrix(1, 0, 0, 1, 0, 500);
            }
            100% {
                opacity: 1;
                transform:matrix(1, 0, 0, 1, 0, 0);
            }
        }
.bigtext{
    display: inline-block;
    position: relative;
    font-weight:bold;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.bigtext span{
    
    font-size:calc( (100vw - 320px)/(1920 - 320) * (80 - 34) + 34px);
    
    color:#fff;
    letter-spacing:-2px;
    
    line-height:1;
}

.typedtxt{
    top:-30px;
    position: absolute;
    z-index:1;
    line-height:1;
    right:0;
    color:#b8a1ba;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (30 - 16) + 16px);
}

.subtitle, .biconic a{
    font-size: calc( (100vw - 320px)/(1920 - 320) * (32 - 17) + 17px);
    line-height:1.1;
}
.middletext, .tabs{
    font-size: calc( (100vw - 320px)/(1920 - 320) * (24 - 16) + 16px);
    line-height:1.3;
}
.tabs{
    padding-bottom: 15px;
    white-space: nowrap;
    overflow: auto;
    position: relative;
}

.tabs::-webkit-scrollbar {height: 5px;border-left:0;background:#ddd;}  
.tabs::-webkit-scrollbar-thumb {background-color:#c263ff}

form.whiteblockempty .subtitle{
    text-align: justify
}
.mark{
    color:#c263ff;
    display: inline-block;
    position: relative;
}
.mark::after, .tabs span.active::after, .bigname::after, .benefits ol li span:after, .hh2::after{
    content:"";
    position: absolute;
    bottom:-10px;
    left:0;
    height: 10px;
    right:0;
    background:url(files/line.png) center bottom no-repeat;
    background-size: contain;
    display:block;
    z-index:1;
}

.btn{
    border:1px solid #fff;
    background:#fff;
    border-radius:7px;
    text-decoration:none;
    color:#173b80;
    display: inline-block;
    padding:5px 15px 5px 55px;
    line-height:36px;
    white-space: nowrap;
    cursor:pointer;
    position: relative;
    transition:0.2s;
    box-shadow: 0px 0px 59px 0px rgba(102, 153, 255, 0.65);
}
.btn.noshadow{
    box-shadow: none;
}
.btn:before{
    content:'';
    background-color:#c263ff;
    display: inline-block;
    background-image:url(files/arrow-niz.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:15px !important;
    width:35px;
    border-radius:4px;
    position: absolute;
    left:5px;
    top:5px;
    bottom:5px;
}
.mainmain .btn{
    line-height:45px;
    font-size:130%;
    padding: 10px 20px 10px 70px;
    margin: 5px 10px 5px 0;
}
.mainmain .btn:before{
    width: 50px;
    left: 10px;
    top: 10px;
    bottom: 10px;
}

.btn.headphones{
    background: transparent;
    color:#fff;
    border-color:#c263ff;
}
.btn.headphones:before{
    background-color: transparent;
    background-image:url(files/headphones-pink.png);
    background-size: 30px !important;
}
.btn.headphones:hover{
    background:#fff;
    color:#c263ff;
}
.biconic a{
    display: inline-block;
    margin:10px 13px 10px 0;
    text-decoration:none;
    line-height:1.1;
    padding:10px 0 10px 43px;
    position: relative;
}
.biconic a:hover{color:#fff}
.tl_ic{background:url(files/telegram.png) left center no-repeat; background-size:30px;}
.wa_ic{background:url(files/whatsapp.png) left center no-repeat; background-size:30px;}
.vb_ic{background:url(files/viber.png) left center no-repeat; background-size:30px;}

@keyframes pulse {
	0% {
		transform: scale(0.7);
		box-shadow: 0 0 0 12px rgba(170, 98, 253, .1);
	}

	70% {
		transform: scale(1.2);
		box-shadow: 0 0 0 2px rgba(170, 98, 253, .3);
	}

	100% {
		transform: scale(0.7);
		box-shadow: 0 0 0 12px rgba(170, 98, 253, .1);
	}
}

a.telefon:before{
    width:40px; height:40px;
    content:'';
    display:block;
    left:-6px; top:-2px;
    background:#fff url(files/phone.png) center no-repeat;
    background-size:15px !important;
    position: absolute;
    border-radius:50%;
    box-shadow: 0 0 0 2px rgba(170, 98, 253, .3);
	transform: scale(1.2);
	animation: pulse 2s infinite;
}



/*Services block*/
.section{
    margin:80px 0;
    padding:1px 0;
}

.grad{
    background:#000;
    /*background: linear-gradient(to right, #000b1c 0%,#380321 100%);*/
}
.services{
    border-radius:15px;
    color:#fff;
    margin:60px auto;
    max-width:1200px;
}
.wtext{color:#fff;}
.oneservice{
    width:33.33%;
    border-top:1px solid rgba(255,255,255,.1);
    border-left:1px solid rgba(255,255,255,.1);
    height:240px;
    background:url(files/dots.png) right bottom no-repeat;
    padding:30px;
}
.services .oneservice:nth-child(4), .services .oneservice:first-child{border-left:0;}
.serv{
    position: absolute;
    padding:30px;
    bottom:0;
    left:0;
    right:0;
    top:0;
    
    background-size:0 0 !important;
    transition:0.2s;
    z-index:1;
}
.oneservice:hover .serv{
    background-size:cover !important; 
    top:-20px;
    border-radius:15px 15px 0 0;
    background-color:#1f4b9d;
}

.services a{
    color:#fff;
    text-decoration:none;
}
.serv a{
    display:block;
    font-weight:bold;
    font-size:18px;
    padding-top:40px;
    background:url(files/arrow-right.png) 0 0 no-repeat;
    background-size:21px 17px !important;
}
.serv span.nm{
    font-weight:bold;
    font-size:14px;
}
.serv div.par{display:none}
.oneservice:hover .serv div.par{display:block;}
.knopka{
    border:0;
    display: inline-block;
    cursor:pointer;
    border-radius:20px;
    box-shadow: 0px 1px 0px 0px rgba(24, 45, 70, 0.65);
    color:#fff;
    background:#c263ff;
    padding:10px 25px;
    line-height:1;
    font-weight:bold;
}
.bluetext{
    color:#758cdb;
}
a.tl, a.wa, a.vb{
    width:23px; 
    height:23px;
    display: inline-block;
    margin-right:15px;
    background-size: contain !important;
    text-decoration:none;
    vertical-align: middle;
}
a.tl{
    background:url(files/telegram-pink.png) left center no-repeat;
}
a.wa{
    background:url(files/whatsapp-pink.png) left center no-repeat;
}
a.vb{
    background:url(files/viber-pink.png) left center no-repeat;
}
a.tl:hover, a.wa:hover, a.vb:hover{
    opacity:0.6;
}



/*Portfolio*/

.tabs span{
    cursor:pointer;
    margin:10px 20px;
    display: inline-block;
    padding-bottom:10px;
    color:#163c88;
}
.tabs span.active{
    position: relative;
    color:#c263ff;
}
.roboty{
    margin:60px 0;
}
.robota{
    width:33.33%;
    height:310px;
    background-position: center;
    background-size:cover !important;
    transition:0.2s;
}
.robota > .u{
    overflow: hidden;
    width:100%;
    height: inherit;
    display:block;
    font-size:22px;
    position: relative;
    text-decoration:none;
}
.robota > .u span.i{
    position: absolute;
    bottom:-40px;
    left:20px;
    right:20px;
    font-weight:bold;
    color:#fff;
    z-index:1;
    display:block;
    transition:0.2s;
}
.robota > .u:hover span.i{bottom:20px;}

.robota:hover > .u{
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%);
}
.robota:hover{
    transform: scale(1.05);
}



/*Feedback form*/
.field{
    border:1px solid #c1def9;
    width:100%;
    padding:15px;
    border-radius:5px;
    background: transparent;
    color:#fff;
}
.field::placeholder, .feedbackform .subtitle{color:#fff;}
.birdbeackground{
    background:url(files/transparent-bird.png?v=2) center no-repeat;
    background-size: contain;
}
.feedbackform, .whitefeedbackform{
    padding-top:80px;
    padding-bottom:80px;
    color:#7991a4;
}
.whitefeedbackform p{
    color:#7991a4
}
.whitefeedbackform .field::placeholder, .whitefeedbackform .field{color:#182d46;}

.bigname{
    font-weight:bold;
   font-size:calc( (100vw - 320px)/(1920 - 320) * (68 - 22) + 22px);
    background:linear-gradient(to right, #c263ff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing:-2px;
    line-height:1; 
    margin:20px 0;
}
.bigname::after{
    
    width:214px;
    right: auto;
}


/*Benefits*/

.benefits{
    background:#f7f2ff;
}
.benefits > .w50:first-child{
    background:#daecfe;
}
.w650{max-width:650px;}
.padd{
    padding:50px;
}
.benefits ol{
    list-style-type: none;
    counter-reset: num;
    margin:20px 0;
    padding:0;
}
.benefits ol li{
    padding:30px 0;
    margin:30px 0;
    position: relative;
}
.benefits ol li:before {
    content: '0'counter(num);
    counter-increment: num;
    display:block; 
    position: absolute;
    top:-30px;
    left: 0;
    font-weight:bold;
    color: #e1defd;
    z-index:0;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (160 - 45) + 45px);
    line-height:1;
    letter-spacing:-2px;
}
.benefits ol li span{
    font-weight:bold;
    font-size:160%;
    margin-bottom: 40px;
    position: relative;
    display:block;
}
.benefits ol li span:after{
    right: auto;
    width: 200px;
    bottom: -20px;
}
.benefits .headphones{
    background-color:#fff;
    border:0;
    color:#c263ff;
}
.benefits .table .td{color:#163c88; padding:30px 0; vertical-align: middle;}
.benefits .table .tr .td:first-child{
    font-size: 60px;
    line-height: 1;
    text-align:right;
}
.benefits .table .tr .td:nth-child(2) {
    padding-left:30px; padding-right:30px;
}
.benefits .table .tr .td img{
    width:44px; height:24px; max-width: none;
}
#popup{display:none}

/*popup*/
#window{
    border-radius:12px;
    background:#fff;
    z-index:255;
    left:50%;
    width:320px;
    margin-left:-160px;
    position: fixed;
    transition:0.5s;
}
.hhde{top:-600px;}
.hhdw{
    top:100px;
}
.hhdw + div{
    background:rgba(8,20,40,.85);
    top:0;
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:254;
}
.pado{padding:15px 20px;}
#window .pado + .pado{background:#163c88; color:#fff;border-radius:0 0 11px 11px;}
.big{font-size:1.2em;width:calc(100% - 35px)}
.close{
    cursor:pointer;
    width:30px;
    height:30px;
    transition:0.2s;
    background:url(files/close.png) center no-repeat;
    border-radius:50%;
    display: inline-block;
    background-size: contain !important;
}
.close:hover{
    transform: rotate(90deg);
}


/*Reviews*/
.reviews{
    padding:80px 0;
}
.hh2{
    background: linear-gradient(to right, #98a2bb, #fff, #d4c7d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#otzyvy{
    margin:50px 0;
}
.review .border{
    margin:15px;
    position: relative;
    border-radius:5px;
    border:1px solid rgba(255,255,255,.14);
    padding:45px 25px 30px;
    color:#c1def9
}
.review .username{
    color:#fff;
    top:-10px;
    left:20px;
    position: absolute;
    background:#000;
    padding:0 10px;
    z-index:1;
    font-weight:bold;
}
.skroll{
    overflow: auto;
    font-size:14px;
    line-height:19px;
    height:172px;
    margin-bottom:30px;
    text-align: justify;
    padding-right:10px;
}
.skroll::-webkit-scrollbar{width:7px;border:0;background:#000}
.skroll::-webkit-scrollbar-thumb{background-color:#fff}
.stars span{
    display: inline-block;
    margin-right:4px;
    width:19px;
    height:18px;
    background-size: contain !important;
}
span.starfull{background:url(files/star-full.png) no-repeat}
span.star{background:url(files/star-empty.png) no-repeat}

#becomeaclient::before{
    background-image: url(files/beclient-icon.png);
}
#writereview::before{
    background-image: url(files/arrow-right.png);
}
input[name="ocenka"]{opacity:0;display:none}
input[name="ocenka"] + span{display:inline-block;margin-right:10px;cursor:pointer}
input[name="ocenka"] + span:before{content:"";display:inline-block;width:19px;height:18px;background:url(files/star-empty.png) left center no-repeat; background-size: contain;}
input[name="ocenka"]:checked + span:before,input[name="ocenka"] + span.sel:before{background:url(files/star-full.png) left center no-repeat; background-size: contain;}


/*scroll line*/
@keyframes marquee {
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-50%);
        }
    }
.poloska{
    overflow: hidden;
    height:150px;
}
.poloska:after{
    content:'';
    z-index:1;
    display:block;
    left:-15px;
    right:-15px;
    bottom:-80px;
    height:150px;
    background:#fff;
    transform: rotate(-4deg);
    position: absolute;
}
.marquee {
    background: linear-gradient(to right,  rgba(22,60,136,1) 0%,rgba(194,99,255,1) 100%);
    color: #fff;
    padding: 15px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
}
 .poloska .marquee{
    transform: rotate(-4deg);
    position: absolute;
    left: -15px;
    right: -15px;
    top:50px;
    z-index: 2;
 }
.marquee span {
    padding:0 15px;
    white-space: nowrap;
      display: flex;
    animation: marquee 15s infinite linear;
}

/*brands*/
.brands{margin:100px 0;}
.logo{
    position: relative;
    height:100px !important;
}
.inmid{
    position: absolute;
    left:50%;
    top:50%;
    display:block;
    transform: translate(-50%,-50%);
}


/*Footer*/
.btnleft, .btnright{
    bottom:15px;
    position: fixed;
    z-index:100;
    left:15px;
}
.btnright{left:auto;right:15px;}
#iknow:before{background-image:url(files/lamp-icon.png)}
#idontknow:before{background-image:url(files/thinking.png)}

.small{
    color:#546983;
    font-size:12px;
}
footer{
    padding:60px 0 40px;
}
footer > div.title:first-child{
    background:url(files/transparent-bird.png) center top no-repeat;
    background-size: contain;
}
footer ul{
    margin:20px 0;padding:0;
}
footer ul li{
    list-style:none;
    padding:0;
    margin:0 0 20px 0;
}
footer ul li a{color:#fff;}
footer ul li a:hover, footer ul li a.active, a.mail{
    color:#758cdb; text-decoration:none;
}
footer a.telefon{color:#fff;text-decoration:none}
footer a.telefon:before{display:none}
footer div.par{margin-bottom:30px;}
footer .w49{text-align:right;}
.social a{
    margin:5px 0 5px 35px;
    display: inline-block;
    height:38px;
    width:38px;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: right center;
}
.social a.tiktok{background-image:url(files/tiktok.png)}
.social a.facebook{background-image:url(files/facebook.png);width:23px;}
.social a.instagram{background-image:url(files/instagram.png)}
.social a.pinterest{background-image:url(files/pinterest.png);width:30px;}
.social a.behance{background-image:url(files/behance.png); width:57px;}
.social a.twitter{background-image:url(files/x.png)}
.social a:hover{opacity:0.6}
.headp{
    cursor:pointer;
    color:#c263ff;
    text-decoration: underline;
    display: inline-block;
    padding:0 0 0 25px;
    background:url(files/headphones-pink.png) left center no-repeat;
    background-size:20px;
    vertical-align: middle;
}
img.lg{width:80px; height:92px;}


/*About Studio*/
.autoheight{height:auto !important;padding-bottom:1px;}
.path{
    font-size:13px;
    color:#65224d;
}
.path ol, .path ol li{margin:0;padding:0;list-style:none}
.path ol li{display: inline}
.path a{
    color:#65224d;
    text-decoration: underline;
}
.path a:hover{
    text-decoration: none;
}
.kavichka:before{
    content:'"';
    font-family: 'Georgia, sans';
    z-index:0;
    position: absolute;
    top:-30px;
    left:-20px;
    color:#fff;
    opacity:0.08;
    display:block;
    line-height:1;
    font-size:100px;
}
h1, h2, h3{
    margin:30px 0;
    font-weight: normal;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (55 - 24) + 24px);
    line-height:1.1;
}
.infotext{
    
}
.sotrudnik{
    background:#d7eafb;
    border-radius:7px;
    margin:30px 0 0 70px;
    font-size:14px;
    padding:35px 20px 35px 93px;
    width:calc(32.2% - 70px);
}
.sotrudnik > .pic{
    position: absolute;
    z-index:1;
    border-radius:7px;
    top:25px;
    bottom:25px;
    left:-70px;
    width:150px;
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center;
}
.sotrudnik .sotname{
    font-weight:bold;
    font-size:1.1em;
    margin-bottom:15px;
}
.sotrudnik span{
    color:#899dc4;
    font-size:0.9em;
}




/*Bird block*/

.noisegrad{
    background: rgb(229,207,254);
    background: linear-gradient(90deg, rgba(229,207,254,1) 0%, rgba(255,255,255,1) 50%, rgba(155,218,244,1) 100%);
    background-size: cover;
}
.bigword:after{
    left:0;
    z-index:1;
    content:'';
    top:0;
    bottom:0;
    background:url(files/garuda-word.png) 0 0 no-repeat;
    background-size: contain;
    position: absolute;
    width: 100px;
    display:block;
}
.whiteblock, .whiteblockempty{
    background:#fff;
    border-radius:30px;
    max-width: 1100px;
    margin: 30px auto !important;
}
.whiteblockempty{
    background: transparent;
    border:10px solid #fff;
}
.whiteblock .subtitle{
    color:#182d46
}
.morta{
    background-color: #dcedfd;
    border-radius: 20px;
    overflow: hidden;
    width: 24%;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-top:30px;
}
.morta span{
    color:#163c88;
    padding:20px;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (24 - 14) + 14px);
    display:block;
}
.morta span:after, ol.order li span:after{
    content:'';
    height:5px;
    display:block;
    margin-top:10px;
    width:60%;
    background:url(files/line.png) left center no-repeat;
    background-size: contain;
}
.morta > div img{display:block;float:right;}
.morta > div{width:100%;}

.morta em{
    font-style: normal;
    color: #fff;
    white-space: nowrap;
    padding: 15px 10px;
    text-align: center;
    display: block;
    border-radius: 10px;
    position: relative;
    background: #163c88;
    width: 80%;
    font-size: calc((100vw - 320px) /(1920 - 320)*(24 - 14) + 14px);
    margin: 0 auto 40px auto;
}
.morta em:after{
    content:'';
    position: absolute;
    z-index:1;
    display: block; 
    transform: rotate(45deg);
    right:20px;
    width:15px; 
    height:30px;
    bottom:-8px;
    background: #163c88;
}
.morta em:first-line{
    font-size:14px;
}

.cena {
    position: absolute;
    right:50px;
    width: 176px;
    color:#182d46;
    height: 203px;
    background: url(files/cena.png) center no-repeat;
    background-size: contain;
    padding:40px 10px 0;
    text-align:center;
}
.cena span{
    color:#aa62fd;
    font-size:30px;
    line-height:1.3;
    display:block;
    font-weight:bold;
}

.sans{
    
    font-family: 'Times New Roman', sans;
    font-size: calc((100vw - 320px) /(1920 - 320)*(24 - 14) + 14px);
}


ol.order{
    justify-content: space-between;
    list-style-type: none;
    counter-reset: num;
    margin:20px 0;
    padding:0;
    display:flex;
    flex-wrap: wrap;
}
ol.order li{
    width:48%;
    padding:30px 20px;
    margin:10px 0;
    display:flex;
    align-items: center;
    position: relative;
    background-color:#fff;
    border-radius:15px;
    overflow: hidden;
    color:#163c88;
}
ol.order li span{
    width:70%;
    font-size: calc((100vw - 320px) /(1920 - 320)*(24 - 14) + 14px);
    display:block;
}
ol.order li:before {
    content: '0'counter(num);
    counter-increment: num;
    display:block; 
    position: absolute;
    top:auto;
    right:-10px;
    bottom:-35px;
    font-weight:bold;
    color: #f3ebff;
    z-index:0;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (160 - 45) + 45px);
    line-height:1;
    letter-spacing:-10px;
}
ol.etapy{
    margin:30px 0;
    list-style-type: none;
    counter-reset: num;
    padding:0;
}
ol.etapy li:first-child{
    width:100%;
    border:0;
    text-align:center;
    position: relative;
}
ol.etapy li{
    padding:20px 30px;
    width:20%;
    margin-top:0;
    position: relative;
    border-left:0.5px solid #d0dfff;
    border-bottom:0.5px solid #d0dfff;
}
ol.etapy li:before {
    content: '0'counter(num)'.';
    counter-increment: num;
    display:block; 
    line-height:2;
    color: #aa62fd;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (22 - 14) + 14px);
}
ol.etapy li:first-child::before{
    line-height: inherit;
    display: inline-block;
    margin-right:10px;
}
ol.etapy li span.s{
    font-size:calc( (100vw - 320px)/(1920 - 320) * (22 - 14) + 14px);
    
}
ol.etapy li:first-child::after{
    width:50%; content:''; height:0.5px; background:#d0dfff;
    bottom:0;
    position: absolute;
    display:block;
    left:0;
}

.circles{overflow: hidden;}
.circles:before, .circles:after, .circles .title.rel:before{
    content:'';
    background:rgba(170,98,253,.1);
    border-radius:100%;
    z-index:0;
    width:548px;
    height:548px;
    position: absolute;
    top:90px;
    left:50%;
    transform: translatex(-75%);
    display:block;
}
.circles:after{
    background:rgba(63,177,227,.1);
    transform: translatex(-15%);
    top:120px;
    z-index:-1;
}
.item{
    margin:50px 1.5%;
    width:30%;
}
.mark.bold{
    color:#163c88;
    font-weight:bold;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (24 - 16) + 16px);
}
#monamia{margin-top:40px}
#monamia .mark.bold, #monamia{color:#fff;}

.circles .title.rel:before{
    top:-100px;
    width:440px;
    height:440px;
    background:rgba(63,177,227,.1);
    transform: translatex(-50%);
}


/*reklama*/
.counts{
    text-align:right;
    padding:5px 30px 5px 0;
    color:#aa62fd;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (60 - 24) + 24px);
}

.shape {
  background: linear-gradient(to right,  #ae88d8 0%,#a9daf0 100%);
  width: 430px;
  margin:0 auto;
  height: 430px;
  position: relative;
  z-index:0;
  border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  overflow: hidden;
}
.shape img{
  margin-left:50px;
}
ul.list{
    margin:20px 0; padding:0;
}
ul.list li{
    list-style:none;
    margin:20px 0;
    padding:3px 0 3px 50px;
    position: relative;
    color:#163c88;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (24 - 14) + 14px);
}
ul.list li:before, ul.list li:after{
    width:26px;
    content:'';
    display:block;
    transition:0.2s;
    background:#aa62fd;
    height:2px;
    left:0;
    top:50%;
    position: absolute;
}
ul.list li:after{
    left: 1px;
    top: 50%;
    transform: rotate(90deg);
}


/*Development*/
.paket{
    width:24%;
}
.paket .name{
    font-weight:bold;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (24 - 16) + 16px);
}
.paket ul{
    min-height:340px;
    margin:20px 0; padding:0;
}
.paket ul li{
    margin:10px 0;
    padding:5px 0 5px 32px;
    list-style: none;
    position: relative;
    font-sizE:14px;
}
.paket ul li:before, .tag span:before{
    content:'';
    border-radius:100%;
    display:block;
    border:2px solid #52628b;
    position: absolute;
    left:0;
    top:5px;
    width:15px;
    height:15px;
    background:url(files/ok.png) center no-repeat;
    background-size:9px 7px;
}
.price{
    color:#6d80b2; font-size:14px;
}
.price span{
    display:block;
    color:#aa62fd; font-size:24px;
}
.zamov{
    position: absolute;
    bottom:-77px;
    left:0;
    right:0;
    text-align:center;
}
.btninsha{
    line-height:30px;
    background:#aa62fd;
    padding: 10px 70px 10px 20px;
    margin:0;
    border-radius:5px;
    color:#fff;
    display: inline-block;
    cursor:pointer;
    position: relative;
    white-space: nowrap;
}
.btninsha:after{
    content:'';
    display: block;
    top:5px;
    right:5px;
    bottom:5px;
    width:40px;
    background:#fff url(files/arrow-pink.png) center no-repeat;
    background-size:20px;
    position: absolute;
    border-radius:4px;
}

.column{
    width:31%;
    position: relative;
}
.blokirosta{
    margin-top:40px;
    background:url(files/arrows.png) center no-repeat;
    background-size:90% 90%;
    align-items: end;
}
.blokirosta .column:first-child::before, 
.blokirosta .column:nth-child(2)::before{
    content: "+";
    color: #a9daf0;
    font-size: 70px;
    filter: blur(2px);
    position: absolute;
    top: -70px;
    left: 50px;
    z-index: 0;
}
.blokirosta .column:nth-child(2){top:5%;}
.blb{
    background:#fff;
    border-radius:5px;
    padding:20px;
    margin:7px 0;
    box-shadow: 2.728px 2.925px 0px 0px rgba(28, 168, 231, 0.15);
}
.garudas{
    background: linear-gradient(to right,  #ae88d8 0%,#a9daf0 100%);
    margin:200px auto 50px auto;
    max-width:1200px;
    padding:10px;
    border-radius:20px;
}
.garudas > div{
    background:#fff;
    border-radius:18px;
    position: relative;
    font-weight:bold;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (30 - 18) + 18px);
    padding:40px 30px 40px 50%;
}
.garudas > div:before{
    content:'';
    transform: scale(-1, 1);
    background:url(files/bird-bez-nog.webp) bottom no-repeat;
    bottom:0;
    left:30px;
    width:40%;
    height:320px;
    background-size: contain;
    position: absolute;
    display:block;
}
.garudas span{color:#aa62fd;}
.tag{
    display: inline-block;
    margin:5px 10px 5px 0;
}
.tag input{display:none}
.tag input + span{
    border-radius:4px;
    background:#fff;
    display: block;
    border:2px solid #fff;
    position: relative;
    cursor:pointer;
    padding:10px 15px 10px 50px;
}
.tag span:before{
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.tag input:checked + span{
    color:#aa62fd;
    border-color:#aa62fd;
}
.list.faq li span{
    cursor:pointer;
}
.list.faq li span:hover, .list.faq li span.active{
    text-decoration: underline; color:#182d46;
}
.list.faq li p{display:none; margin:10px 0 0 0; background:#fff; border-radius:7px; padding:15px;}
.list.faq li span.active + p{display:block;}

.list.faq li.active:before{
    transform: rotate(45deg);
    top:15px;
    left:11px;
    width:20px;
}
.list.faq li.active:after{
    width:20px;
    left: -3px;
    top: 15px;
    transform: rotate(-45deg);
}

blockquote{
    margin:20px 0;
    background:#daecfe;
    padding:20px;
    color:#163c88;
    border-radius:0 20px 20px 20px;
    font-size:calc( (100vw - 320px)/(1920 - 320) * (24 - 16) + 16px);
}
.head, .benefits h1{
    color:#182d46;
    font-weight:bold;
    margin:30px 0;
    line-height:1.1;
    font-size: calc( (100vw - 320px)/(1920 - 320) * (60 - 24) + 24px);
}
.head span{
    font-weight:bold;
}
.head + .subtitle{
    color:#163c88;
    margin:20px 0;
}
.fade-in {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.circles div.item, .benefits ol li, ol.etapy li{
    opacity: 0;
    transform: translateY(50px);
    
}


.visible .circles div.item, .visible .benefits ol li, .visible ol.etapy li{
    animation: fadeIn 0.5s forwards, transform 0.5s ease;
}

/* Задержка для каждого элемента */
.visible .circles div.flex div.item:nth-child(1), .visible .benefits ol li:nth-child(1), ol.etapy li:nth-child(1) {animation-delay: 0.2s;}
.visible .circles div.flex div.item:nth-child(2), .visible .benefits ol li:nth-child(2), ol.etapy li:nth-child(2) {animation-delay: 0.4s;}
.visible .circles div.flex div.item:nth-child(3), .visible .benefits ol li:nth-child(3), ol.etapy li:nth-child(3) {animation-delay: 0.6s;}
.visible .circles div.flex div.item:nth-child(4), .visible .benefits ol li:nth-child(4), ol.etapy li:nth-child(4) {animation-delay: 0.8s;}
.visible .circles div.flex div.item:nth-child(5), .visible .benefits ol li:nth-child(5), ol.etapy li:nth-child(5) {animation-delay: 1s;}
.visible .circles div.flex div.item:nth-child(6), .visible .benefits ol li:nth-child(7), ol.etapy li:nth-child(6) {animation-delay: 1.2s;}
.visible .circles div.flex div.item:nth-child(7), .visible .benefits ol li:nth-child(6), ol.etapy li:nth-child(7) {animation-delay: 1.4s;}
.visible .circles div.flex div.item:nth-child(8), .visible .benefits ol li:nth-child(8), ol.etapy li:nth-child(8) {animation-delay: 1.6s;}
.visible .circles div.flex div.item:nth-child(9), .visible .benefits ol li:nth-child(9), ol.etapy li:nth-child(9) {animation-delay: 1.8s;}
.visible .circles div.flex div.item:nth-child(10), .visible .benefits ol li:nth-child(10), ol.etapy li:nth-child(10) {animation-delay: 2s;}



/*banner*/
.bannerok{
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    position: fixed;
    z-index:100;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size:auto 200px !important;
    padding:0 0 160px 0;
}
.cloud{
    position: relative;
    width: 250px;
    height: 180px;
    background: url(files/cloud.png) 0 0 no-repeat;
    -webkit-filter: drop-shadow(5px 5px 5px #c263ff);
    filter: drop-shadow(5px 5px 5px #c263ff);
    background-size: contain;
    font-size: 14px;
}
.cloud div{
    display: flex;
    height: inherit;
    width: inherit;
    padding:40px 45px 65px 45px;
    align-items: center;
    text-align:center;
}
.closebanner{
    position: absolute;
    top:0;
    right:0;
    cursor:pointer;
    width:45px;
    height:45px;
    background:#fff url(files/close1.png) center no-repeat;
    background-size:13px;
    border-radius:100%;   
}

.pole{
    border:0;
    background:#333;
    padding:10px;
    width:100%;
    border-bottom:1px solid #777;
    color:#fff;
    margin: 15px 0 0;
}
.sucta{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.sucta label{
    cursor: pointer;
    display: block;
    position: relative;
    width: 50%;
    height: 30px;
    margin: 20px 0 0;
}
.sucta label span{
    position: absolute;
    left:0;
    top:0;
    display:block;
    z-index:1;
    background:#000;
    border:1px solid #fff;
    width:30px;
    height:30px;
}
.sucta label span:before{
    content:'';
    position: absolute;
    z-index:2;
    
    width:13px;
    height:13px;
    display:block;
    left:8px;
    top:8px;
}
.sucta label input{
    width: 25px;
    height: 25px;
    vertical-align: middle;
}
.sucta label input[type="checkbox"] + span, .sucta label input[type="checkbox"] + span:before{
    border-radius:3px;
}
.sucta label input[type="radio"] + span, .sucta label input[type="radio"] + span:before{
    border-radius:100%;
}
.sucta label input:checked + span:before{
    background:#c263ff;
    border-color:#c263ff;
}
.addfiles{
    background:#333;
    height:60px;
    width:100%;
    border-bottom:1px solid #777;
    color:#fff;
    margin: 15px 0 0;
    overflow: hidden;
}
.addfiles label{
    display:flex;
    width: inherit;
    height: inherit;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}
.addfiles label input{width:100%;height: inherit;display:none}
.addfiles label span{
    background:#fff;
    padding:10px 15px;
    color:#000;
    display: inline-block;
    cursor:pointer;
    border:1px solid #000;
}
.addfiles label:hover span{
    background:#000;
    color:#fff;
}
.whiteblockempty .table{
    border-collapse: separate;
    border-spacing: 10px;
}
.yes, .net{
    font-size:calc( (100vw - 320px)/(1920 - 320) * (24 - 16) + 16px);
    padding: 20px;
    border: 5px solid #c263ff;
    margin-bottom: 55px;
    border-radius: 20px;
    color: #c263ff;
}
.net{color:red;border-color:red;}
.vkladki + .section{margin-top:140px;}
.vkladki{
    overflow: auto;
    position: fixed;
    top: 60px;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    width: 100%;
    z-index: 49;
    background: linear-gradient(to right, #020a1f, #2f1332, #651a43);
}
.vkladki .flex{
    flex-wrap: nowrap;
}
.vkladki .flex > div{
    min-width:90px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}
.vkladki .flex > div:first-child{
    border-left: 1px solid rgba(255, 255, 255, .1);
}
.vkl span{
    display:block;
    position: relative;
    height:25px;
    margin-bottom:6px;
}
.vkl span img{
    filter: grayscale(100%) brightness(1000%);
}
.vkl a{
    text-decoration:none;
    text-align:center;
    color:#fff;
    display:block;
    padding:6px 10px;
}
.vkl:hover, .vkl.akt{
    background:#fff;
}
.vkl:hover a, .vkl.akt a{
    color:#182d46;
}
.vkl:hover span img, .vkl.akt span img{
    filter: none;
}

/*TZ*/
.mod_tz{background:#000;color:#fff;}
.powered{
    position:fixed;
    right:25px;
    bottom:25px;
}
.powered span{
    display: inline-block;
    color:#000;
    background:#fff;
    border-radius:4px;
    padding:5px 10px;
}
.topline{
    padding:25px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.topline img{
    height:45px;
    width:auto;
}
.voprosy_tz{
    transform: translateY(100px);
    max-width:650px;
    width:100%;
    margin:100px auto 0;
}
.tz_field{
    width:100%;
    padding:15px 0;
    background: transparent;
    border:0;
    border-bottom:1px solid #ccc;
    font-size:20px;
    max-height:150px;
    overflow: auto;
    color:#fff;
}
.tz_field:placeholder{color:#666;}
.gonext, .goprev{
    cursor:pointer;
    border-radius:30px;
    background:#fff;
    color:#000;
    font-weight:bold;
    padding:10px 25px;
    font-size:30px;
    line-height:1;
    vertical-align: middle;
    display: inline-block;
    margin-right:15px;
}
.voprostitle{
    line-height:1.1;
    font-size:26px;
    margin-bottom:30px;
    font-weight:bold;
}
.voprostitle span{
    display:block;
    color:#ccc;
    font-weight: normal;
    font-size: 22px;
    margin-top: 3px;
}
.vopros{
    opacity: 0;
    visibility: hidden;
    transition: ease 1.6s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform:matrix(1, 0, 0, 1, 0, 500);
}
.vopros.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform:matrix(1, 0, 0, 1, 0, 0);
}
.vopros.active:before{
    content:attr(data-id);
    font-size:24px;
    left:-60px;
    position:absolute;
    z-index:1;
    top:5px;
}
.goprev{
    cursor:pointer;
    color:#fff;
    background:none;
    padding-left:0;
    padding-right:0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.goprev.visible {
    opacity: 1;
    visibility: visible;
}
.otvety label{
    position: relative;
    cursor:pointer;
    display:block;
    margin:12px 0;
    padding:5px 0 5px 40px;
}
.otvety label input{display:none}
.otvety label input + span{
    background:#fff;border-radius:3px;
    position: absolute;
    top:0;
    left:0;
    z-index:1;
    width:25px;
    display:block;
    height:25px;
}
.otvety label input:checked + span{
    box-shadow: 0 0 0 6px rgba(192, 98, 255, .4);
    background:#fff url(files/ok.png) center no-repeat;
    background-size:12px;
}
#preloader{
    position:fixed;
    background:#000;
    top:0;
    bottom:0;
    left:0;
    padding:0 20px;
    right:0;
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    transform: scale(1);
    transform-origin: center center;
    /*font-size:120%;transition: transform 1s ease, opacity 1s ease;*/
    z-index: 9999;
    justify-content: center;
}
#preloader > div{width:100%}
.begin{margin-top:30px;}
#preloader img{height:250px}
.vopros input.field{display:none;}
.vopros input.field + span{
    background:#000;
    display:block;
    border-bottom:1px solid #ccc;
    font-size:20px;
    padding:15px 0;
    color:#666;
}
#lottie{
    width:100%; 
    height:100%;
    margin:0 auto;
}
#hello {
    position:fixed;
    left:0;
    background:#000;
    top:0;
    z-index:10000;
    bottom:0;
    width:100%;
    transition: opacity 0.5s ease;
    overflow: hidden;
    
  }
  #hello.hidden {
    opacity: 0;
    width:0;
    pointer-events: none;
  }

@media screen and (max-width: 1280px) {
    .mainmain .btn{font-size:100%}
    .robota{height:220px;}
    .bars{display:block;}
    nav{float:none;position:absolute;right:0;top:60px;display:none;background:#fff;border: 1px solid #47163a;border-top:0}
    nav > ul > li{float:none;margin:0;line-height:1.15;height:auto;position: static;border-top:1px solid rgba(0,0,0,.1);}
    nav > ul > li ul{position: static;background:none;}
    nav > ul > li > a{display:block;padding:10px 15px;color:#163c88;}
    nav > ul > li > a:hover{color:#fff;background:#163c88;}
    nav > ul > li ul li a{padding:15px 45px 15px 30px;color: #c062ff;}
    nav > ul > li > a#dd{background:none;padding-left:15px;font-weight:bold;}
    .cena{right:15px;width:140px;height:160px;padding:30px 5px 0;}
    .cena span{font-size:24px;}
    .blb{font-size:13px;padding:10px;}
    nav > ul > li > ul li{position: relative;border-top: 1px solid rgba(255, 255, 255, .12);}
    nav > ul > li > ul > li > ul a{padding-left:40px;color:#9644cb;}
    nav > ul > li > ul > li > ul{border-radius:0}
}

@media screen and (max-width: 1000px) {
    .padd{padding:30px;}
    .title{padding-left:15px;padding-right:15px;}
    .benefits .table .tr .td:first-child{font-size:40px}
    .feedbackform, .whitefeedbackform{padding-top:40px;padding-bottom:40px;}
    .sotrudnik{width:calc(49% - 70px);}
    .mainmain.autoheight .biconic{padding-right:150px;}
    .shape{width:100%;max-width:350px;height:350px;margin:15px auto;}
    .whiteblockempty{border-bottom:0;}
    .zamov{position: static;margin-top:25px;}
    .circles:before, .circles:after, .circles .title.rel:before, .circles .title.rel:before{width:248px;height:248px;}
    .vkladki .title{padding-left:0;padding-right:0;}
}


@media screen and (max-width: 900px) {
    .benefits .w50, .feedbackform .w33, .whitefeedbackform .w33{width:100%;}
    .w650 {margin: 0 auto;float: none;}
    .benefits .head{text-align: center !important;}
    .feedbackform, .whitefeedbackform{max-width:650px;}
    .bigname::after{display:none}
    .section{margin:40px 0;}
    .robota, .oneservice{width:50%}
    .reviews{padding:40px 0;}
    .slick-dots li button{background:#3d70d1 !important}
    .paket{
        text-align: left;
        flex-shrink: 0;
        white-space: normal;
        width:220px;
        padding-right: 20px;
    }
    .packages{justify-content: flex-start !important;flex-wrap: nowrap;overflow: auto;}
    .paket ul li{font-size:13px;}
    nav{max-height:450px;overflow: auto;border-radius:0;width:100%;background: linear-gradient(to right, #020a1f, #2f1332, #651a43);border:0;}
    header .title{padding-right:0}
    nav > ul > li ul{width:100%;border-radius:0;display:none;}
    nav > ul > li > a{color:#fff;padding:15px 40px 15px 20px !important;}
    nav > ul > li{border-top:1px solid rgba(255,255,255,.12);position: relative;}
    nav > ul > li span.ddds{
        position: absolute;
        right:0;
        background: url(files/arrow-down.png) center no-repeat;
        background-size:15px;
        top:0;
        height:48px;
        width:46px;
        z-index:2;
        display:block;
        cursor:pointer;
        border-left: 1px solid rgba(255, 255, 255, .12);
    }
    nav > ul > li ul li a{padding: 15px 45px 15px 20px;}
    .vkladki + .section{margin-top:60px;}
    .vopros:before{top:-55px !important;left:0 !important}
    .voprosy_tz{width:90%;}
    #lottie{height:380px}
}
@media screen and (max-width: 800px) {
    .mainmain .w49, .noisegrad .w50, .noisegrad .w49{width:100%}
    .sotrudnik{padding:20px 10px 20px 65px;width:calc(49% - 40px);margin-left:40px;}
    .sotrudnik > .pic{top:15px;bottom:15px;left:-40px;width:90px;}
    .padd{padding:15px}
    ol.etapy li{width:33.33%;padding:15px;}
    ol.etapy{justify-content: center;}
    .bigword:after{display:none;}
    ol.order li:before{bottom:-20px;letter-spacing:-2px;}
    .blokirosta{background-size: contain !important;}
    .item{width:45%;margin-top:15px;margin-bottom:15px;}
    .vkladki{top:auto;bottom:0;border-bottom:0;}
    .vkl a{font-size:12px;}
    .btnleft, .btnright{bottom:75px}
    .mainmain > .flex{    padding-top: 85px;}
}
@media screen and (max-width: 700px) {
    .biconic a{font-size:16px;background-size: 20px !important;padding:5px 0 5px 27px;}
    a.telefon:before{background-size:10px !important;width:30px;height:30px;}
    .inok, .bars, .closenav{width:45px;}
    .mainmain .btn{font-size:14px;line-height:24px;padding-left:50px;padding-right:10px;}
    .mainmain .btn:before{width: 35px;left: 5px;top: 5px;bottom: 5px;}
    .services{margin:40px auto;}
    .social a{margin:5px 10px;}
    footer .w49{text-align:center;width:100%;}
    footer .w25, .morta{width:49%;}
    .mainmain .par{margin:10px 0;}
    .cena{bottom: -20px;height: 140px;width: 140px;}
    .mainmain.autoheight .biconic{padding-right:130px}
    .garudas > div{padding:20px 15px 20px 50%}
    .garudas > div:before{height:300px;}
    .garudas{margin:150px auto 15px auto;}
    .tabs span{margin:10px;font-size:13px}
}
@media screen and (max-width: 600px) {
    .oneservice, .serv{padding:20px 15px 0;}
    .reviews{padding:25px 0;}
    .review .border{margin:15px 0}
    .brands{margin:40px 0}
    .sotrudnik{width:calc(100% - 40px);margin-top:15px;}
    .mark::after{bottom:-2px;}
    .tabs span.active::after{bottom:0;height:6px;}
    .garudas > div:before{height:250px;}
    .garudas{margin-top:70px}
    .voprostitle, .gonext, .goprev{font-size:20px;}
    .voprostitle span{font-size:18px}
}
@media screen and (max-width: 530px) {
    .btn:before{background-size:12px !important;width:25px;}
    .btn{padding:5px 10px 5px 40px;line-height:24px;font-size:14px;}
    .typedtxt{right:auto;left:0;}
    .logotype{width:45px;overflow: hidden}
    .logotype img{max-width:1000px;}
    .robota, .oneservice{width:100%;margin:5px 0}
    .robota{position: relative;}
    .robota:before{content:'';left:0;right:0;top:-10px;height:10px;display:block;position: absolute;background: linear-gradient(to right,  rgba(22,60,136,1) 0%,rgba(194,99,255,1) 100%);}
    .head{margin:20px 0}
    .benefits .table .td{padding:15px 0;}
    .benefits .table .tr .td:nth-child(2){padding-left:12px;padding-right:12px;}
    .btn.headphones:before{background-size:15px !important}
    ol.etapy li{width:50%}
    .counts{padding:15px 15px 15px 0}
}
@media screen and (max-width: 460px) {
    .garudas > div{padding: 20px 20px 200px 20px;text-align: center;}
    .garudas{margin-top:15px;}
    .garudas > div:before{height: 195px;width:160px;left:50%;margin-left: -80px;}
    .mark::after{height:5px;}
    .tag input + span{padding:10px 10px 10px 40px;font-size:13px;}
    .tag span:before{left:11px;}
    .tag{margin-right:5px;}
    .hhdw{top:20px}
    .sucta label{width:100%}
    .voprosy_tz{margin-top:0}
    .powered{right:0;bottom:0}
    .powered span{border-radius:4px 0 0 0;font-size:12px}
}
@media screen and (max-width: 400px) {
    footer ul li{margin-bottom:15px}
    #idontknow, #iknow, footer ul li a, .blb{font-size:12px;}
    footer{padding-top:30px;}
    .bars, .closenav{border-right:0;}
    header .title{padding-right:0;padding-left:10px;}
    .language:before{display:none}
    .padd{padding:15px;}
    .btn{margin:3px}
    .noisegrad .title{padding-left:0;padding-right:0;}
    .column{width:32%;}
    .item{width:100%;margin:15px 0 0;}
    .bannerok{padding-right:0;}
}
@media screen and (max-width: 360px) {
    .inok, .bars, .closenav{height:45px;line-height:45px;width:42px}
    .logotype{height:45px;padding:3px 0;}
    nav{top:45px}
    ol.order li:before{right:0;bottom:-10px;}
    ol.order li{width:100%;padding:20px;}
    .cena{width:110px;height:125px;padding-top:20px;font-size:20px;}
    .garudas > div{padding-left:10px;padding-right:10px;}
    .bars:before{text-transform: lowercase;bottom:3px}
}
@media screen and (max-height: 500px) {
    .mainmain{height:500px;}
}