@charset "UTF-8";

:root{
   --primary-color: #BE0010;
   --secondary-color: #3B3B3B;
}
body{
   font-family: "Montserrat", sans-serif !important;
   font-weight: normal;
}

*{
   margin: 0;
   padding: 0;
}

ul, li{
   list-style: none;
}

img{
   max-width: 100%;
}

a{
   text-decoration: none;
}

/*WELCOME*/

#coming-soon{
   display: flex;
   height: 100vh;
   justify-content: center;
   align-items: center;
   padding: 40px;
}

.coming-soon{
   display: flex;
   flex-direction: column;
   align-items: center;
}

@media screen and (min-width: 768px){
   .coming-soon__logo{
      width: 400px;
   }
}

@media screen and (min-width: 1200px){
   .coming-soon__logo{
      width: 300px;
   }
}

.coming-soon__text{
   font-family: 'Montserrat', sans-serif;
   font-size: 40px;
   font-weight: bold;
   text-align: center;
   padding: 50px 0 20px;
}

@media screen and (min-width: 768px){
   .coming-soon__text{
      font-size: 50px;
      padding: 50px 0 20px;
   }
}

@media screen and (min-width: 1200px){
   .coming-soon__text{
      font-size: 50px;
      padding: 60px 0 20px;
   }
}

.coming-soon__message{
   font-family: 'Montserrat', sans-serif;
   font-size: 20px;
   text-align: center;
   font-weight: 500;
}

@media screen and (min-width: 1200px){
   .coming-soon__message{
      font-size: 30px;
   }
}

/*HOME*/

#header{
   background-color: #ffffff;
}
#header .main-content{
   position: relative;
}
#headband{
   background-color: var(--primary-color);
}

.main-content{
   padding: 0 15px;
}
@media screen and (min-width: 1600px){
   .main-content{
      width: 1440px;
      margin: 0 auto;
   }
}
@media screen and (min-width: 1920px){
   .main-content{
      width: 1600px;
   }
}
.header{
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   padding-top: 10px;
   padding-bottom: 10px;
}
@media screen and (min-width: 768px){
   .header{
      grid-template-columns: 1fr 4fr 1fr;
   }
}

.header ul{
   list-style: none;
   padding: 0;
   margin: 0;
}
.header__logo{
   width: 70px;
}
@media screen and (min-width: 1280px){
   .header__logo{
      width: 100px;
   }
}
@media screen and (min-width: 768px){
   .header__menu{
      display: flex;
      align-items: center;
      justify-content: center;
   }
}
.menu__main{
   display: none;
}
@media screen and (min-width: 768px){
   .menu__main{
      display: block;
   }
   .menu__main ul{
      display: flex;
      justify-content: center;
   }
   .menu__main a{
      text-transform: uppercase;
      font-size: 12px;
      color: #000000;
      font-weight: 500;
   }
   .menu__main a:hover{
      text-decoration: none;
      color: var(--primary-color);
   }
   .menu__main .sep{
      padding:0 7px;
   }
}
@media screen and (min-width: 1280px){
   .menu__main a{
      font-size: 16px;
   }
}

.header__navigation{
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
.navigation__bar{
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
.navigation__bar i{
   font-size: 24px;
   cursor: pointer;
   transition: all 0.3s;
}
.navigation__bar i:hover{
   color: var(--primary-color);
}
.navigation__nav{
   position: absolute;
   background-color: var(--primary-color);
   border: 1px solid white;
   width: calc(100% - 30px);
   z-index: 10;
}

@media screen and (min-width: 768px){
   .navigation__nav{
      width: 60%;
      right: 0;
      margin: 0 15px;
      
   }
}
@media screen and (min-width: 1024px){
   .navigation__nav{
      width: 50%;
   }
}
@media screen and (min-width: 1280px){
   .navigation__nav{
      width: 35%;
   }
}
@media screen and (min-width: 1440px){
   .navigation__nav{
      width: 30%;
   }
}

.navigation__nav.active{
   display: none;
}
.navigation__nav ul{
   margin: 0;
}
.navigation__nav a{
   color: white;
   padding: 10px 15px;
   border-bottom: 1px solid white;
   font-size: 14px;
   display: grid;
   grid-template-columns: 60% 40%;
}
@media screen and (min-width: 1024px){
   .navigation__nav a {
      font-size: 13px;
    }
}
.navigation__nav a:hover{
   background-color: #A8000D;
}
.navigation__nav li:last-child a{
   border-bottom: none;;
}
.navigation__nav a:hover{   
   text-decoration: none;
}
.navigation--name{
   display: inline-block;
   padding-right: 15px;
   text-align: left;
}
.navigation--schedule{
   text-align: right;
   font-style: italic;
}
@media screen and (min-width: 768px){
   .navigation--schedule br{
      display: none;
   }
}
.headband{
   display: flex;
   justify-content: space-around;
}

@media screen and (min-width: 1600px){
   .headband{
      max-width: 1440px;
      margin: 0 auto;
   }
}
@media screen and (min-width: 1920px){
   .headband{
      max-width: 1600px;
   }
}
.headband__live{
   display: none;
}
@media screen and (min-width: 768px){
   .headband__banner img{
      display: block;
   }
}
@media screen and (min-width: 1280px){
   .headband__live{
      display: flex;
      width: 600px;
      position: relative;
      align-items: center;
   }
   .headband__live--miniatura{
      position: relative;
      margin-right: 20px;
   }
   .headband__live--miniatura img{
      padding-top: 5px;
   }
   /* .headband__live--miniatura img:first-child{
      width: 120px;
      display: block;
      height: auto;
      position: relative;
   }
   .headband__live--miniatura img:last-child{
      width: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
   } */
   .headband__live--title{
      color: white;      
      font-weight: bold;
   }
   .headband__live--title p{
      margin-bottom: 0;
      line-height: 18px;
      font-size: 14px;
   }
   .headband__banner {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .headband__banner img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: relative;
    }
}


@media screen and (min-width: 1600px){
   #headband{
      background: linear-gradient(to right, var(--primary-color) 50%, #290102 50%);
   }
}

/*HOME*/

#banner{
   background-image: url('../img/dime-la-verdad.png');
   background-position: center center;
   background-size: cover;
   position: relative;
   background-repeat: no-repeat;
   height: 270px;
   display: flex;
   align-items: flex-end;
   background-color: #e7e7e7;
}
@media screen and (min-width: 768px){
   #banner{
      background-position: center left;
      align-items: center;
   }
}
@media screen and (min-width: 1280px){
   #banner{
      height: 460px;
      background-position: 0 center;
   }
}
 @media screen and (min-width: 1440px){
   #banner{
      background-position: center;
   }
}/*
@media screen and (min-width: 1600px){
   #banner{
      background-position: 100px center;
   }
}  */
@media screen and (min-width: 1920px){
   #banner{
      background-position: center;
   }
}
#banner::after {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
 }
