@font-face {
    font-family: "Noto Sans";
    src: url("fonts/Noto_Sans/NotoSans-Regular.ttf");
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/Noto_Sans/NotoSans-Bold.ttf");
    font-weight: bold;
}

html {
    font-family: "Noto Sans", "Arial", sans-serif;
    margin: 0 auto;
    /*min-width: 100px;*/
    text-align: center;
}

.header {
    /*margin: 0 auto;*/
    /*background-image: url("drumdown_cropped2_web.jpg");*/
    /*color: white;*/

    /*max-width: 550px;*/
    /*display: block;*/
    /*margin: auto;*/

    display: none;
}

.subheading {
    margin-top: -1.5%;

    /*margin-top: -3.5%;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}

#main {
    padding-top: 1%;
    width: 100%;
    max-width: 888px;
    margin: 0 auto;
    text-align: left;
    font-size: 16px;
    padding-bottom: 1%;
}

/* Horizontal/desktop */
@media (min-width: 888px) {
    .projects_row {
        display: flex;
        text-align: center;
        margin-bottom: 10%;
        /*font-size: 14px;*/
    }

    .thumbnail_container {
        position: relative;
        /*float: left;*/
        width: 50%;
        max-width: 200px;
        height: auto;
        max-height: 200px;
        margin-right: 2.5%;

        color: white;

        /*border-style: solid;*/
        /*border-width: 2px;*/
        /*border-color: #0064C9;*/
    }

    .thumbnail_overlay_info {
        font-size: 14px;
    }
}

@media (hover: hover)
{
    .thumbnail_overlay {
        opacity: 0;
    }
}

/* Vertical/mobile */
@media (min-width: 320px) and (max-width: 887px) {
    #main {
        width: 75%;
        font-size: 110%;
    }

    .projects_row {
        text-align: center;
    }

    .thumbnail_container {
        position: relative;
        text-align: center;
        margin: 5% auto 100px;
        /*margin-bottom: 20vw;*/
        /*float: left;*/
        width: 75%;
        max-width: 220px;
        height: auto;
        max-height: 220px;
        /*margin-right: 2.5%;*/

        color: white;

        /*border-style: solid;*/
        /*border-width: 2px;*/
        /*border-color: #0064C9;*/
    }

    .thumbnail_image {
        width: 220px;
    }

    .thumbnail_overlay_info {
        font-size: 80%; /* 1 / 110; also 15px */
    }

    .thumbnail_title {
        padding-bottom: 5%;
    }
}

@media (hover: none)
{
    .thumbnail_overlay {
        opacity: 1;
    }

/*    .thumbnail_overlay_info {
        font-size: 15px;
    }*/
}

/* ---------------- */

p {
    padding-top: 1%;
}

/*span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}*/

a {
    color: #00468B;
    /*color: #FF0000;*/
    text-decoration: none;
}

a:hover {
    color: #0064C9;
    /*color: #FF7777;*/
}

a.white {
    color: white;
}

a.white:hover {
    /*color: #DDEEFF;*/
    /*font-size: 108%;*/
}

.pic {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    text-align: center;
}

.logo {
    max-width: 256px; /* 40% */
    height: auto;
    display: block;
    margin: auto;
    text-align: center;
    border-radius: 50%;
    border-width: 3px;
    border-color: #00468B;
    border-style: solid;
}

.logo:hover
{
        border-color: #0064C9;
}

.logo_old {
    max-width: 50%;
    height: auto;
    display: block;
    margin: auto;
    text-align: center;
}

/*.pic_container {
    background-color: black;
    height: auto;
}*/

.thumbnail_image {
    /*display: block;*/
    max-width: 100%;
    height: auto;
}

.thumbnail_overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*max-height: 100%;*/
    /*max-width: 100%;*/
    max-width: 100%;
    /*height: auto;*/
    /*opacity: 0;*/
    /*background-color: #00468B;*/
    /*background-color: black;*/
    background: rgba(0, 0, 0, 0.7);
    /*overflow: ;*/
    z-index: 1;
}

.thumbnail_overlay, .thumbnail_image, .thumbnail_overlay_content, .thumbnail_title, .thumbnail_desc {
    transition: .5s ease;
}

.thumbnail_container:hover .thumbnail_overlay {
    opacity: 1;
}

/*.thumbnail_container:hover .thumbnail_title {
    color: #0064C9;
}*/

.thumbnail_container:hover .thumbnail_desc {
    color: #0064C9;
}


/*.thumbnail_container:hover .thumbnail_image {
    opacity: 0.5;
}*/

thumbnail_container>a {
    color: white;
}

.thumbnail_overlay_title, .thumbnail_overlay_content, .thumbnail_overlay_info {
    color: white;
    text-align: center;
}

.thumbnail_overlay_title {
    font-weight: bold;
    font-size: 100%;
    margin-top: 30%;
    margin-left: 5%;
    margin-right: 5%;
}

.thumbnail_overlay_content {
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 90%;
}

.thumbnail_overlay_info {
    position: relative;
    vertical-align: middle;
    margin-top: 20%;
    /*height: 100%;*/
    margin-left: 5%;
    margin-right: 5%;
    /*font-size: 14px;*/
}

.thumbnail_overlay_info>a {
    color: white;
}

.thumbnail_overlay_info>a:hover {
    font-weight: bold;
}


/*.thumbnail_title, .thumbnail_desc {
    color: black;
}*/

/*.thumbnail_title:hover {
    color: white;
    background: #00468B;
}*/

.thumbnail_title>a {
    /*color: white;*/
}


.thumbnail_desc {
    font-size: 90%;
    text-align: center;
    padding-top: 2.5%;
    padding-bottom: 5%;
}

.project_year, .project_year:hover {
    color: #000000;
}

h1, h2 {
    text-align: center;
}

h2 {
    margin-top: -2%;
}


/*========*/

.thumbnail_combined {
    width: 50%;
    height: 50%;
    position: relative;
}

.thumbnail_combined:hover {
    opacity: 0.75;
    transition: .5s ease;
}

.thumbnail_combined_overlay_title {
    font-weight: bold;
    font-size: 100%;
    margin-top: 50%;
}

.thumbnail_combined_overlay_content {
    margin-top: 5%;
    font-size: 90%;
}

#thumbnail_runawayreverie {
    background-image: url("thumbnails/runaway_reverie.png");
}

#thumbnail_yi {
    background-image: url("thumbnails/yi.png");
}

.thumbnail_title {
    position: relative;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    /*vertical-align: middle;*/
    padding-top: 5%;
    /*padding-bottom: 1%;*/
    background: #003366;
    /*color: white;*/
    z-index: 2;
    height: 50px;
}

.centered
{
    text-align: center;
}


/*========*/