/**
 * Front Page Stylesheet
 *
 * If your theme has a custom homepage with lots of styles, use this file to only load them on the front page.
 * After development is complete, minify and copy the code into 'front-page.min.css' which is recognized by the theme.
 * You can also use the "Minify" extension for your editor to automatically have your styles minified on file save.
 */


/* ==========================================================================
 *
 * Table of Contents
 *
 * 1 - Jumbotron
 * 2 - Features
 * 3 - Split
 *
 * ========================================================================== */


/* ==========================================================================
   1 - Jumbotron
   ========================================================================== */

.jumbotron {
    margin-bottom: 0;
    padding: 6em 1.5em;
    background-position: right;
}

.jumbotron .jumbotron__title {
    font-size: 3.125em;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 1.5em;
    text-transform: uppercase;
    color: white;
}

.jumbotron__button {
    font-size: 1em;
    font-size: 1.2em;
    font-weight: 600;
    padding: .5em 1.5em;
    text-transform: uppercase;
    color: white;
    border: 2px solid #fff;
    animation-delay: .5s
}

.jumbotron__button:hover,
.jumbotron__button:focus {
    background-color: #fff;
}


/* ==========================================================================
   2 - Features
   ========================================================================== */

.features {
    padding: 5em 0;
    text-align: center;
}

.features--top {
    background-color: #fff;
}

.feature {
    margin-bottom: 3em;
    padding: 0 3em;
}

.features__title {
    font-size: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
}

.features__subtitle {
    margin-bottom: 1.5em;
    min-height:80px;
}

.features__btn {
    font-weight: 600;
    display: block;
    padding: .5em 1.25em;
    white-space: normal;
    text-transform: uppercase;
    color: #4c5cae;
    border: 2px solid #4c5cae;
}

.features__btn:hover,
.features__btn:focus {
    color: #fff;
    background-color: #4c5cae;
}

.features__image-wrap {
    display: flex;
    height: 130px;
    align-content: center;
}

.features__image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}


/* ==========================================================================
   3 - Split
   ========================================================================== */

.split {
    padding-top: 2.5em;
    background-color: #fff;
}

.split__title {
    font-size: 2.25em;
    font-weight: 700;
    margin-bottom: 1em;
    text-align: center;
    text-transform: uppercase;
    color: #333;
}

.split__description {
    font-size: 1.125em;
    font-weight: 700;
    line-height: 1.33;
    padding: 2em 0 2.5em;
}

.split__word {
    font-size: 2.25em;
    font-weight: 700;
    margin: 1em 0 .5em;
    text-align: center;
    text-transform: uppercase;
}

.split__image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

@media only screen and (min-width: 992px) {
    .split__word {
        margin: 4.5em 0 .5em;
    }
    .split__image--left {
        transform: scale(1.3);
        transform-origin: top center;
    }
}

@media only screen and (min-width: 1200px) {
    .split__image--left {
        transform: scale(1.2);
    }
}