.bgimage {
    display: grid;
    background-image: url(../images/sunset.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vw;
    max-height: 500px;
    width: 100%;
}

.mainnav {
    text-align: right;
    color: white;
    padding-top: 30%;
    padding-right: 10%;
    font-size: 24px;
    font-family: 'Libre Franklin', sans-serif;
}

.mainnav:link {
    color: white;

}

.bgimage a:link {
    color: white;
}

.bgimage a:visited {
    color: white;
}

.bgimage a:hover {
    color: white;
}

h1 {
    color: white;
    padding-left: 20%;
    font-size: 5vw;
    padding-top: 2%;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: bold;

}

body {
    background-color: rgb(51, 37, 39);
}

p {
    font-size: 17px;
    color: white;
    width: 70%;
    padding-left: 10%;
    font-family: 'Libre Franklin', sans-serif;
}



.content {
    padding-left: 5%;
    padding-right: 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    padding-top: 8%;


}

#biotext:nth-child(2) {
    order: -1;
    padding-right: 5%;

}

#biotext:nth-child(1) {
    order: 1;
    width: 100%;


}

.thumbnail1 {
    background-color: rgb(51, 37, 39);
    height: 200px;
    width: 200px;
    position: relative;
    background-size: cover;
    display: grid;
    background-position: center center;
    background-repeat: no-repeat;
}



.thumbnail1 img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 21vw;
    width: 21vw;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    justify-content: center;


}

.thumbnail1 img.thumb {
    width: 100%;
    height: auto;
    justify-content: center;

}

.column {
    float: left;
    width: 33.33%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}







.gallery {
    display: grid;
    grid-template-areas: 1fr 1fr 1fr;
    justify-content: center;
    grid-column-gap: 10%;
    padding-top: 5%;

}

.History {
    padding-left: 5%;
    padding-right: 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    padding-top: 8%;

}









h2 {
    text-align: center;
    color: white;
    font-size: 4vw;
    font-family: 'Libre Franklin', sans-serif;
}

.portrait {
    width: 50vw;
    width: 100%;
    padding-bottom: 10%;
    justify-content: center;


}


@media (min-width: 800px) {

    .thumbnail1 {
        background-color: rgb(51, 37, 39);
        height: 500px;
        width: 500px;
        position: relative;
        background-size: cover;
        display: grid;
        background-position: center center;
        background-repeat: no-repeat;
    }



    .thumbnail1 img {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 21vw;
        width: 21vw;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        justify-content: center;


    }

    .thumbnail1 img.thumb {
        width: 100%;
        height: auto;
        justify-content: center;
        margin: 10%;
    }

    .column {
        float: left;
        width: 33.33%;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }







    .gallery {
        display: grid;
        grid-template-areas: 1fr 1fr 1fr;
        justify-content: center;
        grid-column-gap: 10%;
        padding-top: 5%;

    }

    .portrait {
        width: 40vw;

    }

    .bgimage {
        display: grid;
        background-image: url(/images/sunset.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 50vw;
        width: 100%;


        max-height: 650px;
    }



    h1 {
        color: white;
        padding-left: 20%;
        font-size: 3vw;
        padding-top: 2%;
        font-family: 'Libre Franklin', sans-serif;



    }

    .mainnav {
        text-align: right;
        color: white;
        padding-top: 20%;
        padding-right: 10%;
        font-size: 24px;
        font-family: 'Libre Franklin', sans-serif;

    }



}

@media (min-width: 1000px) {

    p {
        font-size: 24px;
        color: white;
        width: 70%;
        padding-left: 10%;
        font-family: 'Libre Franklin', sans-serif;
    }

    .portrait {
        width: 25vw;
        height: 30vw;
        justify-content: center;

    }


}
