body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    font-family: Roboto, sans-serif;
    background-color: #EAEAEA;
}
body{
    overflow-y:auto;
    overflow-x:hidden;
    display:inline-block;
}
#notificacion {
    position:fixed; 
    top:15vh; 
    right:20px;
    padding:0 10px;
    height:40px; 
    background-color:red; 
    border-radius:20px; 
    font-size:20px; 
    font-weight:bold; 
    display:flex;
    justify-content:center; 
    align-items:center; 
    z-index:5; 
    color:white; 
    cursor:pointer;
}
#contenedor_principal {
    height:60vh; 
    display:flex; 
    width:100vw;
}
.contenedor_opcion_principal {
    width:100%;
    height:100%;
}
.opcion_principal {
    width:100%; 
    height:100%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    background-color:rgba(50, 50, 220, 0.5); 
    color:white;
}
.titulo_opcion_principal {
    font-size:20px; 
    text-align:center;
}
.link_principal {
    border:solid 2px white; 
    color:white; 
    padding:0.7vw 2.5vw; 
    text-decoration:none;
}
.contenedor_servicios {
    width:100%; 
    display:flex; 
    padding-bottom:3vw;
}
.servicio_imagen {
    width:100%; 
    display:flex;
}
.imagen_servicio {
    width:40vh; 
    height:40vh;
}
.servicio_descripcion {
    width:100%; 
    display:flex;
}
.descripcion_servicio {
    width:40vh; 
    min-height:40vh;
    text-align:center;
}
.nombre_servicio {
    font-size:20px; 
    font-weight:bold;
}
.global_container {
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    z-index: 100000000000000000000000;
    background-color: rgba(0,0,0,0.3);
    display:flex;
    justify-content: center;
    align-items:center;
}
.global_container_frame {
    padding:0.3vw;
    background-color: white;
    border:solid 1px #eaeaea;
    width:25vw;
}
.contenedor_cerrar_popup {
    padding:0.9375vw;
    padding-bottom:0;
    width:100%;
    display:flex;
    justify-content:flex-end;
}
.boton_cerrar_popup {
    float:right; 
    border:none; 
    background-color: transparent; 
    outline:none;
}
#contenedor_ingreso {
    width:100vw;
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;
    background-size: cover;
    background-color: #CCCCCC;
}
#ingreso {
    width:40vw;
    padding:40px 20px;
    background-color: white;
    border:solid 1px #0F4A98;
}
.contenedor_formulario {
    padding:0.9375vw;
    width:100%;
}
.label_field2{
    font-size:1.875vw;
    white-space:nowrap;
}
.field{
    font-size:1.5625vw;
    width:100%;
    margin-bottom:0.6vw;
}
.login_button{
    font-size:1.875vw;
    margin-top:0.6vw;
    width:100%;
    border-radius:0vw;
    background-color: #00328B;
    font-weight: bold;
    color: #ffffff;
    border:none;
    outline:none;
}
.boton_otras_opciones {
    font-size: 1.25vw; 
    text-decoration: underline; 
    color: blue; 
    background-color: transparent;
    border:none; 
    padding:0; 
    outline:none;
}
.global_alert_container {
    position:fixed;
    top:10vh;
    left:0;
    right:0;
    height:2.5vw;
    z-index:200000001;
}
.global_alert {
    position:absolute; 
    background-color: white; 
    margin:0; 
    padding:0 1.2vw;  
    border:none;
    border-radius:0.3vw;
    display:flex;
    left:0;
    top:0; 
    width:70vw;
    height:2.5vw; 
    align-items:center; 
    border-left:none;
}
.global_alert_text {
    font-size:1.1vw;
    font-weight:bold;
    white-space:nowrap;
}
.alert_text {
    font-size:1.5vw;
    font-weight:bold;
}
.global_alert_subtext {
    font-size:1.1vw;
    white-space:nowrap;
    margin-left:0.93vw;
}
#accept_alert_button {
    color:#333333; 
    font-size:1.1vw; 
    margin:0; 
    padding:0; 
    border:none; 
    background-color:transparent;
}
.contenido_pagina {
    padding-top:12vh;
    width:100%;
    min-width:100%;
    z-index: 2;
    min-height:86vh;
    background-color:#EAEAEA;
}
#menu_pc{
    height:12vh;
    max-height:12vh;
    overflow-y:hidden;
    z-index:10000;
    top:0;
    left:0;
    right:0;
    position:fixed;
    background-color:#0F4A98;
    display: flex;
    align-items: center;
    padding-right:3vw; 
    padding-left:1.7vw;
}
#submenu_pc {
    width:100%; 
    display:flex; 
    height:9.0625vw; 
    align-items: center;
}
#extraccion_menu {
    display:none;
}
#retraccion_menu {
    display:none;
}
#contenedor_logo {
    height:100%;
    cursor:pointer;
    display:flex;
    align-items:center;
    margin-right:3vw;
}
#logo_menu {
    height:9vh;
}
.div_titulo{
    width:100vw;
    height:20vh;
    display: flex;
    align-items: center;
}
.link_nav {
    background-color:transparent;
    color:white;
    border:none;
    text-decoration:none;
    padding:0 0.8vw;
    font-size: 18px;
    display: flex;
    align-items: center;
    cursor:pointer;
    height:20vh;
    white-space: nowrap;
}
.link_nav:hover {
    transition-duration: 0.4s;
    color:#FF7575;
}
.nav div ul {
    display:none;
    position:absolute;
    top:11.875vw;
    list-style: none;
    background-color:white;
    min-width:0.125vw;
    margin-left:-0.625vw;
    max-height:18.75vw;
    overflow-y: auto;
    border:solid 1px black;
    border-top:none;
}
        
