/* VARIABLES */
:root {
    --iq-primary: #15AF97;
    --iq-primary-hover: #15AF97;
    --iq-light-primary: #d7d3f8;
    --iq-secondary: #6c757d;
    --iq-white: #ffffff;
    --iq-black: #000000;
    --iq-title-text: #23203c;
    --iq-body-text: #D1D0CF;
    --iq-body-bg: #141414;
    --iq-bg1: #191919;
    --iq-body-border: #393750;
    --iq-gold: #E6C75F;
    --iq-black: #000000;
}



/* COMUNES */
.text-black, .text-black:hover { color: rgb(20, 20, 20) !important; }
.text-white, .text-white:hover { color: rgb(255, 255, 255) !important; }
.text-primary, .text-primary:hover { color: var(--iq-primary) !important; }
.text-body, .text-body:hover { color: var(--iq-body-text) !important; }
.text-red, .text-red:hover { color: rgb(220, 53, 69) !important; }
.anim-blink {
    animation: blink-animation 1s steps(2, start) infinite;
    -webkit-animation: blink-animation 1s steps(2, start) infinite;
}
@keyframes blink-animation { to { visibility: hidden; } }
@-webkit-keyframes blink-animation { to { visibility: hidden; } }
.color-primary { color: var(--iq-primary); }



/* HOME */
#home-slider { background-color: var(--iq-body-bg); }
#iq-novedades .slick-track { min-width: 100%; }



/* REPRODUCTOR */
.movie-detail .trending-info .player-title { line-height: 50px; }
#video_element { width: 100%; }
.video-container { height: auto; }
.play-button::before { background: var(--iq-primary); }
.trending-pills.nav-pills .nav-item a::before { background: transparent; }



/* INDEX */
.slider-filler { height: 300px; display: block; }
#home-slider .slick-dots li button { background: var(--iq-body-text); }
.epi-box .episode-play-info { display: inline-block; width: 45px; margin: 0 auto; }

img.stream-offline {
    filter: grayscale(100%);
    opacity: .55;
}



/* CARGA */
#loading { background: var(--iq-body-bg); }
#loading:before {
    content: "";
    position: absolute;
    z-index: -1;    
    background: transparent url(../images/loading.png) no-repeat scroll center center;
    background-size: 100px auto;
    animation: spin 1.5s linear infinite;
    width: 100%;
    height: 100%;    
}

@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}	
}



/* FOOTER */
footer .s-icon { display: inline-block;}
footer .s-icon:last-child { margin-right: 0; }
footer .logo { max-width: 100%; }



/* CABECERA */

header#main-header {
    z-index: 99999;
    background-color: rgba(20, 20, 20, 0.85) !important
}

#home-slider .slick-bg {
    background-position: center right;
    background-size: contain;
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -o-transition: background 1s linear;
    -ms-transition: background 1s linear;
    transition: background 1s linear;    
}
@media(min-width:1080px) { #home-slider .slick-bg { height: 40vmax;  } }

#home-slider .slick-bg::before {
    width: 100%;
    background: linear-gradient(90deg, var(--iq-body-bg) 35%, rgba(20, 20, 20, 0.55) 75%, rgba(20, 20, 20, 0) 100%);
}
#home-slider .slick-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: linear-gradient(0deg, var(--iq-body-bg) 0%, rgba(20, 20, 20, 0.55) 15%, rgba(20, 20, 20, 0) 100%);
    z-index: -2;
}

@media (max-width:801px) {
    #home-slider .slick-bg { padding: 0px !important; }
    .page-home .iq-main-slider { padding: 0 !important; }
    #home-slider h1.slider-text { font-size: 6.5vw;}
}

a.iq-sub-card { color: inherit !important; }

.page-program .banner-wrapper { height: 20vw; background-position: center center; }




/* LISTADO / LAZY LOAD */
.epi-img {
    padding-top: 56.25%;
}

