html{
  scroll-behavior: smooth;
}
body{
  background-color: var(--ivory);
  max-width: 2000px;
  margin: auto;
}
::selection {
  background-color: var(--green); 
}

main{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(14, 1fr); 
  gap: var(--gap); 
}

section{
  grid-column: 2 / span 12;
  margin-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}


.small_text{
  font-family: 'Grafik-reg';
  font-size: 14.4px;
  line-height: 125%;
  max-width: 650px;
}

.medium_text{
  font-family: 'Grafik-reg';
  /* font-size: 18px; */
  font-size: clamp(14.4px, 1.3vw, 18px);
  line-height: 120%;
}

.main_text{
  font-family: 'Grafik-reg';
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: clamp(20px, 2.3vw, 31px);
  padding-right: 25%;
  max-width: 1100px;
}

h1{
  font-family: 'Meteor';
  /* font-size: 120px; */
  font-size: clamp(36px, 12vw, 120px);
  line-height: 76%;
  color: var(--black);
}

h2{
  font-family: 'Meteor';
  /* font-size: 64px; */
  font-size: clamp(36px, 6vw, 64px);
  line-height: 100%;
  color: var(--black);
}

h3{
  font-family: 'Meteor';
  /* font-size: 64px; */
  font-size: clamp(36px, 6vw, 64px);
  line-height: 76%;
  color: var(--black);
  opacity: 0.3;
}

h4{
  font-family: 'MeteorCondThin';
  /* font-size: 64px; */
  font-size: clamp(36px, 6vw, 64px);

  line-height: 87%;
  color: var(--black);
}

h5{
  font-family: 'Meteor';
  /* font-size: 32px; */
  /* line-height: clamp(18px, 3vw, 32px); */
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 100%;
  color: var(--black);
}

h6{
  font-family: 'Meteor';
  /* font-size: 24px; */ 
  /* line-height: 100%; */ 
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: clamp(18px, 3vw, 24px);
  color: var(--black);
  opacity: 0.4;
}

ul{
  list-style-type: disc;
  /* padding-left: 20px;  */
}
ol{
  list-style-type: decimal;
  padding-left: 10px;
}
li{
  padding-left: 20px; 
  margin-left: 20px;
}
ol > li{
  margin-bottom: 20px;
}
li .columns{
  columns: 420px;
  margin-top: 10px;
}

button{
  border: none;
}


.secondary{
  opacity: 0.5;
}





.grid_container_2_col{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: var(--gap);
}

.grid_container_4_col{
  display: grid;
  /* grid-template-columns: repeat(4, 1fr); */
  grid-template-columns: repeat(auto-fill, minmax(321px, 1fr));
  gap: var(--gap);
}

.container_3_col{
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: var(--gap);
}


.grid_container_large_col{
  /* display: none; */
  /* grid-template-columns: 1fr 1fr; */
  columns: auto 600px;
  gap: var(--gap);
}





.tag{
  margin: 0;
  padding: 7px 16px 8px 16px ;
  background-color: var(--snow);
  display: inline-block;
  border-radius: 10px;
}

.open{
  background-color: var(--green);
}

.tags_container{
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}


.course_card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-bottom: 10px;
  border-radius: 10px;
  background-color: var(--snow);
  overflow: hidden;
}
.course_card:hover{
  opacity: 0.7;
}
.course_card > img {
  object-fit: cover;
  min-height: clamp(250px, 20vw, 300px);
}
.course_card .tags_container{
  position: absolute;
  top: var(--gap);
  left: var(--gap);
}