.banner{
  padding: 0;
}
.dominical-program{
   color: white;
   position: absolute;
   z-index: 1;
   background-color: var(--secondary-color);
   padding: 25px 15px;
   width: calc(100% - 30px);
   border-top: 4px solid var(--primary-color);
 }
 @media screen and (min-width: 768px){
   .dominical-program{
      position: relative;
      background-color: transparent;
      border-top: none;
   }
}
@media screen and (min-width: 1440px){
   .dominical-program{
      padding: 25px 60px;
      width: calc(100% - 120px);
   }
}
@media screen and (min-width: 1440px){
   .dominical-program{
      padding: 25px 15px;
      width: calc(100% - 30px);
   }
}
 .dominical-program h1{
   font-size: 22px; 
   font-weight: bold;
   margin-bottom: 5px;
 }
 @media screen and (min-width: 1280px){
   .dominical-program h1{
      font-size: 32px; 
   }
}
 .dominical-program p{
   font-size: 18px; 
   font-weight: normal;
   margin-bottom: 20px;
 }
 @media screen and (min-width: 1280px){
   .dominical-program p{
      font-size: 36px; 
   }
}
 .btnPrimary{
   padding: 15px 30px; 
   background-color: transparent;
   border: 1px solid white;
   color: white;
   text-align: center;
   font-size: 16px;
   transition: all 0.3s;
   display: inline-block;
 }
 
 .btnPrimary:hover{
   background-color: white;
   color: var(--secondary-color);
 }

 #programming{
   padding-top: 206px;
   padding-bottom: 10px;;
 }
 @media screen and (min-width: 768px){
   #programming{
      padding-top: 0;
    }
}

.days{
   padding-top: 30px;
   margin-bottom: 20px;
}
.days__title{
   font-size: 24px;
   color: #000;
   padding: 0 0 30px 0;
   margin: 0;
}
.days__week{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
 @media screen and (min-width: 768px){
   .days__week{
      justify-content: space-around;
    }
}
 .btnProgram{
   padding: 7px 20px; 
   background-color: var(--secondary-color);
   color: white;
   text-align: center;
   font-size: 16px;
   transition: all 0.3s;
   display: inline-block;
   border: none;
   cursor: pointer;
   font-weight: 400;
   transition: all 0.3s;
   margin: 5px;
 }

 .btnProgram:hover{
   background-color: var(--primary-color);
 }
 .btnProgram.active{
   background-color: var(--primary-color);
}

.times {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: scroll;
 }
 
 .times::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
 .times::-webkit-scrollbar-thumb {
   background-color: #C2C2C2;
   border-radius: 10px;
 }
 
 .times::-webkit-scrollbar-track {
   background-color: #F5F5F5;
 }
 
 .times {
   scrollbar-color: #C2C2C2 #F5F5F5;
   scrollbar-width: thin;
   scrollbar-track-color: #F5F5F5;
   scrollbar-thumb-color: #C2C2C2;
   -moz-appearance: none;
 }
 
 .times::-moz-scrollbar-thumb {
   background-color: #C2C2C2;
   border-radius: 10px;
 }
 
 .times::-moz-scrollbar-track {
   background-color: #F5F5F5;
 }

.times__item{
   flex-basis: 250px;
   flex-grow: 0; 
   flex-shrink: 0;
   color: white;
}

.times--hour{
   font-size: 16px;
   padding: 10px 15px; 
   margin-bottom: 20px;
   background-color: var(--secondary-color);
}
.times--event{
   padding: 40px 15px;
   display: flex;
   flex-direction: column;
   min-height: 85px;
}
.times--event.active{
   background-color: var(--secondary-color);
}
.times--event.active:last-child{
   border-right: 5px solid white;
}
.times--event.active.extend{
  border-right: none;
}
.times--event:not(.active){
   visibility: hidden;
}
.times--event p{
   font-size: 16px;
   font-weight: normal;
   margin-bottom: 30px;
}
.times--event a{
   color: white;
   font-size: 14px;
   font-weight: 600;
}

#programs{
   background-color: var(--primary-color);
   margin-bottom: 60px;
}

