/* Type 1 */

.css-demo-title.type-1 {
    color : #ffffff;
    background : #ffa500;
}

.css-col.type-1 {
    position : relative;
    overflow : hidden;
    margin : 40px 0;
    padding : 10px;
    transition : all .4s ease;
    box-shadow : 1px 2px 10px rgba(0, 0, 0, .18);
}

.css-col.type-1 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 130px;
    height : 130px;
    margin : 20px;
    color : #ffa500;
    border : solid;
    border-radius : 100%;
}

.css-col.type-1 h2 {
    margin-top : 0;
    margin-bottom : 15px;
    padding : 13px 0;
}

.css-col.type-1 p {
    padding : 0 17px 17px;
    color : #919191;
}

.css-col.type-1:after {
    position : absolute;
    z-index : -1;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    content : '';
    transition : all .4s ease;
    transform : translateY(100%);
    background : #ffa500;
}

.css-col.type-1:hover:after {
    transform : translateY(0%);
}

.css-col.type-1:hover .fa ,
.css-col.type-1:hover h2 ,
.css-col.type-1:hover p {
    color : #ffffff;
}

.css-col.type-1:hover .btn {
    color : #ffa500;
    background : #ffffff;
}

.css-col.type-1 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #ffffff;
    border-radius : 0;
    background : #ffa500;
}

/* Type 2 */

.css-demo-title.type-2 {
    color : #ffffff;
    background : #5656a6;
}

.css-section.background-1 {
    background : #5b5bae;
}

.css-col.type-2 {
    margin : 40px 0;
    padding : 10px;
    transition : all .4s ease;
}

.css-col.type-2 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 130px;
    height : 130px;
    margin : 20px;
    color : #ffa500;
    border : solid;
    border-radius : 100%;
}

.css-col.type-2 h2 {
    margin-top : 0;
    margin-bottom : 15px;
    padding : 13px 0;
}

.css-col.type-2 p {
    padding : 0 17px 17px;
    color : #919191;
}

.css-col.type-2:hover {
    transform : scale(.9,.9);
    background : #5656a6;
}

.css-col.type-2 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #3c3c3c;
    border-radius : 0;
    background : #ffffff;
}

.css-col.type-2:hover .btn {
    color : #ffffff;
    background : #5b5bae;
}

/* Type 3 */

.css-demo-title.type-3 {
    color : #ffffff;
    background : #24cf5f;
}

.css-col.type-3 {
    position : relative;
    overflow : hidden;
    margin : 40px 0;
    padding : 10px;
}

.css-col.type-3 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 130px;
    height : 130px;
    color : #24cf5f;
}

.css-col.type-3 h2 {
    margin-top : 0;
    margin-bottom : 0;
    padding : 13px 0;
}

.css-col.type-3 p {
    padding : 0 17px 17px;
    color : #919191;
}

.css-col.type-3:before {
    position : absolute;
    z-index : -1;
    bottom : 0;
    left : 0;
    box-sizing : border-box;
    width : 99.5%;
    height : 2px;
    content : '';
    transform : translateX(100%);
    border-bottom : 2px solid transparent;
    border-left : 2px solid transparent;
}

.css-col.type-3:after {
    position : absolute;
    z-index : -1;
    top : 0;
    left : 0;
    box-sizing : border-box;
    width : 99.5%;
    height : 2px;
    content : '';
    transform : translateX(-100%);
    border-top : 2px solid transparent;
    border-right : 2px solid transparent;
}

.css-col.type-3:hover:before {
    height : 100%;
    transition : .2s transform ease, .1s height ease .1s;
    transform : translateX(0);
    border-color : #24cf5f;
}

.css-col.type-3:hover:after {
    height : 100%;
    transition : .2s transform ease .2s, .1s height ease .3s;
    transform : translateX(0);
    border-color : #24cf5f;
}

.css-col.type-3 .btn {
    margin : 10px 0 20px;
    padding : 12px 35px;
    color : #ffffff;
    border-radius : 40px;
    background : #24cf5f;
}

.css-col.type-3 .btn:hover {
    color : #ffffff;
    background : #54ee89;
}

/* Type 4 */

.css-demo-title.type-4 {
    color : #ffffff;
    background : #e12573;
}

.css-col.type-4 {
    position : relative;
    overflow : hidden;
    margin : 40px 0;
    padding : 10px;
}

.css-col.type-4 .fa {
    font-size : 52px;
    line-height : 120px;
    float : left;
    width : 70px;
    height : 130px;
    margin-right : 40px;
    text-align : right;
    color : #e12573;
}

