/*
STYLING
*/
#menuButton{
    margin-left: auto;
    margin-right: 2em;
    width: 10vh;
    cursor: pointer;
    border: none;
    background-color: #A1BDA3;
}
.burgerImage{
    max-width: 100%;
}
.hidden{
    display: none;
}
.hiddenList{
    display: none;
}


body{
    background-color: #214247;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-family: "EvenstarRegular", Georgia, 'Times New Roman', Times, serif;
    font-size: 1em;
}
strong{
    font-family: "EvenstarBlack";
}
bold{
    font-family: "EvenstarBlack";
}
header{
    background-color: #214247;
}
nav {
    background-color: #A1BDA3;
    color: #214247;
    font-family: "FlorishaBold", Georgia, 'Times New Roman', Times, serif;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    text-align: center;
}


.navigation-link a{
    font-family: "FlorishaBold";
    background-color: #a1BDA3;
    color:#214247;
    display: block;
    padding: .5em;
    text-decoration: none;
}
.navigation-link a:link{
    font-family: "FlorishaBold";
    background-color: #a1BDA3;
    color:#214247;
}
.navigation-link a:visited{
    font-family: "FlorishaBold";
    background-color: #a1BDA3;
    color:#214247;
}
.navigation-link a:hover{
    font-family: "FlorishaBold";
    background-color: #214247;
    color: #A1BDA3;

}
.navigation-link a:active{
    font-family: "FlorishaBold";
    background-color: #214247;
    color: #A1BDA3;
}

a:link{
    font-family: "NaveBlack";
    color:#214247;
}
a:visited{
    color:#214247;
}
a:hover{
    background-color: #214247;
    color: #A1BDA3;

}
a:active{
    background-color: #214247;
    color: #A1BDA3;
}
#logo-main{
   width: 100%;
   display: block;

}
#logo-link{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 25%;
}
#front-page-photo{
    width: 100%;
}
h1{
/*
    position: absolute;
    bottom: 5px;
    padding: .25em;
    left: 0px;
*/
    background-color: #214247;
    color: #A1BDA3;
    margin: 0;
}
main{
    background-color: #A1BDA3;
    color: #214247;
}
#badge-space{
  /*  background-color: #F3F0E8;
  */
}
#section-left{
}
#section-right{
}
footer{
    background-color: #214247;
    color: #A1BDA3;
}
footer a:link{
    color: #A1BDA3;
}
footer a:visited{
    color: #A1BDA3;
}
footer a:hover{
    background-color: #A1BDA3;
    color: #214247;

}
footer a:active{
    background-color: #A1BDA3;
    color: #214247;
}
footer img{
    height: 15em;
}


/*
LAYOUT
*/
main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax(100px, auto);


}
#photo-wrapper{
    grid-column: 1/4;
    grid-row: 1/3;
    z-index: 0;

}
#page-photo{
    max-width: 100%;
    display: block;
}
#page-title{
    grid-row: 2/3;
    grid-column: 1/3;
    z-index: 1;
    align-self: end;
    font-family: "FlorishaBold";
    margin-right: auto;
}
h1{
    padding: .25em;
    margin: 0;
}
h2{

    text-align: center;
    padding-bottom: .1em;
    border-bottom: #214247 solid 1px;
    margin-bottom: 0;
    font-family: "FlorishaRegular", Georgia, 'Times New Roman', Times, serif;
}
h3{
    padding-bottom: .1em;
    border-bottom: #214247 solid 1px;
    margin-bottom: 0; 
}
#introduction{
    grid-row: 3;
    grid-column: 1/4;
    text-align: left;
    padding-left: 2em;
    padding-right: 2em;
}
#badge-space{
    padding-top: 1em;
    padding-bottom: 1em;
    grid-row: 4;
    grid-column: 1/4;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.badge{
    flex-shrink: 0;
    align-self: center;
    max-width: 100%;
}
#badge-space .wpath{
    max-width: 200px;}
#break-image{
    grid-row: 6;
    grid-column: 1/4;
}
#break-image-short{
    grid-row: 6;
    grid-column: 1/4;
}
#break-image-short img{
    max-width: 100%;
    display: block;
}
#break-image img{
    max-width: 100%;
    display: block;
}
#column-content{
    grid-row: 5;
    grid-column: 1/4;
    
}
footer{
    grid-row: 7;
    grid-column: 1/4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#footer-logo{
    margin-top: auto;
    margin-bottom: auto;
}
#disclaimer{
    margin-left: 2em;
    margin-right: 2em;
}
#contact{
    margin-top: auto;
    margin-bottom: auto;
    font-family: "FlorishaRegular", Georgia, 'Times New Roman', Times, serif;
}
#contact-label{
    font-size: 2em;
    border-bottom:#A1BDA3 solid 2px;
    padding-bottom: 0;
    font-family: "NaveBlack", Georgia, 'Times New Roman', Times, serif;
}


#column-content{
    padding-left: 2em;
    padding-right: 2em;
    text-align: left;
}


@media screen and (min-width: 800px){
    body{
        font-size: 1.2em;
    }
    #introduction p{
        padding-left: 1em;
        padding-right: 1em;
    }
    #column-content{
        padding-left: 2em;
        padding-right: 2em;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 3em;
        text-align: left;
        column-gap: 0;
}
#introduction {
    grid-column: 2/4;
    grid-row: 3;
}
#badge-space{
    padding-top: 1em;
    padding-bottom: 1em;
    grid-column: 1/2;
    grid-row: 3;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
#badge-space .wpath{
    max-width: 300px;}
#break-image{
    display:block;
    visibility:visible;
    grid-row: 4;
    grid-column: 1/4;
}

#section-left{
    border-right: #214247 solid 1px;
    padding-right: 2em;
}
#section-right{
    padding-left: 2em;
}
}

@media screen and (min-width: 1000px){
#listLink{
    display: flex;
    flex-direction: row;
}
body{
    font-size: 1.4em;
}
#menuButton{
    display: none;
}

#introduction {
    grid-column: 2/4;
    grid-row: 3;
}
#introduction p{
    padding-left: 2em;
    padding-right: 2em;
}
#badge-space{
    padding-top: 1em;
    padding-bottom: 1em;
    grid-column: 1/2;
    grid-row: 3;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
#badge-space .wpath{
    max-width: 300px;}
#badge-space img{
    max-width: 100%;
}
#break-image{
    display:block;
    visibility:visible;
    grid-row: 4;
    grid-column: 1/4;
}
 #column-content{
    padding-left: 2em;
    padding-right: 2em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 3em;
    text-align: left;
    column-gap: 0;
}
nav{
    flex-direction: row;

}
#section-left{
    border-right: #214247 solid 1px;
    padding-right: 2em;
}
#section-right{
    padding-left: 2em;
}
}