.main-container{
   padding: 0 15px;
}

@media screen and (min-width: 1440px){
   .main-container{
      width: 1366px;
      margin: 0 auto;
   }
}
.programs{
   padding:40px 0;
}
@media screen and (min-width: 1440px){
   .programs{
      padding:40px 60px;
   }
}
.title--section{
   font-size: 24px;
   font-weight: bold;
   margin: 0;
   color: #000;
   padding-bottom: 30px;
}
.title--section.white{
   color: white;
}
.journalists {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: auto;
   gap: 5px;
}
@media screen and (min-width: 1024px){
   .journalists {
      grid-template-columns: repeat(5, 1fr);
   }
}
.journalists img{
   display: block;
   transition: all 0.5s ease-in-out;
   border: 1px solid transparent;
}
.journalists img:hover{
   border: 1px solid white;
}


/*INVESTIGATION*/

#news_investigation{
   margin-bottom: 60px;
}

.investigation{
   display: grid;
   grid-gap: 0;
}

@media screen and (min-width: 768px){
   .investigation{
      grid-template-columns: repeat(6, 1fr);
   }  
}

.investigation__item{
   position: relative;
   border-bottom: 10px solid var(--primary-color);
}

.image-wrapper {
   background-color: #fff;
   background-size: cover;
   width: 100%;
   height: 100%;
   background-position: center;
 }
 
.image-wrapper img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 @media only screen and (max-width: 768px) {
   .image-wrapper {
     background-size: contain;
   }
 }

@media screen and (min-width: 768px){
   .investigation__item:nth-child(1),
   .investigation__item:nth-child(2){
      grid-column: span 3;
   } 
   .investigation__item:not(:nth-child(1)):not(:nth-child(2)) {
      grid-column: span 2;
   } 
}
@media screen and (min-width: 1280px){
   .investigation__item:not(:nth-child(1)):not(:nth-child(2)) {
      height: 250px;
   } 
}
.investigation__item p{
   display: block;
   position: absolute;
   bottom: 0;
   z-index: 1;
   background-color: rgba(0,0,0,0.58);
   color: white;
   font-size: 14px;
   font-weight: bold;
   padding: 15px 15px 15px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
@media screen and (min-width: 768px){
   .investigation__item p{
      min-height: 70px;
   }
}
@media screen and (min-width: 1024px){
   .investigation__item p{
      min-height: 60px;
   }
}
@media screen and (min-width: 1280px){
   .investigation__item p{
      font-size: 22px;
   }
   .investigation__item:nth-child(1) p,
   .investigation__item:nth-child(2) p{
      min-height: 108px;
      padding: 15px 15px 15px 70px;
   } 
   .investigation__item:nth-child(1) .play,
   .investigation__item:nth-child(2) .play{
      width: auto;
   } 

   .investigation__item:nth-child(3) p,
   .investigation__item:nth-child(4) p,
   .investigation__item:nth-child(5) p{
      font-size: 17px;
      padding: 15px 15px 15px 50px;
   } 

   .investigation__item:nth-child(3) .play,
   .investigation__item:nth-child(4) .play,
   .investigation__item:nth-child(5) .play{
      width: 40px;
   } 
}

.investigation__item strong{
   display: block;
}
.investigation__item span{
   font-weight: normal;
}
.play{
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 5;
   width: 30px;
}

.investigation__item .play{
   bottom: -10px;
}

.investigation__item a:hover > *{
   text-decoration: underline;
}



#news_truly{
   margin-bottom: 60px;
}
@media screen and (min-width: 768px){
   .truly{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
   }
   .truly__item:first-child{
      grid-column: span 2;
   }
}
@media screen and (min-width: 1280px){
   .truly{      
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 20px;
   }
   .truly__item:first-child{
      grid-row: span 2;
      grid-column: span 3;
   }
}

.truly__item{
   position: relative;
   padding-bottom: 40px;
}
@media screen and (min-width: 1280px){
   .truly__item:first-child{
      padding-bottom: 0;
   }
}

.truly__item:last-child{
   padding-bottom: 0;
}
.truly-wrapper{
   display: block;
   position:relative;
   margin-bottom: 20px;
}

.truly-wrapper a img{
   display: block;
   width: 100%;
}

.truly__item h6,
.truly__item h3{
   padding: 0;
}
.truly__item h6{
   font-size: 14px;
   text-transform: uppercase;
   padding-bottom: 10px;
}

