@white: #FFFFFF; @azul_enp6: #1226AA; @naranja_enp6: #FF671D; @naranja_enp6Hover: #FF7E42; @dorado_unam: #C29635; @secs_gradient: linear-gradient(0deg, rgba(2, 51, 115, 0.37), rgba(2, 51, 115, 0.37)); @gray_section: #EDE9E9; @fondo-azul: rgba(18, 38, 170, 0.84); @font-face { font-family: 'TodaySHOP'; src: url('fonts/TodaySHOP-Medium.otf'); font-display: swap; } @font-face { font-family: 'TodaySHOP-Regular'; src: url("fonts/TodaySHOP-Regular.otf"); font-display: swap; } @font-face { font-family: 'SourceSansPro-Reg'; src: url('fonts/SourceSansPro-Regular.otf'); font-display: swap; } @font-face { font-family: 'SourceSansPro-SemiBold'; src: url('fonts/SourceSansPro-Semibold.otf'); font-display: swap; } @font-face { font-family: 'SourceSansPro-Bold'; src: url('fonts/SourceSansPro-Bold.otf'); font-display: swap; } @font-face { font-family: 'SourceSansPro-Black'; src: url('fonts/SourceSansPro-Black.otf'); font-display: swap; } /* Pefiles */ .filtroPerfHover:hover { filter: url('../svg/perfil-1.svg#filtroPerfHover') } body { padding: 0%; margin: 0%; overflow-x: hidden; min-height: 100vh; } html, body { overflow: auto; height: auto; } .cont-pag { min-height: 70vh; } .boton-access:hover { background-color: #e4e4e4; a { outline: none; text-decoration: none; } a:hover { outline: none; text-decoration: none; } } .clr-azul:hover { color: @azul_enp6; } .clr-naranja:hover { color: @naranja_enp6; } .clr-dorado:hover { color: @dorado_unam; } /*Etiqueta util para evitar los select*/ .noSelect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Secciones */ .secGray { background-color: rgb(240, 240, 240); } // /* Header y Nav */ /*Correcion de contorno del boton toogle*/ .sombra { box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.047); } .navbar-light .navbar-toggler { border-color: rgba(0, 0, 0, 0); //Lo elimino } nav { div { a { font-family: 'SourceSansPro-SemiBold'; color: @azul_enp6; font-size: 20px; padding: 15px; } a:hover { color: @naranja_enp6; } } #perfiles { cursor: pointer; } } .nav-link { font-family: 'SourceSansPro-Reg'; color: @azul_enp6; } .nav-link:hover { color: @naranja_enp6; } .nav-item { a { font-family: 'SourceSansPro-SemiBold'; color: @azul_enp6; font-size: 11px; padding: 15px; } a:hover { color: @naranja_enp6; } } #menu { display: none; } .logounam { width: 50px; height: 65px; } .logop6 { width: 50px; height: 50px; } .puntos { width: 50px; height: 50px; } .alumno, .docente, .externo { width: 50px; height: 50px; padding: 10px; } body::-webkit-scrollbar { width: 12px; /* display:none; */ } body::-webkit-scrollbar-thumb { background: rgb(113, 113, 113); border-radius: 8px; } body::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:active { background: #424242; } body::-webkit-scrollbar-track { background: #c4c4c4; border-radius: 8px; } section { padding: 20px; } /* Banner de carrusel */ #bannerImg { background-image: url(../imgs/banner_index.jpg); background-repeat: no-repeat; background-size: cover; width: 100%; height: 50vh; /* filter: hue-rotate(360deg) saturate(106%) contrast(84%) invert(8%); */ /* -webkit-filter: hue-rotate(360deg) saturate(106%) contrast(84%) invert(8%); -moz-filter: hue-rotate(360deg) saturate(106%) contrast(84%) invert(8%); */ } #bannerImgFilter { position: relative; width: 100%; height: 100%; font-size: 2.5em; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(3, 7, 32, 0.9) 100%); span { position: absolute; top: 10%; left: 50%; height: 40vh; width: 10px; background-color: @naranja_enp6; } } #bannerImgTxt { color: @white; position: absolute; top: 12%; right: 8%; width: 40%; height: 100%; h2 { font-size: 1.5em; } p { width: 80%; font-weight: 400; font-size: .5em; color: #F5F5F5; } button { font-size: .5em; font-weight: 500; position: absolute; right: 20%; background-color: #FF4F18; padding: 1%; width: 25%; height: 5vh; color: @white; border-radius: 10px; border: none; outline: none; } } // Carrusel principal .fondo-carr-principal { background-color: @azul_enp6; } .pag-carr-prin { justify-content: center; } .pag-carr-prin > div { margin: auto .3em; } .espacio-nav { height: 92px; } .img-carr-prin { height: 300px; width: 100%; } .contenido-principal { color: @white; } .titulo-slide { font-size: 30px; font-family: 'TodaySHOP'; letter-spacing: .2rem; width: 100%; } .desc-slide-prin { font-family: 'SourceSansPro-Reg'; } .pag-carr-prin { .boton-prev { color: @white; } .boton-next { color: @white; } .swiper-pagination-bullet { border-color: @white; } .swiper-pagination-bullet-active { border-color: @naranja_enp6; } } // Boton ver mas .cont-btn-carr { display: grid; place-items: center; } .btn-naranja { background-color: @naranja_enp6; border: none; color: @white; padding: 12.5px 22.5px; border-radius: 22.5px; font-size: 1.2rem; } .cls-1:hover { fill: @naranja_enp6; } .btn-naranja:active, .btn-naranja:visited, .btn-naranja:hover, .btn-naranja:focus { color: @white; text-decoration: none; outline: none; } .btn-naranja:hover { background-color: @naranja_enp6Hover; outline: none; text-decoration: none; } /* Primera Sección */ #secs { padding-top: 5vh; width: 100%; height: 70vh; } .access_secs { background: red; height: 35vh; background-repeat: no-repeat; text-align: start; color: @white; font-size: 2em; font-weight: 500; } .event_cdall { width: 20rem; height: 453px; } .cdtitle { font-weight: bold; font-size: 2rem; } .event_card { background-color: @naranja_enp6; border: none; } .event_cdtext { color: @white; word-break: break-word; width: 100%; overflow-y: hidden; max-height: 25vh; } .event_date { width: auto; color: @white; text-align: end; align-items: center; } .btn-horarios-eventos { color: @naranja_enp6; background-color: @white; border: none; width: auto; text-align: center; padding-top: 10px; padding-bottom: 10px; border-radius: 25px; padding-left: 25px; padding-right: 25px; } .slide-eventos { margin-left: auto; } .orange { color: @naranja_enp6; } .manita { cursor: pointer; } .btn-horarios-eventos:focus, .btn-horarios-eventos:hover { outline: none; box-shadow: none; color: @naranja_enp6; background-color: #e4e4e4; } .eventos-title { font-family: 'SourceSansPro-Bold'; font-size: 3em; } .cuerpo-eventos-PC { display: flex; flex-wrap: wrap; justify-content: space-between; height: 100%; } .img-eventos-Mov { height: 240px; } .event_cddt { height: 115px; } #swiper-eventos-PC { .swiper-slide img { max-height: 60vh; min-height: 260px; } .swiper-slide .col-12 { max-height: 60vh; max-width: 80vw; margin: auto; } } /* Carruseles */ #fotos-galeria-oculta { display: none; } #bullet-generator { width: 100%; display: none; } #pag-principal, #pag-galeria, #pag-eventos-PC, #pag-eventos { transition: left 750ms; } .boton-prev, .boton-next { font-size: 1.3rem; color: @azul_enp6; } .boton-prev:focus, .boton-next:focus { outline: none; } .cont-pagin > div { margin: auto .3em; } .swiper-pagination-bullet { width: 15px; height: 15px; border-radius: 50%; border: 3px solid @azul_enp6; opacity: 1; background-color: transparent; margin: 5px; } .swiper-pagination-bullet:focus { outline: none; } .swiper-pagination-bullet-active { border-color: @naranja_enp6; background-color: @naranja_enp6; } .swiper-pagination-bullet-active { outline: none; } .swiper-container { width: 100%; height: auto; margin-left: 0; margin-right: 0; } .cont-bullets-pag { max-width: 80vw; overflow: hidden; justify-content: space-around; } .swiper-slide { background-size: cover; background-position: center; } /* Galería */ .new-galeria { background-color: #FFFFFF; } .gallery-top { width: 100%; } .gallery-thumbs { box-sizing: border-box; padding-top: 9px; padding-bottom: 9px; width: 100%; } .gallery-thumbs .swiper-slide { width: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; } .galeria-info, .galeria-title, .eventos-title { text-align: center; } nav { div { a { font-family: 'SourceSansPro-Reg'; color: @azul_enp6; padding: 5px; } a:hover { color: @naranja_enp6; } } } .galeria-title, .eventos-title { font-family: 'SourceSansPro-Bold'; font-size: 3rem; color: @azul_enp6; margin: 0px; } .galeria-info { font-family: 'SourceSansPro-Reg'; color: @azul_enp6; margin: 0px; } .Img_prepa { position: relative; height: 250px; width: 100%; } @media (max-width: 767px) { #navbarToggleExternalContent { width: 100%; } } // Footer .footer { font-family: 'SourceSansPro-Reg'; background-color: @azul_enp6; text-align: justify; color: #ffffff; width: 100%; a { color: white; font-size: bolder; } strong { font-family: 'SourceSansPro-SemiBold'; } h5 { font-weight: 400; font-size: 1.1em; } p { font-weight: 1; font-size: 0.9em; } strong { font-weight: bold; } .logos { padding: 0 auto; } } .logo { height: 3.5em; } @media (max-width: 769px) { .footer { padding: 0 15%; text-align: center; .logo { height: 2.8em; } a { color: #ffffff; font-family: 'SourceSansPro-Bold'; text-decoration: none; } p { font-size: 0.8em; } .dudas { font-size: 0.7em; } } } a:hover { text-decoration: none; } .enlaces { a { color: @azul_enp6; font-family: 'SourceSansPro-SemiBold'; } } .fixed-top { background: #f8f9fa; } @media (min-width: 576px) { .enlaces { a { transition: transform 0.4s linear, color 0.5s ease; } a:hover { font-size: bold; color: @naranja_enp6; text-decoration: none; transform: scale(1.5); } a > .logo { display: none; position: relative; top: -50px; width: 100%; height: 0px; text-align: center; } a:hover > .logo { font-size: 1.8em; display: block; text-decoration: none; animation-name: logos; animation-duration: 0.4s; } } @keyframes logos { 0% { font-size: 0; } 80% { font-size: 2em; } 100% { font-size: 1.8em; } } } @media (max-width: 576px) { .footer { padding: 0; } .enlaces { background-color: #f0f0f0; overflow: hidden; width: 100%; .prepas-cont { width: 400%; position: relative; animation-name: enlacesPrepa; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: linear; } .prepa { width: 200%; letter-spacing: 0.3em; } a { margin-left: 0; font-size: 1em; } a > .logo { display: none; } a:hover { color: @naranja_enp6; } } @keyframes enlacesPrepa { from { left: 0%; } to { left: -200%; } } .infoCont { position: relative; animation-name: deslizInfo; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes deslizInfo { from { left: 0%; } to { left: -100%; } } } // Tamaño ipad o superioir .pagUnam { a { transition: transform 0.2s linear; img { width: 130px; } } a:hover { transform: scale(1.25); } padding-bottom: 100px; } // celular @media (max-width: 768px) { .pagUnam { a { img { width: 90px; } } padding-bottom: 70px; } } @media (max-width: 992px) { #paginasUnam { overflow: hidden; width: 100%; .pagUnam-cont { width: 400%; position: relative; animation-name: enlacesUnam; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; } .pagUnam { width: 200%; } } @keyframes enlacesUnam { from { left: 0%; } to { left: -200%; } } } .redesBotones { padding: 2em 0; } .redes { padding: 2em 0; color: @azul_enp6; p { font-size: 1.2em; font-weight: normal; } .iconos { margin: padding 0px 0.5em; font-size: 2.5em; a { padding: 0px 0.5em; color: @azul_enp6; } i { transition: all 0.2s linear; } i:hover { cursor: pointer; transform: scale(1.2); } i:hover[class="fab fa-instagram"] { color: transparent; background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888',GradientType=1); } i:hover[class="fab fa-twitter"] { color: #55acee; } i:hover[class="fab fa-facebook"] { color: #0269e0; } i:hover[class="fab fa-youtube"] { color: #c4302b; } } } #nav-perfiles { display: none; left: 150%; #items-perfiles { padding-bottom: 20px; color: @azul_enp6; font-family: 'SourceSansPro-Reg'; display: flex; flex-direction: row; justify-content: space-around; .perfilSec { width: 50px; cursor: pointer; } .activo { p { color: @azul_enp6; } } .activoSVG { fill: @azul_enp6; } .inactivo { p { color: @naranja_enp6; } } .inactivoSVG { fill: @naranja_enp6; } p { font-size: 0.8em; text-align: center; font-size: bold; width: 50px;; } } } .perfNoAct { display: none; } // Modal #modal-perfiles { width: 100vw; height: 100vh; background-color: @fondo-azul; z-index: 1031; position: fixed; top: 0; left: 0; opacity: 0; transition: opacity 1s; display: none; .row { margin-right: auto; margin-left: auto; } p { color: @white; } } #titulo-modal { font-family: 'TodaySHOP'; font-size: 27px; letter-spacing: .3em; width: 100%; } #subtitulo-modal { font-family: 'SourceSansPro-Reg'; letter-spacing: .1em; font-size: 20px; width: 100%; } #cont-row-modal { display: flex; justify-content: space-evenly; flex-direction: column; flex-wrap: wrap; } #desc-modal { font-family: 'TodaySHOP'; letter-spacing: .2em; font-size: 17px; } .svg-modal { width: 25vw; height: 25vw; } .relleno-svg-modal { fill: @white; } .cont-perfil-modal:hover { cursor: pointer; .relleno-svg-modal { fill: @naranja_enp6; } } #modal-perfiles .cont-perfil-modal:hover .info-svg-modal { color: @naranja_enp6; } .cont-perfil-modal { margin-left: 20px; margin-right: 20px; margin-bottom: 20px; cursor: pointer; } .info-svg-modal { font-family: 'TodaySHOP'; letter-spacing: .2em; margin-top: 1em; margin-bottom: 1em; font-size: 14px; } #cookiesAdvice { width: 100%; height: 230px; background-color: #ffffff; z-index: 3000; display: none; position: fixed; color: @azul_enp6; bottom: 0%; p { text-align: justify; padding: 5% 5% 0%; width: 100%; font-size: 17px; font-family: 'SourceSansPro-SemiBold'; color: @azul_enp6; a { color: @naranja_enp6; } } #cookiePC { display: none; } } #cookiesButtonDiv { display: flex; width: 100%; margin: auto; div { margin: auto; } } #cookiesVerMas2, #cookiesAceptar { font-family: 'SourceSansPro-SemiBold'; font-size: 20px; color: #ffff; background-color: @naranja_enp6; width: 130%; } #cookiesVerMas2 { background-color: @azul_enp6; } #cookiesAceptar { background-color: @naranja_enp6; outline: none; padding: 10px 20px; border: none; } #cookiesAceptar:hover { background-color: @naranja_enp6Hover; } #cookiesVerMas2:hover { background-color: #2539bd; } #cookiesVerMas { display: none; } // Notificaciones #notificaciones { box-shadow: 0 0 5px 0 black; position: fixed; top: 0; z-index: 2000; background-color: @white; display: none; span { font-family: 'SourceSansPro-Reg'; font-size: 16px; font-weight: bold; color: @azul_enp6; letter-spacing: 0.1em; line-height: 2em; } img { width: 25px; } .row { margin-right: 0; margin-left: 0; } button { font-size: 16px; } } .btn-notif { padding: 10px 25px; border-radius: 25px; } #notif-aceptar { background-color: @naranja_enp6; color: @white; } #notif-negar { background-color: #e5e5e5; color: @azul_enp6; } .grid-center { display: grid; place-items: center; } .h-100 { height: 100%; } #notif-flotante { height: 40px; width: 40px; position: fixed; bottom: 30px; right: 30px; background-color: @azul_enp6; border-radius: 20px; display: none; overflow-x: hidden; z-index: 1030; cursor: pointer; img { width: 25px; height: 25px; margin-left: 7.5px; margin-right: 7.5px; } span { font-family: 'SourceSansPro-SemiBold'; color: @white; } } .notif-no-visible { div { width: 500px; } } // Modal #modal { width: 100vw; height: 100vh; background-color: @fondo-azul; position: fixed; top: 0; left: 0; z-index: 1031; display: none; .cont-modal { display: grid; place-items: center; width: 100%; height: 100%; cursor: pointer; } h1 { color: @white; text-align: center; font-family: 'TodaySHOP'; letter-spacing: 0.2em; width: 90vw; } } #cerrarModal { width: 40px; height: 40px; background-color: #2840AB; border: none; position: absolute; right: -1px; top: -1px; display: none; z-index: 1040; i { color: @white; } } #imgTag { max-width: 90vw; max-height: 60vh; position: relative; img { max-width: 100%; max-height: 60vh; } } #control-zoom { display: none; font-size: 25px; .fa-minus, .fa-plus { cursor: pointer; } } .cont-img-modal { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; } .cont-img-modal:focus { outline: none; } .descarga-icon { width: 25px; height: 25px; margin-left: 4.2vw; cursor: pointer; } .opt-modal { color: @white; width: 90vw; justify-content: center; .cont-check { position: relative; width: 15px; height: 15px; display: inline-block; } span { font-family: 'TodaySHOP-Regular'; letter-spacing: 0.15em; font-size: 20px; } input { display: none; } label { width: 15px; height: 15px; position: absolute; top: 0; left: 0; background-color: transparent; border: 2px solid @white; margin-bottom: 0; display: inline-block; cursor: pointer; } input:focus { outline: none; } input:checked ~ label { color: @fondo-azul; background-color: @white; border: none; } label:after { content: ""; left: 5px; top: 2px; position: absolute; display: none; } input:checked ~ label:after { display: block; width: 5px; height: 10px; border: solid @fondo-azul; border-width: 0 2px 2px 0; transform: rotate(45deg); } } #noClickModal { cursor: auto; } // Bootstrap medias @media (min-width: 600px) { #cookiesAdvice { height: 200px; } } // Medium @media (min-width: 768px) { #cookiesButtonDiv { padding: 5% 5% 0%; } #cookiesAdvice { height: 200px; background-color: #0000bdb8; p { text-align: left; padding: 2% 2% 0%; padding-left: 5%; width: 60%; color: #ffff; font-size: 1.1em; } #cookiesVerMas { display: block; } #cookieMovil { display: none; } #cookiePC { display: block; } } #cookiesButtonDiv { display: fixed; width: 40%; position: absolute; bottom: 65px; right: 0%; } #cookiesAceptar { left: -20%; top: 2%; padding: 11px 20px; cursor: pointer; } #cookiesVerMas2 { background-color: #ffff; color: @azul_enp6; top: 0%; padding: 10px 20px; } #cookiesVerMas2:hover { background-color: @gray_section; } #navbarToggleExternalContent { display: none; } //Nav nav { div { a { font-size: 15px; margin-right: 10px; } } } .label_men { margin-right: 0; } // Carruseles .cont-pagin > div { margin: auto 0.5em; } .boton-next, .boton-prev { font-size: 1.6rem; } .swiper-pagination-bullet { margin: 5px 8px; width: 18px; height: 18px; border-width: 4px; } .swiper-container { height: auto; } .cont-bullets-pag { max-width: 70vw; } // Carrusel principal .pag-carr-prin { margin: auto 0.5em; } .img-carr-prin { height: 340px; } .fondo-carr-principal { background-color: @white; } .titulo-slide, .desc-slide-prin, #next-principal, #prev-principal { color: @azul_enp6; } .pag-carr-prin { .swiper-pagination-bullet { border-color: @azul_enp6; } .swiper-pagination-bullet-active { border-color: @naranja_enp6; } } .btn-naranja { padding-top: 10px; padding-bottom: 10px; } .cont-btn-carr { display: none; } // Galeria .Img_prepa { height: 325px; } .galeria-title { letter-spacing: 0.1em; } // Modal Perfiles #cont-row-modal { .row { margin-bottom: 30px; } .row:nth-child(3) { top: -8%; position: relative; } } .svg-modal { width: 150px; height: 150px; } .cont-perfil-modal { margin-right: 40px; margin-left: 40px; } #titulo-modal { font-size: 34px; } #subtitulo-modal { font-size: 27px; } #desc-modal { font-size: 23px; } .info-svg-modal { font-size: 17px; } // Notificaciones #notificaciones { top: 20px; left: 20px; span { line-height: 25.5px; font-size: 17px; } button { font-size: 17px; } } #notif-flotante { height: 50px; width: 70px; border-radius: 25px; img { width: 30px; height: 30px; margin-right: 30px; margin-left: 10px; } } // Modal .opt-modal { width: 70vw; } #imgTag { max-width: 70vw; } } // Large @media (min-width: 992px) { #cookiesAdvice { height: 180px; } #cookiesButtonDiv { bottom: 60px; } //Nav nav { div { a { font-size: 20px; } } } #cookiesVerMas2 { padding: 10px 20px; } #cookiesAceptar { padding: 10px 25px; } // Carrusel principal .img-carr-prin { height: 330px; } // Galeria .Img_prepa { height: 375px; } // Modal Perfiles { #cont-row-modal .row:nth-child(1) { justify-content: center; } #subtitulo-modal { width: 70%; } .cont-perfil-modal { margin-left: 80px; margin-right: 80px; } // Modal #control-zoom { display: block; } #modal { .cont-modal { cursor: auto; } } .opt-modal { justify-content: space-between; .cont-check { width: 20px; height: 20px; } span { font-size: 25px; } label { width: 20px; height: 20px; } label:after { left: 6px; top: 1px; } input:checked ~ label:after { width: 7.5px; height: 15px; } } #cerrarModal { display: block; } } // Extra-large @media (min-width: 1200px) { #cookiesAdvice { height: 150px; background-color: #0000bdb8; p { padding: 2% 2% 0%; padding-left: 10%; width: 65%; color: #ffff; font-size: 17px; } } #cookiesButtonDiv { display: fixed; width: 30%; position: absolute; bottom: 45px; right: 10%; } #cookiesVerMas2 { padding: 10px 25px; background-color: #ffff; color: @azul_enp6; position: relative; top: 0%; left: 40%; } #cookiesAceptar { padding: 10px 25px; width: 120px; height: 48px; left: 20%; } // Carruseles .cont-pagin > div { margin: auto 0.7em; } .swiper-pagination-bullet { margin: 7px 11px; width: 22px; height: 22px; border-width: 5px; } .boton-next, .boton-prev { font-size: 2rem; } .cont-bullets-pag { max-width: 50vw; } // Carrusel principal .titulo-slide { font-size: 45px; } .desc-slide-prin { font-size: 20px; } .pag-carr-prin { margin: auto 0.7em; } .img-carr-prin { height: 380px; } // Galeria .Img_prepa { height: 400px; } .galeria-title, .eventos-title { font-size: 60px; } .galeria-info { font-size: 20px; } // Modal Perfiles #titulo-modal { font-size: 42px; } #subtitulo-modal { font-size: 30px; } #desc-modal { font-size: 26px; } .info-svg-modal { font-size: 20px; } // Modal #imgTag { max-width: 55vw; } .opt-modal { width: 55vw; } } // Extra-extra-large (Bootstrap 5) @media (min-width: 1400px) { // Galeria .Img_prepa { height: 450px; } #cookiesVerMas2 { left: 30%; } .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1360px; } } @media (min-width: 1600px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1560px; } } .EspacioNav { margin-top: 100px; } #swiper-eventos { margin: auto; } // Animacion nav icon #menu-icon { width: 35px; height: 25px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: all .5s ease-in-out; cursor: pointer; margin-right: 10px; } #menu-icon span { display: block; position: absolute; height: 6px; width: 100%; background: @azul_enp6; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } /* Icon 4 */ #menu-icon span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #menu-icon span:nth-child(2) { top: 12px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #menu-icon span:nth-child(3) { top: 24px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #menu-icon.open span:nth-child(1) { // background-color: @naranja_enp6; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0px; left: 4px; } #menu-icon.open span:nth-child(2) { // background-color: @naranja_enp6; width: 0%; opacity: 0; } #menu-icon.open span:nth-child(3) { // background-color: @naranja_enp6; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 25px; left: 4px; } .fondo_blur_azul { display: none; position: fixed; width: 100%; height: 100%; background-color: rgba(18, 38, 170, 0.84); z-index: 9; } #MobileNav { padding-top: 90px; left: -100%; font-family: 'SourceSansPro-Reg'; position: fixed; top: 0; height: 100%; width: 80%; background-color: white; z-index: 10; padding-bottom: 50px; cursor: default; overflow: scroll; .label_1 { color: @azul_enp6; margin-left: 10px; padding: 8px; display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; width: 85%; overflow: hidden; font-size: 1.2em; font-weight: 900; letter-spacing: 2px; cursor: pointer; } .label_1:hover, a:hover, .Titulo:hover { color: @naranja_enp6; } .div_menu_2, .div_menu_3 { color: @azul_enp6; position: absolute; padding-top: 100px; padding-left: 30px; width: 100%; height: 100%; background-color: white; left: -100%; top: 0%; overflow: scroll; padding-bottom: 50px; a, .label_2 { cursor: pointer; padding: 8px; display: block; color: @azul_enp6; font-size: 1em; font-weight: 700; letter-spacing: 2px; padding-right: 35px; } .label_2 { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: center; } .label_2:hover, a:hover { color: @naranja_enp6; } } } .Titulo { display: flex; justify-content: left; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 10px; font-size: 1.3em; letter-spacing: 2.5px; font-weight: bolder; margin-bottom: 0px; .retroceder { font-size: 0.8em; margin-right: 12%; } } #DeskNav { .div_men { position: relative; display: inline-block; margin: 0 15px; height: 100%; padding: 20px 0; .label_men { position: relative; font-size: 20px; font-family: 'SourceSansPro-SemiBold'; color: @azul_enp6; cursor: pointer; } .cont-tri { width: 100%; height: 20px; display: none; position: absolute; bottom: -10px; .triangulito { margin-left: 25%; width: 0; height: 0; border-right: 15px solid transparent; border-top: 10px solid transparent; border-left: 15px solid transparent; border-bottom: 10px solid @azul_enp6; } } .cont-men { padding: 20px; width: 450px; background-color: @azul_enp6; display: none; position: absolute; left: -50px; top: 80px; a { display: block; color: white; font-size: 16px; } .sub_menu { color: white; margin-left: 5px; a { color: white; font-size: 14px; } } a:hover { color: @naranja_enp6Hover; } } .dis-izq { left: -350px; } .size-s.dis-izq { left: -200px; } } .cont-men.size-m { width: 450px; } .cont-men.size-g { width: 600px; } .cont-men.size-s { width: 300px; } .div_men:hover .cont-tri { display: block; } .div_men:hover .cont-men { display: block; } .div_men:hover .label_men { color: @naranja_enp6Hover; } } #menu-icon { display: none; } .navbar { padding: .5rem 0; .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding-left: 0px; padding-right: 0px; } } @media (max-width: 1200px) { #DeskNav { display: none; } #menu-icon { display: block; } }