@font-face {
      font-family: clashB;
      src: url("ClashGrotesk-Semibold.woff");
   }
   @font-face {
      font-family: clashM;
      src: url("ClashGrotesk-Medium.woff");
   }
   @font-face {
      font-family: clashR;
      src: url("ClashGrotesk-Regular.woff");
   }
   @font-face {
      font-family: sfpro;
      src: url("sfdisplay.woff")
   }
   body {
      background: linear-gradient(#F6E3FF, #CFA8E1);
      margin: 0px !important;
   }
   header {
      background-color: white;
      border-bottom: solid 2px #F8E062;
   }
   #header-top {
      max-width: 970px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
   }
   .logo {
      float: left;
   }
   .logo img {
      margin: 30px;
   }
   .menu {
      margin: auto;
      float: left;
      font-family: 'clashR';
      display: block;
   }
   .menu ul {
      display: block;padding: inherit;
   }
   .menu li {
      float: left;
      text-align: center;
      list-style: none;
      margin: 7px;
   }
   .menu li a {}
   .sesion {
      float: right;
      margin: 30px 12px;
      border-radius: 17px;
      background: #0C6FF9;
      color: white;
      padding: 8px 20px;
      border: 0px;
      cursor: pointer;
   }
   .sesion a {
      color: #ffffff;
   }
   h1 {
      font-size: 5vw;
      margin: 10px;
      font-family: clashB;
   }
   h2 {
      font-family: clashM;
   }
   p {
      margin: 10px;
      font-size: 23px;
      font-family: sfpro;
   }
   .content {
      margin: 20px 0;
      font-family: 'sfpro';
   }
  
   .content h2 {
      margin: 10px;
   }
   .acordeon {
      margin: 10px auto;
      color: black;
      padding: 10px 10px;
   }
   .contenedor {
      margin-bottom: 15px;
   }
   .acordeon .contenedor {
      position: relative;
      margin: 10px 10px;
   }
   .acordeon .etiqueta {
      font-family: clashR;
      position: relative;
      padding: 10px 0;
      font-size: 18px;
      color: black;
      cursor: pointer;
   }
   .acordeon .etiqueta::before {
      content: '+';
      color: black;
      position: absolute;
      top: 50%;
      right: -5px;
      font-size: 18px;
      transform: translateY(-50%);
   }
   .acordeon .contenido {
       position: relative;
       height: 0px;
       font-size: 17px;
       text-align: justify;
       transition: 0.5s;
       overflow: hidden;
       font-family: 'sfpro';
       color: #666666;
      display: block;
   }
   .acordeon hr {
      width: 100%;
       margin-left: 0;
       border: 1px solid grey;
       display: block !important;
   }
   .acordeon .contenedor.activa .contenido {
       height: 200px !important;overflow: overlay;
   }
   .acordeon .contenedor .activa .etiqueta::before {
      content: '-';
      font-size: 30px;
   }
   section {
      max-width: 970px;
      margin: auto;
   }
   footer {
      max-width: 970px;
      margin: 20px auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
     font-family: 'sfpro';
   }
   .hora {
      max-width: 33%;
      padding: 10px;
   }
   .menu2 {
      max-width: 33%;
      padding: 10px;
   }
   .menu2 li {
      list-style: none;
   }
   .terminos {
      max-width: 33%;
      padding: 10px;
   }
   .terminos li {
      list-style: none;
   }
   .inicia {
      border-radius: 21px;
      background: #000000;
      color: white;
          padding: 14px 47px;
      border: 0px;    margin-right: 14px;
      cursor: pointer;
   }
   .factura {
      border-radius: 21px;
      color: black;
          padding: 14px 47px;
      border: 1px solid #111112;
      background: transparent;
      cursor: pointer;    margin-right: 14px;
   }
   a {
      color: #000000;
      text-decoration: none;
      font
   }
   span, .menu2 a, .terminos a, .content li {
      font-size: 19px;
   }
   iframe {
      border-radius: 20px;
   }
   .inactivo { height: 40px !important;
      
   }
   .video-container {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 56.25%;
   }
   .iframe-responsivo {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
   }
   .menu-resp {
      display: none;
   }
   @media only screen and (max-width: 830px) {
     
       
     
     
     
     .iconito {
       
               margin-top: 19px !important;
       right: 150px;
       position: absolute;
   }
   /*.acordeon .contenedor.activa .contenido {
       height: 200px !important;overflow: overlay;
   }*/
     .logo-foo{margin-left: 30px;}
     section{
       
           margin: auto 10px;
     }
     footer ul{    padding: inherit;}
       
      #header-top {
         display: inline-block;        width: 100%;
      }
      .logo {
                 float: none;
           width: auto;
           text-align: center;
      }
      .logo img {
         margin: 15px;width: 128px;
      }
      .sesion {
         margin: 11px;
      }
      .menu {
         display: none;
      }
      .menu-resp {
         display: block;
         float: left;
         font-family: 'clashR';
         width: 100%;
         justify-items: center;font-size: 13px;
      }
     .menu-resp {
         display: block;
         float: left;
         font-family: 'clashR';
         width: 100%;
         justify-items: center;font-size: 13px;
      }
     .menu-resp ul{
         padding: inherit;
      }
     
      h1 {
         font-size: 40px;
         text-align: center;
      }
      .menu-resp ul {
         display: block;
      }
      .menu-resp li {
         float: left;
         text-align: center;
         list-style: none;
         margin: 7px;
      }
      .menu-resp li a {}
      footer {
         margin: 20px auto;
         display: block;   font-family: 'sfpro';
     }
     .inicia{    margin: 14px 0px !important}
     .factura{    margin: 14px 0px !important}
       .hora {
         text-align: center;
         max-width: initial;
      }
      .menu2 {
         text-align: center;
         max-width: initial;
      }
      .terminos {
         text-align: center;
         max-width: initial;
      }
     
   }
       
       .layer{
         
         width: 6%; margin-bottom: 30px;
       }
       .layer2{width: 23px;
       margin-bottom: 10px;
       margin-left: 5px;}
       .iconito{    width: 16px;
       margin-top: 5px;}