@font-face {
    font-family: 'MontBold';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
        url('../fonts/Montserrat-Bold.woff') format('woff');
   
    font-style: normal;

}

@font-face {
    font-family: 'MontExtrabold';
    src: url('../fonts/Montserrat-ExtraBold.woff2') format('woff2'),
        url('../fonts/Montserrat-ExtraBold.woff') format('woff');
  
    font-style: normal;

}

@font-face {
    font-family: 'MontRegular';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MontLight';
    src: url('../fonts/Montserrat-Light.woff2') format('woff2'),
        url('../fonts/Montserrat-Light.woff') format('woff');

  
}



@font-face {
    font-family: 'MontBlack';
    src: url('../fonts/Montserrat-Black.woff2') format('woff2'),
        url('../fonts/Montserrat-Black.woff') format('woff');

    font-style: normal;
 
}

@font-face {
    font-family: 'MontSemiBold';
    src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('../fonts/Montserrat-SemiBold.woff') format('woff');

    font-style: normal;

}





@font-face {
    font-family: 'MontMedium';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
        url('../fonts/Montserrat-Medium.woff') format('woff');

    font-style: normal;
    
    }

.titulofestival {
     font-family:'MontRegular';
    font-size: 25px;
  max-width: 400px;
  margin: auto;
 color: #ffffff;
  padding-top: 0px;
    text-align: center;
     letter-spacing: 15px; 
    background-image: url("../img/back_festival.png");
        height:102px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    vertical-align: middle;
     display:flex;
  justify-content: center;
  align-items: center;
   
}
 .quees{
      font-family: 'MontMedium';
    color: #FFF8DE;
    font-size: 25px;
    line-height: 25px;
    }

 .aquien{
      font-family: 'MontMedium';
    color: #F3827E;
    font-size: 25px;
    line-height: 25px;
    }
 .cuando{
      font-family: 'MontMedium';
    color: #D28D6C;
    font-size: 25px;
    line-height: 25px;
    }
.contenedordoble{
width: 100%;
   display: flex;
   max-width: 1200px;
   height: auto;
   flex-direction: row;
      align-items: center;
   justify-content: center;
    }
.contenedordoble2{

width: 100%;
   display: flex;
   max-width: 1200px;
   height: auto;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    }
.contenedortotal{
width: 100%;
    max-width: 1200px;
   display: flex;
      align-items: center;
   justify-content: center;
    flex-direction: column;
    }
.contenedorizq{
width: 30%;
   display: flex;
      align-items: center;
   justify-content: center;
    }
.contenedorizq img{
width: 100%;
    height: auto;
    max-width: 350px;
    }
.contenedorder{
    flex-direction: column;
    
width:70%;
   display: flex;
      align-items: left;
   justify-content: left;
    text-align: left;
    }
.textofestivalnuevo{

  font-family: 'MontRegular';
    color: #ffffff;
    font-size: 14px;
    line-height: 18px; 

}
.textofestivalazul{

  font-family: 'MontSemibold';
    color: #2C2646;
    font-size: 14px;
    line-height: 18px; 

}
.columnaprograma{
    
       display: flex;
     flex-direction: column;
width: 20%;
    max-width: 1200px;
   text-align: center;
padding:0px;
     align-items: flex-start;
   justify-content:flex-start;
      height: 100%;
    
    
    }
.columnaprogramaint{
    
       display: flex;
     flex-direction: column;
width: 100%;
    max-width: 1200px;
   text-align: center;
padding:0px;
     align-items: flex-start;
   justify-content:flex-start;
     height: 100%;
    
    }
.horario1{
    

width: 100%;
   text-align: left;
    background-color: #F4B0B1;
    height: 20px;
    padding-top: 5px;
          padding-left: 10px;
          padding-bottom: 5px;
        padding-right: 10px;
      font-family: 'MontBold';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }
.horario2{
    

width: 100%;
   text-align: left;
    background-color: #EFD99A;
    height: 20px;
   padding-top: 5px;
          padding-left: 10px;
          padding-bottom: 5px;
        padding-right: 10px;
      font-family: 'MontBold';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }

