body, html {
    height: 100%;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
}

/*****************************************
 ** NAVBAR **
 *****************************************/

/* Navbar logo */
.nav-logo {
    position:relative; 
    padding-left: 1%; 
    padding-right: 1%;
    color: #fff;
    display: inline-block;
    font-size: 2.1rem;
    white-space: nowrap;
}

/*****************************************
 ** WELCOME SCREEN **
 *****************************************/

/* Welcome page */
.welcome {
    /* The image used */
    background-image: url("../img/welcome.png");

    /* Center and scale the image nicely */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    /* Height adjust for navbar */
    height: -moz-calc(100vh - 64px); /* Firefox */
    height: -webkit-calc(100vh - 64px); /* Chrome, Safari */
    height: calc(100vh - 64px);
}

@media only screen and (max-width: 992px) {
    .welcome {
        background-attachment: scroll !important;
    }
}

/* Centers text div over canvas */
.section.center-logo {
    position: absolute; 
    z-index: 100;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

/* font sizing for the logo itself */
.welcome-logo {
    font-family: Helvetica;
    font-weight: 400;  
    font-size: 6vm; /* IE */
    font-size: 6vmax;
}

/*****************************************
 ** About **
 *****************************************/

#about {
    padding-top: 5vh;
    padding-bottom: 0vh;    
}

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}