/* Hero */
.hero {
    background-color: #0094ff;
    background: -webkit-linear-gradient(#1f4f72, #1774b8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#1f4f72, #1774b8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#1f4f72, #1774b8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#1f4f72, #15639d); /* Standard syntax */
    color: #FFF;
    padding: 50px 0;
}

    .hero .container {
        position: relative;
    }

    .hero .hero-title {
        font-size: 32px;
        font-weight: 200;
        padding-left: 135px;
    }

    .hero .hero-desc {
        padding-left: 136px;
        font-weight: 300;
        color: #d7e3ec;
        max-width: 830px;
    }

    .hero .hero-icon {
        position: absolute;
        font-size: 75px;
        left: 25px;
        top: 8px;
    }

.feature {
}

    .feature .item {
        height: 550px;
    }

        .feature .item .container {
            position: relative;
        }

        .feature .item .image {
            position: absolute;
            left: -50px;
            top: 49px;
        }

            .feature .item .image video {
                width: 800px;
                height: 452px;
            }

        .feature .item .text {
            position: absolute;
            width: 340px;
            right: 0;
            top: 0;
            height: 550px;
        }

            .feature .item .text .wrapper {
                margin: 0;
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0%, -54%);
            }

            .feature .item .text .item-title {
                font-size: 26px;
                font-weight: 300;
                padding-bottom: 5px;
                color: #000;
            }

            .feature .item .text .item-desc {
            }

        .feature .item.img-right {
            background-color: #eee;
        }

            .feature .item.img-right .image {
                left: unset;
                right: -50px;
            }

            .feature .item.img-right .text {
                right: unset;
                left: 0;
            }

@media (max-width: 1200px) {
    .feature .item {
        height: 510px;
    }

        .feature .item .image {
            position: absolute;
            left: -50px;
            top: 49px;
        }

            .feature .item .image video {
                width: 720px;
                height: 406px;
            }

        .feature .item .text {
            width: 270px;
            height: 510px;
        }
}

@media (max-width: 991.98px) {
    .feature .item {
        height: unset;
        padding: 40px 0;
    }

        .feature .item .image {
            position: unset;
            left: unset;
            top: unset;
        }

            .feature .item .image video {
            }

        .feature .item .text {
            position: relative;
            width: 100%;
            padding-bottom: 20px;
            height: unset;
        }

            .feature .item .text .wrapper {
                position: unset;
                transform: unset;
                top: unset;
                left: unset;
                margin: unset;
            }
}

@media (max-width: 767.98px) {
    .hero {
        padding: 20px 0;
    }

        .hero .hero-title {
            padding-left: 0;
            width: 100%;
            padding-top: 90px;
            text-align: center;
            font-size: 27px;
            font-weight: 300;
        }

        .hero .hero-desc {
            text-align: center;
            font-size: 16px;
            padding: 10px 6px;
        }

        .hero .hero-icon {
            text-align: center;
            left: 0;
            top: 0;
            width: 100%;
            font-size: 60px;
        }

    .feature .item {
        height: unset;
        padding: 40px 0;
    }

        .feature .item .image {
            position: unset;
            left: unset;
            top: unset;
        }

            .feature .item .image video {
                width: 100%;
                height: unset;
            }

        .feature .item .text {
            position: relative;
            width: 100%;
            padding-bottom: 20px;
            height: unset;
        }

            .feature .item .text .wrapper {
                position: unset;
                transform: unset;
                top: unset;
                left: unset;
                margin: unset;
            }

            .feature .item .text .item-title {
                font-size: 22px;
            }
}

@media (max-width: 575.98px) {
    .feature .item {
        height: unset;
        padding: 40px 0;
    }

        .feature .item .image {
            position: unset;
            left: unset;
            top: unset;
        }

            .feature .item .image video {
                width: 100%;
                height: unset;
            }

        .feature .item .text {
            position: relative;
            width: 100%;
            padding-bottom: 20px;
            height: unset;
        }

            .feature .item .text .wrapper {
                position: unset;
                transform: unset;
                top: unset;
                left: unset;
                margin: unset;
            }

            .feature .item .text .item-title {
                font-size: 22px;
            }
}