@font-face {
font-family:Montserrat-Bold; /* requerido */
src:url(../fonts/Montserrat-Bold.ttf);                      /* requerido */
}
@font-face {
font-family:Montserrat-Regular; /* requerido */
src:url(../fonts/Montserrat-Regular.ttf);                      /* requerido */
}

body{
    padding-top: 7rem;
    font-family:Montserrat-Regular;
    background-color: white;
}
.opmenu:hover{
    text-decoration: none !important;
    color: #8f2829 !important;
}
.active{
    font-weight: bolder !important;
    text-decoration: underline !important;
}
.titulo1{
    width: 100%;
    font-size: 2em;
    text-align: center;
    font-weight: bolder;
    margin-bottom: 1vh;
    font-family:Montserrat-Bold;
}
.contentCarrucel{
    height: 29rem;
}
.propuestasDiv{
    text-align: center;
    width: 80%;
    margin-left: 10%;
}
.imgPropuesta{
    width: 70%;
    margin-left: 15%;
}
.titPopuesta{
    font-weight: bolder;
    font-size: .8em;
    margin-top: 1vh;
}

.video1 {
    width: 100%;
    text-align: center;
    float: left;
}

video.spot1 {
    width: 60%;
    margin: 7vh 20%;
    border-radius: 4vh;
}

.NotasRedes {
    width: 90%;
    margin: 2vh 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.notasRedes iframe {
    width: 50% !important;
    float: left;
    margin: 4vh 0vw !important;
}

footer {
    position: relative;
    width: 100%;
    float: left;
    height: 18vh;
    margin-top: 5vh;
}

footer h6 {
    width: 100%;
    float: left;
    text-align: center;
    color: #8f2829;
    font-size: 1em;
}


#menuredes2{
    position: absolute;
    text-align: center;
    width: 18%;
    bottom:2vw;
    left: 41%;
    padding-bottom: 4vw;
}

        #menuredes {
           position: absolute;
             overflow: hidden;
             z-index: 2;
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

        }
        #show-phones {
            display: none;
            width: 90%;
            position: absolute;
            top: -4vw;
            right: -16vw;
            background-color: white;
            padding: .7vw;
            font-size: 1vw;
            line-height: 2vw;
            z-index: 22;
            border-bottom-right-radius: 1vw;
            border-top-right-radius: 1vw;
            border-top-left-radius: 1vw;
            font-family: Avenir;  
        }
       
        .showphonea:hover{
            text-decoration: underline;
        }
        .phone{
            float: left;
            width: 100%;
        }
        .showphonea {
            text-decoration: none;
            color: #136495;
            float: left;
            width: 79%;
            padding-left: 5%;
        }
        .bandera2 {
            width: 10%;
            float: left;
            padding-left: 2%;
            padding-top: .5vw;
        }

        #iconoredes {
            width: 88%;
            padding-left: 3%;
            float: left;
            
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
        }
        .contenedor {
            width: 19%;
            height: 100%;
            float: left;
            -moz-transition: all 0.5s ease-out;
            -webkit-transition: all 0.5s ease-out;
            -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
        }
#menuredes div {
    width: 19%;
    height:100%;
    float:left;
    font-family: sans-serif;
    font-size: 2em;
    color: #444;
    text-shadow: 1px 1px 0 #CACACA;
    -moz-transition: all 0.5s ease-out;
     -webkit-transition: all 0.5s ease-out;
     -o-transition: all 0.5s ease-out;
     transition: all 0.5s ease-out;
}
#menuredes div p {margin: 10px;}
#menuredes:hover div {
  width: 17.5%;
  font-size: 1em;
}
#menuredes:hover div:hover {
    width: 30%;
    color: #f0f0f0;
    font-size: 4em;
    text-shadow: 1px 1px 0 #444;
}
.light{
    background-color: #444 !important;
}
.carrucelConoceme{
    float: left;
    margin-bottom: 13vh;
}
.divTextConoceme {
    width: 100%;
    float: left;
    margin-top: 2vh;
    margin-bottom: 11vh;
}

.divImgConoceme {
    width: 45%;
    float: left;
}

.txtConoceme {
    float: left;
    width: 55%;
}

