.hero-full-screen {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.25) 50%,rgba(172,208,13,1) 100%), url("../i/boulder-colorado2.jpg") center center no-repeat ;
    background: -webkit-linear-gradient(to bottom, rgba(0,0,0,0.25) 50%,rgba(172,208,13,1) 100%), url("../i/boulder-colorado2.jpg") center center no-repeat ;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 50%,rgba(172,208,13,1) 100%), url("../i/boulder-colorado2.jpg") center center no-repeat;
    background-size: cover;
    background-position-x: 75%;
}
.banner {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bfd255+0,8eb92a+25,72aa00+50,9ecb2d+75,bfd255+100&0.5+0,1+25,1+75,0.5+100 */
    background: -moz-linear-gradient(left, rgba(191,210,85,0.5) 0%, rgba(142,185,42,1) 25%, rgba(114,170,0,1) 50%, rgba(158,203,45,1) 75%, rgba(191,210,85,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(191,210,85,0.5) 0%,rgba(142,185,42,1) 25%,rgba(114,170,0,1) 50%,rgba(158,203,45,1) 75%,rgba(191,210,85,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(191,210,85,0.5) 0%,rgba(142,185,42,1) 25%,rgba(114,170,0,1) 50%,rgba(158,203,45,1) 75%,rgba(191,210,85,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80bfd255', endColorstr='#80bfd255',GradientType=1 ); /* IE6-9 */
    width: 100vw;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: justify;
    justify-content: center;
}
.hero-full-screen .middle-content-section {
    justify-self: flex-start;
    text-align: center;
    color: #fefefe;
}
.hero-full-screen .upper-content-section {
    text-align: center;
    color: #fefefe;
}

.hero-full-screen .upper-content-section h1 {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 400;
    /*
    -webkit-transition: width 1000ms ease;
    -moz-transition: width 1000ms ease;
    -ms-transition: width 1000ms ease;
    -o-transition: width 1000ms ease;
    transition: width 1000ms ease;
    */
    /* Typing Effect */
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: typing 10.5s infinite ease-in;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
/* The typing effect */
@keyframes typing {
    0% {
        width: 0;
    }
    30% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

.hero-full-screen .top-content-section {
    width: 100%;
}
.hero-full-screen .bottom-content-section {
    padding: 1rem 1rem 0;
}

.hero-full-screen .bottom-content-section svg {
    height: 3.75rem;
    width: 3.75rem;
    fill: #fefefe;
}

.hero-full-screen .top-bar {
    background: transparent;
}

.hero-full-screen .top-bar .menu {
    background: transparent;
}

.hero-full-screen .top-bar .menu-text {
    color: #fefefe;
}

.hero-full-screen .top-bar .menu li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.hero-full-screen .top-bar .menu a {
    color: #fefefe;
    font-weight: bold;
}