/*
  Template css:   Micrositio
  Detalle:        Estilos para Micrositio
*/


/* Micrositio
   ------------------------------------------ */

body.micrositio {
   padding: 0;
   background-repeat: no-repeat;
   background-position: bottom center;
   background-size: cover;
   background-attachment: fixed;
}

.landing .auspiciante-principal,
.landing main .wrapper,
.landing .box-sponsor,
.micrositio .wrap-submit a {
   margin: 0 auto;
   max-width: 1440px;
}

.landing .micrositio-header,
.micrositio footer,
.micrositio main .wrapper {
   position: relative;
   margin: 0 auto;
   max-width: 100%;
}


/* Micrositio - Header
   ------------------------------------------ */
.micrositio header{
   background-size: cover;
}
.micrositio header a.logo{
   margin: 0;
   width: 75px !important;
}

@media (min-width: 1023px){
   .micrositio header .navbar{
      height: 35px;
      margin: 0;
   }
   .micrositio header .user-nav{
      margin: 5px 0;
      border: 2px solid red;
   }
}

.micrositio .btn-productor{
   margin-top: 0;
}

/* Micrositio - Header
   ------------------------------------------ */
.micrositio .wrapper-navbar{
   position: relative;
   padding: 0;
}
.micrositio .micrositio-header{
   align-items: center;
   height: 200px;
   padding: 20px 0;
   /*margin-bottom: 20px;*/
   display: flex;
   justify-content: center;
}

.micrositio .micrositio-header .logo{
   text-align: center;
}
.micrositio .micrositio-header .logo img{
   max-height: 150px;
   z-index: 2;
   position: relative;
   max-width: 100%;
}

.micrositio .auspiciante-principal {
   /*bottom: 20px;
   position: absolute;
   right: 20px;*/
   display: flex;
   padding: 0;
   justify-content: flex-end;
}

.micrositio .auspiciante-principal img{
   height: 100%;
   width: 150px;
}

@media (max-width: 768px){
   .micrositio .micrositio-header{
      height: auto;
   }
   .micrositio .micrositio-header .logo{
      width: 70%;
   }
   .micrositio .auspiciante-principal{
      margin: 10px 0;
      bottom: 0;
      position: relative;
      right: 0;
      justify-content: center;
   }
   .micrositio .micrositio-header .logo img{
      max-height: 100px;
   }
}

/* Micrositio - Html libre
   ------------------------------------------ */
.micrositio .html-libre{
   /*margin: 70px 0;*/
   text-align: center;
}

.micrositio .html-libre .col{
   padding: 0 20px;
}

.micrositio .html-libre h2{
   margin-bottom: 5px;
   color: black;
   font-size: 20px;
}
.micrositio .html-libre h3{
   font-size: 14px;
   font-weight: 600;
   margin: 5px 0;
}

.micrositio .html-libre img{
   background: #f8f8f8;
   margin: 40px 0;
   max-width: 800px;
   width: 100%;
}

/* Micrositio - List match
   ------------------------------------------ */
.micrositio .list-match{
   margin: 20px 0;
}

.micrositio .list-match .match{
   padding: 10px;
}

/* Micrositio - Sponsor
   ------------------------------------------ */
.micrositio .box-sponsor {
   padding: 0;
   z-index: 2;
   position: relative;
}

.micrositio .box-sponsor .wrap-sponsor{
   padding: 20px 0;
   display: flex;
   flex-wrap: wrap;
   margin: 5px auto;
   justify-content: center;
   width: 80%;
}

.micrositio .box-sponsor .block-grid-item{
   flex: 1;
   width: 100%;
}

.micrositio .box-sponsor .wrap-sponsor .item{
   border: none;
   text-align: center;
}

.micrositio .box-sponsor .wrap-sponsor .item img{
   margin: 0 auto;
   width: 100%;
}

.micrositio .box-sponsor .wrap-sponsor.sponsor-small{
   display: flex;
   padding: 0;
   justify-content: center;
   width: 15%;
}

.micrositio .box-sponsor .wrap-sponsor.sponsor-small .block-grid-item{
   flex: 1;
}

.micrositio .box-sponsor .wrap-sponsor.sponsor-small .item img{
   margin: 5px;
   max-width: 100px;
}

@media(max-width: 1300px){
   .micrositio .box-sponsor .wrap-sponsor{
      padding: 0 20px;
   }
}

@media(max-width: 768px){
   .micrositio .box-sponsor .wrap-sponsor,
   .micrositio .box-sponsor .wrap-sponsor.sponsor-small{
      flex-direction: column;
      width: 100%;
   }
   .micrositio .box-sponsor .wrap-sponsor .item img,
   .micrositio .box-sponsor .wrap-sponsor.sponsor-small .item img{
      margin: 0 auto;
      width: auto;
   }
}

/* Feature list
   ------------------------------------------ */
.feature-list{}
.feature-list article{
   padding: 10px;
}
.feature-list article a{
   display: flex;
   text-decoration: none;
}

.feature-list article figure{
   flex: 1;
   overflow: hidden;
   position: relative;
}

.feature-list article figure img{
   transition: all 0.3s ease;
   width: 100%;
}

.feature-list article .box-info{
   display: flex;
   padding: 10px 20px;
   flex: 1;
}
@media (max-width: 480px){
   .feature-list article .box-info{
      display: block;
      width: 100%;
   }
}

.feature-list article .box-info ul li *{
   color: #414141;
}

.feature-list article .box-info .btn{
   margin-top: 20px;
   width: 220px;
}
@media (max-width: 480px){
   .feature-list article .box-info .btn{
      width: 100%;
   }
}

.feature-list article .box-info ul{
   padding: 0;
}

.feature-list article .box-info h3,
.feature-list article .box-info h3 span{
   color: #000;
   font-size: 20px;
   font-weight: 400;
   line-height: 23px;
   margin: 0 0 10px 0;
}

.feature-list article .box-info h3 span.span-block{
   display: block;
   margin: 0;
}

/*.feature-list article .box-info .btn{
   background: #1d242c;
   border-radius: 30px;
   color: white;
   display: block;
   margin-top: 20px;
   transition: all 0.3s ease;
   width: 120px;
}

.feature-list article .box-info .btn:hover,
.feature-list article .box-info .btn:focus{
   background: #006cd8;
}
*/
@media (max-width: 1200px){
   .feature-list article a{
      flex-direction: column;
   }
   .feature-list article .box-info{
      padding: 10px 0;
   }
}

/* Micrositio - Espectaculo
   ------------------------------------------ */
.micrositio .espectaculo{
   z-index: 2;
   position: relative;
}

.micrositio .espectaculo .wrapper{
   padding: 40px 20px;
}

.micrositio main{
   min-height: auto;
}

/* Micrositio - Landing
   ------------------------------------------ */

.micrositio .wrap-submit {
   z-index: 5;
   margin: 30px 0;
   position: relative;
}

.micrositio .auspiciante-principal{
   padding: 20px;
}
.micrositio main{
   min-height: auto;
}

.micrositio .link-app{
   display: none !important;
}

@media (max-width: 480px){
   .micrositio #slide-texto .item div,
   .micrositio .block-grid-item .item div {
      min-height: auto;
   }
}

.micrositio #steps header{
   background: transparent !important;
}


.micrositio .sticky{
   top: 0;
}

.micrositio .filter-content.sticky{
   top: 0;
}