/*----- ESTILOS GENERALES -----*/

html, body {
    height: 100%;
    max-width: 100% !important;
}

/*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;
}

header {
    position: absolute;
    z-index: 900;
    -webkit-filter: none;
            filter: none;
    height: 50px;
    width: 100%;
}

.icono {
    background-image: url(../images/yorokobu/icon_yorokobu.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: static;
    background-color: white;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.imagen_portada {
    -webkit-animation: floating2 5s infinite alternate linear;
            animation: floating2 5s infinite alternate linear;
    z-index: 10;
    position: absolute;
    background-size: cover;
    top: 0;left: 0;
    width: 100%; height: 100%;
    background-image: url(../images/yorokobu/portada.png);
}

@-webkit-keyframes floating2 {
    0% {-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;}
    100% {-webkit-transform: translateY(-5%);transform: translateY(-5%);opacity: .5;}
}
@keyframes floating2 {
    0% {-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;}
    100% {-webkit-transform: translateY(-5%);transform: translateY(-5%);opacity: .5;}
}

#intro {
    z-index: 20;
    padding: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 1005;
    height: 100%;
}


.pez1 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez1 20s infinite linear;
            animation: pez1 20s infinite linear;
    background-image: url(../images/yorokobu/pez.svg);
    position: fixed;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: -50%;
    left: -10%;
    opacity: 1;
}



.pez2 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez1 20s 1s infinite linear;
            animation: pez1 20s 1s infinite linear;
    position: fixed;
    background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 80%;
    left: -10%;
    opacity: 1;
}

.pez3 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez1 20s 3s infinite linear;
            animation: pez1 20s 3s infinite linear;
            position: fixed;
            background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 20%;
    left: -10%;
    opacity: 1;
}

.pez4 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez2 20s 1s infinite linear;
            animation: pez2 20s 1s infinite linear;
            position: fixed;
            background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 20%;
    left: -10%;
    opacity: 1;
}

.pez5 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez3 20s 1s infinite linear;
            animation: pez3 20s 1s infinite linear;
            position: fixed;
            background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 100%;
    left: -10%;
    opacity: 1;
}


.pez6 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez1 20s 3s infinite linear;
            animation: pez1 20s 3s infinite linear;
            position: fixed;
            background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 80%;
    left: -10%;
    opacity: 1;
}


.pez7 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez3 20s 5s infinite linear;
            animation: pez3 20s 5s infinite linear;
            position: fixed;
            background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 80%;
    left: -10%;
    opacity: 1;
}

.pez8 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez2 20s 8s infinite linear;
            animation: pez2 20s 8s infinite linear;
            position: fixed;
            background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 10%;
    left: -10%;
    opacity: 1;
}


.pez9 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez1 20s 10s infinite linear;
            animation: pez1 20s 10s infinite linear;
    position: absolute;
    background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 40%;
    left: -10%;
    opacity: 1;
}

.pez10 {
    overflow-x: hidden;
    z-index: 1;
    -webkit-animation: pez1 20s 12s infinite linear;
            animation: pez1 20s 12s infinite linear;
            position: fixed;
            background-image: url(../images/yorokobu/pez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; height: 30px;
    top: 70%;
    left: -10%;
    opacity: 1;
}



@-webkit-keyframes pez1 {
    0% {-webkit-transform: translate(0, 0);transform: translate(0, 0);}
    100% {-webkit-transform: translate(10000%, 0);transform: translate(10000%, 0);}
}

@-webkit-keyframes pez3 {
    0% {-webkit-transform: translate(0, 0) rotate(-35deg);transform: translate(0, 0) rotate(-35deg);}
    100% {-webkit-transform: translate(10000%, -5000%) rotate(-35deg);transform: translate(10000%, -5000%) rotate(-35deg);}
}

@-webkit-keyframes pez2 {
    0% {-webkit-transform: translate(0, 0) rotate(35deg);transform: translate(0, 0) rotate(35deg);}
    100% {-webkit-transform: translate(10000%, 5000%) rotate(35deg);transform: translate(10000%, 5000%) rotate(35deg);}
}

@keyframes pez1 {
    0% {-webkit-transform: translate(0, 0);transform: translate(0, 0);}
    100% {-webkit-transform: translate(10000%, 0);transform: translate(10000%, 0);}
}

@keyframes pez3 {
    0% {-webkit-transform: translate(0, 0) rotate(-35deg);transform: translate(0, 0) rotate(-35deg);}
    100% {-webkit-transform: translate(10000%, -5000%) rotate(-35deg);transform: translate(10000%, -5000%) rotate(-35deg);}
}

@keyframes pez2 {
    0% {-webkit-transform: translate(0, 0) rotate(35deg);transform: translate(0, 0) rotate(35deg);}
    100% {-webkit-transform: translate(10000%, 5000%) rotate(35deg);transform: translate(10000%, 5000%) rotate(35deg);}
}





#descripcion {
    position: absolute;
    z-index: 30;
    -webkit-transition-duration:1000ms;
         -o-transition-duration:1000ms;
            transition-duration:1000ms;
    margin: 0px 0;
    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
    z-index: 20;
    -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-yorokobu {
    z-index: 30;
    -webkit-transition-duration: 1000ms;
         -o-transition-duration: 1000ms;
            transition-duration: 1000ms;
    text-align: left;
    margin: 0px 0;
    height: 8%;
    width: 100%;
    margin-bottom: 5%;
}

h1 {
    -webkit-transition-duration:2000ms !important;
         -o-transition-duration:2000ms !important;
            transition-duration:2000ms !important;
    z-index: 20;
    text-align: left;
    font-size: 2.2rem;
    font-family: arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
    margin-bottom: 25px;
}



#descripcion p {
    text-align: left;
    z-index: 20;
    margin-bottom: 30px;
    line-height: 1.35;
    font-style: italic;
    font-family: arial, 'Segoe UI', Tahoma, Geneva, Verdana, 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 {
    -webkit-filter: invert(100%);
            filter: invert(100%);
    z-index: 20;
    position: absolute;
    background-position: center;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 2em;
    height: 20%;
}

#scroll2 {
    -webkit-filter: invert(100%);
            filter: invert(100%);
    z-index: 20;
    -webkit-animation: upDown 400ms 1s infinite alternate linear;
            animation: upDown 400ms 1s infinite alternate linear;
    position: absolute;
    background-position: center;
    bottom:20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 2em;
    height: 20%;
}

@-webkit-keyframes upDown {
    0% {-webkit-transform: translateY(0%) translateX(-50%);transform: translateY(0%) translateX(-50%);}
    100% {-webkit-transform: translateY(5%) translateX(-50%);transform: translateY(5%) translateX(-50%);}
}

@keyframes upDown {
    0% {-webkit-transform: translateY(0%) translateX(-50%);transform: translateY(0%) translateX(-50%);}
    100% {-webkit-transform: translateY(5%) translateX(-50%);transform: translateY(5%) translateX(-50%);}
}

/*----- 

SECCIÓN 2 


-----*/