.txtConoceme p {
    margin: 3vh 4vw;
    text-align: center;
    font-weight: bolder !important;
    color: black;
}

.divImgConoceme img {
    width: 100%;
}
.movil {
    display: none;
}
.servicios {
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}
.titulo-servicios{
    color: #8f2829;
    font-family:Montserrat-Bold; 
    font-size: 2.2rem;
    line-height: .3rem;
}
#slide-servicios {
    width: 1900%;
    height: 55%;
    position: relative;
    margin: 0;
    left: 0;
    top: -13%;
    text-align: left;
    transition: left 2s;
    -webkit-transition: left 2s;
}
.servicio {
    width: 5.26%;
    text-align: center !important;
    float: left;
    color: black;
    padding-top: 16vh;
}
.flecha-derecha {
    width: 2%;
    position: absolute;
    top: 40%;
    right: 15vh;
    cursor: pointer;
    z-index: 9999;
}
.flecha-izquierda {
    width: 2%;
    position: absolute;
    top: 40%;
    left: 15vh;
    cursor: pointer;
    z-index: 9999;
}
.servicio img {
    width: 41%;
    border-radius: 10em !important;
    display: inline;
}
.imgPropRiM {
    width: 27% !important;
}
.imagen-servicio {
    float: left;
    padding-left: 12%;
}
.texto-servicio {
    width: 50%;
    padding-left: 9%;
    float: left;
    color: black;
    text-align: left;
    padding-top: 50px;
    padding-right: 5%;
    display: inline;
    height: 51vh;
    overflow: auto;
    font-family:Montserrat-Regular;
}
.texto-servicio h1{
    color: black;
    font-family:Montserrat-Bold;
    font-size: 1.4em;
    color:#8f2829;
}
.texto-servicio p{
    color: black;
    font-family:Montserrat-Bold;
    text-align: justify;
}
.menu-servicios {
    width: 90%;
    margin-left: 5% !important;
    float: left;
    position: absolute;
    margin: 0;
    left: 0;
    bottom: 0vh;
    z-index: 999;
}
.menu-servicios img {
    width: 12.5%;
    padding: 2vh 2%;
    float: left;
    cursor: pointer;
}

.titulo-servicio-focus{
    width: 100%;
    text-align: center;
    
}
#tit-serv{
    padding-top: 10px;
    width: 40%;
    background-color: transparent;
    font-family:Montserrat-Bold;
    border: none;
    color:#8f2829;
    text-align: center;
    font-size: 1.5em;
}


    #servicios-imagen{
        width: 50%; 
    }
