﻿
/*.header {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: #f2f2f2;
}*/

    .header .text h1 {
        font-weight: 100;
    }

.banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/7_contact-phone.jpg');
    background-size: cover;
    background-position: left top;
}

@media (min-width: 400px) {

    .banner {
        background-image: url('/images/7_contact banner-pc.jpg');
    }
}


.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.contact-address #addressHeading {
    color: var(--color-teal);
}

.contact-info #contactHeading {
    color: var(--color-teal);
}

.contact-info .contact-note {
    color: var(--color-teal);
}

.imageBorder {
    width: 100%;
    max-width: 420px;
    height: auto;
    min-height: 300px;
    box-shadow: var(--soft-shadow);
    object-fit: cover;
    border-radius: 50px;
    border: 4px solid var(--color-yellow);
}


@media (min-width: 748px) {
    .header {
        height: 520px;
    }

    .contact-grid {
        column-count: 2;
        column-rule: 2px solid var(--color-yellow);
    }
}
