.cms-info__left {
  font-size: 16px;
}

.row_video_marketing {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
}

.col_video_marketing {
  width: 50%;
}

.col_video_marketing>div>img {
  width: 80%;
}

.pt-20 {
  padding-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.header_text_video {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 20px;
}

.col_video_marketing>ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

.col_video_marketing>ul>li {
  list-style-type: disc;
  margin-top: 10px;
  margin-left: 40px;
}

.col_video_marketing>ul>li>a {
  color: #0070f0;
  font-size: 16px;
}

.col_video_marketing>p {
  font-size: 16px;
}

.youtube_col_flex {
  margin-top: 20px;
}

.youtube_col_flex>div {
  margin-bottom: 10px;
}

.youtube_link_el {
  display: flex;
  align-items: center;
}

.youtube_link_el>span {
  font-size: 16px;
}

.youtube_link_el>a {
  font-size: 16px;
  display: flex;
  align-items: flex-start;
}

.youtube_icon_span {
  background: red;
  min-width: 16px;
  min-height: 12px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-top: 2px;
}

.youtube_link_el>a>span>i {
  font-size: 5px;
  color: #fff;
}

.head_download_youtube>a {
  color: #0070f0;
  margin-left: 5px;
  font-size: 16px;
}

.head_download_youtube>b {
  font-size: 16px;
}

.youtube_video_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

.before_youtube_block>div {
  text-align: center;
  margin-bottom: 10px;
  font-size: 16px;
}

.before_youtube_block {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  width: 80%;
}

.before_youtube_block>div>a>i {
  margin-right: 5px;
}

.before_youtube_block>div>a {
  color: #0070f0;
}

.before_tutorial_block {
  width: 80%;
}

.before_tutorial_block>div {
  text-align: center;
  font-size: 16px;
}

.before_tutorial_block>div>a {
  color: #0070f0;
  font-size: 16px;
}

.constructor_step_block:hover {
  box-shadow: 0 8px 20px rgba(0, 51, 153, .08), 0 4px 8px rgba(0, 51, 153, .08);
}

.elem_constructor_solution {
  min-height: auto;
  padding: 40px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0, 51, 153, .04), 0 2px 2px rgba(0, 51, 153, .08);
}

.fake_shadow_constructor {
  box-shadow: 0 2px 4px 0 rgba(76, 94, 134, .3);
  z-index: 10;
  position: absolute;
  top: 125px;
  left: 0;
  right: 0;
  height: 5px;
}

.constructor_step_block {
  width: 180px;
  height: 228px;
  padding: 0 18px 48px;
  position: relative;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 36px;
  border-radius: 12px;
  margin-bottom: 54px;
  background: #f1f0ed;
  box-shadow: 0 4px 16px rgba(0, 51, 153, .04), 0 2px 8px rgba(0, 51, 153, .08);
}

.constructor_step_block--bg {
  width: 220px;
  height: 180px;
  background: #f9fafb;
}

.constructor_step-icon {
  position: absolute;
  top: -42px;
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-clip: padding-box;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 36px;
  background-color: #fac800;
  border: 12px solid #fac800;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.constructor_step-title {
  display: inline-block;
  margin-top: 60px;
  color: #494949;
  opacity: .4;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -.03em;
  font-size: 24px;
  line-height: 28px;
}

.constructor_step-descr {
  max-width: 100%;
  margin-top: 24px;
  color: #494949;
  text-align: center;
  letter-spacing: -.01em;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}

.constructor_step_block--bg .constructor_step-descr {
  font-weight: bold;
  margin: 20px 0 10px;
}

.constructor_step-text {
  color: #494949;
}

.container_easy_blocks {
  display: flex;
  justify-content: center;
}

.text-white {
  color: #fff;
}

.all_steps_constructor_wrapper {
  flex-direction: column;
}

#show-checkbox-constructor {
  appearance: auto;
  -webkit-appearance: auto !important;
  cursor: pointer;
}

.hosting_el_tarrif:before {
  display: none !important;
}

.hosting_el_tarrif {
  padding-left: 0px !important;
  font-weight: 600;
}

.hosting_el_tarrif>.fa-circle-check {
  color: #93cd16 !important;
}

.hosting_el_tarrif>.fa-times-circle {
  color: #f15829 !important;
}

.hosting_el_tarrif>i {
  font-size: 16px;
  margin-right: 7px;
}

.section--yellow {
  background: rgb(251, 221, 44);
  background: linear-gradient(90deg, rgba(251, 221, 44, 1) 0%, rgba(250, 229, 102, 1) 35%);
}

.mat-0 {
  margin-top: 0px !important;
}

.c_pointer {
  cursor: pointer;
}

.h-auto {
  height: auto !important;
}

.h-auto>ul {
  position: relative;
}

.h-auto>ul>li:hover+.tooltype {
  bottom: 100%;
  opacity: 1;
  visibility: visible;
}