.interview_card{
  background-color: var(--snow);
  overflow: hidden;
  border-radius: 10px;
  padding: 10px;
  height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.interview_card:hover{
  background-color: var(--hover);
}
.interview_card_date{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
}
.interview_card_theme_container{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.interview_card_theme_container>p{
  width: 55%;
}
.interview_card_substack_link{
  background-color: var(--green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  height: 390px;
}
.interview_card_substack_link:hover{
  background-color: var(--hover-green);
}





.person_card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  background-color: var(--snow);
  overflow: hidden;
  box-sizing:border-box;
  height: fit-content;
}
.person_card.transparent{
  display: none;
}

.text_block{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 10px;
}


.teacher_card{
  max-width: 1500px;
  display: flex;
  flex-direction: row;
  gap: clamp(30px, 6vw, 123px);
  background-color: var(--snow);
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
}
.teacher_card img{
  border-radius: 10px;
  width: 30%;
  object-fit: cover;
  margin-bottom: auto;
}
.teacher_card h2{
  margin-bottom: 40px;
}
.teacher_card .main_text{
  padding: 0;
}
.teacher_card>div{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.teacher_links{
  margin-top: 40px;
  display: flex;
  gap: 50px;
}
.teacher_links>.a{
  width: fit-content;
}

.cross,
.arrow{
  opacity: 0.5;
  width: clamp(15px, 1.4vw , 20px);
  height: clamp(15px, 1.4vw , 20px);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  flex-grow: 0;
}
.cross{
  position: absolute;
  top: 0;
  right: 0;
  transition: transform 0.3s;
  background-image: url('/content/icons/cross.svg');
}

.arrow{
  background-image: url('/content/icons/arrow.svg');
}
.arrow.download{
  background-image: url('/content/icons/download.svg');
}
.arrow.left{
  background-image: url('/content/icons/left.svg');
}
.arrow.right{
  background-image: url('/content/icons/right.svg');
}


.slider_container{
  width: 100vw;
  transform: translateX(-7%); 
  overflow-x: hidden;
  position: relative;
}
.slider::-webkit-scrollbar {
  display: none;
}
.slider{
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  box-sizing: border-box;
  overflow-x: scroll;
  width: 100vw;
  scroll-padding-left: 7%;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.slider::-webkit-scrollbar,
.mobile_slider_container::-webkit-scrollbar {
  display: none;
}
.slider > :first-child {
  margin-left: 7%;
}

.arrow_left,.arrow_right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--snow);
  opacity: 0.3;
  border: none;
  border-radius: 50%;
  color: var(--black);
  font-size: 54px;
  font-family: "Meteor";
  padding-bottom: 10px;
  cursor: pointer;
  z-index: 10;
  width: 70px;
  height: 70px;
}
.arrow_left:hover,.arrow_right:hover{
  opacity: 0.7;
}

.arrow_left {
  left: 20px;
}

.arrow_right {
  right: 20px;
}

.project_card{
  position: relative;
  scroll-snap-align: start;
  background-color: var(--snow);
  width: 432px;
  min-width: 432px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-bottom: 10px;
  border-radius: 10px;
  height: fit-content;
  overflow: hidden;
}
a.project_card:hover{
  opacity: 0.7;
}
.shield{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}
.project_card.wide{
  min-width: 610px;
}
.project_card.behance{
  width: auto;
}
.project_card.ideas{
  width: auto;
  margin-bottom: var(--gap);
}
.project_card > img{
  width: 100%;
}
.card_caption{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 10px;
}
.project_card.youtube_link_card{
  width: 432px;
  min-width: 432px;
  height: calc(432px * 0.65 - 10px);
  background-color: var(--snow);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project_card.youtube_link_card:hover{
  background-color: var(--hover);
}
.project_card.transparent{
  background: transparent;
  min-width: 40px;
  max-width: 40px;
}
.project_card.no_caption{
  padding-bottom: 0;
}
.behance_logo{
  width: 86px;
  background-image: url('/content/icons/behance_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
}


.review_card{
  background-color: var(--snow);
  border-radius: 10px;
  overflow: hidden;
  padding: 10px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.col{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}





.calendar_cell_month p{
  padding: 62px 0 6px 111px;
}
.calendar_line{
  background-color: var(--black);
  height: 1px;
  margin-left: 111px;
}

.calendar_cell_lesson_content, 
.calendar_date_time{
  display: flex;
  gap: var(--gap);
}

.calendar_date{
  width: 101px;
  padding: 9px 0 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.date{
  font-family: 'Meteor';
  font-size: 48px;
  line-height: 100%;
}
.time, .lesson_duration{
  padding: 35px 0;
  width: 100px;
  min-width: 100px;
}
.lesson_duration{
  text-align: right;
}
.calendar_lesson_block{
  display: flex;
  gap: var(--gap);
  width: 100%;
  justify-content: space-between;
}

.lesson_description{
  padding: 27px 0 31px 50px;
  width: fit-content;
}
.weekend{
  color: var(--red);
}






.FAQ_card {
  background-color: var(--snow);
  border-radius: 10px;
  overflow: hidden;
  padding: 15px 20px 10px 20px;
}
.FAQ_content{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.question{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  cursor: pointer;
  user-select: none;
  padding: 0;
}



.answer{
  max-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow: hidden;
  transition: max-height 0.3s ease, padding-bottom 0.3s ease;
}


.hidden:checked + .question + .answer{
  display: flex;
  max-height: 500px; 
  padding-bottom: 10px;
}

.hidden:checked + .question .cross {
  transform: rotate(45deg); 
}



.course_cover{
  grid-column: span 14;
  max-height: 400px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
.course_cover img{
  max-height: 43vw;
  min-height: 140px;
  object-fit: cover;
  object-position: center;
  min-width: 100vw;
}

.course_header{
  margin-bottom: 120px;
  gap: 0;
}
.course_header .tags_container{
  margin-bottom: 30px;
}
.course_headings_container{
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 80px;
}






#contacts>div{
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

.contact{
  padding: 400px 10px 10px 10px;
  background-color: var(--snow);
  border-radius: 10px;
  overflow: hidden;
} 
.contact:hover{
  background-color: var(--hover);
}





#white_rect{
  background-color: var(--snow);
  width: 100vw;
  /* height: 261px; */
  height: clamp(120px, 20vw, 261px);
}
.main-logo{
  width: 100%;
  /* height: 175px; */
  height: clamp(51px, 15vw, 175px);
  position: absolute;
  top: calc(4px + clamp(120px, 20vw, 261px) - clamp(51px, 15vw, 175px));
  background-image: url('/content/icons/werkstatt_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  margin: 0 ;
}
.h1-logo{
  width: 100%;
  height: clamp(45px, 7.5vw, 85px);
  margin-top: calc(4px + clamp(120px, 20vw, 261px) - clamp(51px, 15vw, 175px));
  background-image: url('/content/icons/werkstatt_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.lead{
  font-family: 'Grafik-reg';
  /* font-size: 32px; */
  /* line-height: 120%; */
  font-size: clamp(14.4px, 4vw, 32px);
  line-height: clamp(18px, 4.5vw, 38.5px);
  text-align: center;
  padding: 58px 19% 150px 19%;
}



.digits{
  display: grid;
  grid-template-columns: repeat(12, 1fr); 
  gap: var(--gap);
}
.digit_box{
  background-color: var(--green);
  border-radius: 10px;
  height: clamp(180px, 18vw, 211px);
  position: relative;
}
.block{
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.block>.digit{
  display: flex;
}
.digit_corner{
  position: absolute;
  top: 8px;
  left: 10px;
}
.digit{
  font-family: 'MeteorCondThin';
  font-size: clamp(80px, 12vw, 160px);
  line-height: 50%;
  text-align: center;
  margin-top: 50px;
}
.digit_caption{
  font-family: 'MeteorCondThin';
  font-size: clamp(20px, 3vw, 40px);
  line-height: 80%;
  text-align: center;
  margin-top: 23px;
}
.price{
  font-family: 'MeteorCondThin';
  font-size: clamp(56px, 4vw, 64px);
  line-height: 100%;
  text-align: center;
  margin: 18px auto auto auto ;
}
.currency{
  font-size: 36px;
}

#research_digits>._1{
  grid-column: 1 / span 3;
}
#research_digits>._2{
  grid-column: 4 / span 3;
}
#research_digits>._3{
  grid-column: 7 / span 3;
}
#research_digits>._4{
  grid-column: 10 / span 3;
}

#research_digits>.note1{
  grid-column: 4 / span 3;
}
#research_digits>.note2{
  grid-column: 7 / span 3;
}
#research_digits>.note3{
  grid-column: 10 / span 3;
}




#tolia_digits>._1{
  grid-column: 1 / span 2;
}
#tolia_digits>._2{
  grid-column: 3 / span 3;
}
#tolia_digits>._3{
  grid-column: 6 / span 2;
}
#tolia_digits>._4{
  grid-column: 8 / span 2;
}
#tolia_digits>._5{
  grid-column: 10 / span 3;
}
#tolia_digits>.note1{
  grid-column: 3 / span 3;
}
#tolia_digits>.note2{
  grid-column: 6 / span 4;
}
#tolia_digits>.note3{
  grid-column: 10 / span 3;
}


#holystick_digits>._1{
  grid-column: span 4;
}
#holystick_digits>._2{
  grid-column: span 4;
}
#holystick_digits>._3{
  grid-column: span 4;
}
#holystick_digits>.note1{
  grid-column: 5 / span 4;
}
#holystick_digits>.note2{
  grid-column: 9 / span 4;
}


