/* overall css */

* {
    box-sizing: border-box;
    p {
        font: 400 1rem/1.5 Arial, sans-serif;
        color: #002426;
    }
    img {
        width: 100%;
        height: auto;
        background-size: contain;
    }
}
html {
    margin: 0;
    padding: 0;
    background-color: #cfe3e5;
}
body {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: minmax(5rem auto);
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: #cfe3e5;
}

/* page load animation */

@media only screen and (max-width: 1300px){
    .page-load {
        display: none;
    }
    .map-animation {
        display: none;
    }
    .pin-animation {
        display: none;
    }
}
@media only screen and (min-width: 1300px) {
    .page-load {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #cfe3e5;
        animation: fade-out-background 10s ease-in-out forwards;
        -webkit-animation: fade-out-background 10s ease-in-out forwards;
    }
    .map-animation img {
        height: auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: fade-out 7s ease-in-out forwards;
        animation-delay: 0s;
        -webkit-animation: fade-out 7s ease-in-out forwards;
        -webkit-animation-delay: 0s;
    }
    .pin-animation img {
        height: auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: slide-in 7s ease-in-out forwards;
        animation-delay: 0s;
        -webkit-animation: slide-in 7s ease-in-out forwards;
        -webkit-animation-delay: 0s;
    }
    @keyframes fade-out-background {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            display: none;
        }
    }
    @-webkit-keyframes fade-out-background {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            display: none;
        }
    }
    @keyframes fade-out {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        75% {
            opacity: 0;
        }
        100% {
            opacity: 0;
            display: none;
        }
    }
    @-webkit-keyframes fade-out {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        75% {
            opacity: 0;
        }
        100% {
            opacity: 0;
            display: none;
        }
    }
    @keyframes slide-in {
        0% {
            translate: 150vw 0;
            opacity: 1;
        }
        50% {
            translate: 0 0;
            opacity: 1;
        }
        75% {
            opacity: 0;
        }
        100% {
            opacity: 0;
            display: none;

        }
    }
    @-webkit-keyframes slide-in {
        0% {
            translate: 150vw 0;
            opacity: 1;
        }
        50% {
            translate: 0 0;
            opacity: 1;
        }
        75% {
            opacity: 0;
        }
        100% {
            opacity: 0;
            display: none;

        }
    }
}

/* header & logo */

header {
    grid-column: span 12;
    grid-row: 1;
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: minmax(5rem auto)
}
.logo {
    grid-column: span 12;
    grid-row: 1;
}
.logo img {
    width: 15rem;
    height: auto;
    background-size: contain;
    margin-bottom: 3rem;
}

/* nav */

