@font-face {
  font-family: "18VAGRoundedM";
  src: url("static/fonts/18VAGRoundedMBold.ttf") format("truetype");
}

@font-face {
  font-family: "MuseoSansCyrl";
  src: url("static/fonts/MuseoSansCyrl.otf") format("opentype");
}

* {
  font-family: "MuseoSansCyrl", sans-serif;
  -webkit-overflow-scrolling: touch;    
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: "MuseoSansCyrl", sans-serif;
  position: relative;
}

button {
  cursor: pointer;
  outline: none;
}

input {
  outline: none;
  font-family: "MuseoSansCyrl";
  font-size: 16px;
  font-weight: 500;
  /*line-height: 3.13;*/
  text-align: left;
  color: #5e5e5e;
}

form {
  margin: 0;
}

a {
  text-decoration: none !important;
  cursor: pointer;
  /*user-select: none;*/
}
/*a:visited{*/
  /*color:inherit !important;*/
/*}*/

.phone{
  text-decoration: none !important;
}

section {
  display: block;
  width: 100%;
  text-align: center;
}
.copy{
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;          /* Likely future */
  z-index: 100;
}

.black {
  color: #222222 !important;
}

.white, .white a {
  color: #ffffff !important;
}


.grey {
  color: #8c8c8c;
}

.whiteBackground {
  background-color: white !important;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  min-width: 340px;
}

header {
  cursor: default;
  width: 100%;
  height: 108px;
  position: relative;
  display: block;
  white-space: nowrap;
  user-select: none;
}

.logo {
  display: inline-block;
  font-family: "18VAGRoundedM" !important;
  font-size: 40px;
  font-weight: bold;
  line-height: 108px;
  text-align: left;
  color: #1e80b6;
  vertical-align: middle;
  text-align: center;
  height: 100%;
}

.logo>span {
  color: #8c8c8c;
}

header>.logo {
  position: absolute;
  left: 8.5%;
}

.social {
  display: inline-block;
  margin: auto;
  vertical-align: middle;
  position: relative;
  text-align: left;
  position: absolute;
  left: calc(8.5% + 40px + 200px);
  top: 50%;
  transform: translate(0, -50%);
}

.social>a>img {
  vertical-align: middle;
  margin-right: 5px;
}

.social>a#vk>img {
  width: 19px;
  height: 11px;
}

.social>a#tw>img {
  width: 19px;
  height: 15px;
}

.social>a#fb>img {
  width: 11px;
  height: 19px;
}

.social>a#ig>img {
  width: 19px;
  height: 19px;
}

header>.phone {
  font-size: 16px;
  font-weight: 900;
  line-height: 108px;
  letter-spacing: 0.4px;
  text-align: left;
  color: #1e80b6 !important;
  display: block;
  vertical-align: middle;
  position: absolute;
  right: calc(0px + 8.4% + 30px);
  text-decoration: none;
  user-select: text;
  cursor: text;
  z-index: 99;
}

header>.phone>a{
  color: #1e80b6 !important;
}

header>.phone>img {
  display: inline-block;
  height: 27px;
  vertical-align: middle;
  margin-right: 12px;
}

header>.phone>.text {
  text-align: center;
  color: #8c8c8c;
  margin-left: 28px;
  cursor: default;
  user-select: none;
}

.call_button {
  font-size: 16px;
  font-weight: 900;
  line-height: 50px;
  letter-spacing: 0.4px;
  text-align: center;
  color: #ffffff;
  display: inline-block;
  width: 216px;
  height: 50px;
  border-radius: 3px;
  background-color: #1e80b6;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  right: 8.4%;
  top: 50%;
  transform: translate(0, -50%);
}

