* {
    box-sizing: border-box;
}

.page {
    height: 100vh;
    width: 75vw;
    clear: both;
}

br {
    line-height: 5vh;
 }

.dropdown-toggle:after { content: none }

h1, h2, h4, h5, h6, p,
.about-page-text {
    font-family: 'Roboto:300', serif;
}

a, .scroll-tag,
.copyright {
    font-family: 'Pacifico', sans-serif;
}

.copyright {
    position: absolute;
    bottom: 0;
    left: 2vh; 
    right: 2vh;
    display: block;
    font-size: 3vh;
}

.nav {
    position: absolute;
    top: 15vh; 
    bottom: 25vh; 
    left: 0vh; 
    right: 0vh;
    list-style: none;
    text-align: center;
}

h1 {
    font-size: 4vw;
} 
h2 {
    font-size: 3vw;
}
h4 {
    font-size: 2vw;
}
.scroll-tag {
    font-size: 4vh;
}

.row,
.container {
    width: 65vw;
    clear: both;
}

.container {
    margin-left: 19%;
}

.location,
.school,
.duration {
    float: left;
}

p, .job-title, .duration {
    clear: both;
}

.content-column {
    position: fixed;
    top:0;
    left:0;
    width: 17vw;
    height: 100vh;
    background-image: url("../images/offwhite.jpg");
    background-size: 100vh 100vw;
    z-index: 0;
}

.dropdown {
    position: fixed;
    display: none;
    vertical-align: right;
    right: 12vw;
    top: 3vh;
    z-index: 1;
}

a {
    color: black;
}

.page-control {
    background-color: transparent !important;
}

.highlight-control.active:focus,
.highlight-control:hover  {
    color: white !important;
}


@media (max-aspect-ratio: 5/3) and (min-aspect-ratio: 3/5) {
    .content-column {
        display: none; 
    }

    .dropdown{
        display: inline-block;
    }

    .highlight-control.active:focus,
    .highlight-control:hover {
        color: gray !important;
    }

    .page {
        height: 100%; 
        width: 88vw;
    }

    .scroll-tag {
        font-size: 2vh;
    }

    .container {
        margin-left: 3vw;
    }

}

@media screen and (max-height : 515px) {
    .content-column {
        display: none; 
    }

    .dropdown{
        display: inline-block;
    }

    .highlight-control.active:focus,
    .highlight-control:hover {
        color: gray !important;
    }

    .page {
        height: 100%; 
        width: 88vw;
    }

    .row,
    .container {
        width: 94vw;
        clear: both;
    }

    .container {
        margin-left: 3vw;
    }

}

@media screen and (max-width: 767px) {
    .content-column {
        display: none; 
    }

    .dropdown {
        display: inline-block;
    }

    .highlight-control.active:focus,
    .highlight-control:hover {
        color: gray !important;
    }

    .container {
        margin-left: 3vw;
    }

    .page {
        height: 100%;     
        width: 86vw;
    }

    .nav {
        top: 10vh; 
        bottom: 25vh; 
    }
    
    h1 {
        font-size: 6vw;
    }
    h2 {
        font-size: 5vw;
    }
    h4 {
        font-size: 4vw;
    }
    .scroll-tag {
        font-size: 18px;
    }
    
    .g-recaptcha {
        transform: scale(0.70);
        -webkit-transform: scale(0.70);
        transform-origin: 0 0;
        -webkit-transform-origin:0 0;
    }
}