.epi-img > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.epi-img > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loading,
.lazy-load-container:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-image: url('../images/loading.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15%;
    animation: spin 1.5s linear infinite;
}
.lazy-load-container * { transition: opacity 0.3s, transform 2s ease-in-out }
.lazy-load-container .lazy-load-show { opacity: 1; }
.lazy-load-container .lazy-load-hide { opacity: 0; }



/* PROGRAMA */
.sea-epi .select2-container {
    width: 150px !important;
    width: calc(100% + 25px) !important;
    max-width: 100%;
}
.select2-container .select2-selection--single .select2-selection__rendered { padding-right: 35px; }



/* MENU DERECHA */
.more-menu { min-width: auto; }



/* MENU MOVIL */
.navbar-collapse.show { overflow-y: scroll; left: 0; }
.nav-open { overflow: hidden; }
.navbar-collapse { padding: 0; }



/* INFO */
.info-date {

}



/* SHARE */
li .share-ico { color: var(--iq-primary); }
li:hover .share-ico { color: var(--iq-white); }



/* VIEWPORT */
#viewport {
    height: 100vh;
    width: 100%;
    overflow-y: auto;
}



/* LIVE */
.trending-pills a.nav-link { 
    cursor: pointer;
}

#epg-day-picker .slick-track, #epg-day-picker .slick-slide { width: 100% !important; }



/* BÚSQUEDA MENU */
#search-widget {
    border-bottom: 2px solid var(--iq-body-text);
    font-size: 24px;
    display: flex;
}

#search-widget > i {
    position: relative;
    top: -1px;
}

#search-widget > input {
    background-color: transparent;
    border: 0;
    color: var(--iq-body-text);
    padding-left: 10px;
}

#search-widget > input::placeholder {
    opacity: 0.25;
}

#search-cancel { display: none; font-size: 42px; line-height: 30px; }
#search-cancel:hover { color: var(--iq-primary); }

.search-result { }
.result-header { height: auto; }


/* BÚSQUEDA PANTALLA */
header li.slide-item:hover .block-images {
    transform: scale3d(1.1, 1.1, 1) translate3d(0, 0, 0) perspective(500px);
}

#top-menu { display: none; }

@media (max-width: 991px) {

    #navbarSupportedContent {
        z-index: 999; 
        width: 100vw;
    }

    header li.slide-item:hover .block-images {
        transform: none;
    }

    header .program-info { display: none; }
    header .block-description { font-size: 0.75em; }
    
    #search-widget { font-size: 20px; max-width: 100%; }
    #search-widget input { width: 100%; }

    #search-cancel { position: absolute; top: 5px; right: 0; }

    /**/ #search-results { margin: 0; } /**/
    .result-item {
        margin-bottom: 15px;
    }

}

@media (min-width: 992px) {

    .full-screen-search-panel {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: transparent;
          background-color: transparent;
        display: block;
        z-index: -1;
        padding-top: 55px;
        background-color: var(--iq-body-bg);
    }
   
    .full-screen-search-panel ul {
        display: flex !important;
        flex-wrap: wrap;
        max-height: 100%;
        overflow-y: auto;
        width: 100%;
        padding: 30px 15px 0px;
        margin: 0;
    }
    .full-screen-search-panel ul li {
        margin: 0 !important;
        margin-bottom: 30px !important;
    }

}

/* FIX PLAYER */
.vjs-responsive-jm {
    height: fit-content;
}
.vjs-responsive-jm video.vjs-tech {
    position: relative;
    height: calc(100vw * 0.5625);
    max-height: 100vh;
}

/* EMBED PLAYER*/
#video_element_embed {
    border: 0;
    width: 100%;
    position: relative;
    height: calc(100vw * 0.5625);
    max-height: 100vh;
}


.vjs-control-bar { z-index: 2; }
.videojs-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}


/* PLAYER (tiempo) */
.page-player .video-js .vjs-time-control { display: block; }
.page-player .video-js .vjs-remaining-time { display: none; }
.page-player .video-js .vjs-duration, .video-js .vjs-current-time { display: block !important; }


/* PLAYER (EXTERNO) */
.responsive-external-video-iframe-container {
    position: relative;
    width: 100%; /* Take full width of the parent */
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.responsive-external-video-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}