/*!
 * Site designed by: Jordan Zoucha of Sandhills Publishing.
 */

/*  NAVIGATION
------------------------------------------------*/

body.menu-open:after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.5s;
}

#topBar,
.topBarMobile {
    background-color: #d91d44;
    color: #e7c5cb;
    font-weight: 400;
    font-style: normal;
    padding: calc(0.25rem + ((1vw - 7.68px) * 0.434)) calc(1.25rem + ((1vw - 7.68px) * 9.1146));
    text-align: right;
    font-size: calc(0.75rem + ((1vw - 10.5px) * 0.4598));
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 32% 0, 3% 0, 10% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 19.7% 100%, 22% 0, 9.9% 0, 12.2% 100%, 0 100%);
}

.topBarMobile {
    display: none;
}

.scrolled-header #topBar {
    /* background: none; */
    display: none;
}

div#topBar a,
div.topBarMobile a {
    color: #e7c5cb;
    padding: 1px;
    transition: 0.3s ease-in;
}

div#topBar i,
div.topBarMobile i {
    color: #e7c5cb;
}

.scrolled-header div#topBar i,
.scrolled-header div.topBarMobile i {
    color: black;
}

#topBar .fa-phone {
    padding-right: 3px;
}

.otherPages .scrolled-header div#topBar i,
.otherPages .scrolled-header div.topBarMobile i {
    /* color: #e7c5cb; */
}

div#topBar a:hover,
div.topBarMobile a:hover {
    background: black;
    color: white !important;
    font-weight: 500 !important;
}

#logo {
    padding-left: 240px;
    position: absolute;
    z-index: 9999;
}

#menu-button {
    display: none;
}

nav.mobile {
    display: none;
}

nav.primary {
    /* padding:0; */
    margin-top: -20px;
    /* width: 1440px; */
    z-index: 500;
    position: relative;
    /* border-top:solid 2px #c51230; */
    display: flex;
    /* position: absolute; */
    align-items: center;
    justify-content: space-between;
    padding: 0px calc(1.25rem + ((1vw - 7.68px) * 9.1146));
    transition: all 0.5s ease-in-out;
}

.otherPage nav.primary {
    margin-top: 0;
    margin-bottom: 111px;
    width: auto;
    padding: 0px 45px 0 35px;
}

.noMargin nav.primary {
    margin-bottom: 0 !important;
}

.otherpage nav.primary.scrolled-header {}

scrolled-header nav.primary {
    margin: 0 258px;
}

.scrolled-header .primary {
    /* position: static; */
    /* margin: 0; */
    width: 100vw;
    /* padding: 0px 255px; */
    /* margin-left: -10px; */
    transition: all 0.5s ease-in-out;
}

nav.primary img {
    /* margin-top: 8px; */
    transition: all 0.5s ease-in-out;
    width: calc(11.25rem + ((1vw - 7.68px) * 12.3264));
    padding-bottom: 10px;
    padding-top: calc(0.375rem + ((1vw - 7.68px) * -0.5208));
    max-width: 322px;
    height: 100%;
}

#right {
    /* width: 1240px; */
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.scrolled-header #right {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.scrolled-header nav.primary ul li a {
    font-size: calc(0.75rem + ((1vw - 7.67px) * 0.5204));
}

@media (min-width: 1920px) {
    .scrolled-header nav.primary ul li a {
        font-size: 18px;
    }
}

#right #topBar,
#right .topBarMobile {
    display: none;
}

.scrolled-header #right #topBar {
    display: block;
    background: none;
    padding: 0 0 25px;
    color: black;
    font-weight: 600;
}

.scrolled-header #right #topBar a {
    color: black;
    font-weight: 600;
}

.scrolled-header #right #topBar ul li a {
    font-size: 30px;
}

.scrolled-header img {
    /* margin: -30px 0 -90px !important; */
    transform-origin: left;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 140px !important;
    padding-top: 10px !important;
}

nav.primary ul {
    /* margin:0 auto; */
    padding: 0;
    max-width: 1040px;
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    padding-left: 35px;
}

.scrolled-header #right ul {
    justify-content: space-between;
    /* max-width: initial; */
    padding-left: 0;
    align-self: flex-end;
    width: calc(100% - 35px);
}

.scrolled-header #right ul li {
    flex: 0 auto;
}

nav.primary ul li {
    /* flex:1 0 auto; */
}

nav.primary ul li:hover,
nav.primary ul li:focus,
nav.primary ul li:active {
    color: #3d3d3d;
}

