/**
 * wrapper width break point
 */
@media screen and (max-width: 1000px) {
    header .dates-holder p {
        font-size: 2.6vw;
    }
}

/**
 * medium break point
 */
@media screen and (max-width: 56.250em) { /** 900px **/
    header .top-bar p {
        display: none;
    }
    
    nav.nav-main {
        width: 50vw;
        margin-left: -50vw;
    }
    
    nav.nav-main .close-nav-holder a.hide-nav {
        width: 100%;
    }
    
    footer .newsletter {
        padding-top: 12px;
    }
    
    footer .social ul {
        text-align: center;
    }
    
    footer .social ul li {
        float: none;
        display: inline-block;
    }
}

/**
 * horizontal medium break point
 */
@media screen and (max-width: 56.250em) and (orientation:landscape) {

}

/**
 * medium-small break point
 */
@media screen and (max-width: 42em) {
    header .top-bar a.buy-tickets {
        display: none;
    }
    
    /* make smaller header heights */
    .main-holder {
        padding-top: 4px;
    }
    
    header {
        height: 90px;
    }
    
    header .show-nav-holder {
        height: 54px;
        width: calc(50% - 89px);
    }

    header a.show-nav {
        line-height: 54px;
    }

    header a.show-nav .fa {
        line-height: 54px;
    }

    header .top-bar {
        height: 36px;
    }

    header .top-bar .day-counter-holder {
        height: 36px;
        width: calc(50% - 89px);
    }

    header .top-bar p {
        line-height: 36px;
    }

    header .top-bar .buy-tickets-holder {
        height: 36px;
        width: calc(50% - 89px);
    }

    header .top-bar a.buy-tickets {
        line-height: 36px;
    }

    header .logo-holder {
        width: 178px;
        height: 124px; /* 120px + border width */
        margin-left: -89px;
        border-top-width: 4px;
    }

    header .logo-holder .arrow {
        border-left-width: 89px;
        border-right-width: 89px;
    }

    header .dates-holder {
        height: 54px;
        width: calc(50% - 89px);
    }
    
    header .dates-holder p {
        line-height: 54px;
    }
    
    body .sq-video-viewer {
        top: 90px;
    }

    nav.nav-main {
        top: 36px;
        width: 70vw;
        margin-left: -70vw;
    }

    body.smaller-header nav.nav-main {
        top: 36px;
    }
    
    nav.nav-main .close-nav-holder {
        height: 54px;
    }

    nav.nav-main .close-nav-holder a.hide-nav {
        line-height: 54px;
    }

    nav.nav-main .close-nav-holder a.hide-nav .fa {
        line-height: 54px;
    }

    nav.nav-main ul {
        top: 55px;
    }

    .sq-video-viewer {
        top: 90px;
    }
    
    body.root footer {
        padding-bottom: 90px;
    }
    
    footer .newsletter label {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding-bottom: 6px;
    }
    
    footer .newsletter .email-field-holder {
        clear: left;
    }
    
    footer .copyright-legal {
        padding-bottom: 0px !important;
        text-align: center;
    }
    
    footer .site-by p {
        text-align: center;
    }
    
    footer nav.nav-legals {
        margin-bottom: 0;
    }
    
    footer .legals-nav-holder {
        padding-bottom: 0 !important;
    }
}

/**
 * small break point
 */
@media screen and (max-width: 31.250em) { /** 500px **/
    .main-holder {
        padding-top: 0px;
    }
    
    header,
    body.smaller-header header {
        height: 54px;
    }
    
    header .dates-holder p {
        font-size: 3.5vw;
    }
    
    header .dates-holder p .year {
        display: none;
    }
    
    header .top-bar {
        display: none;
    }
    
    header .logo-holder,
    body.smaller-header header .logo-holder {
        border-top-width: 0;
    }
    
    header .logo-holder .arrow {
        display: none;
    }
    
    header .logo-holder,
    body.smaller-header header .logo-holder {
        height: 54px;
        padding: 4px;
        width: 100px;
        margin-left: -50px;
    }
    
    header .logo-holder img {
        width: auto;
    }
    
    header .show-nav-holder,
    header .dates-holder,
    body.smaller-header header .show-nav-holder,
    body.smaller-header header .dates-holder {
        width: calc(50% - 50px);
    }
    
    header a.show-nav {
        width: 100%;
    }
    
    nav.nav-main {
        width: 90vw;
        margin-left: -90vw;
        top: 0px;
        height: 100vh;
    }
    
    body.smaller-header nav.nav-main {
        top: 0px;
    }
    
    body .sq-video-viewer,
    body.smaller-header .sq-video-viewer {
        top: 54px;
    }
    
    nav.nav-sub a.show-sub-nav {
        display: block;
    }
    
    nav.nav-sub a.show-sub-nav span {
        transition: 0.9s linear;
    }
    
    nav.nav-sub a.show-sub-nav.nav-shown span {
        transform: rotate(180deg);
    }
    
    nav.nav-sub > ul {
        max-height: 0;
        padding: 0;
        overflow: hidden;
        transition: max-height 0.6s ease-in-out;
    }
    
    nav.nav-sub ul.is-shown {
        max-height: 1500px;
    }
}