@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");


/* The Modal (background) */
.modalLVH {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-contentLVH {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* The Close Button */
.closeLVH {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeLVH:hover,
.closeLVH:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

:root{
  --colorPrimario: #E6007E;
}


lite-tiktok{
  width: 100%!important;
  height: 570px!important;
}

/* #frame, iframe{
  height: 600px;
} */



 .carousel-indicators{
  background-color: white;
   bottom: -50px;
   
}

.carousel-indicators button{
   width: 7px!important;
   height: 7px!important;
   border-radius: 50%!important;
   /* margin-top: 20px!important; */
}


.carousel-indicators [data-bs-target]{
  background-color: rgba(54, 54, 54, 0.596)!important;
} 


/* ------------------------- */
.footer-barra {
   width: 100%;
   height: auto;
   display: flex;
   flex-direction: column;
   padding: 40px 10px;
   background-color: #fdfdfd;
   margin-top: 20px;
   /* border-bottom: 10px solid var(--colorPrimario); */
}

.content1-footer{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  order: 1;
}

.content1-footer img{
  width: 45%;
  height: auto;
  margin-top: 20px;
}

.content2-footer{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  order: 0;
}

.enlace-app{
  width: 250px;
  height: auto;
  margin: 10px auto;
}

.app-logo-foo{
  width: 100%;
  height: auto;
}

/* ---------------------- */
.nav-links{
  width: 95%;
  height: auto;
  margin: auto;
}

.nav-links .page-numbers{
  margin: 0 5px;
}

.order-index-element1{
  order: 1;
}
.order-index-element2{
  order: 0;
}

.aswift_1_host{
  margin: auto!important;
}


.content-Intro-Player{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 40;
  cursor: pointer;
}

#imgPrograma{
  cursor: pointer;
}

.live-button{
  width: 80px;
  height: 30px;
  border-radius: 10px;
  padding: 15px 0px;
  border: 2px solid red;
  background-color: red;
  color: white;
  font-weight: 700;
  position: absolute;
  top: 10px;
  left: 5px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  cursor: pointer;
}

.pulse{
  animation: pulseAnimation 1s ease-in-out infinite;
  opacity: .8s;
}

@keyframes pulseAnimation {
  100%{
    transform: scale(1.3);
  }
}

.title-playlist{
  width: 100%;
  height: 100%;
  /* background-color: var(--colorPrimario);
   */
   background: linear-gradient(55deg,#E6007E,#f55ba8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:  column;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  padding: 60px 0px;
}

.playlist{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  margin-top: 10px;
  cursor: pointer;
}

.playlist:nth-child(1){background: linear-gradient(55deg,#E6007E,#f55ba8);}
.playlist:nth-child(3){background: linear-gradient(55deg,#ff45ab,#f55ba8);}
.playlist:nth-child(2){background: linear-gradient(55deg,#cc207f,#ff0180);}

.playlist img{
  width: 35%;
  height: auto;
  cursor: pointer;
}

.playlist i{
   font-size: 3rem;
   cursor: pointer;
   color: white;
   cursor: pointer;
}

.button-play{
  padding: 10px 50px;
  text-decoration: none;
  border: 3px solid white;
  color: white;
  border-radius: 50px;
  font-size: 1.4rem;
  /* margin-top: 20px; */
  transition: all .2s ease-in;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.button-play:hover{
  background-color: white;
  color: var(--colorPrimario);
  transition: all .2s ease-in;
  transform: scale(1.1);
  
}

.section-blackTour{
  padding: 10px 0px;
}

.coverBlackTour{
  width: 100%;
  height: auto;
  /* object-fit: cover; */
}

.siema a img{
  width: 100%;
  height: auto;
  padding: 0px 5px 0px 0px;
}


.img-calendar{
  width: 100%;
  height: 100%;
}

/* -------------------------------- */
.cont-sorteo{
  width: 100%;
  padding: 60px 0px;
}

.cont-sorteo h2{
  text-shadow: 1px 1px 2px var(--colorPrimario);
}

.videoModal{
  width: 90%;
  height: auto;
  margin: auto;
  display: block;
}
/* ------------- */
.banner-ofertometro{
    width: 100%;
    height: auto;
    margin: 20px auto ;
    border-radius: 30px 30px 0px 0px;
}

.cuentaRegresiva{
  width: 100%;
  height: auto;
  padding: 50px 0px;
  background-color: #f2f2f2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.simply-section{
  width: 150px ;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.174);
  margin: 5px 10px;
  border-radius: 10px;
  background-color: white;
}

.simply-amount{
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  color: #333;
}

.simply-word{
  display: block;
  font-size: 1.4rem;
  /* font-weight: 400; */
  color: gray;
}
/* --------------------------- */

/* Media Querie phone Landscape */
@media screen and (min-width:576px){
   .logo-live{
     width: 70%;
   }
}


/* Media Querie Tablet */
@media screen and (min-width:768px){

  .footer-barra{
    flex-direction: row;
  }

  .content1-footer {
    width: 30%;
      order: 0;
  }

  .content2-footer{
    width: 70%;
     order: 1;
     flex-direction: row;
     justify-content: center;
     align-items: center;
  }

  .enlace-app{
    width: 200px;
    margin: 0 7px;
  }

  /* .content1-footer img{
    width: 30%;
    height: auto;
    margin-left: 30px;
  } */

  .wp-block-embed iframe{
    width: 100%!important;
    height: 300px!important;
  }
  /* ----------------------------- */
  .live-button{
    width: 100px;
    height: 40px;
    position: absolute;
    top: 20px;
    left: 20px;
  }

  .cuentaRegresiva{
    flex-direction: row;
    justify-content: space-evenly;
    
  }

    .simply-section{
    width: 250px;
    height: 250px;
    margin: 0;
  }
   .simply-amount{font-size: 5rem;}
  .simply-word{
    font-size: 1.8rem;
  }
}

/* Media Querie Tablet-desktop */
@media screen and (min-width:992px){
  .aside-sigle{
    width:100%;
    height: auto;
    position: sticky;
    top: 20px;
    left: 0;
    padding: 20px 0px;
  }

  .order-index-element1{
    order: 0;
  }
  .order-index-element2{
    order: 1;
  }

  .title-playlist{
    margin-top: 0px;
  margin-bottom: 0px;
  }

  .videoModal{
    width: 60%;
    /* border: 10px solid white; */
    border-radius: 5px;
  }
}

/* Media Querie desktop */
@media screen and (min-width:1200px){
  .wp-block-embed iframe{
    width: 100%!important;
    height: 450px!important;
  }
}

/* Media Querie desktop large*/
@media screen and (min-width:1366px){
   
}


@media screen and (min-width:1920px){
  
  .wp-block-embed iframe{
    width: 100%!important;
    height: 600px!important;
  }
  

}

@media screen and (min-width:2560px){

  html{
    /* background-color: #fcfcfc; */
    background-color: #ebebeb;
  }
 
 body{
   width: 70%;
   height: auto;
   margin: auto;
   display: block;
 }
  

 .wp-block-embed iframe{
  width: 100%!important;
  height: 700px!important;
}
  
  

}