.truly__item h3 a{
   font-size: 18px;
   color: #000;
}
@media screen and (min-width: 1440px){
   .truly__item h3 a{
      font-size: 24px;
   }
   .truly__item:first-child h3 a{
      font-size: 32px;
   }
   .truly__item:first-child .play{
      width: auto;
   }
}
.truly__item p a{
   color: #000;
   padding-top: 10px;
   display: inline-block;
   font-size: 14px;
   font-weight: bold;
   line-height: 24px;
}

.truly__item h3 a:hover,
.truly__item p a:hover{
   text-decoration: underline;
}


#news_last{
   margin-bottom: 60px;
}
@media screen and (min-width: 1440px){
   #news_last .cards{
      width: 90%;
      margin: 0 auto;
   }
}
@media screen and (min-width: 768px){
   .last{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 10px;
   }
}
@media screen and (min-width: 1024px){
   .last{
      grid-template-columns: repeat(3, 1fr);
   }
}

.last__item{
   padding-bottom: 30px;
}
.last__item:last-child{
   padding-bottom: 0;
}
.last-wrapper img{ 
   display: block;
}
.last__item h3 a{ 
   color: #000;
   font-size: 18px;
   display: inline-block;
   padding-top: 15px;
   line-height: 26px;
   font-weight: bold;
}
.last__item h3 a:hover{
   text-decoration: underline;
}



#news_life{
   margin-bottom: 60px;
}
@media screen and (min-width: 768px){
   .life{
      display: grid;
      grid-template-columns: repeat(2, 1rf);
      grid-column-gap: 10px;
   }
   .life__item:first-child{
      grid-column: span 2;
   }
}
@media screen and (min-width: 1280px){
   .life{
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 15px;
   }
   .life__item:first-child{
      grid-column: span 3;
      grid-row: span 2;
   }
}
.life-wrapper{
   border-bottom: 10px solid var(--primary-color);
   position: relative;
   margin-bottom: 5px;
}

.life-wrapper a img{
   display: block;
   width: 100%;
}
.life-wrapper .play{
   bottom: -10px;
}
@media screen and (min-width: 1280px){
   .life-wrapper .play{
      width: 40px;
   }
}
.life__item{
   margin-bottom: 30px;
   position: relative;
}
.life__item--main{
   position: relative;
}

.life__item--main p{
   position: absolute;
   bottom: 10px;
   z-index: 1;
   background-color: rgba(0,0,0,0.58);
   padding: 15px 15px 15px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.life__item--main p a{
   color: white !important;
   font-size: 14px;
   font-weight: bold;
}
.life__item p a{
   font-size: 14px;
   color: #000;
   display: inline-block;
   font-weight: bold;
}
@media screen and (min-width: 768px){
   .life__item--main .play{
      width: auto;
   }
   .life__item--main p{
      padding: 20px 15px 20px 70px;
   }
   .life__item--main p a{
      font-size: 32px;
   }
}
@media screen and (min-width: 1280px){
   .life__item--main p{
      padding: 40px 15px 40px 70px;
   }
}
.life__item h6{
   font-size: 16px;
   font-weight: bold;
   text-transform: uppercase;
   padding-top: 15px;
}
.life__item h3{
   padding: 10px 0;
}
.life__item h3 a{
   font-size: 24px;
   color: #000;
   display: inline-block;
}
.life__item h3 a:hover{
   text-decoration: underline;
}

.life__item p a:hover{
   text-decoration: underline;
}

.btnCategory{
   padding: 7px 20px;
   background-color: var(--primary-color);
   color: white;
   text-align: center;
   font-size: 16px;
   transition: all 0.3s;
   display: inline-block;
   border: none;
   cursor: pointer;
   font-weight: 400;
   transition: all 0.3s;
   margin: 5px;
   transition: all 0.3s;
   font-weight: bold;
   text-transform: uppercase;
}
.btnCategory:hover{
   background-color: var(--secondary-color);
}

@media screen and (min-width: 768px){
   .beauty{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 10px;
   }
}
@media screen and (min-width: 1280px){
   .beauty{      
      grid-template-columns: repeat(5, 1fr);
      grid-column-gap: 15px;
   }
}

.beauty__item{
   margin-bottom: 30px;
   position: relative;
}
@media screen and (min-width: 768px){
   .beauty__item:first-child{
      grid-column: span 2;
   }
}
@media screen and (min-width: 1280px){
   .beauty__item:first-child{
      grid-column: span 3;
      grid-row: span 2;
   }
}
.beauty__item h3{
   padding: 10px 0;
}

.beauty__item h3 a{
   font-size: 20px;
   color: #000;
   display: inline-block;
}
@media screen and (min-width: 1280px){
   .beauty__item:first-child h3 a{
      font-size: 32px;
   }
}
.beauty__item h3 a:hover{
   text-decoration: underline;
}

.beauty__item p a{
   font-size: 13px;
   color: #000;
   display: inline-block;
   font-weight: bold;
}
.beauty__item p a:hover{
   text-decoration: underline;
}
.beauty__item:first-child p a{
   font-size: 16px;
}
#news_fashion{
   margin-bottom: 60px;
}

