body {
    font-family: Archivo,sans-serif !important;
    background-color: #FBFCF8; 
}

.margin-right-none { margin-right: 0; }
.margin-left-none { margin-left: 0; }

.padding-right-none { padding-right: 0; }
.padding-left-none { padding-left: 0; }

.font-bold { font-weight: bold; }

.msc-titulo {
    position: absolute; 
    top: 20%; 
    left: 50%;
}

/* Carousel */

.carousel-fondos { border-bottom: 12px solid #eed484; position: relative; }

.carousel .carousel-item img {
    width: 100%;
    height: 110%;
    object-fit: cover;
}

.carousel .carousel-item { height: 700px; }
.carousel .carousel-item.carousel-item-noticia { height: 300px; }

.carousel-indicator-news li { background-color: #CECECE; }
.carousel-indicator-news .active { background-color: #000; }

/* Navbar */

.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 9;
}

/* Selectores de paises */

.country-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 70px;
    background-color: #eed484;
    border-radius: 100px;
    font-weight: bold;
    cursor: pointer;
    margin: 8px;
}

.country-selector:hover {
    color: #FFF;
    background-color: #e7c04b;
    transition: background-color 0.s linear;
}

/* Maps */

#map { height: 500px; }

/* Flex */

article.msc-opciones ul {
    display: flex;
    list-style-type: none;
}

article.msc-opciones li {
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
}

/* Divs colaboradores */

.div-employees {
    position: absolute;
    left: 0;
    top: 55%;
    border-radius: 0 100px 100px 0;
    background-color: #FFF;
    display: flex;
    align-items: center;
    width: 21%;
    cursor: pointer;
    opacity: 0.9;
    max-width: 100%;
    overflow: hidden;
}

.div-employees:hover {
    width: fit-content;
    padding: 0 64px 0 0;
    height: 220px;
    opacity: 1;
    overflow-x: auto;
    transition: width 0.4s, height 0.4s, opacity 0.1s linear;
}

.img-welcome {
    transition: transform .7s ease-in-out;
}

.div-employees:hover .img-welcome {
    transform: rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    width: 50px;
}

.div-employees:not(:hover) {
    width: 25%;
    height: 105px;
    transition: width 0.4s, height 0.4s linear;
}

.div-empleado {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: auto;
    font-size: 0.8vw;
    margin-top: 16px;
}

.div-empleado img { width: 50%; }

.div-empleado span {
    margin-top: 8px;
    font-size: 0.6vw;
    text-align: center;
}

.div-empleado span:nth-child(3),
.div-empleado span:nth-child(4) {
    margin-top: -2px;
    font-size: 0.6vw;
}

.img-empleado {
    height: auto;
    max-height: 32%;
    border-radius: 50%;
    /* object-fit: contain; */
}

/* Listas */

article.msc-opciones li:not(.li-sm) {
    background: rgba(255,255,255,0.6);
    border-right: 4px solid #FFF;
    transition: opacity .3s linear;
    height: 500px;
    width: calc(100% - 0.4rem);
}

article.msc-opciones li:before { width: calc(100% - 0.4rem); }
article.msc-opciones li:hover { opacity: 1; }

/* Botones */

.btn-msc {
    background-color: #eed484;
    color: #FFF;
}

.btn-msc:hover {
    color: #FFF !important;
    background-color: #e7c04b !important;
}

.btn-login { 
    width: 100px; 
    height: 50px; 
    border-radius: 8px; 
}

.btn-back { 
    position: fixed;
    top: 16px;
    right: 16px;
    background-color: #eed484;
    color: #FFF;
    border-radius: 8px;
    font-size: 0.8vw;
    padding: 12px 16px;
}

.btn-back:hover {
    color: #FFF !important;
    background-color: #e7c04b !important;
}

/* Opciones */

.msc-opciones {
    width: 80%;
    margin: 0 auto;
}

.msc-opciones a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 26px;
}

