* { margin: 0; padding: 0; font-family: Geometria, sans-serif; }

.clearfix { clear: both; }
body { font-size: 14px; }

h1, h2, h3, .p30, .button { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; }

a { color: black; text-decoration: none; }

/* Кнопки наверх и трубка */

.UpBox {
  background: 0px 0px url(/i/2021/Up.svg) no-repeat; background-size: 100%;
  height: 110px; width: 110px; /* 7vw both */
  cursor: pointer; opacity: 1; position: fixed; bottom: 197px; right: 7vw; /* bottom: 5vh; left: 7vw;  */
  display: none;
}

.CallBox {
  background: 0px 0px url(/i/2021/Phone.svg) no-repeat; background-size: 100%;
  height: 110px; width: 110px; /* 7vw both */
  cursor: pointer; opacity: 1; position: fixed; bottom: 58px; right: 7vw; /* bottom: 5vh; right: 7vw; */
}

.back-box { margin-bottom: 5%; margin-top: 8%; }
.back-box a {display: block; width: fit-content;}
.back-box img.back-arrow { position: relative; top: 5px; margin-right: 10px; }

.back-box.scalable p.p30 { font-size: 1.563vw; }
.back-box.scalable img.back-arrow { width: 3.594vw; top: 0.26vw; margin-right: 0.521vw;  }


.p30 { font-size: 30px; display: inline; }

@media (max-width: 1024px) {
  .UpBox { height: 55px; width: 55px; left: 7vw; bottom: 5vh;  }
  .CallBox { height: 55px; width: 55px; bottom: 5vh; right: 7vw; }
  .CallBox, .UpBox { z-index: ; }
}

/* Всплывающие окна */