nav.primary ul li a {
    display: block;
    color: black;
    font-weight: normal;
    font-size: calc(1.025rem + ((1vw - 9.6px) * 0.5747));
    /* line-height:40px; */
    text-decoration: none;
    padding: 1px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: 0.2s ease-in;
    -moz-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    font-weight: 700;
    font-style: normal;
}

a {}

nav.primary ul li a:hover {
    color: #d91d44;
}

nav.primary ul li a.facebook-nav {
    font-size: 24px;
}

nav.primary ul li a.facebook-nav:hover {
    background: none;
}

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li {
    width: 300px;
}

nav.primary ul li li a:link,
nav.primary ul li li a:visited {
    font-size: 16px;
    line-height: 16px;
    padding: 10px 20px;
    color: #fff;
    background: #181818;
    width: auto;
    text-align: left;
    border-right: none;
    border-left: none;
    /* border-bottom: #fff solid 1px; */
    font-weight: 300;
}

nav.primary ul li li a:hover,
nav.primary ul li li a:active {
    color: white;
    background: #d91d44;
}

/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {
    display: none;
    position: absolute;
}

nav.primary ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

nav.primary ul li:hover > ul {
    display: block;
    line-height: 18px;
    z-index: 500;
    padding-left: 0;
}

nav.primary ul ul li {
    float: none;
    position: relative;
    margin: 0;
}

#mobile-container {
    display: none;
}

.slider-top .next img {
    width: calc(3.625rem + ((1vw - 7.68px) * 1.7361));
    padding-bottom: calc(2.5875rem + ((1vh - 5.48px) * 8.3507));
    cursor: pointer;
}

nav.mobile {
    display: none;
}

@media only screen and (min-width:768px) and (max-width: 1340px) {
    nav.primary ul li li {
        width: 100%;
        max-width: 300px;
    }
}

/************************************************ Responsive Styles **/