.msc-opciones .ul-opciones {
    background: url('../images/carousel/MSC15005488.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    width: 100%;
    height: auto;
    transition: background 0.1s linear;
}

.opciones-care {
    background: url('../images/carousel/MSCCru1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    width: 100%;
    height: auto;
    transition: background 0.1s linear;
}

.opciones-moments {
    background: url('../images/carousel/MSC17010612.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    width: 100%;
    height: auto;
    transition: background 0.1s linear;
}

.opciones-growth {
    background: url('../images/carousel/MSC17010618.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    width: 100%;
    height: auto;
    transition: background 0.1s linear;
}

.opciones-university {
    background: url('../images/carousel/contenedores.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    width: 100%;
    height: auto;
    transition: background 0.1s linear;
}

.opciones-spirit {
    background: url('../images/carousel/MSC18015762.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    width: 100%;
    height: auto;
    transition: background 0.1s linear;
}

.opciones-community {
    background: url('../images/carousel/MSC17010612.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    width: 100%;
    height: auto;
    transition: background 0.1s linear;
}

.opciones-localpolicy {
    background: url('../images/carousel/MSClocalpolicy.png');
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    width: 100%;
    height: auto;
    transition: background 0.1s linear;
}

ul li .img-opciones:before {
    height: auto;
    opacity: 0;
}

.img-opciones {
    display: flex;
    align-items: center;
}

#ul-opciones li:hover img {
    width: 16rem !important;
    transition: width 0.3s linear;
}

.li-sm {
    width: 50%;
    max-width: 100%;
    height: 150px !important;
    flex-direction: column;
    /*border: 1px solid #000;*/
    align-items: center !important;
}

.li-sm:after {
    display: block;
    background-color: #eed484;
    border-radius: 30rem;
    height: 0.4rem;
    width: 10rem;
    content: "";
    margin: 0 auto;
    margin-top: 1rem;
}

/* Varios */

.background-white { background-color: #FFF; }
.background-pearl { background-color: #FBFCF8; }
.background-transparent { background-color: transparent; }

.smooth-background { transition: background-color 0.3s linear; }

.msc-header {
    position: relative; 
    left: -50%; 
    font-size: 2.5vw; 
    z-index: 9; 
    font-family: Archivo,sans-serif !important; 
    color: #FFF;         
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
             1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

.msc-title:after {
    display: block;
    background-color: #eed484;
    border-radius: 30rem;
    height: 0.4rem;
    width: 20rem;
    content: "";
    margin: 0 auto;
    margin-top: 1rem;
}

.font-login { font-size: 0.8vw; }

/* Footer */

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #222221;
    color: #FFF !important;
    height: 100px;
    margin-top: 5%;
}

footer a {
    color: #FFF !important;
    font-size: 1vw;
}

.fa-brands { margin: 0 8px 0 8px; }

/* Medias */

@media screen and (max-width: 600px) {
    .carousel .carousel-item { height: 250px; }
    .carousel .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    .img-news { width: 30% !important; }
    
    .img-opciones { width: 8rem !important; }
    ul li:hover img {
        width: 12rem !important;
        transition: width 0.3s linear;
    }

    .font-login { font-size: 2.3vw; } 
    .fa-2x { font-size: 2vw; }

    .div-employees { display: none; width: 50%; font-size: 3vw !important;}
    .img-welcome { width: 30px !important; }
    .div-employees:not(:hover) {
        width: 50%;
        height: 70px;
        transition: width 0.4s, height 0.4s linear;
    }

    .modal { margin-top: 40% !important; }
    .modal-content-home, .modal-content-other { height: 300px !important; }

    .msc-titulo {
        position: absolute;
        top: 30%;
        left: 50%;
    }

    .msc-titulo h2 { font-size: 2.5vw !important; }

    .btn-login { 
        width: 80px;
        height: 34px;
        border-radius: 8px; 
    }

    #map { height: 400px; }
    .div-agencias { margin-top: 32px; }
}

@media screen and (min-width: 601px) and (max-width: 992px) {
    .carousel .carousel-item { height: 400px; }

    .font-login { font-size: 1.3vw; }

    .img-opciones { width: 8rem !important; }
    #ul-opciones li:hover img {
        width: 10rem !important;
        transition: width 0.3s linear;
    }

    article.msc-opciones li { height: 300px; }
    article.msc-opciones li:not(.li-sm) { height: 300px; }

    .div-employees { width: 40%; }
    .div-employees:hover {
        height: 160px;
    }

    .img-welcome { width: 50px !important; }
    
    .div-employees:not(:hover) {
        width: 40%;
        height: 100px;
        transition: width 0.4s, height 0.4s linear;
    }

    .div-empleado { width: 60px; }
    .div-empleado img { width: 40%; }

    .btn-login { 
        width: 80px;
        height: 40px;
        border-radius: 8px; 
    }
    
    .fa-2x { font-size: 1.2em; }

    .modal-content-home, .modal-content-other { height: 450px; }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
    .carousel .carousel-item { height: 400px; }

    .fa-2x { font-size: 1.5em; }
    .font-login { font-size: 1.5vw; } 

    .img-opciones { width: 8rem !important; }
    ul li:hover img {
        width: 10rem !important;
        transition: width 0.3s linear;
    }

    article.msc-opciones li { height: 300px; }
    article.msc-opciones li:not(.li-sm) { height: 400px; }

    .div-employees { width: 50%; }
    .div-employees:hover {
        height: 180px;
    }
    .div-employees:not(:hover) {
        width: 35% !important;
    }

    .div-empleado { width: 90px; }
    .div-empleado img { width: 40%; }

    .modal-content-home, .modal-content-other { height: 450px; }
}

@media screen and (min-width: 1201px) and (max-width: 1500px) {
    .carousel .carousel-item { height: 450px; }

    .font-login { font-size: 1vw; } 

    .div-employees { width: 30%; }
    .div-employees:hover {
        height: 180px;
    }

    article.msc-opciones li { height: 300px; }
    article.msc-opciones li:not(.li-sm) { height: 400px; }

    .img-opciones { width: 10rem !important; }
    #ul-opciones li:hover img { width: 12rem !important; }

    .div-empleado { width: 100px; }
    .div-empleado img { width: 40%; }
    .div-empleado span {
        margin-top: 8px;
        font-size: 0.8vw;
    }

    .modal-content-home, .modal-content-other { height: 500px; }
}

@media screen and (min-width: 1501px) and (max-width: 2100px) {
    .fa-2x { font-size: 1.5em; }

    .div-empleado { width: 120px; }
    .div-empleado img { width: 40%; }

    .modal-content-home, .modal-content-other { height: 650px; }
}

@media screen and (min-width: 2101px) {
    .div-empleado { width: 160px; }
    .div-empleado img { width: 40%; }

    .modal-content-home, .modal-content-other { height: 500px; }
}