@media screen and (min-width: 768px){
   .fashion{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
   }
}
@media screen and (min-width: 1280px){
   .fashion{
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 15px;
   }
}
.fashion-wrapper{
   position: relative;
   border-bottom: 10px solid var(--primary-color);
}
.fashion-wrapper a img{
   width: 100%;
   display: block;
}
.fashion-wrapper .play{
   bottom: -10px;
}
.fashion__item{
   margin-bottom: 30px;
}
@media screen and (min-width: 768px){
   .fashion__item:nth-child(3){
      grid-column: span 2;
   }
}
@media screen and (min-width: 1280px){
   .fashion__item:nth-child(3){
      grid-column: 2 / span 3;
      grid-row: 1 / span 2;
   }
   .fashion__item:nth-child(4){
      grid-column: 1 / span 2;
      margin-bottom: 0;
   }
   .fashion__item:nth-child(5){
      grid-column: 3 / span 2;
      margin-bottom: 0;
   }
}
.fashion__item h3 a{
   font-size: 24px;
   font-weight: bold;
   line-height: 34px;
   color: #000;
   padding: 15px 0;
   display: inline-block;
}
.fashion__item h3 a:hover{
   text-decoration: underline;
}

.fashion__item h6{
   font-size: 14px;
   font-weight: bold;
   color: var(--primary-color);
   display: inline-block;
   padding-bottom: 10px;
}
.fashion__item .bio{
   color: var(--primary-color);
}
.fashion__item .bio a{
   font-size: 18px;
   font-weight: normal;
   color: var(--primary-color);
}
.fashion__item .bio a:hover{
   text-decoration: underline;
}

.fashion__item p a{
   color: #000;
   font-size: 16px;
   font-weight: bold;
   line-height: 22px;
}
.fashion__item p a:hover{
   text-decoration: underline;
}


#news_lives{
   margin-bottom: 60px;
   background-color: var(--primary-color);
   padding: 30px;
}
#news_lives .title--section{
   color: white;
}

@media screen and (min-width: 768px){
   .lives{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 15px;
   }
}
@media screen and (min-width: 1024px){
   .lives{
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 15px;
   }
}
@media screen and (min-width: 1280px){
   .lives{
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px;
   }
}
@media screen and (min-width: 1440px){
   .lives{
      grid-template-columns: repeat(6, 1fr);
      grid-gap: 20px;
   }
}
.lives-wrapper{
   position: relative;
}
.lives-wrapper a img:first-child{
   width: 100%;
}
.lives-wrapper a img:last-child{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.lives__item{
   margin-bottom: 30px;
}
@media screen and (min-width: 1440px) {
   .lives__item{
      margin-bottom: 0;
   }  
}
.lives__item:last-child{
   margin-bottom: 0;
}
.lives__item p a{
   color: white;
   font-size: 15px;
   text-transform: uppercase;
   padding-top: 10px;
   display: inline-block;
   font-weight: 500;
}
.lives__item p a:hover{
   text-decoration: underline;
}

#news_music{
   margin-bottom: 60px;
}
@media screen and (min-width: 768px){
   .music{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
   }
   .music__item:nth-last-child(-n+3) .info {
      min-height: 36px;
   }
}
@media screen and (min-width: 1024px){
   .music{
      grid-template-columns: repeat(6, 1fr);
      grid-row-gap: 10px;
   }
   .music__item:nth-child(odd) {
      grid-column: 1 / span 3;
   }
   
   .music__item:nth-child(even) {
      grid-column: 4 / span 3;
   }
 
   .music__item:nth-last-child(-n+3){
      grid-column: 1 / span 2;
   }
   .music__item:nth-last-child(-n+2){
      grid-column: 3 / span 2;
   }
   .music__item:nth-last-child(-n+1){
      grid-column: 5 / span 2;
   }
   .music__item:nth-last-child(-n+3) .info,
   .music__item:nth-last-child(-n+2) .info,
   .music__item:nth-last-child(-n+1) .info  {
      padding: 15px 15px 15px 40px;
   }
}
@media screen and (min-width: 1440px) {
   .music__item:nth-last-child(-n+3) .info,
   .music__item:nth-last-child(-n+2) .info,
   .music__item:nth-last-child(-n+1) .info  {
      min-height: 55px;
   }
}
.music__item .info{
   display: block;
   position: absolute;
   bottom: 0;
   z-index: 1;
   background-color: rgba(0,0,0,0.58);
   padding: 15px 15px 15px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: calc(100% - 55px);
}
.music__item a{
   color: white;
}
.music__item a > img{
   display: block;
} 
.music__item h3,
.music__item p{
   color: white;
   font-size: 14px;
   font-weight: bold;
}
@media screen and (min-width: 1440px){
   .music__item h3,
   .music__item p{
      font-size: 23px;
   }
   .music__item p{
      font-weight: normal;
   }
}
.music__item{
   position: relative;
   border-bottom: 10px solid var(--primary-color);
}