.slider_1 {
  height: 60vw;
  max-height: 865px;
  min-height: 300px;
  width: 100%;
  display: block;
  position: relative;
  background-image: url('static/img/slider_2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
  background-position: center bottom;
}

.slider_1 .top {
  display: block;
  text-align: center;
  height: 52px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  white-space: nowrap;
  position: relative;
  color: white;
}

.slider_1 .top .inner {
  display: inline-block;
  position: relative;
  width: 100%;
}

.slider_1 .top span {
  margin: 0 4%;
  user-select: none;
  font-family: "MuseoSansCyrl";
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-align: center;
  color: #ffffff;
  display: inline-block;
}

.slider_1 .top span:first-child {
  margin-left: 0;
}

.slider_1 .top span:last-child {
  margin-right: 0;
}

.slider_1 .top .divider {
  display: inline-block;
  position: relative;
}

.slider_1 .top a {
  color: inherit;
  display: inline-block;
  line-height: 52px;
}

.slider_1 .top a:hover {
  color: #1e80b6;
}

.slider_1 .title {
  display: inline-block;
  /*float: left;*/
  position: relative;
  margin-left: 120px;
  margin-top: 80px;
  font-family: "MuseoSansCyrl";
  font-size: 40px;
  font-weight: bold;
  line-height: 1.25;
  text-align: left;
  color: #ffffff;
}

.slider_1 .desc {
  font-family: MuseoSansCyrl;
  margin-left: 120px;
  margin-top: 7px;
  font-size: 16px;
  /*font-weight: bold;*/
  /*line-height: 3.57;*/
  text-align: left;
  color: #ffffff;
  display: block;
}

.slider_1 .subtitle {
  font-family: MuseoSansCyrl;
  margin-left: 120px;
  margin-top: 27px;
  font-size: 14px;
  font-weight: bold;
  line-height: 3.57;
  text-align: left;
  color: #ffffff;
  display: block;
}

.slider_1 .subtitle span {
  border: solid 2px #ffffff;
  padding: 2px;
  margin-left: 5px;
}

.slider_1 .phone {
  display: block;
  margin-top: 57px;
  font-size: 40px;
  text-align: center;
  vertical-align: center;
  color: #ffffff !important;;
}


.slider_1 .phone img {
  margin-right: 0;
  bottom: -5px;
  position: relative;
}


.form_1 {
  position: absolute;
  display: block;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 74%;
  min-width: 780px;
  height: 80px;
  border-radius: 8px;
  background-color: #f8f8f7;
  white-space: nowrap;
  z-index: 10;
}

.form_1 > * {
  position: relative;
  display: inline-block;
  width: 24%;
  height: 49%;
  top: 20px;
  text-align: center;
  line-height: 40px;
}

.form_1 .form_title {
  font-family: MuseoSansCyrl;
  font-size: 16px;
  font-weight: 900;
  color: #1e80b6;
}

.form_1 button {
  border-radius: 4px;
  /*top: 18px;*/
  height: 50.5%;
  height: 41px;
  border: 1px solid #99c45a;
  background-color: #99c45a;
  color: white;
  line-height: 40px;
}

.input {
  position: relative;
  display: inline-block;
  width: 24%;
  height: 40px;
  white-space: nowrap;
  border-radius: 4px;
  background-color: #ffffff;
  border: solid 1px #d9d9d9;
}

.input .before {
  display: inline-block;
  position: relative;
  width: calc(15% - 1px);
  height: 100%;
  border-right: solid 1px #d9d9d9;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: white;
}

.before.name {
  background-repeat: no-repeat;
  background-image: url('static/icons/user.png');
  background-position: center;
  background-size: 40% 50%;
  background-size: 18px 20px !important;
  position: absolute;
  left: 0;
  top: 0%;
}

.before.phone {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #5e5e5e;
  position: absolute;
  left: 0;
  top: 0%;
  line-height: 40px;
  /*vertical-align: middle;*/
}

.input input {
  border: none;
  background-color: none;
  width: calc(75% - 1px);
  height: 100%;
  margin-left: 14%;
  line-height: 40px;
}

.section_down {
  z-index: 100;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ffffff;
  background-image: url('static/icons/down.png');
  border: solid 1px #dcdcdc;
  font-weight: 900;
  background-repeat: no-repeat;
  background-size: 18px 10px;
  background-position: center;
}

.how_much {
  display: block;
  position: relative;
  height: 600px;
  background-color: #f8f8f8;
  text-align: center;
  white-space: nowrap;
}

.how_much_inner {
  width: 85%;
  display: inline-block;
  position: relative;
}

.section_title {
  margin-top: 85px;
  font-size: 41px;
  font-weight: 500;
  line-height: 1.22;
  text-align: center;
  color: #222222;
}

.how_much_separator {
  width: 48px;
  height: 3px;
  background-color: #1e80b6;
  display: inline-block;
  margin: 30px 0;
}

.how_much_tiles {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.how_much_tile {
  position: relative;
  display: inline-block;
  width: 30%;
  height: 334px;
  border-radius: 6px;
  background-color: #ffffff;
  border: solid 1px #d9d9d9;
  text-align: center;
  margin-right: 3%;
}

.how_much_tile:last-child {
  margin-right: 0;
}

.how_much_tile img {
  height: 220px;
  margin-top: 20px;
  /*margin-bottom: 20px;*/
  max-width: 100%;
  display: inline-block;
}

.how_much_price {
  font-size: 16px;
  /*font-weight: 900;*/
  /*line-height: 1.25;*/
  text-align: center;
  color: #222222;
  /*margin-top: 45px;*/
}

.how_much_description {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: #222222;
  /*margin-top: 5px;*/
}

.work {
  height: 514px;
  background-color: #1e80b6;
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
}

.work_inner {
  /*width: 75%;*/
  text-align: center;
  display: inline-block;
}

.tiles {
  display: inline-block;
  width: 100%;
}

.work_tile {
  border: 2px solid #009BC8;
  border-radius: 50%;
  margin: 0 30px;
  position: relative;
  display: inline-block;
  width: 143px;
  height: 143px;
  color: white;
  font-family: MuseoSansCyrl;
  font-size: 24px;
  font-weight: 500;
  line-height: 2.08;
  text-align: center;
  color: #ffffff;
}

.work_tile>img {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.work_tile>span {
  position: absolute;
  display: block;
  white-space: nowrap;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: -65px;
}

.work_tile:first-child {
  margin-left: 0;
}

.work_tile:last-child {
  margin-right: 0;
}

.work_tile_separator {
  margin-right: 30px;
  position: relative;
  display: inline-block;
  width: 72px;
  height: 20px;
  white-space: nowrap;
  height: 143px;
  vertical-align: top;
}

.work_tile_separator span {
  border-radius: 50%;
  width: 19px;
  height: 19px;
  opacity: 0.2;
  background-color: #ffffff;
  border: solid 2px #ffffff;
  margin-right: 17px;
  position: relative;
  display: inline-block;
  top: 50%;
  transform: translate(0, -50%);
  /*line-height: 143px;*/
  t
}

.work_tile_separator span:nth-child(2) {
  opacity: 0.6;
}

.work_tile_separator span:nth-child(3) {
  opacity: 1;
  margin-right: 0;
}

.work .form_1 {
  bottom: -40px;
}

.work .form_1 .form_title {
  color: #383838;
}

.best {
  height: 700px;
}

.best_inner {
  width: 75%;
  position: relative;
  display: inline-block;
}

.best_tile {
  position: relative;
  display: inline-block;
  width: 23%;
  margin-bottom: 70px;
  margin-right: 11%;
  vertical-align: top;
}

.best_tile:nth-child(3n) {
  margin-right: 0;
}

.best_tile img {
  margin-bottom: 50px;
}

.best_tile span {
  font-size: 24.1px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: #000000;
}

footer {
  display: block;
  height: 300px;
  position: relative;
  width: 100%;
  background-color: #383838;
}

footer img.iphone {
  position: absolute;
  left: 10%;
  bottom: 0;
}

footer .content {
  margin-left: calc(10% + 175px + 10px);
  width: 66%;
  margin-right: 8%;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0);
  max-height: 99% margin-top: 40px;
}

footer .title {
  margin-top: 40px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.88;
  text-align: left;
  color: #8c8c8c;
}

footer .like_header {
  white-space: nowrap;
  border-bottom: 1px solid #4c4c4c;
  height: 90px;
  position: relative;
}

footer .like_header .logo {
  font-size: 32px;
  position: absolute;
  left: 0;
  bottom: 23px;
}

footer .like_header .phone {
  position: absolute;
  white-space: nowrap;
  left: 380px;
  line-height: 90px;
  bottom: 12px;
  user-select: text;
  cursor: text;
}

footer .like_header .phone>img {
  position: relative;
  top: 8px;
  margin-right: 3px;
  margin-left: 5px;
}

footer .like_header .phone>span {
  /*margin-bottom: 10px;*/
  margin-left: 29px;
}

footer .like_header .call_button {
  right: 0;
  bottom: 28px;
  top: initial;
  transform: initial;
}

footer .social {
  position: absolute;
  bottom: -120px;
  right: 0;
  left: initial;
  top: initial;
}

footer .social a {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: #595959;
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

footer .social a:last-child {
  margin-right: 0;
}

footer .social a>img {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

footer .disclaimer {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.88;
  text-align: left;
  color: #d9d9d9;
  margin-top: 27px;
}

footer .contacts {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 2.31;
  text-align: left;
  color: #6f6f6f;
}

footer .contacts a {
  color: #6f6f6f !important;
  text-decoration: none !important;
}

@media all and (max-width: 1400px) {
  .best_tile {
    position: relative;
    display: inline-block;
    width: 27%;
    margin-bottom: 70px;
    margin-right: 7%;
    vertical-align: top;
  }
  .like_header .phone span {
    display: none;
  }
}

@media all and (min-width: 1300px) {
  body > div.wrapper.remodal-bg.remodal-is-closed > main > section.slider_1 > div.title {
    margin-top: 30px;
  }
  .slider_1 {
    background-position-y: 50%;
  }
  #form_1 > div:nth-child(2) > span {
    background-size: 50% 40%;
  }
}

@media all and (max-width: 1200px) {
  header>.phone>.text {
    display: none;
  }
  .how_much_tile img {
    height: 150px;
    margin-top: 50px;
    max-width: 90%;
  }
  .how_much_description {
    font-size: 20px;
  }
  .work_tile_separator {
    display: none;
  }
  .work_tile {
    margin: 0 20px;
  }
  .like_header .phone {
    left: 200px !important;
  }
  #form_1 > div:nth-child(2) > span {
    background-size: 50% 40%;
  }
}

@media all and (max-width: 1100px) {
  .best_tile span {
    font-size: 22px;
  }
  #form_1 > div:nth-child(2) > span {
    background-size: 50% 40%;
  }
}

@media all and (max-width: 1100px) and (min-width: 760px) {
  .form_1 > * {
    width: 32%;
  }
  .form_1 {
    padding-left: 2%;
  }
  .form_1 .form_title {
    display: none;
  }
}

@media all and (max-width: 1000px) {
  header>.logo {
    font-size: 40px;
    left: 3%;
  }
  header>.call_button {
    right: 3%;
  }
  header>.social {
    left: calc(8.5% + 30px + 180px);
  }
  header>.phone {
    display: none;
  }
  .slider_1 .phone {
    display: block;
  }
  .slider_1 .title {
    font-size: 30px;
  }
  #form_1 > div:nth-child(2) > span {
    background-size: 50% 40%;
  }
  .how_much_tile {
    height: 300px;
  }
  .how_much_tile img {
    height: 150px;
    margin-top: 50px;
    max-width: 90%;
  }
  .how_much_description {
    font-size: 17px;
  }
  .best_tile span {
    font-size: 18px;
  }
  footer .content {
    margin-right: 0;
  }
}

