@media screen and (max-width: 767px) {
header.header-desktop {
    display: none;
}
    nav.buttons {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 55px;
        text-align: center;
        background-color: black;
        transition: height 0.3s ease-in-out
    }

    nav.buttons a.button__btn {
        width: 25%;
        float: left;
        height: 55px;
        background-color: white
    }

    nav.buttons a.button__btn .button__btn__icon {
        background-color: transparent;
        height: 32px;
        padding-top: 10px;
        -webkit-mask: none !important;
        display: block
    }

    nav.buttons a.button__btn .button__btn__icon svg {
        height: 20px;
        fill: #a28964
    }

    nav.buttons a.button__btn .button__btn__label {
        font-size: 3vw;
        color: #111;
        display: block;
        font-family: "Nunito Sans", sans-serif;
        text-transform: uppercase
    }

    nav.buttons a.button__btn:first-child {
        padding-top: 14px
    }

    nav.buttons a.button__btn:first-child .bar {
        width: 30px;
        height: 1px;
        background: #111;
        margin: 0 auto;
        transition: all .3s ease-in-out
    }

    nav.buttons a.button__btn:first-child .bar:nth-child(2) {
        margin: 5px auto
    }

    nav.buttons a.button__btn:first-child span {
        font-size: 3vw;
        color: #111;
        display: block;
        font-family: "Nunito Sans", sans-serif;
        text-transform: uppercase;
        margin-top: 5px
    }

    nav.buttons a.button__btn:last-child {
        width: 50%;
        background: #a28964;
        padding-top: 20px
    }

    nav.buttons a.button__btn:last-child .button__btn__label {
        font-size: 4vw;
        color: white;
        letter-spacing: 2px
    }

    nav.buttons.down {
        height: 70px;
        transition: height 0.3s ease-in-out
    }


    .wrapper,
    .container {
        width: 90%;
        margin: 0 auto
    }

    .page-template-template_spa .wrapper {
        margin-top: 120px;
    }


    .weather__info {
        display: none;
    }

    header {
        background-color: #ffffff;
        position: fixed;
        z-index: 99;
        width: 100%;
        top: 0;
        padding: 15px 10px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center
    }

    header a.logo {
        display: block
    }

    header a.logo svg {
        display: block;
        width: 150px;
        height: auto
    }

    header a.calendar {
        color: #111;
        font-size: 2.9vw;
        padding: 2px 0px 2px 20px;
        text-transform: uppercase
    }



    .overlay {
        background: url("../../images/bg-letter-c.png") no-repeat center, url("../../images/bg-body.jpg") repeat center;
        background-size: auto 300px;
        z-index: 9999
    }

    .overlay a,
    .overlay * {
        color: #ffffff
    }

    .overlay a.current,
    .overlay *.active {
        color: #f1efeb
    }

    .overlay .close-menu,
    .overlay .close-res {
        z-index: 99;
        position: absolute;
        top: 5%;
        right: 7%;
        width: 30px;
        height: 30px
    }

    .overlay .close-menu svg,
    .overlay .close-res svg {
        fill: #a28964;
        width: 100%;
        height: 100%
    }

    .navigation {
        display: block
    }

    .navigation .inner {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 80%;
        overflow: scroll;
        text-align: center
    }

    .navigation .inner>ul {
        position: relative;
        max-height: 100%;
        top: 50%;
        transform: translateY(-50%)
    }

    .navigation .inner>ul>li a {
        display: block;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 4vw;
        color: #111;
        position: relative;
        padding: 5px 0
    }

    .navigation .inner>ul>li a:after {
        content: "";
        position: absolute;
        left: calc(50% - 20px);
        width: 40px;
        bottom: 4px;
        background: #a28964;
        height: 1px;
        opacity: 0
    }

    .navigation .inner>ul>li a.current::after {
        opacity: 1
    }

    .navigation .inner>ul li.current_page_parent>a::after {
        opacity: 1
    }

    .navigation .inner>ul>li .sub-sub-menu {
        display: none
    }

    .navigation .inner>ul>li .sub-sub-menu ul.submenu {
        padding: 10px 0
    }

    .navigation .inner>ul>li.item-open div.sub-sub-menu a {
        font-size: 3.5vw;
        opacity: 0.7
    }

    .navigation .inner>ul>li.item-open div.sub-sub-menu a.current {
        opacity: 1
    }

    .navigation #secondary-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        bottom: 30px;
        width: 100%;
        text-align: center
    }

    .navigation #secondary-nav li {
        display: inline-block;
        padding: 10px
    }

    .overlay {
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 100%;
        left: 0%
    }

    header a.calendar {
        background: url("../../svg/icon-calendar.svg") no-repeat left 2px;
        background-size: auto 13px
    }

    .d-none {
        display: none;
    }
    .d-block {
        display: block;
    }
}