article > section:nth-child(2) {
    margin-top: 100px;
    background: linear-gradient(#fff,#fff,#fff,#ccebf6,#ccebf6);
    width: 100%;
    height: 930px;
    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;
}
 
.part1 {
    -webkit-animation: floating 5s infinite alternate linear;
            animation: floating 5s infinite alternate linear;
    z-index: 220;
    /*background-image: url(../images/yorokobu/part1.png);*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 300%;
    width: 100%;
    top: 0%;
    margin: 10px 0;

}

.y_yorokobu {
position: absolute;
top: 0; left: 0;
    -webkit-animation: floating 5s infinite alternate linear;
    animation: floating 5s infinite alternate linear;
z-index: 220;
background-image: url(../images/yorokobu/y_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}

.o1_yorokobu {
    position: absolute;
    top: 0; left: 0;
    -webkit-animation: floating 5s infinite alternate linear;
    animation: floating 5s  infinite alternate linear;
z-index: 220;
background-image: url(../images/yorokobu/o1_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}

.r_yorokobu {
    position: absolute;
    -webkit-animation: floating 5s infinite alternate linear;
    animation: floating 5s infinite alternate linear;
z-index: 220;
background-image: url(../images/yorokobu/r_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}

.o2_yorokobu {
    position: absolute;
    -webkit-animation: floating 5s infinite alternate linear;
    animation: floating 5s infinite alternate linear;
z-index: 220;
background-image: url(../images/yorokobu/o2_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}

.k_yorokobu {
    position: absolute;
    -webkit-animation: floating 5s infinite alternate linear;
    animation: floating 5s infinite alternate linear;
z-index: 220;
background-image: url(../images/yorokobu/k_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}

.o3_yorokobu {
    position: absolute;
    -webkit-animation: floating 5s infinite alternate linear;
    animation: floating 5s infinite alternate linear;
z-index: 220;
background-image: url(../images/yorokobu/o3_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}

.b_yorokobu {
    position: absolute;
    -webkit-animation: floating 5s infinite alternate linear;
    animation: floating 5s infinite alternate linear;
z-index: 220;
background-image: url(../images/yorokobu/b_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}

.u_yorokobu {
    position: absolute;
    -webkit-animation: floating 5s infinite alternate linear;
    animation: floating 5s infinite alternate linear;
z-index: 220;
background-image: url(../images/yorokobu/u_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}

.agua_yorokobu {
    -webkit-filter: drop-shadow(0px 0px 0px #92bac900);
            filter: drop-shadow(0px 0px 0px #92bac900);
            opacity: .3;
            filter: url('#turbulence');
    position: absolute;
    -webkit-animation: floating 5s 3s infinite alternate linear;
    animation: floating 5s 3s infinite alternate linear;
z-index: 20;
background-image: url(../images/yorokobu/agua_yorokobu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
}


@-webkit-keyframes floating {
    0% {-webkit-transform: translateY(0%);transform: translateY(0%);}
    100% {-webkit-transform: translateY(-5%);transform: translateY(-5%);}
}

@keyframes floating {
    0% {-webkit-transform: translateY(0%);transform: translateY(0%);}
    100% {-webkit-transform: translateY(-5%);transform: translateY(-5%);}
}

/*----- 

SECCIÓN 3


-----*/

article > section:nth-child(3) {
    background-color: #ccebf6;
    width: 100%;
    height: 1160px;
    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;
}


.part2 {
    -webkit-animation: floating 5s infinite alternate linear;
            animation: floating 5s infinite alternate linear;
    margin: 10px 0;
    z-index: 20;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 380%;
    width: 100%;
    top: 0%;
    -webkit-filter: drop-shadow(0px 0px  25px #92bac9);
            filter: drop-shadow(0px 0px  25px #92bac9);
}


.portada_yorokobu {
    position: absolute;
    top: 0; left: 0;
        -webkit-animation: floating 5s infinite alternate linear;
        animation: floating 5s infinite alternate linear;
    z-index: 220;
    background-image: url(../images/yorokobu/portada_yorokobu.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    }

    .contraportada_yorokobu {
        position: absolute;
        top: 0; left: 0;
            -webkit-animation: floating 5s infinite alternate linear;
            animation: floating 5s infinite alternate linear;
        z-index: 220;
        background-image: url(../images/yorokobu/contraportada_yorokobu.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
        }


/*----- 

SECCIÓN 4


-----*/

article > section:nth-child(4) {

    z-index: 200;
    background: -webkit-gradient(linear,left top, left bottom,from(#ccebf6),color-stop(#ccebf6),color-stop(#ccebf6),to(#fff));
    background: -o-linear-gradient(#ccebf6,#ccebf6,#ccebf6,#fff);
    background: linear-gradient(#ccebf6,#ccebf6,#ccebf6,#fff);
    width: 100%;
    height: 595px;
    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;
}
 


.part3 {
    -webkit-animation: floating 5s infinite alternate linear;
            animation: floating 5s infinite alternate linear;
    margin: 10px 0px 50px;
    z-index: 20;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 180%;
    width: 100%;
    top: 0%;
}

.coche_yorokobu {
    position: absolute;
    top: 0; left: 0;
        -webkit-animation: floating 5s infinite alternate linear;
        animation: floating 5s infinite alternate linear;
    z-index: 220;
    background-image: url(../images/yorokobu/coche_yorokobu.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    }

    .agua2_yorokobu {
        position: absolute;
        top: 0; left: 0;
            -webkit-animation: floating 5s infinite alternate linear;
            animation: floating 5s infinite alternate linear;
        z-index: 20;
        background-image: url(../images/yorokobu/agua2_yorokobu.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
        }

        p {
            position: relative;
            top: 100%;
            width: 100%; 
            text-align: center;
            z-index: 20;
            font-size: .8rem;
            font-weight: 100;
            font-family: arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
            margin-bottom: 25px;
        }
        
  
  
/*----- 

SECCIÓN 5 MÁS PROYECTOS


-----*/


.container-section {
    position: absolute !important;
    z-index: 1000 !important;
    width: 100%;
}

a {
    text-decoration: none;
    width: 100%;
}

article > section:nth-child(5){
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), to(rgba(0, 0, 0, 0.2))) , url(../images/portada_peekaboo.jpg);
    background: -o-linear-gradient(rgba(0,0,0,0.2), rgba(0, 0, 0, 0.2)) , url(../images/portada_peekaboo.jpg);
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0, 0, 0, 0.2)) , url(../images/portada_peekaboo.jpg);
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position-y: 40%;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

article > section:nth-child(5):hover {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0, 0, 0, 0.5))) , url(../images/portada_peekaboo.jpg);
    background: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5)) , url(../images/portada_peekaboo.jpg);
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5)) , url(../images/portada_peekaboo.jpg);
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    background-size: cover;
    background-position: center;
    background-position-y: 35%;
}

#seccionCinco {
    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;
}

#seccionCinco div {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    padding-right: 1.2rem;
}