.nav div a:hover > ul {
    display:inline-block;
    border: 1px solid #eaeaea;
    border-top:none;
    list-style-position: inside;
    padding-left: 0;
}  
.nav div button:hover > ul {
    display:inline-block;
    border: 1px solid #eaeaea;
    border-top:none;
    list-style-position: inside;
    padding-left: 0;
} 
.nav div a ul li {
    width:100%;
    padding:0.625vw;
    background-color: white;
    color:#FF3131;
}
.nav div button ul li {
    width:100%;
    padding:0.625vw;
    background-color: white;
    color:#FF3131;
    text-align:left;
    justify-content: flex-start;
}
.subtitulos_vinculo {
    background-color: white;
    color:black;
    display: inline-block;
    border:solid 1px black;
    border-top:none;
    width:100%;
}
.subtitulo_vinculo {
    padding:0.625vw;
    color:black;
    display: inline-block;
    height:100%;
    width:100%;
    text-decoration:none;
}
.subtitulo_vinculo:hover {
    transition-duration: 0.4s;
    background-color: #eaeaea;
    color:black;
}
.vinculos {
    display:none;
    text-align: left;
}
.vinculo {
    padding:0.625vw 1.3vw;
    font-weight:normal;
}
.vinculo:hover {
    transition-duration: 0.4s;
    background-color: #eaeaea;
}
.portada {
    width: 100vw;
    aspect-ratio: 1600 / 773;
    max-height: calc(100vh - 11.875vw);
    overflow: hidden;
    background-size: cover; 
    background-position: center center;
}
.layout_noticias {
    width:100%; 
    height:75.2.5vw; 
    display:flex; 
    margin-top:11.875vw; 
    border-bottom:solid 2px black;
}
.filtro_noticias {
    min-width:25vw; 
    max-width:25vw; 
    border-right:solid 2px black; 
    overflow-y:auto; 
    height:75.2.5vw;
}
.container_noticias {
    width:100%; 
    height:75.2.5vw; 
    display:flex; 
    justify-content: center; 
    background-color:#545454;
}
#imagen_noticia, #video_noticia{
    display:none; 
    height:36.4375vw;
}
.noticia {
    padding:1.25vw; 
    display:flex; 
    align-items:center; 
    border-bottom:solid 1px #545454; 
    cursor:pointer;
}
.noticia:hover{
    background-color:#EAEAEA;
    transition-duration: 0.4s;
}
.prev_item{
    position:absolute;
    top:0;
    left:0;
    width:6.25vw;
    height:9.375vw;
    background-color: black;
    opacity: 0.1;
    justify-content: center;
    align-items: center;
    font-size: 2.5vw;
    font-weight: bold;
    z-index:3;
}
.prev_item:hover{
    opacity: 0.5;
    transition-duration: 0.5s;
}
.next_item{
    position:absolute;
    top:0;
    right:0;
    width:6.25vw;
    height:9.375vw;
    background-color: black;
    opacity: 0.1;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5vw;
    font-weight: bold;
    z-index:3;
}
.next_item:hover{
    opacity: 0.5;
    transition-duration: 0.5s;
}
#footer {
    width:100vw; 
    height:30vh; 
    background-color: #363636; 
    color:white;
    display:flex;
}
.contenedor_footer {
    width:30%; 
    min-width:30%; 
    padding:3vw;
}
#contenedor_footer_final {
    width:100%; 
    padding:3vw;
    font-size:20px;
    padding:3vw;
    text-align: right;
}
#contenedor_redes {
    font-size:40px;  
    width:100%; 
    display:flex;
    justify-content: flex-end;
}
.contenedor_red {
    padding:0 10px;
}
.titulo_salon {
    font-size:1.875vw; 
    display: flex; 
    justify-content: center; 
    padding:0.625vw; 
    background-color:white;
    border:solid 1px black; 
    border-bottom:none;
    font-weight: bold;
    position: relative;
}
#nombre_mes {
    display: flex; 
    align-items: center; 
    font-size:1.5625vw; 
    white-space:nowrap;
}
.titulo_mes {
    display:flex; 
    width:100%; 
    justify-content: center; 
    font-weight: bold; 
    font-size:1.25vw; 
    margin-bottom:0.625vw;
    position:relative; 
    height:2.5vw; 
    width:100%;
}
.calendario {
    border:solid 1px black; 
    width:100%; 
    background-color: white;
}
.mes_calendario {
    width:100%;
}
.header_dia {
    text-align:center; 
    height:2.81vw; 
    width:calc(100% / 7); 
    font-weight:bold;
    font-size:1.5vw;
}
.boton_mes {
    height:2.5vw;
    border:none;
    outline:none;
    background-color:transparent;
}
.dia_sombreado:hover {
    background-color: #eaeaea;
}
.dias_salon {
    height:2.81vw;
    text-align:center; 
    vertical-align: center;
    cursor:pointer; 
    font-size:1.56vw;
}
.dias_salon_sn {
    height:2.81vw;
    text-align:center; 
    vertical-align: center;
    cursor:pointer; 
    font-size:1.56vw;
}
.dias_salon:hover {
    background-color: #d3d3ff;
}
.div_dia_salon {
    width:1.875vw;
    height:1.875vw;
    border-radius: 50%;
}
.boton_reserva {
    background-color:#0F4A98;
    border:none;
    font-size:1.87vw;
    font-weight:bold;
    color:white;
    padding:0.125vw 1.87vw;
    border:solid 1px #0F4A98;
    cursor:pointer;
}
.cuadro_referencia_calendario {
    margin-left:2vw; 
    padding:0 0.5vw; 
    width:2vw; 
    height:2vw; 
    border:solid 1px gray;
}
.hoja_reporte {
    background-color:white;
    border:solid 1px black;
    margin-top:7.5vw;
}
.celda_reporte {
    border:solid 1px black; 
    border-top:none; 
    border-right:none;
    display:flex;
    justify-content: center;
    align-items: center;
}
.celda_reporte_right { 
    vertical-align: center;
    border:solid 1px black; 
    border-top:none; 
    display:flex;
    justify-content: center;
    align-items: center;
}
#boton_guardar_sorteo{
    font-size: 3.125vw;
    width:4.3vw; 
    height:4.3vw;
    border-radius: 50%;
    position: fixed;
    bottom:1.25vw; 
    right:1.25vw;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4244f8;
    color: white;
    border:none;
    outline: none;
    cursor:pointer;
}
.boton3{
    margin:0 0.3125vw;
    padding:0 0.625vw;
    background-color:white;
    color:#00328B;
    text-transform: capitalize;
    font-size:1vw;
    font-weight: bold;
    outline:none;
    border:solid 1px black;
    cursor: pointer;
    border-radius:5px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height:1.875vw;
}
.boton3:hover {
    background-color: #00328B;
    transition-duration: 0.4s;
    text-decoration: none;
    color:white;
}
#contenedor_urgencias {
    width:100%;
    padding:40px 0;
    display:flex;
    justify-content: center;
    align-items: center;
}
#box_urgencias {
    width:50%;
    padding:40px;
    border-radius: 20px;
    background-color: #0F4A98;
    color:white;
    font-size: 22px;
}
#subtitulo_urgencias {
    font-size: 40px;
    font-weight: bold;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#texto_urgencias {
    text-align: center;
}
#contenedor_boton_urgencias {
    width:100%;
    display: flex;
    justify-content: center;
    margin-top:40px;
}
#boton_urgencias {
    font-size: 40px;
    border-radius: 20px;
    border:none;
    background-color: #FF1111;
    color:white;
    padding:10px 40px;
    font-weight: bold;
    text-decoration: none;
    border:solid 2px white;
}
#boton_urgencias:hover{
    background-color: #FF0000;
}
#contenedor_texto_principal {
    width:100%;
    display:flex;
    justify-content: center;
    background-color: #363636;
    padding:40px 0;
}
#box_texto_principal {
    width:60%;
}
.subtitulo_principal {
    margin-top:20px;
    width:100%;
    display:flex;
    justify-content: center;
    font-size:40px;
    font-weight: bold;
    color:white;
}
.texto_principal {
    width:100%;
    font-size:30px;
    color:white;
}
.primer_texto {
    margin-top:0;
}
.box_carrusel {
    width:100%;
}
.contenedor_carrusel {
    width: 100%; 
    height: 88vh;
    margin: auto;
    overflow: hidden;
    position: relative;
}
.carrusel {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}
.item_carrusel {
    object-fit: cover;
    flex-shrink: 0;
}
.imagen_carrusel {
    width:100%;
    height: 100%;
    background-size: cover; 
    background-position: center center;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:80px;
    padding-top:40px;
    color:white;
    font-weight: bold;
}
.box_carrusel_secundario {
    width:100%;
    padding-top:40px;
}
.titulo_carrusel_secundario {
    width:100%;
    display:flex;
    justify-content: center;
    font-size:40px;
    font-weight: bold;
    color:#0F4A98;
}
.contenedor_carrusel_secundario {
    width: 100%; 
    max-width:1200px;
    height: 500px;
    margin: auto;
    overflow: hidden;
    position: relative;
    padding:20px 0;
}
.carrusel_secundario {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}
.item_carrusel_secundario {
    padding:10px;
    object-fit: cover;
    flex-shrink: 0;
    cursor:pointer;
}
.imagen_carrusel_secundario {
    width:100%;
    height: calc(100% - 60px);
    border:solid 1px #0F4A98;
    background-size: cover;
    background-position: center center;
}
.imagen_carrusel_secundario:hover{
    margin-top:-20px;
    transition-duration: 0.2s;
}
.nombre_carrusel_secundario {
    height:60px;
    background-color: #0F4A98;
    color:white;;
    display: flex;
    align-items: center;
    padding:0 20px;
    font-size: 20px;
    font-weight: bold;
}
.fila_servicios {
    width:100%;
    display:flex;
    padding:2vw 5vw;
}
.contenedor_servicio {
    width:100%; 
    padding:0;
    margin:0 1vw;
    background-size: cover;
    background-position: center center;
    border:solid 2px #0F4A98;
    border-radius:15px;
    height:50vh;
    display:flex;
    align-items: flex-end;
    overflow: hidden;
    cursor:pointer;
}
.contenedor_servicio:hover {
    margin-top: -20px;
    transition-duration: 0.2s;
}
.titulo_servicio {
    font-size: 18px;
    font-weight: bold;
    color:white;
    padding:2vh 0;
    background-color: #0F4A98;
    width:100%;
    display:flex;
    justify-content: center;
}
#titulo_producto {
    padding:0 40px;
    height:80px;
    display:flex;
    align-items: center;
    font-size:30px;
    font-weight:bold;
    color:#0F4A98;
    border-bottom:solid 2px #0F4A98;
    background-color: white;
}
#contenedor_producto {
    width:100vw;
    height:calc(87.25vh - 80px);
    display:flex;
}
#contenedor_imagen_producto {
    width:50%;
    height:100%;
    padding:40px;
    display:flex;
    justify-content: center;
    background-color: white;
}
#imagen_producto {
    height:100%;
    background-position: center center;
    background-size: cover;
}
#contenedor_descripcion_producto {
    width:50%;
    padding-top:40px;
    background-color: white;
    height:100%;
}
#descripcion_producto {
    width:100%;
    font-size:18px;
    padding:20px;
    text-align: justify;
    overflow:auto;
    height:calc(100% - 100px);
}
#contenedor_boton_producto {
    margin-top:40px;
    width:100%;
    padding:0 20px;
    display: flex;
    justify-content: center;
}
.boton_solicitar {
    width:100%;
    border:none;
    border-radius: 10px;
    background-color: #0F4A98;
    color:white;
    font-size:20px;
    font-weight: bold;
    cursor: pointer;
    border:solid 2px transparent;
}
.boton_solicitar:hover {
    transition-duration: 0.2s;
    border:solid 2px #0F4A98;
    background-color: white;
    color:#0F4A98;
}
#container_productos {
    width:100vw;
    height:88vh;
    display:flex;
}
#filtros_productos {
    width:20vw; 
    border-right:solid 2px #0F4A98; 
    height:88vh;
    overflow-y: auto;
    background-color: white;
    border-bottom:solid 2px #0F4A98;
}
#titulo_filtros {
    display:none;
}
.filtro_cliente {
    padding:0 20px;
    border-bottom:solid 2px #0F4A98;
}
.contenedor_boton {
    padding:20px;
}
.titulo_filtro {
    padding:10px 0;
    font-size:20px;
    font-weight:bold;
    display:flex;
    align-items: center;
}
.nombre_filtro {
    width:100%;
}
.boton_filtro {
    background-color: transparent;
    border:none;
    outline:none;
    cursor:pointer;
}
.contenedor_filtro_cliente {
    width:100%;
    height:200px; 
    max-height:200px; 
    overflow-y:auto; 
    padding-top: 20px;
    border-top:solid 2px #0F4A98; 
    display:none;
}
.opcion_cliente {
    display:flex; 
    align-items: center;
    padding:0 10px;
}
.check_cliente {
    margin-right:10px;
}
.span_cliente {
    font-size:18px;
}
#visualizador_productos {
    height:88vh;
    overflow-y:scroll;
    width:calc(80vw - 15px);
    padding-bottom:20vh;
    background-color: #EAEAEA;
    border-bottom:solid 2px #0F4A98;
}
.fila_productos {
    margin-top:2vw;
    width:100%;
    display:flex;
    justify-content:center;
}
.container_producto {
    width:30%;
    border:solid 2px #0F4A98;
    height:50vh;
    display:flex;
    align-items: flex-end;
    background-position: center center;
    background-size: cover;
    cursor:pointer;
}
.container_producto:hover{
    transition-duration: 0.2s;
    margin-top:-10px;
}
.titulo_producto {
    width:100%;
    background-color: #0F4A98;
    padding:10px 20px;
    font-size:20px;
    font-weight:bold;
    color:white;
}
.nombre_del_servicio {
    font-size:30px;
    font-weight: bold;
    padding:10px 20px;
    color: #0F4A98;
    border-bottom: solid 2px #0F4A98;
    background-color: white;
    margin-bottom:20px;
}
.contenedor_del_servicio {
    width:100%;
    display: flex;
    justify-content: center;
    padding:40px 0;
    text-align: justify;
}
.contenedor_texto_del_servicio {
    width:40vw; 
    padding:20px;
    background-color: white;
}
.pad_right {
    padding-right:80px;
}
.pad_left {
    padding-left:80px;
}
.imagen_del_servicio {
    width:40vw;
    min-height:40vw;
    background-size: cover;
    background-position: center center;
}
.beneficio_servicio {
    background-color: #0F4A98; 
    color:white; 
    font-weight: bold; 
    padding:10px 20px;
}
#sobre_nosotros {
    padding:20px 40px;
    font-size: 30px;
    background-color: white;
    border-bottom:solid 2px #0F4A98;
    font-weight: bold;
    color:#0F4A98;
}
#contenedor_sobre_nosotros {
    width:100%;
    background-color: #EAEAEA;
}
.fila_sobre_nosotros {
    width:100%;
    padding:2vw 10vw;
    display:flex;
    align-items:center;
    justify-content: center;
}
.texto_sobre_nosotros {
    width:30vw;
    min-height:30vw;
    padding:20px;
    background-color:white;
    z-index:2;
    font-size:24px;
    vertical-align: center;
    border: solid 1px #0F4A98;
}
.imagen_sobre_nosotros {
    width:30vw;
    height:30vw;
    z-index:1;
    background-size: cover;
    background-position: center center;
}
.move_left {
    margin-left:-30px;
}
.move_right {
    margin-left:30px;
}
.move_up {
    margin-top:-60px;
}
.move_left {
    margin-top:60px;
}
.link_footer {
    color:white;
    margin-bottom:10px;
}
#contenedor_modelos {
    width:100%;
    padding:20px 40px;
    min-height:50vh;
}
#titulo_modelos {
    font-size:60px;
    font-weight:bold;
    color:#0F4A98;
    width:100%;
    display:flex;
    justify-content:center;
}
#box_modelos {
    width:100%;
    padding:0 80px;
}
.tabla_modelos {
    width:100%;
}
.fila_modelos {
    width:100%;
}
.encabezado_modelos {
    background-color:#0F4A98;
    color:white;
    font-weight:bold;
    font-size:25px;
    padding:5px 10px;
    border:solid 1px black;
}
.celda_modelos {
    background-color:white;
    font-size:22px;
    padding:5px 10px;
    border:solid 1px black;
}
.celda_bold {
    font-weight:bold;
}
.celda_derecha {
    text-align:right;
}
#container_contacto {
    width:100vw; 
    padding:40px; 
    height:90vh;
}
#form_contacto {
    padding:20px; 
    display:flex; 
    width:100%; 
    background-color:white; 
    height:100%;
}
#imagen_contacto {
    background-size:cover; 
    background-position:center center; 
    width:60%; 
    min-width:60%;
    height:100%;
}
#texto_contacto {
    padding:20px; 
    width:100%;
}