/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.half-image-icons {
    position: relative;
}

.half-image-icons__text {
    background: #0F112E;
    padding: 70px 22px 100px 22px;
    position: relative;
    color: #fff;
    z-index: 1;
}


.half-image-icons__text h2,
.half-image-icons__text .sub-heading {
    color: #fff;
}


.half-image-icons__text .sub-heading {
    margin-bottom: 22px;
}

.half-image-icons__image {
    height: 364px;
    position: relative;
    z-index: 1;
}

.half-image-icons__bar {
    position: absolute;
    width: 163px;
    height: 160px;
    bottom: -32px;
    right: -21px;
    z-index: -1;
}

.half-image-icons__wrap p {
    margin: 0;
}

.js-icons-slider {
    margin: 50px -16px;
    padding-bottom: 100px;
}

.half-image-icons__wrap {
    position: relative;
    z-index: 1;
}

.half-image-icons__wrap p{
    padding: 0;
}

.icons-box-items {
    padding: 0 16px;
}

.half-image-icons__bttn {
    text-align: center;
}

.icons-box {
    height: 289px;
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: none;
    font-weight: normal;
    background: -webkit-gradient(linear,  left top, left bottom,  from(#3f4057),to(#3f4057));
    background: -o-linear-gradient(top,  #3f4057 0%,#3f4057 100%);
    background: linear-gradient(to bottom,  #3f4057 0%,#3f4057 100%);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; 
}

.icons-box__image {
    width: 122px;
    height: 122px;
    background: #82CCFA;
    border-radius: 50%;
    margin-bottom: 21px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 70px;
    line-height: 1em;
    color: #070B97;
    margin-top: 13px;
}

.icons-box__title {
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 36px;
    color: #fff;
}

.icons-box button {
    color: #fff;
}

@media (min-width: 768px) {

    .half-image-icons__text {
        padding: 70px 52px;
    }
    
    .half-image-icons__image {
        height: 459px;
    }

    .half-image-icons__image img{
        -o-object-position: center 25%;
           object-position: center 25%;
    }
    
    .half-image-icons__bar {
        width: 195px;
        height: 191px;
        bottom: -44px;
        right: -27px;
    }

    .icons-box {
        height: 286px;
    }
}


@media (min-width: 1200px) {
    .half-image-icons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        overflow: hidden;
    }

    .half-image-icons__text {
        width: 60%;
        padding: 100px 0 141px 0;
    }

    .half-image-icons__image {
        width: 40%;
        position: relative;
        height: auto;
    }

    .half-image-icons__image img {
        position: absolute;
    }

    .js-icons-slider .fx-slide {
        display: block;
    }

    .half-image-icons__flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin: 0 -10px;
        padding: 30px 0;
    }

    .icons-box-items {
        width: 20%;
        padding: 10px;
    }

    .icons-box {
        height: 157px;
        padding: 0 9px;
    }

    .icons-box__image {
        width: 76px;
        height: 76px;
        margin-bottom: 21px;
        font-size: 44px;
    }
    
    .icons-box__title {
        font-size: 14px;
        font-weight: 400;
        padding-bottom: 36px;
        color: #fff;
    }

    .icons-box__title {
        padding: 0;
        text-align: center;
        font-size: 14px;
    }

    .half-image-icons__wrap {
        max-width: 848px;
        padding: 0 16px;
    }

    
    .half-image-icons__bar {
        width: 302px;
        height: 296px;
        bottom: 0;
        right: -30px;
    }

    .icons-box:hover {
        background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(4,70,241,1)),color-stop(65%, rgba(7,11,151,1)),to(rgba(7,11,151,1)));
        background: -o-linear-gradient(top,  rgba(4,70,241,1) 0%,rgba(7,11,151,1) 65%,rgba(7,11,151,1) 100%);
        background: linear-gradient(to bottom,  rgba(4,70,241,1) 0%,rgba(7,11,151,1) 65%,rgba(7,11,151,1) 100%);
    }

    .icons-box:hover .icons-box__image {
        background: #fff;
    }

    .half-image-icons__bttn {
        text-align: left;
    }
    
}


@media (min-width: 1600px) {
    .half-image-icons__wrap {
        padding-left: 108px;
    }


    .icons-box {
        height: 157px;
        padding: 0 9px;
    }
    
}