.horario3{
    

width: 100%;
   text-align: left;
    background-color:#71C1E2;
    height: 20px;
      padding-top: 5px;
          padding-left: 10px;
          padding-bottom: 5px;
        padding-right: 10px;
      font-family: 'MontBold';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }
.horario4{
    

width: 100%;
   text-align: left;
    background-color:#B2A3CC;
    height: 20px;
   padding-top: 5px;
          padding-left: 10px;
          padding-bottom: 5px;
        padding-right: 10px;
      font-family: 'MontBold';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }

.horario5{
    

width: 100%;
   text-align: left;
    background-color:#F6C3B2;
    height: 20px;
   padding-top: 5px;
          padding-left: 10px;
          padding-bottom: 5px;
        padding-right: 10px;
      font-family: 'MontBold';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }

.horario6{
    

width: 100%;
   text-align: left;
    background-color:#EFA5CA;
    height: 20px;
   padding-top: 5px;
          padding-left: 10px;
          padding-bottom: 5px;
        padding-right: 10px;
      font-family: 'MontBold';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }
    .texto1{
    

width: 100%;
   text-align: left;
    padding-top: 5px;
          padding-left: 10px;
          padding-bottom: 5px;
        padding-right: 10px;
      font-family: 'MontBold';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }
    
    .texto2{
    

width: 100%;
   text-align: left;
    padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 10px;
        padding-right: 10px;
      font-family: 'MontRegular';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }
    
.containersmall{
    
       display: flex;
     flex-direction: column;
width: 100%;
    max-width: 1200px;
   text-align: center;
padding:40px;
     align-items: center;
   justify-content: center;
    
    }
.containersmall2{
    
       display: flex;
     flex-direction: column;
width: 100%;
    max-width: 1200px;
   text-align: center;
padding:40px;
     align-items: center;
   justify-content: center;
    
    }

.baselogo{
    
height: 60px;
width: 100%;

   text-align: center;
padding:10px;
     align-items: center;
   justify-content: center;
    
    }
.baselogo2{
    
height: 60px;
width: 100%;
background-color: #F3CCE1;
   text-align: center;
padding:10px;
     align-items: center;
   justify-content: center;
        font-family:'MontBold';
    font-size: 20px;
    color: #2C2646;
    
    }
.containertitulo{
width: 100%;
   display: flex;
flex-direction:row;
   height: auto;
      align-items: flex-start;
   justify-content: center;
    max-width: 1500px;
    text-align: center;
    font-family:'MontBold';
    font-size: 40px;
    color: #2C2646;
    background-color: #ffffff;
    padding: 10px;
    }
@media (max-width: 900px) {
    .containersmall2{
    
       display: flex;
     flex-direction: column;
width: 100%;
    max-width: 1200px;
   text-align: center;
padding:10px;
     align-items: center;
   justify-content: center;
    
    }
    
    .containertitulo{
font-size: 22px;
    }
    
     .quees{
      font-family: 'MontMedium';
    color: #FFF8DE;
    font-size: 18px;
    line-height: 20px;
    }

 .aquien{
      font-family: 'MontMedium';
    color: #F3827E;
    font-size: 18px;
    line-height: 20px;
    }
 .cuando{
      font-family: 'MontMedium';
    color: #D28D6C;
    font-size: 18px;
    line-height: 20px;
    }
 
    
    .titulofestival {
     font-family:'MontRegular';
    font-size: 15px;
  max-width: 200px;
  margin: auto;
 color: #ffffff;
  padding: 0px;
    text-align: center;
     letter-spacing: 15px; 
    background-image: url("../img/back_festival.png");
        height:102px;
    background-position: center;
    vertical-align: middle;
     display:flex;
  justify-content: center;
  align-items: center;
   
}

.contenedordoble{
   flex-direction: column;
max-width: 100%;
    padding-top: 30px;
     padding-bottom: 30px;
    padding-left: 20px;
     padding-right: 20px;
    }
    .contenedordoble2{
   flex-direction: column;
max-width: 100%;
      padding-top: 30px;
     padding-bottom: 30px;
    padding-left: 20px;
     padding-right: 20px;
    }
    .contenedorder{
width: 100%;

    }
    .contenedorizq{
width: 100%;
        text-align: center;
    
        align-content: center;
        align-items: center;
    }
    .contenedorizq img{
width: 100%;
    height: auto;
    max-width: 350px;
        align-self: center;
    }
}


