@charset 'UTF-8';

.calc {
  padding-top: 66px;
  padding-bottom: 123px;
  background: url(../images/pattern.jpg) center center;
}

.top__calc {
  margin-bottom: 67px;
  overflow: hidden;
}

.calc__title {
  margin: 0 0 50px;
}

.calc__block {
  height: 407px;
  margin: 0 -67px;
  background: #FFFFFF;
  border-radius: 4px;
}

.calc__left {
  width: 336px;
  height: 100%;
  padding: 60px 39px 60px 67px;
  background: #007FD5;
  border-radius: 2px 0 0 2px;
}

.calc__right {
  width: calc(100% - 336px);
}

.calc__row {
  margin: 0 0 15px;
  -webkit-box-align: center;
  align-items: center;
  font-size: 16px;
  line-height: 1.3;
  color: #FFFFFF;
}

.calc__input {
  width: 56px;
  height: 35px;
  margin-left: auto;
  padding: 3px 7px 0;
  font-size: 14px;
  text-align: right;
}

.calc__btn {
  position: relative;
  margin-top: 43px;
  width: 100%;
  height: 44px;
}

.calc__btn:before {
  position: absolute;
  right: calc(-100% - 17px);
  content: '';
  width: 246px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg width='246' height='16' viewBox='0 0 246 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M245.707 8.70711C246.098 8.31658 246.098 7.68342 245.707 7.29289L239.343 0.928932C238.953 0.538408 238.319 0.538408 237.929 0.928932C237.538 1.31946 237.538 1.95262 237.929 2.34315L243.586 8L237.929 13.6569C237.538 14.0474 237.538 14.6805 237.929 15.0711C238.319 15.4616 238.953 15.4616 239.343 15.0711L245.707 8.70711ZM0 9L245 9V7L0 7L0 9Z' fill='%230070BB'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
}

.calc__names {
  padding: 57px 13px 0 34px;
}

.calc__name {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: end;
  justify-content: flex-end;
  height: 45px;
  font-size: 15px;
  line-height: 1;
  text-align: right;
  font-weight: 700;
}

.calc__name:not(:last-child) {
  border-bottom: 1px solid #EBECEC;
}

.calc__tarif {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  width: 211px;
  margin: -23px 9px 0;
  padding: 37px 16px 28px 19px;
  background: #FBFBFB;
  box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.11);
  border-radius: 2px;
}

.calc__tarif-title {
  margin: 0 0 17px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: #0070BB;
}

.calc__list {
  margin: 0 0 27px;
}

.calc__char {
  min-height: 45px;
  width: 100%;
  padding: 0 0 0 15px;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  color: #000000;
}

.calc__char:not(:last-child) {
  border-bottom: 1px solid #EBECEC;
}

.calc__price {
  margin: auto 0 12px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: #0070BB;
}

.calc__text {
  display: block;
  font-size: 18px;
  line-height: 1;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
  color: #000000;
}

.calc__oldprice {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: #787878;
}

.calc__buy {
  display: -webkit-box;
  display: flex;
  width: 151px;
  height: 43px;
  margin: 0 auto;
  line-height: 1;
}

.tooltip {
  display: inline-block;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  padding-top: 3px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  text-align: center;
  border: none;
  background: #EBECEC;
  border-radius: 50%;
  vertical-align: text-bottom;
  cursor: pointer;
}

/* Add this attribute to the element that needs a tooltip */

[data-tooltip] {
  position: relative;
  cursor: pointer;
}

/* Hide the tooltip content by default */

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */

[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 0;
  margin-bottom: 5px;
  margin-left: -8px;
  padding: 9px 11px 12px;
  width: 160px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.15);
  color: #888888;
  content: attr(data-tooltip);
  font-family: inherit;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.09;
  z-index: 2;
}

/* Triangle hack to make tooltip look like a speech bubble */

[data-tooltip]:after {
  position: absolute;
  bottom: 120%;
  left: 0;
  margin-left: 13px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 11px 0 0;
  border-color: #ffffff transparent transparent transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
  z-index: 2;
}