h2 {
    margin-bottom: 20px;
}

#seccionCinco h2 {
   margin-top: 3%;
    font-size: 2.5rem;
    color: white;
}


#seccionCinco p {
    color: white;
    line-height: 2;
}

/*----- FOOTER -----*/


footer {
    z-index: 100;
    position: static;
    z-index: 50;
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(#92bac9));
    background: -o-linear-gradient(left, #fff, #92bac9);
    background: linear-gradient(to right, #fff, #92bac9);
    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: black;}

.copyright {
    text-align: center;
    float: right;
    color: black;
    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: black;
    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: 91%;
        max-width: 3840px;
    }
}


@media screen and (max-width: 1920px){ 
    .container {
        max-width: 1920px;
    }
    #intro {
        height: 970px !important;
    }

}

@media screen and (min-width: 960px) and (max-width: 1300px){
    .col h3 {
        font-size: 1.05rem;
    }
    h2 {
        font-size: 1.43rem;
    }

    #descripcion {
        -webkit-transform: translateY(20%);
            -ms-transform: translateY(20%);
                transform: translateY(20%);
    }
}

@media screen and (max-width: 959px){

    header {
        width: 100%;
    }
    #intro{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column wrap;
                flex-flow: column wrap;
    }

    h1 {
        font-size: 3.3rem;
    }
    #descripcion {
        left: 50%;
        -webkit-transition-duration:1000ms;
             -o-transition-duration:1000ms;
                transition-duration:1000ms;
        margin: 0px 0;
        margin-top: 150px;
        -webkit-transform: translateY(-20%) translateX(-50%);
            -ms-transform: translateY(-20%) translateX(-50%);
                transform: translateY(-20%) translateX(-50%);
        z-index: 20;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        width: 100%;
        padding: 2em 5em;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

 
    
    #logo-yorokobu {
        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: 0px 0;
    }



    .col {
        padding: 30px 0;
    }

  


    #seccionCinco {
        text-align: left;
    }


    article > section:nth-child(5):hover {
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0, 0, 0, 0.5))) , url(../images/portada_peekaboo.jpg);
        background: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5)) , url(../images/portada_peekaboo.jpg);
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5)) , url(../images/portada_peekaboo.jpg);
        -webkit-transition: .3s ease;
        -o-transition: .3s ease;
        transition: .3s ease;
        background-size: cover;
        background-position:  center 40%;
    }
    



}

