@media only screen and (max-width: 1400px) {
    .centerContent {
        width: 1000px;
    }

}

@media only screen and (max-width: 1300px) {
    .centerContent {
        width: 900px;
    }
}

@media only screen and (max-width: 1100px) {
    .centerContent {
        width: 800px;
    }

    .introRow p {
        width: 75%;
    }

    .routeListGrid {
        grid-template-columns: repeat(1, 100%);
    }

    .routeListImgContainer h2 {
        font-size: 50px;
        word-wrap: break-word;
        padding: 0px 20px;
    }

    .routeListText, .routeDetailText {
        padding: 0px 50px;
    }

    .kidsNoteText-bottom-left:before {
        border-left: 24px solid #fff;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #fff;
        border-top: 20px solid transparent;
        left: 200px;
        bottom: 130px;
    }
}

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

}

@media only screen and (max-width: 850px) {
    .centerContent {
        width: 700px;
    }

    #questionPanel {
        top: 240px;
    }



}

/*iPad air screen size. Mobile from here on out*/
@media only screen and (max-width: 820px) {
    .centerContent {
        width: 700px;
    }

    .accountContainer {
        display: none;
    }

    #heroContainer h1 {
        font-size: 75px;
    }

    nav {
        display: none;
    }

    #compass {
        display: block;
        width: 50px;
    }

    #mobileNav {
        display: block;
        margin-left: auto;
    }

    .slicknav_menu {
        display: block;
    }

    .headerRow {
        display: block !important;
    }

    header {
        background-color: #91d9ab;
        z-index: 1000;
        width: 100%;
    }

    .headerLogo {
        display: none;
    }

    #mobileIntroContainer {
        display: flex;
        flex-direction: column;
    }

    .footerGrid {
        grid-template-columns: repeat(1, auto);
        row-gap: 20px;
        justify-content: center;
        text-align: center;
    }

    #footercopy p {
        text-align: center;
        width: 90%;
    }

    .socialMediaRow {
        justify-content: center;
    }

    .section {
        flex-direction: column;
    }

    .section .interiorImage {
        width: 60%;
        margin: auto;
    }


    .section div {
        width: 100%;
    }

    #mapHolder {
        display: flex;
        justify-content: center;
    }

        #mapHolder img {
            height: 65vh;
            width: unset;
        }

    #questionPanel {
        top: 95px;
    }

}


@media only screen and (max-width: 750px) {
    .centerContent {
        width: 550px;
    }

    #heroContainer {
        min-height: 570px;
    }

    .routeListImgContainer h2 {
        font-size: 40px;
    }


    .kidsNoteText-bottom-left:before {
        bottom: 160px;
    }

}


@media only screen and (max-width: 600px) {
    .centerContent {
        width: 450px;
    }

    #heroContainer h1 {
        font-size: 50px;
    }

    .introRow p {
        width: 70%;
    }

    #heroContainer {
        min-height: 430px;
    }

    .loginRegisterRow {
        flex-direction: column;
        row-gap: 20px;
    }

    .routeListImgContainer h2 {
        font-size: 30px;
    }

    .routeListCenter {
        width: 100% !important;
    }

    .startRouteLink {
        font-size: 45px;
        background-size: 50%;
    }

    .lengthButton {
        padding: 10px;
        font-size: 25px;
    }

    .routeCompleteTitle {
        margin-top: 20px;
    }

}


@media only screen and (max-width: 500px) {
    .centerContent {
        width: 350px;
    }

    #heroContainer {
        min-height: 360px;
    }

    #character1 {
        width: 230px;
    }

    #routeCompleteImg {
        width: 100px;
    }

    .routeDetails {
        column-gap: 15px;
        font-size: 14px;
    }

    .kidsNoteText {
        margin-bottom: 50px;
    }

    .heroImgTitleText {
        margin-top: 0px;
        margin-bottom: 50px;
    }

    .listRow {
        background-size: cover;
        padding: 0px;
    }

    .backButton {
        margin-top: 20px;
    }

}

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

    #mobileTitle {
        width: 100%;
    }

    #heroContainer h1 {
        font-size: 40px;
    }

    #character1 {
        width: 180px;
        margin-top: -120px;
    }

    #heroContainer {
        min-height: 330px;
    }

    .startRouteLink {
        font-size: 35px;
        background-size: 50%;
    }

    .hintButton {
        width: unset;
    }
}

@media only screen and (max-width: 400px) {
    .centerContent {
        width: 310px;
    }

    .selectRow {
        font-size: 25px;
    }

    .routeListImgContainer h2 {
        font-size: 28px;
    }

    .routeListText, .routeDetailText {
        padding: 0px 20px;
    }

}