@media screen and (min-width: 768px){
   .music__item .info{
      min-height: 70px;
   }
}
@media screen and (min-width: 1024px){
   .music__item .info{
      min-height: 85px;
      padding: 30px 15px 30px 40px;
   }
}
.music-wrapper img {
   width: 100%;
   display: block;
}
.wrapper-img img{
   width: 100%;
   display: block;
}

.music__item span{
   font-weight: normal;
}
.play{
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 5;
   width: 30px;
}

.music__item .play{
   bottom: -10px;
}

.music__item a:hover > *{
   text-decoration: underline;
}



#news_inclusion{
   margin-bottom: 60px;
}
@media screen and (min-width: 768px){
   .inclusion{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-row-gap: 10px;
   }
}
@media screen and (min-width: 1280px){
   .inclusion{
      grid-template-columns: repeat(3, 1fr);
   }

}
.inclusion__item{
   position: relative;
   border-bottom: 10px solid var(--primary-color);
}
@media screen and (min-width: 1280px){
   .inclusion__item:first-child{
      grid-column: span 3;
   }
}
.inclusion__item a:hover h3{
   text-decoration: underline;
}
.inclusion-wrapper {
   background-color: #fff;
   background-size: cover;
   width: 100%;
   height: 100%;
   background-position: center;
 }
 
.inclusion-wrapper img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

.inclusion__item h3{
   display: block;
   position: absolute;
   bottom: 0;
   z-index: 1;
   background-color: rgba(0,0,0,0.58);
   color: white;
   font-size: 14px;
   font-weight: bold;
   padding: 15px 15px 15px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.inclusion__item h3 span{
   color: white;
   font-size: 14px;
   line-height: 18px;
   display: inline-block;
}
.inclusion__item .play{
   bottom: -10px;
}
@media screen and (min-width: 1280px){
   .inclusion__item:first-child h3{
      font-size: 40px;
      padding: 20px 80px 20px 80px;
   }
   .inclusion__item h3{
      font-size: 22px;
      padding: 20px 30px;
   }
   .inclusion__item .play{
      width: auto;
   }
}



#news_trending{
   margin-bottom: 60px;
}

.trending__item{
   position: relative;
   border-bottom: 10px solid var(--primary-color);
}
.trending__item a:hover .info{
   text-decoration: underline;
}
.trending-wrapper {
   background-color: #fff;
   background-size: cover;
   width: 100%;
   height: 100%;
   background-position: center;
 }
 
.trending-wrapper img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

.trending__item .info{
   display: block;
   position: absolute;
   bottom: 0;
   z-index: 1;
   background-color: rgba(0,0,0,0.58);
   color: white;
   font-size: 14px;
   font-weight: bold;
   padding: 15px 15px 15px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: calc(100% - 55px);
}
.trending__item .info p{
   font-weight: normal;
}

.trending__item .play{
   bottom: -10px;
}

@media screen and (min-width: 1024px){
   .trending__item .info{
      font-size: 24px;
      padding: 20px 80px 20px 80px;
      width: calc(100% - 160px);
   }
   .trending__item .play{
      width: auto;
   }
}

@media screen and (min-width: 1440px){
   .trending__item .info{
      font-size: 38px;
   }
}


#news_trends{
   margin-bottom: 60px;
}
@media screen and (min-width: 768px){
   .trends{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
   }
}
@media screen and (min-width: 1280px){
   .trends{
      grid-template-columns: repeat(12, 1fr);
   }
}
.trends__item{
   position: relative;
   border-bottom: 10px solid var(--primary-color);
}
@media screen and (min-width: 768px){
   .trends__item:first-child{
      grid-column: span 2;
   }
   .trends__item:nth-child(4){
      grid-column: span 2;
   }
   .trends__item:nth-child(5){
      grid-column: span 2;
   }
   .trends__item:nth-child(6){
      grid-column: span 2;
   }
}
@media screen and (min-width: 1024px){
   .trends__item:first-child{
      grid-column: span 6;
   }
   .trends__item:nth-child(2){
      grid-column: 7 / span 3;
   }
   .trends__item:nth-child(3){
      grid-column: 10 / span 3;
   }
   .trends__item:nth-child(4){
      grid-column: span 4;
   }
   .trends__item:nth-child(5){
      grid-column: 5 / span 4;
   }
   .trends__item:nth-child(6){
      grid-column:9 / span 4;
   }
}
.trends__item a:hover h3{
   text-decoration: underline;
}
.trends-wrapper {
   background-color: #fff;
   background-size: cover;
   width: 100%;
   height: 100%;
   background-position: center;
 }
 
.trends-wrapper img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

.trends__item .info h3{
   display: block;
   position: absolute;
   bottom: 0;
   z-index: 1;
   background-color: rgba(0,0,0,0.58);
   color: white;
   font-size: 18px;
   font-weight: bold;
   padding: 15px 15px 15px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: calc(100% - 55px);
}
@media screen and (min-width: 768px){
   .trends__item .info h3{
      font-size: 22px;
      min-height: 55px;
   }
}

.trends__item .play{
   bottom: -10px;
}

@media screen and (min-width: 1024px){
   .trends__item .info h3{
      font-size: 19px;
      padding: 20px 20px 20px 80px;
      width: calc(100% - 100px);
   }
   .trends__item .play{
      width: auto;
   }
}

