/**** Anything less than 1300px ****/
@media only screen and (max-width: 1300px) {
    html {
        overflow-x: hidden;
        overflow-y: auto;

        height: auto;
    }

    body {
        position: relative;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }

    img,
    iframe,
    object,
    embed {
        max-width: 100%;
    }

    img {
        height: auto;
    }

    #sb-player {
        height: 100%;
    }

    img {
        box-sizing: border-box;
    }

    .inner {
        max-width: 672px;
    }

    #Breadcrumbs {
        max-width: 720px;
    }

    /**** Header ****/
    #Header .top-bar .inner {
        max-width: none;
        height: auto;

        flex-direction: column;

        padding: 24px;

        gap: 24px;

        align-items: center;
    }

    #Header .top-nav ul {
        row-gap: 10px;

        justify-content: center;
    }

    #Header .nav-search {
        display: flex;

        flex-direction: column;

        gap: 24px;

        padding: 24px;

        align-items: center;
    }

    #Header .nav-search #primary-search-form {
        width: 100%;
    }


    /**** Footer ****/
    #Footer .inner {
        padding: 0 14px;
    }


    /**** Content ****/
    #Content .sideNavigation {
        display: none;
    }

    #Content .contentColumn.hasSideMenu {
        float: none;

        margin-left: 0;

        width: auto;
    }

    #Content .contentLeft {
        width: 64%;
    }

    #Content .sidebar {
        width: 29.8%;
    }

    /**** Sub Page Features ****/
    .features .feature {
        width: 48%;
    }

    .features .feature.even {
        float: right;
    }

    .features .feature.odd {
        margin-right: 0;
    }

    /**** Content Carousel ****/
    #ContentCarousel,
    #ContentCarousel .items {
        height: auto;
    }

    #ContentCarousel .carouselButton {
        top: 21.8%;
    }

    #Content .pageTitle {
        overflow-x: hidden;
    }

    #Content .pageTitle img {
        max-width: none;
    }

    /**** Councillor Page ****/
    .CouncillorPageHolder .councillors .councillor {
        width: 44.6%;
    }

    .CouncillorPageHolder .councillors .councillor .fright {
        width: 156px;
    }

    .CouncillorPageHolder .councillors .councillor.end + .councillor {
        clear: none;

        margin-left: 2.4%;
    }

    .CouncillorPageHolder .councillors .councillor.odd {
        clear: both;

        margin-left: 0;
    }

    /**** Home Page ****/
    .HomePage .inner.carousel {
        max-width: none;

        padding: 0;
    }

    .HomePage #ContentCarousel {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .HomePage #ContentCarousel .items {
        height: auto;

        padding-bottom: 28.4091%;
    }

    .HomePage #ContentCarousel .homeCarouselButton {
        font-size: 70px;

        margin-top: -35px;
    }

    .HomePage #ContentCarousel .item .itemText {
        top: 24px;
    }

    .HomePage #ContentCarousel .item .itemText .line1Text {
        font-size: 24px;
    }

    .HomePage #ContentCarousel .item .itemText .line2Text {
        font-size: 18px;
    }

    .HomePage #ContentCarousel .item .ctaButton {
        font-size: 14px;

        bottom: 12px;

        padding: 11px 22px;
    }

    .HomePage #ContentCarousel .item .ctaButton .fa {
        font-size: 20px !important;
    }

    .HomePage #Content {
        max-width: 720px;
    }

    .HomePage .features .featureColumn {
        width: 50%;

        box-sizing: border-box;
    }

    .HomePage .socialFeed {
        padding: 0px;
        width: 266px;
    }

    .HomePage .quickLinksBlock {
        max-width: 429px;
        padding-left: 0px;
    }

    .HomePage .quickLinksBlock .quickLink {
        width: 191px;
    }

    .HomePage .quickLinksBlock .quickLink.desktop-end + .quickLink {
        clear: none;

        margin-left: 46px;
    }

    .HomePage .quickLinksBlock .quickLink.tablet-end + .quickLink {
        clear: left;

        margin-left: 0px;
    }

    .HomePage .quickLinksBlock .quickLink.even + .quickLink {
        clear: both;

        margin-left: 0;
    }

    .HomePage .videoBox {
        height: 225px;

        padding-top: 20px;
    }

    .HomePage .videoBox .overlay {
        background-size: 720px auto;
    }

    .HomePage .videoBox img {
        width: 440px;
    }

    .HomePage #Content .videoBox a.videoTrigger {
        font-size: 36px;

        top: 20px;

        width: 440px;
        height: 206px;
    }

    .HomePage #Content .videoBox a.videoTrigger .fa-play-circle {
        margin-top: -36px;
        margin-left: -36px;
    }

    /**** Content Carousel ****/
    .GalleryPage #slideshow {
        height: auto;
    }

    .GalleryPage #slideshow .slideshowButton {
        top: 31.8%;
    }

    .GalleryPage .slideshow-wrapper #caption {
        height: 142px;
    }

    .GalleryPage .slideshow-wrapper #cycle-pager .pager-cell.end + .pager-cell {
        clear: none;

        margin-left: 30px;
    }

    .GalleryPage .slideshow-wrapper #cycle-pager .pager-cell.odd {
        clear: both;

        margin-left: 0 !important;
    }

    /**** Squamish Calendar ****/
    .SquamishCalendar #Form_filter div.field,
    .FestivalCalendar #Form_filter div.field,
    .CouncilMeetingsCalendar #Form_filter div.field {
        width: 45%;
    }

    .SquamishCalendar .calendar td .tdWrapper,
    .FestivalCalendar .calendar td .tdWrapper,
    .CouncilMeetingsCalendar .calendar td .tdWrapper {
        min-height: 40px;
    }

    .SquamishCalendar .calendar td.hasEvents,
    .FestivalCalendar .calendar td.hasEvents,
    .CouncilMeetingsCalendar .calendar td.hasEvents {
        background: #729ea5;

        color: #ffffff;
    }

    .SquamishCalendar .calendar td .tdWrapper .event > a,
    .FestivalCalendar .calendar td .tdWrapper .event > a,
    .CouncilMeetingsCalendar .calendar td .tdWrapper .event > a {
        display: none;
    }

    .SquamishCalendar #MobileEventsPopup,
    .FestivalCalendar #MobileEventsPopup,
    .CouncilMeetingsCalendar #MobileEventsPopup {
        background: #ffffff;

        position: fixed;
        left: 10%;
        right: 10%;
        top: 10%;
        bottom: 10%;

        border: 4px solid #000000;

        border-radius: 4px;

        padding: 20px;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        z-index: 5000;
    }

    .SquamishCalendar #MobileEventsOverlay,
    .FestivalCalendar #MobileEventsOverlay,
    .CouncilMeetingsCalendar #MobileEventsOverlay {
        background: #323232;
        background: rgba(50, 50, 50, 0.4);

        position: fixed;
        left: 0;
        top: 0;

        width: 100%;
        height: 100%;

        z-index: 4500;
    }

    .SquamishCalendar #MobileEventsPopup .event + .event,
    .FestivalCalendar #MobileEventsPopup .event + .event,
    .CouncilMeetingsCalendar #MobileEventsPopup .event + .event {
        margin-top: 20px;
        padding-top: 20px;

        border-top: 1px dotted #000000;
    }

    .SquamishCalendar #MobileEventsPopup .event .url,
    .FestivalCalendar #MobileEventsPopup .event .url,
    .CouncilMeetingsCalendar #MobileEventsPopup .event .url {
        font-size: 18px;
    }

    .SquamishCalendar #MobileEventsPopup .event .popup,
    .FestivalCalendar #MobileEventsPopup .event .popup,
    .CouncilMeetingsCalendar #MobileEventsPopup .event .popup {
        margin: 20px 0;
    }

}