#pasha_digits>._1{
  grid-column: span 4;
}
#pasha_digits>._2{
  grid-column: span 4;
}
#pasha_digits>._3{
  grid-column: span 4;
}
#pasha_digits>.note1{
  grid-column: 5 / span 4;
}
#pasha_digits>.note2{
  grid-column: 9 / span 4;
}


#artem_digits{
  grid-template-columns: repeat(5, 1fr); 
}
#artem_digits>.digit_box{
  height: 239px;
}
#artem_digits>.note1{
  grid-column: 3 / span 2;
}

#creativity_digits>._1{
  grid-column: span 4;
}
#creativity_digits>._2{
  grid-column: span 4;
}
#creativity_digits>._3{
  grid-column: span 4;
}
#creativity_digits>.note1{
  grid-column: 5 / span 4;
}
#creativity_digits>.note2{
  grid-column: 9 / span 4;
}


#apply{
  position: relative;
  padding-top: 60px; 
  margin-top: -60px;
}
#apply > .grid_container_2_col{
  grid-template-columns: 1fr 1fr;
}
.apply_card{
  background-color: var(--snow);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.apply_card h4{
  margin: 9px 0 43px 0;
}
.apply_card > .small_text{
  width: 86%;
}
.apply_card .price{
  font-size: 32px;
  text-align: left;
  margin: 0 0 32px 0;
}
.apply_card .digit_box{
  background-color: transparent;
  margin-top: auto;
}
.apply_card > .digit_box{
  width: 33%;
}
.apply_card .digit_caption{
  font-size: clamp(20px, 2.8vw, 32px);
}
.apply_card > .button{
  margin-top: auto;
}
.apply_button_container{
  display: flex;
  gap: 20px;
  align-items: baseline;
  margin: 40px 0 0 0;
}



.buttons_container{
  display: flex;
  gap: var(--gap);
  margin-top: 40px;
}


.button{
  display: flex;
  justify-content: center;
  gap: var(--gap);
  width: fit-content;
  min-width: fit-content;
  max-height: 54px;
  font-family: 'Grafik-reg';
  font-weight: normal;
  /* font-size: 18px; */
  font-size: clamp(14.4px, 1.3vw, 18px);
  background-color: var(--green);
  color: var(--black);
  border-radius: 10px;
  box-sizing: border-box;
  text-decoration: none;
  padding: 16px 24px 18px;
  cursor: pointer;
}
.button:hover{
  background-color: var(--hover-green);
}
.button.outlined{
  background-color: transparent;
  border: 3px var(--green) solid;
  padding: 13px 21px 15px;
}
.button.outlined:hover{
  background-color: var(--green);
}
.button.grey{
  background-color: var(--ivory);
}
.button.grey:hover{
  background-color: var(--snow);
  border: var(--ivory) 1px solid;
  padding: 15px 23px 17px;
}

.button.fixed{
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 10;
}
.button.inactive{
  background-color: #f0f0f0;
  color: #9c9c9c;
  cursor: not-allowed;
}
.button.white{
  background-color: var(--snow);
  color: var(--black);
}
.button.white.inactive{
  background-color: var(--snow);
  opacity: 0.3;
  color: var(--black);
}

.button.white:hover{
  border: 1px #b2b2b2 solid;
  padding: 15px 23px 17px;
}












nav{
  display: block;
  z-index: 100;
  position: fixed;
  transition: top 0.3s ease;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px); 
  -webkit-backdrop-filter: blur(15px);
}
nav.hidden{
  display: block;
  top: -60px;
}
.logo_nav{
  display: block;
  width: 150px;
  height: 100%;
  margin: auto;
  background-image: url('/content/icons/werkstatt_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nav_links_container{
  position: absolute;
  right: 0;
  top: 0;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;  
  gap: var(--gap);
  margin: 0 20px;
}
.nav_links{
  display: flex;
  flex-direction: row;
  align-items: center;  
  gap: var(--gap);
}

.nav-button{
  font-family: 'Grafik-reg';
  font-size: 14.4px;
  line-height: 125%;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.075s;
  height: 60px;
  min-width: 80px;
  width: fit-content;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.nav-button:hover{
  background-color: rgba(255, 255, 255, 0.4);
}
.nav-button.isPressed{
  background-color: rgba(255, 255, 255, 0.7);
}

#school-nav-button{
  display: block;
}
#mobile-menu{
  display: none;
}

#authBtn,
#userBtn{
  width: 60px;
  min-width: 60px;
  /* padding: 0 10px; */
}



.nav-dropdown-menu{
  display: none;
  flex-direction: column;
  padding: 10px;
  position: fixed;
  right: 0;
  top: 61px;
  z-index: 100;
  width: 286px;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.nav-dropdown-menu.show{
  display: flex;
}



#personal-menu .personal-info{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 10px 15px 10px;
}
#personal-menu .actions{
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

#dropdown-icon{
  display: inline-block;
  width: 15px; 
  height: 15px;
  background-color: transparent;
  background-image: url('/content/icons/dropdown_closed.svg');
}
#dropdown-icon.open{
  background-image: url('/content/icons/dropdown_opened.svg');
}


