/***
* A group of styles target layout for mobile devices only.
* The styles in the media query below it are only there to override and remove the mobile styles
* to make sure that the site displays as it did before on desktop.
*/

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

    body {
        margin: 0;
    }

    div.page-wrapper {
        width: 100%;
    }

    div.page-wrapper div.inner-page-wrapper {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    .wrapper {
        width: 100%;
    }

    .pre-header {
        border-bottom: none;
        padding: 0;
    }

    .pre-header .text-resizing, .pre-header .signature {
        display: none;
    }

    .pre-header .newsletter-link {
        display: none;
    }

    .masthead {
        border-bottom: none;
        padding: 0;
    }

    .masthead .blog-carousel-wrapper {
        display: none;
    }

    .masthead a.logo {
        /*float: left;*/
        margin: 0 auto;
        width: 100%;
        height: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        padding: 15px 56px;
    }

    .masthead a.logo img {
        width: 100%;
        height: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    .show-menu-wrapper {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        float: left;
        padding-left: 15px;
        padding-right: 15px;
    }

    .show-menu {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        background-color: transparent;
        font-size: 1.4em;
        color: #584821;
        font-weight: bold;
        text-transform: uppercase;
        line-height: 34px;
        border-left: none;
        border-right: none;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        height: 34px;
        padding: 0;
    }

    .inner-page-wrapper .section .sisea-search-form {
        position: static;
        float: left;
        clear: both;
        width: 100%;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;

        overflow: hidden;
        background-color: #eceae7;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* This property will be updatedwhen the function with mobile-interaction.js fires */
    /* This ensures that everything is accessible in the case that javascript is turned off */
    .hasjs .inner-page-wrapper .section .sisea-search-form {
        display: none;
    }

    .inner-page-wrapper .section .sisea-search-form.open {
        /*transition: all 0.1s;*/
        padding-top: 15px;
    }

    .inner-page-wrapper .section .sisea-search-form input.s {
        width: 84%;
        height: 46px;
        max-height: 46px;
        padding: 12px 14px;
        -webkit-appearance: none;
        border-radius: 0;
        font-size: 1.4em;
        text-transform: none;
        margin-right: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        border: none;
        /*border: 1px solid #ccc;*/

        /*border-top: 1px solid #aaa;*/
        /*padding: 2px 5px 1px;*/
        color: #aaa49f;
        /*margin-right: 3px;*/
        float: left;
        margin-top: 0px;
    }

    .inner-page-wrapper .section  .sisea-search-form input.submit {
        width: 16%;
        max-height: 46px;
        min-height: 46px;
        -webkit-appearance: none;
        border-radius: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        padding: 12px;
        background: #6d655f;
        border: none;
        color: #ffffff;
        text-transform: uppercase;
        font-size: 1.2em;
    }

    .booking-link-container {
        float: left;
        width: 100%;

        padding: 0 15px;
        margin-top: 19px;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    a.booking-link {
        display: block;
        float: left;
        width: 100%;
        background: #e14c25;
        font-size: 1.3em;
        color: #3d3631;
        font-style: normal;
        padding: 10px;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        text-transform: uppercase;
        line-height: 1;
        font-weight: bold;
        color: #ffffff;
    }

    a.booking-link:active, a.booking-link:focus, a.booking-link:hover {
        color: #ffffff;
    }

    .breadcrumb {
        display: none;
    }

    /*************/
    /* Main menu */
    /* Starts out with the height set to 0 */
    .main-nav {
        overflow: hidden;
        background-color: #eceae7;
        margin-bottom: 0;
    }

    /* Only actually hide the menu is javascript is turned off     */
    /* very unlikely but it only takes putting this here to ensure */
    /* that the menu is usable if js is tuned off                  */

    .hasjs .main-nav {
        height: 0;
    }

    .main-nav ul {
        padding-left: 0;
        width: auto;
        padding-bottom: 7px;
        border-bottom: none;
    }

    .main-nav ul li {
        font-size: 16px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 20px;
    }

    .main-nav ul li a {
        padding: 7px 0;
        color: #584821;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid #ffffff;
    }

    /* Prevent the hover + focus states from showing the menu links as highlighted when scrolling through the menu */
    .main-nav ul li a:focus,
    .main-nav ul li a:hover {
        color: #584821;
    }

    .main-nav ul li:last-child a {
        border-bottom: none;
    }

    /**********/
    /* Footer */
    .footer .wrapper {
        position: static;
    }

    .footer .foot-col {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 0 10px;
        border-right: none;
        min-height: 0;
        margin-bottom: 20px;
    }

    .footer .vcard {
        margin-bottom: 20px;
    }

    .footer .social-links ul {
        margin-bottom: 0;
    }
    .footer .foot-col {
        font-size: 16px;
    }

    /********************/
    /* Section submenus */

    .subnav {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 16px;
        margin-left: 0;
        margin-right: 0;
        background-color: #eceae7;
        border-top: none;
        border-bottom: none;
    }

    .subnav li {
        padding: 0 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        border-top: none;
    }

    .subnav li a {
        padding: 5px 0;
        font-size: 1.2em;
        color: #584821;
        border-top: 1px solid #ffffff;
    }

    .subnav li.first a {
        border-top: none;
    }

    .subnav li.active ul li a {
        border-top: none;
    }

    .subnav li a:hover {
        color: #6d655f;
    }

    /* Hiding the subnav on mobile */
    .subnav li.active ul {
        display: none;
    }

    .subnav li.active ul li {
        display: none;
    }

    .subnav li.active ul li a {
        padding-left: 10px;
    }

    .subnav li a {
        font-size: 1.3em;
    }

    .subnav li a:hover {
        color: #6d655f;
    }

    /*************/
    /* Homepage  */
    .highlight-col, .inform-col, .home-centre-col, .highlight-col {
        float: none;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    /*****************/
    /* Book tickets  */

    div.section.content div.article h1 {
        color: #5b4826;
        max-width: 100%;
        margin-top: 0.7em;
        padding-top: 0.7em;
        padding-bottom: 0.7em;
        text-align: left;
    }

    div.section.content div.article div.lead-in {
        border-bottom: none;
        padding: 0;
        margin: 0;
    }

    /* Hide the desktop tabbed ticket info section */
    .tabbed-tickets,
    #sirius-cal-key,
    #sirius-cal {
        display: none;
    }

    .article.wide {
        width: 100%;
        padding: 0 12px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* Set up the ticket info section */
    .ticket-info-mobile {
        height: 40px;
        margin-top: 30px;
        overflow: hidden;
        position: relative;
    }

    .membership-selection .next.hidden,
    .new-member-details .next.hidden,
    .calendar-dates .next.hidden {
        display: none;
    }

    /* Generic button styling */
    .booking-button {
        border: none;
        background: #e14c25;
        font-size: 0.8em;
        font-weight: bold;
        padding: 10px;
        color: #ffffff;
        text-transform: uppercase;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

    .booking-button.selected {
        background: black;
    }

    .is-member, .is-not-member {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }

    .become-member {
        color: #e14c25;
        background-color: transparent;
        text-decoration: underline;
        width: 100%;
    }

    .is-member {
        margin-top: 20px;
    }

    .membership-selection .next {
        float: right;
    }

    .membership-selection .prev-next {
        margin-bottom: 10px;
    }

    .ticket-info-selection-mobile {
        margin-bottom: 30px;
    }

    .ticket-info-selection-mobile h2 {
        font-size: 1.2em;
        color: #5b4826;
        width: 70%;
        float: left;
        background-image: url(../images/presentation/i.png);
        background-repeat: no-repeat;
        background-size: 35px;
        background-position: 90% 50%;
        padding: 5px 0;
        margin-bottom: 20px;
    }

    .ticket-info-selection-mobile .ticket-info-mobile p:first-of-type {
        clear: both;
    }

    .ticket-info-selection-mobile button.book {
        float: right;
        width: 30%;
        margin-bottom: 22px;
    }

    /* Become a member */
    .membership-selection .booking-button.prev {
        background-color: #edeae7;
        color: #5b4826;
    }

    .new-member-details .booking-button.next {
        float: right;
    }

    .new-member-details .sirius-member-popover {
        margin-bottom: 20px;
    }

    .new-member-details .siriusPopupWrapper {
        padding: 0;
    }

    .new-member-details .siriusPopupWrapper .col {
        margin: 0;
        width: 100%;
    }

    .new-member-details .siriusPopupWrapper input {
        margin-top: 10px;
        height: 20px;
        width: 20px;
    }

    .new-member-details .booking-button {
        margin-bottom: 20px;
    }

    .new-member-details .booking-button.prev {
        background-color: #edeae7;
        color: #5b4826;
    }

    /* Calendar date and time selection */

    .promo-container {
        margin-bottom: 20px;
    }

    /* Date list */
    .date-list {
        height: 190px;
        border: 1px solid black;
        overflow: auto;
    }

    .date-list li {
        list-style: none;
        text-align: center;
        padding: 15px;
        font-weight: bold;
        background-color: #ffffff;
    }

    .date-list li:nth-child(2n) {
        background-color: #F0F0F0;
    }

    .date-list li.selected {
        background-color: #e14c25;
        color: #ffffff;
    }

    .calendar-dates .no-tickets-available {
        color: #868686;
        font-weight: normal;
    }

    .calendar-dates .booking-button {
        margin-bottom: 25px;
    }

    .calendar-dates .booking-button.back {
        background-color: #edeae7;
        color: #5b4826;
    }

    .calendar-dates .next {
        width: 100%;
        float: left;
    }

    .times-container {
        float: left;
        min-height: 200px;
        width: 100%;
        height: 100%;
    }

    .times-container.loading {
        background-image: url('../images/presentation/loading.gif');
        background-position: center;
        background-repeat: no-repeat;
    }

    .times-container p {
        font-weight: bold;
    }

    .times-container li {
        list-style: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        width: 45%;
        float: left;
        text-align: center;
        border: 1px solid black;
        margin-bottom: 10px;
    }

    .times-container li.selected {
        background-color: #e14c25;
        color: #ffffff;
    }

    .times-container li.no-tickets-available {
        border: 1px solid #C9C2BE;
        color: #bdbdbd; /*#868686 */
        font-weight: normal;
    }

    .times-container li:nth-child(2n) {
        margin-left: 10%;
        margin-right: 0;
    }

    .times-container li[data-time='00:00:00'] {
        width: 100%;

    }

    .times-container li[data-time='00:00:00'] ~ li:nth-child(2n) {
        margin-left: 0;
        margin-right: 10%;
    }

    /* Mobile overrides for the visit pages */
    .content .article.single-col {
        width: 100%;
        padding: 0 12px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* It'll be a lot of trouble to add a class to target here... */
    .content .article.single-col #share-buttons-wrapper {
        display: none;
    }

    .content .article.single-col .third-level-nav {
        display: none;
    }

    .content .article.single-col .hero {
        margin-bottom: 20px;
    }

    .content .article.single-col .hero img {
        width: 100%;
        height: auto;
    }

    .content .article.single-col .hero .caption-link {
        display: none;
    }

    .content .article.single-col .story {
        width: 100%;
    }

    .content .article.single-col .story-aside {
        margin-top: 20px;
        width: 100%;
    }

    .content .article.single-col .story-aside .box {
        margin: 0 auto;
        float: none;
        height: 100%;
    }


}

/* Some tweaks to the layout of the booking pages */
/* These styles are to target devices above iPhone 5 landscape width but below common tablet resolutions */
/* The layout will become fixed to a maximum width of 320px and centred horizontally */
@media only screen and (min-width: 568px) and (max-width: 720px) {
    .ticket-info-selection-mobile,
    .membership-selection,
    .calendar-dates,
    .new-member-details {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Applying to desktop only */
@media only screen and (min-width: 721px) {
    .show-menu {
        display: none;
    }

    .booking-link-container, a.booking-link {
        display: none;
    }

    /* Info panels which should only be visible on a mobile screen */
    .ticket-info-selection-mobile, .membership-selection, .calendar-dates {
        display: none;
    }

    /* The header + masthead markup has been moved around a bit so recreate the positioning for the search input */
    .main-nav .search {
        position: absolute;
        top: 90px;
        right: 0;
    }

    .main-nav .search input.s {
        border: 1px solid #ccc;
        border-top: 1px solid #aaa;
        padding: 2px 5px 1px;
        color: #aaa49f;
        margin-right: 3px;
        float: left;
        margin-top: 0px;
        text-transform: uppercase;
    }

    .masthead .search input {
        -webkit-appearance: none;
        border-radius: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    .masthead .search input.submit {
        height: 19px;
    }

    /* It'll be a lot of trouble to add a class to target here... */
    .content .article.single-col #share-buttons-wrapper {
        display: block;
    }

    .content .article.single-col {
        width: 77%;
        border-right: none;
    }

    .content .article.single-col .story {
        width: 511px;
    }

    .content .article.single-col .hero img {
        width: 100%;
        height: auto;
    }

    .content .article.single-col .third-level-nav {
        width: 100%;
    }

    .content .article.single-col div.story.wide {
        width: 100%;
    }

}