.css-col.type-4 h2 {
    margin-top : 0;
    margin-bottom : 0;
    padding : 13px 0;
}

.css-col.type-4 p {
    padding : 0 17px 17px;
    color : #919191;
}

.css-col.type-4:after {
    position : absolute;
    z-index : -1;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    content : '';
    transition : all .4s ease;
    transform : translateX(100%);
    background : #e12573;
}

.css-col.type-4:hover:after {
    transform : translateX(0%);
}

.css-col.type-4:hover .fa ,
.css-col.type-4:hover h2 ,
.css-col.type-4:hover p {
    color : #ffffff;
}

.css-col.type-4:hover .btn {
    background : #ff378a;
}

.css-col.type-4 .btn {
    margin : 10px 0 20px;
    padding : 12px 35px;
    color : #ffffff;
    border-radius : 40px;
    background : #e12573;
}


/* Type 5 */

.css-demo-title.type-5 {
    color : #ffffff;
    background : #1997d3;
}

.css-col.type-5 {
    margin : 40px 0;
    padding : 10px;
    transition : all .8s ease;
    outline : solid 2px #71d1ff;
    outline-offset : -10px;
    background : #20b7ff;
    box-shadow : 0 0 0 18px rgba(0, 0, 0, .15) inset;
}

.css-col.type-5 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 130px;
    height : 110px;
    color : #b7e8ff;
}

.css-col.type-5 h2 {
    margin-top : 0;
    margin-bottom : 15px;
    padding : 13px 0;
    color : #ffffff;
}

.css-col.type-5 p {
    padding : 0 17px 17px;
    color : #ffffff;
}

.css-col.type-5:hover {
    outline : solid 6px #71d1ff;
    box-shadow : 0 0 0 500px rgba(0, 0, 0, .15) inset;
}

.css-col.type-5 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #ffffff;
    border-radius : 0;
    background : #1997d3;
}

.css-col.type-5:hover .btn {
    color : #1997d3;
    background : #b7e8ff;
}

/* Type 6 */

.css-demo-title.type-6 {
    color : #ffffff;
    background : #19d3ca;
}

.css-col.type-6 {
    margin : 40px 0;
    padding : 10px;
}

.css-col-counter {
    position : relative;
    overflow : hidden;
    text-align : right;
    border-bottom : 1px solid #19d3ca;
}

.css-col-counter span {
    font-size : 72px;
    line-height : 72px;
    position : relative;
    top : 26px;
    display : inline-block;
    transition : all .4s ease;
    color : #e9e9e9;
}

.css-col-counter:after {
    position : absolute;
    right : 0;
    bottom : 0;
    display : block;
    width : 80px;
    content : '';
    -webkit-box-shadow : 0 6px 15px 5px rgba(50, 50, 50, .15);
       -moz-box-shadow : 0 6px 15px 5px rgba(50, 50, 50, .15);
            box-shadow : 0 6px 15px 5px rgba(50, 50, 50, .15);
}

.css-col.type-6 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 130px;
    height : 130px;
    margin : 20px;
    transition : all .8s ease;
    color : #ffffff;
    border-radius : 10px;
    background : #19d3ca;
}

.css-col.type-6 h2 {
    margin-top : 0;
    margin-bottom : 0;
    padding : 13px 0;
}

.css-col.type-6 p {
    padding : 17px 17px;
}

.css-col.type-6 .btn {
    margin : 10px 0 20px;
    padding : 12px 35px;
    color : #ffffff;
    border-radius : 0;
    border-radius : 40px;
    background : #19d3ca;
}

.css-col.type-6 .btn:hover {
    color : #ffffff;
    background : #16b0a8;
}

.css-col.type-6:hover .css-col-counter span {
    top : 0;
}

.css-col.type-6:hover .fa {
    transform : rotateY(180deg);
}

/* Type 7 */

.css-demo-title.type-7 {
    color : #ffffff;
    background : #2e4b9b;
}

.css-col.type-7 {
    position : relative;
    margin : 40px 0;
    padding : 10px;
}

.css-col.type-7 .fa {
    font-size : 142px;
    position : absolute;
    z-index : 0;
    top : 0;
    right : 0;
    margin : 20px;
    transition : all .4s ease;
    color : #8aa9ff;
}

.css-col.type-7 h2 {
    position : relative;
    z-index : 1;
    margin-top : 0;
    margin-bottom : 15px;
    padding : 62px 0;
}