#imagenesdeservicio{
    width: 1900%;
    height: 56.5%;
    position: relative;
    margin: 0;
    left: 0;
    top:0%;
    text-align: left;
    transition: left 2s;
    -webkit-transition: left 2s; /* Safari 3.1 to 6.0 */ 
}
    .imagen-service{
        width: 5.26%;
        text-align: center;
        float: left;
        color: black;
    }
    #menu-servicios1{
        position: relative;
        margin: 0;
        left: 0;
        top:-35%;
        width: 100%;
        height: 52%;
        float: left;
        background-color: black;
        overflow-y: scroll;
        padding-bottom: 10%;
    }
        #menu-servicio-opcion-1{
        width: 1100%;
        position: relative;
        height: 1rem;
        padding-top:.3rem;
        padding-bottom: .3rem;
        color: white;
        font-family: seravek;
        font-size: .8rem;
        text-align: center;
        left: 0;
        transition: left 2s;
        -webkit-transition: left 2s; /* Safari 3.1 to 6.0 */    
        background: rgba(48,48,48,1);
        background: -moz-linear-gradient(top, rgba(48,48,48,1) 0%, rgba(41,41,41,1) 9%, rgba(38,38,38,1) 18%, rgba(54,53,54,1) 39%, rgba(77,77,77,1) 55%, rgba(54,54,54,1) 69%, rgba(48,48,48,1) 76%, rgba(48,48,48,1) 88%, rgba(94,94,94,1) 99%, rgba(94,94,94,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(48,48,48,1)), color-stop(9%, rgba(41,41,41,1)), color-stop(18%, rgba(38,38,38,1)), color-stop(39%, rgba(54,53,54,1)), color-stop(55%, rgba(77,77,77,1)), color-stop(69%, rgba(54,54,54,1)), color-stop(76%, rgba(48,48,48,1)), color-stop(88%, rgba(48,48,48,1)), color-stop(99%, rgba(94,94,94,1)), color-stop(100%, rgba(94,94,94,1)));
        background: -webkit-linear-gradient(top, rgba(48,48,48,1) 0%, rgba(41,41,41,1) 9%, rgba(38,38,38,1) 18%, rgba(54,53,54,1) 39%, rgba(77,77,77,1) 55%, rgba(54,54,54,1) 69%, rgba(48,48,48,1) 76%, rgba(48,48,48,1) 88%, rgba(94,94,94,1) 99%, rgba(94,94,94,1) 100%);
        background: -o-linear-gradient(top, rgba(48,48,48,1) 0%, rgba(41,41,41,1) 9%, rgba(38,38,38,1) 18%, rgba(54,53,54,1) 39%, rgba(77,77,77,1) 55%, rgba(54,54,54,1) 69%, rgba(48,48,48,1) 76%, rgba(48,48,48,1) 88%, rgba(94,94,94,1) 99%, rgba(94,94,94,1) 100%);
        background: -ms-linear-gradient(top, rgba(48,48,48,1) 0%, rgba(41,41,41,1) 9%, rgba(38,38,38,1) 18%, rgba(54,53,54,1) 39%, rgba(77,77,77,1) 55%, rgba(54,54,54,1) 69%, rgba(48,48,48,1) 76%, rgba(48,48,48,1) 88%, rgba(94,94,94,1) 99%, rgba(94,94,94,1) 100%);
        background: linear-gradient(to bottom, rgba(48,48,48,1) 0%, rgba(41,41,41,1) 9%, rgba(38,38,38,1) 18%, rgba(54,53,54,1) 39%, rgba(77,77,77,1) 55%, rgba(54,54,54,1) 69%, rgba(48,48,48,1) 76%, rgba(48,48,48,1) 88%, rgba(94,94,94,1) 99%, rgba(94,94,94,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#5e5e5e', GradientType=0 );

    }
    #info-servicio-resp{
        width: 1100%;
        position: relative;
        height: 100%;
        padding-top:.5rem;
        padding-bottom: .5rem;
        color: white;
        font-family: seravek;
        font-size: .8rem;
        text-align: center;
        left: 0;
        transition: left 2s;
        -webkit-transition: left 2s; /* Safari 3.1 to 6.0 */ 
    }
   


.propuestas {
    font-family:Montserrat-Bold;
    width: 80%;
    margin-left: 10%;
    height: 70vh;
    overflow-y: auto;
    padding-right: 2vw;
    color: white;
    text-align: justify;
}



#contenedor {
    width: 100%;
    height: 93vh;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.gallery-item {
    margin-bottom: 20px;
}
#ver-mas {
    margin-top: 20px;
}

/* Estilos para la ventana modal */
.modal-dialog {
    max-width: 800px;
}
.modal-img {
    width: 100%;
}

/* Estilos para galeria */
.image-gallery {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}

.image-gallery > li {
height: 240px;
cursor: pointer;
position: relative;
list-style: none;
}

.image-gallery li img {
object-fit: cover;
width: 100%;
height: 100%;
vertical-align: middle;
border-radius: 5px;
}

#galleryImage{
    width: 100%;
}

#img-and {
    width: 45%;
    padding-top: 11vh;
}
#galeria{
    position: relative;
    text-align: center;
    float: left;
    width: 100%;
}
#containerGal {
    float: left;
    overflow-y: auto;
    margin-left: 0vh;
    max-width: 100% !important;
}
.logoPreviewGal {
    position: absolute;
    width: 20%;
    bottom: 4vh;
    right: 2vw;
    -webkit-filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 0.8));
    filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 0.8));
    animation: 2s fadein;
}
.titGaleria {
    font-family: Montserrat-Bold;
    font-size: 2.5em;
    color: #8f2829;
    margin-bottom: 5vh;
}
.contenedorGalery{
    width: 100%;
    margin: 0;
    overflow: hidden;
    position: relative;

}
#containerSpots {
    width: 100%;
    text-align: center;
    padding-bottom: 10vh;
    padding-top: 10vh;
}
video.spot {
    width: 45%;
    margin: 2vh 2.5%;
    border-radius: 1em;
    float: left;
}
video.spot2 {
    width: 30%;
    float: left;
    margin: 2vh 10%;
    border-radius: 1em;
}
.formLeft {
    width: 60%;
    float: left;
}

