/* DEVICE & RESPONSIVE LAYOUT */

.header .nav-open-button {
    display: none;
    /* removes the nav toggle button for desktop site */
}

#media-query-trigger {
    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries) 
    instead to trigger the hiding/showing of nav and search in mobile mode */
    display: none;
    visibility: hidden;
}

img {
    max-width: 100%;
}

@media only screen and (max-width: 1460px) {
    .footer-logos img {
        margin-right: 35px;
    }
}

@media only screen and (max-width: 1400px) {
    /* laptop size */
    .header .banner.no-image .inner {
        min-height: 150px;
    }
    .banner.no-image h1 {
        padding-top: 50px;
        padding-bottom: 25px;
    }
    .ReportPage .banner h1 {
        padding-bottom: 25px;
    }
    .logo {
        top: 10px;
        left: 5px;
        max-width: 130px;
    }
    .inner.banner-text {
        top: 300px;
    }
    .banner-text.top {
        top: 100px;
    }
    .header .primary.open-nav .nav-open-button {
        top: 20px;
        right: 230px;
    }
    .primary .social {
        top: 20px;
    }
    .header .primary {
        max-width: 300px;
    }
    .header .primary ul {
        padding-top: 60px;
    }
    .header .primary ul li a,
    .header .primary ul li.current a,
    .header .primary ul li.section a {
        font-size: 18px;
        line-height: 50px;
    }
    .header .primary ul li:last-child a {
        font-size: 16px;
        line-height: 40px;
    }
    .footer .inner,
    .footer-logos .inner {
        max-width: 1240px;
        position: relative;
    }
    /* HomePage */
    .tile .hover .center {
        max-width: 160px;
    }
    .tile .hover span {
        font-size: 25px;
        line-height: 27px;
    }
    .HomePage .main .inner {
        max-width: 1200px;
    }
    /* ReportsPage */
    .ReportsPage .sponsor {
        top: -101px;
    }
}

@media only screen and (max-width: 1330px) {
    .footer .inner {
        padding: 0 30px;
    }
    .footer .to-top {
        right: 30px;
    }
    /* ReportsPage */
    .ReportsPage h1.has-sponsor {
        display: block;
        text-align: center;
        margin-bottom: 90px;
    }
    .ReportsPage .sponsor {
        left: 0;
        right: 0;
        margin: auto;
    }
}

@media only screen and (max-width: 1225px) {
    .inner.banner-text {
        transform: scale(.9);
    }
    .scroll-down {
        display: none;
    }
    .footer-logos img {
        max-width: 230px;
        max-height: 70px;
        margin-right: 20px;
    }
    .main .inner,
    .HomePage .main .inner {
        padding: 20px 30px;
    }
    /* KitPage */
    .sub-cat {
        margin-right: 1.5%;
        max-width: 32%;
    }
    /* ReportsPage */
    .more .left {
        max-width: 50%;
        margin-right: 8%;
    }
    .more .report-right {
        max-width: 40%;
    }
    /* EmploymentPage */
    .jobs {
        max-width: 780px;
        margin: 0 auto;
    }
    .job:nth-child(3n) {
        margin-right: 30px;
    }
    .job:nth-child(2n) {
        margin-right: 0;
    }
    /* Clubs */
    .stats {
        max-width: 570px;
        margin: auto;
    }
    /* EventsPage */
    .event:nth-child(4n) {
        margin-right: 37px;
    }
    .event:nth-child(3n) {
        margin-right: 0;
    }
    .events .inner {
        max-width: 905px;
    }
}

@media only screen and (max-width: 1030px) {
    /* HomePage */
    /*.tablet-nav .tiles .tile.doFade .hover {
        filter: alpha(opacity=50);
        opacity: 0.5;
	}*/
    .tablet-nav .tiles .tile.un-tapped .hover {
        zoom: 0;
        filter: alpha(opacity=0);
        opacity: 0;
    }
    .tablet-nav .tiles .tile.tapped .hover {
        zoom: 1;
        filter: alpha(opacity=100);
        opacity: 1;
    }
    .bottom-tiles .hover {
        padding: 15px;
    }
    .typography .bottom-tiles .hover p {
        font-size: 12px;
        line-height: 15px;
    }
    /* KitPage */
    .thumb .thumb-hover {
        zoom: 1;
        filter: alpha(opacity=100);
        opacity: 1;
    }
    /*.thumb.un-tapped .thumb-hover {
		zoom: 0;
        filter: alpha(opacity=0);
        opacity: 0;
	}
	.thumb.tapped .thumb-hover {
		zoom: 1;
        filter: alpha(opacity=100);
        opacity: 1;
	}*/
    /* ReportsPage - tablet*/
    .reports-header span,
    .ski-field .brief .inner div.cell {
        max-width: 13%;
    }
    .reports-header span {
        font-size: 12px;
        white-space: nowrap;
    }
    .ski-area,
    .reports-header .ski-area {
        max-width: 120px !important;
    }
    .ski-field .brief h3 {
        font-size: 18px;
        line-height: 20px;
    }
    .ski-field .brief .status-button {
        font-size: 15px;
        line-height: 18px;
    }
    .status-button span {
        font-size: 12px;
    }
    .main .reports-header .inner {
        letter-spacing: 0;
    }
    .main .ski-field .brief .inner {
        padding-left: 10px;
    }
    .ski-field .more hr {
        max-width: 1000%;
        margin-left: 0;
    }
    .footer .spinifex {
        right: 120px;
    }
}


