:root {
  --black: #1A1A1A;
  
  --yellow: #F5E76E;
  --white: #EEF2F5;
  --gray-01: #262626;
  --gray-02: #363636;
  --secondary: #BABABA;
  --shadow-01: 0px 1px 3px 1px rgba(0, 0, 0, 0.14), 0px 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-02: 0px 2px 6px 2px rgba(0, 0, 0, 0.14), 0px 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-03: 0px 4px 8px 3px rgba(0, 0, 0, 0.14), 0px 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-04: 0px 6px 10px 4px rgba(0, 0, 0, 0.14), 0px 2px 3px rgba(0, 0, 0, 0.3);
  --shadow-05: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
  --yellow-90:rgba(245, 231, 110, 0.9);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-4: rgba(255, 255, 255, 0.04);
  --white-70: rgba(255, 255, 255, 0.7);


  --surface: #363636;
  --surface-hover: #404040;
  --white-100: #ffffff;
  --white-88:  rgba(255, 255, 255, 0.88);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-24: rgba(255, 255, 255, 0.24);
  --bg-night: #222;
}

/*--------------------------------------
фон
--------------------------------------*/
.restyled-first-screen {
  background-image: url(../lms/images/fon.jpg);
  padding-bottom: 0px;
  border-bottom: 1px solid var(--gray-01);
}

/*--------------------------------------
шрифты
--------------------------------------*/
h1{
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  color: var(--white-100);
}

h2{
  font-size: 50px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

.g-text__16{
  font-size: 16px;
  line-height: 130%;
  font-weight: 500;
}

.g-text__18{
  color: var(--white-70);
  line-height: 130%;
  font-weight: 400;
}

.g-text__20{
  font-weight: 400;
}

.g-text__20.bold{
  font-weight: 700;
}

.g-text__24 {
  font-size: 24px;
  line-height: 120%;
}

.g-text__30 {
  font-size: 30px;
  line-height: 34px;
}

.g-text__50 {
  font-size: 50px;
  font-weight: 700;
  line-height: 100%;
}

.g-text__64{
  font-size: 64px;
  line-height: 80%;
  font-weight: 700;
}

.medium{
  font-weight: 500;
}

/*--------------------------------------
цвета
--------------------------------------*/
.white-70{
  color: var(--white-70);
}

.white-88{
  color: var(--white-88);
}

.g-title{
  color: var(--yellow);
}

.border-yellow{
  border-left: 3px solid var(--yellow);
  padding: 5px 0px 5px 16px;
}

.text-yellow{
  color: var(--yellow);
  font-family: Noah-head, sans-serif;
}

h1{
  font-family: Noah-head, sans-serif;
}

.g-text__64 {
  font-family: Noah-head, sans-serif;
}

/*--------------------------------------
колонки
--------------------------------------*/

.col-1{
  padding: 0 10px;
}

.col-2{
  padding: 0 10px;
}

.col-3{
  padding: 0 10px;
}

.col-4{
  padding: 0 10px;
}

.col-5{
  padding: 0 10px;
}

.col-6{
  padding: 0 10px;
}

.col-7{
  padding: 0 10px;
}

.col-8{
  padding: 0 10px;
}

.col-9{
  padding: 0 10px;
}

.col-10{
  padding: 0 10px;
}

.col-11{
  padding: 0 10px;
}

.col-12{
  padding: 0 10px;
}



/*-----------------------------------
CTA
---------------------------------------*/

.CTA-box{
  box-sizing: border-box;
  width: 100%;
  height:600px;

  background: var(--gray-02);
  box-shadow:var(--shadow-05);
  border-radius: 30px;
  padding: 50px;
  position: relative;
  overflow: hidden;
}

.CTA-img{
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 600px;
  border-radius: 30px;
  z-index: 1;
}

.CTA-text{
  z-index: 10; 
  position: relative;
  height: 500px;
}

.CTA-text .restyled-first-screen__btns{
  position: absolute;
  bottom: 0px;
}

/*--------------------------------------
изображение
--------------------------------------*/

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-20 {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

/*--------------------------------------
position
--------------------------------------*/

.relative{
  position: relative;
}

/*--------------------------------------
карточки прозрачные
--------------------------------------*/

.border-box{
  position: relative;
  display: flex;
  height: 100%;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;

  border-radius: 20px;
  border: 1px solid var(--white-24);
}

.box-table-d:hover {
  cursor: pointer;
  background-color: var(--yellow);
  color: var(--black);;
  border-radius: 20px;
}

.count {
  display: flex;
  align-items: center;
  gap: 5px;
  bottom: 5px;
  right: 15px;
  color: var(--white-24);
  font-weight: 850;
  font-size: 30px;
}


/*--------------------------------------
flex
--------------------------------------*/

.flex-0{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0px;
  align-self: stretch;
}

.flex-10{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 10px;
  align-self: stretch;
  flex-wrap: wrap;
}

.flex-15{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 15px;
  align-self: stretch;
  flex-wrap: wrap;
}

.flex-20{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 20px;
  align-self: stretch;
  flex-wrap: wrap;
}

.flex-none{
  flex: none;
}

/*--------------------------------------
новый список
--------------------------------------*/
.g-list.new .g-list__item::before {
  display: inline-block;
  position: absolute;
  left: 0;
  content: url(../images/new/bb-new-list.svg);
}


/*--------------------------------------
список
--------------------------------------*/
.g-list.small .g-list__item {
  margin-bottom: 15px;
}




/*--------------------------------------
медиазапросы
--------------------------------------*/
@media (max-width: 767px) {

  /*--------------------------------------
  шрифты
  --------------------------------------*/

  .g-text__18 {
    font-size: 16px;
  }

  .g-text__20{
    font-size: 18px;
    line-height: 22px;
  }

  .g-text__24 {
    font-size: 20px;
    line-height: 120%;
  }

  .g-text__30 {
    font-size: 22px;
    line-height: 120%;
  }

  .g-text__50 {
    font-size: 36px;
    font-weight: 700;
    line-height: 100%;
  }
  
  .g-text__64 {
    font-size: 46px;
  }

  /*-----------------------------------
  CTA
  ---------------------------------------*/
  .CTA-box{
    padding: 30px 25px ;
    height: 100%
  }

  .CTA-img{
    height: 260px;
  }

  .CTA-text {
    height: 400px;
  }

  /*--------------------------------------
  карточки прозрачные
  --------------------------------------*/

  .border-box{
    padding: 15px 15px;
  }

  .count {
    font-size: 50px;
  }

  /*--------------------------------------
  flex
  --------------------------------------*/
  .flex-15{
    gap: 10px;
  }
}