/* RESPONSIVE CONFIG */
@media (min-width: 320px) and (max-width: 1000px) {
    *{
      margin: 0;
      padding: 0;
    }

    .up-arrow {
      display: none;
    }

    .menu-bar {
      display: none;
      position: absolute;
      top: 40px;
      right: 150px;
      align-items: flex-end;
      flex-direction: column;
      width: 180px;
      height: 142px;
      background-color: white;
      color: black;
      gap: 10px;
      padding-top: 15px;
      border-radius: 0px 0px 4px 4px;
    }
    
    .menu-bar p {
      color: #858479;
      margin-right: 31.33px;
      font-family: Lato, sans-serif;
      font-size: 12px;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 0px;
      text-align: right;
      font-weight: 900;
      text-transform: uppercase;
    }
    
    .menu-bar p:hover {
      color: #C5AF19;
    }
    
    .selected {
      color: #C5AF19;
    }

    header{
      display: flex;
      position: fixed;
      top: 0;
      align-items: center;
      justify-content: center;
      width: 100vh;
      background-color: black;
    }
    .logo {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
    }
    navbar {
      display: flex;
      position: fixed;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      left: 90%;
    }
    .navbar-item {
      display: none;
    }

    .a-nav-bar {
      display: none;
    }
  
    #toggle-button {
      display: flex;
    }

    #toggle {
      display: none;
    }
  
    #person {
      display: flex;
      width: 24px;
      height: 24px;
      color: white;
    }
  
    .menu-bar-mobile {
      display: none;
      position: absolute;
      top: 0;
      right: 0px;
      align-items: flex-start;
      justify-content: space-evenly;
      flex-direction: column;
      width: 250px;
      height: 92%;
      background-color: white;
      color: black;
      gap: 20px;
      padding-top: 30px;
      padding-left: 24px;
      border-radius: 0px 0px 4px 4px;
    }

    .menu-bar-mobile hr {
      width: 220px;
    }
  
    .logo-and-closeBtn, .welcome{
      display: flex;
      width: 240px;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      margin-right: 20px;
    }

    .logo-and-closeBtn {
      position: absolute;
      top: 30px;
    }
    
    .logo-and-closeBtn h3{
      height: auto;
      width: 18px;
    }

    #user-field {
      color: #858479;
      text-transform: uppercase;
      font-size: 16px;
    }

    #user-field span {
      color: black;
      text-transform: uppercase;
    }
    
    .sub-menu {
      display: flex;
      flex-direction: column;
      width: 200px;
      gap: 26px;
      font-size: 12px;
      font-family: Lato;
      font-style: normal;
      font-weight: 700;
      line-height: 16px;
      text-transform: uppercase;
    }

    .whats-menu-bar{
      display: flex; 
      align-items: center;
      justify-content: flex-start;
      padding: 20px 0;
      font-size: 12px;
      font-family: Lato;
      font-style: normal;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #858479;
    }

    .logoff {
      display: flex;
      width: 272px;
      flex-direction: column;
      justify-content: center;
      flex-shrink: 0;
      font-size: 12px;
      font-family: Lato;
      font-style: normal;
      font-weight: 700;
      line-height: 16px;
      text-transform: uppercase;
      color: #858479;
      cursor: pointer;
    }
  
    #loginContainer {
      display: none;
      position: absolute;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100vh;
      min-height: 800px;
      gap: 20px;
      background-color: white;
      top: 250px;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: 100px;
      z-index: 1;
    }
  
    .hero {
      width: 100%;
      background: url("../img/heromobile.png"), black;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .heroCall {
      display: none;
      gap: 20px;
      align-items: center;
      justify-content: center;
      width: 100%;
      flex-shrink: 0;
      flex-wrap: wrap;
      margin: 0 auto;
      padding: 0;
    }
    .hero-call-mobile {
      display: block;
    }
  
    .hero-call-info {
      margin-top: 20px;
      justify-content: space-around;
      align-items: center;
      gap: 0;
      color: white;
    }

    .h3-call{
      margin-top: 20px;
    }
  
    .mobile-title{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .hero-call-mobile-subtitle {
      color: #FFF;
      text-align: center;
      font-size: 16px;
      font-family: Lato;
      line-height: 20px;
      text-transform: uppercase;
    }
    .mobile-title h1 {
      color: #FFF;
      text-align: center;
      font-size: 28px;
      font-family: Lato;
      line-height: 32px;
      text-transform: uppercase;
    }
    .mobile-title h2 {
      font-size: 20px;
      font-family: Lato;
      line-height: 24px;
      text-transform: uppercase;
      color: #666;
      text-align: center;
    }
  
    .buttonMoreInfo {
      display: none;
    }
  
    .hero-mobile-button {
      display: flex;
      width: 288px;
      height: 40px;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      border-radius: 4px;
      background-color: unset;
      color: #F1F1F1;
      cursor: pointer;
      font-size: 12px;
      font-family: Lato;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 2px solid var(--color-neutral-5-grey-10, #F1F1F1);
      margin: 10px auto;
    }
  
    .buttonMoreInfoMobile {
      display: flex;
      background-color: #C5AF19;
      justify-content: center;
      align-items: center;
      color: white;
      width: 90%;
      height: 48px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      margin-top: 30px;
    }
  
    .train-to-exit {
      width: 100%;
      background-color: unset;
      color: white;
    }
  
    .train-to-exit img {
      display: none;
    }
    .section_container {
      background-color: unset;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .train-info {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0;
    }
    .train-info h2 {
      color: #FFF;
      text-align: center;
      font-size: 16px;
      font-family: Lato;
      line-height: 20px;
      text-transform: uppercase;
    }
    .train-info p {
      display: flex;
      width: 95%;
      flex-direction: column;
      flex-shrink: 0;
      color: var(--color-primary-dark-50, #858479);
      text-align: center;
      font-size: 14px;
      font-family: Lato;
      line-height: 16px;
    }
    .train-pictures {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 95%;
      margin: 10px auto;
      color: white;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scrollbar-width: none;
      scrollbar-color: transparent transparent;
    }
    .train-pictures div {
      opacity: 1;
    }
    .train-pictures div img {
      display: inline-block;
      width: 200px;
      height: auto;
    }
    .exclusive-title {
      display: none;
    }
    .exclusive-container {
      width: 95%;
      flex-shrink: 0;
      align-items: center;
      justify-content: space-around;
      gap: 10px
    }
    .exclusive-info img {
      width: 32px;
      height: 32px;
    }
    .titleLessonContainer {
      display: none;
    }
    .collumn_container {
      width: 100%;
    }
    .titleLessonContainerMobile {
      display: flex;
      color: white;
      text-align: center;
      font-family: Lato;
      line-height: 20px;
      text-transform: uppercase;
    }
  
    .whiteContainer {
      display: none;
    }
  
    .whiteContainerMobile{
      display: flex;
      padding: 10px;
      flex-direction: column;
      background-color: unset;
      width: 95%;
      height: auto;
      color: #858479;
      gap: 10px;
      margin-top: 10px;
    }
  
    .whiteContainerMobile hr {
      border: 1px solid #1D1A05;
      width: 100%;
    }
  
    .lessonDiv{
      display: flex;
      justify-content: center;
      align-self: flex-start;
      height: 24px;
      gap: 10px;
      color: white;
    }
  
    .lessonDiv div h1 {
      display: flex;
      width: 24px;
      height: 24px;
      
      flex-direction: column;
      justify-content: center;
      flex-shrink: 0;
      color: var(--color-primary-dark-25, #D8D7CE);
      font-size: 16px;
      font-family: Lato;
      line-height: 20px;
    }
  
    .infoDiv h3 {
      display: flex;
      width: 90%;
      height: 24px;
      flex-direction: column;
      justify-content: center;
      flex-shrink: 0;
      color: var(--color-primary-dark-50, #858479);
      font-size: 14px;
      font-family: Lato;
      line-height: 16px;
    }
  
    .infoDiv {
      width: 100%;
    }
  
    .infoDiv p {
      display: none;
    }
    .divButton {
      position: unset;
      height: auto;
      background-image: unset;
      width: 100%;
    }
  
    .buttonAll {
      display: none;
    }
    
    .buttonAllMobile {
      display: flex;
      width: 304px;
      height: 40px;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      background-color: unset;
      border-radius: 4px;
      border: 2px solid var(--color-primary-dark-25, #D8D7CE);
      color: var(--color-primary-dark-25, #D8D7CE);
      text-align: center;
      font-size: 12px;
      font-family: Lato;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
  
    .success-container {
      display: none;
    }
  
    .success-container-mobile {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 344px;
      align-items: center;
      justify-content: center;
      color: white;
      gap: 50px;
      background-repeat: no-repeat;
      background-size: cover;
    }
  
    .success-title-mobile {
      display: flex;
      align-items: center;
      justify-self:center;
    }
  
    .success-title-mobile img {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
    }
  
    .success-title-mobile h4 {
      display: flex;
      width: 224px;
      flex-direction: column;
      justify-content: center;
      flex-shrink: 0;
      color: var(--color-primary-dark-25, #D8D7CE);
      font-size: 12px;
      font-family: Lato;
      font-weight: 700;
      line-height: 16px;
      text-transform: uppercase;
    }
  
    .success-container-mobile span {
      display: flex;
      width: 288px;
      flex-direction: column;
      justify-content: center;
      flex-shrink: 0;
      color: var(--color-primary-dark-50, #858479);
      font-size: 14px;
      font-family: Lato;
      line-height: 16px;
    }
  
    .form_section{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }
  
    form, form div{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0;
    }
  
    .containerCheckbox{
      width: 380px;
      display: flex;
      justify-content: center;
      gap: 10px;
      align-items: flex-start;
      margin-top: 10px;
    }
  
    .custom-checkbox {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 20%;
      background-color: white;    
    }
  
    label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
    }
  
    .checkbox-terms {
      display: flex;
      height: 24px;;
    }
  
    .sendButton{
      display: flex;
      width: 95%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      color: var(--color-neutral-6-white, #FFF);
      text-align: center;
      font-size: 16px;
      font-family: Lato;
      font-weight: 700;
      line-height: 20px;
      letter-spacing: 1px;
      text-transform: uppercase;
      background-color: #C5AF19;
      border-radius: 4px;
      height: 40px;
      margin-top: 10px;
    }
  
    .courseDiv{
      opacity: 1;
    }
  
    .comment_section {
      display: none;
    }
  
    .comment-section-mobile{
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    color: white;
    }
  
    .titleLessonContainerMobile {
      color: #FFF;
      text-align: center;
      font-size: 16px;
      font-family: Lato;
      line-height: 20px;
      text-transform: uppercase;
    }
    .statmentDiv{
      position: relative;
      width: 80%;
      height: 144px;
      flex-shrink: 0;
      border-radius: 4px;
      background-color: #FFF;
      color: #333333;
      padding: 10px;
    }
  
    .statment-author {
      position: absolute;
      right: 5px;
      bottom: 5px;
      color: #000;
      font-size: 12px;
      font-family: Lato;
      font-weight: 700;
      text-align: right;
      text-transform: uppercase;
      padding: 4px 8px;
    }
    
  
    .blackContainer {
      flex-direction: row;
      width: 100%;
        width: 100%;
        overflow-x: auto;
    }
  
    .inlineBlock {
      width: 368px;
      flex-direction: column;
    }
  
    .inlineBlock > .courseDiv:nth-child(2) {
      display: none;
    } 
  
    .related-article{
      align-items: flex-start;
      width: 90%;
    }
  
    .articles-hr {
      display: flex;
    }
  
    hr {
      margin-top: 10px;
    }
  
    .related-article-div{
      flex-direction: column;
      width: 90%;
    }
    .form-section-title {
      color: white;
    }
    .form_section {
      order: 1;
    }
    
    .comment_section {
      order: 2;
    }
    
    .otherCourses_container {
      order: 3;
    }
    .related-article {
      order: 4;
    }
  
    .footer {
      display: none;
    }
  
    .footer-mobile {
      order: 5;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      align-items: center;
      justify-content: center;
    }
  
    .footer-mobile h3 {
      color: #FFF;
      text-align: center;
      font-size: 16px;
      font-family: Lato;
      line-height: 20px;
      text-transform: uppercase;
    }
    .social-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .social-icons{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 20px;
    }
    .whatsButton{
      display: flex;
      width: 180px;
      height: 40px;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      background-color: unset;
      border-radius: 4px;
      gap: 5px;
      border: 2px solid var(--color-primary-dark-25, #D8D7CE);
    }
    .whatsButton p {
      color: var(--color-primary-dark-25, #D8D7CE);
      text-align: center;
      font-size: 12px;
      font-family: Lato;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
  
    .info-container{
      width: 90%;
      margin: 50px 10px 0 10px;
    }
  
    .terms-mobile{
      display: flex;
      width: 98%;
      justify-content: space-around;
      align-items: center;
      gap: 20px;
      color: var(--color-primary-dark-50, #858479);
      text-align: center;
      font-size: 10px;
      font-family: Lato;
      line-height: 16px;
    }
    .footer-spacer{
      height: 20px;
    }
  }