.dropdown-link{
  padding: 7.5px 10px;
  text-decoration: none;
  border-radius: 10px;
  background-color: transparent;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.dropdown-link:hover{
  background-color: rgba(255, 255, 255, 0.4);
}











footer{
  display: grid;
  grid-template-columns: repeat(14, 1fr); 
  gap: var(--gap); 
}
footer>.line{
  grid-column: 2 / span 12;
  margin-bottom: 15px;
}
.footer_logo{
  display: block;
  grid-column: 2 / span 2;
  min-width: 212px;
  background-image: url('/content/icons/werkstatt_logo.svg');
  background-repeat: no-repeat;
  height:110%;
  transform: translateY(-4px);
}
.first_text{
  grid-column: 4 / span 4;
}
.second_text{
  grid-column: 8 / span 3;
}
.policies{
  grid-column: 11 / span 3;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer_links{
  grid-column: 4 / span 4;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 50px 0 50px 0;
}
.line{
  width: 100%;
  height: 1px;
  background-color: var(--black);
}












#student-works{
  grid-column: span 14;
  gap: var(--gap);
}
.carousel_container{
  width: 100vw;
  overflow-x: hidden;
  position: relative;
}

.carousel{
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  box-sizing: border-box;
  margin: 0 10px;
  width: fit-content;
  height: 340px;
}
.running_line{
  font-family: 'MeteorCondThin';
  font-size: 80px;
  height: fit-content;
  line-height: 100%;
  background-color: var(--green);
  gap: 80px;
  animation: scroll-carousel 10s linear infinite;
  padding: 10px  40px;
  width: max-content;
  user-select: none;
}
.shift{
  transform: translateX(-7%); 
}


.carousel_card{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  width: fit-content;
}
.carousel_overlay{
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}
.carousel_overlay > p{
  transform: translateY(50px);
  transition: transform 0.07s ease;
}
.carousel_card img, .carousel_card video {
  height: 100%;
  object-fit:contain;
}
.carousel_card:hover .carousel_overlay{
  opacity: 1;
}
.carousel_card:hover .carousel_overlay p{
  transform: none;
}
/* #line1,#line3{
  animation: scroll-carousel 45s linear infinite;
  will-change: transform;
}
#line2{
  animation: scroll-carousel_reverse 45s linear infinite;
  will-change: transform;
} */
@keyframes scroll-carousel {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
}
@keyframes scroll-carousel_reverse {
  0% {transform: translateX(-50%);}
  100% {transform: translateX(0%);}
}
.freeride_description{
  display: grid;
  grid-template-columns: 6fr 5fr; 
  gap: 40px;
}
.freeride_description>.main_text{
  padding-right: 0;
}









.hidden{
  display: none;
}
a.no_decor, a:hover{
  text-decoration: none;
}
a, a:link, a:visited, a:hover, a:active, a:focus{
  color: var(--black);
  -webkit-text-fill-color: var(--black) !important; /* This forces color on iOS */
  -webkit-tap-highlight-color: transparent !important; /* Removes tap highlight on iOS */
  text-decoration-color: var(--black);
}
#authBtn, #cookie_accept{
  color: var(--black) !important;
}
a.small_text{
  text-underline-offset: 3px;
}
b{
  font-family: 'Grafik-bold';
}







.payment_form{
  background-color: var(--ivory);
  position: fixed;
  z-index: 99;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(800px, 57vw, 1143px);

  padding: 90px clamp(15px,7vw,144px) 100px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 40px;

  /* filter: drop-shadow(-20px 0 10px #dbdbdb); */
  box-shadow: 20px 0 60px black;

  overflow-y: scroll;

  transform: translateX(120%);
  transition: transform 0.5s ease;
}

.payment_form.static{
  position: relative;
  width: 100%;
  box-shadow: none;
  transform: none;
  transition: none;
  padding-top: 0;
}

.payment_form > form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  width: 100%;
  gap: 20px;
}

h4 + h5{
  margin-top: 10px;
}

.payment_form .close_btn.cross{
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 90px;
  right: clamp(15px, 7vw, 144px);
  transform: rotate(45deg);
  width: 30px;
  height: 30px;
}

.payment_form h4{
  padding-right: 40px;
}

.form_field_container{
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

input[type="email"]::placeholder,
input[type="text"]::placeholder {
  color: var(--black);
  opacity: 0.3;
}

input[type="text"],
input[type="email"],
.payform-tbank-row {
  font-family: 'Grafik-reg';
  /* font-size: 18px; */
  font-size: clamp(14.4px, 1.3vw, 18px);
  background-color: var(--snow);
  border-radius: 10px;
  border: 1px solid var(--snow);
  margin: 0;
  box-sizing: border-box;

  /* padding: 0 20px; */
  padding: 10px 20px 12px 20px;
  outline: none;
  width: 100%;
  height: 54px;
}
textarea.payform-tbank-row{
  height: auto;
}
input[type="text"]:focus,
input[type="email"]:focus,
.payform-tbank-row:focus:not(.button){
  background-color: #FFFFFF;
  border: 1px solid #8a8e94;
}
input[type="text"].wasInFocus:not(:focus):invalid,
input[type="email"].wasInFocus:not(:focus):invalid,
.payform-tbank-row.wasInFocus:not(:focus):invalid {
  border-color: red;
  background-color: #ffdddd;
}
.payform-tbank-btn {
  background-color: var(--green);
  color: var(--black);
  height: 58px;
}

textarea{
  resize: none;
}

.radio_container{
  margin-top: 10px;
  display: flex;
  gap: 40px;
}
.radio_container > div{
  display: flex;
  position: relative;
  gap: 15px;
}
.radio_container label,
.checkbox_container label{
  cursor: pointer;
}

.checkbox_container{
  margin-top: 30px;
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 30px;
  height: 30px;
  background-color: var(--snow);
  border: 1px solid #8a8e94;
  border-radius: 4px;
  margin: 5px 0;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: var(--green);
}


/* Добавляем кружок внутри активного радиобаттона */
input[type="radio"]:checked::before{
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--green);
  border: 1px solid #8a8e94;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  cursor: pointer;
}

input[type="radio"]:not(:checked)::before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--snow);
  border: 1px solid #8a8e94;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  cursor: pointer;
}
#email_busy_warning{
  display: none;
}
#emailContainer.email_busy{
  #email_busy_warning{
    max-width: none;;
    display: block;
    color: var(--red);
    span{
      text-decoration: underline;
      cursor: pointer;
    }
  }


}







.thankyou{
  margin-top: 20vh;
  margin-bottom: 20vh;
  align-items: center;
  text-align: center;
}
.no_padding{
  padding: 0;
}
.thankyou.narrow{
  max-width: 800px;
  justify-self: center;
}
.buttons_with_caption{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: center;
}

.login_section{
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: 432px;
  justify-self: center;
  text-align: center;
}
.login_section .main_text{
  text-align: center;
  padding: 0;
}

.login_section .button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--gap);
}

.login-divider{
  text-align: center;
  margin: 10px auto;
}

#email-login-form{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  
}








#personal_info{
  display: flex;
  flex-direction: column;
  background-color: var(--snow);
  border: none;
  border-radius: 10px;
  padding: 20px;
  max-width: 1200px;
}

.profile-data-container{
  margin: 25px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto); 
  grid-auto-flow: column; 
  width: 100%;
  gap: 5px 30px;
}

.profile-data-line{
  height: 54px;
  display: flex;
  align-items: baseline;
}

.profile-data-label{
  display: block;
  font-family: 'Grafik-reg';
  font-size: 14.4px;
  line-height: 125%;
  opacity: 0.5;
  width: 90px;
  min-width: 90px;
  margin-top: 20px;
}

.profile-data{
  display: block;
  font-family: 'Grafik-reg';
  /* font-size: 18px; */
  font-size: clamp(14.4px, 1.3vw, 18px);
  line-height: 125%;
  margin-left: 10px;
}

input.profile-data-input{
  display: none;
  border: #B8B8B8 1px solid;
  box-sizing: border-box;
  border-radius: 10px;
  padding-left: 20px;
}

