
/** ABOUT US **/

#about {
    position: relative;
    top: -1.5rem;
}

#about article > .article {
    padding: 10rem 4rem;
}

#about article > .wave {
    background-position-x: center;
    background-repeat: repeat-x;
    background-size: 20rem;
    height: 6rem;
}

#about .this .max_width {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 5rem;
}

/** ABOUT **/

#about .about {
    background-color: #FFFFFF;
}

#about .about > .article {
    background-color: #F02004;
    background-image: url(../../svg/fondo_ondulado.svg);
    background-position-x: center;
	background-repeat: repeat;
    background-size: 10rem;
    color: #FFFFFF;
}

#about .about > .wave {
    background-image: url(../../svg/borde_ondulado_r.svg);
}

/** IDEA **/

#about .idea > .article {
    background-color: #FFFFFF;
}

#about .idea > .wave {
    background-image: url(../../svg/borde_ondulado_h.svg);
}

#about .this img {
    flex-shrink: 0;
    width: 35%;
}

#about .this  h4 {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 5rem;
}

#about .this  p {
    font-size: 2.2rem;
    line-height: 3rem;
    margin-bottom: 3rem;
    text-align: justify;
}

/** FEATURES **/

#about .features > .article {
    padding-bottom: 5rem;
}

.features article > section {
    background-color: #FFFFFF;
    border: 1px solid #E9E9E9;
    box-shadow: 0.1rem 0.1rem 0.4rem 0.05rem #0000000D;
}

@keyframes show {
    from    { opacity: 0; left: 20rem; }
    to      { opacity: 1; left: 0; }
}

#about article .max_width {
    position: relative;
    -webkit-animation: show 1s ease;
	-moz-animation: show 1s ease;
    animation: show 1s ease;
}

@media (max-width: 900px) {

    #about .idea .max_width {
        flex-direction: column-reverse;
    }

    #about .this .max_width {
        flex-direction: column;
    }

    #about .this  img {
        flex-shrink: 0;
        max-width: 30rem;
        width: 100%;
    }

    #about .this h4 {
        text-align: center;
    }
}

@media (max-width: 530px) {

    #about article > .article {
        padding: 7rem 2rem;
    }

    #about .features > .article {
        padding-bottom: 3.5rem;
    }
}