body {
    font-family: 'Cabin', sans-serif;
    color: #333;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0070d2), to(transparent));
    background-image: -webkit-linear-gradient(#0070d2, transparent);
    background-image: -moz-linear-gradient(#0070d2, transparent);
    background-image: -o-linear-gradient(#0070d2, transparent);
    background-image: linear-gradient(#0070d2, transparent);
    background-repeat: no-repeat;
    background-size: 100% 35%;
}

h1 {
    font-size: 3.2rem;
}

h2 {
    font-size: 2.5rem;
}
/* HEADER */
header {
    padding: 1rem 0;
    background-color: #fff;
    border-bottom: 1px solid #e9e9e9;
}

    header .logo {
        width: 150px;
        height: auto;
    }

    header .navbar-nav {
        margin-left: auto
    }

    header .navbar-collapse {
        margin-top: 1rem;
        text-align: right;
    }

    header .navbar-light .navbar-nav .nav-link {
        margin-left: 1.2rem;
        color: rgba(0,0,0,1);
    }

        header .navbar-light .navbar-nav .nav-link:hover {
            color: #2695fb;
        }
/* END OF HEADER */
/* HERO */
.hero {
    position: relative;
    padding: 5rem 0 0;
    margin-bottom: 30rem;
    width: 100%;
    background-color: #fff;
}

    .hero::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: inherit;
        z-index: -1;
        bottom: 0;
        left: 0;
        transform-origin: right bottom;
        transform: skewY(-5deg);
    }

    .hero h1 {
        margin-bottom: 2rem;
    }

    .hero h2 span {
        color: #2695fb;
    }

    .hero img {
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 1000;
    }
/* END OF HERO */
/* BENEFITS */
.deliver {
    margin-bottom: 5rem;
}

    .deliver h3 {
        color: #fff;
        font-size: 2rem
    }

.benefits {
    position: relative;
    margin: 0;
    padding: 2rem 4rem;
    background-color: #fff;
}

    .benefits::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: inherit;
        z-index: -1;
        bottom: 0;
        left: 0;
        transform-origin: left bottom;
        transform: skewY(-5deg);
    }

    .benefits h2 {
        text-align: center;
        margin-bottom: 4rem;
    }

    .benefits .fas {
        margin-bottom: 0.7rem;
        font-size: 3rem;
    }

    .benefits .fa-bell {
        color: #fad69f;
    }

    .benefits .fa-comments {
        color: #fad69f;
    }

    .benefits .fa-users {
        color: #fad69f;
    }

    .benefits .fa-envelope-open-text {
        color: #fad69f;
    }

    .benefits .fa-info-circle {
        color: #fad69f;
    }

    .benefits .fa-poll {
        color: #fad69f;
    }

    .benefits h3 {
        color: #2695fb;
    }

    .benefits p {
        margin-bottom: 4rem;
    }

@media only screen and (max-width: 768px) {
    .benefits {
        padding: 4rem 0 2rem;
    }
}
/* END OF BENEFITS */
/* COMPATABILITY */
.compatability {
    margin: 0 0 6rem;
    text-align: center;
}

    .compatability img {
        width: 50px;
        height: auto;
        margin: 1rem;
    }
/* END OF COMPATABILITY */
/* TEASERS */
.functionality, .performance, .engagement, .features, #costings, .integration {
    text-align: center;
    margin: 0 0 2rem;
    padding: 2rem;
    min-height: 450px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.functionality, .features {
    background-color: #faf2e6;
}

.performance, #costings {
    background-color: #dbedfd;
}

.engagement, .integration {
    background-color: #f2f3f5;
}

.functionality {
    background-image: url(../img/functionality-bg-mobile.jpg);
}

.performance img {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 300px;
}

.features img {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 450px;
}

.engagement {
    background-image: url(../img/engagement-bg-users.jpg);
}

#costings img {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 300px;
}

.integration {
    background-image: url(../img/integration-bg-coffee.jpg);
}
/* END OF TEASERS */
/* HOW IT WORKS */
.how-it-works {
    margin: 3rem 0 4rem;
    text-align: center;
}

    .how-it-works p {
        font-size: 1.2rem;
    }

h2.how-it-works {
    margin-bottom: 3rem;
}

.how-it-works .step1, .how-it-works .step2, .how-it-works .step3, .how-it-works .results {
    text-align: center;
    margin: 0 0 2rem;
    padding: 2rem;
    min-height: 500px;
    width: 100%;
}

.how-it-works .step1, .how-it-works .results {
    background-color: #dbedfd;
}

    .how-it-works .step1 img {
        margin-top: 1.5rem;
        width: 100%;
        max-width: 500px;
    }

.how-it-works .step2 {
    background-image: url(../img/engagement-bg-users.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.how-it-works .step3 {
    background-color: #faf2e6;
    margin-bottom: 6rem;
}

    .how-it-works .step3 img {
        margin-top: 2rem;
        width: 100%;
        max-width: 900px;
    }

.how-it-works .results {
    min-height: 800px;
    padding-top: 5rem;
    background-image: url(../img/integration-bg-coffee.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* HOW IT WORKS*/
/* RESULTS
.results {
	margin: 3rem 0 4rem;
	padding: 0 4rem;
	text-align: center;
}
END OF RESULTS */
/* CONTACT*/
#contact {
    position: relative;
    margin: 4rem 0 0 0;
    padding: 4rem;
    text-align: center;
    background-color: #dcedfd;
}

    #contact a {
        color: #333;
        text-decoration: none;
        font-weight: 700;
    }

        #contact a:hover {
            color: #326798;
        }
/* END OF CONTACT */
/* FOOTER */
footer {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #333;
    color: #fff;
}

    footer .logo {
        width: 150px;
        height: auto;
        margin-bottom: 3rem;
    }

    footer ul {
        list-style: none;
        padding-left: 0;
    }

    footer small {
        color: #ccc;
    }

    footer a {
        color: #fff;
        text-decoration: none;
    }

        footer a:hover {
            color: #326798;
            text-decoration: none;
        }

    footer .terms {
        text-align: right;
    }
/* END OF FOOTER */
/* MEDIA QUERIES */
@media only screen and (max-width: 992px) {
    .hero {
        margin-bottom: 10rem;
    }

        .hero img {
            position: relative;
        }
}

@media only screen and (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .hero {
        padding: 2rem 0 0;
        margin-bottom: 5rem;
    }

    .deliver {
        text-align: center;
        margin-bottom: 4rem;
    }

        .deliver h3, .benefits h3 {
            font-size: 1.25rem;
        }

    .benefits {
        padding: 2rem 0 2rem;
        text-align: center;
    }

        .benefits h2 {
            margin-bottom: 3rem;
        }

    .compatability {
        margin: 0 0 3rem;
    }

        .compatability img {
            width: 35px;
        }

    .benefits p {
        margin-bottom: 2rem;
    }

    .results {
        padding: 0
    }

    .functionality, .performance, .engagement, .features, #costings, .integration {
        min-height: 375px;
    }

    #contact {
        padding: 4rem 0;
    }

    footer {
        text-align: center;
    }

        footer .terms {
            text-align: center;
        }
}
/* END OF MEDIA QUERIES */