/**** Screen width smaller 700px for example iPhone 5 (landscape) ****/
@media only screen and (max-width: 1024px) {
    #scroll-spy-nav {
        display: none;
    }

    /*** ED Resource Center Page ***/
    .EDResourceCenterPage .panel-subpage-hero .col-2 {
        display: block;
        float: none;
        text-align: center;
        width: auto;
    }

    .EDResourceCenterPage .hero-summary {
        display: none;
    }

    span.resource-center-wrap-bg {
        display: none;
    }

    .resource-filter {
        float: none;
        width: auto;
        padding: 15px 27px 35px;
    }

    .resource-filter .title .svg-inline--fa {
        display: initial;
    }

    #Form_ResourceFilterForm {
        max-width: 255px;
        display: none;
    }

    #Form_ResourceFilterForm .Actions {
        text-align: left;
    }

    .resource-list {
        float: none;
        width: auto;
        min-height: 0 !important;
        padding: 15px 27px;
    }

    .resource-list .results-info {
        margin-left: 0px;
    }

    .resource-list .resource {
        width: 50%;
    }

    .resource-list .resource:nth-child(3n) + .resource {
        clear: none;
    }

    .resource-list .resource:nth-child(2n) + .resource {
        clear: left;
    }

    .resource-list .resource-inner {
        min-height: 300px;
    }

    .typography .bang-the-table-banner__column-two * {
        font-size: 20px;
    }
}

