@-webkit-keyframes servicebox {
    0% {
        transform: scale(1) perspective(400) rotateX(27deg) translateY(0em) translateZ(1em);
        -webkit-transform: scale(1) perspective(400) rotateX(27deg) translateY(0em) translateZ(1em);
    }
    50% {
        transform:         scale(1.11) perspective(400) rotateX(17deg)  rotateZ(10deg) translateY(6em) translateZ(1.1em);
        -webkit-transform: scale(1.11) perspective(400) rotateX(17deg)  rotateZ(10deg) translateY(6em) translateZ(1.1em);
    }
    80% {
        transform:         scale(1.11) perspective(400) rotateX(-17deg) rotateZ(-10deg) translateY(5em) translateZ(1.1em);
        -webkit-transform: scale(1.11) perspective(400) rotateX(-17deg) rotateZ(-10deg) translateY(5em) translateZ(1.1em);
    }
    100% {
        transform: scale(1) perspective(400) rotateX(-10deg) translateY(0em) translateZ(1em);
        -webkit-transform: scale(1) perspective(400) rotateX(-10deg) translateY(0em) translateZ(1em);
    }
}

@keyframes  servicebox {
    0% {
        transform: scale(1) perspective(400) rotateX(27deg) translateY(0em) translateZ(1em);
        -webkit-transform: scale(1) perspective(400) rotateX(27deg) translateY(0em) translateZ(1em);
    }
    50% {
        transform:         scale(1.11) perspective(400) rotateX(17deg)  rotateZ(10deg) translateY(6em) translateZ(1.1em);
        -webkit-transform: scale(1.11) perspective(400) rotateX(17deg)  rotateZ(10deg) translateY(6em) translateZ(1.1em);
    }
    80% {
        transform:         scale(1.11) perspective(400) rotateX(-17deg) rotateZ(-10deg) translateY(5em) translateZ(1.1em);
        -webkit-transform: scale(1.11) perspective(400) rotateX(-17deg) rotateZ(-10deg) translateY(5em) translateZ(1.1em);
    }
    100% {
        transform: scale(1) perspective(400) rotateX(-10deg) translateY(0em) translateZ(1em);
        -webkit-transform: scale(1) perspective(400) rotateX(-10deg) translateY(0em) translateZ(1em);
    }
}

@media( min-width: 900px){
    .service-blog {
        -webkit-transform: perspective(500);
        -webkit-transform-style: preserve-3d;
        -webkit-transition: .3s;
        height: 250px;
    }

    .service-blog:hover {
        -webkit-animation: servicebox 3200ms ease-in-out;
        animation: servicebox 3200ms ease-in-out;
    }
    .service-blog:hover {
        z-index: 9999999999 !important;
    }

    .service-blog-caption-def {
        background-image: url(/assets/images/service-texture.png);
        background-color: #FFBD1F;
        color: #fff;
    }

    /**################## RIGHT CAPTION #################*****/

    .service-caption-right {
        -webkit-transform: rotateY(-90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 0;
        right: 15px;
        height: 80.15%;
        width: 23%;
    }
    .service-caption-right-right {
        -webkit-transform: rotateY(-180deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 0;
        right: 4%;
        height: 90.15%;
        width: 5%;
    }

    .service-caption-right-right-side {
        -webkit-transform: rotateY(-90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 0;
        right: -1%;
        height: 97.15%;
        width: 12%;
        bottom: 10%;
    }


    /**################## TOP CAPTION #################*****/
    .service-caption-top {
        -webkit-transform: rotateX(-90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 2em;
        width: 93%;
        top: 0;
        height: 35%;
    }
    .service-caption-top-top {
        -webkit-transform: rotateX(0deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 0.5em;
        width: 98.5%;
        top: -7%;
        height: 7%;
        right: -1%;
    }
    .service-caption-top-top-side {
        -webkit-transform: rotateX(250deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 0.5em;
        width: 100%;
        top: -7%;
        right: -1%;
        height: 25%;
    }

    /***################### LEFT CAPTION ##############****/


    /**################## BOTTOM CAPTION #################*****/
    .service-caption-bottom {
        padding: 1.5em;
        -webkit-transform: rotateX(-90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        height: 35%;
        width: 100.2%;
    }
    .service-caption-bottom-bottom {
        padding: 0.5em;
        -webkit-transform: rotateX(-180deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        height: 10%;
        /* position: absolute; */
        width: 92.2%;
        position: absolute;
        bottom: 0;
    }
    .service-caption-bottom-bottom-side {
        padding: 0.5em;
        -webkit-transform: rotateX(-90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        height: 20%;
        /* position: absolute; */
        width: 99%;
        right: 0%;
        position: absolute;
        bottom: -10%;
    }
}

@media(min-width: 1200px){
    .service-caption-left-left {
        -webkit-transform: rotateY(0deg) rotateZ(90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 0.5em;
        width: 61.9%;
        bottom: 3%;
        left: -56%;
        height: 7.3%;
    }
    .service-caption-left {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 2em;
        width: 51%;
        bottom: -15%;
        left: -47%;
        height: 35.3%;
    }

}
@media(min-width: 900px) and (max-width: 1200px){
    .service-caption-left-left {
        -webkit-transform: rotateY(0deg) rotateZ(90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 0.5em;
        width: 74.5%;
        bottom: 3%;
        left: -67.5%;
        height: 7.3%;
    }

    .service-caption-left {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transition: .5s;
        position: absolute;
        padding: 2em;
        width: 61%;
        bottom: -15%;
        left: -54%;
        height: 35.3%;
    }
}

@media (max-width: 900px){
    .service-caption-bottom, .service-caption-top,.service-caption-left, .service-caption-right {
        display: none;
    }
    .service-blog {
        margin-bottom: 40px;
    }
}


.magic-shadow {
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
}