@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap');

.geo {font-family: "Geologica", sans-serif;}


.preloader {display: none !important}

.main__inner_title {display: flex; align-items: center; justify-content: center;}

.features__gallery__text.new {margin-bottom: -60px;}

.typed-cursor {display: none}
 div, button, span, p {box-sizing: border-box}
.header {top: 10px}
	
body {font-family: 'Gotham';}	
.menu__link {
    display: block;
    font-size: 14px;
    line-height: 120%;
    margin: 0px 6px; white-space: nowrap; padding: 10px 20px;
    }	
	
.contacts__icon {
    max-width: 26px;
    max-height: 40px;
}	
	
.contacts__text {
    margin-left: 8px;
    font-size: 14px; white-space: nowrap
}	
	
.contacts__link {
    text-decoration: none;
    margin: 0 10px;	 
}

.contacts__link svg {
    width: 24px; height: auto;
}
	
.header__inner {
    display: flex;
    justify-content: space-between;
    height: 70px;	
}	
	
.logo__img {
    display: block;
    width: 76px;
    margin-top: 8px;
    margin-right: 30px;
    height: auto;
}	

.features__menu__item{font-size: 20px; line-height: 130%; padding: 10px 20px} 


.main__title {
    font-size: 60px;
    line-height: 110%; text-align: center; font-family: 'Gotham';
}
.main__subtitle {
    font-size: 40px;
    line-height: 120%;
    margin-bottom: 15px;
    font-family: 'Gotham';
}
.main__slogan {
    font-size: 24px;
    line-height: 130%; text-align: center; display: block;
}

.smm__link__span {
    position: absolute;
    z-index: 99;
    width: 190px;
    height: 50px; border-radius: 25px; display: flex; align-items: center; font-size: 20px; justify-content: center;
    }

.smm__link {height: 45px; display: flex; align-items: center; width: 130px;}

