/* Fuentes */
body{font-family:'Roboto', sans-serif; color:var(--blue);}
p, span{font-family:'Roboto', sans-serif; color:var(--lead); font-size:0.875rem; padding-bottom:15px; display:block;}
h1, h2, h3, h4, h5, h6, nav{font-family:'Andada Pro', serif; color:var(--blue);}
h6{font-size:var(--font18);}

/* ROOT */
:root{
    --gray:#F4F4F4;
    --gray2:#B4B4B4;
    --blue-original:#044985;
    --blue:#00294D;
    --sky-blue:#C6D6E3;
    --blue-over:#f7fbff;
    --red:#D6070E;
    --lead:#626262;
    --white:#FFFFFF;

    --font18:1.125rem;
    --font30:30px;
}

.fs-18rem{font-size:var(--font18);} /* 18px */
.fs-30px{font-size:var(--font30);} /* 18px */
.fs-7{font-size:0.875rem;} /* 14px */
.fs-8{font-size: 0.75rem;} /* 12px */
.fs-9{font-size: 0.625rem;} /* 10px */
.fs-10{font-size: 0.5rem;} /* 8px */
.height-40{height:50px;}
.height-fill{height:-webkit-fill-available;}

a{cursor:pointer;}
a:hover{text-decoration:none;}
a:hover h6{text-decoration:underline;}
a:hover span{text-decoration:none;}
a:hover p{text-decoration:none;}
a:hover li{text-decoration:none;}
a:hover img{filter:saturate(100%);}

.imagewidth{max-width:100%; height:auto;}
.image-scroll-width{width:200px; height:auto;}
.menuscrolling{position:fixed; top:0; left:0; right:0; z-index:999; transition:opacity 0.3s ease; opacity:0; pointer-events:none;}
.menuscrolling.visible{opacity:1; pointer-events:auto;}
.menuscrollingmovil{position:fixed; top:0; left:0; right:0; z-index:999; transition:opacity 0.3s ease; opacity:0; pointer-events:none;}
.menuscrollingmovil.visible{opacity:1; pointer-events:auto;}

/* BACKGROUN - COLOR */
.bg-gray{background-color:var(--gray)!important;}
.bg-blue-original{background-color:var(--blue-original)!important;}
.bg-blue{background-color:var(--blue)!important;}
.bg-red{background-color:var(--red)!important;}
.bg-sky-blue{background-color:var(--sky-blue)!important;}
.bg-lead{background-color:var(--lead)!important;}

.color-gray{color:var(--gray)!important;}
.color-blue-original{color:var(--blue-original)!important;}
.color-blue{color:var(--blue)!important;}
.color-red{color:var(--red)!important;}
.color-sky-blue{color:var(--sky-blue)!important;}
.color-lead{color:var(--lead)!important;}

/* BTN OUTLINE PRIMARY */
.btn-outline-primary{color:var(--blue); border-color:transparent; background-color:var(--sky-blue);}
.btn-outline-primary:hover{color:var(--white); background-color:var(--blue-original); border-color:transparent;}
.btn-outline-primary:focus, .btn-outline-primary.focus{box-shadow:0 0 0 0}
.btn-outline-primary.disabled, .btn-outline-primary:disabled{color:var(--blue); background-color:var(--lead);}
.btn-outline-primary:active, .btn-outline-primary.active, .show > .btn-outline-primary.dropdown-toggle{color:var(--blue); background-color:var(--sky-blue); border-color:transparent;}

/* BTN OUTLINE SECONDARY */
.btn-outline-secondary{color:var(--blue); border-color:transparent; background-color:var(--white);}
.btn-outline-secondary:hover{color:var(--white); background-color:var(--blue-original); border-color:transparent;}
.btn-outline-secondary:focus, .btn-outline-secondary.focus{box-shadow:0 0 0 0}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled{color:var(--white); background-color:var(--lead);}
.btn-outline-secondary:active, .btn-outline-secondary.active, .show > .btn-outline-secondary.dropdown-toggle{color:var(--blue); background-color:var(--white); border-color:transparent;}

/* BTN OUTLINE GRAY */
.btn-outline-gray{color:var(--gray2); border-color:transparent; background-color:var(--white);}
.btn-outline-gray:hover{color:var(--gray2); background-color:var(--gray); border-color:transparent;}
.btn-outline-gray:focus, .btn-outline-gray.focus{box-shadow:0 0 0 0}
.btn-outline-gray.disabled, .btn-outline-gray:disabled{color:var(--white); background-color:var(--lead);}
.btn-outline-gray:active, .btn-outline-gray.active, .show > .btn-outline-gray.dropdown-toggle{color:var(--blue); background-color:var(--white); border-color:transparent!important;}

