@font-face {
  font-family: 'Roboto-Regular';
  src:  url('/static/webfonts/Roboto-Regular.woff2') format('woff2'),
        url('/static/webfonts/Roboto-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto-Light';
  src:  url('/static/webfonts/Roboto-Light.woff2') format('woff2'),
        url('/static/webfonts/Roboto-Light.woff') format('woff');
}

body {
    font-size: 1vw;
    font-family: 'Roboto-Light', 'Arial', sans-serif;
    margin: 50px 25px;
    color: #5d5d5d;
}

.navbar-nav {
    padding-top: 10px;
}
.navbar-nav .active a{
    color: #7f5e3c;    
}

a {
    color: #b78c66;
    text-decoration: none;
}

a:hover {
    color: #7f5e3c;
}

th, td {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}

header, footer, div.page {
    width: 80%;
    margin: 0 auto;
    background: #ececec;
    padding: 20px 30px;
    color: #6c7d8c;
}

div.page h1, div.page h2, div.page h3, div.page h4, div.page h5, div.page h6{
    color: #5d5d5d;
}

header, footer {
    color: #b0b0b0;
}

header {
    font-size: 1vw;
}    
footer {
    font-size: 0.75vw;
}

header h1 {
    color: #b0b0b0;
    margin: 0;
    font-weight: bold;
    font-size: 42px;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 8px 0 0;
    padding: 0;
}

div.page {
    background: #fafafa;
}

@media (max-width: 768px){
    body {
        font-size: 4vw;
    }
    header {
        font-size: 3vw;
    }    
    footer {
        font-size: 2vw;
    }
}

@media (min-width: 769px) and (max-width: 1024px){
    body {
        font-size: 2.5vw;
    }
    header {
        font-size: 2vw;
    }
    footer {
        font-size: 1.75vw;
    }
}