@media only screen and (max-width: 728px) {
    .bang-the-table-banner {
        flex-direction: column;
        align-items: center;
    }

    .bang-the-table-banner__column-one {
        margin-right: 0px;
        margin-bottom: 10px;
    }
}

/**** Screen width smaller 700px for example iPhone 5 (landscape) ****/
@media only screen and (max-width: 700px) {
    #Breadcrumbs {
        display: none;
    }

    .inner {
        padding: 24px;
    }

    .typography blockquote {
        margin-left: 26px;
    }

    form input.text,
    form textarea,
    form select {
        width: 100%;

        box-sizing: border-box;
    }


    /**** Content ****/
    #Content {
        background-position: bottom center;

        padding-bottom: 135px;
    }

    #Content .contentLeft {
        float: none;

        width: auto;
    }

    #Content .sidebar {
        float: none;

        width: 200px;

        margin: 30px auto 0;
    }

    /**** Content Carousel ****/
    #ContentCarousel {
        overflow-x: hidden;
    }

    #ContentCarousel .description {
        height: auto;
    }

    #ContentCarousel .carouselButton {
        top: 67px;

        width: 33px;
        height: 66px;
    }

    #ContentCarousel .carouselButton i {
        top: 20px;
        left: 11px;
    }

    #ContentCarousel #contentCarouselPrev i {
        border-width: 13px 11px 13px 0;
    }

    #ContentCarousel #contentCarouselNext i {
        border-width: 13px 0 13px 11px;
    }


    /**** Shadow Box ****/
    #sb-container #sb-nav-close {
        top: 0;
    }

    #sb-title,
    #sb-title-inner,
    #sb-container #sb-info,
    #sb-container #sb-info-inner {
        height: 36px;
        line-height: normal;
    }

    #sb-wrapper-inner {
        margin: 0;

        max-height: 300px;
    }

    #sb-nav-next,
    #sb-nav-previous {
        top: 91%;
    }

    #sb-container #sb-nav-play,
    #sb-container #sb-nav-pause {
        height: 36px;
    }

    /**** Sub Page Features ****/
    .features .feature {
        float: none;

        width: auto;

        text-align: center;
    }

    /**** Footer ****/
    #Footer .footer-columns,
    #Footer .copyright {
        float: none;

        max-width: none;

        text-align: center;
    }

    /**** Councillor Page Holder ****/
    .CouncillorPageHolder .councillors .councillor {
        float: none;

        width: auto;

        margin-left: 0 !important;
    }

    .CouncillorPageHolder .councillors .councillor .detail.social a + a {
        margin-left: 3.5ex;
    }

    .CouncillorPageHolder .councillors .councillor .fright {
        width: 105px;
    }

    .CouncillorPageHolder .councillors .councillor .namePosition,
    .CouncillorPageHolder .councillors .councillor .phone {
        word-wrap: break-word;
    }

    /**** Home Page ****/
    .HomePage #Content {
        max-width: 296px;
    }

    .HomePage #ContentCarousel .homeCarouselButton,
    .HomePage #ContentCarousel .item .ctaButton {
        display: none;
    }

    .HomePage #ContentCarousel .item .itemText {
        top: 8px;
        left: 12px;
        right: 12px;
    }

    .HomePage #ContentCarousel .item .itemText .line1Text {
        font-size: 14px;

        margin-bottom: 10px;
    }

    .HomePage #ContentCarousel .item .itemText .line2Text {
        font-size: 10px;
    }

    .HomePage .features .featureColumn {
        float: none;

        width: auto;
    }

    .HomePage .socialFeed {
        max-width: 283px;
        width: auto;
        margin-top: 0px;
    }

    .HomePage .socialFeed > .heading-h6 {
        margin-bottom: 28px;
    }

    .HomePage .quickLinksBlock {
        float: left;

        max-width: 283px;

        margin-top: 28px;
        padding: 0;
    }

    .HomePage .quickLinksBlock .quickLinksHeader {
        margin-bottom: 28px;
    }

    .HomePage .quickLinksBlock .quickLink {
        float: none;
        width: auto;
    }

    .HomePage .quickLinksBlock .quickLink + .quickLink,
    .HomePage .quickLinksBlock .quickLink.desktop-end + .quickLink {
        margin-left: 0;
    }

    .HomePage .videoBox {
        height: 102px;

        padding-top: 12px;

        overflow: hidden;
    }

    .HomePage .videoBox .overlay {
        background-size: auto 114px;
    }

    .HomePage .videoBox img {
        width: 224px;
    }

    .HomePage #Content .videoBox a.videoTrigger {
        font-size: 18px;

        top: 10px;

        width: 224px;
        height: 104px;
    }

    .HomePage #Content .videoBox a.videoTrigger .fa-play-circle {
        margin-top: -18px;
        margin-left: -18px;
    }

    /**** Content Carousel ****/
    .GalleryPage .slideshow-wrapper #cycle-pager {
        display: none;
    }

    .GalleryPage .slideshow-wrapper #caption {
        height: auto;
    }

    .GalleryPage #slideshow .slideshowButton {
        top: 67px;

        width: 33px;
        height: 66px;
    }

    .GalleryPage #slideshow .slideshowButton i {
        top: 20px;
        left: 11px;
    }

    .GalleryPage #slideshow #cycle-prev i {
        border-width: 13px 11px 13px 0;
    }

    .GalleryPage #slideshow #cycle-next i {
        border-width: 13px 0 13px 11px;
    }

    /**** Contact Feedback Page ****/
    .ContactFeedbackPage #contact-list-container .contact {
        float: none;

        width: 100%;

        margin-right: 0px;
    }

    .ContactFeedbackPage #contact-list-container .contact.collapsed {
        margin-bottom: 20px;
    }

    .ContactFeedbackPage .contact .heading-h5 {
        margin: 0px;
    }

    /**** Print Gis Map Holder ****/
    .PrintGisMapHolder #Form_filter fieldset {
        width: 200px;
    }

    .PrintGisMapHolder #Form_filter .Actions {
        margin-left: 27px;
    }

    /*** epact form page ***/
    #Form_ePACTForm_groupNames_chzn {
        width: auto !important;
    }

    /*** nocaptcha ***/
    .nocaptcha {
        max-width: 276px;
        overflow: hidden;
    }


    /*** PanelSubpage ***/
    .panel-subpage-hero .flexWrap {
        padding-top: 20px;
        padding-bottom: 115px;
    }

    .panel-subpage-hero .textBlock::after {
        display: none;
    }

    .panel-subpage-hero .col-1 {
        float: none;
        width: auto;
        text-align: center;
        padding: 0px;
    }

    .panel-subpage-hero .col-2 {
        display: none;
    }

    .typography .panel-subpage-hero h5 {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .typography .panel-subpage-hero h6 {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .sibling-menu {
        padding-top: 40px;
        top: 0px;
    }

    .contact-link hr {
        display: block;
        border-bottom: 1px solid #d1d1d1;
        opacity: 0.5;
        margin: 15px 20px;
    }

    .hero-summary {
        display: block;
    }

    /*** ED Resource Center Page ***/
    .resource-filter,
    .resource-list {
        padding-left: 12px;
        padding-right: 12px;
    }

    .resource-list .resource {
        width: auto;
        padding: 0px;
        float: none;
        max-width: 300px;
        margin-right: auto;
        margin-left: auto;
    }

    .resource-list .resource-inner {
        min-height: 0;
    }

    .bang-the-table-banner {
        padding: 25px 24px 33px 24px;
    }

    .typography .bang-the-table-banner__column-two a {
        display: block;
    }

    /*** cookiebar ***/
    .SquamishCookiebar .SquamishCookiebar__closeButton {
        display: block;
        margin-left: 0;
        margin-top: 15px;
    }
}

@media screen and (max-width: 344px) {
    /*** nocaptcha ***/
    div.nocaptcha {
        max-width: 250px;
        overflow: hidden;
    }
}

/**** disable parallax on touch screens ****/
@media (pointer: none), (pointer: coarse) {
    .PanelPage .basic-panel,
    .ElementPage .element {
        background-attachment: unset !important;
    }
}