/* 8 THUMBNAILS */

@media only screen and (max-width: 1560px) {
    #photo-2 {
        max-width: 610px;
    }
}
@media only screen and (max-width: 1560px) {
    #photo-3 {
        max-width: 395px;
    }
}
/* 7 THUMBNAILS */

@media only screen and (max-width: 1400px) {
    #photo-2 {
        max-width: 520px;
    }
}
@media only screen and (max-width: 1400px) {
    #photo-3 {
        max-width: 333px;
    }
}

/* 6 THUMBNAILS */

@media only screen and (max-width: 1240px) {
    #photo-2 {
        max-width: 438px;
        margin-top: 26px;
        margin-bottom: 26px;
    }
}
@media only screen and (max-width: 1240px) {
    #photo-3 {
        max-width: 285px;
    }
}
@media only screen and (max-width: 1240px) {
    .country {
        display: none;
    }
}

/* @media only screen and (max-width: 1240px) {
    .date {
        display: none;
    }
} */

@media only screen and (max-width: 1240px) {
    #containerH01 {
        flex-direction: column;
        justify-content: left;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 1240px) {
    .date {
        padding-left: 17px;
    }
}

@media only screen and (max-width: 1240px) {
    .route-span {
        font-size: 19px;
    }
}

/* 5 THUMBNAILS */

@media only screen and (max-width: 1080px) {
    #photo-2 {
        max-width: 347px;
    }
}
@media only screen and (max-width: 1080px) {
    #photo-3 {
        max-width: 222px;
    }
}

@media only screen and (max-width: 1080px) {
    .name {
        font-size: 33px;
        width: 100%;
    }
}
@media only screen and (max-width: 1080px) {
    .date {
        font-size: 18px;
        width: 100%;
    }
}
@media only screen and (max-width: 1080px) {
    body span small {
        right: 56px;
    }
}
/* 4 THUMBNAILS */

@media only screen and (max-width: 920px) {
    #photo-1 {
        margin-top: 30px;
    }
}
@media only screen and (max-width: 920px) {
    #photo-2 {
        max-width: 540px;
        margin-top: 0px;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 920px) {
    .hike-photos:nth-child(5) {
        display: none;
    }
}
@media only screen and (max-width: 920px) {
    #photo-3 {
        max-width: 259px;
        margin-top: 0px;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 920px) {
    .name {
        font-size: 27px;
    }
}
@media only screen and (max-width: 920px) {
    .date {
        font-size: 15px;
        padding-left: 0px;
    }
}
@media only screen and (max-width: 920px) {
    .route {
        font-size: 18px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 920px) {
    .hike-pages-navbar {
        margin-top: 45px;
    }
}
@media only screen and (max-width: 920px) {
    .hike-pages-header:nth-child(2) {
        margin-bottom: 25px;
    }
}
@media only screen and (max-width: 920px) {
    .fa-hiking {
        font-size: 22px;
    }
}
@media only screen and (max-width: 920px) {
    .fa-biking {
        font-size: 20px;
    }
}
@media only screen and (max-width: 920px) {
    .name {
        padding: 0;
    }
}
@media only screen and (max-width: 920px) {
    body span small {
        right: 47px;
    }
}
@media only screen and (max-width: 920px) {
    .route-span {
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0.1rem;
    }
}
@media only screen and (max-width: 920px) {
    .hike-pages-header {
        padding-top: 5px;
    }
}

/* 3 THUMBNAILS */
@media only screen and (max-width: 760px) {
    #photo-1 {
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 760px) {
    #photo-2 {
        max-width: 480px;
    }
}
@media only screen and (max-width: 760px) {
    #photo-3 {
        min-width: 480px;
    }
}

@media only screen and (max-width: 760px) {
    .hike-photos:nth-child(5) {
        display: unset;
    }
 }


@media only screen and (max-width: 760px) {
    #badgetrue {
        display: none;
    }
}

@media only screen and (max-width: 760px) {
    .fa-arrow-up {
       padding-right: 5px;
       padding-left: 5px;
    }
}

@media only screen and (max-width: 760px) {
    .fa-route {
       padding-right: 7px;
    }
}

@media only screen and (max-width: 760px) {
    .hike-pages-header:nth-child(1) {
        
        margin-top: -10px;
    }
}
@media only screen and (max-width: 760px) {
    .route-span {
        font-size: 17px;
        line-height: 25px;
        letter-spacing: 0.05rem;
    }
}

/* BELOW 3 THUMBNAILS */
@media only screen and (max-width: 600px) {
    .iframe {
        height: 56px;
    }
}
@media only screen and (max-width: 600px) {
    .iframe-mainpage {
        top: 56px;
        height: 120px;
    }
}
@media only screen and (max-width: 600px) {
    .header-thumbs {
        margin-top: -10px;
    }
}
@media only screen and (max-width: 600px) {
    .container {
        max-width: 470px;
    }
}
@media only screen and (max-width: 600px) {
    #photo-2 {
        max-width: 390px;
    }
}
@media only screen and (max-width: 600px) {
    #photo-3 {
        min-width: 390px;
    }
}
@media only screen and (max-width: 600px) {
    .route-span {
        font-size: 16px;
        line-height: 23px;
        letter-spacing: 0.05rem;
    }
}
@media only screen and (max-width: 470px) {
    .route-span {
        font-size: 14px;
        line-height: 23px;
        letter-spacing: 0.05rem;
    }
}
@media only screen and (max-width: 600px) {
    .dist-elevation {
        font-size: 18px;
        line-height: 23px;
        letter-spacing: 0.05rem;
    }
}
@media only screen and (max-width: 760px) {
    .hike-data-tooltip-div:nth-child(1) {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .more-photos-icon {
        margin-right: 85px;
    }
}





@media only screen and (max-width: 470px) {
    .iframe {
        height: 50px;
    }
}
@media only screen and (max-width: 470px) {
    .iframe-mainpage {
        top: 50px;
        height: 100px;
    }
}
@media only screen and (max-width: 470px) {
    .header-thumbs {
        margin-top: -25px;
    }
}
@media only screen and (max-width: 470px) {
    #photo-1 {
        max-width: 320px;
    }
}
@media only screen and (max-width: 470px) {
    #photo-2 {
        max-width: 320px;
    }
}
@media only screen and (max-width: 470px) {
    #photo-3 {
        min-width: 320px;
    }
}
@media only screen and (max-width: 470px) {
    .container {
        max-width: 400px;
    }
}
@media only screen and (max-width: 470px) {
    .hike-pages-header {
        max-width: 340px;
    }
}

@media only screen and (max-width: 470px) {
    .standard-buttons {
        padding-left: 60px;
        justify-content: flex-start;
    }
}
@media only screen and (max-width: 470px) {
    .button {
        margin-right: 0px;
    }
}
@media only screen and (max-width: 470px) {
    .bottom-navbar-buttons {
        width: 440px;
    }
}