/* BREAKPOINT 960px */

@media only screen and (max-width: 960px) {
    .typography h1 {
        font-size: 50px;
        line-height: 55px;
    }
    .typography h2 {
        font-size: 30px;
        line-height: 32px;
    }
    hr {
        margin-bottom: 35px;
    }
    .typography .more-top-margin {
        margin-top: 0;
    }
    .content img {
        max-width: 97%;
        height: auto;
    }
    .header {
        background: #000;
    }
    .header .banner.no-image .inner {
        min-height: 100px;
        border-bottom: 0;
    }
    .header .banner.has-image {
        padding-top: 100px;
        margin-bottom: 30px;
    }
    .HomePage .inner.banner-text {
        margin-top: 100px;
    }
    .KitPage .inner.banner-text {
        margin-top: 0;
    }
    .inner.banner-text {
        transform: scale(.8);
    }
    .logo img,
    .HomePage .logo img {
        display: none;
    }
    .logo img.mobile-logo {
        display: block;
    }
    .logo,
    .HomePage .logo {
        top: 10px;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 80px;
    }
    .footer-logos {
        min-height: 1px;
        line-height: 60px;
        padding: 25px 0;
    }
    .footer-logos img {
        max-width: 130px;
        max-height: 55px;
        margin-right: 35px;
    }
    .cycle-nav a {
        width: 60px;
        height: 60px;
        background-size: cover !important;
    }
    .cycle-nav .prev {
        left: 20px;
    }
    .cycle-nav .next {
        right: 20px;
    }
    .carousel {
        margin-bottom: 20px;
    }
    /* HomePage */
    .HomePage .main .inner {
        padding-top: 40px;
    }
    .tile .hover .center {
        height: 80px;
    }
    .tile .hover img.icon {
        max-width: 40px;
        max-height: 40px;
    }
    .tile .hover span {
        font-size: 18px;
        line-height: 20px;
    }
    /* ClubsPage and Club */
    .club-nav a {
        padding: 7px;
        padding-right: 27px;
        font-size: 18px;
        /*background-position: 96% center;*/
    }
    .club-nav a span:after {
        right: 5px;
    }
    .club-nav {
        display: none;
    }
    .club-nav.mobile {
        display: block;
    }
    .Club .social.below-slideshow {
        margin-bottom: 20px;
    }
    .club-logo {
        margin-bottom: 20px;
    }
    /* KitPage */
    .tablet-nav .thumb-title {
        display: table;
        display: block;
    }
    .tablet-nav .thumb .thumb-hover {
        display: block;
    }
    h3.thumb-title {
        /*height: 40px;*/
    }
    .SubCategory .images {
        margin-bottom: 20px;
    }
    .KitPage .category .content {
        padding-top: 35px;
    }
    /* EventsPage */
    .month {
        padding-top: 20px;
    }
    .events {
        margin-top: 0;
        padding: 40px 0;
        padding-bottom: 20px;
        top: 30px;
        margin-bottom: 30px;
    }
    .month .show-events {
        margin-bottom: 20px;
    }
    .event:nth-child(3n) {
        margin-right: 37px;
    }
    .event:nth-child(2n) {
        margin-right: 0;
    }
    .events .inner {
        max-width: 610px;
    }
    /* EmploymentPage */
    .EmploymentPage .content {}
    /* ContactPage */
    .ContactPage .content {
        margin-bottom: 30px;
    }
    .ContactPage .contact-form {
        margin: 0 auto;
        margin-bottom: 40px;
        float: none;
    }
    .ContactPage .contact-details {
        max-width: 460px;
        float: none;
        margin: auto;
    }
    /* ReportsPage */
    .ReportsPage .sponsor-wrapper,
    .ReportPage .sponsor-wrapper-bottom {
        padding: 30px 0;
        text-align: center;
    }
    .ReportsPage .sponsor {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin: 0;
        padding: 0 20px;
    }
    .ReportsPage .snow-hq img {
        margin: 0;
        margin-top: 10px;
    }
    .br-webcam #slider {
        display: none;
    }
    .ie8 .br-webcam #slider,
    .ie9 .br-webcam #slider {
        display: block;
    }
    .br-webcam #mobile-slider {
        display: block;
    }
    .ie8 .br-webcam #mobile-slider,
    .ie9 .br-webcam #mobile-slider {
        display: none;
    }
}

