/**
*
  Сброс CSS стилей
*
**/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 100%;
}

html {
  -webkit-text-size-adjust: none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

body {

  &.__hidden {
    overflow: hidden;
  }

}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

input,
textarea,
button,
select {
  resize: none;
  border: none;
  background-color: transparent;
  outline: none;
  padding: 0;
}

img {
  border: 0;
  vertical-align: top;
}

html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}


/**
*
  Flex
*
**/
.flex_w {
  display: flex;
  flex-wrap: wrap;

  &.__ai_fs {
    align-items: flex-start;
  }

  &.__ai_fe {
    align-items: flex-end;
  }

  &.__ai_c {
    align-items: center;
  }

  &.__jc_sa {
    justify-content: space-around;
  }

  &.__jc_sb {
    justify-content: space-between;
  }

  &.__jc_c {
    justify-content: center;
  }

}


/**
*
  Функции
*
**/
.radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.transition(@properties: all .3s) {
  -webkit-transition: @properties;
  -moz-transition: @properties;
  -ms-transition: @properties;
  -o-transition: @properties;
  transition: @properties;
}

.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
  text-shadow: @string;
}

.box-shadow (@string) {
  -webkit-box-shadow: @string;
  -moz-box-shadow: @string;
  box-shadow: @string;
}

.box-shadow2 (@string, @string) {
  -webkit-box-shadow: @string, @string;
  -moz-box-shadow: @string, @string;
  box-shadow: @string, @string;
}

.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing: @type;
  box-sizing: @type;
}

.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.opacity (@opacity: 0.5) {
  -webkit-opacity: @opacity;
  -moz-opacity: @opacity;
  opacity: @opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @endColor);
}

