html, body{
    max-width:100%;
    overflow-x:hidden;
    height:100%;
}
body{
    margin:0px;
}

header{
    height:100px;
    width:100vw;
    position:absolute;
    top:0px;
    left:0px;
    background-color: #12761C;
    z-index:2;
}

.logo{
    float:left;
    height:80px;
    width:80px;
    margin-left:10px;
    margin-top:10px;
}

.navButton{
    float:right;
    font-size:24px;
    color:white;
    margin-top:30px;
    margin-left:5vw;
    transition:0.2s;
}
.navButton:hover{
    transform:scale(1.1);
}
.selectedNavBar{
    border-bottom:1px solid white;
}

.donateButton{
    float:right;
    font-size:24px;
    margin-top:22px;
    margin-left:5vw;
    margin-right:50px;
    background-color:#286fc1;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    border-radius:10px;
    color:white;
}
h1{
    font-size:60px;
    font-weight:bold;
    text-align:center;
}

.hamburger{
    width:60px;
    height:60px;
    margin-top:20px;
    margin-right:20px;
    float:right;
}

.openableTab{
    width:100%;
    height:100%;
    background-color:#12761C;
    position:absolute;
    top:0px;
    left:0px;
    z-index:5;
}
.x{
    float:right;
    width:100px;
    height:100px;
    color:white;
    font-size:100px;
}
.link{
    color:white;
    margin-left:25vw;
    display:block;
    font-size:40px;
    text-decoration: underline;
    text-decoration-color:white;
}
.option{
    font-size:25px!important;
    text-indent: 10vw;
}

button{
    background-color:#12761C;
    border:none;
    margin-top:20px;
    margin-right:20px;
}

#tripPlanTitle{
    width:50%;
    margin-left:auto;
    margin-right:auto;
}

#homeContent{
    position:absolute;
    top:100px;
    left:0px;
    width:100%;
    background-image: url("https://images.ctfassets.net/itrs3p223g0s/6wuJtSFTIeTJTVPY521nDV/5ba03429b91bcfbd2bf76be6b77d3db8/national-parks-canada-british-columbia-yoho-national-park-mountains_1920x1280.jpg");
    background-size:100% 100%;
    background-repeat: no-repeat;
    height:88%;
}
#learnMore{
    background-color:#ACF3F8;
    width:200px;
    height:8%;
    border-radius:20px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
#learnMore:hover{
    transform:translateY(-3px);
    box-shadow: 0 1.5rem 3rem #0003
}
#learnMore:active{
    transform:scale(0.95);
}

.footer{
    background-color:lightgray;
    height:20%;
    width:100%;
    margin-top:200px;
}
.socials{
    position:absolute;
    top:30px;
    right:5%;
    width:35%;
}
.twitter, .facebook, .instagram, .youtube{
    float:right;
    margin-left:5%;
    margin-bottom:5%;
}
.twitter{
    width:45px;
    height:45px;
}
.facebook{
    width:60px;
    height:61px;
    margin-top:-8px;
    margin-right:-10px;
}
.instagram{
    width:65px;
    height:50px;
    margin-top:-2px;
}
.youtube{
    width:45px;
    height:45px;
}

.email{
    margin-left:10%;
    border-radius:10px;
    border:none;
    height:30px;
    width:170px;
}

.submit{
    border-radius:10px;
    border:none;
    height:30px;
    background-color:white;
}
.submit:hover{
    background-color:rgb(227, 227, 227);
}

#iframe{
    width:60%;
    height:3820px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

#tripContent{
    margin-left:10%;
    margin-right:20%;
}

.parkContent{
    background-color:#5B84D3;
    width:110%;
    height:300px;
    border-bottom:1px solid black;
}

ol > a{
    color:black;
    text-decoration: none;
}
.dropdown{
    border-radius:5px;
    background-color:#5B84D3;
    font-size:0.8em;
    text-align:center;
}
.dropdownContainer{
    padding-bottom:10px;
    border-radius:5px;
}
.dropdownContainer:hover{
    background-color:#265fd0;
}
#timeline-title{
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    width:80%;
    font-family:Verdana, sans-serif;
}

#leftContainer{
    width:40%;
    margin-left:10%;
    position:relative;
    display:inline-block;
    height:300%;
}
#rightContainer{
    width:39%;
    margin-right:10%;
    position:relative;
    display:inline-block;
    border-left:solid 1px gray;
}
.timelineContainer{
    width:100%;
    padding-left:10px;
    margin-bottom:250px;
    font-family:Verdana, sans-serif;
}
.date{
    color:gray;
}
.timelineTitle{
    text-align:center;
    width:100%;
}
.timelineDesc{
    text-align:center;
    margin-right:20px;
}
#rightContainer > .timelineContainer{
    position:relative;
    top:300px;
}
.timelineImage{
    width:95%;
}