/* ---------------------------------------------------- *\ * $ VARIABLES \* ---------------------------------------------------- */ /** GENERAL **/ :root { /* FUENTE FAMILIA */ /*----------------------------------------*/ --familia-textos : 'Roboto', sans-serif; /*----------------------------------------*/ /* FUENTE TAMAÑO */ /*----------------------------------------*/ --texto-tamanoBase : 15px; --texto-tamanoMediano : 18px; --texto-tamanoGrande : 24px; --texto-tamanoGigante : 36px; --texto-tamanoPequeno : 13px; --texto-tamanoExtra : 45px; /* FUENTE GROSOR */ /*----------------------------------------*/ --texto-grosorBase : 300; --texto-grosorFuerte : 600; /*----------------------------------------*/ /* FUENTE INTERLINEADO */ /*----------------------------------------*/ --texto-interlineado : 1.4em; /*----------------------------------------*/ /* TITULOS */ /*----------------------------------------*/ --megatitulo : 120px; --extratitulo : 80px; --supertitulo : 60px; --mediotitulo : 43px; --titulo : 20px; --subtitulo : 28px; --mintitulo : 18px; /*----------------------------------------*/ /* COLORES */ /*----------------------------------------*/ --color-plomo : 50,50,50; --color-verde : 0,118,73; /* #007649 */ --color-verdeOscuro : 18,61,45; /* #123d2d */ --color-naranja : 244,186,65; /* #e5a840 */ --color-marron : 117,91,70; /* #e5a840 */ --color-amarillo : 238,186,23; --color-gris : 80,80,80; --color-blanco : 255,255,255; --color-crema : 254,254,239; --color-morado : 142,62,137; /* ALTURAS */ /*----------------------------------------*/ --alto-barraFija : 100px; /*----------------------------------------*/ --alto-campo : 50px; --alto-boton : 50px; --alto-icono : 20px; /*----------------------------------------*/ /* BORDEADO */ /*----------------------------------------*/ --radio-frontera : 0px; /*----------------------------------------*/ /* FILA */ /*----------------------------------------*/ --fila-ancho : 920px; --fila-canalon : 15px; } /** HASTA CELULAR **/ @media ( max-width: 767px ) { :root { /* FUENTE TAMAÑO */ /*----------------------------------------*/ --texto-tamanoBase : 14px; --texto-tamanoMediano : 14px; --texto-tamanoGrande : 18px; --texto-tamanoGigante : 20px; --texto-tamanoExtra : 25px; /* TITULOS */ /*----------------------------------------*/ --megatitulo : 48px; --extratitulo : 35px; --supertitulo : 30px; --titulo : 24px; /* --subtitulo : 24px; --mintitulo : 18px; */ /*----------------------------------------*/ /* ALTURAS */ /*----------------------------------------*/ --alto-barraFija : 50px; } } /* ---------------------------------------------------- *\ * $ ETIQUETAS \* ---------------------------------------------------- */ /** reseto **/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } html, body { margin: 0px; padding: 0px; min-height: 100%; font-size: var(--texto-tamanoBase); line-height: var(--texto-interlineado); /* overflow-y: hidden; /* overlay; */ } body { overflow-x: hidden; } img { vertical-align: middle; } figure{ margin: 0px; padding: 0px; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin-top: 1em; margin-bottom: 1em; white-space: pre-line; } @media ( max-width: 767px ) { p { white-space: normal; } } /** aplicando fuente **/ body, input, textarea, select { font-family: var(--familia-textos); font-weight: var(--texto-grosorBase); outline: 0; } /* ---------------------------------------------------- *\ * $ CLASES UTILIDADES \* ---------------------------------------------------- */ /** VISIBILIDAD **/ .mostrar { display: block !important } .ocultar { display: none !important } @media ( max-width: 767px ) { .ocultar-mobile { display: none !important; } } /** SCROLL **/ .no-scroll { overflow-x: hidden !important; overflow-y: hidden !important; } /** TITULOS **/ .megatitulo , .supertitulo , .titulo , .subtitulo , .mintitulo { display: block; font-family: var(--familia-titulos); font-weight: var(--texto-grosorFuerte); line-height: 1.2em; } .megatitulo { font-size: var(--megatitulo); } .extratitulo { font-size: var(--extratitulo); } .supertitulo { font-size: var(--supertitulo); } .mediotitulo{ font-size: var(--mediotitulo); line-height:1.2; } .titulo { font-size: var(--titulo); } .subtitulo { font-size: var(--subtitulo); } /** TEXTOS **/ /* alineaciones */ .texto-centrado { text-align: center } .texto-derecha { text-align: right; } .texto-izquierda { text-align: left; } @media ( max-width: 767px ) { .texto-centrado-mobile { text-align: center; } .texto-izquierda-mobile { text-align: left; } } .texto-centrado.tags{ padding-bottom: 30px; } /* emfasis */ .texto-emfasis { font-style: italic; } .texto-emfasisFuerte { font-weight: var(--texto-grosorFuerte); } /* destacado */ .texto-destacado { font-weight: 400; font-size: var(--texto-tamanoGrande); line-height: var(--texto-tamanoGrande); } /* enlace */ .texto-enlace { position: relative; display: inline; line-height: var(--texto-interlineado); color: currentColor; text-decoration: none; font-weight: var(--texto-grosorFuerte); } .texto-enlace:hover { text-decoration: underline; } /** FILA **/ .fila { position : relative; z-index : 2; display : flex; flex-wrap : wrap; width : 100%; max-width : var(--fila-ancho); margin-left : auto; margin-right : auto; } .fila.canalon .columna { padding-left: var(--fila-canalon); padding-right: var(--fila-canalon); } @media ( max-width: 991px ) { .fila { padding-left: 15px; padding-right: 15px; } } .columna { position: relative; /* z-index: 10; */ /*flex-basis: 0;*/ min-width: 0; /* flex: 0 0 100%; */ -webkit-box-flex: 1; -webkit-flex: 1 1 0px; flex: 1 1 0px; } @media ( max-width: 767px ) { /* PARA CELULAR */ .columna.pequeno-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .columna.pequeno-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .columna.pequeno-3 { flex: 0 0 25.00000%; max-width: 25.00000%; } .columna.pequeno-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .columna.pequeno-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .columna.pequeno-6 { flex: 0 0 50.00000%; max-width: 50.00000%; } .columna.pequeno-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .columna.pequeno-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .columna.pequeno-9 { flex: 0 0 75.00000%; max-width: 75.00000%; } .columna.pequeno-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .columna.pequeno-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .columna.pequeno-12 { flex: 0 0 100.00000%; max-width: 100.00000%; } } @media ( min-width: 768px ) { /* PARA TABLET EN ADELANTE */ .columna.mediano-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .columna.mediano-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .columna.mediano-3 { flex: 0 0 25.00000%; max-width: 25.00000%; } .columna.mediano-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .columna.mediano-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .columna.mediano-6 { flex: 0 0 50.00000%; max-width: 50.00000%; } .columna.mediano-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .columna.mediano-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .columna.mediano-9 { flex: 0 0 75.00000%; max-width: 75.00000%; } .columna.mediano-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .columna.mediano-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .columna.mediano-12 { flex: 0 0 100.00000%; max-width: 100.00000%; } } @media ( min-width: 992px ) { /* PARA LAPTOP EN ADELANTE */ .columna.grande-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .columna.grande-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .columna.grande-3 { flex: 0 0 25.00000%; max-width: 25.00000%; } .columna.grande-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .columna.grande-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .columna.grande-6 { flex: 0 0 50.00000%; max-width: 50.00000%; } .columna.grande-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .columna.grande-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .columna.grande-9 { flex: 0 0 75.00000%; max-width: 75.00000%; } .columna.grande-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .columna.grande-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .columna.grande-12 { flex: 0 0 100.00000%; max-width: 100.00000%; } } @media ( min-width: 1367px ) { /* PARA PC EN ADELANTE */ .columna.extragrande-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .columna.extragrande-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .columna.extragrande-3 { flex: 0 0 25.00000%; max-width: 25.00000%; } .columna.extragrande-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .columna.extragrande-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .columna.extragrande-6 { flex: 0 0 50.00000%; max-width: 50.00000%; } .columna.extragrande-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .columna.extragrande-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .columna.extragrande-9 { flex: 0 0 75.00000%; max-width: 75.00000%; } .columna.extragrande-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .columna.extragrande-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .columna.extragrande-12 { flex: 0 0 100.00000%; max-width: 100.00000%; } } .columna.no-relleno-izquierda { padding-left : 0 !important; } .columna.no-relleno-derecha { padding-right: 0 !important; } .salto-linea { display: block; width: 100%; } .d-flex{ display:flex!important; } .mb-3{ margin-bottom:3em!important; } @media ( max-width: 767px ) { .d-flex{ display:block!important; overflow:hidden; } } /** CUADRICULA **/ .cuadricula { display: grid; grid-column-gap: 60px; grid-row-gap: 30px; width: 100%; padding: 0px; margin: 0px; list-style: none; } @media ( min-width: 768px ) { .cuadricula { grid-template-columns: repeat( auto-fit, minmax(1px, 1fr) ); } } @media ( max-width: 767px ) { .cuadricula { grid-template-columns: 100%; grid-row-gap: 15px; } } /* modificador --acciones */ .cuadricula--acciones { grid-template-columns: repeat( 2 , minmax(1px, 1fr) ); grid-gap: var(--fila-canalon); } .cuadricula--videos { grid-template-columns: repeat( 3 , minmax(1px, 1fr) ); grid-gap: var(--fila-canalon); } @media ( max-width: 767px ) { .cuadricula--videos, .cuadricula--acciones { grid-template-columns: 100%; } } /* modificador --logos */ .cuadricula--logos { grid-template-columns: repeat( auto-fit , minmax(1px, 1fr) ); grid-gap: var(--fila-canalon); } /** BOTONES **/ .boton { position: relative; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; min-width: calc( var(--alto-boton) * 4 ) ; height: var(--alto-boton); padding-left: 1.5em; padding-right: 1.5em; /* margin-top: 1em; margin-bottom: 1em; */ text-align: center; text-decoration: none; text-transform: uppercase; font-size: var(--texto-tamanoPequeno); font-weight: var(--texto-grosorFuerte); color: black; background-color: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: all .2s ease-in-out; } /* modificadores por tipo de color */ .boton--transparente { color: white; background-color: rgba(255,255,255,.2); border-color: rgba(255,255,255,.25); } .boton--transparente:hover { color: black; background-color: rgba(255,255,255,1); } .boton--verde { color: white; border-color: transparent; background: rgba(128,177,74,1);/* Old Browsers */ background: -moz-linear-gradient(top, rgba(128,177,74,1) 0%, rgba(82,150,28,1) 100%); /* FF3.6+ */ background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(128,177,74,1)), color-stop(100%, rgba(82,150,28,1)));/* Chrome, Safari4+ */ background: -webkit-linear-gradient(top, rgba(128,177,74,1) 0%, rgba(82,150,28,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(128,177,74,1) 0%, rgba(82,150,28,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(128,177,74,1) 0%, rgba(82,150,28,1) 100%); /* IE 10+ */ background: linear-gradient(to bottom, rgba(128,177,74,1) 0%, rgba(82,150,28,1) 100%);/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80b14a', endColorstr='#52961c', GradientType=0 );/* IE6-9 */ } /** ICONOS **/ .icono { position: relative; display: inline-block; width: 1em; height: 1em; font-size: var(--alto-icono); vertical-align: middle; } /* modificadores */ .icono--pequeno { font-size: calc( var(--alto-icono) / 2 ); } /** FONDO **/ .fondo { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: none; background-size: cover; background-position: center; background-repeat: repeat; } /** LOGOS **/ .logo { position: relative; display: inline-block; vertical-align: middle; background-position: center; background-size: contain; background-repeat: no-repeat; background-color: transparent; } .logo + .logo { margin-left: 30px; } @media ( max-width: 767px ) { .logo + .logo { margin-left: 0; margin-top: 30px; } } .logo--SNMPE { font-size: 50px; /* medida base escalado en ancho y alto */ width: 4em; /* 170px */ height: 1em ; /* 50px */ background-image: url(../media/imagenes/logo-SNMPE.png); } .logo--MDT { font-size: 50px; /* medida base escalado en ancho y alto */ width: 3.4em; /* 170px */ height: 1em ; /* 50px */ background-image: url(../media/imagenes/logo-MDT.png); } .logo--SNES--marron { font-size: 145px; /* medida base escalado en ancho y alto */ width: 2em; /* 120px */ height: 1em ; /* 100px */ /*background-image: url(../media/imagenes/logo-SNES-marron.png);*/ background-image: url(../media/imagenes/logo-sinosescuchamos-big.png); } .logo--SNES { font-size: 145px; /* medida base escalado en ancho y alto */ width: 2.2em; /* 120px */ height: 1em ; /* 100px */ /*background-image: url(../media/imagenes/logo-SNES.png);*/ background-image: url(../media/imagenes/logo-sinosescuchamos-small.png); } #CASASABIERTAS .logo--SNES, #MICROPROGRAMAS .logo--SNES{ font-size: 115px; } .logo--negativo { filter: brightness(0) invert(1); } .logosnmp{ width: 150px; margin: 0 auto 0 0; } @media ( max-width: 767px ) { .logosnmp{ width: 90px; margin: 0 auto 0 0!important; } } /** FORMULARIO **/ .formulario { } .control { } /* modificador --buscador */ .control--buscador { position: relative } .control--buscador .control__caja .campo { padding-left: 20px; padding-right: calc( var(--alto-icono) * 4 + 10px ); } .control--buscador .control__boton { position: absolute; right: 3px; bottom: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; } .control--buscador .control__boton .boton { width: calc( var(--alto-icono) * 4 ); height: calc( var(--alto-boton) - 6px ); min-width: auto; margin: 0; outline: 0; /* color: currentColor; */ border-radius: 1000px; border-width: 0px; } /* modificador --buscadorConFiltro */ .control--buscadorConFiltro { position: relative } @media ( max-width: 767px ) { .control--buscadorConFiltro > * + * { margin-top: 10px; } } .control--buscadorConFiltro .campo { font-size: var(--texto-tamanoPequeno); } .control--buscadorConFiltro .control__caja .campo { padding-left: calc( var(--alto-icono) + 20px ); /* padding-left: 20px; */ } .control--buscadorConFiltro .control__boton { position: absolute; top: 0px; right: 3px; /* left: 3px; */ height: var(--alto-campo); display: flex; flex-direction: column; justify-content: center; margin-top: 0; /* pointer-events: none; */ } /* @media ( max-width: 767px ) { .control--buscadorConFiltro .control__boton { position: static; background-color: rgba(var(--color-verde),1); color: white; } } */ .control--buscadorConFiltro .control__boton .boton { width: calc(var(--alto-icono)*4); /* width: var(--alto-icono); */ height: calc( var(--alto-boton) - 6px ); min-width: auto; margin: 0; outline: 0; color: rgba(var(--color-blanco),1); border-radius: 1000px; border-width: 0px; } .control--buscadorConFiltro .control__boton .icono { font-weight: 600; font-size: 24px; } .control--buscadorConFiltro .control__filtro { position: absolute; right: 0; top: 0; width: 200px; } @media ( max-width: 767px ) { .control--buscadorConFiltro .control__filtro { position: relative; width: 100%; } } .control--buscadorConFiltro .control__filtro .campo { appearance: none; -webkit-appearance: none; -moz-appearance: none; } @media ( min-width: 768px ) { .control--buscadorConFiltro .control__filtro .campo { padding: 0 10px; -webkit-border-radius: 1000px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius: 1000px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-radius: 1000px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } } .control--buscadorConFiltro .control__filtro .icono { position: absolute; top: 0px; right: 15px; height: var(--alto-campo); display: flex; flex-direction: column; justify-content: center; pointer-events: none; } .campo { width: 100%; height: var(--alto-boton); color: rgba(var(--color-marron),1); background-color: #ffffff; font-size: var(--texto-tamanoBase); border-style: solid; border-color: rgba(var(--color-marron),1); border-width: 1px; border-radius: 1000px; padding-left: 20px; padding-right: 20px; } /* modificador --marron */ .campo--marron { background-color: rgba(var(--color-marron),1); color: white; } /* PADDINGS - MARGINS */ .pt3{ padding-top: 3%;} .pt5{ padding-top: 5%;} .pt10{ padding-top: 10%;} .pt15{ padding-top: 15%;} .pt200{padding-top: 200px;z-index: 9;} .pb5{padding-bottom: 5%;} .p5{padding: 5%;} .p10{padding: 10%;} .m50{margin: 50px 0;} .m30{margin: 30px 0;} /** HACER SCROLL **/ .hacerScroll { font-size: 11px; line-height: 1em; text-align: center; opacity: .8; cursor: pointer; padding-left: 30px; } .hacerScroll .hacerScroll__mouse { position: relative; display: block; vertical-align: middle; color: #fff; box-sizing: border-box; width: 10px; height: 10px; border-width: 1px 1px 0 0; border-style: solid; margin: 0 auto; transform: rotate(135deg); top: 55px; } .hacerScroll .hacerScroll__mouse::after, .hacerScroll .hacerScroll__mouse::before { content: ""; box-sizing: border-box; } .hacerScroll .hacerScroll__mouse::before { right: 5px; top: 4px; position: absolute; height: 1px; box-shadow: inset 0 0 0 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 53px; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media ( max-width: 767px ) { .hacerScroll{ padding: 64px 0 0; width: 115px; text-align: center; } #QUIENESSOMOS .hacerScroll, #BIENVENIDA .hacerScroll, #CASASABIERTAS .hacerScroll, #MICROPROGRAMAS .hacerScroll{ width: 100%; padding: 40px 0 0; } .hacerScroll .hacerScroll__mouse::before { height: 1px; /* background: url(../media/imagenes/flecha.svg) no-repeat center bottom; */ } #BIENVENIDA .hacerScroll{ padding: 20px 0 0; } } /* ---------------------------------------------------- *\ * $ CLASES ESTRUCTURA \* ---------------------------------------------------- */ /** BARRA **/ .barraFija { position: fixed; z-index: 1000; left: 0; top: 0; right: 0; height: var(--alto-barraFija); background-color: rgba(var(--color-verde),1); padding: 0 15px; } .barraFija .barra__envoltura { position: relative; z-index: 2; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; max-width: var(--fila-ancho); height: 100%; margin-left: auto; margin-right: auto; } .barraFija .barra__envoltura > .logo { margin-right: auto; } @media ( max-width: 767px ) { .barraFija .barra__envoltura > .logo { font-size: 30px; } } .barraFija .barra__envoltura > .socialListado { margin-right: 30px; margin-left: 30px; } .barraFija::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 0; /*background-image: url(../media/imagenes/imagotipo.svg);*/ background-position: center; background-repeat: no-repeat; background-size: 1972px; filter: brightness(0) invert(1); opacity: .03; } /** NAVEGACION **/ .navegacionPrincipal { } .navegacionPrincipal .navegacion__desplegable { position: fixed; ; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; display: block; color: #5d5a4e; background-color: rgba(var(--color-verdeOscuro),0); /* visibility: hidden; */ pointer-events: none; transition: background .3s ease-in-out; } .navegacionPrincipal .navegacion__envoltura { position: fixed; z-index: 2; top: 0; bottom: 0; right: -300px; overflow-y: auto; width: 300px; background-color: #d9d9d9; padding: 100px 30px 40px; transition: right .3s ease-in-out; } @media ( max-width: 767px ) { .navegacionPrincipal .navegacion__envoltura { width: 100%; right: -100%; } } .navegacionPrincipal .navegacion__envoltura .tope { position: absolute; z-index: 3; top: 0; right: 0; padding-top: 20px; padding-right: 20px; width: 300px; height: 60px; background-color: #d9d9d9; text-align: right; } .navegacionPrincipal .navegacion__velo { position: fixed; z-index: 1; top: 100%; bottom: 0; right: 0; left: 0; /* background-color: rgba(var(--color-verdeOscuro),.95);*/ /* opacity: 0;*/ transition: opacity .3s ease-in-out; } .navegacionPrincipal .navegacion__velo::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 0; /*background-image: url(../media/imagenes/imagotipo.svg);*/ background-position: center; background-repeat: no-repeat; background-size: 1972px; filter: brightness(0) invert(1); opacity: .015; } /* desplegable activo */ .navegacionPrincipal .navegacion__desplegable.activado { /* visibility: visible; */ background-color: rgba(var(--color-verdeOscuro),.95); pointer-events: initial; } .navegacionPrincipal .navegacion__desplegable.activado .navegacion__velo { top: 0; /* opacity: 1; */ } .navegacionPrincipal .navegacion__desplegable.activado .navegacion__envoltura { right: 0; } /** SECCION **/ .seccion { position: relative; z-index: 2; padding-top: 30px; padding-bottom: 50px; } /* ---------------------------------------------------- *\ * $ CLASES COMPONENTES \* ---------------------------------------------------- */ /** FILA **/ .fila .subtitulo{ color: rgba(var(--color-marron), 1); } /** ACCIONES **/ .accionEntrada { position: relative; z-index: 1; display: block; width: 100%; height: 450PX; background-color: white; transition: all .3s ease-in-out; } .accionEntrada:hover { /* z-index: 2; transform: scale(1.1); -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.3); box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.3); */ } @media ( max-width: 991px ) { .accionEntrada { height: auto;; } } .accionEntrada .accion__imagen { position: relative; z-index: 1; width: 100%; height: 100%; background-color: transparent; background-image: none; background-position: center; background-repeat: no-repeat; } @media ( max-width: 767px ) { .accionEntrada .accion__imagen { height: 180px; } } @media ( max-width: 991px ) { .accionEntrada .accion__imagen { height: 250px; } } .accionEntrada .accion__imagen img { width: 100%; height: 100%; object-fit: cover; } .accionEntrada .accion__imagen::after { content: ''; position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; display: block; /* background: rgba(255,255,255,1);Old Browsers */ /* background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%); FF3.6+ */ /* background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(72,66,38,1)));Chrome, Safari4+ */ /* background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%); Chrome10+,Safari5.1+ */ /* background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%); Opera 11.10+ */ /* background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%); IE 10+ */ /* background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%);W3C */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#484226', GradientType=0 );IE6-9 */ /* mix-blend-mode: multiply; */ } .accionEntrada .accion__info { position: absolute; z-index: 2; right: 0; bottom: 0; width: 100%; max-width: 360px; padding: 30px; color: white; background-color: transparent; transition: all .2s ease-in-out; min-height: 222px; } @media ( min-width: 992px ) { .accionEntrada:hover .accion__info { padding-bottom: 70px; } } @media ( max-width: 991px ) { .accionEntrada .accion__info { position: relative; padding: 20px; min-height: 250px; width: 100%; max-width: initial; } } @media ( max-width: 767px ) { .accionEntrada .accion__info { min-height: initial; } } .accionEntrada .accion__info::before { content: ''; position: absolute; top: 0; right: 100%; border-style: solid; border-color: transparent; border-width: 15px; } @media ( min-width: 992px ) { .accionEntrada .accion__info::before { border-left-color: transparent !important; border-bottom-color: transparent !important; } } @media ( max-width: 991px ) { .accionEntrada .accion__info::before { left: 0; right: auto; bottom: 100%; top: auto; border-right-color: transparent !important; border-top-color: transparent !important; } } .accionEntrada .accion__titulo { font-size: var(--titulo); line-height: 1em; } .accionEntrada .accion__extracto { font-size: var(--texto-tamanoPequeno); } .accionEntrada .accion__enlace { } /* color accion verde */ .accionEntrada.verde .accion__imagen { background-color: rgba(var(--color-verde),1); } .accionEntrada.verde .accion__info { background-color: rgba(var(--color-verde),.9); } .accionEntrada.verde .accion__info::before { border-color : rgba(var(--color-verde),.9); } /* color accion naranja */ .accionEntrada.naranja .accion__imagen { background-color: rgba(var(--color-naranja),1); } .accionEntrada.naranja .accion__info { background-color: rgba(var(--color-naranja),.9); } .accionEntrada.naranja .accion__info::before { border-color : rgba(var(--color-naranja),.9); } /* color accion marron */ .accionEntrada.marron .accion__imagen { background-color: rgba(var(--color-marron),1); } .accionEntrada.marron .accion__info { background-color: rgba(var(--color-marron),.9); } .accionEntrada.marron .accion__info::before { border-color : rgba(var(--color-marron),.9); } /** SOCIAL **/ .socialListado { display: flex; align-items: center; /* padding-top: 10px; padding-bottom: 10px; */ /*justify-content: center;*/ font-size: 1.15rem; } /* resetear */ ul.socialListado { margin-top: 0; margin-bottom: 0px; list-style-type: none; padding-left: 0px; } ul.socialListado li { /*flex-grow: 1;*/ } ul.socialListado li + li, .socialListado .social__enlace + .social__enlace { margin-left: .5em; } /* elementos */ .socialListado .social__enlace { position: relative; display: flex; justify-content: center; align-items: center; width: 1em; height: 1em; padding: .8em; font-size: var(--alto-icono); text-decoration: none; color: currentColor; border-width: 2px; border-style: solid; border-color: currentColor; border-radius: var(--alto-icono); transition: all .2s ease-in-out; } .socialListado .social__enlace:hover { background-color: white; color: rgba(var(--color-verde),1); } .navegacion__envoltura .socialListado .social__enlace .icono--linkedin:before, .navegacion__envoltura .socialListado .social__enlace .icono--tiktok:before{ filter: invert(33%) sepia(4%) saturate(1238%) hue-rotate(11deg) brightness(98%) contrast(86%); } .navegacion__envoltura .socialListado .social__enlace:hover .icono--linkedin:before, .navegacion__envoltura .socialListado .social__enlace:hover .icono--tiktok:before{ filter:invert(1); } /* modificador --marron */ .socialListado--marron .social__enlace { border-color: rgba(var(--color-marron),1); } .socialListado--marron .social__enlace:hover { background-color: rgba(var(--color-marron),1); color: white; } footer .socialListado .social__enlace .icono--linkedin:before, header .socialListado .social__enlace .icono--linkedin:before, footer .socialListado .social__enlace .icono--tiktok:before, header .socialListado .social__enlace .icono--tiktok:before{ filter:invert(1); } footer .socialListado .social__enlace:hover .icono--linkedin:before, header .socialListado .social__enlace:hover .icono--linkedin:before, footer .socialListado .social__enlace:hover .icono--tiktok:before, header .socialListado .social__enlace:hover .icono--tiktok:before{ filter: invert(36%) sepia(63%) saturate(508%) hue-rotate(99deg) brightness(89%) contrast(92%); } /** MENU **/ .menuPrincipal { margin: 40px -30px; } .menuPrincipal .menu__listado { padding: 0px; margin: 0; list-style: none; } .menuPrincipal .menu__enlace { display: block; padding: 1em 30px; text-decoration: none; font-size: var(--texto-tamanoPequeno); font-weight: var(--texto-grosorFuerte); color: currentColor; border-top: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; margin-top: -1px; background: transparent; transition: background .1s ease-in-out; } .menuPrincipal .menu__enlace:hover, .menuPrincipal .menu__enlace.activado { color: white; background: rgba(var(--color-marron),1);/* Old Browsers */ background: -moz-linear-gradient(left, rgba(var(--color-marron),1) 0%, rgba(var(--color-marron),1) 50%, rgba(var(--color-marron),0.3) 100%); /* FF3.6+ */ background: -webkit-gradient(left top, right top, color-stop(0%, rgba(var(--color-marron),1)), color-stop(50%, rgba(var(--color-marron),1)), color-stop(100%, rgba(var(--color-marron),0.3)));/* Chrome, Safari4+ */ background: -webkit-linear-gradient(left, rgba(var(--color-marron),1) 0%, rgba(var(--color-marron),1) 50%, rgba(var(--color-marron),0.3) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(var(--color-marron),1) 0%, rgba(var(--color-marron),1) 50%, rgba(var(--color-marron),0.3) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(var(--color-marron),1) 0%, rgba(var(--color-marron),1) 50%, rgba(var(--color-marron),0.3) 100%); /* IE 10+ */ background: linear-gradient(to right, rgba(var(--color-marron),1) 0%, rgba(var(--color-marron),1) 50%, rgba(var(--color-marron),0.3) 100%);/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#755c46', endColorstr='#755c46', GradientType=1 );/* IE6-9 */ } .menuMapa { } .menuMapa .menu__titular { margin-top: 1em; margin-bottom: 1em; } .menuMapa .menu__listado { display: grid; grid-template-columns: repeat( 2, minmax(1px, 1fr) ); color: #b4efd9; padding-left: 0; list-style: none; } @media ( max-width: 767px ) { .menuMapa .menu__listado { grid-template-columns: 100%; } } .menuMapa .menu__enlace { position: relative; padding-left: 1em; color: currentColor; text-decoration: none; } .menuMapa .menu__enlace:hover { text-decoration: underline; } .menuMapa .menu__enlace::before { content: '·'; position: absolute; left: 0; font-weight: bold; } /** PALANCA **/ .palancaDesplegable { display: inline-flex; align-items: center; justify-content: center; /* width: 1em; */ height: 1em; font-size: 25px; font-weight: 600; cursor: pointer; } @media ( max-width: 1366px ) { /* .palancaDesplegable { font-size: 50px; } */ } .palancaDesplegable .palanca__txt { font-size: var(--texto-tamanoPequeno); margin-right: 5px; } .palancaDesplegable .palanca__ico { display: flex; flex-direction: column; justify-content: center; font-size: 1.3em; /* lo utilizo como grosor */ /* width : 80%; /* lo utilico como tamaño */ min-width: 20px; } /* estado normal */ .palancaDesplegable .palanca__ico > span { display: block; width: 100%; height: 0.055em; background: #fff; margin: 0.05em 0; border-radius: 1.0em; position: relative; top: 0em; transform-origin: center; background-color: currentColor; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .palancaDesplegable .palanca__ico > span:first-child { width: 100%; } .palancaDesplegable .palanca__ico > span:nth-child(2) { width: 100%; } .palancaDesplegable .palanca__ico > span:last-child { width: 100%; } /* estado cerrar */ .palancaDesplegable.cerrar .palanca__ico { } .palancaDesplegable.cerrar .palanca__ico > span:first-child { width: 100%; transform: rotate(45deg); top: 0.155em; } .palancaDesplegable.cerrar .palanca__ico > span:nth-child(2) { width: 100%; transform: scale(0); } .palancaDesplegable.cerrar .palanca__ico > span:last-child { width: 100%; transform: rotate(-45deg); top: -0.155em; } /* ---------------------------------------------------- *\ * $ IDENTIFICADORES > fijos \* ---------------------------------------------------- */ /** CABECERA **/ #CABECERA { position: relative; height: var(--alto-barraFija); color: white; } /** PRINCIPAL **/ #PRINCIPAL { position: relative; background-color: rgba(232,226,216,1); } /*#PRINCIPAL::after {*/ /* content: '';*/ /* position: absolute; z-index: 1;*/ /* top: 0; bottom: 0; left: 0; right: 0;*/ /* background-image: url(../media/imagenes/imagotipo.svg);*/ /* background-repeat: repeat;*/ /* background-position: center 280px; */ /* background-size: 2200px; */ /* opacity: .08;*/ /*}*/ #PRINCIPAL.bginfografia::after{ background-repeat: no-repeat; background-position: center 480px; /* top; */ } #PRINCIPAL .contenido p{ font-weight: 400; font-size: 17px; } #PRINCIPAL.bginfografia{ background-image: url(../images/fondo-infografia.png); background-position: center top; background-repeat: no-repeat; } #PRINCIPAL.bginfografia .titulo{ color: rgba( var(--color-marron), 1); } #PRINCIPAL.bginfografia .titulo span{ font-size: 30px; } #PRINCIPAL.bginfografia .titulo p{ margin: 0px; } #PRINCIPAL.bginfografia .control--buscador{ width: 100%; } #PRINCIPAL.bginfografia .tags b{ color:rgba( var(--color-marron), 1); font-size: 14px; } @media ( max-width: 767px ) { #PRINCIPAL.bginfografia .titulo span{ font-size: 20px; } #PRINCIPAL.bginfografia .titulo p{ font-size: 15px; } } /** PIEPAGINA **/ #PIEPAGINA { padding-top: 50px; padding-bottom: 100px; color: white; background-image: url(../media/imagenes/fondo-piepagina.jpg); background-position: bottom center; background-repeat: repeat-x; /* background-size: contain; */ background-blend-mode: multiply; background-color: rgba(var(--color-verde),1); font-size: var(--texto-tamanoPequeno); } #PIEPAGINA .logo--SNES { font-size: 70px; } @media ( max-width: 767px ) { #PIEPAGINA .socialListado{ margin: 20px 0 10px; } } /* ---------------------------------------------------- *\ * $ IDENTIFICADORES > secciones \* ---------------------------------------------------- */ /** BIENVENIDA **/ #SIGAMOSCONVERSANDO, #CASASABIERTAS, #PARADEROMINERO, #QUIENESSOMOS, #MICROPROGRAMAS, #BIENVENIDA { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 665px; /* margin-bottom: -80px; */ /* padding-top: 6%; 160px; */ padding-bottom: 7%; /* 60px; */ background-position: center; background-repeat: no-repeat; background-size: cover; color: white; } #CASASABIERTAS, #PARADEROMINERO, #QUIENESSOMOS, #MICROPROGRAMAS{ /* min-height: 600px; */ } #BIENVENIDA::after{ content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; display: block; background: rgba(255,255,255,1);/* Old Browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%); /* FF3.6+ */ background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(72,66,38,1)));/* Chrome, Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%); /* IE 10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(72,66,38,1) 100%);/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#484226', GradientType=0 );/* IE6-9 */ mix-blend-mode: multiply; } #CASASABIERTAS .formulario, #PARADEROMINERO .formulario, #MICROPROGRAMAS .formulario, #BIENVENIDA .formulario { margin: 40px auto; max-width: 355px; } @media ( max-width: 991px ) { #CASASABIERTAS, #PARADEROMINERO, #QUIENESSOMOS, #MICROPROGRAMAS, #BIENVENIDA { padding-top: 14%; padding-bottom: 10%; padding-left: 50px; padding-right: 50px; } #CASASABIERTAS .logo--SNES, #PARADEROMINERO .logo--SNES, #MICROPROGRAMAS .logo--SNES, #BIENVENIDA .logo--SNES { margin-top: 20px; font-size: 110px; } #CASASABIERTAS .formulario, #PARADEROMINERO .formulario, #MICROPROGRAMAS .formulario, #BIENVENIDA .formulario { margin-top: 50px; margin-bottom: 30px; } #PARADEROMINERO .logo-paradero{ width: 100%; } } @media ( max-width: 767px ) { #CASASABIERTAS, #PARADEROMINERO, #QUIENESSOMOS, #MICROPROGRAMAS, #BIENVENIDA { padding-left: 0px; padding-right: 0px; min-height: 100vh; padding-bottom: 40%; } #CASASABIERTAS p, #PARADEROMINERO p, #QUIENESSOMOS p, #MICROPROGRAMAS p, #BIENVENIDA p{ font-size: 3.9vw!important; } } /* MICROPROGRAMAS */ #MAPA-MICROPROGRAMA .bg-amarillo{ position: relative; } #MAPA-MICROPROGRAMA .bg-amarillo::before{ content: ""; display: block; position: absolute; left: 0px; top: 0px; background-color: rgba(var(--color-amarillo),1); width: 45%; height: 67%; margin-top: 9%; max-height: 550px; } #MAPA-MICROPROGRAMA .bg-amarillo::after{ content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; /*background-image: url(../media/imagenes/imagotipo.svg);*/ background-repeat: repeat; background-position: center 280px; background-size: 790px; opacity: .4; width: 45%; height: 67%; margin-top: 9%; } .intro{ display: block; width: 44%; float: right; position: relative; color: rgba(var(--color-marron), 1); z-index: 1; } #MAPA-MICROPROGRAMA .intro{ margin-left: -30px; } #MAPA-MICROPROGRAMA .intro p{ color: rgba(var(--color-gris), 1); } .intro h2{ font-size: var(--supertitulo); line-height: var(--supertitulo); } .intro h3{ font-size: var(--texto-tamanoExtra); line-height: var(--texto-tamanoExtra); } @media ( max-width: 767px ) { #MAPA-MICROPROGRAMA .bg-amarillo::after, #MAPA-MICROPROGRAMA .bg-amarillo::before{ max-height: 360px; margin-top:9%; width: 64%; } #MAPA-MICROPROGRAMA .intro{ float: none; width: 100%; margin: 0px; height: 858px; } } #MAPA-MICROPROGRAMA .mapa-info{ float: left; width: 57%; position: relative; } .mapa-info .mapa{ background: url(../media/imagenes/mapa.png) no-repeat top left; width: 540px; height: 782px; } .mapa-info .info{ width: 200px; position: absolute; bottom: 150px; left: 20px; color: rgba(var(--color-blanco),1); } .mapa-info span{ display: inline-block; padding: 5px; background-color: rgba(var(--color-verde),1); color: rgba(var(--color-blanco),1); margin: 2px 0; } @media ( max-width: 767px ) { #MAPA-MICROPROGRAMA .mapa-info{ float: none; width: 100%; } .mapa-info .info{ bottom: 10px; } .mapa-info .mapa{ width: 83%; height: 412px; background-size: cover; margin-left: 55px; max-width: 285px; } } @media ( max-width: 320px ) { .mapa-info .info{ width: 168px; } .mapa-info .mapa{ width: 98%; margin-left: 20px; } } #MAPA-MICROPROGRAMA .balloon{ position: relative; } #MAPA-MICROPROGRAMA .balloon div{ position: absolute; } .intro .balloon p{ color: rgba(var(--color-blanco),1)!important; font-size: var(--texto-tamanoPequeno ); line-height: var(--texto-interlineado); } .balloon .b1{ background: url(../media/imagenes/b1.png) no-repeat; width: 274px; height: 321px; left: -40px; } .b1 p{ padding: 90px 30px 10px 80px; } .balloon .b2{ background: url(../media/imagenes/b2.png) no-repeat; width: 242px; height: 237px; right: -35px; top: 150px; } .b2 p{ padding: 60px 10px 0px 80px; } .balloon .b3{ background: url(../media/imagenes/b3.png) no-repeat; width: 242px; height: 277px; left: 0px; top: 313px; } .b3 p{ padding: 80px 20px 10px 80px; } @media ( max-width: 767px ) { .balloon .b1{ left: 0; } .balloon .b2{ right: 0; top: 250px; } .balloon .b3{ top: 413px; } } .encabezado{ width: 100%; } #MAPA-MICROPROGRAMA .encabezado h2{ color: rgba(var(--color-marron), 1); line-height: var(--supertitulo); } #SIGAMOSCONVERSANDO .encabezado::before{ content:""; display:block; width:68px; height:85px; background:url('../media/imagenes/nube-texto.png') no-repeat; position:absolute; top:-22px; left:333px; } @media ( max-width: 767px ) { #SIGAMOSCONVERSANDO .encabezado::before{ width: 43px; height: 43px; top: -15px; left: 218px; background-size: contain; } } .video{ width: 100%; height: 166px; overflow: hidden; position: relative; } .video img{ margin-top:-28px; } .video a span{ position: absolute; top: 100%; left: 0; width: 100%; height: 100%; display: flex; background-color: rgba(3,3,3,.7); color: #fff; padding:10px; flex-direction: column; text-align:center; align-items: center; justify-content: center; -webkit-transition: all .2s ease-in-out; -o-transition : all .2s ease-in-out; transition : all .2s ease-in-out; } .video span u{ padding-top:10px; } .video a:hover span{ top: 0px; } @media ( max-width: 767px ) { .video{ height:193px; } .video img{ margin-top:-33px; } .video a span{ top:80%; height: 20%; } } .fondo-color{ padding: 50px 0 10px 0; position: relative; } .fondo-color .intro{ height: auto!important; margin-left: 0px!important; } .fondo-color::before{ content: ""; display: block; position: absolute; top:0; left: 0; width: 50%; height: 100%; } .fondo-color.verde::before{ background-color: rgba(var(--color-verde),1); } .fondo-color.morado::before{ background-color: rgba(var(--color-morado),1); } .fondo-color h2, .fondo-color h3{ color: rgba(var(--color-blanco),1)!important; } @media ( max-width: 767px ) { .fondo-color::before{ width: 70%; } } .youtube{ position: absolute; right: 0px; bottom: 0px; text-align: right; } @media ( max-width: 767px ) { .youtube img{ width: 60%; } } #QUIENES-SOMOS{ } #QUIENES-SOMOS .foto::after{ content: ""; display: block; width: 29%; height: 10px; background-color: rgba( var(--color-amarillo), 1); float: right; z-index: 22; position: relative; margin-right: 35px; } #QUIENES-SOMOS .foto img{ width: 100%; } #QUIENES-SOMOS .flotante{ color: rgba(var(--color-blanco),1); padding: 50px 35px 96px; width: 460px; margin-left: -65px; max-height: 380px; } #QUIENES-SOMOS .flotante.marron{ background-color: rgba(var(--color-marron), 1); margin-top: 220px; } #QUIENES-SOMOS .flotante.marron a{ color:rgba(var(--color-blanco),1); } #QUIENES-SOMOS .flotante.morado{ background-color: rgba(var(--color-morado), 1); margin-top: -139px; } #QUIENES-SOMOS .btns{ margin-top: -71px; } #QUIENES-SOMOS .btn{ margin-right: 5px; } @media ( max-width: 767px ) { #QUIENES-SOMOS .flotante.marron{ margin-top: 10px; } #QUIENES-SOMOS .flotante{ width: 100%; margin-left: 0; height: auto; } #QUIENES-SOMOS .btns{ margin-top: 10px; } } #QUIENES-SOMOS .datos{ padding: 50px 0; } #QUIENES-SOMOS .datos em, #QUIENES-SOMOS .datos b{ display: block; } #QUIENES-SOMOS .datos em{ color: rgba( var(--color-marron), 1); } #QUIENES-SOMOS .datos p{ color: rgba( var(--color-marron), 1); font-weight: 400; margin: 5px; } #QUIENES-SOMOS .logo--SNES--marron { margin-top: 10px; margin-left: 93px; margin-bottom: 15px; font-size: 245px; } @media ( max-width: 767px ) { #QUIENES-SOMOS .logo--SNES--marron { margin-left: 0; font-size: 145px; } } #SIGAMOSCONVERSANDO{ background-position:right!important; padding: 0; height: 80vh; min-height: auto; background:#007745 url('../media/imagenes/foto-relleno2.jpg') no-repeat; } #SIGAMOSCONVERSANDO .content-center{ width:100%; height:100%; background-image: url('../media/imagenes/bg-verde2.png'); background-size: cover; background-position:right; } #SIGAMOSCONVERSANDO .content-center .seccion{ display: flex; flex-direction: column; justify-content: center; min-height: 665px; min-height: 80vh; padding: 0; } #SIGAMOSCONVERSANDO .btn{ background-color: #ffb935; padding:5px 10px; color:#fff; display:inline-block; border-radius:3px; margin-top:15px; text-decoration:none; } #SIGAMOSCONVERSANDO.logo-float::before{ content:""; display:block; width:200px; height:70px; position:absolute; top:30px; right:30px; background:url(../media/imagenes/logo-white.png) no-repeat; background-size:cover; } .contador{ position: absolute; bottom: 20px; right: 30px; display: flex; background: rgba(0,0,0,.5); padding: 15px; flex-direction: column; font-size: 12px; font-weight: 500; } #numero{ display:flex; justify-content: center; } #numero span{ font-size: 46px; padding: 19px 3px; background: #ffb935; border-radius: 5px; margin: 2px; } @media ( max-width: 767px ) { #SIGAMOSCONVERSANDO{ height: 94vh; justify-content: flex-start; background:#007745 url('../media/imagenes/foto-mobile.jpg') no-repeat; background-position: bottom!important; background-size: contain!important; } #SIGAMOSCONVERSANDO .content-center{ background-image: url(../media/imagenes/fondo-mobile.png); background-size: cover; background-position: bottom; } #SIGAMOSCONVERSANDO .content-center .seccion h1{ font-size:28px; } #SIGAMOSCONVERSANDO .content-center .seccion{ min-height:55vh; } #SIGAMOSCONVERSANDO .content-center .seccion p{ font-size:14px; } #SIGAMOSCONVERSANDO.logo-float::before{ width: 136px; height: 48px; bottom: 30px; top:inherit; } .contador{ left: 10px; right: auto; font-size: 9px; } #numero span{ font-size: 30px; padding: 14px 3px; } } #FORM-SIGAMOS-CONVERSANDO{ background-color:#fefbe1; height: 100vh; display: flex; align-items: center; padding-top: 0; min-height:800px; } #FORM-SIGAMOS-CONVERSANDO p{ color:#0a8c4a!important; text-align:center; } #FORM-SIGAMOS-CONVERSANDO .frm b{ font-size:17px!important; width:45%; color:#0a8c4a; } #FORM-SIGAMOS-CONVERSANDO .frm label{ color:#0a8c4a!important; align-items: center; } #FORM-SIGAMOS-CONVERSANDO .btn{ background-color: #ffb935; display: inline-block; width: auto; height:44px; margin: 0 auto; padding: 5px 20px; text-decoration:none; line-height:34px; } #FORM-SIGAMOS-CONVERSANDO ::-webkit-input-placeholder{ color:#0a8c4a; } .js-terminos{ font-weight: 500; text-decoration: none; color: inherit; } .overlayerTerminos, .terminos{ display:none; } .show-terminos .terminos{ display:block; width: 560px; background: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; padding: 30px 50px; border-radius: 10px; color: #007945; } .show-terminos .overlayerTerminos{ display:block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #007945; z-index: 99; opacity: .5; } .close-terminos{ position: absolute; right: 20px; top: 20px; text-decoration: none; color: #000; } @media ( max-width: 767px ) { .show-terminos .terminos{ width: 100%; } } #FORM-SIGAMOS-CONVERSANDO .column-fotos.left{ position: absolute; top: 0px; left: 0px; display: flex; flex-direction: column; height: 100%; } #FORM-SIGAMOS-CONVERSANDO .column-fotos.left img{ margin-bottom:30px; width: 203px; box-shadow: 0px 10px 16px 4px #ccc; border-radius: 22px } #FORM-SIGAMOS-CONVERSANDO .column-fotos.left img:nth-child(1){ margin-left: 150px; } #FORM-SIGAMOS-CONVERSANDO .column-fotos.left img:nth-child(2){ margin-left: -56px; } #FORM-SIGAMOS-CONVERSANDO .column-fotos.left img:nth-child(3){ margin-left: 120px; } #FORM-SIGAMOS-CONVERSANDO .column-fotos.right{ position: absolute; top: 0px; right: 0px; display: flex; flex-direction: column; height: 100%; overflow:hidden; } #FORM-SIGAMOS-CONVERSANDO .column-fotos.right img{ margin-bottom:40px; width: 203px; box-shadow: 0px 10px 16px 4px #ccc; border-radius: 22px } #FORM-SIGAMOS-CONVERSANDO .column-fotos.right img:nth-child(1){ margin-left: 16px; margin-right: 30px; margin-top: -20px; } #FORM-SIGAMOS-CONVERSANDO .column-fotos.right img:nth-child(2){ margin-left: 58px; margin-right: -40px; } #FORM-SIGAMOS-CONVERSANDO .column-fotos.right img:nth-child(3){ /*margin-left: 120px;*/ } #FORM-SIGAMOS-CONVERSANDO .d-mobile{ display:none; } @media ( max-width: 1200px ) { #FORM-SIGAMOS-CONVERSANDO{ flex-direction: column; height:auto; padding:50px 15px; } #FORM-SIGAMOS-CONVERSANDO .d-mobile{ display:flex; } #FORM-SIGAMOS-CONVERSANDO .slider-fotos{ display:flex; overflow-x: auto; } #FORM-SIGAMOS-CONVERSANDO .d-mobile img{ width:23%; margin:7px; } #FORM-SIGAMOS-CONVERSANDO .column-fotos{ display:none!important; } } @media ( max-width: 767px ) { #FORM-SIGAMOS-CONVERSANDO{ padding: 50px 0; height:auto; } #FORM-SIGAMOS-CONVERSANDO p{ padding-bottom:0px; } #FORM-SIGAMOS-CONVERSANDO .btn{ display:block; width: 100%; } } #PARADERO-MINERO{ } #PARADERO-MINERO .datos{ padding: 50px 0; } .datos em, .datos b{ display: block; color: rgba( var(--color-gris), 1); } .datos em{ font-size: var(--texto-tamanoMediano); font-style: normal; font-weight: 600; } .datos b{ font-size: var(--extratitulo); line-height: var(--extratitulo); } #PARADERO-MINERO figure{ max-width: 296px; margin: 0 auto 10px; position: relative; } #PARADERO-MINERO figure figcaption{ position: absolute; bottom: 0px; color: #fff; padding: 25px; } #PARADERO-MINERO figure::before{ content: ""; position: absolute; height: 100%; border: 0px solid #fff; opacity: .5; top: 0px; left: 0px; width: 100%; box-sizing: border-box; -webkit-transition: all .3s ease-in-out; -o-transition : all .3s ease-in-out; transition : all .3s ease-in-out; } #PARADERO-MINERO figure:hover::before{ border: 20px solid #fff; } #PARADERO-MINERO figure b{ display: block; line-height: var(--extratitulo); font-weight: normal; } .contactanos{ position: relative; background: url(../media/imagenes/fondomapa.jpg) no-repeat center 280px ; height: 1000px; background-repeat: repeat-x; } .contactanos::after{ content: ""; display: block; clear: both; } .mapa-universidades{ position: absolute; width: 100%; height: 100%; right: -205px; top: -250px; max-width: 830px; z-index: 3; } .mapa-universidades .mapsvg-wrap{ background: url(../media/imagenes/submapa.png) no-repeat 80px 28px; } @media ( max-width: 767px ) { .mapa-universidades{ display: none; } } .mapsvg-popover-visible{ background:#765b46 url(../media/imagenes/map-marker.jpg) no-repeat top left !important; border: 1px solid #765b46!important; color: rgba(var(--color-blanco),1)!important; width: 260px!important; } .frm{ width: 100%; z-index: 10; } .frm p{ color: rgba(var(--color-blanco),1); font-size: 18px; margin: 0; } .frm b{ font-size: 24px; margin: 5px 0 0; } .frm textarea, .frm select, .frm input, .frm label{ width: 100%; border:0px; display: block; } .frm .btn{ background-color:rgba(var(--color-verdeOscuro),1); color: rgba(var(--color-blanco),1); font-size: var(--texto-tamanoMediano); font-weight: bold; cursor: pointer; border-radius:10px; } .frm .btn:disabled { background-color: rgba(var(--color-gris),1)!important; } .frm label{ padding-bottom: 15px; font-size: 14px; color: rgba(var(--color-blanco), 1); } .frm textarea, .frm select, .frm input{ height: 44px; border-radius: 10px; padding: 10px; } .frm textarea{ height:100px; } @media ( max-width: 767px ) { .frm b{ display: block; } .frm p{ padding-bottom: 20px; } } #CASAS-ABIERTAS{ } #CASAS-ABIERTAS .flotante{ background-color: #007649; color: rgba(var(--color-blanco),1); padding: 70px; width: 100%; margin-top: -139px; } @media ( max-width: 767px ) { #CASAS-ABIERTAS .flotante{ padding: 20px; } } #CASAS-ABIERTAS .flotante .subtitulo{ color:rgba(var(--color-blanco), 1); } #CASAS-ABIERTAS .extratitulo{ color: rgba(var(--color-marron),1); } #CASAS-ABIERTAS .datos{ padding: 50px 0; } #CASAS-ABIERTAS .datos em, #CASAS-ABIERTAS .datos b{ display: block; } #CASAS-ABIERTAS .datos em{ color: rgba( var(--color-verde), 1); } #CASAS-ABIERTAS .datos b{ color: rgba( var(--color-marron), 1); } #CASAS-ABIERTAS .mapa{ background: url(../media/imagenes/mapa-casas-abiertas.png) no-repeat top left; width: 662px; height: 966px; } #CASAS-ABIERTAS .videos{ position: relative; /* padding-bottom: 100px; */ } #CASAS-ABIERTAS .videos:before{ content: ""; display: block; width: 57%; height: 100%; background-color: rgba(var(--color-marron),1); position: absolute; top: 0; right: 0px; } #CASAS-ABIERTAS .videos:after{ content: ""; display: block; width: 20px; height: 50%; background-color: rgba(var(--color-amarillo),1); position: absolute; bottom: 0; right: 57%; } #CASAS-ABIERTAS .nav{ height: 71px; } #CASAS-ABIERTAS .next, #CASAS-ABIERTAS .prev{ display: inline-block; width: 71px; height: 71px; background-color: rgba( var(--color-blanco), 1); border: 1px solid rgba( var(--color-amarillo), 1); } #CASAS-ABIERTAS .next:hover, #CASAS-ABIERTAS .prev:hover{ background-color: rgba( var(--color-amarillo), 1); } .slick-next:before, .slick-prev:before, #CASAS-ABIERTAS .next::before, #CASAS-ABIERTAS .prev::before { content: ""; position: relative; display: block; vertical-align: middle; color:rgba( var(--color-amarillo), 1); box-sizing: border-box; width: 35px; height: 35px; border-width: 2px 2px 0 0; border-style: solid; margin: 0 auto; top: 17px; right: 8px; } #CASAS-ABIERTAS .next:hover:before, #CASAS-ABIERTAS .prev:hover:before { color:rgba( var(--color-blanco), 1); } #CASAS-ABIERTAS .next::before{ transform: rotate(45deg); } #CASAS-ABIERTAS .prev::before{ transform: rotate(-135deg); left: 7px; } #CASAS-ABIERTAS .leyendaVideo{ color: rgba( var(--color-blanco), 1); } .leyendaVideo .compartir{ padding-top: 20px; } .leyendaVideo .desc-video{ font-size:var(--texto-tamanoMediano); font-weight: 200; } .leyendaVideo .compartir a{ display:inline-block; width:66px; height:33px; background-position:center; background-size: 20%; background-repeat: no-repeat; vertical-align: bottom; } .compartir .btnfb{ background-image:url(../media/imagenes/facebook.svg); background-color:#3f5993; } .compartir .btntw{ background-image:url(../media/imagenes/twitter.svg); background-color:#21a8e4; } .compartir .btnlnk{ background-image:url(../media/imagenes/broken-link.svg); background-color:#3b063c; } .videos .slider { width: 100%; max-width:1368px; margin:0 auto; z-index: 2; } .videos .slick-list{ overflow: hidden; height: 445px; } .videos .slick-track{ top: 150px; } /* .videos .slick-prev:before, .videos .slick-next:before { color: black; } */ /* */ .videos .slick-slide { position: relative; margin: 4px; opacity: .5; outline: none; overflow: hidden; z-index: -1; width:295px; height:172px; margin-top:0px; transition: all ease-in-out .3s; } .videos .slick-slide img { width: 100%; margin-top:-8%; } .videos .slick-slide.slick-animate { opacity: 1; z-index: 99; } .videos .slick-slide.slick-center:after{ content: ""; background: url(../media/imagenes/ico-play.png) no-repeat center; cursor: pointer; width: 40px; height: 30px; position: absolute; top: 50%; margin-top: -15px; background-size: contain; left: 50%; margin-left: -20px; } @media (min-width: 480px) { .videos .slick-slide.slick-center, .videos .slick-slide.slick-animate{ -webkit-transform: translate3d(0, 0, 0) scale(2.2); transform: translate3d(0, 0, 0) scale(2.2); opacity: 1; z-index: 999; cursor: pointer; } } @media (max-width: 479px) { .videos .slider { width: 90%; margin: 0px auto; } .videos .slick-slide{ width: 270px; height: 140px; } .videos .slick-track{ top: 60px; } .videos .slick-list{ height: 250px; } .videos .slick-slide.slick-center, .videos .slick-slide.slick-animate { -webkit-transform: translate3d(0, 0, 0) scale(1.5); transform: translate3d(0, 0, 0) scale(1.5); opacity: 1; z-index: 999; } .nav{ display: none; } .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 35px; height: 40px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: rgba( var(--color-blanco), 1); z-index: 3; } .slick-next:before { transform: rotate(45deg); width: 20px; height: 20px; top: 0px; } .slick-prev:before { transform: rotate(-135deg); left: 7px; width: 20px; height: 20px; top: 0px; } .slick-next { right: 0px; } .slick-prev { left: 0px; } /* .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } */ } #CASAS-ABIERTAS .bg-amarillo{ position: relative; } #CASAS-ABIERTAS .bg-amarillo::before{ content: ""; display: block; position: absolute; left: 0px; top: 122px; background-color: rgba(var(--color-amarillo),1); width: 50%; height: 75%; margin-top: -27px; } #CASAS-ABIERTAS .bg-amarillo::after{ content: ''; position: absolute; z-index: 1; top: 122px; bottom: 0; left: 0; right: 0; /*background-image: url(../media/imagenes/imagotipo.svg);*/ background-repeat: repeat; background-position: center 280px; background-size: 790px; opacity: .4; width: 50%; height: 75%; margin-top: -27px; } #CASAS-ABIERTAS .mapa-info { float: left; width: 56%; position: relative; margin-left: -80px; z-index: 3; } @media ( max-width: 767px ) { #CASAS-ABIERTAS .mapa-info{ display: none; } } @media ( max-width: 320px ) { .mapa-info .info{ width: 168px; } .mapa-info .mapa{ width: 98%; margin-left: 20px; } } .galeria{ padding: 122px 50px; } .galeria .intro{ margin-top: -100px; } .galeria .intro:after{ content: ""; display: block; width: 130%; height: 300px; background-color: rgba( var(--color-amarillo), 1); position: absolute; top: 73px; right: -81px; z-index: -1; } .galeria .intro:before{ content: ""; display: block; width: 14px; height: 200px; background-color: rgba( var(--color-verde), 1); position: absolute; top: 0px; right: 415px; } .galeria .intro p{ color: rgba( var(--color-blanco), 1); padding-top: 20px; font-weight: 300; } .galeria .fotos{ width: 660px; height: 470px; position: absolute; right: 0px; top: 138px; z-index: 2; } @media ( max-width: 767px ) { .galeria{ padding: 122px 10px; } .galeria .intro{ width: 100%; } .galeria .intro:after{ width: 100%; right: 0px; } .galeria .fotos{ position: initial; width: 100%; height: auto; } } .fotos .slider div{ position: relative; } .fotos span{ position: absolute; z-index: 1; color: rgba( var(--color-verdeOscuro), 1); right: 50px; bottom: 100px; font-size: var(--supertitulo); line-height: var(--supertitulo); font-weight: 200; background-color: rgba( var(--color-blanco), .7); display: inline-block; } .fotos span:before{ content: ""; display: block; position: absolute; width: 100px; height: 20px; top: -20px; right: 0; background-color: rgba( var(--color-amarillo), 1); } @media ( max-width: 767px ) { .fotos span{ right: 10px; bottom: 10px; } .fotos span:before{ width: 80px; height: 8px; top: -8px; } } .marker { position: absolute; background-color: rgba( var(--color-marron), 1); background-image: url(../media/imagenes/map-marker.png); background-repeat: no-repeat; background-position: top left; padding: 9px 30px; color: rgba( var(--color-blanco), 1); text-decoration: none; display: inline-block; font-size: 13px; line-height: 15px; font-weight: 300; } .marker:hover{ background-color: rgba( var(--color-verde), 1); } .marker.left:after, .marker.right:after{ content: ''; position: absolute; bottom: 0; width: 0; height: 0; border: 1.031em solid transparent; border-top-color: rgba( var(--color-marron), 1); border-bottom: 0; margin-left: -0.516em; margin-bottom: -1.031em; } .marker.left:hover:after, .marker.right:hover:after{ border-top-color: rgba( var(--color-verde), 1); } .marker.left:after { left: 7px; border-left: 0; } .marker.right:after { right: 0px; border-right: 0; } .fotos img{ width: 100%; } .fotos .nav{ float: right; } .compartir .btnlnk{ position: relative; } .compartir .btnlnk:before{ opacity: 0; pointer-events: none; /* transition: all .18s ease-out .18s; */ text-indent: 0; font-size: 12px; background: black; border-radius: 2px; color: #fff; content: "URL copiado"; padding: .5em 1em; position: absolute; white-space: nowrap; z-index: 10; top: -40px; } .compartir .btnlnk:focus:before{ opacity: 1; display: block; } /** LOGOS **/ #LOGOS{ }