.h-auto>ul>.tooltype {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 190px;
  height: auto;
  font-size: 14px;
  line-height: 16px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: left;
  bottom: 150%;
  text-align: center;
  color: #494949;
  border-radius: 4px;
  padding: 9px 7px;
  opacity: 0;
  background: #f6f6f6;
  visibility: hidden;
  -webkit-transition: .3s all;
  transition: .3s all;
  flex-direction: column;
}

.h-auto>ul>.tooltype>div {
  color: #494949;
  margin-bottom: 5px;
  text-align: left;
}

.h-auto>ul>.tooltype>div>i {
  color: #93cd16;
  margin-right: 5px;
}

.line_height_constructor {
  line-height: 15px !important;
  margin-top: 6px;
}

.title_adv_constructor {
  margin-bottom: 40px;
  padding-top: 20px;
}

.btn_show_tpl:hover {
  background-color: #f7e57a;
}

.video_btns:hover {
  background-color: #f7e57a;
}

.text_all_video {
  text-align: center;
  margin-top: 15px;
  font-size: 16px;
  font-weight: 500;
}

.text_all_video>a {
  color: #0070f0;
}

.preview_video_block {
  width: 100%;
  border-radius: 15px;
  height: 245px;
  position: relative;
}

.preview_video_block>span {
  position: absolute;
  height: 48px;
  width: 64px;
  background: #fbde2b;
  border-radius: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview_video_block>span>i {
  font-size: 22px;
}

.preview_video_block:hover {
  opacity: 0.8;
  transition: 0.3s;
}

.bg-white>a:hover {
  color: #fff;
}

.bg-white {
  background: #fff !important;
}

.mb-50 {
  margin-bottom: 55px;
}

.mt-0 {
  padding-top: 0px;
}

.video_content {
  width: 730px;
  height: 500px;
  padding: 6px 12px;
}

.video_content video {
  width: 730px;
  height: 500px;
}

.btn_v_con {
  display: flex;
  background-color: #f1f8fe;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  max-width: 900px;
}

/* Style the buttons inside the tab */
.btn_v_con button {
  background-color: #fff;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 15px;
  margin: 8px;
}

/* Create an active/current tablink class */
.btn_v_con button.active {
  background-color: #fbde2b;
}

.first_btns--con {
  display: flex;
  justify-content: center;
}

.first_btns_block {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.first_btns_block>a {
  margin: 10px;
  font-size: 18px;
  font-weight: 500;
  padding: 12px 28px;
}

.btns_choose--tariff {
  background-color: #fbde2b;
  color: black;
}

.mb-30 {
  margin-bottom: 30px;
}

.text_title {
  display: block;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: normal;
}

.u-examples__info>i {
  margin-right: 9px;
}

#categories-container>.btn-c {
  color: #707a8a;
}

.btn--preview {
  background-color: #fbde2b;
  border-radius: 4px;
  padding: 12px 24px;
  order: 2;
  font-size: 16px;
  font-weight: 600;
  width: 217px;
}

.btn--tarrif {
  text-align: center;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  width: 217px;
}

.btn--preview:hover {
  background-color: #f7e57a;
}

.btn--tarrif:hover {
  background-color: #f7e57a;
}

.btn-c {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 16px;
}

#categories-container>.btn-c:hover {
  background-color: #f7e57a;
  color: black;
}

.btn-c.active {
  color: black !important;
  background-color: #fbde2b;
  box-shadow: 0 4px 16px rgba(0, 51, 153, .04), 0 2px 2px rgba(0, 51, 153, .08);
}