.css-col.type-7 p {
    padding : 0 17px 17px;
    color : #919191;
}

.css-col.type-7:hover .fa {
    transform : translateX(-100%);
}

.css-col.type-7 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #ffffff;
    border-radius : 0;
    background : #2e4b9b;
}

.css-col.type-7 .btn:hover {
    color : #ffffff;
    background : #8aa9ff;
}

/* Type 8 */

.css-section.type-8 {
    background : #edf4f3;
}

.css-demo-title.type-8 {
    color : #ffffff;
    background : #ff4343;
}

.css-col.type-8 {
    margin : 40px 0;
    padding : 10px 2px;
    background : #ffffff;
}

.css-col.type-8 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 130px;
    height : 130px;
    margin : 20px;
    transition : all .4s ease;
    color : #ff4343;
    border : solid 1px #e5e5e5;
    border-radius : 100%;
    box-shadow : 5px 5px 3px #dddddd;
}

.css-col.type-8 h2 {
    margin-top : 0;
    margin-bottom : 15px;
    padding : 13px 0;
    transition : all .4s ease;
    background : linear-gradient(to right, #edf4f3 50%, #ff4343 50%);
    background-position : left;
    background-size : 200% 100%;
}

.css-col.type-8 p {
    padding : 0 17px 17px;
    color : #919191;
}

.css-col.type-8:hover .fa {
    box-shadow : -5px 7px 3px #dddddd;
}

.css-col.type-8:hover h2 {
    color : #ffffff;
    background-position : right;
}

.css-col.type-8 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #ffffff;
    border-radius : 0;
    border-radius : 40px;
    background : #ff4343;
}

.css-col.type-8 .btn:hover {
    color : #ffffff;
    background : #e33939;
}

/* Type 9 */

.css-demo-title.type-9 {
    color : #ffffff;
    background : #c0df19;
}

.css-col.type-9 {
    margin : 90px 0 40px;
    padding : 10px;
    background : #F1DCB1;
}

.css-col.type-9 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 130px;
    height : 130px;
    margin : -90px 20px 20px;
    transition : all .4s ease;
    color : #c0df19;
    border : solid 1px #ffffff;
    /*border-radius : 100%;*/
    background : #ffffff;
}

.css-col.type-9 h2 {
    margin-top : 0;
    margin-bottom : 15px;
    padding : 13px 0;
}

.css-col.type-9 p {
    padding : 0 17px 17px;
    color : #222222;
}

.css-col.type-9:hover .fa {
    color : #ffffff;
    background : #c0df19;
}

.css-col.type-9 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #222222;
   /* border-radius : 40px;*/
    background : #ffffff;
}

.css-col.type-9 .btn:hover {
    color : #222222;
    background : #e0e0e0;
}

/* Type 10 */

.css-demo-title.type-10 {
    color : #222222;
    background : #816ee7;
}

.css-col.type-10 {
    margin : 40px 0;
    padding : 10px 2px;
    transition : all .4s ease;
    border-radius : 40px 0;
    background : #816ee7;
}

.css-col.type-10 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 100%;
    height : 130px;
    margin : 20px 0;
    color : #533dcd;
    background : #ffffff;
}

.css-col.type-10 h2 {
    margin-top : 0;
    margin-bottom : 0;
    padding : 8px 0;
    color : #222222;
	font-size:1.3em;
}

.css-col.type-10 p {
    padding : 0 17px 17px;
    color : #222222;
}

.css-col.type-10:hover {
    border-radius : 0 40px;
}

.css-col.type-10 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #222222;
    border-radius : 0px;
    background : #533dcd;
}

.css-col.type-10 .btn:hover {
    color : #ffffff;
    background : #4932c0;
}

/* Type 11 */

.css-demo-title.type-11 {
    color : #ffffff;
    background : #ee12a0;
}

.css-col.type-11 {
    position : relative;
    margin : 90px 0 40px;
    padding : 70px 2px 74px;
    transition : all .4s ease;
    border : solid 1px #ee12a0;
    border-radius : 100%;
    background : #ffffff;
}

.css-col.type-11 .fa {
    font-size : 52px;
    line-height : 107px;
    position : absolute;
    top : -90px;
    left : 50%;
    width : 110px;
    height : 110px;
    margin : 20px 0;
    transition : all .4s ease;
    transform : translateX(-50%);
    color : #ffffff;
    border-radius : 100%;
    background : #ee12a0;
}

.css-col.type-11 h2 {
    margin-top : 0;
    margin-bottom : 18px;
    padding : 8px 0;
}

