/* Nav */

.bg-green {
    background-color: #153a39;
}

.nav li {
    padding: 1% 0;
}

.multi-button-head {
    padding-top: 50px;
}

.jumbotron {
    background-image: url("../images/hero2.jpg");
    background-size: cover;
    background-position: 20%;
    height: 80vh;
}

@media screen and (min-width: 768px) {
    .jumbotron {
        height: 100vh;
    }
}

.nav li a{
    font-family: Ubuntu;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    padding:  5px 40px;

}

.nav a:hover{
    color:#00DD47;
    border-bottom: 2px #00DD47 solid;
}

a {
    text-decoration: none;
}

.logo {
    display: block!important;
    width: 100px;
    float: left;
    padding: 1% 0;
}

.explainer-sect {
    padding: 50px 0 50px 0;
}

.row {
    padding: 50px 0 50px 0;
}

.grey {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    padding-right: 50px;
    left: 50%;
    background-color: #F6F8FB;
}

.cta-main {
    padding: 100px 0 50px 0;
}

body > main > div.container.marketing > div.grey > div > div > div.col-md-5.order-md-1 > img{
    transform: translateX(-150px);
}


/* Typography */

h1.hero-text {
    font-family: Ubuntu;
    font-weight: 700;
    font-size: 90px;
    letter-spacing: -1px;
    color:#fff;
    line-height: 95%;
    padding-bottom: 30px;
}

.header-text {
    max-width: 50%;
    position: relative;
    top: 50%;
    transform: translateY(50%);
    display: inline-block; 
}

.jumbotron {
    background-color: #003C3A;
}

.sub-main {
    font-family: Ubuntu;
    font-weight: 300;
    font-size: 24px;
    color:#00DD47;
    line-height: 100%;
}

h2 {
    font-family: Ubuntu;
    font-weight: 700;
    font-size: 50px;
    letter-spacing: -1px;
    color: #153A39;
}

h2.multi-line {
    line-height: 50px;
    padding-bottom: 30px;
}

h2.cta, .cta-foot {
    font-size: 34px;
    letter-spacing: -1px;
    text-align: center;
}

h2.cta-foot {
    color: #00DD47;
}

.cta {
    padding-bottom: 30px;
}

.bright-sub {
    color: #00DD47;
}

h3.summary {
    font-family: Roboto;
    font-weight: 400;
    font-size: 24px;
    color: #50a08f; 
    padding-bottom:30px;
}

h4 {
    font-family: Roboto;
    font-weight: 500;
    font-size: 21px;
    color: #153a39; 
 }

.body-copy, .body-copy-first, .body-copy-last {
    font-family: Roboto;
    font-weight: 300;
    font-size: 20px;
    color: #484844;
    padding-bottom: 30px;
}

.body-copy-first::before {
    content:;
}

#testimonials h2 {
    padding-bottom: 30px;
}

#testimonials p {
    padding-bottom: 10px;
}
i 


@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 2000px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .col-md-7, .col-md-5 {
        max-width: 50%;
    }
  }


.image-right {
    position: absolute;
    right: 0;
    max-width: 80%;
    
  }

.employer {
      margin: -40px 0 20px 0;
  }

.employer p{
    margin-bottom: -15px;
  }

.title {
    font-family: Ubuntu;
    font-weight: 700;
    font-size: 24px;
    color: #50a08f;
}

.job {
    font-family: Ubuntu;
    font-weight: 400;
    font-size: 20px;
    color: #50a08f
}

/* Buttons */
.btn-primary {
     background-color:#172126;
     border-radius: 50px;
     border-width: 2px;
     border-color: #172126;
     margin-right: 20px;
 }

 .multi-button-head a.btn-secondary  {
    color: white;
 }

 .btn-secondary {
    border-radius: 50px;
    border-color: #00DD47;
    border-width: 2px;
    background-color: transparent;
    color: #172126;
}

a.btn-primary, a.btn-secondary {
     font-family: Ubuntu;
     font-weight: 500;
     font-size: 17px;
     padding: 8px 30px;
 }

 a {
     text-decoration: none;
 }

 .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #50a08f;
    border-color: #00DD47;
 }

 a.btn-primary:hover,  a.btn-primary:active {
     background-color: #50a08f;
     border-color: #00DD47;
 }
 .btn-primary.focus, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,221,71,.5);
}

i.fa-arrow-right, i.fa-quote-left, i.fa-quote-right {
     color: #00DD47;
 }

 .cta-main a.btn-primary {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block; 
}

.cta-foot {
    padding:20px 0;
}

.image-float-right {
    position: absolute;
    right: 0;
    width: 512px;
    height: 666px;
    top: 140px;
}

.image-float-left {
    position: absolute;
    left: 0;
    width: 579px;
    height: 543px;
    bottom: 140px;
}

#testimonials {
    position: relative;
    padding-top: 50px;
}

/* <1300px styles /*/

@media only screen 
and (max-width : 1300px) {

    .image-float-left, .image-float-right {
        max-width: 40%;
    }
}

@media only screen 
and (max-width: 458px) {
    body > main > div.jumbotron.jumbotron-fluid > div > div > div > a.btn.btn-primary {
        margin-bottom: 20px;
    }
    .header-text {
        transform: translateY(100px);
        margin: 0 20px;
    }

    .jumbotron {
        height: 75vh;
    }
    .body-copy {
    font-size: 18px;
        }
}

@media only screen 
and (max-width : 576px) {
    .logo {
        margin: 0 5%;
    }

    .nav li a {
        font-size: 15px;
        padding: 5px 10px;
    }

    .row {
        padding: 20px 0;
    }
}



@media only screen 
and (max-width : 990px){
    h1.hero-text {
        font-size: 64px;
    }

    .nav li a {
        padding: 5px 20px;
    }
    .multi-button-head {
        padding-top: 30px;
    }

    #how-it-works > div > div > div.col-md-5 > img {
       transform: translatey(30%);
    }

    body > main > div.container.marketing > div.grey > div > div > div.col-md-5.order-md-1 > img {
        transform: translateX(-80px) translateY(163px);
    }

    body > main > div.jumbotron.jumbotron-fluid > div > div
    {
        max-width: 100%;
    }
}

@media only screen 
and (max-width : 768px) {
    .image-float-left, .image-float-right {
        display: none;
    }
    .explainer-sect {
        padding: 0 0 50px 0;
    }
    #how-it-works > div > div {
        padding: 0 0 50px 0;
    }

    #testimonials {
        padding-top: 0px;
    }
    #testimonials > div.container > div {
        padding-top: 0px;
    }

    body > main > div.jumbotron.jumbotron-fluid > div > div
        {
            max-width: 100%;
        }

    #testimonials > div.row > div.container > div > div.col-md-7 > p.body-copy, p.body-copy-first, p.body-copy-last {
        padding: 0 20px;
    }
    .box {
        padding: 0 20px;
    }
    .grey {
       background-color: #F6F8FB;
       padding-right: 0px;
    }
    a.btn-primary, a.btn-secondary {
        margin: 0;
    }
    .featurette-image {
        width: 80%;
    }
    body > main > div.container.marketing > div.grey > div > div > div.col-md-5.order-md-1 > img {
    transform: translateX(40px) translateY(25px);
    }
    #how-it-works > div > div > div.col-md-5 > img {
        width: 90%;
        transform: translateX(20px) translateY(25px);
    }
}