/* GENERAL */
html{
    font-size: 1rem;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #171a1a;     
}


html, body{
    margin:0;
}

button{
    margin-top: 0.1em;
background-color: white;
border:none;
}

body{
    background-color: #fff;
    display:flex;
    flex-direction: column;
    min-height:100vh;
}

h1,h2{
    color:#016837;
    text-align: center;
    font-family:"Ubuntu", sans-serif;
}
h3{
    color:#016837;
    font-family: "Ubuntu", sans-serf;
    font-style: italic;
    font-weight: 300;
    text-align:left;
    text-decoration: solid;
    text-decoration-color: #016837;
}

.location{
font-style: italic;
font-weight:100;
}

#notice{
text-align: center;
align-self: center;
font-weight:400;
}

.info-box{
    background-color: #F6F5F2;
    border-radius: 12px;
    margin-left: 6em;
    margin-right: 6em;
    margin-bottom: 1em;
    padding-bottom: 1em;
    padding-top:1em;
}
.info-box {
    text-align: center;
}
.info-box ul{
    text-align: left;
}
.info-box a{
    text-align: center;
}

#center{
    text-align: center;
}

.emoji{
text-align: left;
list-style-type: none;
margin-bottom:2em;

}

.asterisk{
    color:#E63F1E;
}
#nested{
    margin:auto;
}

#logo{
    object-fit: contain;
    /*max-height: 5em;*/
    display: block;
    width: 50%;
    margin:1em auto;
}

.auximg{
    display:block;
    max-width:55%;
    margin:1.5em auto;
}

/* NAVIGATION BAR */
nav {
    background-color:#F6F5F2;
}

nav ul{
    text-align:center;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:2em;
    padding-top: .2em;
    padding-bottom: .2em;
}
nav ul li{
    color: #016837;
    display:inline;
    padding-left: 1em;
    padding-right: 1em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    transition-duration: 0.4s;
}

nav ul li:hover{
background-color: #dddcd9;
color: white;
}

nav ul li a{
   color:#016837;
   text-decoration: none;

}

/* FOOTER */
footer{
    font-size: 1.25em;
    margin-top:5%;
    margin-bottom:0;
    background-color: #F6F5F2;
    padding-top:0.5em;
    padding-bottom:1.4em;
}

footer p, footer a, footer span{
    margin-bottom:0;
    padding-top:0.2em;
    padding-bottom:0em;
    font-weight: 500;
    text-align: center;
    list-style-type: none;
    padding-inline-start: 0px;
    text-decoration: none;

footer a{
        text-decoration:overline;
    }
}

footer a:link{
    color:#26913d;
}

footer p{
    margin-left: 1.1%;
    margin-right:1.1%;
}

footer ul{
    list-style-type:none;
    padding:0;
    margin-left:1.25em;
    padding-right:1.25em;
}
footer li{
    display:inline;
    padding-right:1.25em;
    padding-left:1.25em;
}

/*MAIN*/
main{
   /* margin-top:2%; */
    flex-grow:1;
}

main p, h3{
    margin: 1% 14em;
}

main ul, main ol{
    margin: auto 20%;
}
main p {
    text-indent: 3%;
}

main a:link{
    color:#26913d;
}
main a:visited{
    color:#26913d;
}

/*TEAM*/
.team{
    margin: 0 20%;
    width:auto;
    display: flex;
    flex-direction: column;
}

.team p{
    margin: auto;
    overflow: auto;
}

.team_container{
    height:auto;
    margin-bottom:3em;
    text-align:left;
}

.team_content{
overflow:auto;
}

.team_content h3{
    color: #016837;
    margin: 1% 0%;
}
.teamimg{
    width:22%;
    float:left;
    margin-right: 2em;
}

.teamimg img{
    max-width: 100%;
    object-fit: cover;
    width:200px;
    height:200px;
}

.team_content h4{
    margin-top: 0.1em;
}

.team h4{
    color: #171a1a;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: italic;
}
.team h3{
    font-family:"Ubuntu", sans-serif;
}