.css-col.type-11 p {
    padding : 0 17px 17px;
}

.css-col.type-11 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #ffffff;
    border-radius : 40px;
    background : #ee12a0;
}

.css-col.type-11:hover {
    background : #ee12a0;
}

.css-col.type-11:hover .fa {
    color : #ee12a0;
    background : #ffffff;
}

.css-col.type-11:hover h2 ,
.css-col.type-11:hover p {
    color : #ffffff;
}

.css-col.type-11:hover .btn {
    color : #ffffff;
    background : #d71a94;
}

/* Type 12 */

.css-demo-title.type-12 {
    color : #ffffff;
    background : #12daee;
}

.css-col.type-12 {
    position : relative;
    overflow : hidden;
    margin : 49px 0 40px;
    padding : 20px;
    transition : all .4s ease;
    background : #edfdff;
}

.css-col.type-12 .fa {
    font-size : 52px;
    line-height : 107px;
    float : right;
    width : 110px;
    height : 110px;
    margin : 20px 0;
    color : #12daee;
    border-radius : 100%;
    background : #ffffff;
    box-shadow : -3px -2px 5px #cdcdcd inset;
}

.css-col.type-12 h2 {
    position : absolute;
    top : 10px;
    margin-top : 0;
    margin-bottom : 18px;
    padding : 8px 0;
}

.css-col.type-12 p {
    padding : 46px 0 17px;
    text-align : left;
}

.css-col.type-12 .btn {
    display : block;
    width : 145px;
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #ffffff;
    border-radius : 40px;
    background : #12daee;
}

.css-col.type-12:after {
    position : absolute;
    z-index : -1;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    content : '';
    transition : all .4s ease;
    transform : rotateZ(90deg) translateX(100%);
    background : #12daee;
}

.css-col.type-12:hover:after {
    transform : rotateZ(0deg) translateX(0%);
}

.css-col.type-12:hover {
    background : transparent;
}

.css-col.type-12:hover h2 ,
.css-col.type-12:hover p {
    color : #ffffff;
}

.css-col.type-12:hover .btn {
    color : #12daee;
    background : #edfdff;
}

/* Type 13 */

.css-demo-title.type-13 {
    color : #ffffff;
    background : #1ce6ae;
}

.css-col.type-13 {
    position : relative;
    overflow : hidden;
    margin : 49px 0 40px;
    padding : 20px;
    transition : all .4s ease;
    background : #eeeeee;
}

.css-col.type-13 .fa {
    font-size : 52px;
    line-height : 107px;
    position : absolute;
    top : -46px;
    left : -24px;
    width : 110px;
    height : 110px;
    margin : 20px 0;
    color : #ffffff;
    border-radius : 100%;
    background : #1ce6ae;
    box-shadow : 0 0 0 10px #e9e9e9;
}

.css-col.type-13 h2 {
    margin-top : 0;
    margin-bottom : 18px;
    padding : 8px 0;
    transition : all .4s ease;
    text-align : right;
}

.css-col.type-13 p {
    padding : 20px 0 17px;
    transition : all .4s ease;
    text-align : left;
}

.css-col.type-13 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #ffffff;
    border-radius : 40px;
    background : #1ce6ae;
}

.css-col.type-13:after {
    position : absolute;
    z-index : -1;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    content : '';
    transition : all .4s ease;
    transform : translateY(-100%) translateX(-100%);
    background : #1ce6ae;
}

.css-col.type-13:hover:after {
    transform : translateY(0%) translateX(0%);
}

.css-col.type-13:hover {
    background : transparent;
}

.css-col.type-13:hover h2 ,
.css-col.type-13:hover p {
    color : #ffffff;
}

.css-col.type-13:hover .btn {
    color : #ffffff;
    background : #19bb8e;
}

/* Type 14 */

.css-demo-title.type-14 {
    color : #ffffff;
    background : #ff408f;
}

.css-col.type-14 {
    position : relative;
    margin : 40px 0;
    padding : 0;
    background : #ff408f;
}

.css-col.type-14:after {
    position : absolute;
    z-index : -1;
    right : 0;
    bottom : -30px;
    left : 0;
    height : 90px;
    content : '';
    transform : skewY(5deg);
    background : #ff408f;
}

.css-col.type-14 .fa {
    font-size : 52px;
    line-height : 107px;
    width : 110px;
    height : 110px;
    margin : 20px 0;
    color : #ffffff;
    border-radius : 100%;
    background : #fd6faa;
    box-shadow : 0 0 0 10px rgba(255, 255, 255, .12);
}

