/*
Theme Name:   Starter 1
Author:       DentalQore
Author URI: https://dentalqore.com/
Template:     charlie
Description:  Child theme for DentalQore Website Platform - can be edited 
Version: 2.0
*/
@import url('css/footer.css');

p + .button-wrap {
    margin: 0;
}

.dark-bg {
    background: #2c2c2c;
}

.blue-text {
    color: #0056b4;
}

.muted-bg {
    background: #fbfbfb;
}

.formatted-hours tr:first-of-type {
    display: none;
}

/* COME SAY HELLO SECTION
-----------------------------------------------*/
.map-area {
    position: relative;
    padding: 100px 0;
}
.map-area .container > .row {
    align-items: center;
}

.no-webp .map {
    background-image: url(./images/map.jpg);
}
.webp .map {
    background-image: url(./images/map.webp);
}

.map {
    display: block;
    max-width: 100%;
    width: 100%;
    min-height: 629px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.map-area .map-side {
    padding: 0;
    margin: 0;
}

.map-area .dark-bg {
    min-height: 629px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-left: 88px;
}

.map-area .dark-bg .row {
    justify-content: space-between;
    align-items: flex-start;
    max-width: 710px;
    width: 100%;
}

.map-area .contact-side {
    max-width: 335px;
    width: 100%;
}

.map-area h2 {
    color: #fff;
    text-align: left;
}

.map-area h3 {
    font-weight: 600;
    font-size: 33px;
    line-height: 138%;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 10px 0;
}

.map-area h3.address-heading {
    margin-top: 50px;
}

.map-area p,
.map-area .col-lg-7 a {
    color: #fff;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
    line-height: 138%;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.map-area .formatted-hours td {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 150%;
    color: #ffffff;
}

/* Default Container Padding */
.container {
    max-width: 100%;
    padding: 0 150px;
}

/* RESPONSIVE
-----------------------------------------------*/
@media (max-width: 1700px) {
    .map-area .dark-bg {
        padding: 0 50px;
    }

    .map-area .dark-bg .row {
        max-width: 100%;
    }

    .map-area h2 {
        max-width: 100%;
        width: 100%;
    }

    .map-area .contact-side {
        max-width: 275px;
    }
}

@media (max-width: 1600px) {
    .map-area h3 {
        font-size: 28px;
    }

    .map-area p,
    .map-area .col-lg-7 a {
        font-size: 22px;
    }

    .map-area .formatted-hours td {
        font-size: 18px;
    }

    .map-area .contact-side {
        max-width: 225px;
    }
}

@media (max-width: 1550px) {
    .container,
    .home .contentarea .container {
        padding: 0 100px;
    }
}

@media (max-width: 1400px) {
    .map-area .container {
        padding: 0;
    }
}

@media (max-width: 1200px) {
    .map-area .container > .row {
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    .map-area .map-side {
        max-width: 100%;
        width: 100%;
    }

    .map-area .dark-bg {
        max-width: 100%;
        width: 100%;
        padding: 0 200px;
    }
}

@media (max-width: 1025px) {
    .container,
    .home .contentarea .container {
        padding: 0 50px;
    }
}

@media (max-width: 991px) {
    .map-area .dark-bg {
        padding: 0 50px;
    }
}

@media (max-width: 767px) {
    .container,
    .home .contentarea .container {
        padding: 0 25px;
    }

    .map-area .dark-bg .row {
        flex-flow: column;
        max-width: 400px;
        position: relative;
        margin: 0;
    }

    .map-area .dark-bg {
        padding: 50px 40px;
    }
}