@media only screen and (max-width: 830px) {
    /* EmploymentPage */
    .job,
    .job:nth-child(3n) {
        max-width: 48%;
        margin-right: 4%;
    }
}

@media only screen and (max-width: 770px) {
    .footer-logos img {
        margin-right: 19px;
    }
    /* ReportsPage - mobile*/
    .reports-header {
        display: none;
    }
    .ski-field .brief {
        display: none;
    }
    .ski-field .brief-mobile {
        position: relative;
        overflow: hidden;
        margin-top: 5px;
        display: block;
        cursor: pointer;
    }
    .ski-field .more {
        border-bottom: none;
    }
    .brief-mobile .field-status {
        display: table;
        float: left;
        width: 100%;
        min-height: 75px;
        padding: 14px;
        padding-right: 74px;
        box-sizing: border-box;
        color: #FFF;
        text-align: center;
    }
    .brief-mobile .field-status h3 {
        font-size: 20px;
        line-height: 22px;
        /*display: table-cell;*/
        vertical-align: middle;
        padding-bottom: 3px;
        /* centering weird font*/
        margin-bottom: 0;
    }
    .brief-mobile .right {
        position: absolute;
        bottom: 0;
        top: 0;
        right: 0;
        max-width: 60px;
        min-height: 75px;
        width: 100%;
        text-align: center;
        float: right;
    }
    .brief-mobile .temp {
        height: 30px;
        line-height: 30px;
        background: #000;
        color: #FFF;
        font-size: 18px;
        font-weight: bold;
    }
    .brief-mobile .weather {
        bottom: 0;
        top: 30px;
        position: absolute;
        width: 60px;
        background: #FFF;
    }
    .brief-mobile .weather img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 40px;
    }
    .ski-field .more {
        padding: 25px 15px;
    }
    .ski-field .more hr {
        display: none;
    }
    .typography .ski-field .more h5 {
        font-size: 17px;
        line-height: 17px;
    }
    .ski-field .more .red,
    .ski-field .more .grey {
        font-size: 13px;
        line-height: 20px;
    }
    .ski-field .more .grey {
        margin-bottom: 5px;
    }
    .ski-field .more p {
        font-size: 12px;
        line-height: 17px;
    }
    .facility {
        font-size: 14px;
        line-height: 20px;
    }
    .facilities {
        margin-bottom: 15px;
    }
    .f-status {
        padding: 0;
    }
    .f-status:before {
        display: none;
    }
    .webcam .mo-webcam {
        padding-bottom: 120%;
    }
}

@media only screen and (max-width: 710px) {
    /* ReportPage - mobile */
    .more .report-right {
        float: none;
        max-width: 100%;
    }
    .more .report-right .right-lower {
        display: none;
    }
    .right-lower.mobile {
        display: block;
    }
    .more .left {
        float: none;
        max-width: 100%;
        margin-right: 0;
    }
    .webcam .mo-webcam {
        padding-bottom: 123%;
    }
    /* KitPage */
    .sub-cat {
        max-width: 48%;
    }
    .sub-cat:nth-child(2n+1) {
        margin-right: 0;
    }
    .sub-cat:nth-child(3n+1) {
        margin-right: 1.5%;
    }
    .sub-cat h3 {
        font-size: 25px;
    }
}

@media (max-width:1215px) and (min-width:640px) {
    /* HomePage */
    .tile .hover p {
        display: none;
    }
}


/* BREAKPOINT 640px */


/* when changing the breakpoint below, change it ito the same value in the script.js file as well */