#board{
    margin-bottom: 1.5em;
}

/* GALLERY */
/* .item { 
  background-color: rgb(182, 204, 255);
    border-style:solid;
    border-color: #000;
} */

.item > img {
  height: 100%;
    width: 100%;
    object-fit:contain;
}

/*.container {
    align-items: stretch;
    justify-content: stretch;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    display: grid;
    height:auto;
    grid-template-rows: repeat(12, 1fr);
    grid-template-columns: repeat(7,1fr);

    row-gap:1.25%;
    column-gap:1.25%;

}*/

.container {
    align-items: stretch;
    justify-content: stretch;
    margin-left: 4em;
    margin-right: 4em;
    margin-top: 0em;
    display: grid;
    height:auto;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(12, 1fr);
/*    grid-template-rows: repeat(11, 1fr); 
    grid-template-columns: repeat(12,1fr); */

    row-gap:1.25%;
    column-gap:1.25%;

}

/*THREE COLUMN GALLERY
HORIZONTAL
.item-1 { grid-area: 1 / 1 / 4 / 5; }
.item-2 { grid-area: 4 / 1 / 7 / 5; }
.item-3 { grid-area: 7 / 1 / 10 / 5; }
.item-4 { grid-area: 10 / 1 / 13 / 5; }
.item-5 { grid-area: 1 / 8 / 4 / 12; }
.item-6 { grid-area: 4 / 8 / 7 / 12; }
.item-7 { grid-area: 7 / 8 / 10 / 12; }
.item-8 { grid-area: 10 / 8 / 13 / 12; }
.item-9 { grid-area: 1 / 5 / 5 / 8; }
.item-10 { grid-area: 5 / 5 / 9 / 8; }
.item-11 { grid-area: 9 / 5 / 13 / 8; }
*/

/*/two column horiz*/
.item-1 { grid-area: 1 / 1 / 4 / 5; }
.item-2 { grid-area: 1 / 5 / 4 / 9; }
.item-3 { grid-area: 4 / 1 / 7 / 5; }
.item-4 { grid-area: 4 / 5 / 7 / 9; }
.item-5 { grid-area: 7 / 1 / 10 / 5; }
.item-6 { grid-area: 7 / 5 / 10 / 9; }
.item-7 { grid-area: 10 / 1 / 13 / 5; }
.item-8 { grid-area: 10 / 5 / 13 / 9; }






/* TWO COLUMN GALLERY vertical and horizontal */
/*
.item-1 {grid-area: 1 / 1 / 4 / 5;}
.item-2 {grid-area: 1 / 5 / 5 / 8;}
.item-3 {grid-area: 4 / 1 / 7 / 5;}
.item-4 {grid-area: 7 / 1 / 10 / 5;}
.item-5 {grid-area: 5 / 5 / 9 / 8;}
.item-6 {grid-area: 9 / 5 / 13 / 8;}
.item-7 {grid-area: 10 / 1 / 13 / 5;}
*/

/* MEDIA QUERY */
@media screen and (min-width: 601px) and (max-width: 1270px) {
    nav ul li{
        padding-left:0.5em;
        padding-right:0.5em;
    }
    .team_container{
        height:auto;
        margin-bottom:5em;
    }

    .team p{
        margin: auto;
    }

    .team{
        margin: 0 10%;
    }
    
    .teamimg{
        float:none;
    }

    .teamimg img{
    max-width: 20em;
    object-fit: cover;
    width: auto;
    height: auto;
    margin: 0 0 2em 135%;
    }
}
@media only  screen and (max-width: 600px) {
    .team{
        margin: 0 10%;
    }
    .team p{
        margin:0 0 0 360px;
        overflow: visible;
    }
    .teamimg{
        float:none;
    }
    .team_container{
        height:auto;
    }

    .teamimg img{
        max-width: auto;
        object-fit: cover;
        width: auto;
        height: auto;
        margin: 0 0 2em 135%;
        }
}