section.content-contact {
    max-width: 98rem;
    margin: auto;
    padding: 6rem 2rem;
    position: relative;
    width: 100%;

    h1 {
        text-align: left;
    }

    h1::after {
        left: 0;
        margin-left: 0;
    }

    h2 {
        margin-bottom: 30px;
        font-size: 2.6rem;
        margin-top: 2rem;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        line-height: 1.1em;
    }
}

section.contact-form {
    background-color: #f3f3f3;
    padding-top: 6rem;
    padding-bottom: 6rem;
    margin: 0 auto;
    position: relative;
    width: 100%;

        h2 {
        margin-bottom: 30px;
        font-size: 2.6rem;
        margin-top: 2rem;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        line-height: 1.1em;
    }

    section {
        margin: 0 auto;
        max-width: 122rem;
        padding: 0 2rem;
        position: relative;
        width: 100%;

        ul:first-child {
            padding: 0;
            margin-bottom: 3rem;

            li {

                ul {
                    li.icon-text {
                        flex-wrap: nowrap;
                        align-items: top;
                        padding-bottom: 2rem;
                        display: flex;

                        i {
                            font-size: 3.6rem;
                            color: #db0f80;
                            margin-top: 1rem;
                            margin-right: 1.5rem;
                        }

                        i.phone::after {
                            content: '\e933';
                        }

                        i.envelope::after {
                            content: '\e904';
                        }

                        i.clock::after {
                            content: '\e934';
                        }

                        article {
                            p {
                                text-wrap: pretty;

                                span {
                                    display: block;
                                    font-weight: 700;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    article.container-form {
        margin: 0 auto;
        max-height: 78rem;
        position: relative;
        width: 100%;
        padding: 0;

        form {
            ul {
                .field {
                    margin: 1rem 0 2rem 0;

                    label {
                        visibility: hidden;
                        height: 0;
                        display: none;
                    }

                    input,
                    textarea {
                        color: #757575;
                        appearance: none;
                        background-color: #fff;
                        box-sizing: inherit;
                        padding: 2rem;
                        border: 1px solid #fff;
                        width: 100%;
                        transition: .1s;
                        font-family: "Roboto", sans-serif;
                        font-size: 100%;
                        line-height: 1.15;
                    }

                    .subject {
                        display: none;
                    }

                    .pink-button {
                        padding: 1rem 2.2em;
                    }
                }

                .full-phone {
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: space-between;

                    .prefix {
                        flex: 0 0 38%;
                        max-width: 38%;
                        display: inline-block;
                    }

                    div {
                        flex: 0 0 60%;
                        max-width: 60%;
                    }
                }
            }
        }
    }
}

section.contact-phones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    max-width: 122rem;
    padding: 0 2rem;
    position: relative;
    width: 100%;
    padding-bottom: 6rem;
    padding-top: 6rem;

    figure {
        flex: 0 0 100%;
        max-height: none;
        display: block;
        position: relative;
        overflow: hidden;
        outline: 0;


        img {
            width: 100%;
            max-width: 100%;
            height: auto;
        }
    }

    article.text {
        padding-top: 2rem;
        flex: 0 0 100%;

        h1 {
            text-align: left;
        }

        h1::after {
            left: 0;
            margin-left: 0;
        }

        h2 {
            margin-bottom: 1rem;
            font-size: 2.6rem;
            margin-top: 2rem;
            font-family: "Montserrat", sans-serif;
            font-weight: 900;
            line-height: 1.1em;
        }

        ul {
            li {
                margin-bottom: 1rem;
                display: flex;

                p {
                    display: inline-block;
                }
        
                i {
                    font-size: 1.2em;
                    padding-top: .6rem;
                    vertical-align: top;
                    margin-right: 10px;
                    color: #db0f80;
                    display: inline-block;
                    line-height: 1;
                }
            }
        }

        i.phone::after {
            content: '\e933';
        }

        i.envelope::after {
            content: '\e904';
        }

        i.clock::after {
            content: '\e934';
        }
    }
}

section.career-icons {
    padding: 6rem 0;
    background-image: url(https://images.cdn.thinkion.com.ar/dv/inicio/module-background-dark.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #222427;
    color: #fff;

    article {
        padding: 0 2rem;
        max-width: 122rem;
        position: relative;
        margin: 0 auto;

        h1 {
            text-align: center;
            padding-bottom: 2rem;
            margin: 0 0 3rem;
        }

        h1::after {
            left: 50%;
            margin-left: -3rem;
        }

        ul {
            padding: 0 4rem;
            max-width: 122rem;

            li {
                flex: 0 0 14%;
                text-align: center;
                padding: 20px 0;

                a {
                    color: #fff;
                    padding-top: 2rem;
                    position: relative;
                    text-align: center;
                    display: block;
                    
                    p {
                        color: #fff;
                        padding-top: 1rem;
                        line-height: 1.2em;
                        font-weight: 400;
                    }

                    i {
                        font-size: 8rem;
                        height: 16rem;
                        width: 16rem;
                        color: #0ce8ab;
                        border: 7px solid #0ce8ab;
                        border-radius: 50%;
                        line-height: 1;
                        position: relative;
                        display: inline-block;
                        transition: all .1s ease-in-out;
                    }

                    i::before {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    .map-location::before {
                        content: "\e90f";
                    }

                    .headset::before {
                        content: "\e921";
                    }

                    .envelope::before {
                        content: "\e904";
                    }
                }

                &:hover {
                    i {
                        color: #acfbe5;
                        border-color: #acfbe5;
                        transform: translateY(-10px);
                    }
                }
            }

        }

        div {
            max-width: 98rem;
            margin: auto;
            text-align: center;

            a.pink-button {
                margin-top: 4rem;
            }
        }
    }
}
@media screen and (min-width: 768px) {
    section.career-icons {
        article {
            ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                li {
                    -ms-flex: 0 0 42%;
                    flex: 0 0 42%;
                }
            }
        }
    } 
}

@media screen and (min-width: 992px) {
    section.career-icons {
        padding: 8rem 0;
        article {
            ul {
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -ms-flex-pack: distribute;
                justify-content: space-around;

                li {
                    -ms-flex: 0 0 32%;
                    flex: 0 0 32%;
                    padding: 0;
                }
            }
        }
    } 
}

@media screen and (min-width: 768px) {
    article.container-form {
        form {
            ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .field {
                    flex: 0 0 49%;
                    max-width: 49%;
                }

                .wide {
                    flex: 0 0 100%;
                    max-width: 100%;
                }
            }
        }
    }

    section.contact-phones {
        flex-wrap: wrap;

        figure {
            img {
                max-width: 100%;
                width: 100%;
            }
        }
    }
}

@media screen and (min-width: 992px) {
    section.content-contact {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    section.contact-form {
        padding-top: 8rem;
        padding-bottom: 8rem;

        section {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;

            ul:first-child {
                flex: 0 0 39%;
            }
        }

        article.container-form {
            flex: 0 0 59%;
        }
    }

    section.contact-phones {
        flex-wrap: nowrap;
        padding-bottom: 8rem;
        padding-top: 8rem;

        figure {
            flex: 1;
            max-height: none;
        }

        article.text {
            flex: 1;
            padding-left: 6rem;
        }
    }
}