﻿.body-content p a.callout-button {
    outline: 1px dashed white;
    outline-offset: -5px;
    background: #a3b8a5;
    color: white !important;
    padding: 17px 45px;
    font-weight: 700;
    display: inline-block;
    border: none;
    font-size: 19px !important;
    text-decoration: none;
    margin-top: 20px;
}

    .body-content p a.callout-button:hover {
        color: white !important;
        background: #bd9f40;
    }

.LightPink {
    background: #fae2e1;
}

.menu-wrapper {
    display: flex;
    flex-wrap: wrap;
}


/* Top Banner */

.Interiorbanner {
    height: 275px;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
}

    .Interiorbanner .overlay {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a69567+0,a69567+100&0.2+0,0+51,0.2+100 */
        background: linear-gradient(45deg, rgba(166,149,103,0.2) 0%,rgba(166,149,103,0) 51%,rgba(166,149,103,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

/* Breadcrumbs */

.breadcrumbs {
    background: #fae2e1;
    min-height: 60px;
    padding: 0px 0px;
}

    .breadcrumbs .container .row {
        display: flex;
        align-items: center;
        height: 60px;
    }

    .breadcrumbs span {
        margin: 0px 7px;
        color: white;
        font-weight: 700;
    }

    .breadcrumbs a {
        color: #a48627;
        text-decoration: none;
        font-size: 17px;
    }

        .breadcrumbs a.activeLink {
            font-weight: 700;
            color: #a3b8a5;
        }

/* Main Content */

.mainContent {
    color: #bd9f40;
}

.location {
    flex: 1;
    display: flex;
    align-items: center;
}

.location {
    margin-left: 100px;
    justify-content: end;
}

    .location p {
        margin-bottom: 0px;
    }

    .location a, .location p {
        color: #a48627;
        font-size: 17px;
        text-decoration: none;
    }

    .location i {
        color: #a3b8a5;
        font-size: 32px;
        margin-right: 15px;
    }

.testimonialWrapper {
    background: #fae2e1;
    text-align: center;
    padding: 80px 0px;
    outline: 2px dashed white;
    outline-offset: -15px;
    position: relative;
}

    .testimonialWrapper p:last-child {
        margin-bottom: 0px;
    }

    .testimonialWrapper p {
        line-height: 37px;
    }

    .testimonialWrapper::before {
        content: url(https://immediac.blob.core.windows.net/cremecafeasiarestaurant/cremecafe/smallRoseIcon.png);
        position: absolute;
        top: -65px;
        left: 0;
        right: 0;
    }

.mainContent .section {
    padding: 160px 0px;
}

.mainContent h4 {
    font-family: "Montserrat", sans-serif;
    color: #a3b8a5;
    font-weight: 700;
    font-size: 19px;
    margin-top: 25px;
    margin-bottom: 0px;
    line-height: 30px;
}

.mainContent h2 {
    color: #a48627;
    font-size: 48px;
    margin-right: 20px;
    margin-bottom: 35px;
    margin-top: 0px;
}

.mainContent p {
    color: #a48627;
    font-size: 19px;
    margin-bottom: 25px;
    line-height: 30px;
}

.imageLeft .contentPadding {
    padding-left: 30px;
}

.imageRight .contentPadding {
    padding-right: 30px;
}

.row.extra-content {
    margin-top: 20px;
}


/* Footer */

footer {
    border-top: 8px solid #fae2e1;
}

/* Forms */

.mainContent form label {
    color: #a3b8a5;
    font-weight: 500;
    font-size: 17px;
}

.mainContent form label:after {
    color: #a48627!important;
}

.mainContent form input.cms-field-submit {
    outline: 1px dashed white !important;
    outline-offset: -5px !important;
    background: #a3b8a5;
    color: white !important;
    padding: 17px 45px;
    font-weight: 700;
    display: inline-block;
    font-size: 17px;
    border: none;
}

.mainContent form input.cms-field-submit:hover,
.mainContent form input.cms-field-submit:focus{
    color: white !important;
    background: #bd9f40;
}

.mainContent form .form-control {
    border: none;
    box-shadow: none;
    background: rgba(250, 226, 225, 0.4);
    border-radius: 0px;
    min-height: 55px;
}

.mainContent form textarea.form-control {
    min-height: 125px !important;
}


/* Media Queries */

    @media (min-width: 1367px) and (max-width: 1600px) {
    }

    @media (min-width: 1200px) and (max-width: 1366px) {
        .mainContent h2 {
            font-size: 43px;
        }

        .mainContent p, .mainContent h4 {
            font-size: 17px;
            line-height: 31px;
        }

        .body-content p a.callout-button {
            font-size: 17px !important;
            margin-top: 0px;
        }

        .row.extra-content {
            margin-top: 0px;
        }

        .testimonialWrapper::before {
            transform: scale(.7);
            top: -55px;
        }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
        .mainContent h2 {
            font-size: 43px;
        }

        .mainContent p, .mainContent h4 {
            font-size: 17px;
            line-height: 31px;
        }

        .testimonialWrapper::before {
            transform: scale(.7);
            top: -55px;
        }

        .imageLeft .contentPadding {
            padding-left: 15px;
        }

        .imageRight .contentPadding {
            padding-right: 15px;
        }

        .mainContent .section {
            padding: 80px 0px;
        }

        .body-content p a.callout-button {
            font-size: 17px !important;
            margin-top: 0px;
        }

        .row.extra-content {
            margin-top: 0px;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {

        .location {
            margin-left: 50px;
        }

        .breadcrumbs a {
            font-size: 14px;
        }

        .imageRight .contentPadding {
            padding-right: 0px;
        }

        .imageLeft .contentPadding {
            padding-left: 0px;
        }

        .location a, .location p {
            font-size: 14px;
        }

        .Interiorbanner {
            height: 225px;
        }

        .mainContent .section {
            padding: 80px 0px;
        }

        .mainContent h2 {
            font-size: 40px;
        }

        .mainContent p, .mainContent h4 {
            font-size: 16px;
            line-height: 27px;
        }

        .body-content p a.callout-button {
            font-size: 16px !important;
            padding: 17px 25px;
        }

        .mainContent p {
            margin-bottom: 10px;
        }

        .mainContent h4 {
            margin-top: 10px;
        }

        .row.extra-content {
            margin-top: 10px;
        }

        .testimonialWrapper::before {
            transform: scale(.7);
            top: -55px;
        }
    }

    @media (max-width: 767px) {

        .breadcrumbs {
            padding: 25px 0px;
        }

            .breadcrumbs .container .row {
                display: block;
            }

            .breadcrumbs .container .row, .breadcrumbs {
                height: unset;
                min-height: unset;
            }

        .location {
            margin-left: 0px;
            margin-top: 20px;
            justify-content: start;
        }

            .location a, .location p, .breadcrumbs a {
                font-size: 16px;
            }

        .sectionImage {
            width: 100%;
        }

        .mainContent h2 {
            font-size: 39px;
            margin-bottom: 25px;
        }

        .mainContent p {
            font-size: 17px;
            line-height: 28px;
            margin-bottom: 15px;
        }

        .mainContent h4 {
            font-size: 17px;
            line-height: 28px;
            margin-top: 15px;
        }

        .mainContent .section {
            padding: 70px 0px;
        }

        .imageLeft .contentPadding {
            padding-left: 0px;
            padding-top: 40px;
        }

        .imageRight .contentPadding {
            padding-right: 0px;
            padding-top: 40px;
        }

        .row.extra-content {
            margin-top: 0px;
        }

        .testimonialWrapper::before {
            transform: scale(.7);
            top: -55px;
        }
    }
