* {
    font-family: Arial, Helvetica, sans-serif;
}

/* Cambiar el color del link nav*/

.navbar li a:hover {
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
        sans-serif;
    background-color: #188038;
    -webkit-transform: scale(1.02);
}

.navbar .active {
    background-color: #188038;
}

nav {
    background-color: #34a853;
}

/*JUMBOS*/

.jumbos {
    height: 100vh;
    background-size: 100%;
    display: grid;
    background-image: url(https://storage.softitlan.com/index/ciencia-fondo-horizontal.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    /* background-attachment: fixed; */
}

.jumbos .container {
    margin-top: 10%;
    align-self: center;
    justify-self: center;
}

/*ciencia con particulas*/

.ciencia .container-fluid {
    height: 30vh !important;
}

.ciencia .container-fluid .row {
    margin-top: 3%;
    width: 98%;
}

/*Cartas de los juegos*/

.juegos {
    margin-top: 2%;
    margin-left: 2%;
    margin-right: 2%;
    text-align: justify;
}

.juegos a {
    text-decoration: none;
    color: black;
}

.juegos .card:hover {
    transition: 0.8s;
    transform: scale(1.05);
}

/*footer*/

footer {
    background-color: #131a22;
    color: white;
    text-align: center;
    padding: 0% auto 0% auto;
    margin-top: 2%;
}

footer .row .img-fluid {
    width: 40%;
}

footer hr {
    height: 5px !important;
    width: 50%;
    margin: 2vh auto 2vh auto;
    background-color: rgb(255, 255, 255);
}

footer span .derechos {
    display: inline;
    margin: 0 10% 0 0;
}

/* Teléfonos */
@media only screen and (max-width: 300px) {
    .ciencia {
        height: 55vh !important;
    }
}

@media only screen and (max-width: 575px) {
    .navbar li a:hover {
        -webkit-transform: scale(0.98);
    }
    .jumbos {
        width: 100vw;
        height: 70vh;
        background-image: url(https://storage.softitlan.com/index/ciencia-fondo-vertical.jpg);
    }
    .jumbos .img-fluid {
        width: 70%;
        height: 90%;
    }
    .jumbos .container {
        text-align: center;
        margin-top: 20%;
    }

    .jumbos .container svg {
        width: 80% !important;
    }
    /*Felchitas*/
    svg {
        margin-top: 2%;
        width: 35%;
        height: 35%;
        color: white;
    }
    /*ciencia con particulas*/
    .ciencia .row {
        width: 94vw !important;
    }
    .ciencia .container-fluid {
        height: 70vw !important;
    }
    .ciencia .container-fluid .row {
        width: 98%;
    }
    .ciencia p {
        text-align: justify;
        font-size: 100%;
    }
    footer span .derechos {
        display: block;
    }
    footer .row .img-fluid {
        align-items: center;
        width: 35%;
    }
}

/* Tablets y phablets telefono vertical*/

@media only screen and (min-width: 576px) and (max-width: 767px) /*and (orientation: portrait) */ {
    .jumbos {
        width: 100vw;
        height: 60vh;
        background-image: url(https://storage.softitlan.com/index/ciencia-fondo-horizontal.jpg);
        background-size: 100% 100%;
    }
    .jumbos .container {
        /* position: absolute;
        top: 35%; */
    }
    .jumbos .container svg {
        width: 30% !important;
    }

    .ciencia .container-fluid {
        height: 15vh !important;
        font-size: 90%;
    }
    footer .img-fluid {
        width: 60% !important;
    }
    footer .container .row .col .img-fluid {
        width: 100vw;
    }
}

/* Tablets y phablets telefono horizontal*/

@media only screen and (min-width: 576px) and (max-width: 767px) and (orientation: landscape) {
    .jumbos {
        width: 100vw;
        height: 100vh;
        background-image: url(https://storage.softitlan.com/index/ciencia-fondo-horizontal.jpg);
        background-size: 100% 100%;
    }
    svg {
        width: 35%;
        height: 35%;
        color: white;
    }
    .ciencia .container-fluid {
        height: 40vh !important;
        font-size: 90%;
    }
    footer .img-fluid {
        width: 60% !important;
    }
    footer .container .row .col .img-fluid {
        width: 100vw;
    }
}

/* Escritorio pequeño / tablet */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .jumbos {
        width: 100vw;
        height: 100vh;
        background-image: url(https://storage.softitlan.com/index/ciencia-fondo-vertical.jpg);
        background-size: 100%;
    }
    /*Felchitas*/
    .jumbos .container svg {
        width: 10% !important;
    }
    .ciencia .container-fluid {
        height: 20vw !important;
        font-size: 90%;
    }
    footer .container .row .col .img-fluid {
        width: 70%;
    }
}

/* Escritorio grande */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    /* .jumbos {
        height: 65vh;
    } */
    .ciencia .container-fluid {
        height: 30vh !important;
    }
    footer .container .row .col .img-fluid {
        width: 60%;
    }
}

/* Escritorio extra grande este diseño lo soporta desde el inicio */

@media only screen and (min-width: 1200px) {
}

/* Full HD y un poco mas */

@media only screen and (min-width: 2000px) and (max-width: 2559px) {
    nav {
        font-size: 2.5vh !important;
    }
    nav .navbar-brand {
        font-size: 2.8vh !important;
        width: 12%;
    }
    nav img {
        width: 30%;
    }
    nav .navbar-nav {
        width: 100%;
    }
    nav .nav-item {
        margin-left: 1%;
    }
    footer {
        font-size: 1.6vh !important;
    }
}

/* Quad HD */

@media only screen and (min-width: 2560px) and (max-width: 3839px) {
    nav {
        font-size: 2vh !important;
    }
    nav .navbar-brand {
        font-size: 2.1vh !important;
        width: 8%;
    }
    nav img {
        width: 30%;
    }
    nav .navbar-nav {
        width: 100%;
    }
    nav .nav-item {
        margin-left: 1%;
    }
    .jumbos .container {
        top: 35%;
    }
    .ciencia .container-fluid {
        height: 20vh !important;
    }
    .ciencia h2 {
        font-size: 2.6vh;
    }
    .ciencia p {
        font-size: 1.6vh;
    }
    .juegos h4 {
        font-size: 2.6vh;
    }
    .juegos p {
        font-size: 1.6vh;
    }
    footer {
        font-size: 1.2vh;
    }
}

/* Pasando 4k llegando a 8k */

@media only screen and (min-width: 3840px) and (max-width: 7679px) {
    nav {
        font-size: 2vh !important;
    }
    nav .navbar-brand {
        font-size: 2.1vh !important;
        width: 8%;
        margin-right: 5%;
    }
    nav img {
        width: 30%;
    }
    nav .navbar-nav {
        width: 100%;
    }
    nav .nav-item {
        margin-left: 1%;
    }
    .jumbos .container {
        top: 35%;
    }
    .ciencia .container-fluid {
        height: 20vh !important;
    }
    .ciencia h2 {
        font-size: 2.6vh;
    }
    .ciencia p {
        font-size: 1.6vh;
    }
    .juegos h4 {
        font-size: 2.6vh;
    }
    .juegos p {
        font-size: 1.6vh;
    }
    footer {
        font-size: 1.6vh;
    }
}

/*8k y mas*/

@media only screen and (min-width: 7680px) {
    nav {
        font-size: 2vh !important;
    }
    nav .navbar-brand {
        font-size: 2.1vh !important;
        width: 8%;
        margin-right: 5%;
    }
    nav img {
        width: 30%;
    }
    nav .navbar-nav {
        width: 100%;
    }
    nav .nav-item {
        margin-left: 1%;
    }
    .jumbos .container {
        top: 35%;
    }
    .jumbos h2 {
        font-size: 3vh;
    }
    .juegos {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }
    .ciencia .container-fluid {
        height: 20vh !important;
    }
    .ciencia h2 {
        font-size: 2.6vh;
    }
    .ciencia p {
        font-size: 1.6vh;
    }
    .juegos h4 {
        font-size: 2.6vh;
    }
    .juegos p {
        font-size: 1.6vh;
    }
    footer {
        font-size: 1.6vh;
    }
}