/* CSS Document */ /***** RESETEAR CSS *****/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; margin: 0; max-width: 100%; padding: 0; outline: 0; vertical-align: top; background: transparent; } body { line-height: 1; } /* No olvides resaltar de alguna manera el texto insertado/borrado */ ins { text-decoration: none; } del { text-decoration: line-through; } /* En el código HTML es necesario añadir cellspacing="0" */ table { border-collapse: collapse; border-spacing: 0; } figure { display: block; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; } /**************************************/ /***** INICIO LOS ESTILOS PROPIOS *****/ /**************************************/ /*==== Defino las fuentes propias ====*/ /*@font-face { font-family: 'Principal'; src: url(../fuentes/good_times_rg.ttf); }*/ @font-face { font-family: 'Open Sans'; src: url(../fuentes/OpenSans-Regular.ttf); } /*@font-face { font-family: 'Principal'; src: url(../fuentes/Bookman-old.otf) format('otf'), url(../fuentes/Bookman-old.ttf.woff) format('woff'), url(../fuentes/Bookman-old.ttf.svg#Bookman-old) format('svg'), url(../fuentes/Bookman-old.ttf.eot), url(../fuentes/Bookman-old.eot?#iefix) format('embedded-opentype'); font-weight: normal; font-style: normal; }*/ /*==========================================*/ /*==== DEFINO LAS PROPIEDADES GENERALES ====*/ *, *:after, *:before { box-sizing: border-box; } .ancho_100 { min-width: 100%; } .ancho_resolucion { width: 1256px; width: 78.5rem; } @media only screen and (min-width: 10px) and (max-width: 78.4999em) { .ancho_resolucion { width: 100%; } } article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section { display: block; } /*===========================*/ /*==== DEFINO LOS FLUJOS ====*/ /*===========================*/ /*==== Columnas en origen ====*/ .nowrap_column { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-flow: column nowrap; -moz-flex-flow: column nowrap; flex-flow: column nowrap; } .wrap_column { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: column wrap; flex-flow: column wrap; } /*===========================* /*==== Filas en origen ====*/ /*===========================*/ .nowrap_row { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; } .nowrap_row_top{ -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .nowrap_row_top { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; } } .nowrap_row_pie { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .nowrap_row_pie { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; } } .wrap_row { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .wrap_row_reverse { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; } @media only screen and (min-width: 10px) and (max-width: 61.9999em) { .wrap_row_reverse { -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: column-reverse wrap; flex-flow: column-reverse wrap; } } .wrap_row_nav { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; } @media only screen and (min-width: 10px) and (max-width: 69.9999em) { .wrap_row_nav { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-flow: column nowrap; flex-flow: column nowrap; } } .alineacion_center { align-items: center !important; } /*=================================*/ /*==== DEFINO LOS CONTENEDORES ====*/ /*=================================*/ html { box-sizing: border-box; margin: 0 auto; height: 100%; min-height: 100%; min-width: 100%; overflow: auto; padding: 0; display: block; } body { background-color: #fff; box-sizing: border-box; margin: 0 auto; height: 100%; /*overflow: auto; // Incompatible con script sticky menu */ padding: 0; position: relative; font-family: 'Open Sans', arial, sans-serif; font-size: 16px; font-size: 1rem; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*=======================*/ /*==== DEFINO EL TOP ====*/ /*=======================*/ /*==== Defino el top principal ====*/ .top_cont_ini { display: none !important; } .top_cont { box-sizing: border-box; margin: 0 auto; min-height: 3.2em; min-height: 3.2rem; max-height: 3.2em; max-height: 3.2rem; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .top_main { box-sizing: border-box; margin: 0 auto; min-height: 2.2em; min-height: 2.2rem; padding: 0.2em 0; padding: 0.2rem 0; position: relative; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { .top_cont_ini { display: flex !important; } .top_cont { min-height: 3em; min-height: 3rem; max-height: 50em; max-height: 50rem; position: relative; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .top_main { min-height: 3em; min-height: 3rem; flex-wrap: wrap; } } /*=======================================*/ /*==== Defino el icono de menú móvil ====*/ /*=======================================*/ .ico_menu { box-sizing: border-box; margin: 0 auto 0 0; padding: 0 0.6em; padding: 0 0.6rem; position: relative; text-align: left; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: none; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .ico_menu > a:focus { outline: 0.1em solid #F8AE24; outline: 0.1rem solid #F8AE24; } .ico_menu > a > img { cursor: pointer; height: 1.8125em; height: 1.8125rem; margin: 0 auto 0 0; padding: 0; position: relative; text-align: left; vertical-align: middle; width: 1.8125em; width: 1.8125rem; } #logo_movil { display: none; } @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { .ico_menu { max-width: 3em; max-width: 3rem; width: 3rem; display: block; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; } #logo_movil { display: flex; margin: 0 auto 0 0; } } /*=================================*/ /*==== Defino el top Izquierda ====*/ /*=================================*/ .top_izq { box-sizing: border-box; margin: 0 auto 0 0; padding: 0; position: relative; text-align: left; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } /*================================*/ /*==== Defino el menú del top ====*/ /*================================*/ .top_der { box-sizing: border-box; margin: 0 0 0 auto; padding: 0; position: relative; text-align: right; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .salto_linea { display: none; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .top_der { margin: 0 0 0 auto; text-align: right; width: 70%; } .salto_linea { display: flex; } } .top_der > p > a:focus { outline: 1px solid #fff; } .top_der > ul { box-sizing: border-box; list-style: none; margin-bottom: 0; margin-bottom: 0; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .top_der > ul > li { box-sizing: border-box; list-style: none; margin: 0; font-size: 1em; font-size: 1rem; font-weight: normal; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .top_der > ul > li { margin: 0.3em 0 0.2em 0.4em; margin: 0.3rem 0 0.2rem 0.4rem; } } .top_der > ul > li:hover { color: #FC1F20; } .top_der > ul > li:hover > a { color: #fff; } .top_der > ul > li > a { box-sizing: border-box; margin: 0; padding: 0; position: relative; text-align: center; vertical-align: middle; font-size: 1em; font-size: 1rem; font-weight: normal; text-decoration: none; } .top_der > ul > li > a:hover { color: #FC1F20; } .top_der > ul > li > a:focus {FC1F20 outline: 0.1em solid #fff; outline: 0.1rem solid #fff; } .top_der > ul > li > img { } .top_der > ul > li > a > img { box-sizing: border-box; padding: 0.2em; padding: 0.2rem; display: block; } #facebook_top { background: url(../imagenes/icono-facebook-off.png); } #google_plus_top { background: url(../imagenes/icono-google-plus-off.png); } #instagram_top { background: url(../imagenes/icono-instagram-off.png); } #linkedin_top { background: url(../imagenes/icono-linkedin_off.png); } #idioma_espanol, #idioma_ingles { background: none; } /*====================================*/ /*==== Defino el botón de idiomas ====*/ /*====================================*/ .idiomas_cont { box-sizing: border-box; margin: 0; min-height: 3.5em; min-height: 3.5rem; max-height: 3.5em; max-height: 3.5rem; padding: 1.25em 0; padding: 1.25rem 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .idiomas_cont > div > a > img { box-sizing: border-box; padding: 0; } .idiomas_cont > div > a:focus { outline: 0.1em solid #12AA86; outline: 0.1rem solid #12AA86; } #idiomas { display: none; } .idiomas_cont > ul { box-sizing: border-box; left: 0; min-height: 2em; min-height: 2rem; padding: 0; position: absolute; text-align: left; top: 2.7em; top: 2.7rem; min-width: 2.625em; min-width: 2.625rem; max-width: 3em; max-width: 3rem; z-index: 1005; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .idiomas_cont > ul > li { box-sizing: border-box; list-style: none; min-height: 2em; min-height: 2rem; padding: 0.4em 0 0; padding: 0.4rem 0 0; position: relative; text-align: left; min-width: 2.625em; min-width: 2.625rem; max-width: 2.625em; max-width: 2.625rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .idiomas_cont > ul > li > a:focus { outline: 0.1em solid #12AA86; outline: 0.1rem solid #12AA86; } /*==========================*/ /*==== DEFINO EL HEADER ====*/ /*==========================*/ /*==== Defino el contenedor ====*/ .header_cont { box-sizing: border-box; margin: 0 auto; margin: 0 auto; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .header_main { box-sizing: border-box; margin: 0 auto; padding: 0; position: relative; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { .header_main { padding: 0; } } /*=================================*/ /*==== Defino el área del Logo ====*/ /*=================================*/ .header_izq { box-sizing: border-box; margin: 0 auto 0 0; padding: 0; position: relative; text-align: left; width: 270px; width: 16.875rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .header_izq { margin: 0 auto; text-align: center; width: auto; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } } .header_izq > a { text-align: left; margin: 0 auto 0 0; } .header_izq > a > img { text-align: left; margin: 0 auto 0 0; max-width: 16.875em; max-width: 16.875rem; padding: 1em 0 1em 0; padding: 1rem 0 1rem 0; } .header_izq a:focus { outline: 0.1em solid #000; outline: 0.1rem solid #000; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .header_izq { margin: 0 auto; text-align: center; } .header_izq > a > img { margin: 0 auto; max-width: 100%; padding: 1em; padding: 1rem; } } /*==========================*/ /*==== Cabecera Central ====*/ /*==========================*/ /*.header_cen { box-sizing: border-box; margin: 0; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: center; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }*/ /*==========================*/ /*==== Cabecera Derecha ====*/ /*==========================*/ .header_der { box-sizing: border-box; margin: 0 0 0 auto; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .header_der { margin: 0 auto 0 0; min-height: 0; text-align: center; width: 100%; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } } .header_der > .boton { margin: 1.5rem 0 0 auto; padding: 0.2rem 0.6rem 0.2rem 0.2rem; text-align: left; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .header_der > .boton:hover { background-color: #89878B; } .header_der > .boton a { margin: 0 auto 0 0; text-align: left; font-size: 1em; font-size: 1rem; font-weight: normal; line-height: 1.5em; line-height: 1.5rem; text-decoration: none; } .header_der > .boton > img { text-align: left; margin: 0 auto 0 0; padding: 0.1em 0.2em; padding: 0.1rem 0.2rem; } .header_der > .boton a:focus { outline: 0.1em solid #000; outline: 0.1rem solid #000; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .header_der > .boton { margin: 1.5rem auto; } } .header_der > .nombre { box-sizing: border-box; margin: 0 auto; margin: 0 auto; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0 0 1em; padding: 0 0 1rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 2em; font-size: 2rem; font-weight: 900; } /*=================================*/ /*==== DEFINO EL NAV PRINCIPAL ====*/ /*=================================*/ /*==== Defino el contenedor ====*/ .nav_cont { box-sizing: border-box; margin: 0 0 0 auto; padding: 0; position: relative; text-align: right; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .menu-fixed { position:fixed; z-index:1000; } .nav_main { box-sizing: border-box; margin: 0 auto; padding: 0; position: relative; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .nav_main > ul { box-sizing: border-box; list-style: none; padding: 1em 0 0 1em; padding: 1rem 0 0 1rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .nav_main > ul > li { box-sizing: border-box; list-style: none; margin: 0; margin: 0; max-height: 9.5em; max-height: 9.5rem; padding: 0 0.5em 1em; padding: 0 0.5rem 1rem; position: relative; text-align: center; max-width: 224px; max-width: 14rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .nav_main > ul > li:hover > div { -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-name: menu; animation-name: menu; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } .nav_main > ul > li:hover > p { } .nav_main > ul > li > p { -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; box-sizing: border-box; max-height: 9.5em; max-height: 9.5rem; padding: 0.5em 0.3em; padding: 0.5em 0.3rem; position: relative; text-align: center; width: 100%; font-size: 18px; font-size: 1.125rem; font-weight: normal; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .nav_main > ul > li > .nav_main_des:hover { border-bottom: 0.2em solid #ffffff; } .nav_main > ul > li > .nav_main_des:hover > a { } .nav_main_act { border-bottom: 0.2em solid #ffffff; } .nav_main_des { border-bottom: 0.2em solid #333C87; } .nav_main > ul > li > p > a { box-sizing: border-box; margin: 0; padding: 0; position: relative; text-align: center; vertical-align: middle; font-family: 'Open Sans', arial, sans-serif; font-size: 18px; font-size: 1.125rem; font-weight: 500; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; } @media only screen and (min-width: 70rem) and (max-width: 71.9999rem) { .nav_main > ul > li > p > a { font-size: 16px; font-size: 1rem; } } .nav_main > ul > li > p > a:focus { outline: 0.1em solid #fff; outline: 0.1rem solid #fff; } /*===================================*/ /*==== Defino el menú desplegado ====*/ /*===================================*/ .nav_main ul > li > div { background-color: #89878B; box-sizing: border-box; left: 0; min-height: 2em; min-height: 2rem; padding: 0; position: absolute; text-align: right; top: 3.1em; top: 3.1rem; min-width: 13em; min-width: 13rem; max-width: 34em; max-width: 34rem; z-index: 1000; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .nav_main ul > li > div > ul { box-sizing: border-box; list-style: none; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: left; min-width: 13em; min-width: 13rem; max-width: 34em; max-width: 34rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .nav_main ul li > div > ul > li { box-sizing: border-box; cursor: pointer; list-style: none; margin: 0; padding: 0; position: relative; text-align: left; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .nav_main ul li > div > ul > li > p { border-bottom: 0.1em solid #333C87; box-sizing: border-box; margin: 0; padding: 0.4em 0.6em 0.4em 0.6em; padding: 0.4rem 0.6rem 0.4rem 0.6rem; position: relative; text-align: left; width: 100%; color: #fff; font-size: 1em; font-size: 1rem; font-weight: 100; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .nav_main ul li > div > ul > li > p:hover { background-color: #333C87; border-bottom: 0.1em solid #89878B; } .nav_main ul li > div > ul > li > p > a { box-sizing: border-box; margin: 0; padding: 0; position: relative; text-align: left; vertical-align: middle; color: #fff; font-family: 'Open Sans', arial, sans-serif; font-size: 0.875em; font-size: 0.875rem; font-weight: normal; line-height: 1.2em; line-height: 1.2rem; text-decoration: none; } .nav_main ul li > div > ul > li > p:hover a { color: #fff; } .nav_main ul li > div > ul > li > p > a:focus { outline: 0.1em solid #fff; } #submenu_conocenos, #submenu_enfermedad, #submenu_colabora, #submenu_enlaces { display: none; } /*========================*/ /*=== Navegación Móvil ===*/ /*========================*/ @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { #nav { display: none; position: absolute; top: 3rem; z-index: 3000; } } /*==== Defino el contenedor ====*/ @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { .nav_cont { left: 0; top: 0; position: absolute; width: 100%; } .nav_main { background: #89878B; box-sizing: border-box; margin: 0 auto; min-height: 2em; min-height: 2rem; min-width: 80%; max-height: 100em; max-height: 100rem; padding: 0; position: relative; text-align: left; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*==================================*/ /*==== Defino el menú principal ====*/ .nav_main > ul { box-sizing: border-box; list-style: none; height: auto; min-height: 2em; min-height: 2rem; max-height: 100em; max-height: 100rem; padding: 0; position: relative; text-align: left; width: 100%; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .nav_main > ul > li { border-bottom: 0.1em solid #fff; border-right: 0.1rem solid #fff; box-sizing: border-box; list-style: none; margin: 0; height: auto; min-height: 2em; min-height: 2rem; max-height: 50em; max-height: 50rem; max-width: 100%; padding: 0; position: relative; text-align: left; width: 100%; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } @keyframes menu { 0% { top: 0; } 100% { top: 0; } } .nav_main ul > li:hover { background-color: #333C87; } .nav_main > ul > li:hover > p { border: none; } .nav_main ul > li > p { border: none; box-sizing: border-box; cursor: pointer; margin: 0.4em auto 0.4em 0; margin: 0.4rem auto 0.4rem 0; max-height: 2em; max-height: 2rem; padding: 0.2625em; padding: 0.2625rem; position: relative; text-align: left; width: 100%; color: #fff; font-size: 0.9em; font-size: 0.9rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .nav_main ul > li > p:hover { background-color: none; border: none; } .nav_main_act { background-color: none; border: none; } .nav_main_des { background-color: inherit; border: none; } .nav_main > ul > li > .nav_main_des:hover { border-bottom: none; } .nav_main > ul > li > .nav_main_des:hover > a { color: #fff; } .nav_main ul > li > p > a { box-sizing: border-box; margin: 0; padding: 0; position: relative; text-align: left; vertical-align: middle; color: #fff; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 0.9em; font-size: 0.9rem; text-decoration: none; text-transform: none; font-weight: bold; } .nav_main ul > li > p > a:focus { outline: 0.1em solid #fff; } #submenu_conocenos, #submenu_enfermedad, #submenu_colabora, #submenu_enlaces { display: flex; } } /*===================================*/ /*==== Defino el menú desplegado ====*/ /*===================================*/ @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { .nav_main ul > li > div { background-color: none; border-top: 1px solid #fff; box-sizing: border-box; left: 0; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: left; top: 0; min-width: 16em; min-width: 16rem; max-width: 100%; width: 100%; z-index: 1000; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .nav_main ul > li > div > ul { box-sizing: border-box; border-right: none; list-style: none; min-height: 2em; min-height: 2rem; max-height: 50em; max-height: 50rem; padding: 0; position: relative; text-align: left; min-width: 16em; min-width: 16rem; max-width: 100%; width: 100%; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .nav_main ul li > div > ul > li { box-sizing: border-box; cursor: pointer; list-style: none; margin: 0; max-height: 4em; max-height: 4rem; padding: 0; position: relative; text-align: left; width: 100%; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .nav_main ul li > div > ul > li:hover { background-color: #333C87; border-bottom: 1px solid #fff; } .nav_main ul li > div > ul > li > p { border-bottom: 1px solid #fff; box-sizing: border-box; margin: 0; max-height: 4em; max-height: 4rem; padding: 0.4em 0.6em; padding: 0.4rem 0.6rem; position: relative; text-align: left; width: 100%; color: #fff; font-size: 0.875em; font-size: 0.875rem; font-weight: 100; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .nav_main ul li > div > ul > li > p:hover { background-color: none; border-bottom: none; } .nav_main ul li > div > ul > li > p > a { box-sizing: border-box; margin: 0; padding: 0; position: relative; text-align: left; vertical-align: middle; color: #fff; font-size: 0.875em; font-size: 0.875rem; font-style: oblique; font-weight: normal; text-decoration: none; text-transform: none; } .nav_main ul li > div > ul > li > p:hover a { color: #fff; } .nav_main ul li > div > ul > li > p > a:focus { outline: 0.1em solid #fff; } } /*===============================*/ /*==== DEFINO EL BREADCRUMBS ====*/ /*===============================*/ /*==== Defino el breadcrumbs ====*/ /*.breadcrumbs_cont { box-sizing: border-box; margin: 2em auto; margin: 2rem auto; min-height: 1.4em; min-height: 1.4rem; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .breadcrumbs_main { border-bottom: 0.1em solid #d2d2d2; border-bottom: 0.1rem solid #d2d2d2; border-top: 0.1em solid #d2d2d2; border-top: 0.1rem solid #d2d2d2; box-sizing: border-box; margin: 0 auto; min-height: 1.4em; min-height: 1.4rem; padding: 0; position: relative; text-align: right; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .breadcrumbs_main ul { box-sizing: border-box; list-style: none; height: 2.2em; height: 2.2rem; margin: 0 auto; padding: 0; position: relative; text-align: left; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .breadcrumbs_main > ul > li { box-sizing: border-box; margin: 0; position: relative; text-align: left; color: #000; cursor: pointer; font-size: 1em; font-size: 1rem; font-style: normal; text-decoration: none; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .breadcrumbs_noflecha { height: 2.2em; height: 2.2rem; padding: 0.5em 0 0.5em 0.4em; padding: 0.5rem 0 0.5rem 0.4rem; width: auto; } .breadcrumbs_flecha { border-top: 1.1em solid transparent; border-top: 1.1rem solid transparent; border-bottom: 1.1em solid transparent; border-bottom: 1.1rem solid transparent; border-left: 1.1em solid #f9f9f9; border-left: 1.1rem solid #f9f9f9; height: 2.2em; height: 2.2rem; width: 2.2em; width: 2.2rem; } .breadcrumbs_main ul li > a { box-sizing: border-box; margin: 0; padding: 0; position: relative; text-align: left; vertical-align: middle; width: 100%; color: #000; font-size: 1em; font-size: 1rem; text-decoration: none; } .breadcrumbs_main ul li > a:focus { outline: 0.1em solid #000; } .breadcrumbs_li_list { list-style: none; }*/ /*====================================*/ /*==== DEFINO CONTENIDO PRINCIPAL ====*/ /*====================================*/ /*==== Defino el contenedor del Main ====*/ .main_cont { box-sizing: border-box; margin: 0 auto; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .main { box-sizing: border-box; margin: 0 auto; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: left; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*===============================*/ /*==== DEFINO EL SLIDER HOME ====*/ /*===============================*/ .carousel-control-next, .carousel-control-prev { bottom: 50px; } .slider_video { height:463px; width: 100%; } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .slider_video { height:auto; max-width: 100%; min-height: 300px; } } .slider_home_cont { box-sizing: border-box; margin: 0 auto; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .slider_home_cont > figure { margin: 0; width: 100%; } .slider_home_cont > figure > img { width: 100%; } /*===========================*/ /*==== Cuadro del Slider ====*/ /*===========================*/ .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption { bottom: 0; /*top: calc(100% - 90%); top: calc(100% - 90%);*/ background: rgba(0,0,0,0.8); width: 100%; left: 0; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .intro { padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: 'Principal', Verdana, Geneva; font-size: 2.2em; font-size: 2.2rem; font-weight;: 100; line-height: 3.2em; line-height: 3.2rem; text-decoration: none; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > p.frase { padding: 1.6em 1.8em; padding: 1.6rem 1.8rem; font-family: 'Open Sans', arial, sans-serif; font-size: 2.5em; font-size: 2.5rem; font-weight: 900; line-height: 3.2em; line-height: 3.2rem; text-decoration: none; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > p { font-size: 18px; padding: 0 30px; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .boton { background-color: #333C87; box-sizing: border-box; margin: 0.8em auto 0; margin: 0.8rem auto 0; padding: 0.6em 1em; padding: 0.6rem 1rem; position: relative; width: 18em; width: 18rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .boton:hover { background-color: #616161; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .boton:hover > a { color: #fff; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .boton > a { font-size: 1.5em; font-size: 1.5rem; font-weight: normal; line-height: 1.7em; line-height: 1.7rem; text-align: center; text-decoration: none; } @media only screen and (min-width: 50em) and (max-width: 79.9999em) { .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .intro { border-bottom: 0.1rem solid #E16F71; padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: 'Principal', Verdana, Geneva; font-size: 1.4em; font-size: 1.4rem; font-weight: normal; line-height: 2.5em; line-height: 2.5rem; text-decoration: none; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .frase { /*background-color: rgba(255, 255, 255, 0.7);*/ padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: Verdana, Geneva, sans-serif; font-size: 1.3em; font-size: 1.3rem; font-weight: normal; line-height: 2em; line-height: 2rem; text-decoration: none; } } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .intro { padding: 0.4em 1em; padding: 0.4rem 1rem; font-family: 'Principal', Verdana, Geneva; font-size: 1em; font-size: 1rem; font-weight: normal; line-height: 1.4em; line-height: 1.4rem; text-decoration: none; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .frase { padding: 0 1em 0.4em; padding: 0 1rem 0.4rem; font-family: Verdana, Geneva, sans-serif; font-size: 0.8em; font-size: 0.8rem; font-weight: normal; line-height: 1.2em; line-height: 1.2rem; text-decoration: none; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .boton { background-color: #660000; box-sizing: border-box; margin: 0 auto; margin: 0 auto; max-width: 16em; max-width: 16rem; padding: 0.15em; padding: 0.15rem; position: relative; width: auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .boton:hover { background-color: #777; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .boton:hover > a { color: #fff; } .slider_home_cont > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .boton > a { font-family: Verdana, Geneva, sans-serif; font-size: 0.8em; font-size: 0.8rem; font-weight: normal; line-height: 1.2em; line-height: 1.2rem; text-align: center; text-decoration: none; } } .slider_cuadro { box-sizing: border-box; padding: 1em 1.5em; padding: 1rem 1.5rem; position: absolute; width: 700px; } .caption_left { left: calc((100% - 1256px)/2); top: calc(100% - 90%); top: calc(100% - 90%); } .caption_center { left: calc((100% - 700px)/2); top: calc(100% - 90%); top: calc(100% - 90%); } .caption_right { right: calc((100% - 1256px)/2); top: calc(100% - 90%); top: calc(100% - 90%); } @media only screen and (min-width: 50em) and (max-width: 79.9999em) { .caption_left { left: 0; top: 2em; top: 2rem; text-align: left; } .caption_center { left: calc((100% - 700px)/2); top: 2em; top: 2rem; text-align: center; } .caption_right { right: 0; top: 2em; top: 2rem; text-align: right; } } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .slider_cuadro { position: relative; width: auto; z-index: 2900; } .caption_left { left: auto; top: auto; } .caption_center { left: auto; top: auto; } .caption_right { right: auto; top: auto; } } /*===========================*/ /*==== Textos del Slider ====*/ /*===========================*/ .slider_cuadro > h1 { padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: 'Principal', Verdana, Geneva; font-size: 1.9em; font-size: 1.9rem; font-weight: normal; line-height: 3.2em; line-height: 3.2rem; text-decoration: none; } .slider_cuadro > p { padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: 'Open Sans', arial, sans-serif; font-size: 1.5em; font-size: 1.5rem; font-weight: normal; line-height: 2.2em; line-height: 2.2rem; text-decoration: none; } @media only screen and (min-width: 50em) and (max-width: 79.9999em) { .slider_cuadro > h1 { padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: 'Principal', Verdana, Geneva; font-size: 1.5em; font-size: 1.5rem; font-weight: normal; line-height: 2.2em; line-height: 2.2rem; text-decoration: none; } .slider_cuadro > p { padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: 'Open Sans', arial, sans-serif; font-size: 1.3em; font-size: 1.3rem; font-weight: normal; line-height: 2.1em; line-height: 2.1rem; text-decoration: none; } } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .slider_cuadro > h1 { padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: 'Principal', Verdana, Geneva; font-size: 1.5em; font-size: 1.5rem; font-weight: normal; line-height: 2.2em; line-height: 2.2rem; text-decoration: none; } .slider_cuadro > p { padding: 0.6em 0.8em; padding: 0.6rem 0.8rem; font-family: 'Open Sans', arial, sans-serif; font-size: 1.3em; font-size: 1.3rem; font-weight: normal; line-height: 2.1em; line-height: 2.1rem; text-decoration: none; } } /*===============================================*/ /*==== DEFINO EL CONTENEDOR DE LAS SECCIONES ====*/ /*===============================================*/ .article_cont { box-sizing: border-box; margin: 0 auto; max-width: 100%; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .article_cont > h1 { box-sizing: border-box; margin: 0 auto 2em; margin: 0 auto 2rem; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0 0 1em; padding: 0 0 1rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.8em; font-size: 1.8rem; font-weight: 100; } .titulo_h1 { box-sizing: border-box; margin: 0 auto 2em; margin: 0 auto 2rem; min-height: 2em; min-height: 2rem; padding: 0 0 1em; padding: 0 0 1rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.8em; font-size: 1.8rem; font-weight: 100; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .article_cont > h1 { margin: 0 auto; margin: 0 auto; max-width: 100%; font-size: 1.6em; font-size: 1.6rem; line-height: 2.4em; line-height: 2.4rem; } .titulo_h1 { margin: 0 auto; margin: 0 auto; max-width: 100%; font-size: 1.6em; font-size: 1.6rem; line-height: 2.4em; line-height: 2.4rem; } } .article_cont > h2 { box-sizing: border-box; margin: 2em auto 1em; margin: 2rem auto 1rem; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0 0 1em; padding: 0 0 1rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; font-family: 'Open Sans', arial, sans-serif; font-size: 2em; font-size: 2rem; font-weight: 900; line-height: 2.4em; line-height: 2.4rem; } .titulo_h2 { box-sizing: border-box; margin: 0 auto 1em; margin: 0 auto 1rem; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0 0 1em; padding: 0 0 1rem; position: relative; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; font-family: 'Open Sans', arial, sans-serif; font-size: 1.6em; font-size: 1.6rem; font-weight: 900; line-height: 2.4em; line-height: 2.4rem; } .titulo_h3 { box-sizing: border-box; margin-left: 0; margin-right: auto; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: left; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; font-family: 'Open Sans', arial, sans-serif; font-size: 1.4em; font-size: 1.4rem; font-weight: normal; line-height: 2.1em; line-height: 2.1rem; } .nombre_behcet { box-sizing: border-box; margin: 0 auto; margin: 0 auto; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0 0 1em; padding: 0 0 1rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 2em; font-size: 2rem; font-weight: 900; line-height: 3.4rem; } /*=============================*/ /*==== DEFINO LAS COLUMNAS ====*/ /*=============================*/ /*==== Defino el contenedor ====*/ .columnas_cont { box-sizing: border-box; margin: 0 auto; max-width: 100%; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .columnas_cont_2 { box-sizing: border-box; margin: 0 auto; max-width: 100%; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-around; -webkit-justify-content: space-around; justify-content: space-around; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*==============================*/ /*==== Títulos Columna_cont ====*/ /*==============================*/ .columnas_cont > h1 { box-sizing: border-box; margin: 0.5em auto 2em 0; margin: 0.5rem auto 2rem 0; max-width: 100%; padding: 0 0.5em 1em 1em; padding: 0 0.5rem 1rem 1rem; position: relative; text-align: center; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 2.1em; font-size: 2.1rem; font-weight: 100; } .columnas_cont > h2 { box-sizing: border-box; margin: 0.5em auto 1em 0; margin: 0.5rem auto 1rem 0; max-width: 100%; padding: 0 0.5em 0 1em; padding: 0 0.5rem 0 1rem; position: relative; text-align: left; font-family: 'Open Sans', arial, sans-serif; font-size: 1.6em; font-size: 1.6rem; font-weight: 900; line-height: 2.4em; line-height: 2.4rem; } /*=============================*/ /*==== Textos Columna_cont ====*/ /*=============================*/ .columnas_cont > p { box-sizing: border-box; max-width: 100%; position: relative; } .columnas_cont > p > a { text-decoration: none; color: #B46022; } .columna_cont_cita { box-sizing: border-box; margin: 2em auto; margin: 2rem auto; max-width: 100%; padding: 0 1.5em; padding: 0 1.5rem; position: relative; text-align: center; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 2.6em; font-size: 2.6rem; font-weight: 100; line-height: 3em; line-height: 3rem; } /*============================*/ /*==== COLUMNA INDIVIDUAL ====*/ /*============================*/ .columna { box-sizing: border-box; max-width: 100%; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .columna_expansiva { box-sizing: border-box; max-width: 100%; position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .columna_centro { box-sizing: border-box; max-width: 100%; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .columna_bottom { box-sizing: border-box; max-width: 100%; position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*=========================*/ /*==== Títulos Columna ====*/ /*=========================*/ .columnas_cont > .columna > h1, .columnas_cont > .columna_expansiva > h1 { box-sizing: border-box; margin: 0.5em auto 1em; margin: 0.5rem auto 1rem; max-width: 100%; padding: 0 0.5em 0.5em 0; padding: 0 0.5rem 0.5rem 0; position: relative; text-align: left; font-family: 'Open Sans', arial, sans-serif; font-size: 2.2em; font-size: 2.2rem; font-weight: normal; line-height: 3em; line-height: 3rem; } .columnas_cont > .columna > h2, .columnas_cont > .columna_expansiva > h2 { box-sizing: border-box; margin: 0.5em auto 1em; margin: 0.5rem auto 1rem; max-width: 100%; padding: 0 0.5em 0.5em 0; padding: 0 0.5rem 0.5rem 0; position: relative; text-align: center; font-family: 'Open Sans', arial, sans-serif; font-size: 2em; font-size: 2rem; font-weight: 900; line-height: 2.6em; line-height: 2.6rem; } .columnas_cont > .columna > .tit_h2 { box-sizing: border-box; margin: 0.5em auto 0.5em; margin: 0.5rem auto 0.5rem; max-width: 100%; padding: 0 0.5em 0.3em 0; padding: 0 0.5rem 0.3rem 0; position: relative; text-align: left; font-family: 'Open Sans', arial, sans-serif; font-size: 1.4em; font-size: 1.4rem; font-weight: 900; line-height: 2.1em; line-height: 2.1rem; } .columnas_cont > .columna_centro > h2, .columnas_cont_2 > .columna_centro > h2 { box-sizing: border-box; margin: 0 auto 1em; margin: 0 auto 1rem; max-width: 100%; padding: 0 0.5em 0; padding: 0 0.5rem 0; position: relative; text-align: center; font-family: 'Open Sans', arial, sans-serif; font-size: 1.4em; font-size: 1.4rem; font-weight: 900; line-height: 2.1em; line-height: 2.1rem; } .columnas_cont > .columna > h2 > a, .columnas_cont > .columna_expansiva > h2 > a, .columnas_cont > .columna_centro > h2 > a, .columnas_cont_2 > .columna_centro > h2 > a { text-decoration: none; } .columnas_cont > .columna > h2 > a:hover, .columnas_cont > .columna_expansiva > h2 > a:hover { text-decoration: none; } .columnas_cont > .columna > h2 > a:focus, .columnas_cont > .columna_expansiva > h2 > a:focus, .columnas_cont > .columna_centro > h2 > a:focus, .columnas_cont_2 > .columna_centro > h2 > a:focus { outline: 1px solid #000; } .columnas_cont > .columna > h3, .columnas_cont > .columna_expansiva > h3 { box-sizing: border-box; max-width: 100%; padding: 0 0 1.5em; padding: 0 0 1.5rem; position: relative; text-align: left; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.1em; font-size: 1.1rem; line-height: 1.8em; line-height: 1.8rem; } .columnas_cont > .columna_centro > h3, .columnas_cont_2 > .columna_centro > h3 { box-sizing: border-box; margin: 1em auto 1em; margin: 1rem auto 1rem; max-width: 100%; padding: 0 1.5em 0; padding: 0 1.5rem 0; position: relative; text-align: center; font-family: 'Open Sans', arial, sans-serif; font-size: 1.2em; font-size: 1.2rem; font-weight: normal; line-height: 1.8em; line-height: 1.8rem; } .columnas_cont > .columna > h3 > a, .columnas_cont > .columna_expansiva > h3 > a { font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.1em; font-size: 1.1rem; line-height: 1.8em; line-height: 1.8rem; text-decoration: none; } .columnas_cont > .columna_centro > h3 > a, .columnas_cont_2 > .columna_centro > h3 > a { font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.2em; font-size: 1.2rem; line-height: 1.8em; line-height: 1.8rem; text-decoration: none; } .columnas_cont > .columna > h3 > a:hover, .columnas_cont > .columna_expansiva > h3 > a:hover, .columnas_cont > .columna_centro > h3 > a:hover, .columnas_cont_2 > .columna_centro > h3 > a:hover { text-decoration: none; } .columnas_cont > .columna > h3 > a:focus, .columnas_cont > .columna_expansiva > h3 > a:focus, .columnas_cont > .columna_centro > h3 > a:focus, .columnas_cont_2 > .columna_centro > h3 > a:focus { outline: 1px solid #056C3C; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .columnas_cont > .columna > h3, .columnas_cont > .columna_expansiva > h3, .columnas_cont > .columna_centro > h3, .columnas_cont_2 > .columna_centro > h3 { margin-top: 1.5rem; } } /*========================*/ /*==== Textos Columna ====*/ /*========================*/ .columnas_cont > .columna > p, .columnas_cont > .columna_expansiva > p { box-sizing: border-box; max-width: 100%; position: relative; } .introduccion_texto { max-width: 100%; padding: 0.5em 0 0; padding: 0.5rem 0 0; font-size: 1.3em; font-size: 1.3rem; font-weight: 100; line-height: 1.8em; line-height: 1.8rem; letter-spacing: 1px; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .introduccion_texto { font-weight: 500; } } .introduccion_texto a { text-decoration: none; color: #B46022; } .introduccion_texto a:hover { color: #89878B; text-decoration: none; } .introduccion_texto a:focus { outline: 1px solid #89878B; } .cuadro_texto_llamada { background-color: #f2f2f2; margin: 3.5em auto; margin: 3.5rem auto; padding: 2em 3.5em; padding: 2rem 3.5rem; font-size: 1.4em; font-size: 1.4rem; font-weight: 100; line-height: 1.9em; line-height: 1.9rem; } .servicios_texto { max-width: 100%; padding: 0.5em 1em 0; padding: 0.5rem 1rem 0; font-size: 1em; font-size: 1rem; font-weight: 300; line-height: 1.5em; line-height: 1.5rem; } .servicios_texto > a { text-decoration: none; } .servicios_texto_2 { padding: 0.5em 0 0; padding: 0.5rem 0 0; font-size: 1em; font-size: 1rem; font-weight: 300; line-height: 1.5em; line-height: 1.5rem; } /*========================*/ /*==== Listas Columna ====*/ /*========================*/ .columnas_cont > .columna > ul, .columnas_cont > .columna > div > ul, .columnas_cont > .columna > ol, .columnas_cont > .columna > div > ol, .columnas_cont > .columna_expansiva > ul, .columnas_cont > .columna_expansiva > div > ul, .columnas_cont > .columna_expansiva > ol, .columnas_cont > .columna_expansiva > div > ol { box-sizing: border-box; max-width: 100%; min-height: 2em; min-height: 2rem; padding-top: 0.425em; padding-top: 0.425rem; padding-right: 0.5em; padding-right: 0.5rem; padding-left: 0.8em; padding-left: 0.8rem; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .columnas_cont > .columna_centro > ul { max-width: 100%; } .columnas_cont > .columna_centro > ul > li { box-sizing: border-box; max-width: 100%; min-height: 2em; min-height: 2rem; padding-top: 0.425em; padding-top: 0.425rem; padding-right: 0.5em; padding-right: 0.5rem; padding-left: 0.8em; padding-left: 0.8rem; position: relative; } .lista_simple { list-style: outside circle; margin: 0 auto 0 1rem; } .lista_vacia { list-style: none; margin: 0 auto 0 0; } .lista_interior { list-style: inside circle; margin: 0 auto 0 1rem; } .columnas_cont > .columna > ul > li, .columnas_cont > .columna > div > ul > li, .columnas_cont > .columna > ol > li, .columnas_cont > .columna > div > ol > li, .columnas_cont > .columna_expansiva > ul > li, .columnas_cont > .columna_expansiva > div > ul > li, .columnas_cont > .columna_expansiva > ol > li, .columnas_cont > .columna_expansiva > div > ol > li { box-sizing: border-box; max-width: 100%; margin: 0.3em auto; margin: 0.3rem auto; padding: 0 0.5em; padding: 0 0.5rem; position: relative; text-align: left; width: 100%; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .columnas_cont > .columna_centro > ul > li { box-sizing: border-box; max-width: 100%; margin: 0.3em auto; margin: 0.3rem auto; padding: 0 0.5em; padding: 0 0.5rem; position: relative; text-align: left; } .lista_texto { padding: 1em 0 0; padding: 1rem 0 0; font-size: 1em; font-size: 1rem; font-weight: 100; line-height: 1.6em; line-height: 1.6rem; } .lista_texto > a { text-decoration: none; } .lista_texto > a:hover { color: #2E4196; } .lista_texto > a:focus { outline: 1px solid #2E4196; } /*========================*/ /*==== Figure Columna ====*/ /*========================*/ .columnas_cont > .columna > .figure { box-sizing: border-box; max-width: 100%; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .columnas_cont > .columna > .figure { margin-top: 1rem; margin-bottom: 2rem; } } .columnas_cont > .columna > .figure > img { box-sizing: border-box; margin: 0 auto 0 0; max-width: 100%; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .columnas_cont > .columna > .figure > img { margin: 0 auto; } } .columnas_cont > .columna > .figure > figcaption { border: 0 solid #fff; box-sizing: border-box; height: calc(100% - 64px); margin: 2rem 0; max-width: 100%; padding: 0.5em; padding: 0.5rem; position: absolute; text-align: center; width: calc(100% - 64px); flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; transition: border 0.3s; } /*===============================*/ /*==== Figure Columna centro ====*/ /*===============================*/ .columnas_cont > .columna_centro > .figure, .columnas_cont_2 > .columna_centro > .figure { box-sizing: border-box; max-width: 100%; padding: 0.4em; padding: 0.4rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .figure_noticias { overflow: hidden; width: 100%; height: 300px; } .figure_cursos { overflow: hidden; width: 100%; height: 287px; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .columnas_cont > .columna_centro > .figure, .columnas_cont_2 > .columna_centro > .figure { margin-top: 1rem; } } .columnas_cont > .columna_centro > .figure > img, .columnas_cont_2 > .columna_centro > .figure > img { box-sizing: border-box; margin: 0 auto; margin: 0 auto; max-width: 100%; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .columnas_cont > .columna_centro > .figure > figcaption, .columnas_cont_2 > .columna_centro > .figure > figcaption { background-color: #000; border: 0.1rem double #fff; margin-top: 1em; margin-top: 1rem; max-width: 100%; padding: 0.4em 0.8em; text-align: center; width: 100%; color: #fff; font-size: 1em; font-size: 1rem; font-weight: 100; line-height: 1.5em; line-height: 1.5rem; } /*===================*/ /*==== OPINIONES ====*/ /*===================*/ /*=== Contendores ===*/ .columnas_cont > .columna > .figure_opiniones { box-sizing: border-box; max-width: 100%; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .columnas_cont > .columna > .figure_opiniones > img { box-sizing: border-box; margin: 0 auto; max-width: 100%; padding: 0; position: relative; text-align: left; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { .columnas_cont > .columna > .figure_opiniones > img { margin: 0 auto; } } .columnas_cont > .columna > .figure_opiniones > figcaption { max-width: 100%; padding: 0.5em; padding: 0.5rem; text-align: center; padding: 1em 0 0; padding: 1rem 0 0; font-size: 1em; font-size: 1rem; font-weight: 100; line-height: 1.6em; line-height: 1.6rem; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } /*==================*/ /*===== Textos =====*/ /*==================*/ .opiniones_texto { max-width: 100%; text-align: center; padding: 1em; padding: 1rem; font-size: 1.5em; font-size: 1.5rem; font-weight: 900; line-height: 1.8em; line-height: 1.8rem; } .opiniones_firma { max-width: 100%; padding: 1em 0.5em 0.5em 1em; padding: 1rem 0.5rem 0.5rem 1rem; text-align: left; font-size: 1em; font-size: 1rem; font-style: oblique; font-weight: 100; line-height: 1.6em; line-height: 1.6rem; } /*=============*/ /*==== VALORES ====*/ /*=============*/ .valores_texto { box-sizing: border-box; max-width: 100%; padding: 0 auto 1em; padding: 0 auto 1rem; position: relative; text-align: center; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.1em; font-size: 1.1rem; line-height: 1.8em; line-height: 1.8rem; } .submenu_texto { max-width: 100%; padding-bottom: 0.5em; padding-bottom: 0.5rem; text-align: center; font-size: 1.5em; font-size: 1.5rem; font-weight: 100; line-height: 1.8em; line-height: 1.8rem; } .submenu_texto > a { text-decoration: none; } .noticias_text { box-sizing: border-box; max-width: 100%; padding: 0 2em 1em; padding: 0 2rem 1rem; position: relative; text-align: center; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.3em; font-size: 1.3rem; line-height: 1.8em; line-height: 1.8rem; } /*=====================*/ /*==== PRESUPUESTO ====*/ /*=====================*/ .presupuesto_llamada { max-width: 100%; padding: 0.5em 0 0; padding: 0.5rem 0 0; text-align: center; font-size: 1.8em; font-size: 1.8rem; font-weight: 800; line-height: 2.6em; line-height: 2.6rem; } .presupuesto_texto { max-width: 100%; padding: 0.5em; padding: 0.5rem; text-align: center; font-size: 1.5em; font-size: 1.5rem; font-weight: 100; line-height: 2.5em; line-height: 2.5rem; } .presupuesto_boton { background-color: #333C87; border: 1px solid #fff; border: 1px solid #fff; margin: 0.3em auto 0; max-width: 30em; max-width: 30rem; padding: 0.3em 1em; padding: 0.3rem 1rem; text-align: center; width: auto; color: #fff; font-size: 1.5em; font-size: 1.5rem; line-height: 2.2em; line-height: 2.2rem; } .presupuesto_boton:hover { background-color: #333C87; } .presupuesto_boton > a { text-align: center; color: #fff; font-size: 1.5em; font-size: 1.5rem; line-height: 2.2em; line-height: 2.2rem; text-decoration: none; } .presupuesto_boton > a:hover { text-decoration: none; } .presupuesto_boton > a:focus { outline: 1px solid #fff; } /*=============*/ /*==== APP ====*/ /*=============*/ .app_fondo_movil { background-image:url(../imagenes/servicios/fondo-movil.png); background-position: top center; background-repeat: no-repeat; background-size: contain; } .columna_app { box-sizing: border-box; height: 472px; margin: 2em auto 0; margin: 2rem auto 0; padding: 3.375rem 0.625rem 3.375rem 0.625rem; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*====================*/ /*==== Textos App ====*/ /*====================*/ .columnas_cont > .columna_app > .textos { box-sizing: border-box; height: 3rem; margin: 1em auto 0; margin: 1rem auto 0; padding: 1.2em 0.5em; padding: 1.2rem 0.5rem; position: relative; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .columnas_cont > .columna_app > .textos h3 { padding: 0.5em 0 0; padding: 0.5rem 0 0; text-align: center; font-size: 1.1em; font-size: 1.1rem; font-weight: 800; line-height: 1.6em; line-height: 1.6rem; } .columnas_cont > .columna_app > .textos p { padding: 0.5em; padding: 0.5rem; text-align: center; font-size: 1em; font-size: 1rem; font-weight: 100; line-height: 1.5em; line-height: 1.5rem; } /*====================*/ /*==== Figure App ====*/ /*====================*/ .columnas_cont > .columna_app .figure { box-sizing: border-box; max-width: 100%; padding: 1rem 1rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .columnas_cont > .columna_app .figure { margin-top: 1rem; } } .columnas_cont > .columna_app .figure > img { box-sizing: border-box; margin: 0 auto; max-width: 100%; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } /*=========================*/ /*====== PORTFOLIO ========*/ /*====== ( Capa superpuesta sobre la imagen al Hover) ========*/ /*============================================================*/ .columnas_cont > .columna > .figure_capa_hover { box-sizing: border-box; max-width: 100%; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .columnas_cont > .columna > .figure_capa_hover > img { backface-visibility: hidden; box-sizing: border-box; margin: 0 auto; margin: 0 auto; max-width: 100%; padding: 0; position: relative; text-align: center; width: 100%; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } /*==========================*/ /*====== Figcaption ========*/ /*==========================*/ .columnas_cont > .columna > .figure_capa_hover:hover > figcaption { display: flex; height: 100%; } .columnas_cont > .columna > .figure_capa_hover > figcaption { box-sizing: border-box; bottom: 0; height: 0%; margin: 0; padding: 0.5em; padding: 0.5rem; position: absolute; text-align: center; width: 100%; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: none; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; transition: height 0.3s; } .columnas_cont > .columna > .figure_capa_hover > figcaption > img { margin: 0 auto; vertical-align: middle; } /*=================================*/ /*====== Figcaption Textos ========*/ /*=================================*/ .columnas_cont > .columna > .figure_capa_hover > figcaption > h3 { box-sizing: border-box; max-width: 100%; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .columnas_cont > .columna > .figure_capa_hover > figcaption > h3 a { font-size: 1.4em; font-size: 1.4rem; line-height: 2.1em; line-height: 2.1rem; text-decoration: none; } .columnas_cont > .columna > .figure_capa_hover > figcaption > h3 a:hover { text-decoration: none; } .columnas_cont > .columna > .figure_capa_hover > figcaption > h3 a:focus { display: flex; height: 100%; outline: 1px solid #fff; } .columnas_cont > .columna > .figure_capa_hover > figcaption > p { box-sizing: border-box; max-width: 100%; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .columnas_cont > .columna > .figure_capa_hover > figcaption .texto { margin: 0 auto; max-width: 100%; padding: 0 0.5em; padding: 0 0.5rem; text-align: center; font-size: 1.2em; font-size: 1.2rem; line-height: 1.8em; line-height: 1.8rem; } .columnas_cont > .columna > .figure_capa_hover > figcaption .texto a { font-size: 1.7em; font-size: 1.7rem; line-height: 2.3em; line-height: 2.3rem; text-decoration: none; } .columnas_cont > .columna > .figure_capa_hover > figcaption .texto a:hover { text-decoration: none; } .columnas_cont > .columna > .figure_capa_hover > figcaption .texto a:focus { outline: 1px solid #fff; } .columnas_cont > .columna > .figure_capa_hover > figcaption ul { box-sizing: border-box; list-style: circle outside; margin: 0 auto 0 1.5em; margin: 0 auto 0 1.5rem; max-width: 100%; min-height: 2em; min-height: 2rem; padding-top: 0.425em; padding-top: 0.425rem; position: relative; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .columnas_cont > .columna > .figure_capa_hover > figcaption ul > li { box-sizing: border-box; margin: 0 auto; max-width: 100%; padding: 0 0 0 0.3em; padding: 0 0 0 0.3rem; position: relative; text-align: left; width: 100%; font-size: 1em; font-size: 1rem; line-height: 1.3em; line-height: 1.3rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .columnas_cont > .columna > .figure_capa_hover > figcaption ul > li > a:hover { color: #36D900; } /*================================*/ /*====== Figcaption Botón ========*/ /*================================*/ .columnas_cont > .columna > .figure_capa_hover > figcaption > .boton { background-color: #36D900; border: 0.1em solid #555; border: 0.1em solid #555; margin: 0.3em auto 0; max-width: 100%; padding: 0.3em 1em; padding: 0.3rem 1rem; text-align: center; width: 96%; font-size: 1em; font-size: 1rem; line-height: 1.3em; line-height: 1.3rem; } /*========================*/ /*==== HOMOLOGACIONES ====*/ /*========================*/ /*==== Contenedores ====*/ .columnas_cont > .columna > .div_h2, .columnas_cont > .div_h2 { box-sizing: border-box; margin: 0 auto 1em; margin: 0 auto 1rem; max-width: 100%; padding: 0; position: relative; width: 100%; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .columnas_cont > .columna > .div_h2 > h2, .columnas_cont > .div_h2 > h2 { box-sizing: border-box; margin: 0 auto 0 0; margin: 0 auto 0 0; padding: 0.95em 1em 0.95em 1em; padding: 0.95rem 1rem 0.95rem 1rem; position: relative; text-align: left; font-size: 1.1em; font-size: 1.1rem; font-weight: 900; } .cuadro_texto { padding: 0 0 1em; padding: 0 0 1rem; color: #666; font-size: 1.125em; font-size: 1.125rem; line-height: 1.6em; line-height: 1.6rem; text-align: left; } .cuadro_texto > a { text-decoration: none; } /*================*/ /*==== EQUIPO ====*/ /*================*/ /*==== Contenedores ====*/ .columnas_equipo_cont { box-sizing: border-box; margin: 0 auto; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-around; -webkit-justify-content: space-around; justify-content: space-around; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*========================*/ /*==== Figure Columna ====*/ /*========================*/ .columnas_equipo_cont > .columna > .figure { border: 0.4em double #000; border: 0.4rem double #000; box-sizing: border-box; max-width: 100%; padding: 0.4em; padding: 0.4rem; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .columnas_equipo_cont > .columna > .figure { margin-top: 1rem; } } .columnas_equipo_cont > .columna > .figure > img { box-sizing: border-box; margin: 0 auto; margin: 0 auto; max-width: 100%; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .columnas_equipo_cont > .columna > .figure > figcaption { background-color: #000; border: 0.1rem double #fff; margin-top: 1em; margin-top: 1rem; max-width: 100%; padding: 0.4em 0.8em; text-align: center; width: 100%; color: #fff; font-size: 1em; font-size: 1rem; font-weight: 100; line-height: 1.5em; line-height: 1.5rem; } /*========================*/ /*==== TEXTOS LEGALES ====*/ /*========================*/ /*==== Textos ====*/ .legal_texto { max-width: 100%; padding: 0.5em 0 0; padding: 0.5rem 0 0; font-size: 1em; font-size: 1rem; font-weight: 300; line-height: 1.5em; line-height: 1.5rem; } .legal_texto > a { text-decoration: none; } .legal_texto > a:hover { color: #2E4196; text-decoration: none; } .legal_texto > a:focus { outline: 1px solid #2E4196; } /*================*/ /*==== TABLAS ====*/ /*================*/ /*==== Contenedores ====*/ .columna_table { box-sizing: border-box; max-width: 100%; overflow-x: auto; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .columna_table > table tr { border: 0.1em solid #333; border: 0.1rem solid #333; max-width: 100%; } .columna_table > table tr th { border: 0.1em solid #333; border: 0.1rem solid #333; max-width: 100%; padding: 0.4em; padding: 0.4rem; text-align: center; vertical-align: middle; } .columna_table > table tr td { border: 0.1em solid #333; border: 0.1rem solid #333; max-width: 100%; padding: 0.4em; padding: 0.4rem; vertical-align: middle; font-size: 1em; font-size: 1rem; line-height: 1.5em; line-height: 1.5rem; } .table_ancho_10 { width: 10rem; } .table_ancho_15 { width: 15rem; } /*=======================*/ /*==== Textos Tablas ====*/ /*=======================*/ .columna > columna_table tr td > ul { list-style: none; } /*========================*/ /*=== PÁGINAS DE ERROR ===*/ /*========================*/ .error_h1 { box-sizing: border-box; margin: 0 auto 2em 0; margin: 0 auto 2rem 0; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0 0 1em; padding: 0 0 1rem; position: relative; text-align: left; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.8em; font-size: 1.8rem; font-weight: 100; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .titulo_h1 { margin: 0 auto; margin: 0 auto; max-width: 100%; font-size: 1.6em; font-size: 1.6rem; line-height: 2.4em; line-height: 2.4rem; } } /*=============================*/ /*=== DEFINO LOS FORMULARIO ===*/ /*=============================*/ .formulario_capa { box-sizing: border-box; margin: 0; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .formulario_form { box-sizing: border-box; margin: 0; max-width: 100%; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*===============*/ /*==== Label ====*/ /*===============*/ label { box-sizing: border-box; max-width: 100%; padding: 0; position: relative; text-align: left; font-size: 0.875em; font-size: 0.875rem; line-height: 1.3em; line-height: 1.3rem; text-align: left; } label > a:focus { outline: 0.1em solid #2986A9; outline: 0.1rem solid #2986A9; } /*================*/ /*==== Campos ====*/ /*================*/ .formulario_form input, .formulario_form textarea { box-sizing: border-box; max-width: 100%; margin-bottom: 0.7em; margin-bottom: 0.7rem; padding: 0.4375em 0.5em; padding: 0.4375rem 0.5rem; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; } .formulario_form select { box-sizing: border-box; margin-bottom: 0.7em; margin-bottom: 0.7rem; max-width: 100%; padding: 0.2375em 0.3em; padding: 0.2375rem 0.3rem; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; } .formulario_form input[type="file"] { box-sizing: border-box; margin-bottom: 0.7em; margin-bottom: 0.7rem; max-width: 100%; padding: 0 0.3em 0 0; padding: 0 0.3rem 0 0; position: relative; color: #6CC2DB; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; } .formulario_form input[type="checkbox"] { box-sizing: border-box; padding: 0.2em; padding: 0.2rem; position: relative; text-align: left; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .formulario_form select > option { color: #2B6CA3; } ::-webkit-input-placeholder { color: #333C87; } ::-moz-placeholder { color: #333C87; } :-ms-input-placeholder { color: #333C87; } :-moz-placeholder { color: #333C87; } .formulario_form .input_basico, .formulario_form .select_basico { background-color: #fff; color: #000; font-family: 'Open Sans', arial, sans-serif; font-weight: normal; } .formulario_form .textarea_basico { background-color: #fff; height: 3em; height: 3rem; color: #000; font-family: 'Open Sans', arial, sans-serif; font-weight: normal; } .formulario_form .input_basico:focus, .formulario_form .select_basico:focus, .formulario_form .textarea_basico:focus { background-color: #F2FAFD; } .formulario_error_fondo { background-color: #FFF0F0; } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .formulario_form textarea { height: 3em; height: 3rem; } } /*==========================*/ /*==== Aceptar términos ====*/ /*==========================*/ #formulario_acepto { background-color: #fff; border: 0.1em solid #FAAC34; border: 0.1rem solid #FAAC34; height: 1.6em; margin-top: 0.2em; margin-top: 0.2rem; width: 1.6em; display: inline-block; } #formulario_acepto_label { display: inline-block; padding-left: 1em; padding-left: 1rem; width: auto; display: inline-block; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; } #formulario_recapcha { margin: 0.6em 0 1em; margin: 0.6rem 0 1rem; } /*======================*/ /*==== Botón Enviar ====*/ /*======================*/ #formulario_boton { background-color: #333C87; border: none; color: #fff; min-height: 2.075em; min-height: 2.075rem; margin: 0 auto; margin: 0 auto; padding: 0.4em 1em; padding: 0.4rem 1rem; text-align: center; font-family: 'Principal', 'Open Sans', arial, sans-serif; font-size: 1.1em; font-size: 1.1rem; font-weight: normal; line-height: 1.5em; line-height: 1.5rem; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } #formulario_boton:hover { background-color: #89878B; color: #fff; } #formulario_boton:focus { outline: 0.2em solid #fff; outline: 0.2em solid #fff; } /*================================*/ /*==== Aviso Legal Formulario ====*/ /*================================*/ #formulario_terminos { box-sizing: border-box; margin: 1em 0 0 0; margin: 1rem 0 0 0; padding: 0; position: relative; text-align: left; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -moz-justify-content: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -moz-align-items: stretch; -webkit-align-items: stretch; align-items: stretch; } #formulario_terminos > p { box-sizing: border-box; margin: 0; padding: 0; position: relative; text-align: left; width: 100%; font-size: 0.8125em; font-size: 0.8125rem; line-height: 1.22em; line-height: 1.22rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; } #formulario_terminos > p a { color: #2B6988; text-decoration: underline; } /*=========================*/ /*==== Formulario Dona ====*/ /*=========================*/ #formulario_dona .botones .container > ul { box-sizing: border-box; list-style: none; padding: 1em 0 0 0; padding: 1rem 0 0 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } #formulario_dona .botones .container > ul > li { box-sizing: border-box; list-style: none; margin: 0; margin: 0; max-height: auto; padding: 0; position: relative; text-align: center; max-width: auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #formulario_dona .botones label { font-weight: 600; color: #fff; margin-bottom: 11px; width: 100%; padding: 0.6rem 1rem; box-sizing: border-box; background: #333C87; transition: all 0.5s ease 0s; max-width: 100%; padding: 0.5em 0 0; padding: 0.5rem 0 0; font-size: 1.3em; font-size: 1.3rem; font-weight: 100; text-align: center; } #formulario_dona .botones input[type="radio"], #formulario_dona .botones input[type="checkbox"] { display: none; } #formulario_dona .botones input[type="radio"] + label, #formulario_dona .botones input[type="checkbox"] + label { line-height: 2.5rem; } #formulario_dona .botones input[type="radio"]:disabled + label, #formulario_dona .botones input[type="checkbox"]:disabled + label { color: #ccc !important; cursor: not-allowed; } /* #formulario_dona .botones input[type="radio"]:checked:disabled + label:after, #formulario_dona .botones input[type="checkbox"]:checked:disabled + label:after { border-color: #ccc; } #formulario_dona .botones input[type="radio"] + label:before, #formulario_dona .botones input[type="checkbox"] + label:before { content: ""; width: 26px; height: 26px; float: left; margin-right: 0.5em; border: 2px solid #ccc; background: #fff; margin-top: 0.5em; } #formulario_dona .botones input[type="radio"] + label:before { border-radius: 100%; } */ #formulario_dona .botones input[type="radio"]:checked + label, #formulario_dona .botones input[type="checkbox"]:checked + label { background: #B46022; } /* #formulario_dona .botones input[type="radio"]:checked + label:after { content: ""; width: 0; height: 0; border: 7px solid #0fbf12; float: left; margin-left: -1.85em; margin-top: 1em; border-radius: 100%; } #formulario_dona .botones input[type="checkbox"]:checked + label:after { content: ""; width: 12px; height: 6px; border: 4px solid #0fbf12; float: left; margin-left: -1.95em; border-right: 0; border-top: 0; margin-top: 1em; transform: rotate(-55deg); } */ #formulario_dona .botones input[type="radio"]:checked + label:before, #formulario_dona .botones input[type="checkbox"]:checked + label:before { /*border-color: #0fbf12;*/ } #formulario_dona .botones input[type="radio"]:checked:disabled + label, #formulario_dona .botones input[type="checkbox"]:checked:disabled + label { background: #ccc; color: #fff !important; } #formulario_dona .botones input[type="radio"]:checked:disabled + label:before, #formulario_dona .botones input[type="checkbox"]:checked:disabled + label:before { border-color: #bdbdbd; } #anonima { background-color: #fff; border: 0.1em solid #FAAC34; border: 0.1rem solid #FAAC34; height: 1.6em; margin-top: 0.2em; margin-top: 0.2rem; width: 1.6em; display: inline-block; } #anonima_label { display: inline-block; padding-left: 1em; padding-left: 1rem; width: auto; display: inline-block; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; font-size: 1.3em; font-size: 1.3rem; font-weight: 100; text-align: left; } /*==========================*/ /*==== DEFINO EL FOOTER ====*/ /*==========================*/ /*==== Defino el contenedor principal ====*/ .footer { box-sizing: border-box; margin: 0 auto; margin: 0 auto; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*==============================*/ /*==== DEFINO EL PRE-FOOTER ====*/ /*==============================*/ /*==== Defino los contenedores ====*/ .pie_cont { box-sizing: border-box; margin: 0 auto; padding: 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .pie_main { box-sizing: border-box; margin: 0 auto; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-around; -webkit-justify-content: space-around; justify-content: space-around; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } /*======================*/ /*==== Menú del pie ====*/ /*======================*/ .columna_pie { box-sizing: border-box; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .pie_columna > p { box-sizing: border-box; margin: 0.625em auto 0.625em 0; margin: 0.625rem auto 0.625rem 0; padding: 0 0.5em 0.3em; padding: 0 0.5rem 0.3rem; position: relative; text-align: left; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .pie_columna > p { margin-top: 1em; margin-top: 1rem; padding: 0 0.5em 0.3em; padding: 0 0.5rem 0.3rem; } .pie_columna > img { padding-top: 1.5rem; } } #pie_cont div .pie_tit { margin: 0.625em auto; margin: 0.625rem auto; text-align: center; color: #000; font-size: 1.2em; font-size: 1.2rem; font-weight: 700; line-height: 1.6em; line-height: 1.6rem; text-transform: uppercase; } .pie_tit_borde { border-bottom: 0.08em solid #333C87; border-bottom: 0.08rem solid #333C87; } .pie_texto { color: #000; font-size: 1.2em; font-size: 1.2rem; line-height: 1.6em; line-height: 1.6rem; } .pie_columna > ul, .pie_columna > div > ul { box-sizing: border-box; list-style: none; min-height: 2em; min-height: 2rem; padding-left: 1em; padding-right: 1rem; padding-top: 0.425em; padding-top: 0.425rem; padding-right: 1.5em; padding-right: 1.5rem; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #pie_cont div ul.pie_enlaces { display:block; } #pie_cont div ul.pie_enlaces li { text-align: left; margin: 0 auto 0 0; } #pie_cont div ul.pie_enlaces li a { text-align: left; color: #000; font-size: 1.2em; font-size: 1.2rem; font-weight: 500; line-height: 1.6em; line-height: 1.6rem; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .pie_columna > ul, .pie_columna > div > ul { padding-left: 0.5em; padding-left: 0.5rem; } } .pie_columna > ul > li, .pie_columna > div > ul > li { box-sizing: border-box; margin: 0.3em auto; margin: 0.3rem auto; padding: 0 0 0.3em 0; padding: 0 0 0.3rem 0; position: relative; text-align: left; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .pie_columna > ul > li > a, .pie_columna > div > ul > li > a { color: #fff; font-size: 1em; font-size: 1rem; line-height: 1.3em; line-height: 1.3rem; text-decoration: none; } .pie_columna > ul > li > a:hover { color: #fff; text-decoration: none; } .pie_columna > ul > li > a:focus { outline: 0.1em solid #fff; outline: 0.1rem solid #fff; } .pie_li_texto { color: #000; font-size: 1.2em; font-size: 1.2rem; font-weight: 300; line-height: 1.6em; line-height: 1.6rem; } /*===========================*/ /*==== DEFINO LA LEYENDA ====*/ /*===========================*/ /*==== Defino el contenedor ====*/ .leyenda_cont { box-sizing: border-box; margin: 0 auto; padding: 0.8em 0; padding: 0.8rem 0; position: relative; text-align: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .leyenda_main { box-sizing: border-box; margin: 0 auto; padding: 0; position: relative; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: space-between; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media only screen and (min-width: 50em) and (max-width: 78.4999em) { .leyenda_main { padding: 0 0.5em; padding: 0 0.5rem; } } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .leyenda_cont { height: 20em; height: 20rem; } .leyenda_main { height: 18em; height: 18rem; padding: 0 0.5em; padding: 0 0.5rem; } } .leyenda_main > a:focus { outline: 1px solid #fff; } .leyenda_main > a > img { padding: 0 0 0 2em; padding: 0 0 0 2rem; } .leyenda_main > p { box-sizing: border-box; list-style: none; margin: 0 auto 0 0; position: relative; text-align: left; color: #fff; font-size: 0.8em; font-size: 0.8em; font-weight: 300; line-height: 1.2em; line-height: 1.2rem; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .leyenda_main > ul { box-sizing: border-box; list-style: none; margin: 0 0 0 auto; padding: 0; position: relative; text-align: right; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .leyenda_main > ul > li { box-sizing: border-box; list-style: none; margin: 0; padding: 0 0 0 2em; padding: 0 0 0 2rem; position: relative; text-align: left; color: #fff; font-size: 0.875em; font-size: 0.875rem; font-weight: 300; line-height: 1.2em; line-height: 1.2rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .leyenda_main > ul li > a { box-sizing: border-box; position: relative; text-align: center; color: #fff; font-size: 0.875em; font-size: 0.875rem; font-weight: 300; line-height: 1.2em; line-height: 1.2rem; text-decoration: none; } .leyenda_main > ul li > a:focus { outline: 0.1em solid #fff; } .leyenda_main > ul li > a:hover { color: #333C87; text-decoration: none; } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .leyenda_main > p { margin: 1em auto 0; margin: 1rem auto 0; text-align: left; width: 100%; } .leyenda_main > ul { margin: 0 0 1em auto; margin: 0 0 1rem auto; width: 100%; } .leyenda_main > ul > li { padding: 0.4em 0; padding: 0.4rem 0; margin: 0 auto 0 0; width: 100%; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } } /*======================================*/ /*==== DEFINO EL MENSAJE DE COOKIES ====*/ /*======================================*/ .cookies_cont { background-color: rgba(102, 0, 0, 0.9); box-sizing: border-box; bottom: 0; margin: 0 auto; min-height: 2em; min-height: 2rem; padding: 0.3em; padding: 0.3rem; position: fixed; text-align: left; width: 100%; z-index: 4000; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .cookies { box-sizing: border-box; margin: 0 auto; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: left; top: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .cookies p { box-sizing: border-box; margin: 0; padding: 0; position: relative; text-align: left; vertical-align: middle; width: 100%; color: #fff; font-size: 0.9125em; font-size: 0.9125rem; line-height: 1.2em; line-height: 1.2rem; text-decoration: none; } .cookies p a { color: #fff; } .cookies_input { background-color: #767676; border: 0.1em solid #fff; border: 0.1rem solid #fff; box-sizing: border-box; cursor: pointer; height: 1.4125em; height: 1.4125rem; padding: 0.2em 0.6em; padding: 0.2rem 0.6rem; position: relative; width: 6em; width: 6rem; color: #fff; font-size: 0.8125em; font-size: 0.8125rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; } .cookies_input:hover { background-color: #DBD621; border: 0.1em solid #fff; border: 0.1rem solid #fff; color: #fff; } @media only screen and (min-width: 10px) and (max-width: 49.9999em) { .cookies p { font-size: 0.7em; font-size: 0.7rem; line-height: 1.1em; line-height: 1.1rem; } .cookies_input { height: 1.4125em; height: 1.4125rem; padding: 0.1em 0.3em; padding: 0.1rem 0.3rem; position: relative; width: 5em; width: 5rem; color: #fff; font-size: 0.7em; font-size: 0.7rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; } } /*==============================*/ /*==== DEFINO CARGANDO AJAX ====*/ /*==============================*/ .cargando_ajax { background-color: #fff; box-sizing: border-box; display: none; height: 100%; opacity: 0.6; position: absolute; text-align: center; top: 0; vertical-align: middle; width: 100%; display: none; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .cargando_ajax img { height: 4em; height: 4rem; margin: 0 auto; text-align: center; vertical-align: middle; width: 4em; width: 4rem; } /*==============================*/ /*==== DEFINO LOS AVISOS ====*/ /*==============================*/ .datoserr { box-sizing: border-box; list-style: none; margin: 0.4em auto; margin: 0.4rem auto; min-height: 2em; min-height: 2rem; padding: 0; position: relative; text-align: left; flex-grow: 1; flex-shrink: 1; flex-basis: auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .aviso_ok { background-color: rgba(255, 255, 255, 1); box-sizing: border-box; margin: 0; padding: 0.4em 0.6em; padding: 0.4rem 0.6rem; position: relative; text-align: left; width: 100%; color: #333; font-size: 1em; font-size: 1rem; line-height: 1.5em; line-height: 1.5rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; -webkit-animation: aviso_ok_movie 3s 1; animation: aviso_ok_movie 3s 1; } @-webkit-keyframes aviso_ok_movie { 0% {background-color: rgba(255, 255, 255, 1);} 1% {background-color: rgba(126, 185, 137, 0.8);} 20% {background-color: rgba(126, 185, 137, 0.6);} 40% {background-color: rgba(126, 185, 137, 0.4);} 60% {background-color: rgba(126, 185, 137, 0.2);} 100% {background-color: rgba(126, 185, 137, 0);} } @keyframes aviso_ok_movie { 0% {background-color: rgba(255, 255, 255, 1);} 1% {background-color: rgba(126, 185, 137, 0.8);} 20% {background-color: rgba(126, 185, 137, 0.6);} 40% {background-color: rgba(126, 185, 137, 0.4);} 60% {background-color: rgba(126, 185, 137, 0.2);} 100% {background-color: rgba(126, 185, 137, 0);} } .aviso_wrong { background-color: rgba(255, 255, 255, 1); box-sizing: border-box; margin: 0.6em 0; margin: 0.6rem 0; padding: 0; position: relative; text-align: left; width: 100%; color: #333; font-size: 1em; font-size: 1rem; line-height: 1.5em; line-height: 1.5rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; -webkit-animation: aviso_wrong_movie 3s 1; animation: aviso_wrong_movie 3s 1; } @-webkit-keyframes aviso_wrong_movie { 0% {background-color: rgba(255, 255, 255, 1);} 1% {background-color: rgba(255, 153, 0, 0.8);} 20% {background-color: rgba(255, 153, 0, 0.6);} 40% {background-color: rgba(255, 153, 0, 0.4);} 60% {background-color: rgba(255, 153, 0, 0.2);} 100% {background-color: rgba(255, 153, 0, 0);} } @keyframes aviso_wrong_movie { 0% {background-color: rgba(255, 255, 255, 1);} 1% {background-color: rgba(255, 153, 0, 0.8);} 20% {background-color: rgba(255, 153, 0, 0.6);} 40% {background-color: rgba(255, 153, 0, 0.4);} 60% {background-color: rgba(255, 153, 0, 0.2);} 100% {background-color: rgba(255, 153, 0, 0);} } /*============================*/ /*==== DEFINO LOS BOTONES ====*/ /*============================*/ /*==== Botones normales ====*/ .boton { background-color: #333C87; border: 0 solid #fff; border-radius: 10px; box-sizing: border-box; padding: 0.8em 1.4em; padding: 0.8rem 1.4rem; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .boton:hover { background-color: #89878B; } .boton > a { color: #fff; font-size: 1.5em; font-size: 1.5rem; font-weight: 700; line-height: 1.5em; line-height: 1.5rem; text-align: center; text-decoration: none; } .boton:hover > a { color: #fff; text-decoration: none; } .boton > a:hover { color: #fff; text-decoration: none; } .boton > a:focus { outline: 0.2rem solid #fff; } .boton_top { background-color: #333C87; border: 0 solid #fff; border-radius: 10px; box-sizing: border-box; padding: 0.4em 1em; padding: 0.4rem 1rem; position: relative; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .boton_top:hover { background-color: #89878B; } .boton_top > a { color: #fff; font-size: 1.3em; font-size: 1.3rem; font-weight: 700; line-height: 1.3em; line-height: 1.3rem; text-align: center; text-decoration: none; } .boton_top:hover > a { color: #fff; text-decoration: none; } .boton_top > a:hover { color: #fff; text-decoration: none; } .boton_top > a:focus { outline: 0.2rem solid #fff; } @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { .boton_top { padding: 0.2em 0.4em; padding: 0.2rem 0.4rem; } .boton_top > a { font-size: 1em; font-size: 1rem; font-weight: 700; line-height: 1em; line-height: 1rem; } } .cerrado { display:none; max-width:70%; max-height:400px; padding: 0 0 0 30px; } .cerrado img { max-width:100%; max-height:400px; padding-top:20px; } /*==============================*/ /*==== DEFINO LOS GENÉRICOS ====*/ /*==============================*/ /*==== Efectos texto ====*/ .no_subrayado { text-decoration: none; } .subrayado { text-decoration: underline; } .negrita { font-weight: bold; } .negrita_900 { font-weight: 900; } .w_media { font-weight: 700; } .normal { font-weight: normal; } .cursiva { font-style: oblique; } /*==========================*/ /*==== Colores de texto ====*/ /*==========================*/ .color_blanco { color: #fff; } .color_blanco:hover { color: #fff; } .color_blanco2 { color: #fff; } .color_blanco2:hover { color: #000; text-decoration: none; } .color_blanco2:hover a { color: #000; text-decoration: none; } .color_primario { color: #333C87; } .color_secundario { color: #89878B; } .color_terciario { color: #333C87; } .color_texto { color: #5A5A5A; } .color_rojo { color: #b20000; } .color_negro { color: #000; } /*==========================*/ /*==== Colores de Fondo ====*/ /*==========================*/ .fondo_blanco { background-color: #fff; } .fondo_blanco_trans { background-color: rgba(255,255,255,0.5); } .fondo_primario { background-color: #333C87; } .fondo_primario_boton { background-color: #333C87; } .fondo_primario_boton:hover p { color:#000; } .fondo_primario_trans { background-color: rgba(97,97,97,0.5); } .fondo_secundario { background-color: #B46022; } .fondo_secundario_boton { background-color: #B46022; } .fondo_secundario_boton:hover p { color:#000; } .fondo_terciario { background-color: #333C87; } .fondo_cuaternario { background-color: #222; } .fondo_rojo { background-color: #b20000; } .fondo_gris_oscuro { background-color: #444; } .fondo_gris { background-color: #999; } .fondo_gris_claro { background-color: #f5f5f5; } .fondo_negro { background-color: #000; } .fondo_negro_trans { background-color: rgba(68,68,68,0.5); } .fondo_presupuesto { background-position: center center; background-repeat: no-repeat; background-origin: content-box; } .fondo_cuadro_blanco:hover { background-color: #ffffff; } .fondo_cuadro_gris:hover { background-color: #f5f5f5; } .fondo_donaciones { background-image: url(../imagenes/fondo-donaciones.png); } /*================*/ /*==== Bordes ====*/ /*================*/ .border_portfolio { border: 4px solid #fff; } .border_bottom_header { border-bottom: 0.2em double #056C3C; border-bottom: 0.2rem double #056C3C; } .border_bottom_pie { border-bottom: 0.0625em solid #555; border-bottom: 0.0625rem solid #555; } .border_textos { border: 4px double #000; } .border_gris { border: 0.1em solid #f9f9f9; border: 0.1rem solid #f9f9f9; } .border_opiniones { border: 0.2em solid #000; border: 0.2rem solid #000; border-radius: 0.8rem; } .border_opiniones:hover { background-color: #f2f2f2; } .borde_gris_izq { border-left: 0.1em solid #f9f9f9; border-left: 0.1rem solid #f9f9f9; } .border_negro { border: 1px solid #ddd; } .border_blanco { border-bottom: 2px solid #fff; } .border_tit { border-bottom: 0.2em solid #333C87; border-bottom: 0.2rem solid #333C87; } .borde_cuadros { border: 1px solid #2E4196; padding: 1.4em; padding: 1.4rem; } .borde_primario { border-bottom: 5px solid #333C87; } .borde_secundario { border-bottom: 5px solid #89878B; } .borde_terciario { border-bottom: 3px solid #333C87; } .borde_separador { border-bottom: 1px solid #d2d2d2; } .borde_cambio { border-bottom: 5px solid #333C87; } .borde_cambio:hover { border-bottom: 5px solid #333C87; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .borde_cuadros { padding: 0 1em 1.4em; padding: 0 1rem 1.4rem; } } .opiniones_borde { border-bottom: 0.2rem solid #f5f5f5; } .caja_elevada { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } /*======================*/ /*==== Alineaciones ====*/ /*======================*/ .align_left { text-align: left; } .align_center { text-align: center; } .align_right { text-align: right; } .margen_centro { margin: 0 auto; } .margen_right { margin: 0 0 0 auto; } .margen_left { margin: 0 auto 0 0; } /*=================*/ /*==== Padding ====*/ /*=================*/ .padding_titulo { padding: 1em 0 0.5em; padding: 1rem 0 0.5rem; } .padding_introduccion { padding: 0.5em 1em 0; padding: 0.5rem 1rem 0; } .opiniones_padding { padding: 1em; padding: 1rem; } .botones_padding { padding: 1em; padding: 1rem; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .opiniones_padding { margin-bottom: 1em; margin-bottom: 1rem; } } .padding_left_1_pie { padding-left: 1em; padding-left: 1rem; } .padding_right_1_pie { padding-right: 1em; padding-right: 1rem; } .padding_bottom_1 { padding-bottom: 1em; padding-bottom: 1rem; } .padding_bottom_2 { padding-bottom: 2em; padding-bottom: 2rem; } .padding_bottom_3 { padding-bottom: 3em; padding-bottom: 3rem; } .padding_top_1 { padding-top: 1em; padding-top: 1rem; } .padding_top_2 { padding-top: 2em; padding-top: 2rem; } .padding_top_3 { padding-top: 3em; padding-top: 3rem; } .padding_left_1 { padding-left: 1em; padding-left: 1rem; } .padding_left_2 { padding-left: 2em; padding-left: 2rem; } .padding_left_3 { padding-left: 3em; padding-left: 3rem; } .padding_right_1 { padding-right: 1em; padding-right: 1rem; } .padding_right_2 { padding-right: 2em; padding-right: 2rem; } .padding_right_3 { padding-right: 3em; padding-right: 3rem; } .padding_pie { padding: 2.4375em 0 1.875em; padding: 2.4375rem 0 1.875rem; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .padding_movil { padding-left: 0.7em; padding-left: 0.7rem; padding-right: 0.7em; padding-right: 0.7rem; } .padding_left_2 { padding-left: 0.7em; padding-left: 0.7rem; padding-right: 0.7em; padding-right: 0.7rem; } .padding_right_2 { padding-left: 0.7em; padding-left: 0.7rem; padding-right: 0.7em; padding-right: 0.7rem; } .padding_left_1_pie { padding-left: 0; } .padding_right_1_pie { padding-right: 0; } .padding_pie { padding: 0 0 1.875em; padding: 0 0 1.875rem; } .padding_cuadro { padding-left: 0.4rem; padding-right: 0.4rem; } } @media only screen and (min-width: 10px) and (max-width: 78.4999em) { .padding_movil { padding: 0 0.4em; padding: 0 0.4rem; } } /*==================*/ /*==== Margenes ====*/ /*==================*/ #margen_servicios { margin-top: -7em; margin-top: -7rem; z-index: 3000; } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { #margen_servicios { margin-top: 0; z-index: auto; } } .margen_0 { margin: 0; } .margen_bottom_1 { margin-bottom: 1em; margin-bottom: 1rem; } .margen_bottom_2 { margin-bottom: 2em; margin-bottom: 2rem; } .margen_bottom_3 { margin-bottom: 3em; margin-bottom: 3rem; } .margen_top_1 { margin-top: 1em; margin-top: 1rem; } .margen_top_2 { margin-top: 2em; margin-top: 2rem; } .margen_top_3 { margin-top: 3em; margin-top: 3rem; } .margen_top_4 { margin-top: 3em; margin-top: 3rem; } .margen_right_2 { margin-right: 2em; margin-right: 2rem; } @media only screen and (min-width: 10px) and (max-width: 61.9999rem) { .margen_bottom_2 { margin-bottom: 1em; margin-bottom: 1rem; } .margen_top_4 { margin-top: 4em; margin-top: 4rem; } } /*========================*/ /*==== Efectos cursor ====*/ /*========================*/ .pointer { cursor: pointer; } /*====================*/ /*==== Posiciones ====*/ /*====================*/ .bottom_0 { bottom: 0; } /*=====================*/ /*==== Altos fijos ====*/ /*=====================*/ .alto_6_min { min-height: 6.7em; min-height: 6.7rem; } .alto_10 { height: 12em; height: 12rem; } /*======================*/ /*==== Anchos fijos ====*/ /*======================*/ .ancho_max_100 { max-width: 100%; } .ancho_23_rem { max-width: 23em; max-width: 23rem; } .ancho_260_px { width: 260px; } /*============================*/ /*==== Anchos porcentajes ====*/ /*============================*/ .ancho_10_porc { width: 10%; } .ancho_18_porc { width: 18%; } .ancho_20_porc { width: 20%; } .ancho_boton { width: 23%; } .ancho_boton_2 { width: 35%; } .ancho_20_porc_pie { width: 20%; } .ancho_23_porc { width: 23%; } .ancho_25_porc { width: 25%; } .ancho_30_porc { width: 30%; } .ancho_30_porc_pie { width: 30%; } .ancho_31_porc { width: 31%; } .ancho_32_porc { width: 32%; } .ancho_33_porc { width: 33%; } .ancho_33_porc_pie { width: 28%; } .ancho_34_porc { width: 34%; } .ancho_34_porc_pie { width: 34%; } .ancho_40_porc { width: 40%; } .ancho_40_porc2 { width: 40%; } .ancho_46_porc { width: 46%; } .ancho_48_porc { width: 48%; } .ancho_50_porc { width: 50%; } .ancho_54_porc { width: 54%; } .ancho_60_porc { width: 60%; } .ancho_65_porc { width: 65%; } .ancho_69_porc { width: 69%; } .ancho_70_porc { width: 70%; } .ancho_75_porc { width: 75%; } .ancho_80_porc { width: 80%; } .ancho_96_porc { width: 96%; } .ancho_100_porc { max-width: 100%; width: 100%; } @media only screen and (min-width: 10px) and (max-width: 69.9999rem) { .ancho_31_porc { width: 100%; } .ancho_46_porc { width: 100%; } .ancho_54_porc { width: 100%; } .ancho_69_porc { width: 100%; } } @media only screen and (min-width: 50rem) and (max-width: 69.9999rem) { .ancho_25_porc { width: 50%; } .ancho_30_porc { width: 48%; } .ancho_40_porc { width: 48%; } .ancho_60_porc { width: 48%; } .ancho_65_porc { width: 100%; } .ancho_70_porc { width: 48%; } } @media only screen and (min-width: 50rem) and (max-width: 61.9999rem) { .ancho_18_porc { width: 30%; } .ancho_20_porc { width: 50%; } .ancho_20_porc_pie { width: 50%; } .ancho_boton { width: 48%; } .ancho_23_porc { width: 48%; } .ancho_30_porc_pie { width: 100%; } .ancho_33_porc_pie { width: 100%; } .ancho_34_porc_pie { width: 100%; } .ancho_40_porc2 { width: 100%; } .ancho_50_porc { width: 100%; } .ancho_65_porc { width: 100%; } } @media only screen and (min-width: 10px) and (max-width: 49.9999rem) { .ancho_400_px { width: 100%; max-width: 100%; } .ancho_18_porc { width: 100%; } .ancho_20_porc { width: 50%; } .ancho_boton { width: 90%; } .ancho_boton_2 { width: 90%; } .ancho_20_porc_pie { width: 100%; } .ancho_23_porc { width: 100%; } .ancho_25_porc { width: 100%; } .ancho_30_porc { width: 100%; } .ancho_30_porc_pie { width: 100%; } .ancho_32_porc { width: 100%; } .ancho_33_porc { width: 100%; } .ancho_33_porc_pie { width: 100%; } .ancho_34_porc_pie { width: 100%; } .ancho_34_porc { width: 100%; } .ancho_40_porc { width: 100%; } .ancho_40_porc2 { width: 100%; } .ancho_48_porc { width: 100%; } .ancho_50_porc { width: 100%; } .ancho_60_porc { width: 100%; } .ancho_65_porc { width: 100%; } .ancho_70_porc { width: 100%; } .ancho_80_porc { width: 100%; } .ancho_75_porc { margin-top: 1rem; width: 100%; } } @media only screen and (min-width: 10px) and (max-width: 30em) { .ancho_48_porc { width: 100%; } }