.horizontal-gradient (@startColor, @endColor) {
  background-color: @startColor;
  background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background-image: -webkit-linear-gradient(left, @startColor, @endColor);
  background-image: -moz-linear-gradient(left, @startColor, @endColor);
  background-image: -ms-linear-gradient(left, @startColor, @endColor);
  background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.vertical-gradient (@startColor, @endColor) {
  background-color: @endColor;
  background-image: -webkit-gradient(linear, top, bottom, from(@startColor), to(@endColor));
  background-image: -webkit-linear-gradient(bottom, @startColor, @endColor);
  background-image: -moz-linear-gradient(bottom, @startColor, @endColor);
  background-image: -ms-linear-gradient(bottom, @startColor, @endColor);
  background-image: -o-linear-gradient(bottom, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
  -webkit-animation: @name @duration @delay @ease;
  -moz-animation: @name @duration @delay @ease;
  -ms-animation: @name @duration @delay @ease;
}

.transition (@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -ms-transition: @transition;
  -o-transition: @transition;
}

.transform(@string) {
  -webkit-transform: @string;
  -moz-transform: @string;
  -ms-transform: @string;
  -o-transform: @string;
  transform: @string;
}

.scale (@factor) {
  -webkit-transform: scale(@factor);
  -moz-transform: scale(@factor);
  -ms-transform: scale(@factor);
  -o-transform: scale(@factor);
  transform: scale(@factor);
}

.rotate (@deg) {
  -webkit-transform: rotate(@deg);
  -moz-transform: rotate(@deg);
  -ms-transform: rotate(@deg);
  -o-transform: rotate(@deg);
  transform: rotate(@deg);
}

.skew (@deg, @deg2) {
  -webkit-transform: skew(@deg, @deg2);
  -moz-transform: skew(@deg, @deg2);
  -ms-transform: skew(@deg, @deg2);
  -o-transform: skew(@deg, @deg2);
  transform: skew(@deg, @deg2);
}

.translate (@x, @y:0) {
  -webkit-transform: translate(@x, @y);
  -moz-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y);
  -o-transform: translate(@x, @y);
  transform: translate(@x, @y);
}

.translate3d (@x, @y: 0, @z: 0) {
  -webkit-transform: translate3d(@x, @y, @z);
  -moz-transform: translate3d(@x, @y, @z);
  -ms-transform: translate3d(@x, @y, @z);
  -o-transform: translate3d(@x, @y, @z);
  transform: translate3d(@x, @y, @z);
}

.perspective (@value: 1000) {
  -webkit-perspective: @value;
  -moz-perspective: @value;
  -ms-perspective: @value;
  perspective: @value;
}

.transform-origin (@x:center, @y:center) {
  -webkit-transform-origin: @x @y;
  -moz-transform-origin: @x @y;
  -ms-transform-origin: @x @y;
  -o-transform-origin: @x @y;
}

.background(@path, @position: center center, @repeat: no-repeat) {
  background: url(@path) @position @repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.text-overflow(@lineClamp, @lineHeight) {
  display: -webkit-box;
  display: -moz-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lineClamp;
  overflow: hidden;
  height: @lineClamp * @lineHeight;
}

.placeholder-style(@placeholder-font, @placeholder-color) {

  &::-webkit-input-placeholder {
    font: @placeholder-font;
    color: @placeholder-color;
  }

  &::-moz-placeholder {
    font: @placeholder-font;
    color: @placeholder-color;
  }

  &:-moz-placeholder {
    font: @placeholder-font;
    color: @placeholder-color;
  }

  &:-ms-input-placeholder {
    font: @placeholder-font;
    color: @placeholder-color;
  }

}


/**
*
  Подключение шрифтов
*
**/
@font-face {
  font-family: Circe;
  src: url('../fonts/circe.ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Circe;
  src: url('../fonts/circe-bold.ttf');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Circe;
  src: url('../fonts/circe-extrabold.ttf');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Circe;
  src: url('../fonts/circe-extralight.ttf');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Circe;
  src: url('../fonts/circe-light.ttf');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Circe;
  src: url('../fonts/circe-thin.ttf');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Circe;

}


/**
*
  Общие классы
*
**/
.show {
  display: block !important;
}

.hide,
.xs-show,
.sm-show,
.md-show {
  display: none !important;
}

.flf {
  float: left !important;
}

.flr {
  float: right !important;
}

.clear {
  display: block;
  clear: both;
}

.t_center {
  text-align: center;
}

.t_right {
  text-align: right;
}

.pos_rel {
  position: relative;
}

.ypos_ab {
  position: absolute;
  top: 50%;
  .translate(0, -50%);
}

.xpos_ab {
  position: absolute;
  left: 50%;
  .translate(-50%, 0);
}

.pos_absc {
  position: absolute;
  top: 50%;
  left: 50%;
  .translate(-50%, -50%);
}

.c_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.b_img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.psevdo-item {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}


a {
  color: inherit;
}

.wrap {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding-top: 50px;

  .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-left {
    display: flex;
    align-items: center;

  }

  &-btn {
    border: 2px solid #FD9739;
    box-sizing: border-box;
    border-radius: 4px;
    width: 160px;
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    line-height: 125%;
    /* identical to box height, or 20px */


    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
  }

  &-menu {
    margin-left: 65px;

    a {
      font-family: Circe;
      font-style: normal;
      font-weight: bold;
      font-size: 16px;
      line-height: 125%;
      margin-right: 32px;
      color: #FFFFFF;
    }
  }
}

.owl-carousel {
  * {
    max-width: 10077000px;
  }
}

.d1 {
  .owl-nav {
    width: 1370px;
    margin: 0 auto;
    position: absolute;
    justify-content: space-between;
    display: flex;
    .pos_absc;
  }

  background: linear-gradient(126.93deg, #6465A3 22.34%, #585A97 79.03%);

  .owl-prev {
    left: 0;
  }

  .owl-next {
    right: 0;
  }

  border-radius: 0 0 0 250px;

  .owl-next, .owl-prev {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    background: #8A8BB6 !important;
    align-items: center;
    justify-content: center;

    path {
      stroke: #896C7B !important;
    }
  }

  &-img {
    img {
      position: absolute;
      right: 60px;
      bottom: 0;
    }
  }

  &-item {

    .wrap {
      height: 700px;
      padding-top: 180px;

      position: relative;
      flex-grow: 1;
      display: flex;
    }
  }

  &-content {
    width: 560px;


  }

  &-btn {
    background: #FD9739;
    width: 267px;
    height: 52px;

    margin-top: 50px;
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 125%;
    /* identical to box height, or 22px */


    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }

  &-ttl {
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 42px;
    line-height: 125%;
    /* or 52px */


    color: #FFFFFF;

  }

  &-bg {
    width: 661px;
    height: 661px;
    bottom: -10px;
    right: -50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    background: transparent;
    //filter: blur(50px);
    & > div {
      width: 561px;
      height: 561px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.05);

      & > div {
        border-radius: 50%;
        display: flex;
        align-items: center;
        width: 461px;
        height: 461px;
        backdrop-filter: blur(50px);


        background: #FFFFFF;
        justify-content: center;
      }
    }
  }

  margin-bottom: 62px;
}

.d1-ul{

    li {
      position: relative;
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 125%;
      /* or 22px */

      margin-top: 20px;
      color: #FFFFFF;

      &::after {
        content: "";
        background: #FD9739;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 5px;
      }

      padding-left: 20px;
    }


    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 140%;
    /* or 25px */


    color: #FFFFFF;

    li {
      margin-top: 10px;
    }
}
.d2 {
  .wrap {
    display: flex;
    justify-content: space-between;
  }

  &-item {
    display: flex;
    align-items: center;
  }

  &-text {
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 125%;


    color: #333333;

  }

  &-img {
    width: 90px;
    height: 90px;
    margin-right: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EEEEFF;
  }
}

h2 {
  font-family: Circe;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 125%;
  /* identical to box height, or 45px */


  color: #333333;
  margin-bottom: 32px;
}

h4 {
  font-family: Circe;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 125%;
  margin-bottom: 8px;

  color: #333333;

}

.d3 {
  padding: 62px 0;

  &-slider {
    position: relative;
    display: flex;
    justify-content: space-between;

  }

  &-content {
    padding: 20px;
  }

  &-bg {
    .pos_absc;
    background: #F7F7F7;
    height: 290px;
    width: 100vw;
    max-width: 100000px;
  }

  &-img {
    position: absolute;
    top: -2px;
    right: -2px;
    left: -2px;
    overflow: hidden;
    max-width: 10000px;
    border-radius: 4px 4px 0px 0px;
    height: 200px;

    img {
      .c_img;
    }
  }

  &-item {
    z-index: 2;
    padding-top: 200px;
    position: relative;
    width: 267px;

    p {
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 125%;
      margin-bottom: 20px;

      color: #333333;

    }

    position: relative;
    background: #FFFFFF;
    border: 2px solid #F6F6F6;
    box-sizing: border-box;
    border-radius: 4px;
  }

  &-footer {
    display: flex;
    justify-content: space-between;

    span {
      font-family: Circe;
      font-style: normal;
      font-weight: bold;
      font-size: 12px;
      line-height: 125%;
      display: block;
      margin-bottom: 4px;
      color: #B3B3B3;

    }

    b {
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 125%;


      color: #333333;
    }
  }
}

h3 {
  font-family: Circe;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 125%;
  margin-bottom: 18px;


  color: #333333;
}

.d4 {
  margin-bottom: 62px;

  .wrap {
    display: flex;
    justify-content: space-between;
  }

  &-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  &-item {
    width: 121px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;

    background: #FFFFFF;
    border: 2px solid #F6F6F6;
    box-sizing: border-box;
    border-radius: 4px;
  }

  &-left {
    width: 528px;

    p {
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 135%;
      /* or 22px */


      color: #444444;

    }
  }

  &-right {
    width: 558px;

  }
}

.prefooter {
  position: relative;

  &-btn {
    background: #FD9739;
    border-radius: 4px;
    width: 267px;
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 125%;

    text-align: center;

    color: #FFFFFF;
    margin-right: 24px;
    height: 52px;
  }

  &-footer {
    margin-top: 30px;
    display: flex;
    align-items: center;

    p {

      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 125%;
      /* or 17px */

      a {
        text-decoration: underline;
      }


      color: rgba(255, 255, 255, 0.6);
    }
  }

  form {
    input {
      height: 52px;
      margin-bottom: 12px;
      padding-left: 24px;
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 125%;
      display: block;
      width: 100%;


      background: #FFFFFF;
      border-radius: 4px;
    }
  }

  &-right {
    width: 558px;

  }

  &-item {
    margin-top: 28px;

    span {
      display: block;
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 125%;


      color: #FFFFFF;
      margin-bottom: 8px;
    }

    b {
      font-family: Circe;
      font-style: normal;
      font-weight: bold;
      font-size: 24px;
      line-height: 125%;
      /* or 30px */


      color: #FFFFFF;
    }
  }

  .wrap {
    padding-top: 62px;
    padding-bottom: 78px;
    color: #FFFFFF;

    h2 {
      color: #FFFFFF;
      margin-bottom: 42px;

    }

    display: flex;
    justify-content: space-between;
  }

  &::after {
    content: "";
    position: absolute;
    width: calc(50% - 90px);
    background: linear-gradient(126.93deg, #6465A3 22.34%, #585A97 79.03%);
    left: 0;
    z-index: 1;
    bottom: 0;
    top: 0;
  }

  &::before {
    content: "";
    position: absolute;
    border-radius: 0 250px 0 0;
    width: 100%;
    background: linear-gradient(126.93deg, #4D4E8D 22.34%, #3E407D 79.03%);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }

  .wrap {
    z-index: 4;
    display: flex;
    justify-content: space-between;
    position: relative;
  }
}

.footer {
  padding-top: 62px;
  padding-bottom: 50px;

  &-right {
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 125%;
    text-align: right;
    text-decoration-line: underline;


    color: #333333;

  }

  &-left {
    font-style: normal;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333333;
    line-height: 125%;
  }

  &-logo {
    margin-right: 32px;
  }

  .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.chleb {
  padding-top: 125px;
  background: linear-gradient(126.93deg, #6465A3 22.34%, #585A97 79.03%);
  border-radius: 0 0 0 150px;

  b {
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 42px;
    line-height: 125%;
    /* identical to box height, or 52px */


    color: #FFFFFF;

  }

  padding-bottom: 40px;

  &-links {
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 125%;
    /* identical to box height, or 17px */

    a {
      text-decoration-line: underline;

    }

    color: #FFFFFF;
  }
}

.cours {
  padding-top: 20px;

  .wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  &-content {
    padding: 70px 0;

    p {
      margin: 42px 0;
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 135%;
      /* or 22px */


      color: #444444;
    }

    width: 558px;
  }

  &-option {
    p {
      margin: 0;
    }

    b {

      font-family: Circe;
      font-style: normal;
      font-weight: bold;
      font-size: 42px;
      line-height: 125%;
      /* identical to box height, or 52px */


      color: #333333;
      display: block;
      margin-bottom: 5px;
    }

    width: 267px;
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 135%;
    /* or 22px */


    color: #444444;

    &s {
      margin-bottom: 50px;
      display: flex;
      justify-content: space-between;
    }
  }

  &-btn {
    width: 267px;
    background: #FD9739;
    border-radius: 4px;
    height: 52px;
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 125%;
    /* identical to box height, or 22px */


    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


.cd2 {
  margin-bottom: 50px;

  .wrap {
    display: flex;
    justify-content: space-between;

    p, h2 {
      width: calc(50% - 10px);
    }

    p {
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 135%;
      /* or 22px */


      color: #444444;
    }
  }
}

.cd3 {
  background: #5F609E;
  padding: 46px 0;

  .wrap {
    display: flex;
    width: 960px;
    justify-content: space-between;
  }

  &-head {
    margin-bottom: 5px;
    display: flex;
    align-items: center;

    b {
      font-family: Circe;
      margin-right: 30px;
      font-style: normal;
      font-weight: bold;
      font-size: 42px;
      line-height: 135%;
      /* identical to box height, or 57px */


      color: #FFFFFF;

    }

    p {
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 135%;
      /* or 22px */


      color: #FFFFFF;
    }
  }

  &-item {
    & > b {
      font-family: Circe;
      font-style: normal;
      font-weight: bold;
      font-size: 24px;
      line-height: 120%;
      /* identical to box height, or 29px */


      color: #FFFFFF;
    }
  }
}

.cd4 {
  padding: 62px 0;

  h2 {

    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    line-height: 125%;
    /* identical to box height, or 45px */


    color: #333333;

    text-align: center;
  }

  &-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  &-item {
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 27px;
    line-height: 115%;
    /* or 31px */
    margin-top: 24px;

    text-align: center;

    color: #333333;

    background: rgba(238, 238, 255, 0.3);
    border: 1px solid rgba(238, 238, 255, 0.5);
    box-sizing: border-box;
    border-radius: 4px 50px 4px 4px;
    width: 364px;
    height: 125px;

  }
}

.cd5 {
  padding: 62px 0;
  background: rgba(246, 246, 246, 0.25);

  .wrap {
  }

  &-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: 40px;

    &:first-child {
      margin-top: 20px;
    }

    z-index: 5;

    b {
      padding-top: 7px;
      font-family: Circe;
      font-style: normal;
      font-weight: bold;
      font-size: 30px;
      flex-shrink: 0;
      line-height: 115%;
      margin: 0 25px;
      width: 130px;
      /* or 34px */


      color: #333333;

    }

    p {
      padding-top: 7px;

      flex-grow: 1;
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 135%;
      /* or 27px */


      color: #444444;

    }
  }

  &-number {
    width: 48px;
    height: 48px;
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    flex-shrink: 0;

    font-size: 18px;
    line-height: 115%;
    /* identical to box height, or 21px */


    color: #5F609D;

    background: #FFFFFF;
    border: 6px solid #6465A3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-left {
    width: 556px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 22px;
      background: #3E407D;
      width: 5px;

      border-radius: 50px;
      bottom: 0;
      top: 0;
    }
  }

  &-right {
    width: 404px;
    height: 404px;
    position: relative;

    &-item {
      width: 202px;
      height: 202px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      &:last-child {
        position: absolute;
        .ypos_ab;
        right: 0;
      }

      & > div {
        width: 171.44px;
        height: 171.44px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 20px 20px rgba(176, 178, 221, 0.1);

        border-radius: 50%;

        background: rgba(176, 178, 221, 0.4);

        & > div {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          border-radius: 50%;
          width: 140.88px;
          height: 140.88px;
          background: #FDFDFD;
          text-align: center;

          b {
            font-family: Circe;
            font-style: normal;
            font-weight: bold;
            font-size: 42px;
            line-height: 125%;
            /* identical to box height, or 52px */


            color: #444684;
          }

          span {
            font-family: Circe;
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 120%;
            /* or 19px */


            color: #444684;
          }
        }
      }
    }
  }
}

.header {
  z-index: 50;
}

.burger {
  display: none;
}

.d1-content {
  & > p {
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 140%;
    /* or 34px */


    color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 30px;
  }


}

.d1-label {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  /* Note: backdrop-filter has minimal browser support */
  position: absolute;
  border-radius: 15px;
  right: 240px;
  bottom: 120px;
  padding: 20px;
  width: 422px;

  display: flex;
  z-index: 5;
  align-items: center;

  p {
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 140%;
    /* or 22px */


    color: #333333;

  }

  &-img {
    flex-shrink: 0;
    margin-right: 20px;
  }
}

.d1-item .wrap {
  padding-top: 140px;
}

.d2 .wrap {
  flex-wrap: wrap;

}

.d2-img {
  flex-shrink: 0;
}

.d2-item {
  width: 33.33%;

  margin-bottom: 60px;
}

.d2 {
  margin-bottom: -60px;
}

.d3-item {
  width: 364px;

  p {
    height: 36px;

  }
}

.d4 .wrap {
  display: block;
}

.d4 {
  &-info {
    margin-top: 40px;

    img {
      position: absolute;
      top: 23px;
      left: 24px;
    }

    flex-grow: 1;
    background: #EEEEFF;
    border-radius: 0 0 20px 0;
    padding: 24px;
    position: relative;
    padding-left: 58px;
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 135%;
    /* or 24px */


    color: #444444;

  }

  &-flex {
    display: flex;
    justify-content: space-between;

    p {

      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 135%;
      /* or 22px */

      &:last-child {
        margin-bottom: 0;
      }

      color: #444444;
      margin-bottom: 20px;
    }
  }
}


.d5 {
  padding-bottom: 72px;

  h4 {

    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 125%;
    /* identical to box height, or 25px */


    color: #333333;
    margin-bottom: 20px;
  }

  &-row {
    display: flex;
    justify-content: space-between;
  }

  &-head {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    margin-bottom: 32px;
  }

  &-col {
    width: 31.7%;

  }

  &-li {
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 125%;
    /* identical to box height, or 20px */

    position: relative;

    &::before {
      content: "●";
      color: #5B5D99;

    }

    color: #000;

    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &-item {
    width: 31.7%;
    background: #FAFAFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 125%;
    padding: 15px;
    /* or 22px */


    color: #333333;

    img {
      flex-shrink: 0;
      margin-right: 10px;
    }
  }
}

.prefooter::after, .prefooter::before {
  background: #4D4E8D;
}

.prefooter .wrap {
  padding: 62px 15px;
  align-items: center;
}

.prefooter::before {
  border-radius: 0 200px 0 0;

}

.check {
  font-family: Circe;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 125%;
  /* or 17px */


  color: rgba(255, 255, 255, 0.6);
  margin-top: 18px;
}

.prefooter {
  &-select {
    flex-grow: 1;
    background: #FFFFFF;
    border-radius: 4px;
    cursor: pointer;
    height: 52px;

    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 125%;
    position: relative;

    &-item {
      padding: 5px 15px;
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 125%;
      .transition();

      &:hover {

        color: #999;
      }

      /* identical to box height, or 22px */

      color: black;

    }

    &-body {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      padding: 10px 0;
      background: white;
      left: 0;
      border-top: 1px solid #999;
    }

    &-head {
      color: black;

      svg {
        .transition();
      }

      display: flex;
      padding: 0 18px;

      &.active {
        svg {
          transform: rotate(180deg);
        }
      }

      align-items: center;
      height: 100%;
      justify-content: space-between;
    }
  }

  h3 {
    color: white;
  }

  &-left {
    width: 544px;
    margin-bottom: -24px;
  }

  &-qwiz {
    &-btns {
      display: flex;
      margin-top: 25px;
      justify-content: space-between;
    }

    &-flex {
      display: flex;
      justify-content: space-between;

      input {
        width: 160px !important;
        margin-right: 12px;
      }
    }

    &-next, &-prev {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Circe;
      font-style: normal;
      font-weight: bold;
      font-size: 18px;
      line-height: 125%;
      /* identical to box height, or 22px */
      border-radius: 4px;

      text-align: center;

      color: #FFFFFF;
      width: calc(50% - 7.5px)

    }

    &-next {

      cursor: pointer;
      background: #FD9739;
    }

    &-prev {
      cursor: pointer;
      border: 1px solid #FFFFFF;

    }

    &-count {
      margin-top: 10px;
      margin-bottom: 27px;
      text-align: center;
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 125%;
      /* identical to box height, or 20px */

      text-align: center;

      color: rgba(255, 255, 255, 0.7);

    }

    &-ttl {
      font-family: Circe;
      font-style: normal;
      font-weight: bold;
      font-size: 24px;
      line-height: 125%;
      /* or 30px */

      text-align: center;

      color: #FFFFFF;
    }

    background: linear-gradient(126.93deg, #6465A3 22.34%, #585A97 79.03%);
    box-shadow: 0px 0px 30px rgba(77, 78, 141, 0.05);
    border-radius: 20px;
    padding: 30px;
    width: 485px;

    &-step {
      display: none;
    }
  }
}

.footer-left{
  a{                 font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;                      color: #333333;
    line-height: 125%;
    text-decoration-line: underline;
  }
  .copy{
    margin: 10px 0;
  }
       display: block;
}
.prefooter-item{
  b{
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 125%;
    /* or 22px */


    color: #333333;
  }
  margin-top: 0;
  &:nth-child(2){
margin: 0 80px;  }
}
.footer-right{
  text-align: left;
  display: flex;
  text-decoration: none;

  div *{
    text-decoration: none;
    color: #333333;

  }
}
.cours{
  .d1-ul{
    color: #333333;
    li{
      color: #333333;

    }
  }
}
.cours-options{
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: 40px;
}
.cours-option{
  margin-top: 24px;
  width: 50%;
  b{
    font-family: Circe;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 125%;
    /* identical to box height, or 25px */


    color: #333333;

  }
  p{
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 135%;
    /* identical to box height, or 22px */


    color: #444444;

  }
}

.cd3-item{
  &>p{
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 135%;
    /* or 22px */


    color: #FFFFFF;
  }
}
.cd3n{
  h2{
    position: relative;
    z-index: 6;
  }
  .d3-bg{
    top: -140px;
    .xpos_ab;
  }
  .d3-footer{
    justify-content: flex-start;
  }
  .d3-footer .d3-option{
    margin-right:30px ;
    &:last-child{margin-right: 0}
  }
  .d3-img{
    position: static;
    width: 194px;
    height: 194px;
    border-radius: 4px 0px 0px 4px;

  }
  a{
    display: block;
  }
  .d3-item{
    padding-top: 0;
    align-items: center;
    display: flex;
    width: calc(50% - 12.5px);
  }
}

.cd4n{
  padding: 62px 0;
  h2{
    text-align: center;
    margin-bottom: 32px;
  }
  li{             font-size: 16px;
    color:#333;
    padding-left: 15px;
  }
  .d1-ul li::after{
    background: #5B5D99;
    width: 7px;
    height: 7px;
  }
  &-head{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #EDEDFA;;
    b{
      font-family: Circe;
      font-style: normal;
      font-weight: bold;       display: block;
      font-size: 22px;
      line-height: 125%;
      /* identical to box height, or 27px */


      color: #333333;

    }

    span{
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 125%;
      /* or 22px */


      color: #333333;
    }
  }
  &-img{
    width: 80px;
    flex-shrink: 0;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    img{.c_img;}
    margin-right: 24px;
  }
  &-item{
    width: 558px;
    background: #FAFAFF;
    border-radius: 15px;
    padding: 30px;
  }
  &-slider{
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
  }
}
.cd5n{
 padding: 62px 0;
  background: linear-gradient(126.93deg, #6465A3 22.34%, #585A97 79.03%), #C4C4C4;
  h2{
    color: white;
    margin-bottom: 32px;
  }
  .wrap{
    display: flex;
    justify-content: space-between;
  }
  &-icon{
    background: #FFFFFF;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    border-radius: 50%;
  }

  &-left{
    width: 485px;
    &-item{
      height: 70px;
      background: #585996;
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding-left:25px;
      padding-right: 30px;

      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 125%;
      /* or 22px */


      color: #FFFFFF;
      margin-bottom: 10px;
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
  &-right{
    width: 558px;
    &-item{
      display: flex;
      align-items: flex-start;
      margin-bottom: 25px;
      &:last-child{
        margin-bottom: 0;
      }
      p{
        font-family: Circe;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 135%;
        /* or 27px */


        color: #E4E5FF;

      }
      span{
        padding-top:6px;
        font-family: Circe;
        display: block;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        line-height: 115%;
        /* or 18px */
        width: 35px;
        flex-shrink: 0;


        /* 2 */

        color: #FD9739;
      }
      b{
        font-family: Circe;
        font-style: normal;
        font-weight: bold;
        font-size: 24px;
        line-height: 115%;
        /* identical to box height, or 28px */


        color: #FFFFFF;
        width: 140px;
        flex-shrink: 0;
      }
    }
  }
}
.cd6n-arrow{
  display: flex;
  align-items: center;
}
.cd6n{          background: #FAFAFF;
  padding: 62px 0;

  &-content{
        display: none;
  }
  &-step{
    margin-top: 25px;        width: 800px;

    h4{
      font-family: Circe;
      font-style: normal;
      margin-bottom: 0;
      font-weight: bold;
      font-size: 22px;
      line-height: 125%;
      span{
        font-weight: 400;
      }
      /* identical to box height, or 27px */


      color: #333333;

    }
    p{
      font-family: Circe;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 125%;
      /* or 22px */


      color: #444444;
    }
  }
  &-head{
               display: flex;
    align-items: center;
    cursor: pointer;
    .cd6n-arrow{
      .transition();
    }
    &.active{
      .cd6n-arrow{
        transform: rotate(180deg);
      }
    }
  }
  &-arrow{
    flex-shrink: 0;
  }
  &-time{
    font-family: Circe;
    font-style: normal;
    font-weight: normal;
    margin: 0 50px;
    
    font-size: 20px;
    display: flex;
    align-items: center;
    svg{
      margin-right: 5px;
    }
    flex-shrink: 0;
    
    line-height: 125%;
    /* identical to box height, or 25px */


    /* 1 */

    color: #5B5D99;
  }
  &-ttl{
    font-family: Circe;
    font-style: normal;
    flex-grow: 1;
    font-weight: bold;
    font-size: 26px;
    line-height: 125%;
    color: #333;
    span{
      color: #FD9739;
    }
  }

  &-item{
    padding: 40px;
  margin-bottom: 10px;
    background: #FFFFFF;
    box-shadow: 0px 0px 30px rgba(77, 78, 141, 0.05);
    border-radius: 10px;
    &:last-child{
      margin-bottom: 0;
    }
  }
}
.cd7n{
  padding: 62px 0;
  &-flex{
    display: flex;
    justify-content: space-between;
  }
  &-icon{
    flex-shrink: 0;
    margin-right: 10px;
  }
  &-item{
    font-family: Circe;                    width: 31.7%;

    font-style: normal;
    font-weight: normal;
    display: flex;align-items: flex-start;
    font-size: 22px;
    line-height: 125%;
    /* or 27px */


    color: #333333;
  }
}


.cd3n .d3-img{
  min-height: 100%;
}








/**
*
  Адаптивка
*
**/
@media only screen and(max-width: 1199px) {

  .md-show {
    display: block !important;
  }

  .md-hide {
    display: none !important;
  }

  .cd3n .d3-bg{
    display: none;
  }
  .d1-img {
    display: none;
  }
  .cd2 .wrap h2{
    br{
      display: none;
    }
  }
  .cd5n-left{
    width: 558px;

    margin-bottom: 30px;
  }
  .cd5n .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cd4n-item{
    margin-bottom: 30px;
    &:last-child{
      margin-bottom: 0;
    }
  }
  .cd4n-slider{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cd3-item {
    width: calc(50% - 10px);
  }

  .cd3-head > p {
    font-size: 14px;
    position: relative;
    top: -4px;
  }

  .cd3-item > b {
    font-size: 20px;
  }

  .cd3-head b {
    font-size: 32px;
    margin-right: 15px;
  }

  .d1-item .wrap {
    height: auto;
    padding-bottom: 50px;
    padding-top: 120px;
  }

  .d3-slider {
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .d4-left {
    width: 100%;
  }

  .chleb {
    padding-top: 70px;
    padding-bottom: 20px;
    border-radius: 0 0 100px 0;

  }

  .cours-content p {
    margin: 15px 0;
  }

  .chleb b {
    font-size: 32px;
  }

  .cours {
    padding-top: 0;
  }

  .cours .wrap {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
  }

  .cours-content p {
    font-size: 14px;

    br {
      display: none
    }
  }

  .cours-btn {
    width: 100%;
    height: 45px;
  }

  .cours-option {
    &s {
      margin-top: 30px;
      margin-bottom: 30px;
    }

    width: calc(50% - 7.5px);
  }

  .cours-option {
    p {
      margin: 0
    }
  }

  .cours-option b {
    font-size: 32px;
    margin-bottom: 0;
  }

  .cours {
    margin-top: 30px;

    h2 {
      margin-bottom: 0;
      font-size: 24px;
    }
  }

  .cours-content {
    padding-top: 35px;
    padding-bottom: 0;
  }

  .prefooter-right {
    margin-top: 60px;
  }

  .prefooter::after {
    width: 100%;
  }

  .prefooter .wrap {
    display: block;
  }

  .d4 .wrap {
    display: block;
  }

  .d4-right {
    width: 100%;
    margin-top: 40px;
  }

  .d3-item {
    margin-bottom: 40px;
  }

  .d2 .wrap {
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .d1 {
    border-radius: 0 0 250px 0;

  }

  .header {
    padding-top: 20px;
  }
  .d1-label{
    left: 432px;
    right: auto;
    width: 320px;
  }
  .d2-item{
    width: 50%;
  }
  .d5-item{
    font-size: 16px;
  }
  .prefooter-qwiz{
    margin-top: 30px;
  }
  .prefooter .wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .d4-flex p{
    
  }
  .d4-info
  {
    img{

      top: 14px;
      left: 5px;

    }
    margin-top: 20px;
    font-size: 16px;
    br{
      display: none;
    }
    padding: 15px;
    padding-left: 30px;
  }
  .d1-label{
    width: 100%;
    margin-top: 30px;
    position: static;
  }
  .d1-content .d1-ul li{
    font-size: 16px;
    br{
      display: none;
    }
  }
  .d1-content > p{
    font-size: 18px;
  }
  .footer .wrap{
    display: block;
  }
  .footer-right{
    margin-top: 40px;
  }
  .d2{
    margin-bottom: 0;
  }
}

.header-logo {
  display: flex;
  align-items: center;
}

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

  .sm-show {
    display: block !important;
  }

  .sm-hide {
    display: none !important;
  }

}

.burger-menu {
}

.dark {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: none;
  background: rgba(0, 0, 0, 0.61);
  z-index: 99;
}

.burger-menu {
  position: fixed;
  bottom: 0;
  top: 0;

  .header-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    left: 15px;
  }

  padding: 15px;

  .header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .header-logo {
    margin-bottom: 20px;
  }

  .header-menu {
    margin-left: 0;
  }

  .header-menu a {
    margin: 0;
    text-align: center;
    display: block;
    margin-bottom: 10px;
  }

  &-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .header-menu {
      display: block;
    }
  }

  background: linear-gradient(126.93deg, #6465A3 22.34%, #585A97 79.03%);
  width: 200px;
  z-index: 100;
  right: -200px;
  .transition();

  &.active {
    right: 0;
  }
}
.cd5n-left-item{
  min-height: 70px;
  padding-top: 15px;
  padding-bottom: 15px;
  height: auto;
}
.cd4n-item{
  max-width: 100%;
}
.prefooter-select-body{
  max-height: 200px;
  overflow-y: auto;
}
@media only screen and(max-width: 767px) {

  .xs-show {
    display: block !important;
  }

  .xs-hide {
    display: none !important;
  }
  .d5-item{
    width: 100%;
    margin-bottom: 15px;
    &:last-child{
      margin-bottom: 0;
    }
  }
  .prefooter-qwiz-prev{
    margin-bottom: 12px;
  }
  .prefooter-qwiz-flex input{
    width: 100% !important;
  }
  .prefooter-qwiz-next, .prefooter-qwiz-prev{
    height: 45px;
    width: 100%;
    font-size: 16px;
  }
  .prefooter-qwiz-btns{
    display: block;
  }
  .prefooter-item:nth-child(2){
    margin: 15px 0;
  }
  .footer-right{
    display: block;
  }
  .prefooter-qwiz{
    padding: 15px;
  }
  .prefooter-qwiz-flex{
    margin-bottom: 12px;
    display: block;
  }
  .prefooter-select{
    height: 45px;

  }
  .prefooter-qwiz-count{
    font-size: 14px;
    margin-bottom: 15px;
  }
  .prefooter-qwiz-ttl{
    font-size: 18px;
  }
  .d5-li:last-child{
    margin-bottom: 12px;
  }
  .d5-row{
    display: block;
  }
  .d5-col{
    width: 100%;
  }
  .d5-head{
    flex-wrap: wrap;
  }
  .d5 h4{
    font-size: 16px;
    margin-bottom: 10px;
  }
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }

  .cd4-item {
    width: 100%;
    padding: 20px;
    font-size: 24px;
    height: auto;
  }

  .cd2 .wrap {
    display: block;
  }

  .cd2 .wrap p, .cd2 .wrap h2 {
    width: 100%;

    br {
      display: none;
    }
  }

  .cd3-item:first-child {
    margin-bottom: 30px;
  }

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

  .cd5-item {
    margin-top: 20px;
  }

  .cd5-item p {
    font-size: 16px;

    br {
      display: none;
    }
  }

  .cd5-item b {
    font-size: 24px;
  }

  .cd5-right {
    display: flex;
    margin-top: 30px;
    height: auto;
    flex-direction: column;
    align-items: center;
  }

  .cd5-right-item:last-child {
    position: static !important;
    transform: none !important;
  }

  .cd5-flex {
    display: block;
  }

  .cd3-head {
    display: block;
  }

  .cd3-item {
    width: 100%;
  }

  .cd5-left {
    width: 100%;
  }

  .cd5-item b {
    display: block;
    margin: 0;
  }

  .cd5-item {
    width: 100%;
    position: relative;
    padding-left: 70px;
    display: block;

    .cd5-number {
      position: absolute;
      left: 0;
    }
  }

  .cd4 h2 {
    margin-bottom: 0;
  }

  .cd3, .cd4, .cd5 {
    padding: 30px 0;

    .wrap {
      display: block;
    }
  }

  .cd2 {
    margin-bottom: 30px;
  }

  [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }


  .header-menu, .header-btn {
    display: none;
  }

  .burger {
    display: flex;
    height: 20px;
    justify-content: space-between;
    width: 30px;
    flex-direction: column;

    div {
      background: white;
      width: 100%;
      height: 2px;
    }
  }

  .d1 {
    border-radius: 0;
    margin-bottom: 30px;
  }

  .d1-item .wrap {
    width: 100%;
    padding-top: 90px;
  }

  .d1-ttl {
    font-size: 28px;
  }

  .d2-item {
    width: 100%;
    margin-bottom: 15px;
  }

  .d1-item .wrap {
    padding-bottom: 50px;
  }

  .d1-btn {
    width: 100%;
    margin-top: 30px;
  }

  .d2-text {
    font-size: 18px;
  }

  .d3 ,.cd4n,.cd5n,.cd6n,.cd7n{
    padding: 30px 0;
  }

  .d3-content {
    padding: 15px;
  }

  .d3-item {
    width: 100%;
    margin-bottom: 20px;
  }

  .prefooter form input {
    height: 45px;
    padding-left: 15px;
  }

  .prefooter-right {
    margin-top: 30px;
  }

  h2 {
    font-size: 28px;
  }

  .prefooter-footer {
    margin-top: 15px;
  }

  .prefooter-footer p {
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
  }

  .prefooter-btn {
    margin-right: 0;
    width: 100%;
    height: 45px;
  }

  .prefooter-footer {
    flex-direction: column;
  }

  .prefooter-item {
    margin-top: 25px;
  }

  .prefooter-item b {
    font-size: 18px;
  }

  .prefooter .wrap h2 {
    margin-bottom: 25px;
  }

  .d4 {
    margin-bottom: 30px;
  }

  .prefooter .wrap {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .d2-img {
    margin-right: 15px;
  }

  .footer-left {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer-right {
    margin-top: 10px;
  }

  .footer-logo {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .footer .wrap {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer {
    padding: 30px 0;
  }

  .d4-flex {
    justify-content: space-around;
  }

  .d4-right {
    margin-top: 20px;
  }

  .d4-left p {
    font-size: 14px;
  }

  h3 {
    font-size: 18px;

    br {
      display: none;
    }
  }

  .d2-img {
    height: 60px;
    width: 60px;
    padding: 15px;
  }
  .cours-option{
    width: 100%;
    b{
      font-size: 24px;
    }
  }
  .cours-options{
    display: block;
  }
  .cd3n .d3-item{
    height: auto;
    display: block;
    width: 100%;
  }
  .cd3-item > p{
    font-size: 14px;
  }
  .cd6n-item{
    padding: 15px;
  }
  .cours h2{
    margin-bottom: 15px;
  }
  .cd6n-arrow{
    position: absolute;width: 32px;
    right: 0;
    bottom: -5px;
  }
  .cd7n-flex{
    display: block;
  }
    .cd7n-item{
      font-size: 18px;
      margin-top: 15px;
    width: 100%;
  }
  .cd6n-step p{
    font-size: 16px;
    margin-top: 5px;
  }
  .cd6n-step h4{
    font-size: 18px;
    br{
      display: none;
    }
  }
  .cd6n-head{
    display: block;
    position: relative;
  }
  .cd6n-time{
    margin: 0;
    font-size: 16px;
    margin-top: 10px;
  }
  .cd6n-ttl{              font-size: 20px;

    br{
      display: none;
    }
  }
  .cd3n .d3-img{
    height: 200px;
    width: 100%;                   border-radius: 4px 4px 0px 0px;

    min-height: 1px;
  }
  .cd5n-right-item span {
    padding-top: 4px;
  }
  .cd5n-right-item span{
    width: 24px;
  }
  .cd5n-right-item b{
    font-size: 20px;
  }
  .cd5n-right-item p{
    font-size: 16px;
  }
  .cd5n-right-item{
    flex-wrap: wrap;
  }
  .cd4n-head b{
    font-size: 18px;
  }
  .cd5n-left-item{
    height: auto;
    br{
      display: none;
    }
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .cd4n-head span{
    font-size: 16px;
  }
  .cd4n-img{
    margin-right: 0;
    margin-bottom: 15px;
  }
  .cd4n-head{
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .cd4n-item{
    padding: 15px;
  }

}


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

}


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

}


/**
*
  Owl Carousel
*
**/
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
  /* fix firefox animation glitch */
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
  background: none;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}

.owl-carousel.owl-loaded {
  display: block;
}

.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}

.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
  visibility: hidden;
}

.owl-carousel.owl-drag .owl-item {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-grab {
  cursor: move;
  cursor: grab;
}

.owl-carousel.owl-rtl {
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
  z-index: 0;
}

.owl-carousel .owl-animated-out {
  z-index: 1;
}

.owl-carousel .fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*
 *  Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out;
}

/*
 *  Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item {
  /**
      This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
      calculation of the height of the owl-item that breaks page layouts
     */
}

.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease;
}

.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
  max-height: 0;
}

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d;
}

/*
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease;
}

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
}

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease;
}

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}