@charset "UTF-8";
/* RM */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-size: 16px;
}
h1,
h2,
h3,
h4,
ol,
p,
ul {
margin: 0;
padding: 0;
}
li {
display: block;
vertical-align: top;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: normal;
}
a {
text-decoration: none;
color: inherit;
-webkit-transition: .3s;
transition: .3s;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
/* FIN RM */
/* VARIABLES */
/* MIXINS */
/* MENU RESPONSIVO */
/* CLASES Y VARIABLES */
.bg-black-txt-white, #responsive-menu li {
color: white;
background: black;
}
/* FIN CLASES Y VARIABLES */
img.logoresp {
display: none;
position: absolute;
left: 15px;
top: -3px;
width: 140px;
}
@media screen and (max-width: 860px) {
img.logoresp {
display: block;
}
}
#respmenu-container {
display: none;
position: fixed;
z-index: 9999999999999999999999;
top: 0px;
width: 100%;
height: 86px;
background: url("../img/menu/barra-resp@2x.jpg") center top no-repeat;
background-size: 946px 86px;
}
@media screen and (max-width: 860px) {
#respmenu-container {
display: block;
}
}
#responsive-menu {
display: none;
top: 0px;
float: left;
position: relative;
z-index: 99999999999999999999999;
background: none;
margin-top: 0px !important;
}
#responsive-menu li {
display: inline;
float: left;
text-align: center;
}
#responsive-menu li:first-child {
margin-top: 0px;
}
#responsive-menu li a {
display: block;
color: black;
text-decoration: none;
line-height: 86px;
width: 100%;
text-align: center;
}
#responsive-menu li a:hover {
/* @extend .bg-black-txt-white;*/
}
@media screen and (max-width: 860px) {
#responsive-menu {
display: inline;
width: 170px;
/* Ancho (vista móvil) */
float: right;
/* Dejamos de flotar el menú ya que el ancho es 100% */
padding-top: 86px;
/*Relleno por arriba a partir del cual se mostrarán los elementos */
}
#responsive-menu ul {
position: absolute;
/* box-shadow: 0 1px 2px rgba(0,0,0,.5); Sombra al menú */
max-height: 0;
overflow: hidden;
z-index: 999999999999999;
background: none;
width: 170px;
}
#responsive-menu ul li {
background: #ff4e53;
/* Color de fondo */
color: white;
/* Borde inferior tamaño-tipo-color */
float: none;
display: block;
font-weight: 400;
font-size: 12px;
padding-top: 5px;
-webkit-text-stroke: 1px white;
}
#responsive-menu ul li.redes a {
font-weight: 400;
font-size: 12px;
padding: 10px 5px 10px 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: white;
height: auto;
line-height: normal;
width: auto;
display: inline-block;
/*border-bottom:2px solid rgba(255,255,255,1);*/
}
#responsive-menu ul li.redes a:hover {
/* background:rgba($blanco,0.8);
color:rgba(0,0,0,1);*/
/* Color de fondo para cada enlace al pasar el cursor */
}
#responsive-menu ul li ul {
position: relative;
}
#responsive-menu ul li ul li {
-webkit-text-stroke: 0.5px white;
padding-top: 0px;
}
#responsive-menu ul li ul li:last-child {
height: auto;
padding-bottom: 10px;
}
#responsive-menu ul li ul li a {
font-weight: 400;
font-size: 10px;
padding: 5px 5px 5px 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: white;
height: auto;
line-height: normal;
/*border-bottom:2px solid rgba(255,255,255,1);*/
}
#responsive-menu ul li ul li a:hover {
/* background:rgba($blanco,0.8);
color:rgba(0,0,0,1);*/
/* Color de fondo para cada enlace al pasar el cursor */
}
#responsive-menu ul li div.raya-blanca {
width: 94px;
height: 2px;
background: white;
margin: 5px auto 0px auto;
}
#responsive-menu ul li:last-child {
/*height:50px;
background:url("../img/responsivo/fondo-menu-resp@2x.png") left top no-repeat;
background-size:202px 25px;*/
}
#responsive-menu ul li.ultimo {
border-bottom: 0px solid black;
}
#responsive-menu ul li.active {
background: rgba(80, 80, 80, 0.5);
/* Color de fondo */
padding: 10px 5px 10px 5px;
color: rgba(0, 0, 0, 0.8);
}
#responsive-menu ul li a {
font-weight: 400;
font-size: 12px;
padding: 10px 5px 10px 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: white;
height: auto;
line-height: normal;
width: 170px;
/*border-bottom:2px solid rgba(255,255,255,1);*/
}
#responsive-menu ul li a:hover {
/* background:rgba($blanco,0.8);
color:rgba(0,0,0,1);*/
/* Color de fondo para cada enlace al pasar el cursor */
}
#responsive-menu ul.open-responsive-menu {
max-height: 600px;
/* Máximo alto para el menú desplegado */
-webkit-transition: max-height .5s;
transition: max-height .5s;
/* Efecto en el despliegue del menú */
}
}
#menunav {
display: block;
}
@media screen and (max-width: 860px) {
#menunav {
display: none;
}
}
#menu-h1 {
display: inline-block;
}
@media screen and (max-width: 860px) {
#menu-h1 {
display: none;
}
}
#nav-responsive {
display: none;
/* Ocultamos el enlace */
background: url("../img/menu/botonmenu_responsivo@2x.png") no-repeat 56px 24px;
/* Imagen que desplegará el menú al hacer click */
background-size: 57px 36px;
text-decoration: none;
/* Sin subrayado */
float: right;
/* Flotado a la derecha */
width: 170px;
/* Ancho */
height: 86px;
/* Alto */
position: absolute;
right: 0px;
/* Derecha */
top: 0px;
/* Arriba */
opacity: 1;
/* Opacidad */
}
#nav-responsive.nav-active {
width: 170px;
right: 0;
background: #ffb81d url("../img/menu/botonmenu_cerrar_responsivo@2x.png") no-repeat 63px 24px;
background-size: 43px 43px;
height: 86px;
padding-bottom: 10px;
opacity: 1;
/* Opacidad */
margin-top: -2px !important;
}
@media screen and (max-width: 860px) {
#nav-responsive {
display: block;
}
}
@media screen and (max-width: 860px) {
.off-responsive {
display: none !important;
}
}
.on-responsive {
display: none !important;
}
@media screen and (max-width: 860px) {
.on-responsive {
display: block !important;
}
}
.on-responsive-inline {
display: none !important;
}
@media screen and (max-width: 860px) {
.on-responsive-inline {
display: inline-block !important;
}
}
/* CSS GENERAL */
body {
background: url("../img/fondo_kikapu-blanco-med@2x.jpg") center top repeat-y;
background-size: 1920px auto;
}
@media screen and (max-width: 1250px) {
body {
background: none;
}
}
.gracias-contacto {
text-align: right;
}
.border-box {
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.multiply, section#home div.contenido div.linea-diagonal, section#historia div.pleca-verde, section#historia div.pleca-naranja, section#tipis div.pleca, .pleca-diagonal-amarilla, div.pleca-diagonal-roja, div.pleca-diagonal-verde {
mix-blend-mode: multiply;
}
.enlace {
text-decoration: underline;
}
.m-auto {
margin: 0 auto;
}
.m-top-20 {
margin-top: 20px;
}
.m-top-40 {
margin-top: 40px;
}
.center-txt {
text-align: center;
}
.oculto {
display: none;
}
.show {
display: block;
}
.uppercase, #responsive-menu li, section.actividades,
h1, header nav#menunav > ul > li, section#home div.contenido, .bloque-rojo, section#nosotros div.contenido ul.subsecciones li, section#historia div.contenido div.texto div.ver-act, section#horarios div.contenido div.wrap div.preguntas, section#horarios div.contenido div.wrap div.contacto, section#contacto div.contenido-right ul.botones li, section#mision-vision h2, section#horarios div.contenido h3, section#horarios div.contenido div.wrap span, section#tipis div.contenido p, section#faq div.contenido ul li.titulo span, section#contacto div.mapa div.direccion h2, section#contacto div.contenido-right form input[type=submit], section#contacto div.contenido-right ul li, section#prefooter div.contenido h2, section#prefooter div.contenido h3, section#prefooter div.contenido p, footer div.left p, footer div.right p {
text-transform: uppercase;
}
.inline, header h1, header nav#menunav, header nav#menunav > ul > li a, header nav#menunav > ul > li img, section#nosotros div.contenido h1, section#nosotros div.contenido div.texto, .bloque-rojo, section#nosotros div.contenido ul.subsecciones li, section#historia div.contenido div.texto div.ver-act, section#horarios div.contenido div.wrap div.preguntas, section#horarios div.contenido div.wrap div.contacto, section#contacto div.contenido-right ul.botones li, section#historia div.contenido div.texto h1, section#mision-vision div.mision, section#mision-vision div.vision, section#horarios div.contenido div.wrap span, section#precios div.contenido div.linea1, section#precios div.contenido div.linea2, section#precios div.contenido ul li, section#slider div.slider-holder, section#slider img.flecha-real, section#tipis div.contenido img, section#contacto div.mapa, section#contacto div.mapa div.direccion h2 {
display: inline-block;
vertical-align: top;
}
.absolute-center {
position: absolute;
left: 0;
right: 0;
margin: auto;
display: block;
}
.pleca-roja {
position: relative;
z-index: 0;
mix-blend-mode: multiply;
opacity: 1;
background: #bf1f24;
width: 397px;
height: 68px;
}
.textos-slider-img {
position: relative;
z-index: 200;
}
.trans-all, header nav#menunav > ul > li, header nav#menunav > ul > li.redes, .bloque-rojo, section#nosotros div.contenido ul.subsecciones li, section#historia div.contenido div.texto div.ver-act, section#horarios div.contenido div.wrap div.preguntas, section#horarios div.contenido div.wrap div.contacto, section#contacto div.contenido-right ul.botones li, section#slider div.slider-holder div.flecha-cont {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.max-wrapper {
max-width: 1280px;
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
background: white;
}
.invert {
-webkit-filter: invert(1);
filter: invert(1);
}
.sombraext {
-webkit-box-shadow: 0px 0px 40px black;
box-shadow: 0px 0px 40px black;
}
.hide-menu {
margin-right: -487px;
}
.mas,
.cerrar {
cursor: hand;
cursor: pointer;
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin2 {
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes spin2 {
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.rotar-h1, section#nosotros div.contenido h1, section#historia div.contenido div.texto h1, section#mision-vision h2 {
/* IE 9 */
-webkit-transform: rotate(270deg);
/* Chrome, Safari, Opera */
transform: rotate(270deg);
}
div.contenido {
/* @extend .inline;*/
}
body {
font-family: "Oswald", sans-serif;
font-size: 17px;
color: black;
}
header {
position: fixed;
display: none;
top: 0px;
left: 0;
right: 0;
z-index: 10000;
max-width: 1280px;
margin: 0 auto;
}
header .max-wrapper {
background: none;
}
header h1 {
position: relative;
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/menu/barra_menu_logo.png") top right no-repeat;
background-size: 808px 187px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
width: 240px;
height: 140px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
header h1 {
background: url("../img/menu/barra_menu_logo@2x.png") top right no-repeat;
background-size: 808px 187px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
header h1 {
background: url("../img/menu/barra_menu_logo@2x.png") top right no-repeat;
background-size: 808px 187px;
}
}
header h1 img {
margin-top: 15px;
max-width: 150px;
margin-left: 10px;
}
header nav#menunav {
float: right;
-webkit-transition: margin-right 1s;
transition: margin-right 1s;
vertical-align: middle;
height: 83px;
}
header nav#menunav:hover {
height: 250px;
}
header nav#menunav > ul {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/menu/barra_menu.png") left top no-repeat;
background-size: 1092px 83px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
height: 83px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
header nav#menunav > ul {
background: url("../img/menu/barra_menu@2x.png") left top no-repeat;
background-size: 1092px 83px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
header nav#menunav > ul {
background: url("../img/menu/barra_menu@2x.png") left top no-repeat;
background-size: 1092px 83px;
}
}
header nav#menunav > ul > li {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
height: 83px;
color: white;
text-shadow: 0px 0px 5px #000;
font-size: 14px;
line-height: 14px;
font-weight: 700;
padding: 0px 25px;
}
header nav#menunav > ul > li ul {
display: none;
position: absolute;
top: 100%;
margin-top: 0;
width: 100%;
left: 0;
z-index: 50;
}
header nav#menunav > ul > li ul.resp {
display: block;
}
header nav#menunav > ul > li ul li {
position: relative;
display: block;
max-width: 92px;
text-align: center;
margin: 0 auto;
border-top: 2px solid white;
padding: 10px 0px;
}
header nav#menunav > ul > li ul li:last-child {
padding-bottom: 25px;
}
header nav#menunav > ul > li:first-child {
padding: 0px 25px 0px 0px;
}
header nav#menunav > ul > li:first-child div.bola-naranja {
cursor: hand;
cursor: pointer;
width: 34px;
height: 34px;
border-radius: 34px;
background: #ff5f24;
color: white;
font-size: 18px;
text-align: center;
line-height: 34px;
text-shadow: none;
font-family: Arial, sans-serif;
}
header nav#menunav > ul > li:first-child div.bola-naranja.menos-menu {
line-height: 32px;
}
header nav#menunav > ul > li:first-child div.bola-naranja.mas-menu {
line-height: 34px;
}
header nav#menunav > ul > li.redes {
margin: 0px 0px;
padding: 0px 3px;
}
header nav#menunav > ul > li.redes.fb:hover {
background: #3c6bca;
}
header nav#menunav > ul > li.redes.in:hover {
background: #ff5f24;
}
header nav#menunav > ul > li.redes.tw:hover {
background: #42aaf2;
}
header nav#menunav > ul > li:last-child {
margin-right: 30px;
}
header nav#menunav > ul > li:hover.contacto {
background: #f14e53;
text-shadow: none;
}
header nav#menunav > ul > li:hover.actividades {
background: #42aaf2;
text-shadow: none;
}
header nav#menunav > ul > li:hover.actividades ul {
display: block;
background: #42aaf2;
}
header nav#menunav > ul > li:hover.nosotros {
background: #ffb81d;
text-shadow: none;
}
header nav#menunav > ul > li:hover.nosotros ul {
display: block;
background: #ffb81d;
}
header nav#menunav > ul > li a {
vertical-align: middle;
}
header nav#menunav > ul > li img {
vertical-align: middle;
}
section#home {
position: relative;
z-index: 6;
}
section#home img.hcut {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 78% 84%, 0% 99%);
clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 78% 84%, 0% 99%);
}
section#home img.hcut.home1 {
position: relative;
z-index: 10;
}
section#home img.hcut.home {
position: relative;
}
section#home img.hcut.home2 {
z-index: 20;
}
section#home img.hcut.home3 {
z-index: 30;
}
section#home div.img-pop {
position: absolute;
top: 0;
left: 0;
}
section#home div.contenido {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 130px;
z-index: 100;
color: white;
}
@media screen and (max-width: 1090px) {
section#home div.contenido {
top: 60px;
}
}
section#home div.contenido div.brujula-grande {
position: relative;
width: 500px;
margin: 0 auto;
text-align: center;
}
section#home div.contenido div.brujula-grande div.brujula-real {
-webkit-animation: spin 15s linear infinite;
animation: spin 15s linear infinite;
background: url("../img/home/brujula@2x.png") center top no-repeat;
background-size: 365px 365px;
min-height: 365px;
position: absolute;
left: 0;
right: 0;
top: 0;
margin: 0 auto;
}
@media screen and (max-width: 870px) {
section#home div.contenido div.brujula-grande {
width: 250px;
}
section#home div.contenido div.brujula-grande div.brujula-real {
background: url("../img/home/brujula.png") center top no-repeat;
background-size: 183px 183px;
min-height: 183px;
}
section#home div.contenido div.brujula-grande h2 {
padding-top: 52px;
font-size: 15px;
letter-spacing: 2px;
}
section#home div.contenido div.brujula-grande h3 {
font-size: 30px;
line-height: 30px;
}
section#home div.contenido div.brujula-grande h4 {
margin-top: 12px;
font-size: 12px;
letter-spacing: 2px;
}
}
section#home div.contenido div.brujula {
width: 58px;
height: 58px;
margin: 200px auto 0px auto;
position: relative;
}
@media screen and (max-width: 950px) {
section#home div.contenido div.brujula {
margin: 150px auto 0 auto;
}
}
@media screen and (max-width: 690px) {
section#home div.contenido div.brujula {
margin: 80px auto 0 auto;
}
}
@media screen and (max-width: 585px) {
section#home div.contenido div.brujula {
display: none;
}
}
section#home div.contenido div.brujula div.brujula-real-dos {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/home/flecha_down_brujula.png");
background-size: 58px 58px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
width: 58px;
height: 58px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
-webkit-animation: spin2 15s linear infinite;
animation: spin2 15s linear infinite;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#home div.contenido div.brujula div.brujula-real-dos {
background: url("../img/home/flecha_down_brujula@2x.png");
background-size: 58px 58px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#home div.contenido div.brujula div.brujula-real-dos {
background: url("../img/home/flecha_down_brujula@2x.png");
background-size: 58px 58px;
}
}
section#home div.contenido div.brujula img.flecha-down {
display: block;
margin: 0px auto;
padding-top: 24px;
line-height: 58px;
position: relative;
z-index: 1000;
}
section#home div.contenido ul.redes {
margin-top: -140px;
position: absolute;
right: 0;
background: #ff5f24;
-webkit-transform: skew(0, 10deg);
transform: skew(0, 10deg);
padding: 16px 0px;
}
section#home div.contenido ul.redes li {
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
padding: 3px 12px;
}
section#home div.contenido div.linea-diagonal {
width: 150%;
margin-left: -250px;
margin-top: 125px;
background: #f36532;
height: 5px;
position: absolute;
left: 0;
/* IE 9 */
-webkit-transform: rotate(8deg);
/* Chrome, Safari, Opera */
transform: rotate(8deg);
}
@media screen and (max-width: 1210px) {
section#home div.contenido div.linea-diagonal {
display: none;
}
}
section#home div.contenido div.linea-blanca {
width: 3px;
height: 130px;
margin: 0 auto;
margin-top: 6px;
background: white;
}
@media screen and (max-width: 1210px) {
section#home div.contenido div.linea-blanca {
display: none;
}
}
section#home div.contenido h2 {
padding-top: 105px;
font-size: 29px;
font-weight: 700;
letter-spacing: 2px;
}
section#home div.contenido h3 {
font-weight: 700;
font-size: 61px;
line-height: 61px;
}
section#home div.contenido h4 {
margin-top: 25px;
font-size: 15.5px;
color: #ff5f24;
letter-spacing: 7px;
font-weight: 700;
}
section#nosotros {
position: relative;
z-index: 5;
margin-top: -180px;
padding-top: 180px;
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/kikapu/fondo_nosotros.jpg") top center no-repeat;
background-size: 1280px 1009px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
-webkit-box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.8);
box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.8);
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#nosotros {
background: url("../img/kikapu/fondo_nosotros@2x.jpg") top center no-repeat;
background-size: 1280px 1009px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#nosotros {
background: url("../img/kikapu/fondo_nosotros@2x.jpg") top center no-repeat;
background-size: 1280px 1009px;
}
}
section#nosotros div.recuadro-naranja {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 95px;
height: 95px;
margin-top: -150px;
background: #ff5f24;
}
section#nosotros div.contenido {
padding-bottom: 274px;
text-align: right;
max-width: 580px;
width: 85%;
margin: 0 auto;
font-weight: 700;
}
@media screen and (max-width: 670px) {
section#nosotros div.contenido {
margin-top: 0px;
text-align: center;
}
}
@media screen and (max-width: 550px) {
section#nosotros div.contenido {
padding-bottom: 60px;
}
}
section#nosotros div.contenido h1 {
-webkit-transform-origin: bottom left;
color: #ff4e53;
font-size: 90px;
margin-top: 330px;
font-weight: 700;
letter-spacing: 1px;
position: relative;
z-index: 10;
margin-right: 63px;
}
@media screen and (max-width: 670px) {
section#nosotros div.contenido h1 {
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
text-align: center;
margin: 0 auto 30px auto;
-webkit-transform-origin: top;
font-size: 65px;
}
}
@media screen and (max-width: 500px) {
section#nosotros div.contenido h1 {
padding-top: 20px;
font-size: 40px;
}
}
section#nosotros div.contenido div.texto {
max-width: 502px;
margin-top: -395px;
margin-left: 0px;
position: relative;
z-index: 20;
}
@media screen and (max-width: 670px) {
section#nosotros div.contenido div.texto {
margin: 0 auto;
}
}
section#nosotros div.contenido div.texto p {
text-align: left;
font-size: 15px;
line-height: 27px;
margin-bottom: 21px;
}
@media screen and (max-width: 550px) {
section#nosotros div.contenido div.texto p {
font-size: 14px;
line-height: 23px;
}
}
section#nosotros div.contenido div.texto div.linea-roja {
margin-top: 27px;
width: 100%;
height: 3px;
background: #ff4e53;
}
section#nosotros div.contenido div.cont {
display: block;
}
section#nosotros div.contenido ul.subsecciones {
display: block;
}
.bloque-rojo, section#nosotros div.contenido ul.subsecciones li, section#historia div.contenido div.texto div.ver-act, section#horarios div.contenido div.wrap div.preguntas, section#horarios div.contenido div.wrap div.contacto, section#contacto div.contenido-right ul.botones li {
padding: 18px 15px;
background: #ff4e53;
color: white;
font-size: 15px;
margin-right: 15px;
}
.bloque-rojo:last-child, section#nosotros div.contenido ul.subsecciones li:last-child, section#historia div.contenido div.texto div.ver-act:last-child, section#horarios div.contenido div.wrap div.preguntas:last-child, section#horarios div.contenido div.wrap div.contacto:last-child, section#contacto div.contenido-right ul.botones li:last-child {
margin-right: 0px;
}
@media screen and (max-width: 670px) {
.bloque-rojo:last-child, section#nosotros div.contenido ul.subsecciones li:last-child, section#historia div.contenido div.texto div.ver-act:last-child, section#horarios div.contenido div.wrap div.preguntas:last-child, section#horarios div.contenido div.wrap div.contacto:last-child, section#contacto div.contenido-right ul.botones li:last-child {
margin: 20px 10px 0px 10px;
}
}
.bloque-rojo:hover, section#nosotros div.contenido ul.subsecciones li:hover, section#historia div.contenido div.texto div.ver-act:hover, section#horarios div.contenido div.wrap div.preguntas:hover, section#horarios div.contenido div.wrap div.contacto:hover, section#contacto div.contenido-right ul.botones li:hover {
background: #ffb81d;
}
@media screen and (max-width: 670px) {
section#nosotros div.contenido ul.subsecciones li {
margin: 20px 10px 0px 10px;
width: 150px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
@media screen and (max-width: 670px) {
section#nosotros div.contenido ul.subsecciones li {
margin: 20px 10px 0px 10px;
width: 135px;
font-size: 13px;
}
}
section#nosotros div.foto {
position: absolute;
z-index: 50;
margin-top: -118px;
margin-left: 100px;
}
section#nosotros div.foto img.flecha {
position: absolute;
margin-left: 530px;
}
section#nosotros div.foto img.flecha1 {
margin-top: -108px;
z-index: 110;
}
section#nosotros div.foto img.flecha2 {
margin-top: 552px;
z-index: 90;
}
section#nosotros div.foto img.jefe {
position: relative;
z-index: 100;
}
@media screen and (max-width: 1110px) {
section#nosotros div.foto {
position: relative;
margin-left: 0px;
}
section#nosotros div.foto img.jefe {
margin: 0 auto;
display: block;
}
section#nosotros div.foto img.flecha2 {
display: none;
}
}
@media screen and (max-width: 550px) {
section#nosotros div.foto {
left: 0;
right: 0;
margin: 0 auto;
position: relative;
}
}
@media screen and (max-width: 780px) {
section#nosotros div.foto img.flecha {
display: none;
}
}
section#historia {
overflow: hidden;
position: relative;
z-index: 4;
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/historia/fondo_historia.jpg") top center no-repeat;
background-size: 1280px 653px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
min-height: 653px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#historia {
background: url("../img/historia/fondo_historia@2x.jpg") top center no-repeat;
background-size: 1280px 653px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#historia {
background: url("../img/historia/fondo_historia@2x.jpg") top center no-repeat;
background-size: 1280px 653px;
}
}
@media screen and (max-width: 850px) {
section#historia {
padding-bottom: 50px;
}
}
section#historia div.pleca-verde {
background: #a9ca89;
width: 232px;
height: 510px;
position: absolute;
margin-top: 110px;
}
@media screen and (max-width: 810px) {
section#historia div.pleca-verde {
display: none;
}
}
section#historia div.contenido {
text-align: right;
}
@media screen and (max-width: 1110px) {
section#historia div.contenido {
text-align: center;
}
}
section#historia div.contenido div.texto {
display: inline-block;
max-width: 356px;
margin-right: 49px;
text-align: left;
}
@media screen and (max-width: 1110px) {
section#historia div.contenido div.texto {
max-width: 290px;
width: 85%;
margin-right: 0px;
}
}
section#historia div.contenido div.texto h1 {
position: relative;
z-index: 0;
font-size: 127px;
font-weight: 700;
color: #667c8d;
-webkit-transform-origin: bottom left;
letter-spacing: 6.5px;
margin-top: 321px;
margin-left: 50px;
}
@media screen and (max-width: 1210px) {
section#historia div.contenido div.texto h1 {
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
text-align: center;
margin: 30px auto 30px auto;
-webkit-transform-origin: top;
font-size: 65px;
letter-spacing: 3px;
}
}
section#historia div.contenido div.texto div.cont {
margin-top: -428px;
position: relative;
z-index: 10;
}
@media screen and (max-width: 1210px) {
section#historia div.contenido div.texto div.cont {
margin-top: 0px;
}
}
section#historia div.contenido div.texto p {
font-size: 22px;
font-weight: 700;
line-height: 31px;
max-width: 272px;
text-align: left;
margin-bottom: 30px;
}
section#historia div.contenido div.texto div.ver-act {
margin-top: 17px;
padding: 18px 25px;
font-weight: 700;
font-size: 18.4px;
}
section#historia div.pleca-naranja {
position: absolute;
right: 0px;
top: 0px;
width: 30px;
height: 130px;
background: #fe5f24;
}
section#historia div.pleca-azul {
width: 30px;
height: 245px;
background: #a94fd8;
position: absolute;
bottom: -185px;
right: 0;
}
section#mision-vision {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 880px;
margin-left: 255px;
padding-top: 42px;
}
@media screen and (max-width: 1130px) {
section#mision-vision {
margin: 0 auto;
text-align: center;
padding-top: 0px;
margin-top: -100px;
}
}
section#mision-vision h2 {
position: absolute;
z-index: 0;
font-weight: 700;
font-size: 127px;
letter-spacing: 6.5px;
}
@media screen and (max-width: 1130px) {
section#mision-vision h2 {
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
text-align: left;
margin: 30px auto 30px auto;
-webkit-transform-origin: top;
font-size: 65px;
letter-spacing: 3px;
position: relative;
}
}
section#mision-vision p {
font-size: 20px;
line-height: 36px;
margin-bottom: 36px;
font-weight: 700;
position: relative;
z-index: 10;
}
@media screen and (max-width: 850px) {
section#mision-vision p {
font-size: 18px;
line-height: 28px;
margin-bottom: 20px;
}
}
section#mision-vision div.mision {
margin-right: 260px;
max-width: 350px;
}
@media screen and (max-width: 1130px) {
section#mision-vision div.mision {
margin: 0px 60px 0px 60px;
text-align: left;
}
}
section#mision-vision div.mision h2 {
margin-left: -252px;
margin-top: 95px;
color: #ffb81d;
}
@media screen and (max-width: 1130px) {
section#mision-vision div.mision h2 {
margin-left: 0px;
}
}
@media screen and (max-width: 850px) {
section#mision-vision div.mision h2 {
margin-top: 20px;
position: relative;
z-index: 100;
}
}
section#mision-vision div.vision {
max-width: 260px;
min-height: 350px;
}
@media screen and (max-width: 1130px) {
section#mision-vision div.vision {
text-align: left;
margin: 20px 60px 20px 60px;
}
}
@media screen and (max-width: 850px) {
section#mision-vision div.vision {
max-width: 350px;
}
}
section#mision-vision div.vision h2 {
margin-left: -238px;
margin-top: 83px;
color: #fe6933;
}
@media screen and (max-width: 1130px) {
section#mision-vision div.vision h2 {
margin-left: 0px;
}
}
@media screen and (max-width: 850px) {
section#mision-vision div.vision h2 {
margin-top: 40px;
}
}
section#horarios {
position: relative;
padding-top: 45px;
margin-top: 50px;
background: url("../img/historia/fondo_horarios_2@2x.png") center top no-repeat, url("../img/historia/fondo_horarios@2x.jpg") center top no-repeat;
background-size: 1280px 800px;
min-height: 800px;
}
@media screen and (max-width: 950px) {
section#horarios {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/historia/fondo_horarios.jpg") center top no-repeat;
background-size: 1280px 800px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
}
}
@media screen and (max-width: 950px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 950px) and (min-resolution: 192dpi) {
section#horarios {
background: url("../img/historia/fondo_horarios@2x.jpg") center top no-repeat;
background-size: 1280px 800px;
}
}
@media screen and (max-width: 820px) {
section#horarios {
margin-top: 0px;
}
}
section#horarios div.contenido {
margin-left: 157px;
}
@media screen and (max-width: 820px) {
section#horarios div.contenido {
margin: 0 auto;
max-width: 550px;
width: 85%;
}
}
@media screen and (max-width: 670px) {
section#horarios div.contenido {
max-width: 350px;
}
}
section#horarios div.contenido div.flecha {
margin-bottom: 55px;
}
@media screen and (max-width: 820px) {
section#horarios div.contenido div.flecha {
margin: 0 auto 25px auto;
}
}
section#horarios div.contenido div.flecha img {
position: relative;
z-index: 10;
}
section#horarios div.contenido div.flecha div.barra {
max-width: 450px;
height: 15px;
position: absolute;
z-index: 5;
background: #fbbc32;
margin-left: 23px;
margin-top: -18px;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido div.flecha div.barra {
display: none;
}
}
section#horarios div.contenido p {
font-size: 24px;
font-weight: 700;
margin-bottom: 60px;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido p {
margin-bottom: 40px;
}
}
section#horarios div.contenido h2,
section#horarios div.contenido h3 {
font-size: 35px;
font-weight: 700;
line-height: 36px;
position: relative;
z-index: 20;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido h2,
section#horarios div.contenido h3 {
font-size: 30px;
}
}
section#horarios div.contenido h1 {
position: relative;
z-index: 10;
margin-top: -49px;
color: #ff4e53;
font-weight: 700;
font-size: 127px;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido h1 {
font-size: 60px;
margin-top: -28px;
}
}
section#horarios div.contenido div.wrap {
margin-top: -20px;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido div.wrap {
margin-top: -10px;
}
}
section#horarios div.contenido div.wrap span {
vertical-align: middle;
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido div.wrap span {
display: block;
margin-bottom: 10px;
}
}
section#horarios div.contenido div.wrap div.preguntas {
position: relative;
z-index: 20;
vertical-align: middle;
font-size: 17px;
font-weight: 700;
padding: 20px 20px;
margin-left: 5px;
letter-spacing: 2px;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido div.wrap div.preguntas {
display: block;
width: 140px;
height: 66px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left: 0px !important;
}
}
section#horarios div.contenido div.wrap div.contacto {
position: relative;
z-index: 20;
vertical-align: middle;
font-size: 17px;
font-weight: 700;
padding: 20px 25px;
letter-spacing: 2px;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido div.wrap div.contacto {
display: block;
width: 140px;
height: 66px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left: 0px !important;
}
}
section#horarios div.contenido div.wrap div.raya-divisoria {
width: 245px;
margin-top: 5px;
height: 2px;
position: absolute;
z-index: 10;
background: black;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido div.wrap div.raya-divisoria {
display: none;
}
}
section#horarios div.contenido div.wrap div.raya-conectora {
position: absolute;
z-index: 10;
width: 2px;
height: 30px;
background: black;
/* IE 9 */
-webkit-transform: rotate(120deg);
/* Chrome, Safari, Opera */
transform: rotate(120deg);
margin-left: 383px;
margin-top: -45px;
}
@media screen and (max-width: 670px) {
section#horarios div.contenido div.wrap div.raya-conectora {
display: none;
}
}
section#horarios div.pleca-azulclaro {
width: 30px;
height: 155px;
background: #4aaceb;
position: absolute;
top: 470px;
right: 0;
}
section#precios {
position: relative;
margin-top: -160px;
}
section#precios div.tickets {
display: inline-block;
width: 610px;
height: 410px;
margin-left: 60px;
}
@media screen and (max-width: 1170px) {
section#precios div.tickets {
display: block;
margin: 0 auto;
max-width: 610px;
width: 85%;
height: auto;
}
}
section#precios div.tickets img.t1 {
position: absolute;
}
@media screen and (max-width: 1170px) {
section#precios div.tickets img.t1 {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
}
}
section#precios div.tickets img.t2 {
position: absolute;
margin-left: 185px;
margin-top: 40px;
}
@media screen and (max-width: 1170px) {
section#precios div.tickets img.t2 {
display: none;
}
}
section#precios div.tickets img.t3 {
position: absolute;
margin-left: 305px;
margin-top: 390px;
}
@media screen and (max-width: 1170px) {
section#precios div.tickets img.t3 {
display: none;
}
}
section#precios div.contenido {
max-width: 570px;
display: inline-block;
text-align: right;
margin-left: -75px;
vertical-align: top;
padding-top: 140px;
}
@media screen and (max-width: 1170px) {
section#precios div.contenido {
display: block;
margin: 0 auto;
text-align: center;
padding-top: 20px;
}
}
section#precios div.contenido h2 {
font-size: 26px;
font-weight: 700;
}
section#precios div.contenido div.linea1 {
width: 252px;
height: 3px;
background: black;
margin: 35px 0px 35px 0px;
}
@media screen and (max-width: 1170px) {
section#precios div.contenido div.linea1 {
display: none;
}
}
section#precios div.contenido div.linea2 {
width: 100%;
height: 3px;
background: black;
margin: 85px 0px 50px 0px;
}
@media screen and (max-width: 1170px) {
section#precios div.contenido div.linea2 {
margin: 20px 0px 15px 0px;
}
}
@media screen and (max-width: 560px) {
section#precios div.contenido div.linea2 {
display: none;
}
}
section#precios div.contenido ul li {
width: 140px;
margin-top: -12px;
}
section#precios div.contenido ul li:first-child {
font-size: 49px;
color: #f14e53;
font-weight: 700;
line-height: 40px;
margin-right: -5px;
}
@media screen and (max-width: 1170px) {
section#precios div.contenido ul li:first-child {
margin-bottom: 30px;
text-align: left;
}
}
section#precios div.contenido ul li:last-child {
font-size: 21px;
font-weight: 700;
color: #4cb5f7;
line-height: 19.5px;
}
section#precios div.contenido h1 {
text-align: right;
font-size: 127px;
line-height: 127px;
color: #4cb5f7;
font-weight: 700;
letter-spacing: 5px;
}
@media screen and (max-width: 560px) {
section#precios div.contenido h1 {
font-size: 60px;
line-height: 60px;
text-align: center;
margin-top: 20px;
}
}
section#paquetes > h2 {
font-size: 32px;
font-weight: 700;
margin: 65px auto 100px auto;
text-align: center;
}
@media screen and (max-width: 1200px) {
section#paquetes > h2 {
font-size: 24px;
max-width: 85%;
}
}
section#paquetes > h2 span {
padding-bottom: 20px;
border-bottom: 6px solid #f14e53;
}
@media screen and (max-width: 1200px) {
section#paquetes > h2 span {
border: none;
}
}
section#paquetes ul {
margin-left: 20px;
}
section#paquetes ul li {
display: inline-block;
padding: 25px 70px 50px 70px;
/*border-bottom:4px dotted $negro;*/
}
@media screen and (max-width: 1200px) {
section#paquetes ul li {
display: block;
margin: 0 auto;
max-width: 490px;
}
}
@media screen and (max-width: 620px) {
section#paquetes ul li {
padding: 0px !important;
width: 85%;
}
}
section#paquetes ul li.kikapus {
padding: 25px 70px 0px 70px;
}
section#paquetes ul li.kikapus div.borde-abajo {
display: none;
}
@media screen and (max-width: 1200px) {
section#paquetes ul li.kikapus div.borde-abajo {
display: block;
margin-bottom: 50px;
}
}
section#paquetes ul li div.borde-abajo {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/paquetes/borde-abajo.png") top left repeat;
background-size: 16px 4px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
width: 100%;
height: 4px;
margin-top: 15px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#paquetes ul li div.borde-abajo {
background: url("../img/paquetes/borde-abajo@2x.png") top left repeat;
background-size: 16px 4px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#paquetes ul li div.borde-abajo {
background: url("../img/paquetes/borde-abajo@2x.png") top left repeat;
background-size: 16px 4px;
}
}
@media screen and (max-width: 620px) {
section#paquetes ul li div.borde-abajo {
margin: 0 auto;
max-width: 85%;
margin-bottom: 50px;
}
}
section#paquetes ul li:nth-of-type(odd) {
border-right: 4px solid;
-o-border-image: url("../img/paquetes/patron-derecha.png") 31 8 32 repeat;
border-image: url("../img/paquetes/patron-derecha.png") 31 8 32 repeat;
border-top: none;
border-left: none;
border-bottom: none;
background: none;
}
@media screen and (max-width: 1200px) {
section#paquetes ul li:nth-of-type(odd) {
border: none;
}
}
section#paquetes ul li:nth-of-type(odd) div.bizq {
width: 225px;
}
@media screen and (max-width: 620px) {
section#paquetes ul li:nth-of-type(odd) div.bizq {
width: 85%;
display: block;
margin: 0 auto;
padding: 0;
}
}
section#paquetes ul li:nth-of-type(even) {
padding-right: 0px;
}
@media screen and (max-width: 1200px) {
section#paquetes ul li:nth-of-type(even) {
padding-right: 70px;
}
}
section#paquetes ul li div.bizq {
margin-top: 25px;
display: inline-block;
width: 245px;
vertical-align: top;
}
@media screen and (max-width: 620px) {
section#paquetes ul li div.bizq {
width: 85%;
display: block;
margin: 0 auto;
padding: 0;
}
}
section#paquetes ul li div.bizq h3 {
font-size: 19px;
font-weight: 700;
color: white;
background: #ffb81d;
padding: 15px 20px;
text-transform: uppercase;
text-align: left;
display: inline-block;
}
section#paquetes ul li div.bizq h2 {
text-transform: uppercase;
margin-top: -20px;
font-size: 28px;
margin-bottom: 15px;
font-weight: 700;
text-align: left !important;
}
@media screen and (max-width: 620px) {
section#paquetes ul li div.bizq h2 {
text-align: left !important;
}
}
section#paquetes ul li div.bizq h4 {
color: #4cb5f7;
font-size: 32px;
margin-top: 10px;
font-weight: 700;
margin-bottom: 0px;
}
section#paquetes ul li div.bizq h5 {
font-size: 22px;
line-height: 24px;
font-weight: 700;
margin-top: 0px;
margin-bottom: 0px;
}
section#paquetes ul li div.bizq h6 {
margin-top: 55px;
color: white;
background: #ff4e53;
font-weight: 700;
font-size: 34px;
padding: 2px 10px;
display: inline-block;
}
section#paquetes ul li div.bder {
vertical-align: top;
display: inline-block;
max-width: 227px;
text-align: right;
}
@media screen and (max-width: 620px) {
section#paquetes ul li div.bder {
display: none;
}
}
section#paquetes ul li div.bder img.numero {
display: inline-block;
}
section#paquetes ul li div.bder img.animal {
margin-top: -207px;
display: inline-block;
margin-right: -40px;
}
section#paquetes ul li div.bder img.animal.aguila {
margin-top: -157px;
}
section#paquetes ul li div.bder img.animal.gorilaliebre {
margin-top: -187px;
}
section#paquetes ul li div.bder img.animal.cazadorguerrero {
margin-top: -177px;
}
section#paquetes ul li div.bder img.animal.guerrero {
margin-top: -87px;
}
section#paquetes ul li div.bder img.animal.kikapu {
margin-top: -58px;
}
section#paquetes ul li div.bder img.animal.hkikapu {
margin-top: -30px;
}
section#paquetes p.nota {
font-size: 12px;
text-align: right;
margin-right: 100px;
margin-top: 80px;
margin-bottom: 20px;
}
@media screen and (max-width: 800px) {
section#paquetes p.nota {
margin: 50px auto 20px auto;
text-align: center;
max-width: 85%;
}
}
section#slider {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/historia/fondo_slider.jpg") top center no-repeat;
background-size: 1280px 638px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
padding-top: 410px;
margin-top: -290px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#slider {
background: url("../img/historia/fondo_slider@2x.jpg") top center no-repeat;
background-size: 1280px 638px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#slider {
background: url("../img/historia/fondo_slider@2x.jpg") top center no-repeat;
background-size: 1280px 638px;
}
}
@media screen and (max-width: 1170px) {
section#slider {
text-align: center;
}
}
section#slider div.menu-slider {
text-transform: uppercase;
display: inline-block;
margin-left: 90px;
max-width: 76px;
margin-top: 105px;
}
@media screen and (max-width: 1210px) {
section#slider div.menu-slider {
margin-left: 60px;
}
}
@media screen and (max-width: 1170px) {
section#slider div.menu-slider {
margin-left: 35px;
}
}
@media screen and (max-width: 1100px) {
section#slider div.menu-slider {
display: none;
}
}
section#slider div.menu-slider div.item {
width: auto;
font-size: 12px;
font-weight: 700;
line-height: 13px;
margin-bottom: 20px;
display: block;
padding-bottom: 8px;
border-bottom: 2px solid rgba(0, 0, 0, 0);
cursor: hand;
cursor: pointer;
}
section#slider div.menu-slider div.item:hover#sl1 {
border-bottom: 2px solid #ffc035;
}
section#slider div.menu-slider div.item:hover#sl2 {
border-bottom: 2px solid #87c54a;
}
section#slider div.menu-slider div.item:hover#sl3 {
border-bottom: 2px solid #4cb5f7;
}
section#slider div.menu-slider div.item:hover#sl4 {
border-bottom: 2px solid #ff7f21;
}
section#slider div.menu-slider div.item:hover#sl5 {
border-bottom: 2px solid #b453de;
}
section#slider div.menu-slider div.item:hover#sl6 {
border-bottom: 2px solid #97f48c;
}
section#slider div.menu-slider div.item:hover#sl7 {
border-bottom: 2px solid #5aece2;
}
section#slider div.menu-slider div.item:hover#sl8 {
border-bottom: 2px solid #f1ff53;
}
section#slider div.menu-slider div.item:hover#sl9 {
border-bottom: 2px solid #fee600;
}
section#slider div.menu-slider div.item:hover#sl10 {
border-bottom: 2px solid #34d147;
}
section#slider div.menu-slider div.item:hover#sl11 {
border-bottom: 2px solid #41a2f5;
}
section#slider div.menu-slider div.item:hover#sl12 {
border-bottom: 2px solid #8373f8;
}
section#slider .item div.contenido-actividad {
position: absolute;
width: 100%;
height: 120px;
background: rgba(0, 0, 0, 0.65);
bottom: 5px;
left: 0;
}
@media screen and (max-width: 880px) {
section#slider .item div.contenido-actividad {
height: 70px;
}
}
@media screen and (max-width: 610px) {
section#slider .item div.contenido-actividad {
height: auto;
padding: 10px 0px 20px 0px;
}
}
section#slider .item div.contenido-actividad h1 {
color: white;
font-size: 55px;
display: inline-block;
vertical-align: middle;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
font-weight: 700;
margin: 10px 25px 0px 35px;
}
@media screen and (max-width: 880px) {
section#slider .item div.contenido-actividad h1 {
font-size: 30px;
}
}
@media screen and (max-width: 610px) {
section#slider .item div.contenido-actividad h1 {
font-size: 20px;
display: block;
margin: 0 auto;
}
}
section#slider .item div.contenido-actividad h1 div.linea {
width: 100%;
height: 30px;
margin-top: -35px;
padding: 0px 5px;
margin-left: -5px;
}
@media screen and (max-width: 880px) {
section#slider .item div.contenido-actividad h1 div.linea {
display: none;
}
}
section#slider .item div.contenido-actividad h1 div.linea.tirolesa {
background: #ffc035;
}
section#slider .item div.contenido-actividad h1 div.linea.retos-altura {
background: #87c54a;
}
section#slider .item div.contenido-actividad h1 div.linea.muro-escalada {
background: #4cb5f7;
}
section#slider .item div.contenido-actividad h1 div.linea.catapulta {
background: #ff7f21;
}
section#slider .item div.contenido-actividad h1 div.linea.pendulo {
background: #b453de;
}
section#slider .item div.contenido-actividad h1 div.linea.zorballs {
background: #97f48c;
}
section#slider .item div.contenido-actividad h1 div.linea.bumperballs {
background: #5aece2;
}
section#slider .item div.contenido-actividad h1 div.linea.bicicleta {
background: #f1ff53;
}
section#slider .item div.contenido-actividad h1 div.linea.retos {
background: #fee600;
}
section#slider .item div.contenido-actividad h1 div.linea.salto {
background: #34d147;
}
section#slider .item div.contenido-actividad h1 div.linea.gotcha {
background: #41a2f5;
}
section#slider .item div.contenido-actividad h1 div.linea.camping {
background: #8373f8;
}
section#slider .item div.contenido-actividad p {
display: inline-block;
vertical-align: middle;
color: white;
font-size: 14px;
line-height: 14px;
max-width: 245px;
font-weight: 700;
margin-top: 10px;
}
@media screen and (max-width: 610px) {
section#slider .item div.contenido-actividad p {
font-size: 12px;
max-width: 85%;
display: block;
margin: 0 auto;
}
}
section#slider div.slider-holder {
width: 916px;
height: 629px;
margin-left: 80px;
position: relative;
}
@media screen and (max-width: 1170px) {
section#slider div.slider-holder {
max-width: 916px;
margin-left: 0px;
width: 100%;
max-height: 629px;
height: auto;
margin-bottom: 150px;
}
}
section#slider div.slider-holder img.inicio-flecha-abajo {
position: absolute;
z-index: 100;
top: -118px;
margin-left: 293px;
}
@media screen and (max-width: 1170px) {
section#slider div.slider-holder img.inicio-flecha-abajo {
display: none;
}
}
@media screen and (max-width: 580px) {
section#slider div.slider-holder div.flecha-container {
position: absolute;
bottom: -75px;
width: 100%;
}
}
section#slider div.slider-holder div.flecha-cont {
right: -37px;
position: absolute;
z-index: 100;
width: 75px;
height: 75px;
background: #f14e53;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
cursor: pointer;
cursor: hand;
}
@media screen and (max-width: 1170px) {
section#slider div.slider-holder div.flecha-cont {
right: 0px;
}
}
@media screen and (max-width: 580px) {
section#slider div.slider-holder div.flecha-cont {
display: inline-block;
position: relative;
}
}
section#slider div.slider-holder div.flecha-cont:hover {
background: #ffb81d;
}
section#slider div.slider-holder div.flecha-cont img {
vertical-align: middle;
display: inline-block;
}
section#slider div.slider-holder div.flecha-s-adelante {
padding-top: 22px;
margin-top: 428px;
}
@media screen and (max-width: 920px) {
section#slider div.slider-holder div.flecha-s-adelante {
margin-top: 68px;
}
}
@media screen and (max-width: 580px) {
section#slider div.slider-holder div.flecha-s-adelante {
margin-top: 0px;
}
}
section#slider div.slider-holder div.flecha-s-atras {
padding-top: 22px;
margin-top: 528px;
}
@media screen and (max-width: 920px) {
section#slider div.slider-holder div.flecha-s-atras {
margin-top: 168px;
}
}
@media screen and (max-width: 580px) {
section#slider div.slider-holder div.flecha-s-atras {
margin-top: 0px;
}
}
section#slider div.slider-holder div.flecha-s-abajo {
margin-top: 525px;
padding-top: 24px;
}
@media screen and (max-width: 920px) {
section#slider div.slider-holder div.flecha-s-abajo {
margin-top: 268px;
}
}
@media screen and (max-width: 580px) {
section#slider div.slider-holder div.flecha-s-abajo {
margin-top: 0px;
}
}
section#slider img.flecha-real {
vertical-align: bottom;
margin-left: 155px;
}
@media screen and (max-width: 1170px) {
section#slider img.flecha-real {
display: none;
}
}
.instalaciones {
padding: 50px 10% 0 10%;
}
.instalaciones__title {
font-size: 40px;
font-weight: bold;
text-transform: uppercase;
line-height: 1;
margin-bottom: 30px;
}
.instalaciones__info {
font-size: 30px;
}
section#tipis {
position: relative;
margin-top: 160px;
}
@media screen and (max-width: 600px) {
section#tipis {
margin-top: 60px;
}
}
section#tipis div.pleca {
position: absolute;
left: 0;
}
section#tipis div.pleca-azul {
margin-top: 100px;
width: 0;
height: 0;
border-style: solid;
border-width: 245px 0 0 180px;
border-color: transparent transparent transparent #4cb4f5;
}
@media screen and (max-width: 1000px) {
section#tipis div.pleca-azul {
margin-top: 0px;
}
}
@media screen and (max-width: 820px) {
section#tipis div.pleca-azul {
display: none;
}
}
section#tipis div.pleca-verde {
margin-top: 420px;
background: #f7c14c;
width: 380px;
height: 70px;
}
@media screen and (max-width: 1000px) {
section#tipis div.pleca-verde {
margin-top: 260px;
}
}
@media screen and (max-width: 820px) {
section#tipis div.pleca-verde {
display: none;
}
}
section#tipis div.pleca-roja {
margin-top: 555px;
background: #f14e53;
width: 100%;
height: 112px;
}
@media screen and (max-width: 1000px) {
section#tipis div.pleca-roja {
margin-top: 340px;
}
}
@media screen and (max-width: 820px) {
section#tipis div.pleca-roja {
display: none;
}
}
section#tipis div.contenido {
text-align: right;
}
section#tipis div.contenido h1 {
position: relative;
z-index: 999;
margin-top: -52px;
margin-left: 130px;
text-align: left;
font-size: 104px;
line-height: 105px;
max-width: 870px;
font-weight: 700;
letter-spacing: 6px;
color: white;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
}
@media screen and (max-width: 1000px) {
section#tipis div.contenido h1 {
font-size: 60px;
line-height: 60px;
}
}
@media screen and (max-width: 820px) {
section#tipis div.contenido h1 {
font-size: 50px;
line-height: 50px;
text-align: center;
letter-spacing: 3px;
margin: -82px auto 0px auto;
}
}
section#tipis div.contenido div.linea-divisoria {
position: relative;
z-index: 999;
height: 3px;
max-width: 645px;
width: 85%;
background: white;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
margin-top: 20px;
margin-bottom: 20px;
margin-left: 130px;
}
@media screen and (max-width: 820px) {
section#tipis div.contenido div.linea-divisoria {
margin: 20px auto 20px auto;
}
}
section#tipis div.contenido p {
position: relative;
z-index: 999;
margin-left: 130px;
font-size: 17px;
color: white;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
display: block;
text-align: left;
font-weight: 700;
letter-spacing: 5px;
}
@media screen and (max-width: 820px) {
section#tipis div.contenido p {
font-size: 15px;
line-height: 21px;
text-align: center;
letter-spacing: 2px;
margin: 0px auto;
width: 85%;
}
}
section#kikapus {
margin-top: 120px;
text-align: left;
}
section#kikapus div {
position: relative;
display: inline-block;
}
@media screen and (max-width: 1000px) {
section#kikapus div {
width: 33%;
}
}
section#kikapus div img.boton {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -45px;
}
@media screen and (max-width: 1000px) {
section#kikapus div.desktop {
display: none;
}
}
section#kikapus div.responsive {
display: none;
}
@media screen and (max-width: 1000px) {
section#kikapus div.responsive {
display: inline-block;
}
}
section#kikapus div.left {
text-align: left;
margin-left: 13px;
}
section#kikapus div.center {
position: absolute;
z-index: 10;
width: 532px;
left: 0;
right: 0;
margin: 0 auto;
margin-top: -80px;
}
@media screen and (max-width: 1000px) {
section#kikapus div.center {
width: 45%;
}
}
section#kikapus div.center img.boton {
bottom: -20px;
}
section#kikapus div.right {
float: right;
text-align: right;
margin-right: 16px;
}
section#faq {
position: relative;
margin-top: 120px;
overflow: hidden;
}
section#faq h1 {
position: absolute;
font-size: 104px;
line-height: 105px;
font-weight: 700;
color: rgba(0, 0, 0, 0.07);
left: 0;
margin-top: 105px;
max-width: 580px;
margin-left: -15px;
}
@media screen and (max-width: 860px) {
section#faq h1 {
font-size: 50px;
line-height: 50px;
text-align: center;
margin: 0 auto;
position: relative;
display: block;
color: black;
margin-bottom: 50px;
}
}
@media screen and (max-width: 860px) {
section#faq div.contenido {
text-align: center;
}
}
section#faq div.contenido img.flecha-abajo {
display: inline-block;
vertical-align: top;
margin-left: 160px;
margin-top: 40px;
}
@media screen and (max-width: 1130px) {
section#faq div.contenido img.flecha-abajo {
display: none;
}
}
section#faq div.contenido ul {
display: inline-block;
margin-left: 210px;
max-width: 670px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 860px) {
section#faq div.contenido ul {
margin: 0 auto;
width: 85%;
}
}
section#faq div.contenido ul li {
text-align: left;
padding-bottom: 40px;
font-size: 14px;
line-height: 20px;
display: inline-block;
width: 45%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 560px) {
section#faq div.contenido ul li {
display: block;
width: 100%;
}
}
section#faq div.contenido ul li.titulo {
padding-bottom: 25px;
}
@media screen and (max-width: 560px) {
section#faq div.contenido ul li.titulo {
display: none;
}
}
section#faq div.contenido ul li.titulo span {
display: inline-block;
border-bottom: 2px solid;
padding-bottom: 15px;
font-weight: 700;
letter-spacing: 2px;
}
section#faq div.contenido ul li.t1 span {
color: #f14e53;
border-color: #f14e53;
}
@media screen and (max-width: 560px) {
section#faq div.contenido ul li.t1 span {
display: none;
}
}
section#faq div.contenido ul li.t2 span {
color: #8173f5;
border-color: #8173f5;
}
@media screen and (max-width: 560px) {
section#faq div.contenido ul li.t2 span {
display: none;
}
}
section#faq div.contenido ul li:nth-of-type(odd) {
font-weight: 700;
padding-right: 140px;
color: black;
width: 54%;
}
@media screen and (max-width: 860px) {
section#faq div.contenido ul li:nth-of-type(odd) {
padding-right: 40px;
}
}
@media screen and (max-width: 560px) {
section#faq div.contenido ul li:nth-of-type(odd) {
display: block;
width: 100%;
padding-right: 0px;
padding-bottom: 20px;
}
}
section#contacto {
margin-top: 55px;
overflow: hidden;
}
section#contacto h1 {
font-size: 104px;
font-weight: 700;
letter-spacing: 5px;
line-height: 104px;
padding: 0px;
margin-left: -20px;
}
@media screen and (max-width: 550px) {
section#contacto h1 {
font-size: 50px;
line-height: 50px;
margin: 0 auto;
letter-spacing: 3px;
text-align: center;
}
}
section#contacto div.mapa {
margin-top: -23px;
color: white;
text-align: right;
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/ubicacion_contacto/mapa.jpg");
background-size: 767px 617px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
max-width: 767px;
width: 100%;
height: 617px;
position: relative;
}
@media screen and (max-width: 550px) {
section#contacto div.mapa {
margin-top: 40px;
}
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#contacto div.mapa {
background: url("../img/ubicacion_contacto/mapa@2x.jpg");
background-size: 767px 617px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#contacto div.mapa {
background: url("../img/ubicacion_contacto/mapa@2x.jpg");
background-size: 767px 617px;
}
}
section#contacto div.mapa div.direccion {
font-weight: 700;
position: absolute;
right: 30px;
bottom: 35px;
}
section#contacto div.mapa div.direccion h2 {
font-size: 18px;
padding: 8px;
background: #ff4e53;
font-weight: 700;
}
section#contacto div.mapa div.direccion p {
font-size: 17px;
line-height: 22px;
letter-spacing: 1px;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.65);
}
section#contacto div.mapa div.direccion p.coordenadas {
font-size: 14px;
letter-spacing: 8px;
margin-top: 25px;
margin-bottom: 12px;
}
section#contacto div.mapa div.direccion div.raya-roja {
width: 370px;
background: #ff4e53;
height: 3px;
margin-right: -90px;
}
section#contacto div.contenido-right {
max-width: 410px;
display: inline-block;
text-align: center;
}
@media screen and (max-width: 1180px) {
section#contacto div.contenido-right {
display: block;
width: 85%;
margin: 0 auto;
}
}
section#contacto div.contenido-right form {
-webkit-appearance: none;
position: relative;
z-index: 10;
margin-top: 0px;
margin-left: -70px;
font-weight: 700;
}
@media screen and (max-width: 1180px) {
section#contacto div.contenido-right form {
margin: 0 auto;
display: block;
margin-top: 50px;
width: 100%;
}
}
section#contacto div.contenido-right form ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: black;
}
section#contacto div.contenido-right form ::-moz-placeholder {
/* Firefox 19+ */
color: black;
}
section#contacto div.contenido-right form :-ms-input-placeholder {
/* IE 10+ */
color: black;
}
section#contacto div.contenido-right form :-moz-placeholder {
/* Firefox 18- */
color: black;
}
section#contacto div.contenido-right form input[type=text],
section#contacto div.contenido-right form input[type=email],
section#contacto div.contenido-right form input[type=tel] {
-webkit-appearance: none;
max-width: 455px;
width: 100%;
height: 63px;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.65);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.65);
display: block;
border: none;
font-family: "Oswald", sans-serif;
font-size: 15px;
font-weight: 700;
padding: 0 12px 0 12px;
margin-bottom: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
section#contacto div.contenido-right form input.nombre {
border-left: 12px solid #ff4e53;
}
section#contacto div.contenido-right form input.correo {
border-left: 12px solid #4cb5f7;
}
section#contacto div.contenido-right form input.telefono {
border-left: 12px solid #7ecb5a;
}
section#contacto div.contenido-right form textarea {
padding: 12px;
border: none;
border-left: 12px solid #f7c14c;
height: 200px;
max-width: 455px;
width: 100%;
font-family: "Oswald", sans-serif;
font-size: 15px;
font-weight: 700;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.65);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.65);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
}
section#contacto div.contenido-right form input[type=submit] {
border: 9px solid #ff4e53;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.65);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.65);
background: white;
width: 140px;
height: 70px;
font-family: "Oswald", sans-serif;
font-size: 20px;
font-weight: 700;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: right;
margin-top: -30px;
margin-right: 15px;
position: relative;
z-index: 15;
-webkit-appearance: none;
}
section#contacto div.contenido-right ul {
margin-left: 75px;
}
@media screen and (max-width: 1180px) {
section#contacto div.contenido-right ul {
margin: 0 auto;
display: block;
}
}
section#contacto div.contenido-right ul li {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size: 20px;
line-height: 20px;
}
section#contacto div.contenido-right ul.seguirnos {
margin-top: 70px;
margin-bottom: 50px;
}
section#contacto div.contenido-right ul.seguirnos li {
margin-right: 10px;
}
section#contacto div.contenido-right ul.seguirnos li:last-child {
margin-right: 0px;
}
section#contacto div.contenido-right ul.botones li {
font-size: 17px;
padding: 15px;
position: relative;
z-index: 10;
}
section#contacto div.contenido-right ul.botones li:first-child {
margin-right: 30px;
}
section#contacto div.contenido-right ul.botones li:last-child {
margin-top: 0px;
margin-bottom: 0px;
}
section#prefooter {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/footer/imagen_footer.jpg") center bottom no-repeat;
background-size: 1288px 850px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
height: 620px;
margin-top: 130px;
position: relative;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#prefooter {
background: url("../img/footer/imagen_footer@2x.jpg") center bottom no-repeat;
background-size: 1288px 850px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#prefooter {
background: url("../img/footer/imagen_footer@2x.jpg") center bottom no-repeat;
background-size: 1288px 850px;
}
}
section#prefooter img.iphone {
position: absolute;
left: 0px;
bottom: 0px;
}
@media screen and (max-width: 1130px) {
section#prefooter img.iphone {
display: none;
}
}
section#prefooter div.contenido {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/footer/icon_kikapu.png") center top no-repeat;
background-size: 224px 296px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
background-position: center 10px;
min-height: 296px;
text-align: center;
padding-top: 60px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#prefooter div.contenido {
background: url("../img/footer/icon_kikapu@2x.png") center top no-repeat;
background-size: 224px 296px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#prefooter div.contenido {
background: url("../img/footer/icon_kikapu@2x.png") center top no-repeat;
background-size: 224px 296px;
}
}
section#prefooter div.contenido h2 {
font-size: 24px;
letter-spacing: 5px;
font-weight: 700;
}
@media screen and (max-width: 580px) {
section#prefooter div.contenido h2 {
max-width: 85%;
text-align: center;
margin: 0 auto;
}
}
section#prefooter div.contenido h3 {
color: #fa2352;
font-size: 72px;
letter-spacing: 1px;
font-weight: 700;
margin-top: -30px;
}
@media screen and (max-width: 580px) {
section#prefooter div.contenido h3 {
max-width: 85%;
font-size: 40px;
margin-top: 0px;
text-align: center;
margin: 0 auto;
}
}
section#prefooter div.contenido .flecha-horizontal {
margin: 10px auto 20px auto;
}
@media screen and (max-width: 580px) {
section#prefooter div.contenido .flecha-horizontal {
max-width: 85%;
}
}
section#prefooter div.contenido p {
font-size: 12px;
line-height: 17px;
max-width: 370px;
margin: 0 auto;
letter-spacing: 2px;
font-weight: 700;
}
@media screen and (max-width: 580px) {
section#prefooter div.contenido p {
width: 85%;
text-align: center;
margin: 0 auto;
}
}
section#prefooter div.contenido div.brujula {
width: 60px;
height: 60px;
margin: 0 auto;
margin-top: 115px;
position: relative;
}
section#prefooter div.contenido div.brujula div.brujula-real {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/footer/brujula_up.png");
background-size: 60px 60px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
-webkit-animation: spin2 15s linear infinite;
animation: spin2 15s linear infinite;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
section#prefooter div.contenido div.brujula div.brujula-real {
background: url("../img/footer/brujula_up@2x.png");
background-size: 60px 60px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
section#prefooter div.contenido div.brujula div.brujula-real {
background: url("../img/footer/brujula_up@2x.png");
background-size: 60px 60px;
}
}
section#prefooter div.contenido div.brujula img.flecha {
display: block;
margin: 0px auto;
padding-top: 21px;
position: relative;
z-index: 20;
}
section#prefooter div.contenido .flechaup {
margin-top: 5px;
}
div.pleca-wrap {
/* position: absolute;
width:100%;
overflow:hidden;*/
}
.pleca-diagonal-amarilla, div.pleca-diagonal-roja, div.pleca-diagonal-verde {
width: 150%;
margin-left: -250px;
margin-top: 300px;
background: #f7c14c;
height: 260px;
position: absolute;
left: 0;
z-index: 0;
/* IE 9 */
-webkit-transform: rotate(27deg);
/* Chrome, Safari, Opera */
transform: rotate(27deg);
}
@media screen and (max-width: 730px) {
.pleca-diagonal-amarilla, div.pleca-diagonal-roja, div.pleca-diagonal-verde {
width: 220%;
}
}
div.pleca-diagonal-roja {
margin-top: 390px;
background: #ea214e;
z-index: 100;
}
div.pleca-diagonal-verde {
margin-top: 200px;
background: #aacb8a;
/* IE 9 */
-webkit-transform: rotate(155deg);
/* Chrome, Safari, Opera */
transform: rotate(155deg);
z-index: 100;
}
footer {
/*
* Set a counter and get the length of the image path.
*/
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
/*
* Set a base background for 1x environments.
*/
background: url("../img/footer/footer_madera.jpg") top center no-repeat;
background-size: 1280px 364px;
/*
* Create an @2x-ish media query.
*/
/*
* Create media queries for all environments that the user has
* provided images for.
*/
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
background-position-y: 48px !important;
height: 412px;
overflow: hidden;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
footer {
background: url("../img/footer/footer_madera@2x.jpg") top center no-repeat;
background-size: 1280px 364px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
footer {
background: url("../img/footer/footer_madera@2x.jpg") top center no-repeat;
background-size: 1280px 364px;
}
}
footer div.pleca {
width: 100%;
}
footer div.pleca1 {
height: 8px;
background: #4cb5f7;
}
footer div.pleca2 {
height: 16px;
background: #fa2352;
}
footer div.pleca3 {
height: 24px;
background: #f5bf4b;
}
footer div.left {
margin-top: 145px;
margin-left: 25px;
float: left;
color: white;
}
@media screen and (max-width: 580px) {
footer div.left {
float: none;
margin: 0 auto;
margin-top: 20px;
width: 85%;
}
}
footer div.left img.logo {
margin-left: -10px;
}
@media screen and (max-width: 580px) {
footer div.left img.logo {
margin: 0 auto;
display: block;
}
}
footer div.left div.linea-divisoria {
background: white;
height: 2px;
width: 180px;
margin-bottom: 35px;
}
@media screen and (max-width: 580px) {
footer div.left div.linea-divisoria {
margin: 0 auto;
margin-bottom: 35px;
}
}
footer div.left p {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.8px;
}
footer div.left p a {
text-decoration: underline;
}
@media screen and (max-width: 580px) {
footer div.left p {
margin: 0 auto;
text-align: center;
}
}
footer div.left img.detalles {
margin-bottom: 5px;
}
@media screen and (max-width: 580px) {
footer div.left img.detalles {
display: block;
margin: 0 auto;
margin-bottom: 5px;
}
}
footer div.right {
float: right;
margin-top: 280px;
margin-right: 30px;
}
@media screen and (max-width: 580px) {
footer div.right {
float: none;
margin: 0 auto;
margin-top: 40px;
}
}
footer div.right p {
font-weight: 700;
font-size: 8px;
letter-spacing: 1.4px;
color: white;
text-align: center;
}
@media screen and (max-width: 580px) {
footer div.right p {
display: none;
}
}
@media screen and (max-width: 580px) {
footer div.right img.ember {
margin: 0 auto;
display: block;
}
}
footer div.right div.detalle {
width: 100px;
margin: 10px auto 0 auto;
height: 10px;
border: 2px white solid;
border-bottom: none;
}
@media screen and (max-width: 580px) {
footer div.right div.detalle {
display: none;
}
}
/*# sourceMappingURL=style.css.map */