@media screen and (max-width: 767px) {
    header {
        position: absolute;
    }

    .otherPage nav.primary {
        background: none;
        height: auto;
        justify-content: normal;
    }

    .otherPage .scrolled-header #right #topBar {
        display: none;
        padding: 9px 0;
    }

    .scrolled-header {
        display: none;
    }

    #topBar,
    .topBarMobile {
        display: none;
        clip-path: none;
        padding: 10px 0;
        -webkit-clip-path: none;
    }

    div#topBar {}

    .topBarMobile {
        display: block;
        text-align: center;
        font-size: 13px;
        margin-bottom: 10px;
    }

    .smallMobile {
        display: none;
    }

    nav.primary img {
        width: 220px;
    }

    .otherPages header#scrollTop nav.primary img {
        width: 220px !important;
        padding-top: calc(0.375rem + ((1vw - 7.68px) * -0.5208)) !important;
        padding-bottom: 10px !important;
    }

    .otherPage nav.primary img {
        transform: none;
        margin-top: auto;
    }

    .otherPage header {
        position: relative;
    }

    nav.primary ul {}

    .primary {
        flex-direction: column-reverse;
        margin-top: 0 !important;
        padding: 0 0 !important;
    }

    #right #topBar,
    #right .topBarMobile {
        display: none;
        padding: 9px 0;
        text-align: center;
        margin-bottom: 10px;
    }

    .otherPages .scrolled-header #right #topBar {
        display: none;
    }

    div#topBar {}

    nav.primary ul {
        display: none;
    }

    .slide-captions h1 {
        font-size: 30px;
    }

    .slide-captions {
        font-size: 22px;
        margin-right: 25px;
    }

    #menu-button {
        width: 100%;
        display: block;
        font-size: 20px;
        line-height: 60px;
        position: relative;
        z-index: 400;
        background: #1c426d;
    }

    #menu-button a {
        color: #fff;
        text-decoration: none;
        padding: 0 0 0 .8em;
        font-weight: 100;
    }

    nav.mobile {
        display: block;
        position: fixed;
        top: 0;
        left: -285px;
        width: 280px;
        height: calc(100% - 84px);
        z-index: 100001;
        overflow: auto;
        background: rgba(231, 197, 203, 1);
        font-family: 'Esteban', serif;
    }

    /* MENU HEADER SOCIAL MEDIA */
    nav.mobile .social-media {
        position: absolute;
        text-decoration: none;
        vertical-align: top;
        z-index: 9999;
        display: inline-block;
        top: 15px;
        left: 15px;
        font-size: 16px;
        word-spacing: 13px;
        color: #ccc !important;
    }

    nav.mobile .social-media a:link,
    nav.mobile .social-media a:visited {
        color: #ccc;
        text-decoration: none;
    }

    nav.mobile .social-media a:hover,
    nav.mobile .social-media a:active {
        color: #fff;
        text-decoration: underline;
    }

    /* MENU HEADER STYLES */
    nav.mobile h3 {
        color: #ccc;
        padding: 15px 0;
        position: relative;
        font-size: 18px;
        background: #d91d44;
        padding-left: 20px;
    }

    nav.mobile .menu-title {
        /* position: absolute; */
        vertical-align: top;
        /* top: 16px; */
        /* right: 47px; */
        text-transform: uppercase;
        font-size: 20px;
        color: white;
        font-family: 'Arbutus', cursive;
        font-weight: 100;
    }

    /* MENU CLOSE 'X' BUTTON */
    nav.mobile .menu-toggle {
        position: absolute;
        top: 8px;
        right: 10px;
        padding: 6px 9px 5px;
        display: inline-block;
        font-weight: 700;
        font-size: 18px;
        line-height: 1;
        color: #ccc;
        text-decoration: none;
        vertical-align: top;
        font-family: Arial, sans-serif;
    }

    nav.mobile .menu-toggle:hover {
        color: #fff;
    }

    /* MENU LIST STYLE */
    nav.mobile ul {
        list-style: none;
        font-weight: 300;
        margin: 0;
        padding: 0;
    }

    nav.mobile ul li {
        color: white;
        font-size: 15px;
    }

    nav.mobile ul li i {
        /* color: black; */
    }

    /* FIRST LEVEL */
    nav.mobile ul li a {
        color: black;
        position: relative;
        display: block;
        font-size: 16px;
        text-align: left;
        text-decoration: none;
        padding: 10px 35px 10px 20px;
    }

    nav.mobile ul li a:hover {
        background: black;
        color: #fff;
        /* border-left:4px #c51230 solid; */
    }

    /* SECOND LEVEL */
    nav.mobile ul li li:last-child {
        border: none;
    }

    nav.mobile ul li li a {
        color: white;
        background: black;
        padding: 15px 35px 15px 20px;
    }

    nav.mobile ul li li a:hover {
        background: #d91d44;
        color: white;
    }

    /* THIRD LEVEL */
    nav.mobile ul li li li:last-child {
        border: none;
    }

    nav.mobile ul li li li a {
        color: #ccc;
        background: #555;
        border-left: 4px #555 solid;
    }

    nav.mobile ul li li li a:hover {
        background: rgba(85, 85, 85, 0.5);
    }

    .nav-footer {
        color: black;
        position: relative;
        text-align: center;
        font-size: 16px;
        line-height: 16px;
        padding: 15px 0;
    }

    #mobile-container {
        /* initially will need to be hidden */
        display: block;
        font-size: 15px;
        width: 90px;
        position: fixed;
        bottom: 0;
        z-index: 400;
        /* needs to be lower than nav.mobile, adjust as needed */
        padding: 0 0 8px;
        border-top: solid 6px #d91d44;
        background: #000;
        width: 100%;
        color: #fff;
        z-index: 100009;
    }

    li.mobile-button {
        width: 20%;
        float: left;
        text-align: center;
    }

    li.mobile-button img {
        max-width: 100%;
        display: inline-block;
        width: 50px;
    }

    li.mobile-button a {
        color: #fff;
        font-family: chaparral-pro, serif;
    }
}

@media screen and (max-width: 500px) {
    .slide-captions {
        height: 100vh;
    }
}

@media screen and (max-height: 470px) and (max-width: 767px) {
    nav.primary img {
        width: calc(8.75rem + ((1vh - 4.2px) * 160));
    }
}


@media screen and (max-height: 750px) and (max-width: 500px) {
    .slide-captions {
        height: 100vh;
    }
}

@media screen and (max-height: 666px) and (max-width: 700px) {
    .slide-captions {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    #mobile-container {
        font-size: 13px;
    }

    .container.padding,
    .contact .container.padding {
        padding-top: 215px !important;
    }
}

@media screen and (max-width: 500px) {
    .topBarMobile {
        font-size: calc(0.6875rem + ((1vw - 3.2px) * 1.1111));
    }

    .topBarMobile .normalMobile {}

    .topBarMobile .smallMobile {
        display: block;
        line-height: 2;
    }
}

@media only screen and (min-width:768px) and (max-width: 1020px) {
    nav.primary ul li a {
        font-weight: 100;
    }
}

/*---------- IE ONLY STYLES ----------*/

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

    /*
     #topBar, .topBarMobile, div#topBar i, div.topBarMobile i, div#topBar a, div.topBarMobile a {
		color: black;
		 background: none;
}
*/
    nav.primary ul {
        max-width: 100vw;
        width: 1040px !important;
        flex: 0 1 auto;
    }

    .scrolled-header #right ul {
        width: 100% !important;
        max-width: 1040px;
    }
}