/**********************************************************************/
/***                        Secondary Header                        ***/
/**********************************-***********************************/


.contact-container .secondary-header {
    background-image: linear-gradient(var(--60__overlay), var(--60__overlay)), url('../media/four_phones.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 50vh !important;
    background-attachment: fixed;
    top: 0rem;
    left: 0rem;
    color: var(--almost__white);
}

.contact-container .secondary-header blockquote {
    font-size: 1.8rem;
    border-left: 0.5rem solid var(--phthalo__green);
}

.contact-container .secondary-header figcaption cite {
    font-size: 1.3rem;
}


/**********************************************************************/
/***                          Contact Body                          ***/
/**********************************-***********************************/


.contact-body {
    margin: 8rem auto;
}

.contact-heading .row .col {
    padding: 0rem 0.75rem 3rem 0.75rem;
}

.contact-heading h3 {
    margin: 0rem 0rem 3rem 0rem;
}

.contact-heading p {
    font-size: 1.6rem;
}

.contact-submit button {
    color: var(--alameda__gray__6) !important;
    background: rgba(245, 250, 250, 0.25);
    border-radius: 2.7rem !important;
    box-shadow: 0rem 0.2rem 0.7rem rgba(37, 78, 88, 0.4);
    margin: 2rem 1.5rem 0rem 0rem !important;
    transition: all 0.25s linear;
}

.contact-submit button:hover {
    font-weight: 600;
    background: rgba(245, 250, 250, 0.4);
    transition: all 0.25s linear;
}

.contact-submit ion-icon {
    font-size: 2rem;
    transform: translateY(25%);
    transition: all 0.25s linear;
}

.input-field > label {
    font-size: 1.4rem !important;
}


/**********************************************************************/
/***                         Media Queries                          ***/
/**********************************-***********************************/


/****  screen and (min-width: 768px)  ****/

@media screen and (min-width: 768px) {

    /******************************/
    /****   Secondary Header   ****/
    /******************************/

    .contact-container .secondary-header blockquote {
        font-size: 1.9rem;
    }

    .contact-container .secondary-header figcaption cite {
        font-size: 1.4rem;
    }

}

/****  screen and (min-width: 768px)  ****/