.profile-bottom-info{
  display: flex;
  gap: 100px;
  max-width: unset;
}
.profile-bottom-info .buttons_container{
  margin: 0;
}

.profile-bottom-info .button{
  min-width: 180px;
}









.latest_lesson_card{
  background-color: var(--snow);
  border-radius: 10px;
  width: 100%;
  max-height: 450px;
  padding: 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* overflow: hidden; */
}
.latest_lesson_card > div{
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: space-between;
}
.image_container{
  overflow: hidden;
  width: 100%;
  max-height: clamp(200px, 19vw, 410px);
  display: flex;
  justify-content: center;
}
.image_container > img{
  object-fit: cover;
  object-position: center;
  height: 100%;
}

.grid_medium_columns{
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(421px, 1fr));
  gap: var(--gap);
}

.grid_wide_columns{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(570px, 1fr));
  gap: var(--gap);
}

.lesson_card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 250px;
  background-color: var(--snow);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.lesson_card.tall{
  height: 400px;
  p{
    margin-bottom: 10px;
  }
  input{
    background-color: var(--ivory);
  }
  .button:hover{
    background-color: var(--green);
  }
}

.lesson_card > div{
  display: flex;
  justify-content: space-between;
}

.lesson_card.inFuture{
  opacity: 0.5;
}








#next-lesson-widget{
  position: fixed;
  right: 0;
  left: 0;
  top: 61px;
  z-index: 99;
  max-height: 100px;
  overflow: hidden;
  transition: top 0.3s ease, max-height 0.3s ease;
  
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

#next-lesson-widget.hidden{
  display: block;
  max-height: 0px;
  top: 0px;
}



#next-lesson-widget > div{
  max-width: 1780px;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 96px;
  padding: 10px 30px;
  box-sizing: border-box;
}

#next_lesson_caption{
  min-width: 82px;
  flex-shrink: 1;
}



.next_lesson_date_container{
  flex-shrink: 0;
  display: flex;
  gap: clamp(10px, 1.5vw, 30px);
  align-items: center;
  margin: 0 clamp(20px, 3vw, 80px) 0 clamp(20px, 3vw, 80px);
}
#next-lesson-widget #onAirNow{
  display: none;
  margin: 0 clamp(20px, 3vw, 80px) 0 clamp(20px, 3vw, 80px);
  background-color: var(--red);
  color: var(--snow);
  align-items: baseline;
  cursor: default;

  > div{
    height: 11px;
    width: 11px;
    background-color: var(--snow);
    border-radius: 50%;
    animation: pulse 1.5s infinite ease-in-out;
  }
}

@keyframes pulse {
  10%, 90% {
    opacity: 1;
  }
  45%, 55% {
    opacity: 0.1;
  }
}

#next-lesson-widget.onAir .next_lesson_date_container{
  display: none;
}

#next-lesson-widget.onAir #onAirNow{
  display: flex;
}

.next_lesson_date{
  display: flex;
  flex-direction: column;
  background-color: var(--ivory);
  border-radius: 10px;
  align-items: center;

  padding: 10px 16px 6px 16px;
  box-sizing: border-box;
}
.next_lesson_title_container{
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  margin-right: auto;
}

#day{
  font-family: 'Meteor';
  font-size: clamp(30px, 3.3vw, 48px);
  line-height: 80%;
  /* font-size: 48px; */
  /* line-height: 40px; */
}

#next-lesson-widget .buttons_container{
  margin: 0;
  padding-left: clamp(20px, 3vw, 50px);
  flex-shrink: 0;
}







.button.wide{
  width: 100%;
}
.button_caption{
  transform: translateY(10px);
}
.lesson_buttons_container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
#hw_upload > p{
  max-height: 0px;
  overflow: visible;
}





.current_course_card{
  position: relative;
  grid-column: span 3;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  gap: 20px;
  border-radius: 10px;
  background-color: var(--snow);
  min-height: 320px;
  margin-bottom: 20px;
}
.current_course_card > div{
  width: calc(50% - 40px);
}
.current_course_card > img{
  width: calc(50% - 20px);
  object-fit: cover;
}
.current_course_card .tags_container{
  margin-top: 20px;
}
.current_course_card .tag{
  background-color: var(--ivory);
}
.current_course_card .tag.open{
  background-color: var(--green);
}
.current_course_card .text_block{
  margin: 20px 0 0 0;
}

.current_course_card h5{
  font-size: clamp(24px, 3.5vw, 64px);
  line-height: 90%;
}
.current_course_card h6{
  font-family: 'Grafik-reg';
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: clamp(20px, 2vw, 31px);
  margin-top: 10px;
}

.progressbar{
  position: absolute;
  bottom: 20px;
  width: calc(50% - 20px);
}
.greybar{
  margin-top: 5px;
  height: 9px;
  width: 100%;
  background-color: var(--ivory);
}
.greenbar{
  height: 9px;
  background-color: var(--green);
  width: 90%;
}


#cookie_notice{
  display: flex;
  position: fixed;
  left: 40px;
  bottom: 40px;
  gap: 20px;
  width: 310px;
  height: 70px;
  padding: 10px 10px 10px 20px;
  box-sizing: border-box;
  align-items: center;
  border-radius: 10px;

  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px); 
  -webkit-backdrop-filter: blur(15px);
}

#cookie_accept{
  font-family: 'Grafik-reg';
  font-size: 14.4px;
  height: 50px;
  min-height: 50px;
  width: 50px;
  min-width: 50px;
  background-color: transparent;
  border: 1px rgb(213, 213, 213) solid;
  border-radius: 10px;
  cursor: pointer;
}
#cookie_accept:hover{
  background-color: rgba(255, 255, 255, 0.9);
}




.subtitle{
  font-family: 'Grafik-bold';
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: clamp(20px, 2.3vw, 31px);
  max-width: 1100px;
  margin-bottom: -30px;
  margin-top: 10px;
}

.columns{
  columns: 335px;
  gap: var(--gap);
  /* font-size: 18px; */
  font-size: clamp(14.4px, 1.3vw, 18px);
}
.info_rect{
  background-color: var(--snow);
  padding: 20px;
  margin-bottom: var(--gap);
  border-radius: 10px;

  font-family: 'Grafik-reg';
  /* font-size: 18px; */
  font-size: clamp(14.4px, 1.3vw, 18px);
  line-height: 120%;
  break-inside: avoid;
}
.info_rect.wide{
  column-span: 2;
}






