:root {
    --white: #fff;
    --cl_1: #D008AF;
    --cl_2: #F92D4B;
    --bg-gr_1: linear-gradient(to right,var(--cl_1),var(--cl_2));
    --cl_3: #FEC901;
    --cl_4: #FE0C34;
    --bg-gr_2: linear-gradient(to right,var(--cl_3),var(--cl_4));
    --cl_5: #559DF3;
    --cl_6: #9114D0;
    --bg-gr_3: linear-gradient(to right,var(--cl_5),var(--cl_6));
    --cl_7: #2CD190;
    --cl_8: #138FC8;
    --bg-gr_4: linear-gradient(to right,var(--cl_7),var(--cl_8));
}

.contentBox {
    margin: 5px 5px;
    text-align: center;
    /*padding: 10px 10px;*/
    height: 95%;
    border: 2px #adadad solid;
    border-radius: 4%;
    /* margin: 80px 10px 0;
    border-left: 3px solid var(--cl_1);*/
    position: relative;
    /*z-index: 1;*/
}

/*    .contentBox:before,
    .contentBox:after {
        content: '';
        background-color: var(--cl_1);
        height: 3px;
        width: 50%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
    }*/

    .contentBox:after {
        background: var(--bg-gr_1);
        width: 100%;
        top: auto;
        bottom: 0;
    }

    .contentBox .contentBox-icon {
        color: var(--white);
        /*background: #1D434E;
        font-size: 70px;
        line-height: 140px;
        width: 200px;
        height: 200px;*/
        margin: 0 auto;
        /*border-radius: 50%;*/
        /*position: absolute;*/
        /*top: -70px;*/
        left: 0;
        right: 0;
        /*z-index: 1;*/
        transition: all 0.3s;
    }

    .contentBox:hover .contentBox-icon {
        font-size: 60px;
    }

/*    .contentBox .contentBox-icon:before,
    .contentBox .contentBox-icon:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 96%;
        width: 96%;
        border: 10px solid var(--white);
        border-radius: 50%;
        z-index: -1;
    }*/

    .contentBox .contentBox-icon:after {
        border: none;
        background: var(--bg-gr_1);
        height: 82%;
        width: 82%;
        z-index: -1;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        transition: all 0.3s;
    }

    .contentBox:hover .contentBox-icon:after {
        box-shadow: 0 0 15px rgba(0,0,0,0.3), 0 0 10px var(--white) inset;
    }

    .contentBox .contentBox-content {
        padding: 5px 0 20px;
        /*border-right: 3px solid var(--cl_2);*/
    }

    .contentBox .title {
        color: var(--cl_1);
        font-size: 20px;
        text-transform: capitalize;
        margin: 0 0 10px;
    }

    .contentBox .description {
        color: #707070;
        font-size: 15px;
        line-height: 27px;
    }

/*    .contentBox.blue:after,
    .contentBox.blue .contentBox-icon,
    .contentBox.blue .contentBox-icon:after {
        background: var(--bg-gr_3);
    }

    .contentBox.blue:before {
        background-color: var(--cl_5);
    }

    .contentBox.blue {
        border-left-color: var(--cl_5);
    }*/

/*        .contentBox.blue .contentBox-content {
            border-right-color: var(--cl_6);
        }

        .contentBox.blue .title {
            color: var(--cl_6);
        }*/

@media only screen and (max-width:990px) {
    .contentBox {
        margin: 100px 0 0;
    }
}

/*pagination*/
.pagination-outer {
    text-align: center;
}

.pagination {
    font-family: 'Work Sans', sans-serif;
    padding: 0 10px;
    border-radius: 0;
    display: inline-flex;
    position: relative;
}

    .pagination:before {
        content: '';
        background: #999;
        height: 2px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 7px;
    }

    .pagination li .page-link {
        color: #fff;
        background: #555;
        font-size: 16px;
        font-weight: 700;
        line-height: 35px;
        height: 35px;
        width: 55px;
        padding: 0;
        margin: 0 7px;
        border-radius: 0;
        border: none;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease 0s;
    }

        .pagination li .page-link:hover,
        .pagination li .page-link:focus,
        .pagination li.active a.page-link:hover,
        .pagination li.active a.page-link {
            color: #fff;
            background: #8d103f;
            font-size: 22px;
            line-height: 40px;
            height: 40px;
        }

        .pagination li .page-link:before,
        .pagination li .page-link:after {
            content: '';
            background: linear-gradient(to right bottom,transparent 50%,#111 55%);
            height: 7px;
            width: 7px;
            position: absolute;
            left: -7px;
            top: 0;
            z-index: -1;
            transition: all 0.3s ease 0.3s;
        }

        .pagination li .page-link:after {
            transform: rotateY(180deg);
            left: auto;
            right: -7px;
        }

    .pagination li:first-child a.page-link,
    .pagination li:last-child a.page-link {
        border-radius: 0;
    }

@media only screen and (max-width: 480px) {
    .pagination {
        font-size: 0;
        display: inline-block;
    }

        .pagination li {
            display: inline-block;
            vertical-align: top;
        }
}

@media only screen and (max-width: 380px) {
    .pagination:before {
        display: none;
    }

    .pagination li .page-link {
        margin-bottom: 10px;
    }

        .pagination li .page-link:before, .pagination li .page-link:after {
            display: none;
        }
}