* {
    box-sizing: border-box;
}
body {
    font-family: "Montserrat", sans-serif;
}

#wrapper {
    scroll-snap-type: mandatory;
    scroll-snap-type: y mandatory;
    scroll-snap-align: start;
    overflow-y: scroll;
    margin: 0;
    height: 100vh;
}

section, .faux-section {
    display: block;
    padding: 0rem;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    text-align: left;
    position: relative;
    color:white;
    overflow:hidden;
    position:relative;
}

/*
#cookie-notice { 
    z-index:1000;
    color: #fff;
    background-color: #000;
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 50px;
    text-align: center;
}
#cookie-notice a {
    color:#ff4900;
    text-decoration:none;
}
*/

.faux-section { 
    position:absolute; z-index: 250; top:0px; left:0px; width: 100%; pointer-events: none; z-index:1010;
}

a { color: white; text-decoration: underline; transition: .4s ease;}
.bGray a:hover { text-decoration:none; color:#ff4900; }
.bOrange a:hover { text-decoration:none; color:#474746; }    

a.call-to-action {
    text-decoration: none;
    padding: 3.5rem 0rem; font-size: 1rem; line-height: .75rem;
    display: inline-block;
    width: 8rem; height:8rem; border-radius: 5rem;
    text-align: center;
    position:relative;
    margin-left: -2rem;
}

a.call-to-subscribe {
    text-decoration: none;
    padding: 3.5rem 0rem; font-size: 1rem; line-height: .75rem;
    display: block;
    width: 8rem; height:8rem; border-radius: 5rem;
    text-align: center;
    position:absolute;
    bottom: 90px;
    right: 140px;
}

.bOrange a.call-to-action { background-color: #474746; transition: .4s ease;}
.bOrange a.call-to-action:hover { background-color: #fff; color:#474746;}   
.bGray a.call-to-action { background-color: #ff4900; transition: .4s ease;}
.bGray a.call-to-action:hover { background-color: #fff; color:#ff4900;}        


section h2 { font-size: 28px; }

section .contenido, .faux-section .contenido { position: absolute; top:50%; left:15%; transform: translate(0%, -50%); width:35%; margin:0px; }
section .contenido .columns { column-count: 2; column-gap: 2rem; float:left; width: 90%; margin: 5%; }
section .contenido .column-2 { float:left; width: 45%; margin-right: 5%; }    
section .contenido .column-3 { float:left; width: 30%; margin-right: 3%; }        
section#que-hacemos .contenido, section#como-hacemos .contenido, section#hablemos .contenido { width:70%; transform:none; margin-top: -3.9%; } /* 70 * .11 / 2 *//* .11 Es la proporció del logo 1 a .11*/
section#que-hacemos .contenido h2, section#como-hacemos .contenido h2 { width: 60%; }
section#hablemos .contenido h2 { margin-top: 1rem; }

section .columns ul {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
    display: table;
}

ol {
    list-style: none;
    counter-reset: my-awesome-counter;
  }
ol li {
    counter-increment: my-awesome-counter;
    margin-bottom: .25em;
  }

ol li::before {
    content: counter(my-awesome-counter) " ";
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    margin-left: -40px;
    text-align: center;
    background: #fff;
    border-radius: 15px;
    color: #ff4000;
    font-size: 25px;
}

section#metodologia .contenido { width:70%; transform:none;  margin-top: -3.9%;}  
section#metodologia .contenido .slideshow {width: 60%; margin: 2rem auto; }  

/*section#casos .contenido, section#news .contenido { transform: translate(0%, -50%); width:70%; } */
section#casos, section#news { height:initial; min-height:100vh; }
section#casos .contenido, section#news .contenido { width:70%; position:static; margin: 150px auto; }

.bGray { background-color:#474746; }
.bOrange { background-color:#ff4900; }

section#que-hacemos { 
    background-image: url(img/orange-speaker.jpg); 
    background-size: 50%;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: top right;     
}

section#como-hacemos { 
    background-image: url(img/gray-bike.jpg); 
    background-size: 50%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: bottom right;     
}

/*{ 
    background-image: url(img/elimpacto-logo.svg), url(img/orange-cam.jpg); 
    background-size: 70%, 50%;
    background-repeat:no-repeat, no-repeat;
    background-attachment:fixed, fixed;
    background-position: center, bottom right;       
} */   

section#casos:last-child { 
    background-image: url(img/orange-team.jpg); 
    background-size: 50%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: bottom right;         
}    
section#news:last-child { 
    background-image: url(img/gray-plant.jpg); 
    background-size: 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom right;       
}   
section#hablemos { 
    background-image: url(img/elimpacto-logo.svg), url(); 
    background-size: 70%, 50%;
    background-repeat:no-repeat, no-repeat;
    background-attachment:fixed, fixed;
    background-position: center, bottom right;         
}   

section#casos, section#news { background-repeat:no-repeat;}

.slideshow { width: 70%; margin-left: 15%; }

#nav { 
    position: fixed;
    z-index: 200;
    top:0px;
    padding-top: 1em;
    left: 0px;
    width: calc(100% - 17px);
    text-align: center; 
    background-color:#ff4900;
}

#nav a {color:white; text-decoration:none; text-transform:uppercase; font-size: .7em; }   
#nav #social a { margin-left: 1em; text-align:center; transition: .2s ease-in-out; }  

#nav #social a:hover { color:#000;}

#nav a[aria-current="page"] { text-decoration: underline; }

.menu-main-container li {
    display: inline-block;
}

.menu-main-container {
    list-style-type: none;
}

#legal {
    position: fixed;
    z-index:500;
    white-space: nowrap;
    color: #fff;
    top: 50%;
    left: 12px;
    font-size: 11px;
    line-height: 1px;
    opacity: .5;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: translateY(-50%) rotate(180deg);
}


.contenido .slideshow { text-align:center; font-size: 24px; margin-bottom: 2rem; }

#social { display:block; }
#social-mobile { display:none;}

#social-mobile .menu {
    width:100%;
    background-color: #fff;
}


