:root {
  --white: #ffffff;
  --red: #CB0000;
  --blue: #00BFF3;
  --gray: #C4C4C4;
  --dark-gray: #777777;
  --black: #000000;
}

html, body, div, ul, ol, li, a, p {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

* {
  font-family: 'Arial', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 16px;
  color: var(--black);
  height: 2000px;
}

body h1 {
  font-family: 'Trebuchet MS';
  font-size: 49px;
  line-height: 52px;
  font-weight: bold;
  color: var(--black);
  margin: 50px 0 25px;
}

body h2 {
  font-size: 22px;
  line-height: 25px;
  color: var(--black);
  margin: 24px 0 10px 0;
  font-weight: bold;
}

body h3 {
  font-size: 16px;
  line-height: 18px;
  color: var(--black);
  margin: 20px 0 10px 0;
  font-weight: bold;
}

p, ul, ol {
  font-size: 14px;
  line-height: 19px;
}

ul li {
  list-style-type: "—";
  padding: 0 0 0 5px;
}

a {
  text-decoration: none !important;
  cursor: pointer;
}

a > span {position: relative;}

a > span::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  height: 0px;
  width: 100%;
  border-bottom: 1px solid #fff;
  opacity: 0;
  transition: all .2s ease-out;
}

a > span:hover::after {
  opacity: 1;
}

img {
  width: 100%;
}

.bold {
  font-weight: 700;
}

.wrapper {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 15px;
}

.toolbar {
  background: var(--blue);
  font-family: 'Arial';
  font-size: 16px;
  line-height: 18px;
  color: var(--white);
}

.toolbar .logo {
  width: 180px;
}

.toolbar .phone {
  font-size: 30px;
  color: var(--white);
  padding: 0;
}

.toolbar .callback {
  cursor: pointer;
  position: relative;
}

.toolbar .callback::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  border-bottom: 1px dotted #ccc;
  transition: all .2s ease-out;
}

.toolbar .callback:hover::after {
  opacity: 0;
}

.toolbar .media > div {
  margin-left: 10px;
}

.toolbar .media > div > a > svg {
  width: 32px;
  height: 32px;
  fill: #fff;
  border-radius: 50%;
  transition: all .2s ease-out;
}

.toolbar .media > div > a > svg:hover {
  fill: var(--blue);
  background-color: var(--white);
  border: 1px solid #fff;
  padding: 1px;
}

.banner {position: relative;}

.banner .description {
  position: absolute;
  bottom: 0;
  transform: translate(30px, -30px);
  background: rgba(255, 242, 0, 0.7);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  font-family: 'Trebuchet MS';
  text-align: center;
}

.banner .description .title {
  font-size: 25px;
  line-height: 29px;
  margin-top: 45px;
  display: block;
}

.banner .description .body {
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  display: block;
  margin: 16px 0 0 0;
}

.banner .description .number {
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--black);
  margin: 7px 0 0 0;
  padding: 0 5px;
  display: inline-block;
}

.banner .banner-clip {
  position: absolute;
  bottom: 0;
  fill: #fff;    
  height: 65px;
  width: 422px;
  right: 0;
}

.banner-desk .title .name {
  font-family: 'Trebuchet MS';
  color: var(--black);
  font-size: 35px;
  line-height: 41px;
  position: relative;
}

.banner-desk .title .name:after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--black);
  opacity: .25;
}

.star-rating{
  font-size: 0;
}

.star-rating__wrap{
  display: inline-block;
  font-size: 1rem;
}

.star-rating__wrap:after{
  content: "";
  display: table;
  clear: both;
}

.star-rating__ico{
  float: right;
  margin-left: 3px;
  cursor: pointer;
  width: 28px;
  height: 26px;
}

.star-rating__ico:last-child{
  padding-left: 0;
}

.star-rating__input{
  display: none;
}

.fa-star-o:before {
  content: url(../img/star-no-fill.png);
}

.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
  content: url(../img/star.png);
  animation: hide .2s;
}

@keyframes hide {
  from {opacity: 0;}
  to {opacity: 1;}
}

.banner-desk .title .price {
  font-family: 'Trebuchet MS';
  color: var(--black);
  font-size: 35px;
  line-height: 41px;
}

.banner-desk .desk span {
  display: block;
  color: var(--black);
}

.banner-desk .desk .user-text span {
  font-size: 14px;
  line-height: 16px;
}

.banner-desk .desk .user-mark span {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: 24px;
  font-family: 'Trebuchet MS';
  background: var(--blue);
  color: var(--white);
  padding: 12px 7px;
}

.banner-desk .desk .info span:not(.bold) {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.banner-desk .desk .info span.bold {
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.banner-desk .number-clip span {
  display: block;
}

.banner-desk .number-clip {
  position: relative;
  height: 142px
}

.banner-desk .number-clip .span-box {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-100px, -30px);
}

.banner-desk .number-clip .span-box .number {
  font-family: 'Trebuchet MS';
  font-size: 88px;
  line-height: 80px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--dark-gray);
  font-weight: 700;
}

