/*----- ESTILOS GENERALES -----*/ html, body { height: 100%; } /*modificar el modelo de cajas de CSS*/ html { -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } /*resetear margenes y padding*/ * { margin: 0; padding: 0; } body { overflow-x: hidden; font-family: 'Open Sans' , sans-serif; } .container { width: 90%; max-width: 1366px; margin: 0 auto; } /*estilos de los contenidos* /*estilos del header*/ header { position: absolute; z-index: 900; -webkit-filter: none; filter: none; height: 50px; width: 100%; } .icono { background-image: url(../images/peekaboo/icon_peekaboo.svg); z-index: 1000; position: absolute; float: left; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); background-size: contain; background-repeat: no-repeat; width: 10%; height: 63.5%; margin-top: 8px; left: 1%; top: 0; } #logo { padding: 1em 0; float: left; } #infoContacto { float: right; margin-top: 12px; } #infoContacto i { color: black; margin-right: 12px; font-size: 1.20rem; } /*----- SECCIÓN 1 - CABECERA -----*/ article > section:nth-child(1) { position: relative; background-color: white; background-size: cover; width: 100%; height: 100%; } .imagen_portada { z-index: 15; position: absolute; background-size: cover; bottom: 0;left: 0; width: 100%; height: 100%; background-position-y: 90%; background-image: url(../images/peekaboo/peekaboo_fondo_portada.jpg); } .imagen_revista_portada { -webkit-animation: floating2 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: floating2 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); z-index: 20; position: absolute; background-size: contain; background-repeat: no-repeat; background-position: bottom right; bottom: 0;right: 5%; width: 40%; height: 100%; background-image: url(../images/peekaboo/revista.png); } @-webkit-keyframes floating2 { 0% {-webkit-transform: translateX(0%);transform: translateX(0%);} 100% {-webkit-transform: translateX(2%);transform: translateX(2%);} } @keyframes floating2 { 0% {-webkit-transform: translateX(0%);transform: translateX(0%);} 100% {-webkit-transform: translateX(2%);transform: translateX(2%);} } #intro { z-index: 20; padding: 0 0; background-repeat: no-repeat; background-size: cover; width: 1005; height: 80%; } #descripcion { position: absolute; z-index: 30; margin: 0px 0; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); z-index: 20; width: 70%; -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0 1em 0 0; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; color: #000; } #logo-peekaboo { z-index: 30; text-align: left; margin: 0px 0; height: 8%; width: 100%; margin-bottom: 5%; } h1 { z-index: 20; text-align: left; font-size: 2.2rem; margin-bottom: 25px; font-family: 'Montserrat', sans-serif; } #descripcion p { text-align: left; z-index: 20; margin-bottom: 30px; line-height: 1.35; font-family: 'Montserrat', sans-serif; } .infoContacto1, .infoContacto2, .infoContacto3 { z-index: 20; padding: 0 .5em; font-weight: 100; color: rgba(0, 0, 0, 0.5); text-decoration: none; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } .infoContacto1:hover { color: black; -webkit-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } .infoContacto2:hover { color: black; -webkit-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } .infoContacto3:hover { color: black; -webkit-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } #scroll1 { margin-bottom: -70px; -webkit-filter: invert(100%); filter: invert(100%); z-index: 120; position: absolute; background-position: center; bottom: 0px; width: 2em; height: 20%; display: -webkit-box; display: -ms-flexbox; display: flex; } #scroll2 { margin-bottom: -70px; -webkit-filter: invert(100%); filter: invert(100%); z-index: 120; -webkit-animation: upDown 400ms 1s infinite alternate linear; animation: upDown 400ms 1s infinite alternate linear; position: absolute; background-position: center; bottom:0px; width: 2em; height: 20%; display: -webkit-box; display: -ms-flexbox; display: flex; } @-webkit-keyframes upDown { 0% {-webkit-transform: translateY(0%);transform: translateY(0%);} 100% {-webkit-transform: translateY(5%);transform: translateY(5%);} } @keyframes upDown { 0% {-webkit-transform: translateY(0%);transform: translateY(0%);} 100% {-webkit-transform: translateY(5%);transform: translateY(5%);} } article > section:nth-child(2) { background-color: #fff; width: 100%; height: 1400px; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 50px 0px 0px; } h2 { padding: 5% 0; color: #373fe1; text-decoration: underline; font-family: 'Montserrat', sans-serif; } video { background-size: contain; left: 0; bottom: 0; width: 60%; height: 33%; } .interaccion2 { -webkit-animation: floating3 1.5s infinite alternate cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: floating3 1.5s infinite alternate cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 220; background-image: url(../images/peekaboo/interaccion2.png); background-size: contain; background-repeat: no-repeat; background-position: left bottom; height: 67%; width: 100%; bottom: 0%; left: 0; -webkit-filter: drop-shadow(20px -20px 50px rgba(0, 0, 0, 0.24)); filter: drop-shadow(20px -20px 50px rgba(0, 0, 0, 0.24)); } @-webkit-keyframes floating3 { 0% {-webkit-transform: translateY(0%);transform: translateY(0%);} 100% {-webkit-transform: translateY(2%);transform: translateY(2%);} } @keyframes floating3 { 0% {-webkit-transform: translateX(0%);transform: translateX(0%);} 100% {-webkit-transform: translateY(2%);transform: translateY(2%);} } /*----- SECCIÓN 2 -----*/ article > section:nth-child(3) { position: relative; z-index: 1000000; background: -webkit-gradient(linear,left top, left bottom,from(#373fe1),color-stop(#373fe1),color-stop(#373fe1),to(#373fe1)); background: -o-linear-gradient(#373fe1,#373fe1,#373fe1,#373fe1); background: linear-gradient(#373fe1,#373fe1,#373fe1,#373fe1); width: 100%; height: 4000px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 50px 0px 50px; } article > section:nth-child(3) h2 { color: #fff; } .interaccion1 { z-index: 220; background-image: url(../images/peekaboo/revista.gif); background-size: contain; background-repeat: no-repeat; background-position: center; height: 638px; width: 40%; border: 5px solid #373fe1; top: 0%; margin-top: 50px; } .part1 { z-index: 220; background-image: url(../images/peekaboo/part1.png); background-size: contain; background-repeat: no-repeat; background-position: center; height: 2900px; width: 40%; border: 5px solid #373fe1; background-color: #fff; top: 0%; margin-top: 50px; opacity: 0; } .revista_abierta { position: relative; -webkit-animation: floating 5s infinite alternate linear; animation: floating 5s infinite alternate linear; z-index: 220; background-image: url(../images/peekaboo/interaccion1.png); background-size: contain; background-repeat: no-repeat; background-position: center; height: 500px; width: 40%; top: 0%; margin-top: 50px; } @-webkit-keyframes floating { 0% {-webkit-transform: translateY(0%) rotate(0deg);transform: translateY(0%) rotate(0deg);} 100% {-webkit-transform: translateY(-5%) rotate(20deg);transform: translateY(-5%) rotate(20deg);} } @keyframes floating { 0% {-webkit-transform: translateY(0%) rotate(0deg);transform: translateY(0%) rotate(0deg);} 100% {-webkit-transform: translateY(-5%) rotate(20deg);transform: translateY(-5%) rotate(20deg);} } /*----- SECCIÓN 4 -----*/ article > section:nth-child(4) { background-color: #fff; width: 100%; height: 1000px; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .lateral { position: relative; margin: 0 0; z-index: 20; background-image: url(../images/peekaboo/lateral.png); background-size: contain; background-repeat: no-repeat; background-position: right top; right: 0; height: 350px; width: 100%; top: 0%; } .part2 { margin: -40px 0; z-index: 10; background-image: url(../images/peekaboo/revista2.gif); background-size: contain; background-repeat: no-repeat; background-position: center; height: 700px; width: 100%; top: 0%; } /*----- SECCIÓN 5 -----*/ article > section:nth-child(5) { position: relative; z-index: 10000000; width: 100%; height: 200px; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } article > section:nth-child(5) h2 { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-decoration: none; font-family: 'Montserrat', sans-serif; } .part3 { z-index: 20; background-image: url(../images/peekaboo/revista3.gif); background-size: contain; background-repeat: no-repeat; background-position: center; height: 180px; width: 100%; } /*----- SECCIÓN 6 MÁS PROYECTOS -----*/ .container-section { position: absolute !important; z-index: 1000 !important; width: 100%; } a { text-decoration: none; width: 100%; } article > section:nth-child(6){ background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.4)), to(rgba(0, 0, 0, .2))) , url(../images/albums/mano.png); background: -o-linear-gradient(left, rgba(0,0,0,.4), rgba(0, 0, 0, .2)) , url(../images/albums/mano.png); background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0, 0, 0, .2)) , url(../images/albums/mano.png); background-color: #00a3a0; height: 300px; background-repeat: no-repeat; background-size: contain; background-position: center; background-position-y: 40%; cursor: pointer; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } article > section:nth-child(6):hover { background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0, 0, 0, 0))) , url(../images/albums/mano.png); background: -o-linear-gradient(left, rgba(0,0,0,1), rgba(0, 0, 0, 0)) , url(../images/albums/mano.png); background: linear-gradient(to right, rgba(0,0,0,1), rgba(0, 0, 0, 0)) , url(../images/albums/mano.png); background-color: #00a3a0; -webkit-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; background-size: contain; background-repeat: no-repeat; background-position: center; background-position-y: 35%; } #seccionSeis { height: 300px; padding: 50px 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } #seccionSeis div { -ms-flex-preferred-size: 100%; flex-basis: 100%; padding-right: 1.2rem; } h2 { margin-bottom: 20px; } #seccionSeis h2 { margin-top: 3%; font-size: 2.5rem; color: white; } #seccionSeis p { color: white; line-height: 2; font-family: 'Montserrat', sans-serif; } /*----- FOOTER -----*/ footer { z-index: 100; position: static; z-index: 50; background-color: black; padding: 20px 0; } #icons { width: 100%; display:flex; text-align: center; align-items: center; justify-content: space-between; margin: .5em 0 .5em 0; } .mail, .telefono, .linkedin2, .cv , .instagram {color: #fff;} .copyright { text-align: center; float: right; color: white; padding-top: 8px; } .nav { float: left; } #pieDePagina { overflow: hidden; } .nav li { display: inline-block; font-size: 0.80rem; padding: 12px 0 0; } .nav li a { color: white; text-decoration: none; padding-right: 1.5rem; } .nav li a:hover { text-decoration: underline; } #developed { font-size: .6rem; opacity: .5;} /*------ MEDIA QUERIES ---------*/ @media screen and (max-width: 3840px){ .container { width: 90%; max-width: 3840px; } } @media screen and (max-width: 1920px){ .container { width: 87%; max-width: 1920px; } #intro { height: 900px !important; } #descripcion { width: 45%; -webkit-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); } article > section:nth-child(2) { height: 1200px; } #scroll1, #scroll2 { margin-bottom: -30%; } .interaccion2{ height: 640px; } article > section:nth-child(3) { height: 4000px; width: 100%; } .part1 { height: 3000px; } .interaccion1 { height: 400px; } } @media screen and (min-width: 960px) and (max-width: 1300px){ .container {width: 83%;} .col h3 { font-size: 1.05rem; } .imagen_revista_portada { height: 90% !important; } #intro { height: 580px !important; } h1 { font-size: 1.43rem; } h2 { font-size: 1.43rem; } article > section:nth-child(2) { height: 790px; } article > section:nth-child(1) p { line-height: .5em; font-size: .8em !important; } #descripcion { -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); width: 40%; } #scroll1 , #scroll2 { margin-bottom: -120px; } .imagen_revista_portada { background-size: contain; background-repeat: no-repeat; width: 45%; bottom: 0; right: 5%; background-position: bottom center; } .interaccion2{ height: 60%; } article > section:nth-child(3) { height: 3240px; } .part1 { height: 2000px; } .interaccion1 { height: 400px; } .interaccion2 { height: 400px; } } @media screen and (max-width: 959px){ .container {width: 75%;} #intro { height: 580px !important; } article > section:nth-child(1) { padding: 0; margin: 0; } header { width: 100%; } #intro{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; } h1 { font-size: 1.3rem !important; } #descripcion { -webkit-transition-duration: 1000ms; -o-transition-duration: 1000ms; transition-duration: 1000ms; z-index: 20; width: 80%; -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); padding: 2em 2em; left: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #descripcion p { font-size: .8em; } .imagen_revista_portada{ background-position: right bottom; background-size: contain; height: 100%; width: 20%; bottom: 0; right: 5%; } #logo-peekaboo { position: relative; width: 70%; } h1 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 2.2rem; } article > section:nth-child(2){ padding: 50px 0 0; height: 700px; } .col { padding: 30px 0; } video { height: 40%; } .interaccion2{ height: 60%; } article > section:nth-child(3) { height: 2240px; } .part1 { background-repeat: no-repeat; height: 1200px; } .interaccion1 { height: 400px; } .interaccion2 { height: 400px; } .lateral { height: 240px; } .part2 { height: 70%; } article > section:nth-child(4) { height: 500px;} #seccionCinco { text-align: left; } article > section:nth-child(6):hover { -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } #seccionSeis h2 { position: relative; width: 100%; text-align: center; text-decoration: none; font-size: 1.5em; margin-top: 20%; } } @media screen and (max-width: 659px){ .container {width: 65%;} section { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } header { width: 100%; height: 100px; } #infoContacto { top: 40%; position: absolute; width: 100%; text-align: center; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #scroll1 , #scroll2 { margin-bottom: 5px !important; } .icono { height: 32.5%; top: 5%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); left: 50%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; float: center; width: 30px; } article > section:nth-child(1) { height: 700px; } /*SECCION 1*/ #descripcion { left: 0; -webkit-transition-duration:1000ms; -o-transition-duration:1000ms; transition-duration:1000ms; margin: 0px 0; -webkit-transform: translateY(15%); -ms-transform: translateY(15%); transform: translateY(15%); z-index: 20; width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 2em 3em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } h1 {padding: .1em 0em !important; margin-top: -10px !important;} p {line-height: 1em; margin-top: -10px !important; font-size: .7em !important; } .imagen_portada { bottom: 0%; background-size: contain; background-repeat: no-repeat; background-position: bottom; } .imagen_revista_portada { background-size: contain; width: 20%; right: 40%; bottom: 0%; } #intro { height: 560px !important; } #logo-peekaboo { padding: 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition-duration: 1000ms; -o-transition-duration: 1000ms; transition-duration: 1000ms; text-align: center; width: 100%; background-size: contain; .part1 { width: 100%; height: 3000px; } } h1 { -webkit-transition-duration:2000ms !important; -o-transition-duration:2000ms !important; transition-duration:2000ms !important; z-index: 20; text-align: center; font-size: 1.7rem; font-family: arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; margin-bottom: 25px; margin-top: 20px; } #descripcion p { font-weight: 50; text-align: center; z-index: 20; font-size: .8rem; margin-bottom: 30px; line-height: 1.5; font-style: italic; font-family: arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; } article > section:nth-child(2) { height: 560px; } article > section:nth-child(3) { height: 3000px; } .revista_abierta { width: 80%; } article > section:nth-child(4) { height: 400px; } .interaccion1 { width: 100%; } #scroll1, #scroll2 { z-index: 20; position: absolute; background-position: center; height: 10%; width: 100%; margin-bottom: -10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; left: 0; } .part1 { background-size: cover; border: none; background-repeat: no-repeat; background-position: center; height: 100%; width: 100%; background-color: #373fe1; top: 0%; } .part2 { height: 680px; } .part3 { height: 320px; } .lateral { height: 500px; } #seccionCinco, #seccionSeis { text-align: center; } /*pie de pagina*/ #pieDePagina { text-align: center; } .nav { float: none; } .nav li { display: block; margin: 20px 0; } .nav li a {padding-right: 0rem;} .copyright { float: none; border-top: 1px solid #3e3e3e; margin-top: 30px; } #developed { font-size: .6rem; opacity: .5;} #icons { display:flex; text-align: center; align-items: center; justify-content: space-around; margin: 1em 0 1em 0; } } @media screen and (max-width: 480px){ #icons { display:flex; text-align: center; align-items: center; justify-content: space-around; padding: 0 6em 0 6em; margin: 1em 0 1em 0; } article > section:nth-child(1) { height: 750px; } #descripcion p {font-size: .80rem !important;} .imagen_portada {bottom: 0%;} video {display: none;} .imagen_revista_portada {width: 30%; margin-right: -5%; opacity: 1;} .lateral {background-position: right top;} #seccionSeis h2 {font-size: 1.8rem; margin-top: 0;position: relative; top: 20%;} #seccionSeis p {position: relative; top: 20%;} .container { width: 100%; } .interaccion2 { position: relative; top: 40px; } .part1 { -webkit-animation: up linear 3s infinite alternate; animation: up linear 3s infinite alternate; } @-webkit-keyframes up { 0% {transform: translateY(0%);} 100% {transform: translateY(5%);} } @keyframes up { 0% {transform: translateY(0%);} 100% {transform: translateY(5%);} } #icons { display:flex; text-align: center; align-items: center; justify-content: space-around; margin: 1em 0 1em 0; } } /* -----ANIMATIONS----- */ @-webkit-keyframes leftRight { 0% {-webkit-transform: translateX(-40%);transform: translateX(-40%); opacity: 0;} 100% {-webkit-transform: translateX(0%);transform: translateX(0%); opacity: 1;} } @keyframes leftRight { 0% {-webkit-transform: translateX(-40%);transform: translateX(-40%); opacity: 0;} 100% {-webkit-transform: translateX(0%);transform: translateX(0%); opacity: 1;} } @-webkit-keyframes color { 0% {background-color: white;} 100% {background-color: rgba(255, 255, 255, 0.699);} } @keyframes color { 0% {background-color: white;} 100% {background-color: rgba(255, 255, 255, 0.699);} }