#social-mobile .menu ul { padding:0px; position:absolute; width:100%;background-color: #fff; top:0em; box-shadow: 0px 10px 20px rgba(0,0,0,0);transform:translateY(-100%); transition: .4s ease-out; }
#social-mobile .menu.open ul { transform: translateY(0); box-shadow: 0px 10px 20px rgba(0,0,0,.3); }
#social-mobile .menu li { display:block; padding: 10px; border-bottom: 1px solid rgba(71, 71, 70,.05); }
#social-mobile .menu li a { color:block; color:#474746; font-size: 18px; }

.wpcf7 {
    float: right;
    text-align: right;
}

section#news .contenido .wpcf7 h2 {
    width: 100%;
    margin-top: 0rem;
}

.wpcf7 p {    font-size: 14px; width: 100%;}

.wpcf7 input[type=email] { 
    border:0px;
    padding: 10px;
    width: 400px; 
    font-size: 18px;
}

.wpcf7 input[type=submit] {
    outline:0;
    border: 0;
    margin-top:1em;
    padding: 3.5rem 0rem; font-size: 18px; line-height: .75rem;
    background-color:#474746; color:#fff;
    display: inline-block;
    width: 8rem; height:8rem; border-radius: 5rem;
    text-align: center;
}

.wpcf7 .wpcf7-response-output { border:0px; font-size: 18px;}

@media (max-width: 1025px) { 
    section .contenido h2, section .contenido h2 { width: 100%!important; font-size: 24px; }
    section#que-hacemos { 
        background-size: 70%, 50%;
        background-position: center, center right;     
    }
}

@media (max-width: 769px) { 
    section .contenido .column-2, section .contenido .column-3, section .contenido .columns { float:left; width: 100%; margin-right: 0%; column-count:1; } 
    #wrapper {
        scroll-snap-type: initial;
        scroll-snap-type: initial;
        scroll-snap-align: initial;
        overflow-y: scroll;
        margin: 0;
        height: initial;
    }
}

@media (max-width: 426px) { 
    #social { display:none; }
    #social-mobile { display:block; padding-bottom:1rem;}
    #nav { width:100%;}
    section .contenido h2, section .contenido h2 { width: 100%!important; font-size: 18px!important; }
    .logo-void { content: url(img/elimpacto-logo.svg); }
    section#que-hacemos { background-image: url(img/orange-speaker.jpg);        background-size: 300px;        background-position: top right;         }
    section#como-hacemos { background-image: url(img/gray-bike.jpg);        background-size: 300px;        background-position: bottom right;         }
    section#que-hacemos .contenido, section#como-hacemos .contenido { transform: translateY(-50%); margin-top:0px; text-align:center; }
    a.call-to-action { margin:auto; }

    section#hablemos {         background-image: none;     }   
    section#casos:last-child, section#news:last-child { background-size: 100%;        background-position: bottom center;             }    
    .slideshow { width: 100%; margin-left: 0%; }
    section .contenido, .faux-section .contenido {  width: 70%; margin:100px auto!important;  }
    section#casos .contenido, section#news .contenido { transform:none; margin: 100px auto; position:static!important;}

    section#casos, section#news { transform:none; padding: 100px auto; position:static!important; background-repeat:no-repeat;}

    section#news { background-size: contain; }

    .scroll-downs, .mousey { display:none; }

}


.scroll-downs {
    position: fixed;
    top: calc(100vh - 120px);
    left: calc(50% - 17px);
    z-index:1000;
    width :34px;
    height: 55px;
  }
  .mousey {
    transform: scale(0.75);
    width: 5px;
    padding: 10px 15px;
    height: 35px;
    /*border: 2px solid #fff;*/
    background-color:#fff;
    border-radius: 25px;
    opacity: 1;
    box-sizing: content-box;
  }
  .scroller {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #474746;
    animation-name: scroll;
    animation-duration: 1s;
    /*animation-timing-function: cubic-bezier(.15,.41,.69,.94);*/
    animation-iteration-count: infinite;
  }
  @keyframes scroll {
    0% { opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0;}
  }