@media all and (max-width: 900px) {
  header>.social {
    display: none;
  }
  header>.phone {
    display: none;
  }
  .slider_1 .phone {
    display: block;
  }
  .how_much_tile {
    height: 290px;
  }
  .like_header .phone {
    display: none;
    left: 140px !important;
  }
  .form_1 {
    min-width: 750px;
  }
  #form_1 > div:nth-child(2) > span {
    background-size: 50% 40%;
  }
  .how_much_price {
    font-size: 12px;
  }
  .how_much_description {
    font-size: 15px;
  }
  body > div.wrapper.remodal-bg.remodal-is-closed > footer > div > div.like_header > a.call_button {
    right: 10px;
  }
}

@media all and (max-width: 760px) {
  header {
    height: 50px;
  }
  header>.logo {
    left: 20px;
    font-size: 24px;
    line-height: 50px;
  }
  header>.call_button {
    display: none;
  }
  header>.phone {
    display: none;
    line-height: 50px;
    right: 20px;
  }
  .slider_1 .top {
    display: none;
  }
  .slider_1 .title {
    font-size: 24px;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
  }
  .slider_1 .subtitle {
    display: none;
  }
  .slider_1 .desc {
    display: none;
  }
  .slider_1 .phone {
  margin-top: 30px;
  font-size: 28px;
  }
  .slider_1 .form_1 {
    bottom: -125px;
  }
  .section_down {
    display: none;
  }
  .form_1 {
    z-index: 100;
    display: inline-block;
    white-space: normal;
    min-width: 300px;
    width: 300px;
    height: 240px;
    text-align: center;
  }
  .form_1>* {
    margin-left: 0;
    margin-right: 0;
    white-space: nowrap;
    width: 270px;
    height: 40px !important;
    margin-bottom: 10px;
  }
  .how_much_inner {
    margin-top: 40px;
  }
  .section_title {
    font-size: 24px;
  }
  .how_much_separator {
    display: none;
  }
  .how_much {
    height: auto;
  }
  .how_much_tiles {
    width: 300px;
    white-space: normal;
  }
  .how_much_tile {
    width: 290px;
    min-width: 290px;
    margin-bottom: 15px;
  }
  .work {
    height: auto;
    padding-bottom: 140px;
  }
  .work_inner .section_title {
    margin-top: 30px;
  }
  .work_inner>.tiles {
    width: 180px;
  }
  .work_tile {
    margin: 35px 0;
  }
  .work_tile>span {
    bottom: -50px;
  }
  .work .form_1 {
    bottom: -140px;
  }
  .best {
    height: auto;
  }
  .best .tiles {
    padding-top: 40px;
    width: 300px;
    white-space: normal;
  }
  .best_tile {
    width: 290px;
    min-width: 290px;
    margin-bottom: 30px;
  }
  .best_tile img {
    margin-bottom: 15px;
  }
  footer {
    height: auto;
  }
  footer .iphone {
    display: none;
  }
  footer {
    text-align: center;
  }
  footer .content {
    margin-left: 0%;
    width: 90%;
    display: inline-block;
  }
  footer .social {
    display: none;
  }
}