.flex-grey {
  background-color: #f1f0ed;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-grey>p {
  background-color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.description_flex_grey {
  color: #9ea4b0;
  font-size: 14px;
  text-align: center;
}

.header_flex_grey {
  font-size: 30px;
  font-weight: bold;
  padding-top: 20px;
}

.padding_b-0 {
  padding-bottom: 0px;
}

@media all {
  .vps-segment-control__control-wrapper {
    display: inline-block;
  }

  .vps-segment-control__control {
    display: flex;
    flex-wrap: nowrap;
    min-width: 100%;
    white-space: nowrap;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f1f0ed;
  }

  .vps-segment-control__option_size_s {
    padding: 6px 24px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: normal;
  }

  .clvps-btn_wrapper {
    position: relative;
  }
}

@media all {
  .avps_tpl {
    width: 316px;
    margin: 0 12px 48px;
  }

  .web_preview_block {
    position: relative;
    overflow: hidden;
    height: 210px;
    margin-bottom: 10px;
    border: 1px solid #dfe4ec;
    background-position: top;
    background-size: cover;
    cursor: pointer;
  }

  .web_preview_block:hover .vps_tp__preview-buttons {
    opacity: 1;
  }

  @media (min-width: 284px) {
    .vps_tp__preview-buttons {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      background-color: hsla(0, 0%, 100%, .8);
      opacity: 0;
      transition-property: opacity;
      transition-timing-function: ease-in-out;
      transition-duration: .3s;
    }
  }

  .tpl-list__item-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 8px;
  }

  @media (min-width: 1024px) {
    .tbl_action_constructor>div {
      padding-left: 35px;
    }

    .tbl_action_constructor>div>label {
      font-size: 16px;
      margin-left: 7px;
    }

    .w-25_perc {
      width: 25% !important;
    }

    .all_steps_constructor_wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 80px;
      width: 996px;
    }

    .mg-slide {
      margin-left: 10px !important;
      margin-right: 10px !important;
    }

    .constructor_step-icon:after {
      content: "";
      position: absolute;
      right: -161px;
      top: -32px;
      width: 152px;
      height: 29px;
      background: url('../../assets/img/icons/constructor/img_for_gradient.svg') no-repeat 50%;
      opacity: 0;
      animation-fill-mode: both;
      animation-name: lineopacity;
    }

    .constructor_step_first:after,
    .constructor_step_1:after {
      animation-duration: 3s;
    }

    .constructor_step_second:after,
    .constructor_step_2:after {
      animation-duration: 4s;
    }

    .constructor_step_third:after,
    .constructor_step_3:after {
      animation-duration: 5s;
    }

    .constructor_step_four:after {
      animation-duration: 6s;
    }

    .constructor_step_five:after,
    .constructor_step_4:after {
      display: none;
    }

    .constructor_step-icon {
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9);
      animation-name: circle;
      animation-duration: 2s;
    }

    .constructor_step_first,
    .constructor_step_1 {
      animation-duration: 2s;
    }

    .constructor_step_second,
    .constructor_step_2 {
      animation-duration: 5s;
    }

    .constructor_step_third,
    .constructor_step_3 {
      animation-duration: 7s;
    }

    .constructor_step_four,
    .constructor_step_4 {
      animation-duration: 8.5s;
    }

    .constructor_step_five {
      animation-duration: 10.2s;
    }

    @keyframes circle {
      0% {
        border-color: #fac800;
      }

      45% {
        border-color: #f2c515;
      }

      50% {
        border-color: rgba(255, 181, 0, .4);
      }

      100% {
        border-color: rgba(255, 181, 0, .4);
      }
    }

    @keyframes lineopacity {

      0%,
      45%,
      50%,
      75% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  }

  @media (min-width: 1024px) {
    .tpl-list__item-wrap {
      flex-direction: row;
      width: 1020px;
    }
  }

  .templates-list {
    margin-top: 20px;
  }

  .vps-example_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin-top: 30px;
  }

  .vps__segment-control {
    max-width: 100%;
  }

  .vps-segment-control__control {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 20px;
  }

  @media (min-width: 1024px) {
    .vps-segment-control__control {
      width: 1020px;
    }
  }


  @media(max-width: 950px) {
    .video_content>video {
      max-width: 450px;
      max-height: 330px;
    }

    .video_content {
      max-width: 450px;
      max-height: 330px;
    }

    .info-link__item>.bg_white {
      display: flex !important;
      justify-content: center !important;
    }
  }

  @media(max-width: 950px) {
    .row_video_marketing {
      flex-direction: column;
      margin-top: 20px;
    }

    .col_video_marketing {
      width: 100%;
      margin-top: 20px;
    }

    .youtube_video_container>iframe {
      width: 100%;
    }

    .youtube_video_container>img {
      width: 100%;
    }

    .before_youtube_block {
      max-width: 100%;
      margin-top: 20px;
    }

    .before_tutorial_block {
      max-width: 100%;
      margin-top: 20px;
    }
  }

  @media(max-width: 480px) {
    .fake_shadow_constructor {
      top: 107px;
    }

    .container_easy_blocks {
      margin-top: 80px;
    }

    .constructor_step_block {
      margin-bottom: 64px;
    }

    .first_btns_block>a {
      padding: 10px 12px;
      font-size: 15px;
    }

    .video_content>video {
      max-width: 350px;
      max-height: 230px;
    }

    .video_content {
      max-width: 350px;
      max-height: 230px;
    }

    .btn_v_con button {
      font-size: 13px;
      margin: 5px;
    }

    .header_con-tarrif {
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .vps-segment-control__control {
      max-width: 370px;
    }

    .header_flex_grey {
      font-size: 22px;
    }

    .vps-segment-control__scroller {
      display: flex !important;
      flex-direction: column !important;
    }

    .description_flex_grey {
      display: none;
    }

    .flex-grey>p {
      font-size: 14px !important;
    }

    .u-examples__info>i {
      margin-right: 5px !important;
    }

    .vps-segment-control__option_size_s {
      line-height: 19px;
      padding: 6px 20px;
    }

    .preview_video_block {
      height: 200px;
      width: 344px;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .video_materials>.section__body>.info-link__inner {
      justify-content: center;
    }
  }
}