.css-col.type-14 h2 {
    position : relative;
    z-index : 1;
    margin-top : 0;
    margin-bottom : 18px;
    padding : 20px;
    color : #ff408f;
    background : #ffffff;
}

.css-col.type-14 h2:before {
    position : absolute;
    z-index : -1;
    top : 0;
    right : 0;
    left : 0;
    height : 90px;
    content : '';
    transform : skewY(5deg);
    background : #ffffff;
}

.css-col.type-14 p {
    padding : 20px 20px 17px;
    text-align : left;
    color : #ffffff;
}

.css-col.type-14 .btn {
    margin : 10px 20px 20px;
    padding : 14px 35px;
    color : #ffffff;
    border-radius : 0;
    background : #fd6faa;
}

.css-col.type-14 .btn:hover {
    color : #ffffff;
    background : #e03079;
}

.css-col.type-14:hover {
    animation : flipZoomOut 1s forwards 1;
}

@keyframes flipZoomOut {
    0% {
        transform : scale(1,1);
    }
    20% {
        transform : scale(.8,.8);
    }
    100% {
        transform : scale(1,1);
    }
}

.css-col.type-14:hover .fa {
    animation : ripple 1s infinite;
}

@keyframes ripple {
    0% {
        box-shadow : 0 0 0 10px rgba(255, 255, 255, .5);
    }
    40% {
        box-shadow : 0 0 0 15px rgba(255, 255, 255, .4);
    }
    80% {
        box-shadow : 0 0 0 10px rgba(255, 255, 255, .5);
    }
    100% {
        box-shadow : 0 0 0 15px rgba(255, 255, 255, .4);
    }
}

/* Type 15 */

.css-demo-title.type-15 {
    color : #ffffff;
    background : #44DDFF;
}

.css-col.type-15 {
    padding: 0px;
    position: relative;
    overflow: hidden;
    transition: all .4s ease;
}

.css-col.type-15:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #9b9b9b;

    z-index: -1;
    transform: rotateX(90deg) translateY(100%);
    transition: all .8s ease;
}

.css-col.type-15 .fa {
    font-size: 50px;
    padding: 20px 0 0;
}

.css-col.type-15 .btn {
    border: solid 2px;
    margin: 20px;
    padding: 10px 20px;
    color: #000;
}

.css-col.type-15:hover:after {
    transform: rotateX(0deg) translateY(0%);
}

.css-col.type-15:hover .fa {
    animation: hinge 1.4s infinite forwards;
}

@keyframes hinge {
    0% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(-5px);
    }
}

/* Type 16 */

.css-demo-title.type-16 {
    background: #E1E1E1;
}

.css-col.type-16 {
    position: relative;
    overflow: hidden;
}

.css-col.type-16:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(74, 98, 128, 0.44);
    transform: translateY(0);
    transition: all .4s ease;
    z-index: 0;
}

.css-col.type-16:hover:before {
    transform: translateY(-100%);
}

.css-col.type-16:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    transition: all .4s ease;
    z-index: 0;
}

.css-col.type-16:hover:after {
    transform: translateY(0);
}

.css-col.type-16 .data {
    position: absolute;
    bottom: 20px;
    z-index: 1;
    color: #fff;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.css-col.type-16 .data h2 {
    margin-bottom: 20px;
}