.popup_body { display:none; background:#000; left:0; top:0; position: fixed; width:100%; height:100%; opacity:0.5; z-index: 10000;}

/* CallBox */

.CallBoxPopup {
  position: fixed;
  width: 1080px; 
  height: 770px;
  top: 50%;
  left: 50%;
  margin-top: -385px; /* Negative half of height. */
  margin-left: -540px; /* Negative half of width. */

  box-shadow:4px 4px 30px #130507;
  background-color: #fff;
  z-index: 10020;
  display: none;

  text-align: center;
}

.CallBoxPopup div.closeBox {
  overflow: auto;
  margin-top: 70px;
  margin-bottom: 103px;
}

.CallBoxPopup a.close {
  position: relative;
  float: right;
  right: 59px;
  cursor: pointer;
}

.CallBoxPopup a.close img {
  width: 71px;
  height: 71px;
}

.CallBoxPopup button {
  display: block;
  width: 955px;
  height: 157px;
  margin: auto;
  background-color: #41ab3d;
  color: #fff;
  border: none;
  border-radius: 999px;
  margin-bottom: 50px;
  font-size: 70px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.CallBoxPopup button.WA { text-align: left; padding-left: 60px;}
.CallBoxPopup button.WA img { height: 110px; width: 110px; position: relative;  vertical-align: middle; margin-right: 30px; }

@media screen and (max-width: 1200px) {
  .CallBoxPopup {
    width: 90vw;
    height: calc(90vw * (770/1080));
    margin-top: calc(-45vw * (770/1080)); /* Negative half of height. */
    margin-left: -45vw; /* Negative half of width. */
    top: 50vh;
    left: 50vw;
  }

  .CallBoxPopup div.closeBox { margin-top: 6.5vw; margin-bottom: 8vw; }
  .CallBoxPopup a.close img { width: 6.5vw; height: 6.5vw; }
  .CallBoxPopup a.close { right: 5vw; }
  .CallBoxPopup button { width: 90%; height: 20%; margin-bottom: 5vw; font-size: 6vw;}
  .CallBoxPopup button.WA { padding-left: 5vw; }
  .CallBoxPopup button.WA img { height: 9vw; width: 9vw; margin-right: 2.8vw; }

}

/* ----- CallBack / OZ popup ----- */

.CallBackPopup, .OnlineZapisPopup {
 

  position: fixed;

  width: 76vw; /* 96vw */
  height: 90vh; /* 90vh */
  top: 50%;
  left: 50%;
  margin-top: -45vh; /* Negative half of height. -45vh */
  margin-left: -38vw; /* Negative half of width. -48vw */

  box-shadow:4px 4px 30px #130507;
  background-color: #fff;
  z-index: 10020;
  display: none;

   overflow-y: auto;
}

.CallBackPopup div.marginer, .OnlineZapisPopup div.marginer {
  margin: 3.75vw;  /* 5vw */
}


/* --------------- Форма онлайн запись / заказать звонок ------------------- */

div.titleBox { position: relative; display: flex; }
h1.zapis { border: none; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; font-size: 52px;/*70px*/ display: inline-block; margin-bottom: 3%; }
img.close { margin-left: auto; align-self: flex-start;
  margin-top: 10px; height: 52px; width: 52px; /*70px*/
  cursor: pointer; padding-left: 10px;
}

input, textarea {
  font-size: 33px;
  border-radius: 20px;
  background-color: #eaeaea;
  border: none;
  padding-left: 37.5px;
  padding-right: 37.5px;
  margin-bottom: 30px;
  min-width: 300px;
}

input { height: 84px; }

.zapisFlex > .firstRow { display: -webkit-box; display: -ms-flexbox; display: flex; }
.zapisFlex > .firstRow > input { width: 100%; }
.zapisFlex > .firstRow > input.name { margin-right: 30px; }
.zapisFlex > .codeRow > input.Code { margin-right: 30px;}
.zapisFlex > .codeRow > div.code { margin-right: 30px; }
.zapisFlex > .codeRow > .agreement { display: -webkit-box; display: -ms-flexbox; display: flex; }

@media (max-width: 1279px) {
  .zapisFlex > .firstRow { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.zapisFlex > .firstRow > input.name { margin-right: 0px; }
}

.zapisFlex textarea { width: 100%; padding-top: 30px; height: 150px; }
.zapisFlex > .textAreaRow {display: -webkit-box;display: -ms-flexbox;display: flex;}
.zapisFlex > .codeRow { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.zapisFlex > .codeRow input { min-width: 210px; width: 7.5vw; }
.zapisFlex > .codeRow .code {
  display: inline-block;
  height: 84px;
  width: 285px;
  border-radius: 20px;
  background-color: #eaeaea;
  text-align: center;
  vertical-align: middle;
}

.zapisFlex > .codeRow .code button { display: none; }
.zapisFlex > .codeRow img { display: inline-block; width: 80%; }
.zapisFlex > input.submit {
  background-color: #41ab3d;
  color: #fff;
  font-size: 45px;
  font-weight: 800;
  border-radius: 42px;
  width: 600px;
  margin-top: 11.25px;
  cursor: pointer;
  text-transform: uppercase;
}

input::placeholder, textarea::placeholder { color: black; }

.codeRow img.tick { width: 57px; height: 47.25px; margin-right: 22.5px;}
.codeRow div.agreement { margin-bottom: 30px; }
.codeRow div.agreement span { word-wrap: all; font-size: 33px; }

@media (max-width: 1024px) {

  h1.zapis { font-size: 35px; margin-bottom: 25px; }
  img.close { margin-top: 5px; margin-right: 0px; height: 35px; width: 35px; padding-left: 5px;}
    input, textarea {
    font-size: 22px;
    border-radius: 13px;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 20px;
    min-width: 100px;
  }

  input { height: 56px; }

  /*.zapisFlex > .textAreaRow { display: none; } */
  .zapisFlex textarea { width: 100%; padding-top: 13px; height: 43px; }
  .zapisFlex > .codeRow { margin-bottom: 10px; }
  .zapisFlex > .codeRow input { width: 140px; min-width: 140px; }
  .zapisFlex > .codeRow .code { width: 190px; height: 56px; border-radius: 13px; min-width: 190px; margin-bottom: 20px;}
  .zapisFlex > .firstRow > input.name { margin-right: 0px; }
  .zapisFlex > .codeRow > input.Code { margin-right: 20px; /* width: 30%; */ }
  .zapisFlex > .codeRow > div.code { margin-right: 20px; margin-bottom: 30px; }

  .codeRow img.tick { width: 38px; height: 31px;  margin-right: 15px;}
  .codeRow div.agreement { margin-bottom: 5px; }
  .codeRow div.agreement span { font-size: 22px; margin-bottom: 15px;}

  .zapisFlex > input.submit {
    font-size: 30px;
    border-radius: 56px;
    width: 100%;
    margin-top: 0px;
    /* margin-bottom: 200px; */
  }


}

@media (max-width: 620px) {

/* ----- CallBack / OZ popup ----- Шире окно на мобильных */

  .CallBackPopup, .OnlineZapisPopup {
    width: 96vw; /* 96vw */
    margin-left: -48vw; /* Negative half of width. -48vw */
  }

}

@media (max-width: 480px) {
  .zapisFlex > .codeRow > input.Code { margin-right: 3vw; padding-right: 7px; padding-left: 7px; }
  .zapisFlex > .codeRow .code { width: 150px; height: 56px; border-radius: 13px;  margin-bottom: 20px; min-width: unset; }
  .zapisFlex > .codeRow > div.code { margin-right: 0px; }
}

@media (max-width: 372px) {
  .zapisFlex > input.submit { font-size: 25px; }
  h1.zapis { font-size: 30px; }
}