nav.container {
    height: 120px;
    padding: 30px 15px 0 15px;        
}

header.jumbotron {
    position: relative;
    background-image: url('images/header-text-to-speech.jpg');
    background-size: cover;    
    background-repeat: no-repeat;
    height: 500px;
}

header div.description {
    position: absolute;
    top: 0;
    left: 0; 
    margin: 20px 20px 0px;     
}

.overlay {
    position: absolute;
    left: 0;    
    top: 0;    
    height: 100%;
    width: 100%;
    background-image: linear-gradient(178.3deg, rgba(255, 216, 10, 1), rgba(255, 216, 10, .25));
}

section {
    margin-top: 60px;
    margin-bottom: 40px;
}

iframe.voice-samples {
    width: 300px; /* NOTE: If you go bigger than this, it will cause horizontal scrolling issues on recent-sized mobile phones */
    height: 200px;
    border: none;
}

section.inquiry {
    position: relative;
    background-image: url("images/unsplash.jpg");
    background-size: cover;    
    background-repeat: no-repeat;
    background-position: right center;
    height: 500px;
}

footer {
    height: 120px;
}

html, h1, h2, h3, h4, h5, h6, p, li, a, input {
    font-family: Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {    
    font-weight: 500;
    color: #3E4F54;
}

h2 {
    color: #2D373A; 
}

h2.headline {
    color: #3E4F54;   
}

section p, section li {
    color: #2D373A;    
    font-weight: 400;
    line-height: 40px;
}

.inquiry-text {    
    font-weight: 500;
    line-height: 1.5;
}

.copyright {
    color: #2D373A;    
    font-weight: 500;
}

span.break {
    display: inline;
}

/*
    
    RESPONSIVE SETTINGS: START WITH MOBILE SETTINGS AND GO UP.

*/
nav a.logo img {
    width: 75%; /* Support 320 viewport */
}

nav a.btn {
    font-size: 16px; /* Support 320 viewport */ 
}

header.jumbotron {        
    background-position: -300px 0px;
}

h1 {   
    font-size: 20px;
}

section h2 {
    font-size: 18px;
    margin-top: 30px;
}

h2.headline {
    font-size: 38px;
    margin-top: 60px;
}

.learn-more-parent {
    margin-top: 60px;
    text-align: center;
}

section div.row.rounded {
    border: none;
}

section p, section li {
    font-size: 16px;
}  

section li {
    margin-left: -20px;
    padding-left: -20px;
}

section ul li {
    margin-left: -20px;
}

section ol li {
    margin-left: -10px;
}

.inquiry-text {
    font-size: 28px;
}

.inquiry-btn {
    margin-top: 30px;
    font-size: 16px;
}

.icon {
    width: 40px;
    margin-top: 20px;
}

.copyright {
    font-size: 14px;
}

/* CUSTOM BREAKPOINT for nav */
@media only screen and (min-width: 340px) {

    nav a.logo img {
        width: 100%;
    }

    nav a.btn {
        font-size: 20px;
    }

    .inquiry-btn {
        font-size: 20px;
    }

}

@media only screen and (min-width: 380px) { 
    
    .icon {
        width: 50px;
    }
    
}

/* CUSTOM BREAKPOINT for text in header */
@media only screen and (min-width: 400px) { 

    header div.description {
        margin-top: 100px;
    }

}

/* CUSTOM BREAKPOINT for header image */
@media only screen and (min-width: 456px) { 
    
    header.jumbotron {        
        background-position: -150px 0px;
    }

    h1 {
        font-size: 22px;
    }

    .learn-more-parent {
        text-align: left;
    }

}

/* Small devices: Landscape Phones */
@media only screen and (min-width: 576px) {     
  
    header.jumbotron {        
        background-position: -55px 0px;
    }

    h1 {
        font-size: 24px;
    }

    section h2 {
        font-size: 20px; 
    }

    h2.headline {
        font-size: 40px;
    }

    section div.row.rounded {
        border: solid 1px #B3B3B3;
        -webkit-border-radius: 12px !important;
        -moz-border-radius: 12px !important;
        border-radius: 12px !important;
    }   

    section p, section li {
        font-size: 18px;
    }   

    section .row div:last-child {
        padding-right: 40px;
    }

    .icon {
        width: 65px;
    }

}

/* Medium devices: Tablets */
@media only screen and (min-width: 768px) {
   
    header.jumbotron {        
        background-position: 0px 0px;
    }
    
    header div.description {
        margin-left: 35px;
    }

    nav.container {
        padding-left: 35px;
        padding-right: 35px;
    }
    
    span.break {
        display: block;
    }

    .icon {
        width: 85px;
    }

    section div.row {
        margin: 20px 0px;
    }

    h1 {
        font-size: 23px;             
    }

    section h2 {
        font-size: 25px;
    }

    h2.headline {
        font-size: 45px;        
        margin-top: 30px;
    }

    .learn-more-parent {
        margin-top: 30px;
    }    

    section ul li, section ol li {
        margin-left: 0px;
    }

    section .row div:last-child {
        padding-right: 80px;
    }

    .inquiry-parent {
        padding-left: 35px;        
    }

    .inquiry-text {
        font-size: 33px;
    }

    .copyright {
        font-size: 16px;
    }    
    
}

/* Large devices: Desktops */
@media only screen and (min-width: 992px) {

    header.jumbotron {
        background-position: 0px 0px;        
    }
    
    h1 {
        font-size: 22px;
    }

    section h2 {
        font-size: 29px; 
    }

    section p, section li {        
        font-size: 19px;
    }

    .inquiry-text {
        font-size: 38px;
    }

    .copyright {
        font-size: 18px;
    }    

}

/* Extra Large devices: Desktops */
@media only screen and (min-width: 1200px) {
    
    header.jumbotron {
        background-position: 0px -50px;        
    }

    h2.headline {
        font-size: 48px;
    }

}