/* General */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Poppins', sans-serif;
    font-size: 100%;
    color: white;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}
#todo {
    width: 100%;
    height: 100%;
    /*display: none;*/
}
.row {
    margin-left: 0;
    margin-right: 0;
}

h1 { /* 2.5em (40px en 1920 x 1080) por defecto */
    font-family: 'Viga', sans-serif;
}
p {
    font-size: 1.125em; /* 18px en 1920 x 1080 */
}



/* Paleta de colores */
.color-1 { /* azul */
    background: #0066CC;
}
.color-2 { /* rojo obscuro */
    background: #990000;
}
.color-3 { /* verde turquesa */
    background: #339999;
}
.color-4 { /* mostaza */
    background: #CC9900;
}
.color-5 { /* naranja (navbar) */
    background: #CC6600;
}
.color-6 { /* crema (claro) */
    background: #FFFBBD;
}

.color-negro {
    background: black;
}

.color-subtitulo { /* gris */
    color: #8E8E8E;
}

.degradado {
    background: linear-gradient(to bottom, black, transparent);
    /*background: rgba(0,0,0,50%);*/
}


/* espacios */
.espacio-arriba {
    margin-top: 10vh;
}
.espacio-abajo {
    margin-bottom: 5vh;
}
.margenes-lados {
    padding-left: 15px;
    padding-right: 15px;
}



/* Barra navegación */
#navbarCel {
    display: none;
}

#navbarWeb.navbar {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
}
#navbarWeb .navbar-brand {
    margin-left: 15px;
    margin-right: 60px;
}
#navbarWeb.navbar .nav-link {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
    padding-right: .5rem;
    padding-left: .5rem;
}
.navbar {
    padding-left: 10vw;
    padding-right: 10vw;
}
.navbar * {
    margin-top: auto;
    margin-bottom: auto;
    color: white;
}
.navbar h3 {
    font-size: 18px;
    font-weight: lighter;
}


.navbar li {
    margin-right: 10px;
}
.navbar li a,
.navbar li a:visited {
    text-decoration: none;
    position: relative;
}
.navbar li a:after,
.navbar li a:visited:after {
    margin-bottom: -3px;
    content: '';
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    background: white;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
        transition: 0.2s;
}
.hoverable .navbar li a:hover:after,
.hoverable .navbar li a:visited:hover:after {
    width: 100%;
}
.navbar a.active {
    margin-top: 3px;
    border-bottom: 3px solid white;
}

#navbarWeb .navbar-toggler {
    margin-left: 10px;
    margin-right: 10px;
}
#navbarWeb .hamburguesa#collapsibleNavbarWeb.show,
#navbarWeb .hamburguesa#collapsibleNavbarWeb.collapsing {
    position: absolute;
}
#navbarWeb .hamburguesa#collapsibleNavbarWeb.show li,
#navbarWeb .hamburguesa#collapsibleNavbarWeb.collapsing li {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.navbar-toggler {
    border: 2px solid rgba(0,0,0,1) !important;
}
.navbar-collapse {
    padding: 5px;
}


#pleca-uv {
    left: auto;
    right: 10vw;
    width: 213px;
    height: 21px;
    margin-right: 15px;
}



/* Presentación full screen */
#presentacion-escritorio {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

#presentacion-escritorio .container-presentacion {
    float: left;
    height: 100%;
    min-height: 500px;
}

#presentacion-escritorio #container-presentacion-recuadros {
    width: 70%;
    height: 100%;
}

#presentacion-escritorio #presentacion-recuadros {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

#presentacion-escritorio #container-presentacion-imagenes {
    width: 50%;
    height: 100%;
    margin-left: -20%;
}

#presentacion-escritorio #presentacion-imagenes {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.presentacion .carousel-indicators {
    background-color: transparent;
}

.presentacion .carousel-inner {
    width: 100%;
    height: 100%;
}

.presentacion .carousel-item {
    height: 100%;
    width: 100%;
}

.presentacion .recuadro {
    height: 100%;
    width: 100%;
}

#presentacion-escritorio .texto-recuadro {
    width: 100%;
    height: 100%;
    padding-left: 10vw;
    display: -webkit-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
#presentacion-escritorio .texto-dentro {
    margin-left: 15px;
    width: 60%;
}

#presentacion-escritorio .img-recuadro {
    width: inherit;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
#presentacion-escritorio .img-dentro {
    width: inherit;
}


.presentacion .img-slide {
    width: 100%;
    height: auto;
    min-height: 131.28px;
}