/* Show tooltip content on hover */

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}








@media screen and (max-width: 1199.98px) {

.calc {
    padding-top: 66px;
    padding-bottom: 80px;
  }

  .calc__title {
    margin: 0 0 40px;
  }

  .calc__names {
    display: none!important;
  }

  .calc__tarif {
    width: calc(100% / 3);
    padding: 26px 16px 28px 19px;
    margin: 0;
  }

  .calc__tarif-title {
    margin: 0 0 12px;
  }

  .calc__block {
    height: 100%;
    margin: 0;
  }

  .calc__right {
    width: calc(100% - 300px);
  }

  .calc__left {
    width: 300px;
    height: unset;
    padding: 60px 39px;
  }

  .calc__row {
    font-size: 15px;
  }

  .calc__char {
    position: relative;
    min-height: unset;
    -webkit-box-align: end;
    align-items: flex-end;
    padding: 24px 15px 6px;
    font-size: 14px;
  }

  .calc__char br {
    display: none;
  }

  .calc__char:before {
    position: absolute;
    top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #333;
  }

  .calc__char:nth-child(1):before {
    content: '\041f\043e\043b\043e\0442\043d\043e:';
  }

  .calc__char:nth-child(2):before {
    content: '\041a\043b\0430\0441\0441\0020\0431\0435\0437\043e\043f\0430\0441\043d\043e\0441\0442\0438:';
  }

  .calc__char:nth-child(3):before {
    content: '\041f\0440\043e\0444\0438\043b\044c:';
  }

  .calc__char:nth-child(4):before {
    content: '\0414\0435\043a\043e\0440\0430\0442\0438\0432\043d\0430\044f\0020\0432\0441\0442\0430\0432\043a\0430:';
  }

  .calc__char:nth-child(5):before {
    content: '\042d\043b\0435\043a\0442\0440\0438\043a\0430:';
  }

  .calc__list {
    margin: 0 0 14px;
  }

  .calc__price {
    margin: auto 0 4px;
    font-size: 22px;
  }

  .calc__text {
    font-size: 16px;
  }

  .calc__oldprice {
    margin: 0 0 12px;
    font-size: 12px;
  }

  .tooltip {
    position: relative;
    top: -1px;
    width: 14px;
    height: 14px;
    font-size: 10px;
  }

  .calc__btn:before {
    display: none;
  }

}




@media screen and (max-width: 991.98px) {

  .calc {
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .top__calc {
    margin: 0 0 25px;
  }

  .calc__title {
    margin: 0 0 20px;
  }

  .calc__row {
    margin: 0 0 12px;
  }

  .calc__input {
    width: 50px;
    height: 32px;
  }

  .calc__tarifs {
    width: 100%;
    position: relative;
  }

  .calc__tarif {
    width: 100%;
    background: #FBFBFB;
  }

  .calc__tarif-title {
    font-size: 24px;
    font-weight: 700;
  }

  .calc__tarifs .slick-dots {
    position: absolute;
    bottom: 3px;
    width: 100%;
    margin: 0 auto;
  }

  .calc__tarifs .slick-dots li.slick-active button {
    background: #007FD5;
  }


}




@media screen and (max-width: 767.98px) {


  .calc__left {
    width: 280px;
    padding: 78px 30px 0;
  }

  .calc__right {
    width: calc(100% - 280px);
  }

  .calc__input {
    width: 40px;
    height: 28px;
  }

  .calc__tarif {
    padding: 32px 16px 28px 19px;
  }


}





@media screen and (max-width: 575.98px) {

  .calc__left {
    width: 100%;
    padding: 30px;
  }

  .calc__btn {
    margin-top: 20px;
  }

  .calc__right {
    width: 100%;
  }

  .calc__tarif {
    padding: 20px 15px 30px;
    box-shadow: unset;
  }

  .calc__char {
    padding: 24px 10px 6px 10px;
  }


}