@media screen and (orientation: landscape) and (min-width: 1500px){
    .post-header, 
    .page-header {
        height: 600px;
    }
}


@media screen and (orientation: landscape) and (min-width: 600px) and (max-width: 767px) {
    .three-image-row.landscape .image-container {
        flex-direction: row;
    }
}


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

    .post-cards{
        flex-basis: 45%;
    }
    div#aboutPageContent {
        width: 90%;
        flex-direction: column-reverse;
    }

    div#aboutPageContact {
        flex-direction: row;
        width: 90%;
        justify-content: space-evenly;
    }

    div#aboutPageContact .social-item img {
        height: 35px;
    }

    div#aboutPageText {
        width: 90%;
    }

    .dislaimer-with-vid {
        flex-direction: column;
        align-items: center;
    }

    .dislaimer-with-vid .disclaimer-text {
        width: 100%;
        margin: 20px 0;
    }

    .post-video {
        width: 100%;
    }

    .disclaimer {
        font-size: 10px;
    }

    a.conditions {
        width: 25%;
        justify-content: center;
    }

    .header-buttons-container {
        justify-content: center;
    }
}

@media only screen and (max-width: 980px){
    .header-buttons a {
        min-width: 150px;
    }

    .header-buttons a img {
        padding-right: 10px;
    }

    ul#menu-main-menu {
        width: 90%;
    }

    a.conditions {
        font-size: 12px;
    }
}

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

    div#showMapFilters {
        display: block;
    }

    .marker-filter {
        display: none;
    }

    div#tripMap {
        width: 80%;
        height: 675px;
    }

    .mobile-menu {
        display: block;
        position: relative;
        z-index: 10;
    }

    .mobile-menu .mobile-menu-icon {
        width: 36px;
        height: 36px;
        position: absolute;
        right: 24px;
        top: 25%;
        z-index: 1;
    }

    .mobile-menu .menu {
        display: none;
    }

    .mobile-menu .menu {
        width: 100%;
        position: absolute;
        z-index: 5;
        background: #FFF;
        right: 0;
        border-top: 5px solid var(--hike2hike-green);
        max-height: 500px;
        overflow: scroll;
    }

    .mobile-menu .menu ul {
        width: 100%;
        padding: 0px;
    }

    .menu-mobile-menu-container .menu li {
        height: 40px;
        padding-left: 20px;
        border-bottom: 1px solid whitesmoke;
    }

    nav#menu #navBarLogo {
       display: none;
    }

    .mobile-menu .menu li a {
        text-decoration: none;
        color: #000000;
        text-align: left;
        width: 100%;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .mobile-menu {
        width: 100%;
    }

    .menu-main-menu-container {
        display: none;
    }

    div#navBarLogoMobile img {
        height: 50px;
        padding-left: 2%;
        margin: 2% 0;
    }


    .mobile-menu .mobile-menu-icon img {
        width: 100%;
        height: 100%;
    }

    .three-image-row .image-container,
    .two-image-row .image-container {
        width: 100%;
    }

    .dislaimer-with-vid .disclaimer-text {
        font-size: 10px;
    }

    .header-info {
        bottom: 60px;
    }

    .three-image-row,
    .two-image-row  {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .post-video iframe {
        height: 200px;
    }

    footer #copyright {
        font-size: 12px;
    }

    .disclaimer-no-vid {
        font-size: 12px;
    }

    .post-cards-top,
    .cards-content {
        height: 50%;
    }

    .page-header {
        height: 300px;
    }

    a.conditions.weather {
        grid-area: weather;
    }

    a.conditions.map {
        grid-area: map;
    }

    a.conditions.trailhead {
        grid-area: trailhead;
    }

    a.condition.avyRisk {
        grid-area: avyRisk;
    }


    .header-buttons-container.responsive-grid {
        display: grid;
        grid-template-areas: 
            "weather trailhead"
            "map avyRisk";
    }
}

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

    .header-buttons-container.responsive-flex {
        flex-direction: column;
        align-items: center;
    }

    .header-buttons-container.responsive-flex a.conditions{
        width: 50%;
    }

    .header-buttons-container.responsive-flex a.conditions span{
        font-size: 14px;
    }

    .trip-title {
        font-size: 40px;
    }

    .quote.text,
    .quote.author {
        font-size: 16px;
    }

    .trip-date img {
        width: 200px;
    }

    .trip-date span {
        left: 15%;
    }

    .trip-start-date {
        padding-right: 10px;
    }

    .trip-end-date {
        padding-left: 10px;
    }

    .three-image-row .image-container,
    .two-image-row .image-container {
        margin: 0 0 20px;
    }

    .post-cards {
        flex-basis: 75%;
    }

    .posts-list {
        justify-content: center;
        align-items: center;
    }

    .acf-map {
        height: 300px;
    }
}

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

    .top-bar-item.text {
        margin: 10px 0 0;
    }

    .mobile-menu .menu {
        max-height: fit-content;
    }

    .mobile-menu .mobile-menu-icon {
        width: 36px;
        height: 36px;
        position: absolute;
        right: 24px;
    }

    .headerText {
        font-size: 40px;
    }

    .posts-list {
        width: 90%;
    }

    .post-cards {
        flex-basis: 90%;
    }

    div#siteTopBar .top-bar-item.social,
    div#siteTopBar .top-bar-item.text {
        padding: 0 5%;
        justify-content: center;
    }

    div#siteTopBar .top-bar-item {
        width: 100% !important;
    }

    div#siteTopBar {
        flex-direction: column;
    }

    .header-buttons {
        flex-wrap: wrap;
    }

    a.conditions span {
        font-size: 12px;
    }

    .conditions img {
        height: 20px;
        padding-right: 5px;
    }

    .header-buttons-container.responsive-flex a.conditions {
        width: 80%;
    }
}

@media only screen and (max-width: 300px) {
    .header-buttons a {
        min-width: 125px;
    }

    a.conditions {
        font-size: 10px;
    }

    .conditions img {
        height: 15px;
    }

    .header-buttons a img {
        padding: 0;
    }

    .header-buttons a {
        min-width: 110px;
        padding: 5px 0px;
    }

    .header-buttons {
        display: flex;
        flex-wrap: wrap;
    }

}