.smm__link a {color: #fff; text-decoration: none}
.smm__link a .fa {color: #fff}
.logo__img__smm {
    max-height: 30px;
}

.smm__link i { display: flex; align-items: center;}

.btn_wrap {height: 50px; width:190px; background: #ffa500;}
.btn_wrap:hover span {
    -webkit-transform: translateX(-220px);
    transform: translateX(-220px);
}

.smm__link .l_tele {width: 24px; height: auto;}
.smm__link .l_wa {width: 24px; height: auto;}
.smm__link .l_vk {width: 24px; height: auto;}


 .interactive__message {font-size: 14px; text-align: left; line-height: 160%;}

.interactive__message pulse_1 stong {font-size: 22px; font-weight: 400}
.tablet {
    position: absolute;
    bottom: 28px;
    left: -28px;
    transform: scale(0.8);
}

.interactive__message {width: 500px;}
.interactive__inner {border: 0px solid red;}

.example__inner {  display: flex; align-items: flex-start; max-width: 1300px; margin: 0px auto;}
.example__left {  flex: 1 ; padding: 0px 20px;}
.example__right { flex: 1;  padding: 0px 10px 0 20px; }
.example__center {  width: 362px; min-width: 362px;}
.mock__up {
    position: relative;
    height: 600px;
    left: 0px;
    top: 0px; margin-top: -40px;
}
video.scenario__video {
    display: block;
    position: absolute;
    left: -4px;
    top: 0px;
}
.example__title__left {
     font-size: 28px; 
}
.example__title__right {
     margin-bottom: 55px;
    font-size: 24px;
}


element.style {
}
.example__menu__item {
    font-size: 20px; line-height: 120%; padding: 10px 20px;
}





.example__text__right {
    display: block;
    text-align: left;
    font-size: 13px;
    line-height: 140%;
}

.type {white-space: nowrap;} 


h2 {
    text-align: center;
    font-size: 40px !important; line-height: 120%; font-family: 'Gotham';
}

.accordion-container {padding: 0px 30px;}
.accordion-header {font-size: 16px; line-height: 120%; padding: 15px 20px; text-align: center; border-radius: 15px;}
.accordion-content p {font-size: 14px; line-height: 140%}
.accordion-item {  padding: 0px 20px 0 10px;}
.features__inner1 { overflow: hidden}
.common_wrapper {overflow: hidden}

.accordion_wrapper {display: flex; align-items: flex-start; padding: 0px 30px}
.acc_block {width: 50%; min-width: 50%; padding: 0px 5px}


.header__inner {
    background-color: rgba(66, 66, 66, 0.8);
    }

.footer {background: #201b0c; color: #fff; padding: 30px 30px; display: flex; align-items: center;}
.top_line_right {display: flex; width: 400px; min-width: 400px; position: relative;}
.top_line_right a {width: 24px; }
.top_line_right a img {max-width: 100%;}
.footer .top_line_right  { }
.copy {margin-bottom: 10px; opacity: 0.6}
.footer a.logo {margin-top: 0px;}
.footer a.logo img {width: 80px; height: auto;}
.footer .top_line_right a {display: flex; align-items: center; color: #fff; position: relative; width: 200px; text-decoration: none; opacity: 0.6}
.footer .top_line_right a:hover {text-decoration: none; opacity: 1}
.footer .top_line_right a img {width: 24px; min-width: 24px; height: auto; margin-right: 10px;}


.js-line {padding: 100px 0}

.owl-item .item{height:90px; padding: 10px; background: #383836; display: flex; align-items: center; justify-content: center; margin: 0px;}
.owl-carousel .owl-stage {display: flex;}
.owl-item .item img {width: auto; max-height: 70px; margin: 0px}






.top {background-repeat: no-repeat; background-size: cover; color: #fff; padding-top: 228px;  position: relative; overflow: hidden}

.top video {position: absolute;    left: 0px; top: 0px; width: auto; height: 100%;}	
.top_in {height: 1000px;  position: relative; z-index: 2 }
.top_in h1 span {display: block;}
.videomask {position: absolute;    left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2}

.contain {padding: 0px 90px;}

.smm__link__span {
    position: absolute;
    z-index: 99;
    width: 190px;
    height: 50px;
    border-radius: 20px;
    display: flex
;
    align-items: center;
    font-size: 20px;
    justify-content: center;
}

.btn_wrap {border-radius: 20px;}

.top_info h1 {font-size: 70px; font-weight: 700; margin-bottom: 42px}
.top_info p {font-size: 32px; line-height: 120%; margin-bottom: 60px}

a.calculate {background: #333333; border-radius: 20px; font-size: 18px; color: #fff; backdrop-filter: blur(30px); padding: 20px 67px; display: inline-flex; border: 1px solid #333333; text-decoration: none; box-shadow: 0 0 10px 0 orange;
}

.quize {padding: 140px 0; color: #fff;}

.quize ul {display: flex; align-items: flex-start; justify-content: center; padding: 0px 100px;}
.quize ul li {display: block; position: relative; display: flex; align-items: center; font-size: 18px; line-height: 120%; padding: 0px 0px 0px 35px; margin: 0px 40px}
.quize ul li img {position: absolute; left: 0px; top: 10px; width: 23px; height: auto; }

.answ {color: #F19C2F; font-size: 24px; line-height: 110%; margin-bottom: 32px; font-weight: 700}
.center {text-align: center;}

.quize .h2 {font-size: 60px; line-height: 100%; font-weight: 700; margin-bottom: 40px;}

.expert {width: 540px; min-width: 540px; height: 543px; border-radius: 30px; background: #000; position: relative; color: #fff; margin-right: 15px;}
.expert_in {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
.expert_in img {width: 100%; height: auto; position: absolute; left: 0px; top: 0px;}
.ex_comment {font-size: 18px; font-weight: 700; text-transform: uppercase; position: absolute; top: 30px; left: 23px;}
.expert_in .ex_text {position: absolute; bottom: 30px; font-size: 18px;  left: 23px; width: 90%; font-weight: 700}
.expert_in ul {margin-top: 5px; font-size: 15px; font-weight: 400; padding: 0px; display: block; }
.expert_in ul li {display: block; padding: 0px 0px 10px 10px; position: relative; margin: 0px; font-size: 15px;}
.expert_in ul li:after {position: absolute; left: 0px; top: 6px; border-radius: 50%; width: 5px; height: 5px; content: ''; background: #fff;}

.quiz_wrapper {padding: 30px 0; display: flex; align-items: flex-start;}

.quizes {height: 543px; position: relative; flex: 1; border-radius: 30px; background: #2D2920; padding: 43px 23px;}
.progress_bar {height: 38px; border: 1px solid #fff;  position: relative; border-radius: 15px; margin-bottom: 39px}
#pbar {border-radius: 15px; background: #333333; box-shadow: 0 0 20px 0 orange; -webkit-transition: all 0.3s; transition: all 0.3s; position: absolute; left: -1px; top: -1px; height: calc(100% + 2px)}
.progress_bar .inis {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: flex; z-index: 3; align-items: center; justify-content: center; font-size: 18px;}



.slide_title{font-weight: 700; text-transform: uppercase; text-align: center; color: #F19C2F; margin-bottom: 15px}
.slider_row {display: flex; margin: 0px -7px; flex-wrap: wrap}
.slider_row .col5 {width: 20%; min-width: 20%; display: block; position: relative; overflow: hidden; padding: 7px;}
.slider_row .col5 img {max-width: 100%; height: auto;}
.slider_row .col12 { width: 100%; min-width: 100%;}
.col3 {width: 33.33%; min-width: 33.33%; padding: 7px;}

.borders {display: block; border: 1px solid #fff; border-radius: 20px; padding: 10px;}




.slider_footer {display: flex; align-items: center; }
.slider_footer span {border: 1px solid #F19C2F; width: 32px; min-width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;}
.slider_footer input {position: absolute; left: -20px; opacity: 0}

.slider_footer input:checked~span {background: #F19C2F}

.finger {font-size: 15px; display: flex; align-items: center; flex-wrap: wrap; position: relative; padding-left: 50px;}
.finger img {width: 38px; min-width: 38px; margin-right: 5px; position: absolute; left: 0px; top: -1px;}
.finger   b {display: block; font-weight: 700; min-width: 100%}

.slide_footer{position: absolute; width: 100%; bottom: 40px; padding: 0px 23px; display: flex; align-items: center; box-sizing: border-box; left: 0px;}

.slide_footer_right {margin-left: auto; position: relative}
.slide_footer  button {height: 59px; background: #333333; border: transparent; width: 310px; border-radius: 20px; box-shadow: 0 0 10px 0 orange; color: #fff; font-size: 18px;  }

.slide_footer  button.submit{width: 100%}

.shadow {-webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer}
.shadow:hover {box-shadow: 0 0 20px 0 orange;}

.slide_footer_right .finger {position: absolute; left: 20px; top: -60px;}

.text_input {width: 100%; display: block; margin-bottom: 34px;}
.text_input input[type="text"] {display: block; width: 100%; border: 1px solid #fff; height: 46px; border-radius: 15px; background: transparent; outline: none; padding: 0px 38px; font-size: 16px; color: #fff}

.text_input b {font-size: 16px; display: block; font-weight: 400; margin-bottom: 14px;}

.text_input input::placeholder{color: #6a6a6a}

.text_check {position: relative; width: 100%; padding: 0px 0px 0px 35px;}
.text_check>span {width: 18px; height: 18px; border-radius: 2px; border: 1px solid #F19C2F; position: absolute; left: 0px; top: 0px; padding: 3px; display: flex; align-items: center; justify-content: center; }
.text_check>span>span {font-size: 10px; opacity: 0}
.text_check input:checked~span span {opacity: 1}
.text_check input {position: absolute; left: -20px; opacity: 0}
.text_check a {color: #fff;}


.quize .expert_in, .quize .slide { display: none; -webkit-transition: all 0.8s; transition: all 0.8s;}
.quize .expert_in.active, .quize .slide.active {display: block; } 

 
.slides_alert {position: absolute; left: 0px; width: 100%; top: 100px; padding: 30px; color: #fff; text-align: center; background: red; height: auto; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 4; opacity: 0; height: 0px; overflow: hidden; visibility: hidden}
.slides_alert.active {opacity: 1; height: auto; visibility: visible}

.partnership {padding: 80px 0; color: #fff}
.part_container   {
    display: flex; align-items: flex-start; margin: 0px auto;
    padding: 0px 30px;
}

.row {display: flex; flex-wrap: wrap; margin: 0px; flex: 1 }
.row .col-6 {width: 50%; min-width: 50%}
.worker {max-width: 100%; display: block; height: auto}

.part_info ul {display: block; background: #323232; border-radius: 20px; padding: 40px; font-size: 22px;}
.part_info ul li {display: block; padding: 0px 0px 15px 50px; position: relative}
.part_info ul li:after {width: 23px; height: 23px; position: absolute; left: 0px; top: 0px; content: ''; background-image: url(img/ck.svg); background-repeat: no-repeat}

.part_info h2 {font-size: 55px; text-align: left; margin-bottom: 20px;}
.part_info p {font-size: 19px; color: #F19C2F; text-transform: uppercase; margin-bottom: 30px;}
.part_info {padding: 0px 20px 0px 20px}
.part_img {padding: 0px 20px 0px 30px}



.tablet_new {position: relative;   padding: 10px;   z-index: 2; height: auto; margin-bottom: 30px; max-width: 600px; margin: -30px auto 0px auto; position: absolute; left: 79px; bottom: 79px}
.tablet_buttons {  width: 47%; position: absolute; right: 25px; top: 55px; display: flex; flex-wrap: wrap;  }
.tablet_buttons_col {width: 33.33%; min-width: 33.33%; border: red; padding: 3px; }
.tablet_buttons_col img {width: 100%; height: auto; }

.tablet_st {width: 100%; height: auto;}
.tablet_back {border: 1px solid green}


.inti_but {border: transparent; width: 100%; background: transparent; line-height: 0px; position: relative; padding: 0px; margin: 0px;    }
.inti_but img {margin: 0px; padding: 0px; }
.inti_but span {display: block; top: 0px; left: 0px; z-index: 2; width: 100%; height: 100%; border: 2px solid #3a3a3a; border-radius: 4px; position: absolute; box-sizing: border-box; display: block;  
}
.inti_but.for_click span {border-color:#634819}
.inti_but.active span{border-color: #DC9721}

.expert_in .ex_text {  background: linear-gradient(360deg, rgba(0, 0, 0, 0.79) 0%, rgba(0, 0, 0, 0.62) 49.8%, rgba(0, 0, 0, 0) 100%);}



 @media (min-width: 1200px) and (max-width: 1600px)
 {
	 
.top { padding-top: 128px; position: relative; overflow: hidden}
.top video {position: absolute;    left: 0px; top: 0px; width: auto; height: 100%}	 
.top_info h1 {font-size: 50px; font-weight: 700; margin-bottom: 42px}	 
	 
.top_in {height: 600px; position: relative; z-index: 2}	 
.top_info p {font-size: 26px; line-height: 120%; margin-bottom: 60px}
	 
.quize .h2 {
    font-size: 50px;
      margin-bottom: 30px;
}

.quize ul li {
    font-size: 12px;
    line-height: 120%;
    padding: 0px 0px 5px 15px;
    margin: 0px 20px;
}
.quize ul.liner li {padding-left: 30px}
.quize ul li img {
    top: 5px;
    }
 
 .quize ul {padding: 0px 0px;}

.expert {
    width: 400px;
    min-width: 400px;
    height: 369px; overflow: hidden
     
}

.quizes {
    height: 369px;
    position: relative;
    flex: 1;
    border-radius: 30px;
    background: #2D2920;
    padding: 33px 23px;
}
.progress_bar {
    height: 30px; margin-bottom: 20px;}

.progress_bar .inis {font-size: 15px;}

.ex_comment {font-size: 15px}

.expert_in .ex_text {bottom: 0px;}

.part_info ul {
    display: block;
    background: #323232;
    border-radius: 20px;
    padding: 20px;
    font-size: 16px;
}

.part_info ul li {
    display: block;
    padding: 0px 0px 10px 30px; font-size: 16px;
    position: relative;
}

.part_info ul li:after {
    width: 16px; margin-top: 5px;
    height: 16px; background-size: 16px auto;}

.part_info h2 {
    font-size: 35px !important;
    text-align: left;
    margin-bottom: 20px;
}
.part_info p {font-size: 16px;}

.part_img {height: 100%;  border-radius: 20px; overflow: hidden; position: relative;}
.part_img img {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; object-fit: cover}

.slide_footer_right .finger {left: 0px}

.slider_footer span {
    width: 20px;
    min-width: 20px;
    height: 20px; 
}
.slider_footer {font-size: 13px;}
.expert_in .ex_text {font-size: 14px; padding: 10px 20px;   left: 0px; width: 100%; background: linear-gradient(360deg, rgba(0, 0, 0, 0.79) 0%, rgba(0, 0, 0, 0.62) 49.8%, rgba(0, 0, 0, 0) 100%);}
.expert_in ul {font-size: 14px;}	 

.slide_footer button {
    width: 290px; height: 40px;}

.slide_footer {bottom: 20px;}
.borders {
    padding: 7px; 
}


.slide_title {
   font-size: 16px;
}
.text_input {
    margin-bottom: 14px;
}
.text_input input[type="text"] {height: 36px; padding: 0px 10px; font-size: 14px;}
.text_input b {
    font-size: 14px;
    display: block;
    font-weight: 400;
    margin-bottom: 10px;
}
.text_input {font-size: 12px;}
.text_check>span {
    width: 14px;
    height: 14px;}	 

.example__text__right {
    display: block;
    text-align: left;
    font-size: 16px;
    line-height: 140%;
}

.menu__link {
    display: block;
    font-size: 16px;
}

.contacts__text {
    font-size: 16px;
    
}
.tablet2 {
    position: absolute;
    bottom: 28px;
    left: 28px;
    transform: scale(1);  
}
    .tablet {
        position: absolute;
        bottom: 28px;
        left: -28px;
        transform: scale(0.8);
    }
.interactive__message {
    font-size: 16px;
    text-align: left;
    line-height: 160%;
}

.tablet_new {
    max-width: 400px;
    margin: -30px auto 0px auto;
         left: 79px;
    bottom: 79px;
}





}

 
@media (min-width: 768px) and (max-width: 991px) {

}

 
@media (max-width: 767px) {

}
 
 
 
 
 
b.open_modal {text-decoration: underline; cursor: pointer; font-weight: 400} 
 
.mymodal {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;   background: rgba(0,0,0,0.8); z-index: 100; display: none; align-items: center; justify-content: center; z-index: 2000; }
.mymodal.active {display: flex;}
.modal_body {box-shadow: 0 0 10px 0 orange; padding: 30px; background: #000;    color: #fff; border-radius: 20px; min-height: 200px; width: 100%;   max-width: 800px; position: relative; overflow-x: hidden }

.modal_close {position: absolute; transform: rotate(45deg); right: 10px; top: 0px; border: transparent; background: transparent; font-size: 40px; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 40px; font-weight: 100}

.modal_text {position: relative; height: 100%; max-height: 500px; overflow-y: auto; padding-top: 30px  }

.modal_text a {color: #fff}
.leload svg {width: 32px; height: 32px; -webkit-transition: all 0.3s; transition: all 0.3s; transform: rotate(3000 deg) }
.leload svg path {fill:#fff; }


@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.leload svg {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}



.interactive__message {right: 64px; bottom:44px; background: rgba(50, 50, 50, 0.8); border-radius: 20px; font-size: 20px; line-height: 100%; font-weight: 200;
}

.andrey {
    display: block;
    position: absolute;
    z-index: 80;
    top: auto;
    left: auto;
    right: 100px; bottom: 0px;
    max-width: 29%;
}


::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #333;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.t_masks {background: linear-gradient(360deg, rgba(0, 0, 0, 0.79) 0%, rgba(0, 0, 0, 0.62) 49.8%, rgba(0, 0, 0, 0) 100%);
}




#top_thanks {background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; color: #fff;}
#top_thanks .contain {position: relative; z-index: 2; padding: 100px 0}

.thank_message {background: rgba(50, 50, 50, 0.8); margin: 0px auto; border-radius: 20px; padding: 30px; max-width: 600px; text-align: center; }
.thank_message .copy {color: #fff;  padding-top: 50px; font-size: 12px;}
.center_logo {text-align: center; margin-bottom: 30px; text-align: center;}
.center_logo .logo {width: 70px; margin: 0px auto; height: auto; margin-bottom: 0px;}
.center_logo .logo img {width: 100%;}

.thanks_social {display: flex; align-items: center; justify-content: center; padding: 40px 0}
.thanks_social a {color: #fff; display: flex; align-items: center; margin: 0px 20px; font-size: 12px; text-decoration: none}
.thanks_social a img {margin-right: 5px; width: 24px; min-width: 24px;}
.thanks_social a:hover {opacity: 0.6}


#top_thanks .calculate {height: 45px; font-size: 14px; display: inline-flex; align-items: center;}
.s_mesage {font-weight: 700}

.s_mesage p {margin-bottom: 10px; font-size: 16px;}