/* General */
:root {
    --nav-height: 11vh;
    --mohawk-color: #ce0e2d;
    --karastan-color: rgb(114, 114, 114);
    --pergo-color: #0f8996;
    --mohawk-blue-color: #0099D8;
}

body { background: white; }
nav + section { margin-top: var(--nav-height); }

.has-error > input { border: 1px solid red; }

.with-errors li { color: red; }

.playfair, .karastan h3 { 
    color: rgb(114, 114, 114);
    font-family: 'Playfair Display', serif;
    font-weight: 500;
}
p { 
    color: rgb(114, 114, 114);
    font-family: 'Lato', serif;
    font-weight: 300;
}
a, li { 
    color: rgb(114, 114, 114);
    font-family: 'Lato', serif;
    font-weight: 400;
}
.lato { font-family: 'Lato', sans-serif; }
.nunito { font-family: 'Nunito', sans-serif; }

.slider-height { height: 34rem; }
.p35 { padding-top: 35%; }

.bg-black { background-color: #000; }
.px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
}
.modal-overlay { opacity: 0.9; }
.modal-content {
    display: none;
}
.modal-active .modal-content {
    display: block;
}
.z-60 { z-index: 60; }
@media (max-width: 767px) {
    .mobile-flex {
        flex-direction: column !important;
    }
    nav + section { margin-top: var(--nav-height); }
    .mobile-text-center { text-align: center; }
    .mobile-mx-auto { margin: 0 auto 1rem; }
    .slider-height { height: 19rem; }
    .left-6rem { left: 0; }
    .right-6rem { right: 0; }
}
@media (min-width: 768px) {
    .left-6rem { left: -6rem; }
    .right-6rem { right: -6rem; }
    .offset-image {
        border: 2px solid #ffffff;
        position: relative;
        top: -20px;
        left: -40px;
    }
}

span,
nav img {
    pointer-events: none;
}

/* Mohawk */
.mohawk-bg { background-color: rgb(250, 248, 244); }

.mohawk form button.submit-btn,
.mohawk nav button.modal-open { 
    background-color: var(--mohawk-color);
    border: 1px solid var(--mohawk-color);
}
.mohawk .map-button {
    border-color: var(--mohawk-color);
    color: var(--mohawk-color);
}
.mohawk form button.submit-btn:hover,
.mohawk nav button.modal-open:hover,
.mohawk .map-button:hover,
.mohawk nav .bg-black:hover { 
    background-color: #a90722;
}

.mohawk .brand-bg { background-color: #ce0e2d; }

/* Mohawk Blue */

.mohawk-blue-bg { background-color: #fff8f1; }

.mohawk-blue form button.submit-btn,
.mohawk-blue nav button.modal-open,
.mohawk-blue .bg-red-700 { 
    background-color: var(--mohawk-blue-color);
    border: 1px solid var(--mohawk-blue-color);
}
.mohawk-blue .map-button {
    border-color: var(--mohawk-blue-color);
    color: var(--mohawk-blue-color);
}
.mohawk-blue form button.submit-btn:hover,
.mohawk-blue nav button.modal-open:hover,
.mohawk-blue .map-button:hover,
.mohawk-blue nav .bg-black:hover { 
    background-color: #0076a9;
}
.mohawk-blue .border-10 {
    border: 10px solid var(--mohawk-blue-color);
}

/* Karastan */
.karastan-bg { background-color: #fff8f1; }

.karastan form button.submit-btn,
.karastan nav button.modal-open { 
    background-color: var(--karastan-color);
    border: 1px solid var(--karastan-color);
}
.karastan .map-button {
    border-color: var(--karastan-color);
    color: var(--karastan-color);
}
.karastan form button.submit-btn:hover,
.karastan nav button.modal-open:hover,
.karastan .map-button:hover,
.karastan nav .bg-black:hover { 
    background-color: rgb(75, 75, 75);
}

.karastan .bg-red-700 { background-color: black; }
.karastan .nav-phone { background-color: #83744e; }

.karastan .brand-bg { background-color: rgb(114, 114, 114); }

/* Pergo */

.pergo-bg { background-color: #fff8f1; }

.pergo form button.submit-btn,
.pergo nav button.modal-open,
.pergo .bg-red-700 { 
    background-color: var(--pergo-color);
    border: 1px solid var(--pergo-color);
}
.pergo .map-button {
    border-color: var(--pergo-color);
    color: var(--pergo-color);
}
.pergo form button.submit-btn:hover,
.pergo nav button.modal-open:hover,
.pergo .map-button:hover,
.pergo nav .bg-black:hover { 
    background-color: #0d6670;
}
.pergo .border-10 {
    border: 10px solid var(--pergo-color);
}