body{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin:0;
    color:#484848;
}

h1 {
    font-weight: 300;
    font-size: 300%;
}

section{
    padding: 90px 0;
}

.space {
    height:10px;
}

.text-white{
    font-size:18px;
    color:#ffffff;
}

.text-black{
    font-size:18px;
    color:#484848;
}

.card-title-white{
    font-size:35px;
    color:#ffffff;
    font-weight:500;
}

.title-white{
    font-size:35px;
    color:#ffffff;
}

.title-green{
    font-size:35px;
    color:#1CC2B6;
}

#top-line{
    background: #1CC2B6;
    color: #ffffff;
    height: 60px;
    text-align:center;
}

#top-line a {
    color: #ffffff;
    font-size:24px;
}

#banner a, #compare a{
    color: #ffffff;
}

#agent a, #benefit a{
    color:#1CC2B6;
}

#navbar{
    margin-top: 20px;
    padding: 12px 0px 12px;
    color:#309DD6;
    font-size:20px;
}

#banner{
    background-size: cover;
    background-position: center;
    color:#1CC2B6;
    padding: 80px 0px;
}

#header-text{
    color: #1CC2B6;
    font-size:40px;
    position: absolute;
    left: 25%;
    top: 50%;
    transform: translate(-25%, -50%);
}

#banner button{
    background: #1CC2B6;
    color: #ffffff;
    border-radius: 20px;
    padding: 15px 30px;
}

#features {
    margin:20px;
}

.feature-item{
    text-align: center;
    font-weight: 300;
    font-size: 16px;
}

.feature-item img{
    height: 70px;
    margin-bottom: 20px;
}

#agent{
    background-image: url("../img/banner_img_2.jpg");
    background-blend-mode: overlay;
    background-size: cover; 
}

#agent button{
    background-color: #ffffff;
    color:#1CC2B6;
    border-radius: 20px;
    padding: 15px 30px;
}

#benefit{
    background: #1CC2B6;
}

#benefit button{
    background-color: #ffffff;
    color:#1CC2B6;
    border-radius: 20px;
    padding: 15px 30px;
}

#card-1{
    background-image: url("../img/card_img_1.jpg");
    background-blend-mode: overlay; 
    background-size: cover;
    height: 355px;
}

#card-2{
    background-image: url("../img/card_img_2.jpg");
    background-blend-mode: overlay; 
    background-size: cover;
    height: 355px;
}

#card-3{
    background-image: url("../img/card_img_3.jpg");
    background-blend-mode: overlay; 
    background-size: cover;
    height: 355px;
}

#compare button{
    background-color: #40ADDF;
    color:#ffffff;
    border-radius: 20px;
    padding: 15px 30px;
}

.title {
    color:#1CC2B6;
    font-size:35px;
}

footer{
    padding: 80px 0px;
    background-color: #40ADDF;
    color:#ffffff;
    font-size:18px;
}

footer a{
    color:#ffffff;
}

@media (min-width: 1200px){

    #features .container{
        width: 1200px;
    }
}