@import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,800');
html, body{
    margin: 0;
    padding: 0;
    font-family: 'Muli', sans-serif;
}
@font-face {
    font-family: 'Slick';
    font-display: auto;
    src: local('Slick'), url(slick/fonts/slick.woff) format('woff');
}

:root{
    --blue-dark-background: #0070d6;
    --blue-light-background: #00a8ed;
    --blue-pale-background: #f0f8ff;
    --button-color: #15C39A;
    --title-color: #5b5b5b;
}
a, a:hover, a:active, a:focus{
    text-decoration: none;
    color: inherit;
}
.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
}
span{
    vertical-align: middle;
}
.material-icons{
    vertical-align: middle;
    font-size: 30px;
}

/* Header */

header{
    padding: 20px;
    background-color: var(--blue-pale-background);
}

/* Top Logo Container */

.top-logo-container{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.logo-box img{
    max-height: 30px;
}
.logo-box span{
    color: white;
    font-size: 24px;
}

/* Landing Screen */

.landing-screen{
    background-image: linear-gradient(39deg, var(--blue-dark-background), var(--blue-light-background));
}
.landing-screen h1{
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
}
.landing-list ul{
    list-style: none;
    font-size: 20px;
    padding: 0;
    margin-bottom: 100px;
}
.landing-list li{
    margin-top: 30px;
    font-weight: 300;
}
/* Badge */
.badge{
    background: url(img/badge-3.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    padding: 15px;
    margin: -80px 190px 0px;
    text-align: center;
    color: #fff;
    line-height: 1.2;
}
.badge-text-reference{
    position: absolute;
    right: 17px;
}
.badge-text-title{
    font-size: 20px;
}
.badge-text-body{
    font-size: 12px;
    font-weight: 400;
}
.landing-loan-container{
    max-width: 340px;
}
/* Form */
.landing-loan-container{
    width: 300px;
}
.landing-loan-select{
    padding: 40px;
}
.landing-loan-select .form-group, .landing-loan-select .form-control{
    color: #5b5b5b;
    font-size: 14px;
    font-weight: 300;
}
.btn{
    background: var(--button-color);
    border: 0;
    outline: 0;
    box-shadow: none;
    color: white;
}
.btn:hover ,.btn:focus{
    background: #17daac;
    color: white;
}
.landing-loan-select-safety{
    margin-top: 20px;
    color: var(--title-color);
}
.landing-loan-text{
    font-size: 10px;
}

/* Steps */

.step-image{
    height: 100px;
}
.step-title, .review-name{
    font-size: 18px;
    font-weight: 800;
    color: var(--title-color);
    margin: 20px 0;
}

/* Reviews */

.review-container{
    padding: 20px;
}
.review-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.review-name{
    margin: 0;
    font-size: 18px;
}
.review-date{
    font-size: 14px;
    font-weight: 300;
    opacity: .3;
}
.review-rating i{
    font-size: 20px;
    margin: 5px 0;
    color: var(--button-color);
}
.review-text{
    font-size: 14px;
}

/* Icons */

.icon-image{
    height: 80px;
}
.icon-title{
    font-weight: 600;
    font-size: 18px;
    color: var(--title-color);
    margin: 20px 0;
}

/* Partners */

.section-title{
    font-weight: 800;
    color: var(--title-color);
    margin: 0;
}
.partner-logo{
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    margin-bottom: 30px;
}
.partner-logo img{
    height: auto;
    align-self: center;
    max-width: 80%;
    filter: grayscale(100%);
}
.partners .col-12{
    padding: 0;
}
.partners-text{
    font-weight: 600;
    font-size: 18px;
    color: var(--title-color);
}

/* Footer */

footer{
    background-color: var(--blue-dark-background);
    padding: 20px 0;
    font-size: 12px;
}
footer span, footer .material-icons{
    vertical-align: middle;
}
.footer-link-element{
    margin: 0 10px;
}
footer hr{
    width: 100%;
    height: 1px;
    background-color: black;
    opacity: 0.1;
}

/* Responsive */

@media (max-width: 992px){
    .landing-screen{
    background-image: linear-gradient(45deg, var(--blue-light-background), var(--blue-dark-background));
    }
    .icon-image{
        height: 60px;
    }
    .icon-title{
        font-size: 16px;
    }
    footer .col-md-12{
        text-align: center !important;
    }
    .footer-links{
        justify-content:center;
        flex-wrap: wrap;
        max-width: 100%;
    }
}

@media (max-width: 767px){
    .landing-text h1{
        font-size: 38px;
    }
    .landing-list ul{
        margin-bottom: 0;
    }
    .landing-list li{
        font-size: 16px;
    }
}

@media (max-width: 578px){
    .landing-text h1{
        font-size: 28px;
    }
    .review-container{
        padding: 10px;
    }
}
@media (max-width: 360px){
    .landing-text h1{
        font-size: 24px;
    }
    .badge{
        margin-left: 170px;
    }
}