@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&display=swap');

/* typography */
h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
small,
li,
label {
    font-family: 'Manrope', sans-serif;
}

p {
    font-size: 1.2rem;
    color: #7C7C7C;
}

#top-nav-bar {
    position: fixed;
    background: #fff;
    width: 100%;
    z-index: 20000;
    -webkit-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.1); 
    box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.1);
    border-radius: 0px 0 40px 40px;
    margin-bottom: 2rem;
    padding: .3rem 0;
}
#top-nav-bar  .phone-link {
    font-size: 24px;
    color: #000;
}
i {
    color: #E57A3E;
}
.top-logo {
    max-width: 172px;
}

/* hero */
h1 {
    font-size: 3rem;
    font-weight: 800;
}
h2 {
    font-size: 2rem;
    line-height: 2.2rem;
    font-weight: 700;
}
#hero h2 {
    font-size: 1.5rem;
    line-height: 1.2;
}

.text-black {
    color: #000;
}
.text-white {
    color: #fff;
}
#hero {
    position: relative;
    background-size: contain;
    padding-top: 8rem;
}
.garantia {
    margin-top: 1rem;
    max-width: 250px;
}

 .hero-image {
    margin-top: -350px;
    z-index: -10;
    position: relative;
}

.button.black {
    font-size: 1.3rem !important;
    background: #000;
    color: #fff;
    border-radius: 50px;
    margin: .5rem 0;
}

/* ergonomia */

#ergonomia {
    background: #FBE9A9;
}
#ergonomia .chair {
    width: 75%;
}
/* features */

#features {
    background: #E57A3E;
    background-size: auto;
    margin-top: -50px;
    background: url('../img/ergos/bg_features.svg') no-repeat center center;
    background-size: cover;
}

#features .box-feat {
    background: #fff;
    padding: 2rem 1rem;
    border-radius: 40px;
}
#features span {
    color: #E57A3E;
}
#features h4 {
    font-weight: 700;
}
/* download catalogo */
#catalogo {
    background:  url('../img/ergos/bg_catalogo_bottom.svg') no-repeat center;
    background-size: cover;
    padding: 3rem 0;
}

/* middle cta*/
#middle-cta {
    margin-top: 100px;
    padding: 3rem 0;
}

#more-features img {
    margin-bottom: 1.5rem;
}
#more-features h4 {
    font-weight: 700;
}
#sizes {
    margin-top: 2rem;
}
#sizes h4 {
    font-weight: 700;
}

.box-sizes {
    background: #fff;
    padding: 1rem;
    border-radius: 0px 40px 40px 40px;
    margin-top: -200px;
}
.box-sizes p {
    font-size: 1rem;
}

.sizes-row {
    display: flex;
}

.sizes-row p {
    margin-right: 1rem;
}

#video-ergosone {
    border-radius: 25px;
    margin-top: 3rem;
    margin-bottom: -150px;
}

/* colors */

#colors {
    padding: 3rem 0;
}

#colors h2 {
    margin-bottom: 2rem;
}

.colors-wrapper {
    margin: 0 1rem;
    border-radius: 40px;
    max-width: 240px;
    padding: 2rem;
}

/* bottom-cta */

#bottom-cta {
    padding-bottom: 2rem;
}

#galeria {
    background: #E57A3E url('../img/ergos/bg_galeria.svg') no-repeat center;
    background-size: cover;
}
#galeria .bottom-img {
    margin-bottom: -200px;
}


.testimonial {
    background: #fff;
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 40px;
    width: 100%;
}

.avatar {
    display: flex;
}

.align-el-right {
    float: right;
}

#galeria .grow {
    width: 100%;
}

#form-section {
    position: relative;
    padding-top: 5rem;
    background: #FBE9A9;
}
#form-wrapper {
    position: relative;
    z-index: 100;
    padding-bottom: 3rem;
}
.form-chair {
    width: 100%;
    z-index: 1;
}
#footer {
    border-top: 1px solid  #ccc;
    padding: 2rem 0;
    margin-top: 2rem;
}

#copyrights {
    background: #E57A3E;
    color: #fff;
    padding: 1rem 0;
}
.slick-prev:before, .slick-next:before {
    color: #000;
    z-index: 1000 !important;
}
.slick-next {
    right: -20px;
}
.slick-prev {
    left: -20px;
    z-index: 10 !important;
}

.form-fields {
    background: #fff;
    min-height: 50px;
    border-radius: 8px;
    border: 0;
}
textarea {
    border: 0;
    border-radius: 8px;
}

#form-section a {
    font-size: 1.2rem;
    color: #000;
}
.map_es {
    max-width: 280px;
}

#rgpd h5 {
    font-weight: normal;
    text-transform: uppercase;
  }
  
  #rgpd p,
  #rgpd li {
    color: #000;
    font-size: .8rem;
  }

  #galeria .cases {
    border-radius: 25px;
  }
  
/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {
    h1 {
        font-size: 4rem;
        font-weight: 800;
    }
    h2 {
        font-size: 3rem;
        line-height: 3.5rem;
        font-weight: 700;
    }
    #hero h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
    #hero p {
        font-size: 1.5rem;
    }
    #galeria .grow {
        width: auto;
    }
    .testimonial {
        max-width: 400px;
    }
    .title p {
        font-size: 1.4rem;
    }
    .map_es {
        max-width: 100%;
    }
    .box-sizes {
        margin-top: 0px;
        background: #fff;
        padding: 1rem 2rem;
        margin-left: -100px;
        border-radius: 40px 40px 0 40px;
    }
    #features .box-feat {
        background: #fff;
        padding: 4rem;
        border-radius: 40px;
        margin-top: -80px;
    }
    .form-chair {
        position: absolute;
        background: #FBE9A9;
        bottom: 0;
        width: 100%;
        z-index: 1;
    }
    #form-section {
        position: relative;
        padding: 5rem 0;
        background: #FBE9A9;
    }
    #form-wrapper {
        position: relative;
        z-index: 100;
        padding-bottom: 15rem;
    }
    .sizes-row p {
        margin-right: 1.5rem;
    }
    #video-ergosone {
        border-radius: 25px;
        margin-top: 3rem;
        margin-bottom: -200px;
    }
    #middle-cta {
        margin-top: 170px;
        padding: 3rem 0;
    }
    #ergonomia .chair {
        max-height: 1000px;
        margin-top: -50px;
        width: 100%;
    }
    #colors {
        padding: 8rem 0;
    }
    .garantia {
        position: absolute;
        top: 100px;
        right: 25%;
        z-index: 100000;
        max-width: 280px;
    }
}