@media screen and (min-width: 1440px){
   .trends__item .info h3{
      font-size: 22px;
      padding: 20px 15px 20px 70px;
      width: calc(100% - 85px);
   }
}

#news_sports{
   margin-bottom: 60px;
}
@media screen and (min-width: 768px){
   .sports{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 10px;
   }
}
@media screen and (min-width: 768px){
   .sports{
      grid-template-columns: repeat(4, 1fr);
   }
}
@media screen and (min-width: 1280px){
   .sports{
      grid-column-gap: 20px;
   }
}
.sports-wrapper img{
   display: block;
   position: relative;
   border-bottom: 10px solid var(--primary-color);
   width: 100%;
}
.sports__item{
   margin-bottom: 30px;
}
@media screen and (min-width: 768px){
   .sports__item:first-child{
      grid-column: span 2;
   }
}
.sports__item:last-child{
   margin-bottom: 0;
}
.sports__item .btnCategory{
   margin: 0;
}

.sports__item h3 a{
   font-size: 28px;
   font-weight: bold;
   line-height: 35px;
   margin: 0;
   padding-top: 15px;
   color: #000;
   display: inline-block;
}
.sports__item h3 a:hover{
   text-decoration: underline;
}

#news_tourism{
   background-color: #F1F0EF;
   padding: 30px 0;
}
@media screen and (min-width: 768px){
   .tourism{
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 20px;
   }
}
@media screen and (min-width: 768px){
   .tourism{
      grid-template-columns: repeat(2, 1fr);
   }
}
@media screen and (min-width: 1280px){
   .tourism{
      grid-template-columns: repeat(3, 1fr);
   }
}
.tourism__item{
   position: relative;
   margin-bottom: 15px;
}
@media screen and (min-width: 768px){
   .tourism__item{
      margin-bottom: 0;
   }
}
.tourism__item:last-child{
   margin-bottom: 0;
}
.tourism__item h3{
   position: relative;
}
.tourism__item h3 a{
   display: block;
   position: absolute;
   bottom: 15px;
   z-index: 1;
   background-color: rgba(0,0,0,0.58);
   color: white;
   font-size: 24px;
   font-weight: bold;
   padding: 15px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: calc(100% - 30px);
}
@media screen and (min-width: 768px){
   .tourism__item h3 a{
      font-size: 18px;
   }
}
@media screen and (min-width: 1280px){
   .tourism__item h3 a{
      font-size: 22px;
   }
}
.tourism__item h3 a:hover{
   text-decoration: underline;
}
.tourism__item img{
   display: block;
   width: 100%;
}

/*FOOTER*/

#footer{
   padding: 150px 0;
}
.footer__logo{
   position: relative;
   text-align: center;
}
.footer__logo img{
   width: 115px;
   position: relative;
   background-color: white;
}
.footer__logo span::before{
   content: "";
   height: 1px;
   background-color: var(--secondary-color);
   position: absolute;
   right: 0;
   left: 0;
   top: 50%;
   transform: translateY(-50%);  
}
.footer__links{
   padding: 75px 0;
}
.footer__links nav ul{
   font-size: 12px;   
}
@media screen and (min-width: 768px){
   .footer__links nav ul{
      display: flex;
      justify-content: center;
      align-items: center;
   }
}
.footer__links nav li{
   text-align: center; 
}
.footer__links a{
   color: var(--secondary-color);
   text-transform: uppercase;
   font-size: 16px;
   font-weight: 500;
   padding: 10px 0;
   display: inline-block;
}
@media screen and (min-width: 768px){
   .footer__links a{
      padding-left: 10px;
      padding-right: 10px;
      position: relative;
   }
   .footer__links a::after{
      content: "|";
      position: absolute;
      right: -2px;
   }

   .footer__links nav li:last-child a::after{
      content: "";
   }
   
}
.footer__links a:hover{
   text-decoration: underline;
}

.footer__social{
   padding-bottom: 75px;
}
.footer__social p{
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   margin-bottom: 50px;
}
.footer__social ul{
   display: flex;
   justify-content: center;
   align-items: center;
}
.footer__social ul li:last-child a{
   border-right: none;
   padding-right: 0;
}
.footer__social a{
   padding: 0 15px;
   display: inline-block;
   border-right: 1px solid var(--secondary-color);
}
@media screen and (min-width: 768px){
   .footer__social a{
      padding: 0 40px;
   }
}
.footer__social a:hover img {
   filter: grayscale(100%) hue-rotate(90deg);
 }
 .footer__reserved{
   text-align: center;
   font-size: 13px;
   font-weight: normal;
   letter-spacing: 1px;
 }

 /*CONTENT*/

.main-wrapper{
   padding: 60px 15px 0;
}
@media screen and (min-width: 1366px){
   .main-wrapper{
      width: 1360px;
      margin: 0 auto;
   }
}

