﻿

/* All screen sizes less than or equal to 960px */
@media screen and (max-width: 960px) {


    #page {
        width: 92%;
    }

    .banner-wrapper {
        position: relative;
        overflow: hidden;
    }

        .banner-wrapper img {
            position: absolute;
            left: -9999px;
            top: -9999px;
            right: -9999px;
            bottom: -9999px;
            margin: auto;
        }

    #homeNav,
    #sectionNav {
        display: none;
    }

    #leftContent {
        float: none;
        width: 100%;
    }
    

    #mainContent {
        margin-left: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #sidebar {
        float: none;
        margin: 24px 0;
        order: 2;
        width: 100%;
    }

    #centreColumn {
        width: 100%;
    }

    #bottomContent {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

        #bottomContent > div.first,
        #bottomContent > div.last,
        #bottomContent > div {
            margin: 0 24px 24px 0;
            float: none;
        }

    .inline-table {
        overflow-x: auto;
    }

    .mobile-menu  {
        display: block;
        padding-top: 15px;
        float: right;
    }

     .mm-menu.mm-current {
        display: block;
    }
    html.mm-opened #mm-blocker, html.mm-blocking #mm-blocker {
      display: block;
    }

    .article {
        background: #fafafa;
        padding: 9px 10px 9px 0;
        left: 0;
        margin: 6px 0;
    }

    #top {
        padding-top: 5px;
    }

    #top > a > img {
        width: 310px;
        height: auto;
        float: left;
    }
    #top #siteSearch {
        display: none;
    }
    #topnavigation {
        display: none;
    }
    



    #footerContent .centre {
        display: block;
        clear: both;
        text-align: left;
        width: 100%;
    }


    table.gallery {
        display: block;
    }
    table.gallery tbody {
        display: inline;
    }
        table.gallery tr {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        table.gallery tr td {
            
        }


    #leftContent .filter-options {
        font-family: 'slsnz-icon-set';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        cursor: pointer;
        float: right;
        height: 30px;
        text-align: center;
        width: 35px;
    }


    #leftContent h2.filters {
        margin-top: 24px;
    }
    #leftContent .filter-state:before {
        content: "\f067";  /*.slsnz-icon-plus*/
        top: 1px;
        position: relative;
    }
    #leftContent.filters-expanded .filter-state:before {
        content: "\f068";  /*.slsnz-icon-minus*/
        top: 1px;
        position: relative;
    }

    #leftContent .filters-content {
        max-height: 0;
        overflow: hidden;
        -moz-transition: max-height 0.5s linear;
        -o-transition: max-height 0.5s linear;
        -webkit-transition: max-height 0.5s linear;
        transition: max-height 0.5s linear;
    
    }
    #leftContent.filters-expanded .filters-content {
        max-height: 700px;
        width: 100%;
        margin: 4% 0;
    }

    .pageBody .frame-wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pageBody img {
        max-width: 100%;
        height: auto;
    }


    .club-details {
        float: none;
        width: 100%;
        margin-right: 0;
    }
    .club-addresses {
        float: none;
        width: 100%;
    }
}

@media screen and (max-width: 550px) {

    div.gallery .gallery-album {      
      width: 44%;
    }

    div.gallery .gallery-album:nth-child(3n + 1) {
        margin-left: 2.2%;
    }
    div.gallery .gallery-album:nth-child(3n) {
        margin-right: 2.2%;
    }

    div.gallery .gallery-album:nth-child(2n + 1) {
        margin-left: 0;
    }
    div.gallery .gallery-album:nth-child(2n) {
        margin-right: 0;
    }


}

@media screen and (max-width: 400px) {
    #top > a > img {
        width: 85%;
        height: auto;
    }

    div.gallery .gallery-album {      
        width: 80%;
        margin: 6% auto;
        float: none;
    }

    div.gallery .gallery-album:nth-child(3n + 1),
    div.gallery .gallery-album:nth-child(3n),
    div.gallery .gallery-album:nth-child(2n + 1),
    div.gallery .gallery-album:nth-child(2n)     
     {
            margin: 6% auto;
    }

}