nav {
    grid-column: span 12;
    grid-row: 2;
}
.navbutton .destination, .navbutton .widedestination {
    padding: 1rem;
    border: .25rem solid #002426;
    border-radius: 1.5rem;
    font: 700 1.5rem/1.5 Arial, san-serif;
    color: #002426;
    background-color: #ff5f2e;
    box-shadow: 0 .25rem .25rem 0 rgba(0,36,38,.75)
}
.navbutton .destination:hover, .navbutton .widedestination:hover {
    background-color: #00a7cc;
}
.navbutton .widedestination {
    display: none;
}
@media only screen and (min-width: 40rem) {
    .navbutton .destination {
        display: none;
    }
    .navbutton .widedestination {
        display: block;
    }
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #61bf25;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 36px;
}
.sidenav a, .dropdown-btn {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font: 700 1.5rem/1.5 Arial, san-serif;
    color: #3d2f24;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}
.sidenav a:hover, .dropdown-btn:hover {
    color: #cfe3e5;
}
.active {
    background-color: #002426;
    color: #ff5f2e;
}
.dropdown-container {
    display: none;
    background-color: #00a7cc;
    padding-left: 8px;
}
.dropdown-container a {
    color: #002426;
}
@media only screen and (min-width: 40rem){
    nav {
        grid-column: span 3;
        grid-row: 1;
        text-align: left;
        align-content: center;
    }
    .logo {
        grid-column: span 9;
        grid-row: 1;
    }
    .logo {
        float: right;
        text-align: right;
    }
}

/* tag line */

.tagline {
    grid-column: span 12;
    grid-row: 2;
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    font: 2rem/1.5 "Rampart One", Arial, sans-serif;
    color: #002426;
}

/* homepage */

.inseason {
    grid-column: span 12;
    grid-row: 3;
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    font: 900 1.25rem/1.5 Arial, sans-serif;
    color: #002426;
}
.inseason a:link {
    text-decoration: none;
}
.inseason div {
    width: auto;
    height: 20rem;
    position: relative;
    margin: 1rem;
    padding: 2rem;
    border: .25rem solid #002426;
    border-radius: 1rem;
    box-shadow: 0 .25rem .25rem 0 rgba(0,36,38,.75);
    transition: transform .2s;
}
.inseason div:hover {
    transform: scale(1.05);
}
.inseason h3 {
    position: absolute;
    top: 0;
    font: 700 1.5rem/.75 Arial, sans-serif;
    color: #cfe3e5;
    padding: .5rem;
    border-radius: .25rem;
    background-color: #002426;
}
.inseason p {
    position: absolute;
    bottom: 0;
    font: 400 1rem/1.5 Arial, sans-serif;
    color: #cfe3e5;
    padding: .5rem;
    border-radius: .25rem;
    background-color: #002426;
}
.squamish-style {
    background-image: url(images/squamish.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.bluesky-style {
    background-image: url(images/mtbluesky.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.rocklands-style {
    background-image: url(images/rocklands-button.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.magicwood-style {
    background-image: url(images/magicwood.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
@media only screen and (min-width: 40rem) {
    .inseason {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: minmax(5rem auto);
    }
    .seasontitle {
        grid-column: span 12;
        grid-row: 1;
        text-align: left;
    }
    .squamish {
        grid-column: span 6;
        grid-row: 2;
    }
    .bluesky {
        grid-column: span 6;
        grid-row: 2;
    }
    .rocklands {
        grid-column: span 6;
        grid-row: 3;
    }
    .magicwood {
        grid-column: span 6;
        grid-row: 3;
    }
}
@media only screen and (min-width: 70rem) {
    .inseason {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: minmax(5rem auto);
    }
    .seasontitle {
        grid-column: span 12;
        grid-row: 1;
    }
    .squamish {
        grid-column: span 3;
        grid-row: 2;
    }
    .bluesky {
        grid-column: span 3;
        grid-row: 2;
    }
    .rocklands {
        grid-column: span 3;
        grid-row: 2;
    }
    .magicwood {
        grid-column: span 3;
        grid-row: 2;
    }
}
.planahead {
    grid-column: span 12;
    grid-row: 4;
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    font: 900 1.25rem/1.5 Arial, sans-serif;
    color: #002426;
}
.planahead a:link {
    text-decoration: none;
}
.planahead div {
    width: auto;
    height: 20rem;
    position: relative;
    margin: 1rem;
    padding: 2rem;
    border: .25rem solid #002426;
    box-shadow: 0 .25rem .25rem 0 rgba(0,36,38,.75);
    border-radius: 1rem;
    background-color: #00a7cc;
    transition: transform .2s;
}
.planahead div:hover {
    transform: scale(1.05);
}
.brione-style {
    background-image: url(images/brione.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.fontainebleau-style {
    background-image: url(images/font.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.hueco-style {
    background-image: url(images/hueco.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.bishop-style {
    background-image: url(images/bishop.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.planahead h3 {
    position: absolute;
    top: 0;
    font: 700 1.5rem/.75 Arial, sans-serif;
    color: #cfe3e5;
    padding: .5rem;
    border-radius: .25rem;
    background-color: #002426;
}
.planahead p {
    position: absolute;
    bottom: 0;
    font: 400 1rem/1.5 Arial, sans-serif;
    color: #cfe3e5;
    padding: .5rem;
    border-radius: .25rem;
    background-color: #002426;
}
@media only screen and (min-width: 40rem) {
    .planahead {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: minmax(5rem auto);
    }
    .plantitle {
        grid-column: span 12;
        grid-row: 1;
        text-align: left;
    }
    .fontainebleau {
        grid-column: span 6;
        grid-row: 2;
    }
    .hueco {
        grid-column: span 6;
        grid-row: 2;
    }
    .brione {
        grid-column: span 6;
        grid-row: 3;
    }
    .bishop {
        grid-column: span 6;
        grid-row: 3;
    }
}
@media only screen and (min-width: 70rem) {
    .planahead {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: minmax(5rem auto);
    }
    .plantitle {
        grid-column: span 12;
        grid-row: 1;
    }
    .fontainebleau {
        grid-column: span 3;
        grid-row: 2;
    }
    .hueco {
        grid-column: span 3;
        grid-row: 2;
    }
    .brione {
        grid-column: span 3;
        grid-row: 2;
    }
    .bishop {
        grid-column: span 3;
        grid-row: 2;
    }
}

/* about page */

.about {
    grid-column: span 12;
    grid-row: 3;
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    font: 900 1.25rem/1.5 Arial, sans-serif;
    color: #002426;
}
.about div {
    margin: 1rem;
    padding: 1rem;
}
.about img {
    width: 15rem;
    height: auto;
    background-size: contain;
}
.about p {
    font: 400 1rem/1.5 Arial, sans-serif;
    text-align: left;
}
@media only screen and (min-width: 40rem) {
    .about {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: minmax(5rem auto);
    }
    .about div {
        margin: auto;
        margin-top: 1rem;
        padding: 1rem;
    }
    .adventure {
        grid-column: span 12;
        grid-row: 1;
    }
    .sites {
        grid-column: span 12;
        grid-row: 2;
    }
    .food {
        grid-column: span 6;
        grid-row: 3;
    }
    .shopping {
        grid-column: span 6;
        grid-row: 3;
    }
}
@media only screen and (min-width: 60rem) {
    .sites {
        grid-column: span 4;
        grid-row: 2;
    }
    .food {
        grid-column: span 4;
        grid-row: 2;
    }
    .shopping {
        grid-column: span 4;
        grid-row: 2;
    }
}

/* location pages */

.location-photo {
    grid-column: span 12;
    grid-row: 3;
    height: 40rem;
    background-image: url(images/brione.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 35% 65%;
}
.location-photo-font {
    grid-column: span 12;
    grid-row: 3;
    height: 40rem;
    background-image: url(images/font.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 35% 65%;
}
.location-intro {
    grid-column: span 12;
    grid-row: 4;
    margin: 1rem;
    padding: 2rem;
    margin-bottom: 0;
    padding-bottom: 0;
}
.location-intro h3 {
    font: 700 1.5rem/1.5 Arial, sans-serif;
    color: #002426;
}
.jump-to-nav {
    grid-column: span 12;
    grid-row: 5;
    margin: 0;
    padding: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 5rem;
    padding-bottom: 5rem;
    text-align: center;
    border-bottom: .25rem solid #002426;
}
.jump-to-nav h3 {
    font: 700 1.5rem/1.5 Arial, sans-serif;
    color: #002426;
    text-align: left;
    margin: 1rem;
}
.jump-to-nav .button-style, .location-sites .button-style, .location-food .button-style, .location-shopping .button-style {
    display: inline-block;
    width: 10rem;
    height: auto;
    border: .25rem solid #002426;
    border-radius: 1rem;
    background-color: #00a7cc;
    margin: .5rem;
    padding: 1rem;
    font: 700 1rem/1.5 Arial, sans-serif;
    color: #002426;
    text-decoration: none;
}
iframe {
    width: 100%; 
    height: 480px;
}
.location-sites {
    grid-column: span 12;
    grid-row: 6;
    margin: 1rem;
    padding: 2rem;
    text-align: center;
}
.location-sites img {
    width: 15rem;
    height: auto;
    background-size: contain;
}
.location-sites h2 {
    font: 900 3rem/1.5 Arial, sans-serif;
    color: #002426;
}
.location-sites h3 {
    font: 700 1.5rem/1.5 Arial, sans-serif;
    color: #002426;
    text-align: left;
    background-color: #00a7cc;
    padding: 1rem;
    transition: transform .2s;
}
.location-sites h3:hover {
    transform: scale(1.02);
}
.location-sites p {
    text-align: left;
    display: none;
}
.location-sites-aside, .location-food-aside, .location-shopping-aside {
    display: none;
    background-color: #61bf25;
    border-radius: 1rem;
    margin: 2rem;
    padding: 2rem;
    font: 1.5rem/1.5 "Rock Salt", Arial, sans-serif;
    color: #3d2f24;
}
.location-sites-aside li, .location-food-aside li, .location-shopping-aside li {
    font: 400 1rem/1.5 Arial, sans-serif;
    color: #3d2f24;
    padding: .5rem;
}
.location-food {
    grid-column: span 12;
    grid-row: 7;
    margin: 1rem;
    padding: 2rem;
    text-align: center;
}
.location-food img {
    width: 15rem;
    height: auto;
    background-size: contain;
}
.location-food h2 {
    font: 900 3rem/1.5 Arial, sans-serif;
    color: #002426;
}
.location-food h3 {
    font: 700 1.5rem/1.5 Arial, sans-serif;
    color: #002426;
    text-align: left;
    background-color: #00a7cc;
    padding: 1rem;
    transition: transform .2s;
}
.location-food h3:hover {
    transform: scale(1.02);
}
.location-food p {
    text-align: left;
    display: none;
}
.location-shopping {
    grid-column: span 12;
    grid-row: 8;
    margin: 1rem;
    padding: 2rem;
    text-align: center;
}
.location-shopping img {
    width: 15rem;
    height: auto;
    background-size: contain;
}
.location-shopping h2 {
    font: 900 3rem/1.5 Arial, sans-serif;
    color: #002426;
}
.location-shopping h3 {
    font: 700 1.5rem/1.5 Arial, sans-serif;
    color: #002426;
    text-align: left;
    background-color: #00a7cc;
    padding: 1rem;
    transition: transform .2s;
}
.location-shopping h3:hover {
    transform: scale(1.02);
}
.location-shopping p {
    text-align: left;
    display: none;
}
@media only screen and (min-width: 40rem) {
    .location-sites {
        grid-column: span 12;
        grid-row: 6
    }
    .location-sites-aside {
        display: block;
        grid-column: span 12;
        grid-row: 7;
        height: 30rem;
    }
    .location-food {
        grid-column: span 12;
        grid-row: 8;
    }
    .location-food-aside {
        display: block;
        grid-column: span 12;
        grid-row: 9;
        height: 30rem;
    }
    .location-shopping {
        grid-column: span 12;
        grid-row: 10;
    }
    .location-shopping-aside {
        display: block;
        grid-column: span 12;
        grid-row: 11;
        height: 30rem;
    }
}
@media only screen and (min-width: 60rem) {
    .location-sites {
        grid-column: span 9;
        grid-row: 6;
    }
    .location-sites-aside {
        grid-column: span 3;
        grid-row: 6;
        margin-top: 19rem;
        margin-right: 2rem;
    }
    .location-food {
        grid-column: span 9;
        grid-row: 7;
    }
    .location-food-aside {
        grid-column: span 3;
        grid-row: 7;
        margin-top: 20rem;
        margin-right: 2rem;
    }
    .location-shopping {
        grid-column: span 9;
        grid-row: 8;
    }
    .location-shopping-aside {
        grid-column: span 3;
        grid-row: 8;
        margin-top: 20rem;
        margin-right: 2rem;
    }
}

/* Who and Why */

.who {
    grid-column: span 12;
    grid-row: 3;
    border-bottom: .25rem dashed #002426;
    margin: 1rem;
}
.who h2 {
    font: 900 2rem/1.5 Arial, sans-serif;
    color: #002426;
}
.why {
    grid-column: span 12;
    grid-row: 4;
    padding: 1rem;
    margin: 1rem;
}
.why h2 {
    font: 900 2rem/1.5 Arial, sans-serif;
    color: #002426;
}
.why h3 {
    font: 2rem/1.5 "Rock Salt", sans-serif;
    color: #002426;
}
.who-image {
    margin: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    height: 40rem;
    background-image: url(images/self.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 35% 65%;
}
.who-description {
    padding: 1rem;
    margin: 1rem;
}
@media only screen and (min-width: 60rem) {
    .who {
        display: grid;
    }
    .who-image {
        width: 30rem;
        height: auto;
        grid-column: span 6;
        grid-row: 1;
    }
    .who-description {
        grid-column: span 6;
        grid-row: 1;
        padding: 2rem;
    }
    .why {
        margin: 0px auto 0px;
    }
}

/* Adventure Excerpts */

.archives {
    grid-column: span 12;
    grid-row: 3;
    height: 11rem;
    overflow: scroll;
    margin: 1rem;
    padding: 2rem;
    background-color: #61bf25;
    border-radius: 1rem;
}
.archives h2 {
    font: 700 1.5rem/1.5 Arial, sans-serif;
    color: #3d2f24;
}
.archives ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.archives li {
    display: inline-block;
    padding: .5rem;
    font: 400 1rem/1.5 Arial, sans-serif;
    color: #3d2f24;
}
.archives a {
    text-decoration: none;
}
.blog {
    height: auto;
    grid-column: span 12;
    grid-row: 4;
    margin: 1rem;
    padding: 1rem;
    border: .25rem solid #00a7cc;
    border-radius: 1rem;
}
.blog-image {
    width: auto;
    height: 35rem;
    background-image: url(images/rainy-day.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 35% 65%;
    border-radius: 1rem;
}
.blog-description h3 {
    font: 700 1.5rem/1.5 "Rock Salt", sans-serif;
    color: #002426;
}

@media only screen and (min-width: 60rem) {
    .archives {
        grid-column: 1/6;
        grid-row: 3;
        height: 42vh;
        position: sticky;
        top: 1rem;
        overflow: scroll;
    }
    .archives ul {
        text-align: left;
    }
    .archives li {
        display: block;
    }
    .blog {
        display: grid;
        grid-column: 6/13;
        grid-row: 3;
    }
}

/* submit beta page */

.submit-beta {
    display: grid;
    grid-column: span 12;
    grid-row: 3;
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    font: 900 1.25rem/1.5 Arial, sans-serif;
    color: #002426;
}
.submit-beta h2 {
    margin: 0;
    grid-column: span 12;
    grid-row: 1;
    text-align: left;
}
.submit-beta p {
    margin-bottom: 3rem;
    grid-column: span 12;
    grid-row: 2;
    text-align: left;
}
.beta-form {
    grid-column: span 12;
    grid-row: 3;
    text-align: left;
}
.submit-beta h3 {
    grid-column: span 12;
    grid-row: 4;
    text-align: center;
    font: 900 2rem/1.5 Arial, sans-serif;
    color: #002426;
}
.beta-form label {
    font: 700 1.25rem/1.5 Arial, sans-serif;
    color: #ff5f2e;
}
.beta-form input {
    margin-top: .5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    width: 70%;
    height: auto;
    border-radius: .5rem;
    border: none;
}
.beta-form input::placeholder {
    font: 400 1rem/1.5 Arial, sans-serif;
    color: #00242690;
}
.beta-form select {
    margin-top: .5rem;
    margin-bottom: 1rem;
    padding: .75rem;
    width: auto;
    height: auto;
    border-radius: .5rem;
    border: none;
    font: 400 1rem/1.5 Arial, sans-serif;
    color: #00242690;
}
.beta-form textarea {
    margin-top: .5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    width: 100%;
    height: 15rem;
    border-radius: .5rem;
    border: none;
}
.beta-form textarea::placeholder {
    font: 400 1rem/1.5 Arial, sans-serif;
    color: #00242690;
}
.beta-form .submit {
    background-color: #ff5f2e;
    border: solid .2rem #002426;
    font: 700 1.25rem/1.5 Arial, sans-serif;
    color: #002426;
    width: auto;
    padding: .75rem;
}

/* footer */

footer {
    grid-column: span 12;
    grid-row: 12;
    margin: 0;
    padding: 2rem;
    border-top: .25rem solid #002426;
    text-align: center;
}
.footerlogo p {
    font: 1.75rem/2 "Lilita One", Arial, sans-serif;
    color: #002426;
}
.footernav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-bottom: 2rem;
    font: 700 1.5rem/2 Arial, sans-serif;
    color: #002426;
}
.footernav a {
    text-decoration: none;
    padding: .75rem;
    border-radius: 1rem;
}
.footernav a:link {
    text-decoration: none;
}
.footernav a:visited {
    color: #002426;
}
.footernav a:hover, .footernav a:focus {
    background-color: #ff5f2e;
}
.footernav a:active {
    background-color: #00a7cc;
}
@media only screen and (min-width: 40rem) {
    footer {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: minmax(5rem auto);
    }
    .footerlogo {
        grid-column: span 3;
        grid-row: 1;
        text-align: left;
    }
    .footernav {
        grid-column: span 9;
        grid-row: 1;
    }
    .footernav ul {
        float: right;
        text-align: left;
        padding-top: 2rem;
    }
    .footernav li {
        padding-left: 1rem;
    }
}