/*
*  STYLE FOR ICON BOX
*
*
*  [Table of contents]
*
*  [&. Content / #key]
*  [Let press Ctrl + f and type of paste the key, then press Enter to search the content ]
*
*  Summary:
*
*
*  1. General
*  2. Icon Box 01
*  3. Icon Box 02
*  n. Responsive
*
*
*/


/*----------  1. General  ------------------*/ 
    .slz-icon-box-1 .slz-btn,
    .slz-icon-box-2 .slz-btn {
        background-color: transparent;
        text-transform: capitalize;
        border: none;
        color: #18364a;
        padding: 5px 0;
        height: auto;
        line-height: 1;
    }

    .slz-icon-box-1 .slz-btn span,
    .slz-icon-box-2 .slz-btn span {
        display: inline-block;
        vertical-align: top;
        line-height: inherit;
    }

    .slz-icon-box-1 .slz-btn .icons,
    .slz-icon-box-2 .slz-btn .icons {
        margin-left: 5px;
    }

/*----------  2. Icon Box 01  ----------*/
    .slz-icon-box-1 {
        display: table;
        width: 100%;
        position: relative;
        padding: 20px;
    }

    .slz-icon-box-1 .icon-cell {
        display: table-cell;
        text-align: center;
    }

    .slz-icon-box-1 .number {
        margin-bottom: 15px;
        font-size: 36px;
        font-weight: 900;
        color: #e9e9e9;
        position: relative;
        line-height: 1;
    }

    .slz-icon-box-1 .content-cell {
        display: table-cell;
        vertical-align: top;
        text-align: left;
        padding-left: 15px;
    }

    .slz-icon-box-1 .wrapper-icon {
        width: 70px;
        height: 70px;
        line-height: 68px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        border: 1px solid #18364a;
        border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .slz-icon-box-1 .wrapper-icon .slz-icon {
        color: #18364a;
        font-size: 30px;
        line-height: inherit;
        position: relative;
        z-index: 5;
    }

    .slz-icon-box-1 .wrapper-icon.bg-image {
        position: relative;
        border: none;
        width: auto;
        height: auto;
        line-height: inherit;
    }

    .slz-icon-box-1 .wrapper-icon.bg-image .bg-image-icon {
        position: relative;
    }

    .slz-icon-box-1 .wrapper-icon.bg-image .bg-image-icon2 {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        opacity: 0;
    }

    .slz-icon-box-1 .wrapper-icon.bg-image .slz-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .slz-icon-box-1 .wrapper-icon.bg-image:hover .bg-image-icon ~ .bg-image-icon2 {
        opacity: 1;
    }

    .slz-icon-box-1 .wrapper-icon-image {
        display: inline-block;
        min-width: 70px;
        vertical-align: top;
    }

    .slz-icon-box-1 .wrapper-icon-image .slz-icon-img {
        display: block;
        max-width: 100%;
    }

    .slz-icon-box-1 .wrapper-info .title {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        text-transform: capitalize;
        color: #18364a;
    }

    .slz-icon-box-1 .wrapper-info .title + .description {
        margin-top: 10px;
    }

    .slz-icon-box-1 .wrapper-info .description {
        margin-bottom: 15px;
        font-size: inherit;
    }

    .slz-icon-box-1 .wrapper-info .description:last-child {
        margin-bottom: 0;
    }

    .slz-icon-box-1.style-vertical .icon-cell {
        display: block;
        text-align: center;
    }

    .slz-icon-box-1.style-vertical .number {
        margin-bottom: 50px;
    }

    .slz-icon-box-1.style-vertical .number:before {
        position: absolute;
        content: '';
        bottom: -10px;
        left: 50%;
        width: 2px;
        height: 30px;
        background-color: #e9e9e9;
        -webkit-transform: translate(-50%, 100%);
        -moz-transform: translate(-50%, 100%);
        -ms-transform: translate(-50%, 100%);
        -o-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%);
    }

    .slz-icon-box-1.style-vertical .content-cell {
        display: block;
        text-align: center;
        padding-top: 15px;
        padding-left: 0;
    }

    .slz-icon-box-1.style-vertical.left .icon-cell,
    .slz-icon-box-1.style-vertical.left .content-cell {
        text-align: left;
    }

    .slz-icon-box-1.style-vertical.left .number:before {
        left: 2px;
    }

    .slz-icon-box-1.style-vertical.right .icon-cell,
    .slz-icon-box-1.style-vertical.right .content-cell {
        text-align: right;
    }

    .slz-icon-box-1.style-vertical.right .number:before {
        right: 2px;
        left: auto;
    }

/*----------  3. Icon Box 02  ----------*/
    .slz-icon-box-2 {
        padding: 20px;
    }

    .slz-icon-box-2 .number {
        font-size: 30px;
        font-weight: 900;
        color: #e9e9e9;
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 30px;
    }

    .slz-icon-box-2 .number:before {
        position: absolute;
        content: '';
        top: 50%;
        left: calc(100% + 5px);
        width: 20px;
        height: 2px;
        background-color: #e9e9e9;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .slz-icon-box-2 .icon-cell {
        display: block;
        text-align: left;
    }

    .slz-icon-box-2 .content-cell {
        display: block;
        text-align: left;
        padding-top: 15px;
    }

    .slz-icon-box-2 .wrapper-icon {
        display: inline;
        vertical-align: top;
        margin-right: 20px;
    }

    .slz-icon-box-2 .wrapper-icon .slz-icon {
        color: #18364a;
        font-size: 24px;
        line-height: inherit;
        position: relative;
        z-index: 2;
    }

    .slz-icon-box-2 .wrapper-icon-image {
        display: inline-block;
        vertical-align: top;
        margin-right: 20px;
    }

    .slz-icon-box-2 .wrapper-icon-image .slz-icon-img {
        display: block;
        max-width: 100%;
    }

    .slz-icon-box-2 .title {
        margin: 0;
        line-height: 1.5;
        font-size: 18px;
        font-weight: 700;
        color: #18364a;
        vertical-align: top;
        display: inline;
        text-transform: capitalize;
    }

    .slz-icon-box-2 .wrapper-info .description {
        margin-bottom: 15px;
        font-size: inherit;
    }

    .slz-icon-box-2 .wrapper-info .description:last-child {
        margin-bottom: 0;
    }

    
/*=====================================
=            n. Responsive            =
=====================================*/

    @media screen and (max-width: 414px) {
        .slz-icon-box-1 {
            padding: 0;
        }
    }


/*=====  End of n. Responsive  ======*/