/* MENU */
.nav-link{text-decoration:none; border-bottom:2px solid var(--white);}
.nav-link:hover{text-decoration:none; border-bottom:2px solid var(--blue);}
.nav-link.active{background-color: var(--blue-original)!important; color:#FFF!important; padding-right:.5rem !important; padding-left:.5rem !important;}
.nav-link.active i{color:#FFF!important;}

.nav-link-footer{text-decoration:none; border-bottom:2px solid var(--blue-original);}
.nav-link-footer:hover{text-decoration:none; border-bottom:2px solid var(--white);}

/* MENU MOVIL */
.modal-backdrop{position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0, 0, 0, 0.5); z-index:9998; display:none;}
.modal-backdrop.active{display:block;}
.close-btn{font-size:2rem; background:none; border:none; align-self:flex-end; cursor:pointer; color:#000!important;}
.mobile-menu{position:fixed; top:0; right:-100%; width:70%; height:100vh; background-color:white; z-index:9999; display:flex; flex-direction:column; justify-content: space-between; padding:1.5rem; transition:right 0.4s ease-in-out;}
.mobile-menu.active{right:-1px;}
body.menu-mobile-open{overflow:hidden;}

/* SIDEBAR VIDEO */
.videocontent{height:486px; width:100%;}
.list-inline-item::before{content:''; position:absolute; left:0; top:45%; transform:translateY(-50%); width:5px; height:5px; background-color:var(--blue); border-radius:50%;}
.sidebarvideo{overflow-y:scroll; height:454px;}
.sidebarvideo::-webkit-scrollbar{width:5px;}
.sidebarvideo::-webkit-scrollbar-track{background:var(--white); border-radius:25px;}
.sidebarvideo::-webkit-scrollbar-thumb{background:var(--sky-blue); border-radius:25px;}
.img-frame{width:180px; height:120px; display:flex; align-items:center; justify-content:center; overflow:hidden; filter:saturate(10%); transition:filter 0.3s ease; border-radius:4px;}
.img-frame img{height:auto; width:auto; object-fit:contain;}
.filter-image{filter:saturate(10%); transition:filter 0.3s ease;}
.cardvideo{background-color:transparent; cursor:pointer; text-decoration:none; transition:background-color 0.3s ease;}
.cardvideo:hover{background-color:var(--blue-over); text-decoration:none;}
.cardvideo:hover h6{text-decoration:underline;}
.cardvideo:hover .img-frame{filter:saturate(100%);}
.active-video{background-color:var(--blue-over);}
.active-video .img-frame{filter:saturate(100%);}

/* SLIDER VIDEO NOTICIA */
.carrusel{display:flex; max-width:1900px; height:486px; margin:auto; background:var(--blue); overflow:hidden; flex-direction:row;}
.carrusel-main{flex:2; position:relative;}
.slide{width:100%; height: 100%; display: none; }
.slide.active{display:block;}
.carrusel-main img,
.carrusel-main iframe{width:100%; height:100%; object-fit:cover; border:0;}

.texto-overlay{position:absolute; background:rgba(0,0,0,0.5); width:100%; height:100%; top:0;}
.posicionabso{position:absolute; bottom:70px; left:50px; width:90%;}
.posicionabso li{background-color:var(--red); color:#FFF; padding:5px 10px!important; margin-bottom:10px;}
.posicionabso .list-inline-item::before{display:none!important;} 
.posicionabso span{margin-top:20px;}


.carrusel-thumbs{flex:1; display:flex; flex-direction:column; overflow-y:auto; background:#F4F4F4;}
.thumb{cursor:pointer; padding:10px; transition:background 0.3s; padding:10px 10px 10px 15px;}
.thumb img{width:100%; border-radius:5px; display:block;}
.thumb.active{background-color:#e7f0f6;}
.thumb.active h6, .thumb.active li , .thumb.active span{color:var(--blue);}
.thumb.active .list-inline-item::before{background-color:var(--blue);}
.thumb.active .img-frame{filter:saturate(100%);}

/*.thumb:hover{background-color:#e7f0f6; text-decoration:none;}*/
.thumb:hover h6{color:var(--blue);}
.thumb:hover li{color:var(--blue);}
.thumb:hover span{color:var(--blue);}
.thumb:hover .list-inline-item::before{background-color:var(--blue);}
.thumb:hover .img-frame{filter:saturate(100%);}


/* NEWS FLASH */
.newsflash{position:relative; overflow:hidden; width:75%;}
.datanewsflash{display:none; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translateY(100%); transition:transform 0.5s ease, opacity 0.5s ease;}
.datanewsflash.active-flash{display:block; opacity:1; transform:translateY(0%);}

/* IMAGES */
.img-frame-b{width:100%; height:170px; background-color:var(--blue-original); display:flex; align-items:start; justify-content:start; overflow:hidden;}
.img-frame-b img{height:100%; width:100%; object-fit:cover; filter:saturate(30%); transition:filter 0.3s ease;}

.img-frame-c{width:100%; height:415px; background-color:var(--blue-original); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.img-frame-c img{height:100%; width:auto; object-fit:contain; filter:saturate(30%); transition:filter 0.3s ease;}

.img-frame-d{width:100%; height:235px; background-color:var(--blue-original); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.img-frame-d img{height:100%; width:auto; object-fit:contain; filter:saturate(30%); transition:filter 0.3s ease;}

.img-frame-e{width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.img-frame-e img{height:100%; width:auto; object-fit:contain; filter:saturate(30%); transition:filter 0.3s ease;}

.img-frame-f{width:100%; height:170px; background-color:var(--blue-original); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.img-frame-f img{height:100%; width:auto; object-fit:cover; filter:saturate(30%); transition:filter 0.3s ease;}

.img-frame-c-detalle{width:100%; height:415px; background-color:var(--blue-original); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.img-frame-c-detalle img{height:100%; width:100%; object-fit:cover; filter:saturate(30%); transition:filter 0.3s ease;}

/* TIKTOK */
.tiktok-embed{zoom:1.16; height:620px;}
/*.tiktok-embed iframe{margin-left:-34px;}*/

.scrolliframe::-webkit-scrollbar{width:5px;}
.scrolliframe::-webkit-scrollbar-track{background:var(--white); border-radius:25px;}
.scrolliframe::-webkit-scrollbar-thumb{background:var(--sky-blue); border-radius:25px;}

/* CONTENT */
#content{font-size:1rem!important; color:var(--lead);}
#content p{font-size:1rem!important; color:var(--lead);}
#content iframe{display:block; margin-top:20px; margin-bottom:20px;}
#content p iframe{display:block; margin-top:20px; margin-bottom:20px;}
#content img{width:100%!important; height:auto;}

.rally{width:100%; height:430px;}

/* MOVIL */
@media only screen and (max-width:1200px){
    .img-frame-b{width:100%; height:290px; align-items:start; justify-content:start;}
    .img-frame-b img{height:100%; width:100%; object-fit:cover;}

    .overflow-1200{overflow-x:scroll;}
    .sidebarvideo{overflow-y:initial; height:90px; display:inline-flex;}
    .cardvideo{width:350px; height:inherit;}
    .overflow-1200::-webkit-scrollbar{width:5px; height:5px;}
    .overflow-1200::-webkit-scrollbar-track{background:var(--white); border-radius:25px;}
    .overflow-1200::-webkit-scrollbar-thumb{background:var(--sky-blue); border-radius:25px;}
    .img-frame{width:120px; height:86px; background-color:var(--blue-original); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:4;}
    .visible-hidden{display:none;}
}
@media only screen and (max-width:990px){
    .videocontent{height:392px; width:100%;}
}
@media only screen and (max-width:575px){
    .img-frame-b{width:100%; height:200px; align-items:start;}
    .img-frame-b img{height:100%; width:100%; object-fit:cover;}

    .img-frame-f{width:100%; height:200px; align-items:start;}
    .img-frame-f img{height:100%; width:100%; object-fit:cover;}

    .videocontent{height:297px; width:100%;}

    .carrusel{display:flex; max-width:1300px; height:328px; flex-direction:column;}
    .carrusel-main{height:220px; overflow:hidden;}
    .carrusel-thumbs{flex-direction:initial;}
    .thumb{padding:10px 10px 10px 10px; min-width:320px;}
    .thumb .titulo-noticia{font-size:16px;}

    .texto-overlay h6{font-size:20px!important;}
    .posicionabso{bottom:10px; left:10px;}
    .posicionabso span{margin-top:10px;}
}
@media only screen and (max-width:460px){
    .videocontent{height:240px; width:100%;}
}
@media only screen and (max-width:430px){
    .videocontent{height:228px; width:100%;}
}
@media only screen and (max-width:414px){
    .videocontent{height:219px; width:100%;}
}
@media only screen and (max-width:390px){
    .videocontent{height:206px; width:100%;}
}
@media only screen and (max-width:375px){
    .videocontent{height:198px; width:100%;}
}