@import './reset.css';

.contact__title,
.hero__title {
    font-family: var(--font-title);
    font-size: var(--size-title-mobile)
}

.contact__alert,
.hero__title {
    display: inline-block;
    width: 100%
}

.hero__container--contact {
    position: relative;
    width: 100%;
    background: url(../images/img/img-contact-hero.jpg) center center no-repeat;
    background-size: cover;
    padding: 0 1.4rem;
    color: var(--text-color-white);
    top: 0;
    left: 0
}

.hero__container--contact:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(32, 32, 32, .69);
    background-size: inherit;
    left: 0;
    top: 0;
    z-index: 1
}

.contact .contact__map,
.hero__title {
    position: relative
}

.hero__title {
    font-weight: 500;
    padding: 10vw 0;
    margin: auto 0;
    z-index: 10
}

.contact__title {
    color: var(--primary-color0);
    padding: 1rem
}

.contact__alert,
.contact__subTitle {
    font-size: var(--size-text-mobile);
    font-family: var(--font-text)
}

.contact,
.contact__form {
    width: 100%;
    padding: 1.4rem
}

.contact__alert {
    background-color: #ec6363;
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: left;
    border-radius: 5px;
    color: var(--text-color-white)
}

.contact__subTitle {
    color: var(--text-color-dark);
    font-weight: 700;
    margin-bottom: .5rem
}

.contact__text {
    font-family: var(--font-text);
    color: #646b71;
    font-size: var(--size-subTitle-mobile);
    margin-bottom: 2rem
}

.contact__map iframe {
    width: 100%;
    min-height: 11.6rem
}

.contact__form {
    width: calc(100% - 2.8rem);
    background-color: var(--table-color-1);
    margin: 2rem 1.4rem;
    border-radius: 8px
}

.contact__input {
    width: 100%;
    padding: 5px .5rem;
    border-radius: 5px;
    margin: .1rem 0 1rem;
    font-family: var(--font-text);
    -webkit-box-shadow: 0 0;
    box-shadow: 0 0;
    border: 0;
    outline: 0;
    font-size: var(--size-text-mobile);
    color: var(--text-color-input);
    background-color: var(--background-color);
}

.contact__input:active,
.contact__input:focus {
    border: 1px solid var(--primary-color-1)
}

.no-js .contact .contact__map:after {
    content: "Mapa Indisponível";
    background-color: rgba(136, 136, 136, .5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    font-family: var(--font-title);
    font-size: var(--size-title-mobile);
    font-weight: 700;
    color: #646b71;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 8px
}

@media screen and (min-width:31rem) {
    .hero {
        padding: 0 2rem
    }
}

@media screen and (min-width:48rem) {
    .hero {
        padding: 0 3.5rem
    }

    .hero__title {
        padding: 5vw 0
    }
}

@media screen and (min-width:56.25rem) {
    .contact {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .contact__title {
        display: block;
        width: 100%
    }

    .contact__div,
    .contact__map {
        width: 45%
    }

    .contact__subTitle {
        margin: 2rem 0 .5rem
    }

    .contact__text {
        margin: 0
    }

    .contact__map iframe {
        height: 100%
    }
}

@media screen and (min-width:64rem) {

    .contact,
    .contact__form,
    .contact__title,
    .hero {
        max-width: 1300px;
        margin: 0 auto
    }

    .contact__form {
        max-width: calc(1300px - 2.8rem);
        margin: 2rem auto
    }

    .contact__input {
        padding: .5rem .7rem
    }
}