.banner-desk .number-clip .span-box span:not(.number) {
  font-size: 30px;
  line-height: 31px;
}

.card-box {
  gap:  25px 0;
}

.card-box .desk .title {
  font-family: 'Trebuchet MS';
  font-size: 35px;
  line-height: 41px;
  color: var(--black);
  margin-bottom: 10px;
}

.card-box .desk .price {
  font-family: 'Trebuchet MS';
  font-size: 35px;
  line-height: 41px;
  text-align: right;
  color: var(--black);
}

.card-box .desk .desk {
  font-size: 14px;
  line-height: 19px;
}

.card-box .desk .title span {
  font-family: 'Trebuchet MS';
  font-weight: bold;
  border-bottom: 1px solid rgb(0 0 0 / 25%);
  transition: all .15s ease-out;
}

.card-box .desk .title span:hover {
  cursor: pointer;
  color: var(--red);
  border-bottom: 1px solid rgb(80%, 0%, 0%, .25);
}

.quote {
  border-left: 8px solid var(--blue);
  padding-left: 15px;
  margin-left: 50px;
  font-style: italic;
}

.gray-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
}

.gray-table thead tr th {
  background-color: var(--gray);
  padding: 10px 20px;
  font-size: 14px;
  line-height: 16px;
  color: var(--black);
}

.gray-table tbody tr td {
  padding: 10px 20px;
  font-size: 14px;
  line-height: 16px;
  color: var(--black);
}

.sidebar .number {
  color: var(--dark-gray);
  font-family: 'Trebuchet MS';
  font-size: 100px;
  line-height: 116px;
  letter-spacing: -0.05em;
  font-weight: bold;
  margin: 0 0 4px 0;
}

.sidebar .title {
  font-size: 30px;
  line-height: 31px;
  margin: 0 0 8px 0;
}

.sidebar .content {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: var(--dark-gray);
}

.sidebar {
  margin-top: 50%;
}

footer p {
  font-size: 12px;
  line-height: 17px;
  margin: 0;
}

footer .media svg {
  width: 32px;
  height: 32px;
  fill: var(--blue);
  border-radius: 50%;
  transition: all .2s ease-out;
}

footer .media svg:hover {
  fill: #fff;
  background-color: var(--blue);
  border: 1px solid var(--blue);
  padding: 1px;
}

.footer {
  padding: 15px 0;
  border-top: 1px solid var(--gray);
}

footer p a {
  color: var(--blue);
  position: relative;
}

footer p a:after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 0;
  border-bottom: 1px solid var(--blue);
  width: 100%;
  opacity: 1;
  transition: all .15s ease-out;
}

footer p a:hover:after {
  opacity: 0;
}

footer p a:hover {
  color: var(--blue);
}

.go_top.show {
  display: block;
  animation: hide .2s;
}

.go_top {
  display: none;
  background: url(../img/to-top.png);
  background-size: cover;
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 15px;
  cursor: pointer;
}

.go_top:active {
  zoom: .95;
}


@media (max-width: 768px) {
  .banner .description {
    background: rgba(255, 242, 0, 0.7);
    width: 100%;
    height: 150px;
    border-radius: 0;
    position: relative;
    transform: translate(0);
  }
  .banner .description .title {
    font-size: 25px;
    line-height: 29px;
    margin-top: 25px;
  }
  .banner .description .title br {
    display: none;
  }
  .banner .banner-clip {
    right: auto;
    left: 0;
    width: 300px;
    height: 45px;
  }
  .banner-desk .number-clip {
    height: 45px;
  }
  .banner-desk .number-clip .span-box {
    transform: translate(107px, -45px);
    position: absolute;
    left: 0;
    width: min-content;
  }
  .banner-desk .number-clip .span-box .number {
    font-size: 62px;
    line-height: 52px;
  }
  .banner-desk .number-clip .span-box span:not(.number) {
    font-size: 26px;
    line-height: 31px;
    white-space: pre;
  }
  .banner-desk .number-clip .span-box span:not(.number) br {
    display: none;
  }
  .sidebar {
    margin: 0;
    text-align: center;
  }
  .table-wrap {
    overflow: auto;
  }
}

@media (max-width: 576px) {
  .banner .banner-clip {
    display: none;
  }
  .banner-desk .number-clip {
    height: auto;
    margin-bottom: 10px;
  }
  .banner-desk .number-clip .span-box {
    transform: translate(0);
    position: relative;
    text-align: center;
    width: 100%;
  }
  .banner-desk .title {
    justify-content: center;
    text-align: center;
  }
  .banner-desk .desk .user-mark span {
    left: 0;
    transform: translate(0%, 0%);
    display: inline-block;
  }
  .banner-desk .desk {
    gap: 10px 0;
    display: flex;
    text-align: center;
    margin-top: 10px;
  }
}