.hotkeys{
  display: inline-block;
  padding: 15px 20px;
  background-color: rgb(238, 238, 238);
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 10px;
  color: var(--black);
}
a.dotted{
  text-decoration: underline dotted var(--red);
  text-underline-offset: 3px;
}
.info_rect a{
  text-decoration: underline dotted var(--red);
  text-underline-offset: 3px;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
}

.info_rect a:hover{
  text-decoration: underline solid var(--red);
}

.info_rect > img{
  width: 100%;
}

section.lesson_header{
  gap: 10px;
  margin-bottom: 40px;
}
section.lesson_header .tags_container{
  margin-top: 10px;
}

section.lesson_header h2{
  max-width: 1100px;
}

section#lessons_recording{
  gap: 20px;
}



.no_margin{
  margin: 0;
}




.list_on_white{
  background-color: var(--snow);
  padding: 20px 40px;
  border-radius: 10px;
}


.mobile-only{
  display: none;
}






#login-popup{
  z-index: 9999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: max-content; */
  /* min-width: 375px; */
  /* height: max-content; */
  /* min-height: 450px; */
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px); 
  -webkit-backdrop-filter: blur(15px);
  /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); */
  padding: 40px;

  #login-container{
    max-width: 432px;
    background-color: var(--ivory);
    padding: 80px;
    position: relative;
  }
  .login_section{
    max-width: 432px;
    padding: 0;
    margin: 0;

    .main_text{
      margin-bottom: 40px;
    }
  }

  #loginCloseBtn{
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background-image: url('/content/icons/close.svg');
    z-index: 9;
    cursor: pointer;

  }
}
#login-popup.hidden,
.login_section.hidden{
  display: none;
}



































