@media only screen and (max-width: 1080px) {
    .on-desktop {
        display: none;
    }

    .on-tablet {
        display: block;
    }

    .hide-on-tablet {
        display: none;
    }

    .t-100 {
        width: 100%;
    }

    .t-50 {
        width: 50%;
    }

    .t-33 {
        width: 33.333%;
    }

    #map {
        height: 70vw;
    }

    /* section */
    .section {
        padding: 2em;
    }

    .section .section--description {
        max-width: 100%;
    }

    .menu--image.section {
        padding: 2em;
    }

    .menu-ta-detail {
        background: #fffdf1;
        color: #000;
        padding: 1em 2em;
    }


    /* hide content except home */
    .cont:not([selected-title]) .section--content > div:not(.home) {
        visibility: hidden;
    }

    .home .home--slideshow {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    /* header styling */
    h1 {font-size: 40px;}
    h2 {font-size: 25px;}
    h3 {font-size: 25px;}
    h4 {font-size: 15px;}

    /* banner styling */
    .cont[selected-title="culture"] .tablet--banner,
    .cont[selected-title="taste"] .tablet--banner {
        opacity: 0 !important;
        display: none;
    }

    .tablet--banner {
        opacity: 1;
        position: fixed;
        margin: auto 0px;
        z-index: 2;
        top: 50%;
        margin-top: -75px;
        text-align: center;
        left: 0px;
        right: 0px;
    }

    .tablet--banner img {
        max-height: 180px;
        width: auto;
        max-width: 85%;
    }

    /* container styling */
    .cont .cont--left {
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 50%;
        overflow: hidden;
        margin: 0px;
    }

    .cont .cont--right {
        top: 50%;
        right: 0px;
        left: 0px;
        bottom: 0px;
        overflow: hidden;
    }

    .cont .cont--left .culture,
    .cont .cont--right .taste {
        height: 50vh;
        /*position: relative;*/
    }

    .cont[selected-title="culture"] .cont--left .culture,
    .cont[selected-title="taste"] .cont--right .taste {
        height: 50vh;
    }

    .cont[selected-title="taste"] .cont--right .taste {
        transition: height .5s ease-in-out;
        -moz-transition: height .5s ease-in-out;
        -webkit-transition: height .5s ease-in-out;
    }

    /* navigation */
    nav.nav {
        display: none;
    }

    .cont--right .section {
        border-color: transparent;
    }

    /* culture selected */
    .cont[selected-title="culture"] .cont--left {
        bottom: 0px;
        overflow-y: scroll;
        margin-right: 0px;
    }

    .cont[selected-title="culture"] .cont--right {
        top: 120vh;
        bottom: 0px;
    }

    /* taste selected */
    .cont[selected-title="taste"] .cont--right {
        bottom: 0px;
        top: 0px;
        overflow-y: scroll;
        margin-right: 0px;
    }

    .cont[selected-title="taste"] .cont--left {
        top: 0px;
        height: 0px;
    }

    /* section nav */
    .cont[selected-title="culture"] .cont--left nav.snav,
    .cont[selected-title="taste"] .cont--right nav.snav {
        opacity: 1;
    }

    nav.snav {
        opacity: 0;
        transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -webkit-transition: opacity .5s ease-in-out;
        z-index: 1;
    }

    nav.snav .snav--list {
        padding: 0px;
        margin: 20px 0px 0px;
        text-align: center;
    }

    nav.snav .snav--list .snav--list-item {
        list-style-type: none;
        display: inline-block;
    }

    nav.snav .snav--list .snav--list-item > a {
        color: #fff;
        font-size: 12px;
        padding: 0px 15px;
        border-right: 1px solid #fff;
    }

    nav.snav .snav--list .snav--list-item:last-child > a {
        border-right: 0px;
    }

    /* mobile nav */
    nav.mnav {
        display: unset;
        position: fixed;
        right: 0px;
        margin: 2em 4em;
        opacity: 1;
        transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -webkit-transition: opacity .5s ease-in-out;
        z-index: 99;
    }

    .cont[selected-title="culture"] nav.mnav,
    .cont[selected-title="taste"] nav.mnav {
        opacity: 1 !important;
    }

    nav.mnav .mnav--logo {
        width: 130px;
    }

    nav.mnav .mnav--items-header {
        font-size: 25px;
        font-family: "big-caslon-fb", "serif";
        text-transform: uppercase;
        padding: 20px;
        margin-top: 0px;
    }

    nav.mnav .mnav--header {
        position: relative;
        width: 100%;
        padding: 20px;
    }

    nav.mnav .mnav--icon .mnav--icon-stripe {
        border-bottom: 1px solid #fffdf1;
        width: 20px;
        padding: 5px;
        box-sizing: content-box;
        display: block;
    }

    nav.mnav.color--dark .mnav--icon .mnav--icon-stripe {
        border-color: #004c4f;
    }

    nav.mnav.collapsed .mnav--content {
        top: -100vh;
        pointer-events: none;
        opacity: 0;
    }

    nav.mnav.expanded .mnav--content {
        top: 0px;
    }

    nav.mnav .mnav--content {
        position: fixed;
        height: -moz-available;          /* WebKit-based browsers will ignore this. */
        height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
        height: fill-available;
        left: 0px;
        right: 0px;
        background: #fffdf1;
        text-align: center;
        display: flex;
        align-items: center;
        flex-flow: column;
        transition: top .5s ease-in-out;
        -moz-transition: top .5s ease-in-out;
        -webkit-transition: top .5s ease-in-out;
        z-index: 999;
    }

    /*nav.mnav.expanded {
        background: #fffdf1;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: 0px;
        text-align: center;
    }*/

    nav.mnav.expanded .mnav--icon {
        display: none;
    }
    .mnav--icon-link {
        padding: 10px;
        display: inline-block;
    }

    nav.mnav .mnav--close {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        margin: 30px;
        height: 40px;
        width: 40px;
    }

    nav.mnav .mnav--close .mnav--close-line1,
    nav.mnav .mnav--close .mnav--close-line2 {
        height: 40px;
        width: 0px;
        border: 1px solid #000;
        position: absolute;
        top: 0px;
        right: 20px;
    }

    nav.mnav .mnav--close .mnav--close-line1 {
        transform: rotate(45deg);
    }

    nav.mnav .mnav--close .mnav--close-line2 {
        transform: rotate(-45deg);
    }

    nav.mnav .mnav--items {
        margin: 0px auto;
        flex-grow: 1;
        display: flex;
        flex-flow: column;
        justify-content: center;
    }

    nav.mnav .mnav--items-cont:not(:last-child) {
        margin-bottom: 4em;
    }

    nav.mnav .mnav--list {
        margin: 0px;
        padding: 0px;
    }

    nav.mnav .mnav--list .mnav--list-item {
        list-style-type: none;
    }

    nav.mnav .mnav--list .mnav--list-item > a {
        display: block;
        font-family: "PitchWeb";
        font-size: 18px;
        line-height: 2em;
        letter-spacing: 0.1em;
        opacity: 0.8;
    }

    nav.mnav .mnav--list .mnav--list-item > a:hover {
        opacity: 1;
    }

    /*temp*/
    nav.mnav .mnav--footer {
        position: relative;
        width: 100%;
        padding: 20px;
    }

    nav.mnav .social--icon-list .social--icon-item:last-child {
        margin-left: 20px;
    }

    nav.mnav .social--icon-list .social--icon-item img {
        height: 35px;
    }

    nav.mnav.expanded ~ #leftContainer,
    nav.mnav.expanded ~ #rightContainer {
        overflow: hidden;
    }

    /* reservation button */
    .cont[selected-title="culture"] .mobile--reservation-square,
    .cont[selected-title="taste"] .mobile--reservation-square {
        display: none;
    }

    .mobile--reservation-square {
        position: fixed;
        z-index: 9999;
        bottom: 3.5em;
        left: 0px;
        right: 0px;
        margin: 0px auto;
        width: intrinsic;           /* Safari/WebKit uses a non-standard name */
        width: -moz-max-content;    /* Firefox/Gecko */
        width: -webkit-max-content; /* Chrome */
    }

    .cont[selected-title="culture"] .cont--left .mobile--reservation-circle,
    .cont[selected-title="taste"] .cont--right .mobile--reservation-circle {
        opacity: 1 !important;
        visibility: visible;
    }

    .mobile--reservation-circle {
        position: fixed;
        top: 2em;
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -webkit-transition: opacity .5s ease-in-out;
        width: 80px;
        height: 80px;
        z-index: 2;
    }

    .reservation--button-circle > img.circle--text {
        margin: -2PX;
    }

    .reservation--button-circle > img.button--logo {
        top: 31px;
        left: 1px;
    }

    .cont[selected-title="taste"] .whatson.section {
        display: none;
    }

    .menu--cont .menu--cont-right > div {
        padding-left: unset;
    }

    .menu--cont .menu--cont-left > div {
        padding-right: unset;
    }
}