@media all and (max-width: 600px) {
  footer .call_button,
  footer .title {
    display: none;
  }
  footer .like_header {
    padding-top: 50px;
  }
  footer .like_header .phone {
    display: inline-block !important;
    right: 0px;
    left: auto !important;
    width: auto;
  }
  header > .phone { display: none; }
  header > .phone > img { display: none; }
  
  .slider_1 .phone {
  margin-top: 30px;
  font-size: 28px;
  }

}

@media screen and (device-aspect-ratio: 40/71) and (max-width: 320px) {
  .wrapper {
    width: 100vw;
    width: 320px;
    max-width: 100% max-width: 320px;
    min-width: 320px;
    overflow-x: hidden;
  }

  header .phone{
    line-height: 50px;
    right: 20px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-align: left;
    color: #1e80b6 !important;
    display: block;
    vertical-align: middle;
    position: absolute;
    text-decoration: none !important;
    user-select: text;
    cursor: text;
    z-index: 99;
  }
  header .phone img {
    margin-right: 0;
    bottom: 2px;
    position: relative;
  }
  #how_much > div > div.how_much_tiles {
    width: 100%;
  }
  #how_much > div > div.how_much_tiles > div {
    width: 90%;
    max-width: 90%;
    min-width: 90%;
    margin-right: 0;
  }
  #best > div > div.section_title {
    margin-top: 150px;
  }
  .best_inner {
    width: 100%;
    text-align: center;
  }
  .best .tiles {
    width: 100%;
    text-align: center;
  }
  .best .tiles .best_tile {
    width: 90%;
    min-width: 90%;
    margin-right: 0;
  }
  body > div.wrapper.remodal-bg.remodal-is-closed > footer > div > div.like_header {
    height: 60px;
  }
  body > div.wrapper.remodal-bg.remodal-is-closed > footer > div > div.like_header > .phone {
    line-height: 60px;
    bottom: auto;
    top: 0px;
    right: 2px;
    /*top: -15px;*/
  }
  .like_header .phone img {
    display: none;
  }
  body > div.wrapper.remodal-bg.remodal-is-closed > footer > div > div.like_header > a.logo {
    font-size: 24px;
  }
  body > div.wrapper.remodal-bg.remodal-is-closed > footer > div > div.contacts {
    text-align: center;
  }
}