.portal h1{
   font-size: 32px;
   font-weight: bold;
   padding-bottom: 30px;
}
@media screen and (min-width: 1024px){
   .portal h1{
      font-size: 38px;
      line-height: 38px;
   }
}
@media screen and (min-width: 1280px){
   .portal h1{
      font-size: 45px;
      line-height: 45px;
   }
}
.portal h4{
   font-size: 20px;
   font-weight: normal;
   padding-bottom: 40px;
   position: relative;
   line-height: 28px;
}
.portal h4 img{
   float: left;
   padding-right: 10px;
}
.portal__figure{
   padding-bottom: 40px;
}

.portal__figure img{
   display: block;
   width: 100%;
}

.portal__content p{
   font-size: 20px;
   margin-bottom: 24px;
   line-height: 28px;
}
.portal__content h4{
   font-weight: bold;
   color: var(--primary-color);
}
.portal__content p:last-child{   
   margin-bottom: 0;   
}

.content-wrapper{
   padding: 60px 15px 0;
}

@media screen and (min-width: 1600px){
   .content-wrapper {
      width: 1440px;
      margin: 0 auto;
   }
}
@media screen and (min-width: 1920px){
   .content-wrapper {
      width: 1600px;
   }
}

.page-title{
   font-size: 25px;
   font-weight: bold;
   padding-bottom: 25px;
   margin: 0;
}
.img-wrapper img{
   display: block;
   width: 100%;
}
.gallery__item h4{
   padding-top: 10px;
   padding-bottom: 5px;
   text-align: center;
}
.gallery__item h4 a{
   font-size: 17px;
   font-weight: bold;
   color: #000;
}
.gallery__item h4 a:hover{
   text-decoration: underline;
}
.gallery__item p{
   font-size: 17px;
   font-weight: normal;
   margin: 0;
   text-align: center;
}
.gallery__item p i{
   display: block;
}
.gallery{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 20px;
}
@media screen and (min-width: 768px){
   .gallery {
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 20px;
   }
}

@media screen and (min-width: 1024px){
   .gallery {
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 20px;
   }
}

@media screen and (min-width: 1440px){
   .gallery {
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 60px;
      grid-row-gap: 50px;
   }
}

.no-padding{
   padding: 0;
}

#live{
   background-color: var(--secondary-color);
}

#live .content-wrapper{
   padding: 0 15px;
}
.live{
   padding: 50px 0;
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: calc(3 / 4 * 100%);
}

.ratio-16x9 {
  --bs-aspect-ratio: calc(9 / 16 * 100%);
}

.ratio-21x9 {
  --bs-aspect-ratio: calc(9 / 21 * 100%);
}

@media screen and (min-width: 1440px){
   .live{
      padding: 80px 0;
   }
}
.video-container {
   position: relative;
   height: 100%;
   width: 100%;
 --bs-aspect-ratio: calc(9 / 16 * 100%);
 }
 .video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
 }
 .video-responsive {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
	}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}
 .canal p{
   margin-bottom: 30px;
   line-height: 25px;
   font-weight: 500;
 }
 .canal p:last-child{
   margin-bottom: 0;
 }

 .btnSend{
   padding: 15px 40px;
   background-color: var(--primary-color);
   color: white;
   text-align: center;
   font-size: 16px;
   transition: all 0.3s;
   display: inline-block;
   border: none;
   cursor: pointer;
   font-weight: 400;
   transition: all 0.3s;
   transition: all 0.3s;
   font-weight: bold;
   margin-top: 30px;
}
.btnSend:hover{
   background-color: var(--secondary-color);
}
.forms{
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 30px;
}
@media screen and (min-width: 768px){
   .forms{
      width: 510px;
      margin: 0 auto;
   }
}
.forms-control{
   margin-bottom: 10px;
   width: 100%;
}
.forms-control input,
.forms-control textarea{
   border: 1px solid var(--primary-color);
   padding: 20px;
   width: calc(100% - 40px);
   font-family: "Montserrat", sans-serif;
   font-size: 17px;
   font-weight: 300;
   color: #000000;
}
.forms-control input::placeholder,
.forms-control textarea::placeholder{
   color: #000000;
}
.forms-control input:focus,
.forms-control textarea:focus,
.forms-control input:active,
.forms-control textarea:active{
   outline: none;
}

.photos{
   display: grid;
   grid-gap: 10px;
   padding-top: 20px;;
}
@media screen and (min-width: 768px){
   .photos{
      grid-template-columns: repeat(2, 1fr);
      padding-top: 40px;;
   }
   .photos.three .video-responsive{
      grid-column: span 2;
   }
   .photos.five .video-responsive{
      grid-column: span 2;
   }
  
}
@media screen and (min-width: 1280px){
   .photos{
      width: 1280px;
      margin: 0 auto;
      grid-gap: 50px;
   }
}


.photos img{
   display: block;
}


.error{
   padding: 50px 15px;
   text-align: center;
}

.error h2{
   font-size: 30px;
   padding-bottom: 30px;
}

.error p{
   line-height: 24px;
}

.error{
   width: 600px;
   margin: 0 auto;
}
.message-contact{
   padding-top: 30px;
}
.message-contact > *{
   text-align: center;
}
.message-contact .error{
   color: var(--primary-color);
}
.message-contact .success{
   color: var(--secondary-color);
}