/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PERSONALIZADOS Y VARIABLES * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ /* IMPORTAR LAS FUENTES */ @font-face { font-family: FONT-TITULO; src: url(fonts/MISTRULLY.TTF) format("truetype"); } @font-face { font-family: FONT-REDACCION; src: url(fonts/HARMONY_PERSONAL_USE_ACT.OTF) format("truetype"); } :root { /* FONT-SIZES */ --textos_050: 0.50rem; --textos_075: 0.75rem; --textos_0875: 0.875rem; --textos1_0: 1rem; --textos1_125: 1.125rem; --textos1_25: 1.25rem; --textos1_375: 1.375rem; --textos1_50: 1.5rem; --textos1_80: 1.8rem; --textos2_0: 2rem; --textos2_25: 2.25rem; --textos2_50: 2.5rem; --textos2_875: 2.875rem; --textos3_125: 3.125rem; --textos3_50: 3.5rem; --textos3_75: 3.75rem; --textos4_0: 4rem; --textos4_25: 4.25rem; --textos4_50: 4.50rem; --textos4_75: 4.75rem; --textos5_0: 5rem; /* FONT FAMILY */ --font_family_titulos: FONT-TITULO, sans-serif; --font_family_redaccion: FONT-REDACCION, sans-serif; /* COLORS */ --blanco: rgba(255,255,255,1); /*rgba(255,255,255,1)*/ --gris_oscuro: rgba(51,51,51,1); /*rgba(51,51,51,1)*/ --gris_oscuro2: #212121; --gris_claro: #e1e1e1; --negro: rgba(0,0,0,1); /* rgba(0,0,0,1) */ --color_titulo: rgba(201,79,50,1); --color_titulo2: rgba(255,255,255,1); --color_botones: rgba(147,59,42,1); --color_texto_botones: rgba(255,255,255,1); --color_redaccion: rgba(0,0,0,1); --color_redaccion2: rgba(0,0,0,1); --blanco_transparente: rgba(255,255,255,0.5); --negro_transparent: rgba(0,0,0,0.8); --color_botones_transparent: rgba(147,59,42, 0.8); --color_botones_transparent05: rgba(147,59,42,0.5); --color_botones_transparent03: rgba(147,59,42,0.3); --color_titulo05: rgba(139,110,40,0.5); } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS GENERALES HTML * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ html, body { font-family: var(--font_family_redaccion); color: var(--color_redaccion); font-size: var(--textos1_375); margin: 0; padding: 0; } /* PARA AGREGAR SOMBRA AUN CONTENEDOR O IMAGEN */ .drop { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8)); } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA EL LOADER/LOADING PRINCIPAL * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .preloader-background { display: flex; align-items: center; justify-content: center; background-color: var(--blanco); opacity: 0.8; position: fixed; z-index: 999999; top: 0; left: 0; right: 0; bottom: 0; } .lds-heart { display: inline-block; position: relative; width: 80px; height: 80px; transform: rotate(45deg); transform-origin: 40px 40px; } .lds-heart div { top: 32px; left: 32px; position: absolute; width: 32px; height: 32px; background: var(--color_titulo); animation: lds-heart 1.0s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } .lds-heart div:after, .lds-heart div:before { content: " "; position: absolute; display: block; width: 32px; height: 32px; background: var(--color_titulo); } .lds-heart div:before { left: -24px; border-radius: 50% 0 0 50%; } .lds-heart div:after { top: -24px; border-radius: 50% 50% 0 0; } @keyframes lds-heart { 0% { transform: scale(0.95); } 5% { transform: scale(1.1); } 39% { transform: scale(0.85); } 45% { transform: scale(1); } 60% { transform: scale(0.95); } 100% { transform: scale(0.9); } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA EL CONTADOR * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ #section_contador { margin-top: 0; margin-bottom: 70px; } @media (max-width: 767px) { #section_contador { margin-top: 0; margin-bottom: 40px; } } #timerCont { text-align: center; font-family: var(--font_family_redaccion); font-size: var(--textos1_80); font-weight: bold; background-color: var(--color_botones_transparent05); color: var(--blanco); border-radius: 5px; margin-left: auto; margin-right: auto; width: 90%; } @media (max-width: 1280px) { #timerCont { text-align: center; font-size: var(--textos2_0); color: var(--blanco); display: block; margin-left: auto; margin-right: auto; width: 90%; } } @media (max-width: 1279px) { #timerCont { text-align: center; font-size: var(--textos2_0); color: var(--blanco); display: block; margin-left: auto; margin-right: auto; width: 90%; } } @media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) /* horizontal */ { #timerCont { text-align: center; font-size: var(--textos_0875); color: var(--blanco); display: block; margin-left: auto; margin-right: auto; width: 90%; } } @media (min-width: 768px) and (orientation: portrait) { #timerCont { text-align: center; font-size: var(--textos1_50); color: var(--blanco); display: block; margin-left: auto; margin-right: auto; width: 100%; } } @media (max-width: 767px) { #timerCont { text-align: center; font-size: var(--textos_075); color: var(--blanco); display: block; margin-left: auto; margin-right: auto; width: 100%; } } .texto-contador { font-size: var(--textos2_50); } @media (max-width: 767px) { .texto-contador { font-size: var(--textos1_0); } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA LAS PORTADAS O FONDOS * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ /* PORTADA DE FOTO PRINCIPAL*/ .back-portada { background: url(../images/portada_principal.png) no-repeat center center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; height: 100vh; width: 100%; overflow: hidden; /* Evita que el contenido interno cause desbordamientos */ } @media (max-width: 767px) { .back-portada /* Contiene principal el emblema y el contador */ { background: url(../images/portada_principal.png) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100vh; } } .fixed-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/fondo_Horizontal_v.png); background-repeat: no-repeat; background-size: cover; z-index: -1; } @media (max-width: 767px) { .fixed-background /* Contiene principal el .jpg y el contador */ { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/fondo_vertical_V.png); background-repeat: no-repeat; background-size: cover; z-index: -1; } } #section_ubication { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_ubication { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_cronograma { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_cronograma { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_savedate { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_savedate { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_hashtag { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_hashtag { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_section_lluvia_sobres { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_lluvia_sobres { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_comentarios { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_comentarios { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_salud { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_salud { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_agradecimientos { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_agradecimientos { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_hospedaje { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_hospedaje { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_contador { background: url(../images/fondo_contador.png) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_contador { background: url(../images/fondo_contador.png) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } /* PARA CUANDO SE HAGA EL SCROLL LAS IMAGENES DE FONDO TENGAN ESE EFECTO */ /* @supports ( -webkit-touch-callout : none) { #section_ubication, #section_cronograma, #section_dresscode, #section_savedate, #section_hashtag, #section_otros, #section_comentarios, #section_salud, #section_agradecimientos, #section_hospedaje, #section_lluvia_sobres, #section_contador { background-attachment:inherit; } } */ @supports not ( -webkit-touch-callout : none) { #section_ubication, #section_cronograma, #section_dresscode, #section_savedate, #section_hashtag, #section_otros, #section_comentarios, #section_salud, #section_agradecimientos, #section_hospedaje, #section_lluvia_sobres, #section_contador { background-attachment: fixed; } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA EL TOP BUTTON IR HACIA ARRIBA * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .top_button .btn-floating { background-color: var(--color_botones); } .top_button .btn-floating:hover { background-color: var(--color_botones_transparent); } .top_button .btn-floating i { font-size: var(--textos1_0); line-height: inherit !important; color: var(--color_texto_botones); } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA EL BOTON DE MUSICA * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .audio-floating-btn { bottom: 100px; } .audio-floating-btn .btn-floating { background-color: var(--color_botones); } .audio-floating-btn .btn-floating:hover { background-color: var(--color_botones_transparent); } .audio-floating-btn .btn-floating i { font-size: var(--textos1_0); line-height: inherit !important; color: var(--color_texto_botones); } .audio-floating-btn ul li .btn-floating i { width: var(--textos1_0); color: var(--color_texto_botones); } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA LOS MODALES * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ #modal_ceremonia, #modal_recepcion { max-height: 95%; top: 2% !important; } #modal_recepcion { max-height: 100vh; top: 2% !important; height: calc(100vh - 4%); max-width: 455px; } @media (max-width: 767px) { #modal_ceremonia, #modal_recepcion { width: 95%; } } #modal_ceremonia, #modal_recepcion, #modal_ceremonia .modal-footer, #modal_recepcion .modal-footer { background: var(--blanco); } .modal_text_texto { color: var(--color_redaccion) !important; font-size: var(--textos1_125); } .title_cards_modales { font-family: var(--font_family_titulos); color: var(--color_titulo); font-size: var(--textos2_25); } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA EL IFRAME DE MAPAS * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .maps { width: 100%; height: 250px; } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA LOS BOTONES * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .bg-buttons, .bg-buttons:hover, .bg-buttons:focus { background-color: var(--color_botones); font-weight: bolder; color: var(--color_texto_botones); font-family: var(--font_family_redaccion); } .bg-buttons2, .bg-buttons2:hover, .bg-buttons2:focus { background-color: var(--color_titulo); font-weight: bolder; color: var(--color_texto_botones); font-family: var(--font_family_redaccion); } /* SWEET ALERT*/ .swal2-styled.swal2-confirm { border: 0; border-radius: .25em; background: initial; background-color: var(--color_botones) !important; color: var(--color_texto_botones) !important; font-size: 1em; } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA EL MENU PRINCIPAL * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ #mobile-demo /***** Para el menu *****/ { background-color: var(--color_botones_transparent05); width: 275px; } .sidenav li > a /***** Para las letras del menu *****/ { -webkit-transition: background-color .3s; transition: background-color .3s; font-size: var(--textos_0875); color: var(--blanco); font-weight: 600; display: block; padding: 0 10px; cursor: pointer; font-family: var(--font_family_redaccion); } @media (max-width: 767px) { .sidenav li > a { font-size: var(--textos_0875); } } .sidenav li > a:hover /***** Para el hover de las letras del menu *****/ { background-color: var(--color_botones_transparent03); } .li_inicio /***** Para los li del sidenav left *****/ { margin-top: 30%; } @media (min-width: 768px) and (max-width: 1199px) { .li_inicio { margin-top: 45% !important; } } @media (max-width: 767px) { .li_inicio { margin-top: 10%; } } .li_cont /* Para los elementos del menú */ { margin-top: 5%; } @media (max-width: 767px) { .li_cont { margin-top: 0; } } #iconArrow /*Para el icono para abrir el menú*/ { height: 56px; line-height: 56px; position: absolute; z-index: 9; left: 20px; color: var(--color_texto_botones); top: 50%; background-color: var(--color_botones) !important; } #iconArrow i /* Para el icono de abrir el menu sidenavleft */ { font-size: var(--textos1_50); } .close_icon_sidenav /* Para cerrar el menu left sidenav */ { color: var(--blanco); font-size: var(--textos1_125); position: absolute; right: 10px; } #iconHamburguer /* Para el icono hamburguer abrir el menu */ { height: 56px; line-height: 56px; color: var(--gris_oscuro); position: absolute; z-index: 9; left: 20px; font-size: var(--textos1_125); } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA LA PORTADA PRINCIPAL EN CASO DE COLOCAR ELEMENTOS POR SEPARADO * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .seccionportada /* Contiene principal el .jpg y el contador */ { width: 100% !important; position: absolute; height: 100%; } .seccionportada div.contenedor_emblema .logoemblema /* El logo o emblema*/ { width: 35%; margin-right: auto; margin-left: auto; display: block; margin-top: 2%; /*filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(2%) hue-rotate(66deg) brightness(105%) contrast(100%);*/ } @media (max-width: 1280px) { .seccionportada div.contenedor_emblema .logoemblema /* El logo o emblema */ { width: 50%; margin-right: auto; margin-left: auto; margin-top: 15vh; display: block; margin-bottom: 0; } } @media (max-width: 1279px) { .seccionportada div.contenedor_emblema .logoemblema /* El logo o emblema */ { width: 50%; margin-right: auto; margin-left: auto; margin-top: 2vh; display: block; margin-bottom: 0; } } /* Tablets */ @media (min-width: 768px) and (max-width: 1199px) { .seccionportada div.contenedor_emblema .logoemblema /* El logo o emblema */ { width: 50%; display: block; margin-left: auto; margin-right: auto; margin-top: 2vh; margin-bottom: auto; } } @media (min-width: 768px) and (orientation: portrait) /* Vertical */ { .seccionportada div.contenedor_emblema .logoemblema /* El logo o emblema */ { width: 70%; display: block; margin-left: auto; margin-right: auto; margin-top: 15vh; margin-bottom: auto; } } @media (max-width: 767px) { .seccionportada div.contenedor_emblema .logoemblema /* El logo o emblema */ { width: 0; display: block; margin-left: auto; margin-right: auto; margin-top: 2vh; margin-bottom: 0; } } .seccionportada div.contenedor_emblema .fecha_evento /* Fecha del evento */ { color: rgb(190, 152, 76); font-family: var(--font_family_redaccion); font-size: var(--textos1_50); text-align: center; margin-top: 0; margin-bottom: 10px; } @media (max-width: 1280px) { .seccionportada div.contenedor_emblema .fecha_evento /* Fecha del evento */ { font-size: var(--textos2_0 ); text-align: center; margin-top: 0; } } @media (max-width: 1279px) { .seccionportada div.contenedor_emblema .fecha_evento /* Fecha del evento */ { text-align: center; margin-top: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .seccionportada div.contenedor_emblema .fecha_evento /* Fecha del evento */ { text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; } } @media (min-width: 768px) and (orientation: portrait) /* Vertical */ { .seccionportada div.contenedor_emblema .fecha_evento /* Fecha del evento */ { font-size: var(--textos2_0 ); text-align: center; margin-left: auto; margin-right: auto; margin-top: 2vh; margin-bottom: 0; } } @media (max-width: 767px) { .seccionportada div.contenedor_emblema .fecha_evento /* Fecha del evento */ { text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; display: none; } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA LOS TITULOS O SUBTITULOS O TEXTOS ESTILIZADOS * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ #section_savedate .section_title { color: var(--color_titulo); } .subtitle_section_title { font-family: var(--font_family_titulos); font-size: var(--textos1_80); text-transform: capitalize; color: var(--color_titulo); } @media (max-width: 767px) { .subtitle_section_title { font-size: var(--textos1_50); } } .subtitle2_section_title { font-family: var(--font_family_titulos); font-size: var(--textos2_875); color: var(--color_titulo); } @media (max-width: 767px) { .subtitle2_section_title { font-size: var(--textos2_25); } } .subtitle3_section_title { font-family: var(--font_family_titulos); font-size: var(--textos2_875); color: var(--color_titulo); font-weight: 400; /* text-shadow: black 0.01em 0.01em 0.05em; */ } @media (max-width: 767px) { .subtitle3_section_title { font-size: var(--textos1_80); padding: 0; } } .subtitle4_section_title { font-family: var(--font_family_redaccion); font-size: var(--textos1_0); color: var(--color_titulo); font-weight: 400; /* text-shadow: black 0.01em 0.01em 0.05em; */ } @media (max-width: 767px) { .subtitle4_section_title { font-size: var(--textos_075); padding: 0; } } .subtitle_section_title5 { font-family: var(--font_family_redaccion); font-size: var(--textos1_80); text-transform: capitalize; color: var(--color_titulo); } @media (max-width: 767px) { .subtitle_section_title5 { font-size: var(--textos1_50); } } .redaccion_seccion { font-family: var(--font_family_redaccion); font-size: var(--textos2_0); color: var(--color_redaccion); } .redaccion_seccion2 { font-family: var(--font_family_redaccion); font-size: var(--textos1_0); color: var(--color_redaccion2); } @media (max-width: 767px) { .redaccion_seccion { font-size: var(--textos1_50); } .redaccion_seccion2 { font-size: var(--textos_0875); } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA CUANDO SE REQUIERA COLOCAR LOS ELEMENTOS GENERALES * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .elementos-generales { width: 30%; } @media (max-width: 767px) { .elementos-generales { width: 70%; } } .elementos-generales2 { width: 10%; } @media (max-width: 767px) { .elementos-generales2 { width: 25%; } } .elementos-generales3 { width: 40%; } @media (max-width: 767px) { .elementos-generales3 { width: 80%; } } .elementos-generales4 { width: 15%; } @media (max-width: 767px) { .elementos-generales4 { width: 30%; } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA CUANDO SE REQUIERA COLOCAR LOS ELEMENTOS DE LA INVITACION COMO TIPO IMAGEN * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .elementos-img-invitacion { width: 70%; max-width: 1000px; } @media (max-width: 767px) { .elementos-img-invitacion { width: 90%; } } .elementos-img-invitacion-dresscode { width: 40%; } @media (max-width: 767px) { .elementos-img-invitacion-dresscode { width: 80%; } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA COLOCAR IMAGENES LOGOS DE SOBRES, MESA DE REGALOS ETC * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .img_mesa_regalos { width: 40%; } .img_mesa_regalos-2 { width: 30%; } .img_instagram { width: 20%; } .img_sobre { width: 30%; } @media (max-width: 767px) { .img_instagram /* Contiene principal el .jpg y el contador */ { width: 30%; } .img_sobre /* Contiene principal el .jpg y el contador */ { width: 60%; } .img_mesa_regalos /* Contiene principal el .jpg y el contador */ { width: 60%; } .img_mesa_regalos-2 { width: 50%; } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA COLOCAR EL CRONOGRAMA * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .cronograma_img { width: 40%; } @media (min-width: 768px) and (max-width: 1199px) { .cronograma_img { width: 100%; } } @media (min-width: 768px) and (orientation: portrait) /* Vertical */ { .cronograma_img { width: 70%; } } @media (max-width: 767px) { .cronograma_img { width: 100%; } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * ESTILOS PARA CCODIGO DE VESTIMENTA * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ #section_dresscode { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: var(--color_botones); } #section_dresscode .section_title { color: var(--color_titulo2); } #section_dresscode .nota_dresscode { color: var(--color_titulo2); display: block; } #section_dresscode .subtitle_section_title { color: var(--color_titulo2); display: block; } @media (max-width: 767px) { #section_dresscode { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: var(--color_botones); } #section_dresscode .section_title { color: var(--color_titulo2); } #section_dresscode .nota_dresscode { color: var(--color_titulo2); } } .codigo_vestimenta_img { width: 30%; } @media (min-width: 1500px) { .codigo_vestimenta_img { width: 30%; } } @media (max-width: 1280px) { .codigo_vestimenta_img /* Para la imagen del fondo de portada principal */ { width: 70%; } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * PARA LA TABLA DE LAS INVITACIONES * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ /* Contenedor principal */ /* SOLO se aplicará en pantallas mayores a 768px (tablet/escritorio) */ @media (min-width: 768px) { .tabla-container { width: 100%; overflow-x: auto; /* Scroll horizontal solo cuando sea necesario */ -webkit-overflow-scrolling: touch; margin: 1rem 0; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); /* Borde sutil */ } .tabla-invitaciones { min-width: 600px; /* Fuerza scroll si el contenido es más angosto */ } } @media screen and (max-width: 768px) { .tabla-invitaciones { width: 100%; margin: 0 auto; overflow-x: hidden; /* Previene desbordamiento horizontal */ } .tabla-invitaciones thead { display: none; } .tabla-invitaciones tr { display: block; margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 8px; /* Bordes redondeados */ overflow: hidden; /* Contiene el contenido dentro del borde */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra opcional */ } .tabla-invitaciones td { display: flex; padding: 0.75rem; border-bottom: 1px solid #eee; word-break: break-word; /* Rompe palabras largas */ } .tabla-invitaciones td:before { content: attr(data-label); font-weight: bold; width: 40%; padding-right: 10px; color: var(--blanco_transparente); flex-shrink: 0; /* Evita que se encoja */ } .tabla-invitaciones td > *:not(:before) { width: 55%; padding-left: 10px; overflow-wrap: break-word; /* Maneja texto largo */ word-wrap: break-word; hyphens: auto; /* División de palabras con guiones */ } /* Estilo para URLs largas */ .tabla-invitaciones td[data-label="URL:"] > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* Límite de líneas */ -webkit-box-orient: vertical; } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * PARA EL SIDENAV DE LOS MOVILES * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ /* Ocultar el botón de menú en pantallas grandes */ .login_invitaciones .sidenav-trigger { display: block; } /* Mostrar el botón de menú en pantallas pequeñas */ @media only screen and (max-width: 767px) { .login_invitaciones .sidenav-trigger { display: block; position: fixed; top: 10px; left: 10px; z-index: 999; color: #fff; /* Color del ícono */ } /* Ocultar el sidebar fijo en móviles */ .sidenav.sidenav-fixed { transform: translateX(-105%); } /* Mostrar el sidebar cuando está activo */ .sidenav.sidenav-fixed.active { transform: translateX(0); } } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * PARA LOS SELECT * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ /* Forzar que el dropdown sea clickeable en móviles */ .dropdown-content { pointer-events: auto !important; } .select-dropdown { touch-action: manipulation; } /*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * * PARA EL SELECTOR DEL LENGUAJE O IDIOMA * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-*/ .language-selector { position: absolute; right: 0; margin: 5px 0; padding: 15px; background: transparent; border-radius: 5px; } .language-option { background: #e9ecef; color: #212121; } .language-option:hover { background: #dee2e6; } .language-option.active { background: var(--color_botones); color: var(--color_texto_botones); } /***** PARA LAS CARDS *****/ .title_cards /* Titulos de las tarjetas */ { font-family: var(--font_family_titulos); color: var(--color_titulo); } .mycard /* En caso de que se quiera poner algun adorno a las tarjetas de las mesas de regalo Habilitar */ { border: 10px double var(--color_botones); background-color: transparent; } /***** PARA LA INVITACIÓN EN VIDEO O IMAGEN *****/ #overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--negro_transparent); z-index: 99999; cursor: pointer; } #text_invitacion { position: absolute; font-size: var(--textos1_25); color: var(--blanco); right: 0; padding: 20px !important; } #video { position: absolute; top: 52%; left: 50%; font-size: var(--textos3_125); color: var(--blanco); transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); outline: none; border: 0; } @media (max-width: 767px) { #video { width: 100%; } } #video_invitacion { width: 55%; } @media (max-width: 767px) { #video_invitacion { width: 60%; } } /***** PARA LOS TITULOS DE LAS SECCIONES *****/ .section_title { font-family: var(--font_family_titulos); font-size: var(--textos3_125); text-transform: capitalize; color: var(--color_titulo); } @media (max-width: 767px) { .section_title { font-size: var(--textos2_0); } } .section_title_encabezado { font-family: var(--font_family_redaccion); font-size: var(--textos3_125); text-transform: uppercase; color: var(--color_titulo); letter-spacing: 10px; } @media (max-width: 1280px) { .section_title_encabezado { font-family: var(--font_family_redaccion); font-size: var(--textos2_0 ); text-transform: uppercase; color: var(--color_titulo); letter-spacing: 10px; } } /***** PARA LOS FONDOS DE LAS SECCIONES *****/ #section_otros { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section_otros .section_title { color: var(--color_titulo) } #section_otros .nota_dresscode { color: var(--color_titulo) } @media (max-width: 767px) { #section_otros { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } /***** PARA LINEA VERTICAL *****/ .vl { border-left: 3px solid var(--color_titulo); height: 200px; width: 1px; position: relative; left: 50%; margin-left: -3px; } /***** PARA EL ICONO DE INSTAGRAM EN FORMATO TEXTO*****/ #section_hashtag i.icono_instagram { color: var(--color_titulo); } /***** PARA EL TEXTO DEL HASHTAG *****/ #section_hashtag p.texto_hashtag { text-transform: revert; } /***** PARA EL ENLACE DEL HASHTAG *****/ #section_hashtag a.enlace_hashtag { color: var(--color_titulo); font-weight: bold; } #section_hashtag a.bg-button-ig, #section_hashtag a.bg-button-ig:hover, #section_hashtag a.bg-button-ig:focus { background-color: var(--color_botones) !important; font-weight: bolder; color: var(--color_texto_botones) !important; font-family: var(--font_family_redaccion) !important; } /***** PARA LA SECCIÓN DE MESA DE REGALOS *****/ .mi-container-mesa { /* width: 100%!important; */ } @media (max-width: 767px) { .mi-container-mesa { width: 100% !important; } } /***** CAROUSEL PARA LIBRO DE FIRMAS *****/ .carousel-libro-firmas .carousel-item { background-color: var(--color_botones_transparent); color: var(--blanco); opacity: 1; overflow-y: auto; padding: 80px 50px 80px 50px; } .carousel-libro-firmas .indicators .indicator-item.active { background-color: var(--color_redaccion);; } .carousel-libro-firmas .indicators .indicator-item { background-color: var(--color_redaccion);; } /***** PARA EL FORMULARIO *****/ [type="checkbox"].filled-in:checked + span:not(.lever):after /* Para los checkbox*/ { top: 0; width: 20px; height: 20px; border: 2px solid var(--color_titulo) !important; background-color: var(--color_titulo) !important; z-index: 0; } textarea.materialize-textarea:focus:not([readonly]) /* Para los text area que no son readonly*/ { border-bottom: 1px solid var(--color_titulo); -webkit-box-shadow: 0 1px 0 0 var(--color_titulo); box-shadow: 0 1px 0 0 var(--color_titulo); } .inpuColor /* Para inputs en especifico */ { color: var(--color_redaccion); } .input-field-color label /* para los inputs en general */ { color: var(--color_redaccion); } .input-field-color input, .input-field-color textarea /* label input text underline focus color */ { border-bottom: 1px solid var(--color_titulo) !important; } .input-field-color input:focus + label, .input-field-color textarea:focus + label /* label titulo focus color */ { color: var(--color_redaccion) !important; } .input-field-color input:focus, .input-field-color textarea:focus /* label input text underline focus color */ { border-bottom: 1px solid var(--color_titulo) !important; box-shadow: 0 1px 0 0 var(--color_titulo) !important; } .input-field-color input:focus, .input-field-color textarea:focus /* label input text underline focus color */ { border-bottom: 1px solid var(--color_titulo) !important; box-shadow: 0 1px 0 0 var(--color_titulo) !important; } [type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:after /* Para el radibutton */ { background-color: var(--color_titulo); border: 2px solid var(--color_titulo); } .input-field-colorFN label { color: var(--color_redaccion); } .input-field-colorFN select, .input-field-colorFN input[type=text], .input-field-colorFN textarea /* label input text underline focus color */ { border-bottom: 1px solid var(--color_titulo) !important; } .input-field-colorFN input:focus + label, .input-field-colorFN textarea:focus + label /* label titulo focus color */ { color: var(--color_redaccion); } .input-field-colorFN input[type=text]:focus, .input-field-colorFN textarea:focus /* label input text underline focus color */ { border-bottom: 1px solid var(--color_titulo) !important; box-shadow: 0 1px 0 0 var(--color_titulo) !important; } .dropdown-content li > a, .dropdown-content li > span { font-size: 16px; color: var(--color_redaccion); display: block; line-height: 22px; padding: 14px 16px; } .select-wrapper .caret { fill: var(--color_titulo); } .select-wrapper input.select-dropdown { color: var(--color_titulo); } .input-field-colorFN p { color: var(--color_redaccion); } select.browser-default { display: block; background: var(--color_botones_transparent05); color: var(--blanco); font-size: var(--textos1_0); } #alert_questions /*´Para el alert del form */ { font-size: 10px; padding: 8px; border-radius: 3%; background-color: var(--color_titulo); } /***** PARA EL FOOTER *****/ .page-footer { background-color: var(--blanco); } .page-footer .footer-copyright { color: var(--gris_oscuro); background-color: var(--blanco); } /***** PARA LA IMAGEN DE SEPRACION (FLECHA) *****/ .img_separacion { width: 20%; } @media (max-width: 767px) { .img_separacion { width: 50%; } } /***** PARA LA IMAGEN DE SEPRACION (FLECHA) *****/ .imagen_dresscode { width: 20%; } @media (max-width: 767px) { .imagen_dresscode { width: 100%; } } /***** PARA QUE SE MUESTREN CORRECTAMENTE LAS IMAGENES DE LOS PARRALAX ******/ .parallax-container .mi_parallax { z-index: 1; } /***** PARA LAS SECCIONES DE LOS PARALLAX IMAGENES *****/ .parallaxlast2 { transform: translateX(0) translateY(-10%) scale(0.8) !important; /* filter: brightness(0.5); -webkit-filter: brightness(0.5); */ } @media (max-width: 1279px) { .parallaxlast2 { transform: translateX(-10%) translateY(-20%) scale(.8) !important; } } @media (max-width: 767px) { .parallaxlast2 { transform: translateX(-5%) translateY(-5%) scale(0.3) !important; } } .parallaxlast3 { transform: translateX(0) translateY(-20%) scale(1) !important; /* filter: brightness(0.5); -webkit-filter: brightness(0.5); */ } @media (max-width: 767px) { .parallaxlast3 { transform: translateX(15%) translateY(-20%) scale(1) !important; } } .parallaxlast4 { transform: translateX(0) translateY(50%) scale(1) !important; /* filter: brightness(0.5); -webkit-filter: brightness(0.5); */ } @media (max-width: 767px) { .parallaxlast4 { transform: translateX(-10%) translateY(10%) scale(.7) !important; } } /* Para el contenedor especifico de la fecha, en caso de ser texto colocamos el color */ .seccionportada div#contenedor_fecha { color: var(--color_titulo); font-family: var(--font_family_redaccion); margin-top: -100px; /* Para que se encuentre un poco pegado al logo en caso de tener si no comentar */ } @media (max-width: 767px) { .seccionportada div#contenedor_fecha { color: var(--color_titulo); } } /***** PARA EL CARUSEL DE VESTIMENTA *****/ .carousel-dress-code { height: 300px; /* Cambia esto al valor deseado */ } .carousel-dress-code .carousel-item img { height: 100%; /* Ajusta la imagen para que ocupe toda la altura del contenedor */ object-fit: contain; /* Ajusta esta propiedad según tus necesidades (cover, contain, etc.) */ } @media (max-width: 767px) { .carousel-dress-code { height: 250px; /* Cambia esto al valor deseado */ } } /* .carousel { overflow: hidden; position: relative; width: 100%; height: 400px; -webkit-perspective: 500px; perspective: 500px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } */ /* .carousel .carousel-item>img { width: 100%; } */ /***** EN CASO DE HABER GALERIA REVUELTA GRID *****/ /* ---- isotope ---- */ /*.grid { background: #fffff9; } .grid:after { content: ''; display: block; clear: both; } .grid-sizer, .grid-item { width: 33.333%; } .grid-item { float: left; } .grid-item img { display: block; max-width: 100%; }*/ /***** PARA EL IDIOMA *****/ /*Habilitar en caso de haber textos para cambiar de idioma*/ /* .idiomas a { text-decoration: underline; color: #4c1c56; font-weight: 600; } */ /***** PARA EL TAB MENU DE GALERIAS EN CASO DE HABER MÁS DEL SAVE THE DATE *****/ /* #menu_galeria .tab a:hover, #menu_galeria .tab a.active { background-color: transparent; color: var(--color_botones); } #menu_galeria .indicator { position: absolute; bottom: 0; height: 2px; background-color: var(--color_botones); will-change: left, right; } .tabs .tab a { color: var(--color_botones_transparent05); display: block; width: 100%; height: 100%; padding: 0 24px; font-size: 14px; text-overflow: ellipsis; overflow: hidden; -webkit-transition: color .28s ease, background-color .28s ease; transition: color .28s ease, background-color .28s ease; } */ .text_texto_color_titulo { color: var(--color_titulo05) !important; } .morephotos { display: none; } .texto-imagenes { font-size: 2.56rem; } @media (max-width: 767px) { .texto-imagenes { font-size: 1.2rem; } } .texto-color1 { color: var(--color_botones); } .hide-content-movil { } @media (max-width: 767px) { .hide-content-movil { display: none; } .hide-content-desktop { display: block; } } .hide-content-desktop { } @media (min-width: 768px) { .hide-content-movil { display: block; } .hide-content-desktop { display: none; } } .img-galeria { width: 350px; height: 530px; } @media (max-width: 767px) { .img-galeria { width: 100px; height: 151px; } } @media (min-width: 768px) and (max-width: 1199px) { .img-galeria { width: 200px; height: 303px; } } /***** PARA LA SECCIÒN DONDE SE MUESTRAN LAS INVITACIONES *****/ .login_invitaciones { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100vh; color: var(--blanco); background-color: var(--gris_oscuro2); font-size: var(--textos_0875); } @media (max-width: 767px) { .login_invitaciones { background: url(../images/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: var(--gris_oscuro2); } } .container_card_login { display: flex; justify-content: center; align-items: center; height: 100vh; } #card_login { border: 2px solid white; padding: 20px; } .input-field-white label { color: #fff; } .input-field-white input[type=text], .input-field-white input[type=password], .input-field-white select /* label input text underline focus color */ { border-bottom: 1px solid #fff !important; color: #fff !important; } .input-field-white input[type=text]:focus + label /* label titulo focus color */ { color: #fff !important; } .input-field-white select:focus + label /* label titulo focus color */ { color: #fff !important; } .input-field-white input[type=text]:focus /* label input text underline focus color */ { border-bottom: 1px solid #fff !important; box-shadow: 0 1px 0 0 #fff !important; } .input-field-white input[type=password]:focus /* label input text underline focus color */ { border-bottom: 1px solid #fff !important; box-shadow: 0 1px 0 0 #fff !important; } .input-field-white select:focus /* label input text underline focus color */ { border-bottom: 1px solid #fff !important; box-shadow: 0 1px 0 0 #fff !important; } .input-field-white label.active { color: #fff !important; } .input-field-white .prefix.active /* icon prefix focus color */ { color: #fff !important; } .material-icons-white { color: #fff; } .btn_menu_invitaciones { position: relative; float: right; padding: 10px; margin: 20px; cursor: pointer; color: var(--blanco); border-radius: 8px; background-color: var(--gris_oscuro); } .btn_menu_invitaciones a { color: var(--blanco); } .tabla-invitaciones tr { border-bottom: 1px solid var(--color_redaccion); } /***** PARA LA PÁGINA NOT FOUND *****/ .main404 { align-items: center; display: flex; flex-direction: column; height: 100vh; justify-content: center; text-align: center; } .title_404 { color: var(--color_titulo); font-size: 12.5rem; letter-spacing: .10em; margin: .025em 0; text-shadow: .05em .05em 0 rgba(0,0,0,.25); white-space: nowrap; @media(max-width: 30rem) { font-size: 8.5rem; } & > span { animation: spooky 2s alternate infinite linear; color: var(--color_redaccion); display: inline-block; } } .sub_404 { color: var(--color_titulo); margin-bottom: .40em; } .texto_404 { color: #ccc; margin-top: 0; } @keyframes spooky { from { transform: translatey(.15em) scaley(.95); } to { transform: translatey(-.15em); } } /***** PARA LOS MOTIVOS DE LOS PADRINOS Y NOMBRE DE LOS HOTELES*****/ .motivo-padrinos, .nombre-hotel { color: var(--color_titulo); } .nombre-preguntas { color: var(--color_titulo) !important; font-weight: 600; } .resaltar-frase { font-weight: 600; color: var(--color_titulo); } .card-panel-confirmacion { background: var(--color_titulo); } .imagen-elemento { width: 40%; } @media (max-width: 767px) { .imagen-elemento /* Contiene principal el .jpg y el contador */ { width: 100%; } } .img_asistencia { width: 30%; } .img_asistencia2 { width: 55%; } @media (max-width: 767px) { .img_asistencia /* Contiene principal el .jpg y el contador */ { width: 55%; } .img_asistencia2 /* Contiene principal el .jpg y el contador */ { width: 80%; } } /***** PARA EL SIDENAV LEFT *****/ /* Ajustar el margen izquierdo del contenido principal */ main { margin-left: 300px; /* Ancho del sidebar */ padding: 20px; /* Espaciado interno */ } /* Estilo para el fondo del sidebar */ .side-nav-options .user-view .background { background-color: #212121; /* Color de fondo */ } /* Estilo para los enlaces del sidebar */ .side-nav-options li a { color: #333; /* Color del texto */ } .side-nav-options li a:hover { background-color: #eee; /* Color de fondo al pasar el mouse */ } /* Ocultar el botón de menú en pantallas grandes */ .sidenav-trigger { display: none; } /* Mostrar el botón de menú en pantallas pequeñas */ @media only screen and (max-width: 992px) { .sidenav-trigger { display: block; position: fixed; top: 10px; left: 10px; z-index: 999; color: #fff; /* Color del ícono */ } /* Ocultar el sidebar fijo en móviles */ .sidenav.sidenav-fixed { transform: translateX(-105%); } /* Mostrar el sidebar cuando está activo */ .sidenav.sidenav-fixed.active { transform: translateX(0); } /* Ajustar el margen del contenido principal en móviles */ main { margin-left: 0; } } .btn, .btn-large, .btn-small, .btn-flat { border-radius: 5px; } #ctl00_ContentPlaceHolder1_btn_enviar { border: none !important; letter-spacing: 1.5px; cursor: pointer; background-color: var(--color_botones); font-weight: bolder; color: var(--color_texto_botones); font-family: var(--font_family_redaccion); text-decoration: none !important; }