@media (hover: none) and (pointer: coarse) {
  .course_card:hover ,
  a.project_card{
      opacity: 1 !important;
  }
  .button:hover,
  .interview_card_substack_link:hover{
    background-color: var(--green) !important;
  }
  .button.button.outlined:hover,
  .interview_card:hover,
  .project_card.youtube_link_card:hover,
  .contact:hover{
    background-color: var(--snow) !important;
  }
  .arrow_left,.arrow_right {
    display: none;
  }
}





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

  .desktop-only{
    display: none;
  }


  main{
    display: flex;
    flex-direction: column;
    gap: 0; 
  }
  main.login{
    align-items: center;
  }

  section{
    padding: 0 3vw;
    margin-bottom: 40px;
    gap: 15px;
  }


  .small_text{
    line-height: 140%;
  }
  .tag.small_text{
    font-size: 12px;
  }

  .main_text{
    padding-right: 0;
  }

  li{
    padding-left: 0;
    margin-left: 10px; 
  }
  ol > li{
    margin-bottom: 12px;
  }


  .subtitle{
    margin-bottom: -10px;
    margin-top: 10px;
  }



  .grid_container_2_col, 
  .container_3_col, 
  .grid_wide_columns,
  .grid_medium_columns{
    display: flex;
    flex-direction: column; 
    gap: var(--gap);
  }

  .container_3_col{
    gap: 5px;
  }


  .profile-bottom-info .button{
    min-width: unset;
  }



  /* person cards !!!! */
  .mobile_slider_container{
    width: 100vw;
    transform: none;
    transform: translateX(-3vw);
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* -webkit-overflow-scrolling: touch; */
    scroll-padding-left: 3vw;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .mobile_slider{
    display: flex;
    gap: 5px;
    margin: 0 3vw;
    
  }
  .mobile_slider > .person_card{
    min-width: 260px;
    scroll-snap-align: center;
  }
  .mobile_slider > .person_card.transparent{
    display: flex;
    min-width: 40px;
    max-width: 40px;
    background: transparent;
  }
  
  
  .interview_card, .interview_card_substack_link{
    height: 57vw;
  }
  .interview_card_theme_container{
    gap: 5px;
  }
  .interview_card_theme_container>p{
    width: 80%;
  }

  

  .course_card > img {
    min-height: 50vw;
  }

  
  .teacher_card{
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
  .teacher_card img{
    width: 75%;
    max-width: 320px;
  }
  .teacher_card h2{
    margin-bottom: 20px;
  }
  .teacher_card>div, .teacher_links{
    gap: 20px;
  }

  .teacher_links{
    margin-top: 40px;
  }

  
  /* .cross, .arrow{
    width: 16px;
    height: 16px;
  } */
  
  .slider{
    gap: 5px;
    scroll-padding-left: 3vw;

  }
  .slider_container{
    width: 100vw;
    transform: none;
    transform: translateX(-3vw);
  }
 
 
  .slider > :first-child {
    margin-left: 3vw;
  }


  
  .project_card, .project_card.wide{
    scroll-snap-align: center;
    width: 280px;
    min-width: 280px;
  }
 

  .project_card.youtube_link_card{
    width: 280px;
    min-width: 280px;
    height: calc(280px * 0.65);
  }
  .project_card.transparent{
    background: transparent;
    min-width: 40px;
    max-width: 40px;
  }
  .behance_logo{
    width: 58px;
  }
  
  .card_caption > .arrow{
    transform: translateY(3px);
  }
  
  .review_card{
    padding: 8px 10px 10px 10px;
  }
  .col{
    gap: 5px;
  }
  
  
  
  
  
  .calendar_cell_month p{
    padding: 30px 0 3px 0;
  }
  .calendar_line{
    opacity: 0.5;
    margin-left: 0;
  }
  
  .calendar_date_time{
    flex-direction: column;
    gap: 3px;
    padding: 10px 0;
  }
  .calendar_date_time .small_text{
    font-size: 11px;
  }
  
  .calendar_date{
    width: clamp(40px, 12vw, 50px);
    padding: 0;
  }
  .date{
    font-size: clamp(28px, 6vw, 64px);
  }
  .time{
    padding: 0;
    width: clamp(40px, 12vw, 50px);
    min-width: clamp(40px, 12vw, 50px);
    text-align: center;
  }
  .lesson_duration{
    text-align: left;
    opacity: 0.6;
    padding: 0;
    width: 100%;
  }
  .calendar_lesson_block{
    gap: 5px;
    flex-direction: column;
    padding: 10px 0;
    justify-content: flex-start;
  }
  
  .lesson_description{
    padding: 0;
  }
  
  
  
  
  
  .FAQ_card {
    padding: 7px 10px 10px 10px;
  }
  .FAQ_content{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .question,.answer{
    gap: 5px;
  }

  .hidden:checked + .question + .answer{
    padding-bottom: 0;
  }

  
  
  
  .course_cover{
    margin-bottom: 25px;
    margin-top: 44px;
  }
  
  .course_header{
    margin-bottom: 40px;
  }
  .course_header .tags_container{
    margin-bottom: 15px;
  }
  .course_headings_container{
    gap: 15px;
    margin-bottom: 30px;
  }
  
  
  
  
  
  
  #contacts>div{
    flex-direction: column;
    gap: 5px;
  }
  
  .contact{
    padding: 30px;
    text-align: center;
  } 
  
  
  .lead{
    padding: 40px 20px 60px 20px;
  }
  
  
  .hide_on_mobile{
    display: none;
  }
  .digits{
    grid-template-columns: repeat(2, 1fr); 
    gap: 5px;
  }
  .digit_box{
    height: 135px;
  }
  .block{
    gap: 5px;
    flex-direction: row;
    height: 64px;
  }
  .block > .digit_box{
    width: 100%;
    height: 100%;
    padding: auto;
  }
  .digit_corner{
    top: 4px;
    left: 5px;
  }
  .digit{
    font-size: 80px;
    margin-top: 40px;
  }
  .digit_caption{
    font-size: 22px;
    margin-top: 14px;
  }
  .price{
    font-size: 32px;
    margin: 16px auto auto auto ;
  }
  .currency{
    font-size: 22px;
  }
  
  #research_digits>._1, #research_digits>._2, #research_digits>._3, #research_digits>._4, 
  #research_digits>.note1,#research_digits>.note2,#research_digits>.note3,
  #tolia_digits>._1, #tolia_digits>._2, #tolia_digits>._3, #tolia_digits>._4, #tolia_digits>._5, #tolia_digits>._6,
  #tolia_digits>.note1,#tolia_digits>.note2,#tolia_digits>.note3,
  #holystick_digits>._1, #holystick_digits>._2, #holystick_digits>._3, #holystick_digits>._4, #holystick_digits>._5, #holystick_digits>._6,
  #holystick_digits>.note1,#holystick_digits>.note2,#holystick_digits>.note3,
  #creativity_digits>._1, #creativity_digits>._2, #creativity_digits>._3, #creativity_digits>._4, #creativity_digits>._5, #creativity_digits>._6,
  #creativity_digits>.note1,#creativity_digits>.note2,#creativity_digits>.note3,
  #pasha_digits>._1, #pasha_digits>._2, #pasha_digits>._3, #pasha_digits>._4, #pasha_digits>._5, #pasha_digits>._6,
  #pasha_digits>.note1,#pasha_digits>.note2,#pasha_digits>.note3,
  #artem_digits>._1, #artem_digits>._2, #artem_digits>._3, #artem_digits>._4, #artem_digits>._5, #artem_digits>._6,
  #artem_digits>.note1,#artem_digits>.note2,#artem_digits>.note3{
    grid-column: auto;
  }

  #tolia_digits>.block, #holystick_digits>.block, #pasha_digits>.block, #artem_digits>.block,#creativity_digits>.block,
  #research_digits .note3, #tolia_digits .note3, #holystick_digits .note2, #pasha_digits .note2, #creativity_digits .note2{
    grid-column: span 2;
  }


  #research_digits>.block{
    flex-direction: column;
    height: 135px;
  }

  #artem_digits{
    grid-template-columns: repeat(2, 1fr); 
  }
  #artem_digits .digit_box{
    height: 135px;
  }
  #artem_digits .note2{
    grid-column: 1;
  }

  .apply_card h4{
    font-size: 40px;
    margin: 10px 0;
  }
  .apply_card > .small_text{
    width: 100%;
  }
  .apply_card .price{
    font-size: 20px;
  }
  .apply_card .digit_box{
    background-color: transparent;
    margin-top: auto;
  }
  .apply_card .container_3_col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .apply_card > .digit_box{
    width: 33%;
  }
  .apply_card .digit_caption{
    font-size: 20px;
  }

  .apply_button_container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin: 40px 0 0 0;
  }
  
  
  
  

  .button{
    width: 100%;
    text-align: center;
    font-size: 14.4px;
  }

  .button.fixed{
    width: calc(100% - 6vw);
    right: 3vw;
    left: 3vw;
    bottom: 5px;
  }





  
  nav,
  .nav_links_container{
    height: 44px;
  }
  .logo_nav{
    width: 100px;
  }
  
  nav.hidden{
    display: block;
    top: -45px;
  }
  /* menu button container  */
  .nav_links_container{
    height: 44px;
    margin: 0 10px;
    
    .nav_links{
      display: none;
    }
  }
  #burger{
    width: 44px;
    min-width: 44px;
    height: 44px;
    background-image: url('/content/icons/burger.svg');
  }
  #burger.open{
    background-image: url('/content/icons/close.svg');
  }

  #mobile-menu{
    top: 45px;
    left: 0;
    right: 0;
    width: 100vw;
    min-width: none;
    max-width: none;
    border-radius: 0;
    padding: 20px;

    .personal-info{
      padding: 5px 10px 15px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .personal-info.hidden{
      display: none;
    }

    .actions{
      padding: 0;
    }

    .line{
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .dropdown-link,
    .dropdown-subhead{
      padding: 10px;
      display: block;
    }

    .dropdown-link.hidden{
      display: none;
    }
  }


  #mobile-menu.show{
    display: flex;
  }

  .nav-button.mobile-only{
    display: block;
  }
  


#login-popup{
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px); 
  -webkit-backdrop-filter: blur(15px);
  padding: 15px;

  #login-container{
    max-width: 432px;
    background-color: var(--ivory);
    padding: 80px 20px;
    position: relative;
  }
  .login_section{
    max-width: 432px;
    padding: 0;
    margin: 0;

    .main_text{
      margin-bottom: 40px;
    }
  }

  #loginCloseBtn{
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background-image: url('/content/icons/close.svg');
    z-index: 9;
    cursor: pointer;

  }
}














  

#next-lesson-widget{
  top: 45px;
  max-height: unset;
  height: 50px;  
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  opacity: 1;
  transition: top 0.3s ease, opacity 0.3s ease;
}

#next-lesson-widget.hidden{
  opacity: 0;
  /* display: block; */
  max-height: unset;
}

#next-lesson-widget > div{
  width: 100vw;
  height: 50px;
  margin: 0;
  display: flex;  
  padding: 10px;
  box-sizing: border-box;
  /* gap: 12px; */
}

#next_lesson_caption{
  display: none;
}

.next_lesson_date_container{
  flex-direction: column;
  gap: 0;
  align-items: start;
  margin: 0;

  .next_lesson_date{
    background-color: transparent;
    flex-direction: row;
    background-color: none;
    border-radius: none;
    align-items: left;  
    justify-content: baseline;
    padding: 0;
  }

  #month, #day{
    display: none;
  }
  #mobile_date{
    display: block;
  }
  
  #time{
    font-family: 'Grafik-reg', Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 18px;
  }
}