.presentacion .carousel p {
    margin-block-end: 7px;
}
.presentacion .carousel a {
    opacity: 1;
}
.hoverable .presentacion .carousel a:hover {
    opacity: 1;
}
.presentacion .carousel span {
    display: -webkit-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: rgba(0,0,0,50%);
    font-size: 35px;
}
.hoverable .presentacion .carousel a:hover span {
    background: black;
}

.presentacion .carousel-control-next, .presentacion .carousel-control-prev {
    width: 10vw;
}


/* Carousel cel */
#presentacion-movil {
    display: none;
}



/* Todo2 (autores, descripción, contenido) */
#todo2 {
    margin-left: 10vw;
    margin-right: 10vw;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}



/* Autores */
#autores {
    width: 100%;
}
#interiorAutores {
    width: 100%;
}
#interiorAutores div img {
    width: 100%;
    height: auto;
}

.textoAutores {
    height: 170px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.textoAutores * {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 80%;
}
.textoAutores h1 {
    font-size: 1.125em; /* 18px en 1920 x 1080 */
    margin-top: 10px;
    margin-bottom: 10px;
}
.textoAutores p {
    font-size: 1em; /* 16px en 1920 x 1080 */
}
.textoAutores a {
    text-decoration: none;
    color: white;
}
.textoAutores h5 { /* + Info (autores) */
    text-align: right;
    font-size: 0.875em; /* 14px en 1920 x 1080 */
}
.hoverable .textoAutores h5:hover { /* + Info (autores) */
    font-size: 1.375em; /* 22px en 1920 x 1080 */
    cursor: pointer;
}

.info {
    position: absolute;
    right: 10px;
    bottom: 20px;
}

/* Modal */
#autores .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}
#autores .imgModal {
    max-width: 140px;
}
#autores .modalExpertoCel {
    display: none;
}
#autores .textoModal {
    border-left: 2px solid;
}
#autores .textoModal h2 {
    font-size: 1.5625em; /* 25px */
    font-weight: bold;
}
#autores .modal-footer {
    border-top: none;
}
#autores .cerrarModal {
    visibility: hidden;
}



/* Descripción e introducción */
.cruzado {
    width: 100%;
}
.interiorCruzado {
    width: 100%;
}
.imgCruzado {
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.imgCruzado img {
    width: auto;
    height: 100%;
}
.textoCruzado {
    padding-top: 6.48vh;
    padding-bottom: 6.48vh; /* 7.87vh */
    padding-left: 3.24vw;
    padding-right: 4.63vw;
}
.der {
    float: right;
}



/* Contenido */
#contenido {
    width: 100%;
}
#interiorContenido {
    width: 100%;
}
.imgContenido {
    margin-bottom: 5px;
}
.imgContenido div img {
    width: 100%;
    height: auto;
}
.imgContenido div h1 {
	font-size: 1.375em; /* 22px, Saúl */
}



/* PDF */
#seccionPdf {
    display: -webkit-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center;
}
#descargaPdf {
    border: 1px #0066CC solid;
}
.hoverable #descargaPdf:hover {
    border: 1px white solid;
}
#descargaPdf a {
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
#descargaPdf a p {
    color: #8E8E8E; /* gris */
    font-size: 1.5625em; /* 25px */
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
}
#descargaPdf a div {
    width: auto;
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}
#descargaPdf a div img {
    width: 65%;
    height: auto;
}



/* Footer */
footer {
    padding: 10px;
    text-align: center;
}
#logos {
    display: -webkit-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
    margin: 1rem 10vw;
}
#logos img {
    min-width: 75px;
    min-height: 75px;
    max-width: 300px;
    max-height: 120px;
}
footer p {
    margin-top: 10px;
    margin-bottom: 0;
}
#logo-uvi {
    width: 40%;
}
#logo-uv {
    width: 40%;
}



/* Video intro */
#panelVideo {
    display: -webkit-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
    background: #990000;
    width: 100%;
    height: 100%;
}



@media screen and (min-width: 768px) {
    /* Zoom hover */
    .imgContenido div {
        overflow: hidden;
        text-align: center;
        margin: auto;
    }
    .imgContenido div img {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
    }
    .imgContenido div > h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity .2s, visibility .2s;
        -moz-transition: opacity .2s, visibility .2s;
        -ms-transition: opacity .2s, visibility .2s;
        -o-transition: opacity .2s, visibility .2s;
            transition: opacity .2s, visibility .2s;
        color: white;
    }
    .hoverable .imgContenido div:hover img {
        -webkit-transform: scale(1.4);
        -ms-transform: scale(1.4);
            transform: scale(1.4);
        -webkit-transform-origin: 50% 25%;
        -ms-transform-origin: 50% 25%;
            transform-origin: 50% 25%;
        opacity: .3;
    }
    .hoverable .imgContenido div:hover h1 {
        visibility: visible;
        opacity: 1;
    }
}