@media only screen and (max-width: 640px) {
    .banner-image.has-mobile {
        display: none;
    }
    .mobile-banner-image {
        display: block;
    }
    .footer-logo {
        height: 60px;
    }
    .footer .inner {
        height: 145px;
        line-height: 20px;
        text-align: center;
        padding: 15px 0;
    }
    .footer .spinifex,
    .footer .copyright {
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
    }
    .footer .copyright {
        top: 20px;
    }
    .footer .spinifex {
        bottom: 20px;
    }
    .footer .to-top {
        left: auto;
        right: 20px;
        width: 30px;
        bottom: auto;
        margin: 0 auto;
        margin-top: 20px;
    }
    .header .primary .nav-open-button,
    .header .primary.open-nav .nav-open-button {
        top: -60px;
        right: 20px;
        width: 21px;
        height: 21px;
        padding: 5px 7px;
    }
    .header .primary .nav-open-button {
        background: #000 url('../images/icon_menu_mobile.png') center center no-repeat;
    }
    .header .primary.open-nav .nav-open-button {
        background: #000 url('../images/icon_menu_mobile_close.png') center center no-repeat;
    }
    .header .primary.stick-to-top .nav-open-button {
        top: 0;
        right: 0;
    }
    .header .primary {
        /*position: relative;*/
        top: auto;
        right: auto;
        max-width: 10000%;
        text-align: center;
    }
    .header .primary.stick-to-top {
        top: 0;
    }
    .header .primary ul {
        padding: 0;
    }
    .header .primary .social {
        display: none;
    }
    /* Menu */
    .header .primary ul li a,
    .header .primary ul li.current a,
    .header .primary ul li.section a {
        font-style: normal;
        font-family: 'Sucrose-BoldTwo', sans-serif;
        font-weight: normal;
        line-height: 30px;
        padding-top: 3px;
        padding-bottom: 7px;
        padding-left: 0;
    }
    .header .primary ul li:last-child a {
        font-size: 17px;
        background: #000;
        color: #fedf00;
    }
    /* HomePage */
    .HomePage .first-tiles .tile {
        display: none;
    }
    .HomePage .first-tiles .tile.show-on-mobile {
        display: block;
    }
    .HomePage .tile .hover.black-hover .bg-shape {
        max-width: 50%;
    }
    .bottom-tiles .hover {
        padding: 30px 35px;
    }
    .typography .bottom-tiles .hover p {
        font-size: 14px;
        line-height: 22px;
    }
    .HomePage .tile {
        width: 50%;
    }
    .HomePage .first-tiles .tile {
        width: 100%;
    }
    .HomePage .first-tiles .tile .hover span {
        font-size: 32px;
        line-height: 34px;
    }
    .HomePage .main .inner {}
    .HomePage .reports-link {
        display: block;
        color: #fde00b;
        background: #000;
        margin: 5px 0;
    }
    .HomePage .yellow-strip {
        text-align: left;
    }
    .yellow-strip div {
        max-width: 300px;
        margin: 0 auto;
        line-height: 30px;
    }
    .HomePage .yellow-strip img {
        vertical-align: top;
        float: left;
    }
    /* ClubsPage and Club */
    .club-nav {
        padding: 10px 0;
    }
    .club-nav a {
        width: 100%;
        box-sizing: border-box;
        padding: 13px;
        padding-top: 7px;
        padding-bottom: 13px;
        font-size: 22px;
    }
    .club-nav a span {
        /* position: relative; /* the .club-nav a span:after element will position relative to this now */
    }
    .club-nav a span:after {
        /*right: -30px;*/
        right: 12%;
    }
    .stat,
    .graph,
    .graph .bar {
        margin-right: 0;
        max-width: 10000%;
    }
    /* AboutPage */
    .map {
        display: none;
    }
    /* KitPage */
    .KitPage .category .content {
        padding: 20px 0;
    }
    .modal-popup.SubCategory {
        padding-top: 60px;
    }
    .KitPage .banner-text {
        top: 30px;
    }
    /* EventsPage */
    .month {
        padding-top: 0px;
    }
    .event,
    .event:nth-child(4n),
    .event:nth-child(3n),
    .event:nth-child(2n) {
        margin: auto;
        margin-bottom: 30px;
        display: block;
    }
    /* EmploymentPage */
    .job,
    .job:nth-child(3n),
    .job:nth-child(2n) {
        max-width: 360px;
        display: block;
        float: none;
        margin: auto;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 400px) {
    .footer-logos img {
        margin: 0;
    }
    /* HomePage */
    .HomePage .tile {
        width: 100%;
    }
    /* EventsPage */
    .event,
    .event:nth-child(4n) {
        margin: auto;
        margin-bottom: 30px;
        display: block;
    }
    .typography .month p {}
    /* ContactPage */
    .ContactPage .contact-details p {
        font-size: 14px;
        line-height: 23px;
    }
    /* KitPage */
    .KitPage .banner-text div {
        display: none;
    }
    .sub-cat,
    .sub-cat:nth-child(2n+1),
    .sub-cat:nth-child(3n+1) {
        display: block;
        float: none;
        margin: auto;
        margin-bottom: 20px;
        max-width: 100%;
    }
    .sub-cat .thumb {
        margin: auto;
    }
    .sub-cat h3 {
        font-size: 30px;
    }
    /* ReportsPage */
    .webcam .mo-webcam {
        padding-bottom: 193%;
    }
}