.next_lesson_title_container{
  margin: 0;
  max-width: 52vw;

  #course_title{
    font-family: 'Grafik-reg', Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 18px;
    margin: auto;
  }
  #lesson_theme{
    display: none;
  }
}

#next-lesson-widget #onAirNow{
  margin: 0;
  font-size: 12px;
  padding:  9px 
            clamp(12px, 4vw, 36px) 
            10px 
            clamp(8px, 2.5vw, 18px) ;
  gap: clamp(6px, 2vw, 12px);
  width: fit-content;

  > div{
    height: 7px;
    width: 7px;
  }

  .mobile-only{
    display: block;
  }
}



#next-lesson-widget .buttons_container{
  padding: 0;

  #course_btn{
    display: none;
  }
  #zoom_btn{
    font-size: 13.5px;
    line-height: 18px;
    padding:  8px 
              clamp(8px, 3vw, 36px) 
              8px 
              clamp(12px, 4vw, 36px);
    gap: clamp(4px, 2vw, 12px) ;

    .arrow{
      width: 12px;
      height: 15px;
      opacity: 1;
      transform: translateY(3px);
    }
  }
}  













  section.lesson_header {
    margin-bottom: 20px;

    #lesson_theme{
      font-size: 24px;
    }
    .buttons_container, #zoom_btn{
      width: 100%;
    }
  }
  
  .button#prev, 
  .button#next{
    font-size: 12px;
    padding: 8px 12px;

    .arrow{
      width: 12px;
      height: 15px;
    }
  }
  

  a.current_course_card{
    flex-direction: column;

    gap: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    min-height: unset;
  }

  .current_course_card > img{
    width: 100%;
  }
  .current_course_card > div{
    width: calc(100% - 20px);
  }

  .current_course_card .tags_container{
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
  }

  .current_course_card .text_block{
    margin: 0 10px;
    gap: 0;
  }

  .current_course_card h5 {
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 100%;
  }

  .current_course_card h6 {
    font-family: 'Meteor';
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: clamp(18px, 3vw, 24px);
    color: var(--black);
    opacity: 0.4;
    margin: 0;
    padding: 0;
  }
  
  .progressbar{
    position: unset;
    bottom: 20px;
    width: 100%;
    margin: 10px;
  }
  .progressbar .small_text{
    display: none;
  }
  .greybar{
    height: 6px;
    width: 100%;
  }
  .greenbar{
    height: 6px;
    width: 90%;
  }

  .latest_lesson_card{
    max-height: unset;
    padding: 10px;
    display: flex;
    flex-direction: column-reverse;
  }
  .latest_lesson_card > div:not(.image_container){
    margin-top: 15px;
    gap: 0;
    justify-content: start;
  }
  .image_container{
    overflow: hidden;
    width: 100%;
    max-height: clamp();
    height: fit-content;
    display: flex;
    justify-content: center;
  }
  #latest_lesson_button{
    margin-top: 15px;
  }

  .lesson_card{
    height: 150px;
  }
  

  #header_buttons{
    transform: translateX(-3vw);
    width: 100vw;
    overflow-x: scroll;
    scrollbar-width: none;  
    padding: 0 3vw;
    box-sizing: border-box;
  }
  #header_buttons::-webkit-scrollbar {
    display: none; 
  }




  
  
  footer{
    display: block;
    padding: 10px;
  }
  .footer_logo{
    margin: 0 auto 20px auto;
    width: 100px;
    min-width: 100px;
    height: 26px;
    min-height: 26px;
    background-size: contain;
    background-position: center;
    height:110%;
    transform: translateY(-4px);
  }
  .second_text{
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .footer_links{
    gap: 10px;
    margin: 30px 0 50px 0;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  #student_works{
    gap: 5px;
  }

  .carousel_container{
    width: 100vw;
    transform: translateX(-10px);
  }
  
  .carousel{
    gap: 5px;
    height: 200px;
  }


  .carousel_overlay{
    display: none;
  }

  .carousel_card img, .carousel_card video {
    width: auto;
    height: 100%;
    object-fit:contain;
  }




  .running_line{
    height: fit-content;

    font-size: 40px;
    gap: 40px;
    animation: scroll-carousel 10s linear infinite;
    padding: 5px  20px;
  }
  .shift{
    transform: translateX(-3vw); 
  }
  .freeride_description{
    display: block;
  }






  .payment_form{
    padding: 60px clamp(15px,7vw,144px) 100px;
    gap: 40px;

    width: 100vw;
    box-shadow: none;
  }



  .payment_form .close_btn.cross{
    /* ничего не меняется */
    top: 60px;
    right: clamp(15px, 7vw, 144px);
    width: 30px;
    height: 30px;
  }

  .payment_form h4{
    padding-right: 20px;
  }




  input[type="text"],
  input[type="email"],
  .payform-tbank-row {
    /* ничего не меняется */
    border-radius: 10px;
    margin: 0;
    padding: 10px 12px 12px;
    width: 100%;
  }

  .payform-tbank-btn {
    font-weight: unset;
    height: 48px;
  }

  .radio_container{
    gap: 20px;
    /* flex-wrap: wrap; */
    flex-direction: column;
  }


  input[type="checkbox"] {
    min-width: 26px;
    height: 26px;
  }

  /* Добавляем кружок внутри активного радиобаттона */
  input[type="radio"]:checked::before{
    /* ничего не меняется */
    width: 25px;
    height: 25px;
  }

  input[type="radio"]:not(:checked)::before {
    /* ничего не меняется */
    width: 25px;
    height: 25px;
  }


  #lower_btns{
    grid-template-columns: 1fr;
  }
  #hw_upload > p{
    max-height: unset;
  }





}




@media screen and (max-width: 900px) {
  #course_btn{
    display: none;
  }
  .profile-data-container{
    display: flex;
    flex-direction: column;
  }
  .profile-bottom-info {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
  }
}


@media screen and (max-width: 1400px) {
  .left_caption{
    width: min-content;
  }
}









@media screen and (min-width: 2000px) {
  #white_rect, .main-logo, .carousel_container{
    transform: translateX(calc(1000px - 50vw));
  }
  .slider_container{
    transform: translateX(calc(1000px - 50vw - 140px));
  }
  .slider{
    scroll-padding-left: calc(50vw - 1000px + 140px);
  }
  .shift{
    transform: translateX(calc(1000px - 50vw - 140px));
  }
  .slider > :first-child{
    margin-left: calc(50vw - 1000px + 140px);
  }
}