.css-col.type-16 .data .btn {
    display: none;
    padding: 10px 20px;
    color: #fff;
    width: 140px;
    margin: auto;
    background: linear-gradient(to right, #000 50%, #FFF 50%);
    background-size: 200% 100%;
    background-position: left;
    transition: all .2s ease;
    border: none;
}

.css-col.type-16 .data .btn:hover {
    background-position: right;
    color: #222222;
}

.css-col.type-16:hover .data .btn {
    display: block;
    animation: fadeInUp .4s 1 forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.css-col.type-16:hover .data h2 {
    animation: fadeInDown .4s 1 forwards;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.css-col.type-16:hover .data p {
    display: none;
}

/* Type 17 */

.css-demo-title.type-17 {
    background: rgba(0, 0, 0, 0.66);
	
}

.css-col.type-17 {
    position: relative;
    overflow: hidden;
	 
 
}

.css-col.type-17:before {
    content: '';
    position: absolute;
	background: #F4d29f;
	cursor:help;
	
	height:80px;
    top: 10;
    right: 0;
    bottom: 0;
    left: 0;
     opacity:0.9;
    transform: scale(1,1);
    transition: all .8s ease;
    z-index: 0;
}

.css-col.type-17:hover:before {
    transform: scale(0,0);
	
}

.css-col.type-17:after {
    content: '';
    position: absolute;
	cursor:help;
    top: 10;
    right: 0;
    bottom: 0;
    left: 0;
    background: #F4d29f;
	opacity:1;
    transform: scale(0,0);
    transition: all .4s ease;
    z-index: 0;
}

.css-col.type-17:hover:after {
    transform: scale(1,1);
}

.css-col.type-17 .data {
    position: absolute;
	margin-top:30px;
    /*bottom: 20px;*/
    z-index: 1;
    color: #222222;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
	
}

.css-col.type-17 .data h2 {
    margin-bottom: 20px;
}
.css-col.type-17 .data h3 {
    margin-bottom: 10px;
}
.css-col.type-17 .data h4 {
    /*margin-bottom: 10px;*/
	text-transform: uppercase;
}

.css-col.type-17 .data p,
.css-col.type-17 .data .btn {
    display: none;
}

.css-col.type-17:hover .data p,
.css-col.type-17:hover .data .btn {
    display: block;
}

.css-col.type-17:hover .data {
    animation: zoomIn .4s 1 forwards;
} 

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0,0);
    }
    100% {
        opacity: 1;
        transform: scale(1,1);
    }
}

.css-col.type-17 .data .btn {
    padding: 10px 20px;
    color: #222222;
    width: 140px;
    margin: 20px auto auto;
    background: linear-gradient(to top, transparent 50%, #FFF 50%);
    background-size: 100% 200%;
    background-position: bottom;
    transition: all .2s ease;
    border: solid 2px;
    border-radius: 0;
}

.css-col.type-17 .data .btn:hover {
    background-position: top;
    color: #000;
    border-color: #fff;
}

/* Type 18 */

.css-demo-title.type-18 {
    background: #FFD356;
}

.css-col.type-18 {
    position: relative;
    overflow: hidden;
}

.css-col.type-18:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(66, 65, 16, 0.44);
    transform: translateY(0);
    transition: all .4s ease;
    z-index: 0;
}

.css-col.type-18:hover:before {
    transform: translateY(-100%);
}

.css-col.type-18:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(66, 65, 16, 0.66);
    transform: translateY(100%);
    transition: all .4s ease;
    z-index: 0;
}

.css-col.type-18:hover:after {
    transform: translateY(0);
}

.css-col.type-18 .data {
    position: absolute;
    bottom: 20px;
    z-index: 1;
    color: #fff;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.css-col.type-18 .data h2 {
    margin-bottom: 20px;
}

.css-col.type-18 .data p,
.css-col.type-18 .data .btn {
    display: none;
}

.css-col.type-18:hover .data p,
.css-col.type-18:hover .data .btn {
    display: block;
}

.css-col.type-18:hover .data {
    animation: fadeInUp .4s 1 forwards;
}

.css-col.type-18 .data .btn {
    padding: 10px 20px;
    color: #fff;
    width: 140px;
    margin: 20px auto auto;
    background: linear-gradient(to bottom, transparent 50%, #FFF 50%);
    background-size: 100% 200%;
    background-position: top;
    transition: all .2s ease;
    border: solid 2px;
    border-radius: 40px;
}

.css-col.type-18 .data .btn:hover {
    background-position: bottom;
    color: #000;
    border-color: #fff;
}

/* Type 19 variacion type 10 */

.css-demo-title.type-19 {
    color : #222222;
    background : #816ee7;
}

.css-col.type-19 {
    margin : 40px 0;
    padding : 10px 2px;
    transition : all .4s ease;
    border-radius : 40px 0;
    background : #816ee7;
}

.css-col.type-19 .fa {
    font-size : 52px;
    line-height : 120px;
    width : 100%;
    height : 130px;
    margin : 20px 0;
    color : #533dcd;
    background : #ffffff;
}

.css-col.type-19 h2 {
    margin-top : 0;
    margin-bottom : 0;
    padding : 8px 0;
    color : #222222;
	font-size:1.3em;
}

.css-col.type-19 p {
    padding : 0 17px 17px;
    color : #222222;
}

.css-col.type-19:hover {
    border-radius : 0 40px;
}

.css-col.type-19 .btn {
    margin : 10px 0 20px;
    padding : 14px 35px;
    color : #222222;
    border-radius : 0px;
    background : #533dcd;
}

.css-col.type-19 .btn:hover {
    color : #ffffff;
    background : #4932c0;
}