.divImgContacto {
    width: 40%;
    float: left;
}
.labelForm{
    font-family: Montserrat-Bold;
    font-size: 1.2em !important;
    margin-bottom: 2vh;
}

@media screen and (min-width: 220px) and (max-width: 460px) {
    .labelForm {
        font-family: Montserrat-Bold;
        font-size: 1em !important;
        margin-bottom: 2vh;
    }
    .divImgContacto {
        width: 80%;
        float: left;
        margin: 0 10%;
    }
    .formLeft {
        width: 70%;
        float: left;
        margin: 4vh 15%;
    }
    .iframeplan1{
        height: 137px !important;
    }
    video.spot{
        width: 80%;
        margin: 3vh 10%;
        
    }
    video.spot2 {
        width: 60%;
        float: left;
        margin: 2vh 20%;
        border-radius: 1em;
    }

    .spot {
        width: 90%;
        margin: 2vh 2vw;
        border-radius: 1em;
    }
    .titGaleria {
        font-size: 1.5em;
    }
    .logoPreviewGal {
        width: 23%;
        right: 9vw;
    }
    .modal-dialog.modal-dialog-centered.modal-lg {
        margin-top: 13vh;
    }
    #galeria {
        position: relative;
        text-align: center;
        float: left;
        width: 100%;
        overflow-y: auto;
        height: 81vh;
    }
    #containerGal {
        float: left;
        width: 100%;
        margin-left: 0;
    }
    .image-gallery > li {
        height: 73px;
        cursor: pointer;
        position: relative;
        list-style: none;
    }
    .txtConoceme {
        float: left;
        width: 100%;
    }
   

    #desktop {
        display: none;
    }

    body {
        padding-top: 5rem;
    }

    .logomenu1 {
        height: 2rem !important;
    }
    
    .logomenu2 {
        width: 5rem !important;
    }
    .contentCarrucel {
        height: 11rem;
    }
    .grid-cols-8 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .titPopuesta {
        font-size: .5em;
        margin-bottom: 2vh;
    }
    .titulo1 {
        font-size: 1.2em;
    }
    video.spot1 {
        width: 80%;
        margin: 7vh 10%;
    }
    .notasRedes iframe {
        width: 80% !important;
        margin: 2vh 0vw !important;
    }
    footer {
        height: 15vh;
        margin-top: 2vh;
    }
    footer h6 {
        font-size: 0.5em;
    }
    #menuredes2 {
        width: 50%;
        bottom: 8vw;
        left: 25%;
        padding-bottom: 6vw;
    }
    .divImgConoceme {
        width: 100%;
        float: left;
    }
    .divImgConoceme img {
        width: 50%;
        margin-left: 25%;
    }
    .txtConoceme p {
        margin: 2vh 8vw;
        text-align: justify;
        font-size: .8em;
    }

    #arrow-back {
        width: 8%;
        position: absolute;
        left: 2vw;
        top: 33vh;
        cursor: pointer;
        display: none;
        animation: 3s fadein;
        z-index: 99999;
    }
    .servicios{
        text-align: center;
        background-color: white;
        width: 100%;
        height: 127vh;
        position: relative;
        top:0;
        padding-bottom: 3%;
        margin: 0;
    }
     .titulo-servicios{
        color: #8f2829;
        font-size: 1.2rem;
        line-height: 1.1rem;
        width: 51%;
        float: right;
        padding-top: 1vh;
        padding-right: 5vh;
        font-family: Montserrat-Bold;
    }
        #servicios-imagen{
            width: 50%;
            border-radius: 1.1em;
            display: inline !important;
        }
        #imagenesdeservicio{
        width: 1900%;
        height: 86vh;
        position: relative;
        margin: 0;
        left: 0;
        top:0%;
        text-align: left;
        transition: left 2s;
        -webkit-transition: left 2s; /* Safari 3.1 to 6.0 */
    }
        .imagen-service{
            width: 5.26%;
            text-align: center;
            float: left;
            color: black;
            margin-top: 3vh;
        }
        #menu-servicios1{
            position: relative;
            margin: 0;
            left: 0;
            top: -35%;
            width: 100%;
            height: 59vh;
            float: left;
            background-color: transparent;
            overflow-y: scroll;
            /* float: left; */
        }
            #menu-servicio-opcion-1{
            width: 1100%;
            position: relative;
            height: 1rem;
            padding-top:.3rem;
            padding-bottom: 1.3rem;
            color: white;
            font-family: seravek;
            font-size: .8rem;
            text-align: center;
            left: 0;
            transition: left 2s;
            -webkit-transition: left 2s; /* Safari 3.1 to 6.0 */    
            background: rgb(2, 0, 36);
            background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(87, 87, 87, 1) 100%);
        }
        #info-servicio-resp{
            width: 1100%;
            position: relative;
            height: 100%;
            padding-top:.5rem;
            padding-bottom: .5rem;
            color: white;
            font-size: .8rem;
            text-align: center;
            left: 0;
            transition: left 2s;
            -webkit-transition: left 2s; /* Safari 3.1 to 6.0 */
        }
       
        .infooo{
            margin: 1rem;
            font-size: .8em;
        }
        .menu-servicio-opcion{
            width: 100%;
            padding-left: 5%;
            padding-right: 5%;
            padding-top: .3rem;
            padding-bottom: .3rem;
            float: left;
            color: white;
            font-family: seravek;
            font-size: .1.1rem;
            text-align: left;
            background: rgb(2, 0, 36);
            background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(87, 87, 87, 1) 100%);
            position: relative;
        }
        .menu-servicio-opcion img{
            width: .6rem;
            position: absolute;
            right: 1rem;
            top: 15%;
        }
         .flechaderecha{
              width: 3%;
            position: absolute;
            z-index: 9999999;
            top:.7vh;
            right: 4vh;
            cursor: pointer;
        }
         .flechaizquierda{
            width: 3%;
            position: absolute;
            z-index: 9999999;
            top:.7vh;
            left: 4vh;
            cursor: pointer;
    
        }
            .menu-servicio-fin{
            width: 100%;
            height: 2rem;
            float: left;
                background-color: transparent;
        }
        #detalle-servicio-resp{
            display: none;
            position: relative;
            margin: 0;
            left: 0;
            top:-35%;
            width: 100%;
            height: 44%;
            float: left;
            background-color: black;
            padding-bottom: 10%;
        }
        .servicio-txt-resp{
             width: 9.09%;
            text-align: center;
            float: left;
            color: white;
            font-family:Montserrat-Regular;
            font-size: 1.1rem;
        
        }
         .info-detall-resp{
             width: 9.09%;
            height: 100%;
            padding-top: 1em;
            text-align: justify;
            float: left;
            color: white;
            font-family:Montserrat-Regular;
            font-size: 1.6em;
            background: url(../../img/fondo-propuesta-resp.png) no-repeat fixed center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            overflow-y: auto;
        }
        .listPropuesta{
           width: 82%;
           text-align: left;
           padding-bottom: 4vh;
        }
        h6 {
            width: 100%;
            text-align: center;
        }
        #logoRiMServicios {
            width: 28%;
            position: absolute;
            left: 5vw;
            top: 2vh;
            -webkit-filter: drop-shadow(1px 6px 10px rgba(255, 255, 255, 0.8));
            filter: drop-shadow(1px 6px 10px rgba(255, 255, 255, 0.8));
        }
        #logoPasionServicios {
            position: absolute;
            width: 45%;
            bottom: 6vh;
            left: 27.5%;
        }
        #desktop {
            display: none;
        }
        .desktop{
            display: none;
        }
        .movil {
            display: inline;
        }
        #contenedor {
            width: 100%;
            height: 129vh;
            margin: 0;
            overflow: hidden;
            position: relative;
        }
        .listPropuesta {
            color: white !important;
            font-size: .7em;
            margin-left: 14vw;
        }


}