@media screen and (max-width: 1750px) {
    body {
        font-size: 95%;
    }
}
@media screen and (max-width: 1600px) {
    body {
        font-size: 90%;
    }
}
@media screen and (max-width: 1450px) {
    body {
        font-size: 85%;
    }
}
@media screen and (max-width: 1300px) {
    body {
        font-size: 80%;
    }
}


/* PARA PANTALLA ANGOSTA (CEL) */
/* Media query para cambiar al bajar de 768px: */
@media screen and (max-width: 767px) {
    .margenes-lados {
        padding-left: 0;
        padding-right: 0;
    }


    #navbarWeb {
        display: none;
    }
    #navbarCel {
        display: flex;
    }

    .navbar li {
        margin-right: 0;
    }

    #pleca-uv {
        margin-right: 0;
    }


    #presentacion-escritorio {
        display: none;
    }
    #presentacion-movil {
        display: inline-block;
        margin-bottom: 30px;
        /*height: 568px;*/
        height: 680px;
    }

    .presentacion .carousel {
        height: inherit;
    }

    .presentacion .carousel-inner {
        height: inherit;
    }
    .presentacion .carousel-item {
        height: inherit;
    }
    .presentacion .texto-recuadro {
        padding: 30px 10vw 50px;
        width: 100%;
    }
    .presentacion .carousel span {
        position: absolute;
        top: 120px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 30px;
    }

    .presentacion .carousel-control-prev {
        left: 5px;
    }
    .presentacion .carousel-control-next {
        right: 5px;
    }


    #todo2 {
        margin-left: 0;
        margin-right: 0;
    }


    #autores {
        padding-left: 10vw;
        padding-right: 10vw;
    }
    .textoAutores h5 { /* + Info (autores) */
        font-size: 1.375em; /* 22px en 1920 x 1080 */
    }

    #autores .textoModal {
        margin-bottom: 0;
    }
    #autores .cerrarModal {
        visibility: visible;
    }


    .cruzado {
        padding-left: 0;
        padding-right: 0;
    }
    .imgCruzado {
        overflow: none;
        width: 100%;
        height: auto;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    }
    .imgCruzado img {
        width: 100%;
        height: auto;
    }
    .der {
        float: none;
    }
    .textoCruzado {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
        padding-left: 10vw;
        padding-right: 10vw;
    }


    #contenido {
        padding-left: 10vw;
        padding-right: 10vw;
    }
    #interiorContenido>div {
        padding-left: 0;
        padding-right: 0;
        display: -webkit-box;
        display: -ms-flexbox;
            display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    }

    /* En style-tablet (si es móvil lo carga) */
    .imgContenido {
        margin-bottom: 10px;
    }
    /* --- */

    .imgContenido div {
        max-width: 280px;
    }
    .imgContenido div > h1 {
        display: none;
    }


    #logos {
        margin: 1rem;
    }
    #logo-uvi {
        width: 45%;
    }
    #logo-uv {
        width: 45%;
    }
}

@media screen and (max-width: 575px) {
    body {
        font-size: 75%;
    }


    #pleca-uv {
        right: 2vw;
    }


    #presentacion-movil {
        height: 600px;
    }


    #interiorAutores>div {
        padding-left: 0;
        padding-right: 0;
    }

    #autores .imgModal {
        max-width: none;
        margin-bottom: 20px;
    }
    #autores .modalExpertoWeb {
        display: none;
    }
    #autores .modalExpertoCel {
        display: block;
    }
    #autores .textoModal {
        border-top: 2px solid;
        border-left: none;
        padding-top: 20px;
    }


    #panelVideo img {
        max-width: 300px;
        max-height: 300px;
    }
}

@media screen and (max-height: 575px) {
    #panelVideo img {
        max-width: 300px;
        max-height: 300px;
    }
}

@media screen and (max-width: 475px) {
    #presentacion-movil {
        height: 625px;
    }
}

@media screen and (max-width: 449px) {
    #todo2 section>h1 {
        font-size: 2.375em;
    }

    .textoCruzado h1 {
        font-size: 2.375em;
    }
}

@media screen and (max-width: 400px) {
    #navbarCel .navbar-brand {
        width: 50%;
    }
    #navbarCel .navbar-brand img {
        width: 100%;
    }


    #descargaPdf {
        font-size: 90%;
    }
}

@media screen and (max-width: 375px) {
    #presentacion-movil {
        height: 600px;
    }
}