.textofestivalhigh{

  font-family: 'MontBold';
    color: #231C3B;
    font-size: 16px;
    line-height: 19px; 

}
.containerbig{
width: 100%;
   display: flex;

   height: auto;
    background-image: url("../img/fotoshome/back.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    }
.containerprograma{
width: 100%;
   display: flex;
flex-direction:row;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
      align-items: flex-start;
   justify-content: flex-start;
    max-width: 1500px;
    text-align: center;
    height: 100%;
  
    }

.containerprograma2{
    
width: 100%;
max-width: 1200px;
    }
.containerbig2{
width: 100%;
   display: flex;
   
   height: auto;
    background-color:#9C96B5;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    }
.containerbig3{
width: 100%;
   display: flex;
   
   height: auto;
    background-color:#E0F0FF;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    }
.containerbig4{
width: 100%;
   display: flex;
   
   height: auto;
    background-color:#ffffff;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    }
.containerbig5{
width: 100%;
   display: flex;
   
   height: auto;
    background-color:#FEF7DE;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    }
.containerbig6{
width: 100%;
   display: flex;
   text-align: center;
   height: auto;
    background-color:#FDE9E8;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    }
.containerbig7{
width: 100%;
   display: flex;
   text-align: center;
   height: auto;
    background-color:#FDE9E9;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    }



.primerfestival{
    text-align: center;
    font-family:'MontBold';
    font-size: 54px;
    color: #2C2646;
    line-height: 55px;
    
    }
.actividades{
    width: 100%;
    max-width: 900px;
    padding: 30px;
    text-align: center;
     font-family:'MontMedium';
    font-size: 32px;
    color: #2C2646;
    margin-bottom: 70px;
     
    
    }
.color1{
    color: #F48884;
     
    
    }
.color2{
    color: #9993B3;
     
    
    }

.color3{
    color: #D28D6C;
     
    
    }
.color4{
    color: #E0BBAB;
     
    
    }

.fecha{
    width: 100%;
    max-width: 900px;
    padding-top: 30px;
     padding-right: 30px;
     padding-left: 30px;
    text-align: center;
     font-family:'MontBold';
    font-size: 20px;
    color: #2C2646;
    line-height: 20px;
     
    
    }
.lugar{
    width: 100%;
    max-width: 400px;
     padding-right: 30px;
     padding-left: 30px;
    text-align: center;
     font-family:'MontRegular';
    font-size: 20px;
    color: #2C2646;
    line-height: 30px;

     
    
    }
.preventa{
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
    max-width: 700px;
 border: 1px solid #555171;
padding: 40px;

   display: flex;
   
   height: auto;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    
    }

.cajaboleto{

    margin-bottom: 50px;
    width: 100%;
    max-width: 450px;
 border: 1px solid #555171;
padding: 40px;

   display: flex;
   
   height: auto;
   flex-direction: column;
      align-items: center;
   justify-content: center;
    
    }


.precio{

         font-family:'MontBold';
    font-size: 30px;
    color: #2C2646;
    line-height: 30px;
 }
.precio2{

         font-family:'MontRegular';
    font-size: 30px;
    color: #2C2646;
    line-height: 40px;
 }
.botoncomprar{
    margin-top: 20px;
  display: inline-block;
  color: #ffffff;
    font-family: 'MontBold';
  font-size: 20px;
padding: 15px;
    background-color: #D28D6C;
    text-decoration: none;
    cursor: pointer;
}

.botoncomprar:hover{

    background-color: #9994B4;

}
.app{
padding: 10px;
text-align: center;
     font-family: 'MontBold';
  font-size: 15px;
      color: #2C2646;
    
}
.approw{

  display: flex;
    flex-direction: row;
     margin-bottom: 50px;
      margin-top: 10px;
}

.titulotalentos{
    width: 100%;
    max-width: 800px;
    padding: 40px;
    text-align: center;
     font-family:'MontMedium';
    font-size: 36px;
    color: #F3827E;

     
    
    }
.titulosedes{
    width: 100%;
    max-width: 800px;
    padding: 40px;
    text-align: center;
     font-family:'MontMedium';
    font-size: 36px;
    color: #FFF8DE;

     
    
    }
.tituloboleto{
    width: 100%;
    max-width: 800px;
    padding: 40px;
    text-align: center;
     font-family:'MontMedium';
    font-size: 36px;
    color: #9C96B5;

     
    
    }
.textosedes{
    width: 100%;
    max-width: 800px;

    text-align: center;
     font-family:'MontMedium';
    font-size: 16px;
    color: #FFFFFF;

     
    
    }
.nombrestalentos{
    width: 100%;
    max-width: 900px;
    padding-left: 0px;
       padding-right: 0px;
       padding-bottom: 40px;
    text-align: center;
     font-family:'MontRegular';
    font-size: 22px;
    color: #2C2646;

     
    
    }
.textoboletos{
    width: 100%;
    max-width: 800px;
    padding-left: 40px;
       padding-right: 40px;
       padding-bottom: 40px;
    text-align: center;
     font-family:'MontMedium';
    font-size: 18px;
    color: #2C2646;

     
    
    }
.botontalentos{
    margin-top: 20px;
  display: inline-block;
  color: #ffffff;
    font-family: 'MontBold';
  font-size: 15px;
padding: 10px;
    background-color: #F3827E;
    text-decoration: none;
    cursor: pointer;
}

.botontalentos:hover{

    background-color: #9994B4;

}
.botonvenues{
    margin-top: 20px;
  display: inline-block;
  color: #2C2646;
    font-family: 'MontBold';
  font-size: 15px;
padding: 10px;
    background-color: #E0F0FF;
    text-decoration: none;
    cursor: pointer;
}
.botonvenues:hover{

    background-color:#FDE9E8;

}

.loquehay{
    width: 100%;
    max-width: 800px;
    padding: 40px;
    text-align: center;
     font-family:'MontSemibold';
    font-size: 42px;
    color: #2C2646;

     
    
    }

.tipoboleto{
     font-family:'MontBold';
    font-size: 20px;
    color: #2C2646;

     
    
    }
.preciochiquito{
    padding-top: 20px;
     font-family:'MontRegular';
    font-size: 12px;
    color: #2C2646;

     
    
    }
.descripcionboleto{
    padding-top: 20px;
      padding-bottom: 20px;
     font-family:'MontSemibold';
    font-size: 14px;
    color: #2C2646;

     
    
    }

* {
  box-sizing: border-box;
}

body {
  margin: 0;

}

.row {
  display: flex;
  flex-wrap: wrap; /*this matters so when screen shrinks then can roll over*/
  flex-direction: row;
  padding: 0 4px;  
}

.column {
  flex-basis: 25%; /*seems like we don't need width if we have flex-basis*/
  padding: 0 4px;
}

.column img {
  width: 100%; /*this is important so images keep to width of div .column*/
  margin-top: 8px;
}
 .logohome {
padding-bottom: 50px;
     padding-left:50px;
     padding-right:50px;

}
    
    .logohome img {
width:100%;
    max-width: 300px;
        height: auto;

}
@media screen and (max-width: 899px) {
     .logohome {
padding-bottom: 50px;
     padding-left:50px;
     padding-right:50px;

}
        .logohome img {
width:100%;
    max-width: 200px;
        height: auto;

}
     .vimeoweb {

    display: none;

}
    
            .vimeocelu {

    display: block;

}
  .column {
    flex-basis: 50%;
  }
}

    

    .loguitoshome img {
width:100%;
    max-width: 671px;
        height: auto;
        padding:40px;

}


@media (max-width: 900px) {
 .primerfestival{

    font-size: 35px;
    line-height: 35px;
    
    }
     .fecha{

    font-size: 16px;

    
    }
         .lugar{

    font-size: 16px;

    
    }
             .actividades{

    font-size: 20px;

    
    }

    .nombrestalentos{
    width: 100%;
    padding-left: 0px;
       padding-right: 0px;
       padding-bottom: 40px;
    text-align: center;
     font-family:'MontRegular';
    font-size: 18px;
    color: #2C2646;

     
    
    }
    
    
    .loquehay{

     font-family:'MontBold';
    font-size: 25px;
        max-width: 100%;

      padding: 0px;
    
    }
    
    .titulosedes{

    font-size: 27px;
    padding-left: 0px;
padding-right: 0px;
     
  padding-top: 10px;  
     padding-bottom: 30px;  

     
    
    }
.tituloboleto{
    font-size: 27px;
    padding-left: 0px;
padding-right: 0px;
     
  padding-top: 10px;  
     padding-bottom: 30px;  
    }
    .titulotalentos{
    font-size: 27px;
    padding-left: 0px;
padding-right: 0px;
     max-width: 1200px;
  padding-top: 10px;  
     padding-bottom: 30px;  
    }
    
    .textoboletos{
    width: 100%;
    max-width: 1200px;
    padding-left: 10px;
       padding-right: 10px;
       padding-bottom: 30px;
    text-align: center;
     font-family:'MontMedium';
    font-size: 16px;
    color: #2C2646;

     
    
    }
        .loguitoshome img {
width:100%;
    max-width: 671px;
        height: auto;
        padding-left:0px;
            padding-right:0px;
             padding-top:40px;
              padding-bottom:40px;

}
    .app{
padding: 20px;
text-align: center;
     font-family: 'MontBold';
  font-size: 15px;
      color: #2C2646;
    
}
    .botoncomprar{
    margin-top: 20px;

  font-size: 15px;
padding: 10px;

}
    .precio{

         font-family:'MontBold';
    font-size: 22px;
    color: #2C2646;
    line-height: 25px;
        padding-bottom: 15px;
        padding-left: 0px;
        padding-right: 0px;
 }
    .textosedes{
    width: 100%;
    max-width: 1200px;
        padding: 0px;

    text-align: center;
     font-family:'MontMedium';
    font-size: 16px;
    color: #FFFFFF;

     
    
    }
    .cajaboleto{


padding: 30px;

    }
    
    
    .containerprograma{
width: 100%;
   display: flex;
flex-direction:column;
   height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
      align-items: flex-start;
   justify-content: flex-start;
    max-width: 1500px;
    }
        .columnaprograma{
width: 100%;
         
 
    }
    
      .texto1{
    

    padding-top: 5px;
          padding-left: 30px;
          padding-bottom: 5px;
        padding-right: 30px;
      font-family: 'MontBold';
    
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }
    
    .texto2{
    

width: 100%;
   text-align: left;
    padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 30px;
        padding-right: 30px;
      font-family: 'MontRegular';
    color: #000000;
    font-size: 12px;
    line-height: 12px;
    }
      
        .horario1{
    


    padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 30px;
        padding-right: 30px;  
            margin-bottom: 5px;
 margin-top: 5px;
    }
            .horario2{
    


    padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 30px;
        padding-right: 30px;  
            margin-bottom: 5px;
 margin-top: 5px;
    }
        .horario3{
    


    padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 30px;
        padding-right: 30px;  
            margin-bottom: 5px;
 margin-top: 5px;
    }
            .horario4{
    


    padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 30px;
        padding-right: 30px;  
            margin-bottom: 5px;
 margin-top: 5px;
    }
    
           .horario5{
    


    padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 30px;
        padding-right: 30px;  
            margin-bottom: 5px;
 margin-top: 5px;
    } 
    
    
           .horario6{
    


    padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 30px;
        padding-right: 30px;  
            margin-bottom: 5px;
 margin-top: 5px;
    } 
    
    
}
#timer {
    padding: 10px;
    max-width: 400px;
    text-align: center;
     font-family: 'MontRegular';
  font-size: 35px;
  font-weight: 100;
  color: #2C2747;
    background-color: #FCD8D6;
}
#timer div {
  display: inline-block;
  min-width: 80px;
}
#timer div span {
  color: #9C96B5;
  display: block;
  font-size: 0.35em;
  font-weight: 400;
}

   .vimeoweb {

    display: block;

}
    
            .vimeocelu {

    display: none;

}
.videovim{
     font-family:'MontRegular';
    font-size: 14px;
  max-width: 1100px;
  margin: auto;
 color: #ffffff;
  padding: 20px;
    text-align: center;

    background-position: center;
    vertical-align: middle;
     display:flex;
  justify-content: center;
  align-items: center;

}