@media only screen and (max-width: 680px) {
    .hide-on-mobile {
        display: none;
    }

    .on-mobile {
        display: block;
    }

    .m-100 {
        width: 100%;
    }

    .m-50 {
        width: 50%;
    }

    .footer .footer--content > div {
        flex: 0 1 100%;
    }

    .menu--cont > div {
        flex: 0 1 100%;
    }

    /* custom and specific class/id */
    .taste .taste--header, .culture .culture--header {
        margin-top: 3em;
    }

    .menu--cocktails2 {
        margin-top: unset;
    }

    .whatson .whatson--grid:not(.show-all) ul > li:nth-child(n+5) {
        display: none;
    }

    nav.mnav .mnav--logo {
        width: 100px;
    }

    nav.mnav .mnav--items-header {
        font-size: 20px;
        font-family: "big-caslon-fb", "serif";
        text-transform: uppercase;
        padding: 5px;
        margin-top: 0px;
    }

    nav.mnav .mnav--list .mnav--list-item > a {
        font-size: 13px;
    }

    nav.mnav .mnav--close {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        margin: 25px;
        height: 31px;
        width: 40px;
    }

    nav.mnav .mnav--close .mnav--close-line1,
    nav.mnav .mnav--close .mnav--close-line2 {
        height: 30px;
        width: 0px;
        border: 1px solid #000;
        position: absolute;
        top: 0px;
        right: 20px;
    }

    nav.mnav .social--icon-list .social--icon-item img {
        height: 20px;
    }

    nav.mnav .social--icon-list .social--icon-item:last-child {
        margin-left: 5px;
    }

    nav.mnav {
        margin: 3em;
    }

    nav.mnav .mnav--icon .mnav--icon-stripe {
        width: 15px;
        padding: 4px;
    }
}

@media only screen and (max-width: 360px) {
}