/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/

@media (max-width: 767px) {

    #title { display:none }
    #logo { 
        display: block;
        height: 3em; 
        padding:0;
        margin: 0.5em 0;
    }

    #nav {
        clear: both;
        padding: 0;
    }
    #nav ul {
        padding-bottom: 1em;
    }
    #nav ul li {
        display: block;
        margin-left: 0;
        text-align: center;
    }
    #nav ul li a {
        display: block;
        padding: 0.5em 0;
    }

    .js #nav-toggle {
        display: block;
        float: right;
        width: 2em;
        margin: 0.5em 0;
        font-size: 1.5rem;
        line-height: 2em;
        text-align: center;
        cursor: pointer;
    }
    .js #nav-toggle > * { vertical-align: middle;  }

    #footer p { padding: 1em 0; }
    #footer .social { padding: 0.5em 0 0.5em 1em; }


    /* full width media */
    .fullwidth {
        height:70vh;
        background-size: auto 150%;
    }
    .fullwidth h1{
        width:100%;
        font-size: 4rem;
    }
    .container {
        width:100%;
        padding: 0 20px;
    }
    .mediaoverlay {
        left:50%;
        transform: translate(-50%,-40%);
        -webkit-transform: translate(-50%,-40%);
    }
    .mediaoverlay video{
        width:auto;
        height:100%;
        border:1px solid red;
    }

    /* image layout */

    .small{
        width:100%;
    }


    /* grid layout */

    .grid2, .grid2 ul{
        grid-template-columns: repeat(1, 1fr);
    }
    .grid3, .grid3 ul{
        grid-template-columns: repeat(1, 1fr);
    }

}

@media (min-width: 768px) and (max-width: 1200px) {

    .fullwidth h1{
        width:100%;
        font-size: 4rem;
    }

    .grid3, .grid3 ul{
        grid-template-columns: repeat(2, 1fr);
    }
}