.bk-gradation {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex

}



@media only screen and (max-width: 767px) {

    .bk-gradation {

        -ms-flex-wrap:wrap;

        flex-wrap: wrap

    }

}



.bk-gradation .item-grid {

    -webkit-box-flex: 1;

    -webkit-flex-grow: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;

    position: relative;

    padding: 0 10px

}



.bk-gradation .item-grid .line {

    position: absolute;

    top: 40px;

    right: 100%;

    -webkit-transform: translateX(50%);

    -ms-transform: translateX(50%);

    transform: translateX(50%);

    background: #ddd;

    width: 60%;

    height: 1px

}



@media only screen and (max-width: 767px) {

    .bk-gradation .item-grid .line {

        display:none

    }

}



.bk-gradation .item-grid .dot-wrap {

    max-width: 270px;

    position: relative;

    height: 80px;

    width: 80px;

    margin: 0 auto 24px

}



.bk-gradation .item-grid .dot-wrap .dot {

    background: #08798b;

}



.bk-gradation .item-grid .dot-wrap .dot::after,.bk-gradation .item-grid .dot-wrap .dot::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%,-50%);

    -ms-transform: translate(-50%,-50%);

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background: inherit

}



.bk-gradation .item-grid .dot-wrap .dot::before {

    width: 80px;

    height: 80px;

    opacity: .3

}



.bk-gradation .item-grid .dot-wrap .dot::after {

    width: 60px;

    height: 60px;

    opacity: .7

}



.bk-gradation .item-grid .dot-wrap .dot .count {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%,-50%);

    -ms-transform: translate(-50%,-50%);

    transform: translate(-50%,-50%);

    height: 40px;

    width: 40px;

    line-height: 40px;

    font-size: 16px;

    font-weight: 600;



    background: inherit;

    border-radius: 50%;

    text-align: center;

    z-index: 3;



}



.bk-gradation .item-grid .content {

    position: relative;

    text-align: center;

    max-width: 270px;

    margin: 0 auto;

    background: #fff;

    padding: 38px 30px 44px;

    -webkit-box-shadow: 0 10px 30px rgba(0,0,0,.06);

    box-shadow: 0 10px 30px rgba(0,0,0,.06);

    -webkit-filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .06));

    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .06));

    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);

    -o-transition: all .3s cubic-bezier(.645,.045,.355,1);

    transition: all .3s cubic-bezier(.645,.045,.355,1)

}



.bk-gradation .item-grid .content::before {

    position: absolute;

    bottom: 100%;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    content: "";

    border-bottom: 13px solid #fff;

    border-left: 20px solid transparent;

    border-right: 20px solid transparent;

    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);

    -o-transition: all .3s cubic-bezier(.645,.045,.355,1);

    transition: all .3s cubic-bezier(.645,.045,.355,1)

}



.bk-gradation .item-grid .content.bg-black {

    background: #08798b;

    color: #fff

}



.bk-gradation .item-grid .content.bg-black::before {

    border-bottom-color: 

}



.bk-gradation .item-grid .content.bg-black h5 {

    color: #fff

}



.bk-gradation .item-grid .content h5.heading {

    font-size: 16px;

    margin-bottom: 12px

}



.bk-gradation .item-grid:first-child .line {

    display: none

}



.bk-gradation .item-grid:hover .content {

    background: #08798b;

    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.06);

    box-shadow: 0 15px 30px rgba(0,0,0,.06);

    -webkit-filter: drop-shadow(0 15px 30px rgba(0, 0, 0, .06));

    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, .06));

    color: #fff

}



.bk-gradation .item-grid:hover .content::before {

    border-bottom-color: #08798b

}



.bk-gradation .item-grid:hover .content h5.heading {

    color: #fff

}



.bk-gradation .item-grid:hover .content p.bk_pra {

    color: #fff

}



.bk-gradation .item-grid.custom-color--2 .dot-wrap .dot {

    background: #f55d4e

}



.bk-gradation .item-grid.custom-color--3 .dot-wrap .dot {

    background: #9013fe

}



.bk-gradation .item-grid.custom-color--4 .dot-wrap .dot {

    background: #7ed321

}



.bk-gradation .item-grid.custom-color--5 .dot-wrap .dot {

    background: #d0021b!important

}



.bk-gradation .item-grid.custom-color--6 .dot-wrap .dot {

    background: #f5a623!important

}



.bk-gradation .item-grid.custom-color--7 .dot-wrap .dot {

    background: #7ed321!important

}



@media only screen and (max-width: 736px){

    .bk-gradation .item-grid .content{

        max-width: 100%;

        padding: 20px;

    }

}