@media screen and (max-width: 659px){
  
    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%);
    }

    .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;
        margin-top: 150px;
        -webkit-transform: translateY(-10%);
            -ms-transform: translateY(-10%);
                transform: translateY(-10%);
        z-index: 20;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        padding: 2em 5em;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    
    
    #logo-yorokobu {
        padding: 0 0;
        -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;
        height: 5%;
        width: 100%;
        background-size: contain;
        
    }
    
    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 ;
    }

    #scroll1, #scroll2 {
        width: 5%;
        margin-bottom: -16px;
    }
    

    article > section:nth-child(2) {
        height: 560px;
        margin-top: 250px;
    }
  
   article > section:nth-child(3) {
        height: 700px;
    }
  
    article > section:nth-child(4) {
        height: 400px;
    }
  

    .part1 {
        height: 560px;
    }

    .part2 {
        height: 680px;
    }

    .part3 {
        height: 320px;
    }


    #seccionCinco {
        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;}
    
        #seccionCinco h2 {
            position: relative;
            width: 100%;
            text-align: center;
            font-size: 1.5em;
            margin-top: 20%;
        }

        #icons {
            display:flex;
            text-align: center;
            align-items: center;
            justify-content: space-around;
            margin: 1em 0 1em 0;
        }
}

@media screen and (max-width: 480px){


    #scroll1, #scroll2 {
        width: 5%;
        bottom: 0 !important;
        margin-bottom: -16px;
    }
    


    body {overflow-x: hidden;}
  
 
    p {line-height: 1.1 !important;}

    #seccionCinco h2 {font-size: 1.8rem;}

    #seccionCinco h2 {font-size: 1.8rem; margin-top: 0;position: relative; top: 20%;}
    #seccionCinco p {position: relative; top: 20%;}


    .coche_yorokobu {
        background-image: url(../images/yorokobu/cochem_yorokobu.svg);
        }
    
        .agua2_yorokobu {
            background-image: url(../images/yorokobu/agua2m_yorokobu.svg);
            }
.pez1,.pez2,.pez3, .pez4, .pez5, .pez6, .pez7, .pez8, .pez9, .pez10 {
    height: 15px; width: 15px;
}
    
            article > section:nth-child(2) {
                position: relative;
                height: 300px;
                margin-top: 100px !important;
            }
            .part2 {
                height: 300px;
            }

            article > section:nth-child(3) {
                height: 300px;
            }

            .part3 {
                height: 300px;
            }
            #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);}
}