.service-content,.service-icon {
    width: 100%;
    padding: 20px;
    transition: .5s;
    text-align: center
}

:root {
    --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 1s
}

@-webkit-keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(25%)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(25%)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@-webkit-keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-25%)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-25%)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@-webkit-keyframes slideInleft {
    0% {
        opacity: 0;
        transform: translateX(25%)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes slideInleft {
    0% {
        opacity: 0;
        transform: translateX(25%)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@-webkit-keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(-25%)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(-25%)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(.75)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(.75)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@-webkit-keyframes zoomReverseIn {
    0% {
        opacity: 0;
        transform: scale(1.25)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes zoomReverseIn {
    0% {
        opacity: 0;
        transform: scale(1.25)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@-webkit-keyframes flipInY {
    0% {
        opacity: 0;
        transform: perspective(90vw) rotateY(67.5deg)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes flipInY {
    0% {
        opacity: 0;
        transform: perspective(90vw) rotateY(67.5deg)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

[data-animation] {
    opacity: 1;
    -webkit-animation-timing-function: var(--animation-timing-function);
    animation-timing-function: var(--animation-timing-function);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: var(--animation-duration);
    animation-duration: var(--animation-duration);
    will-change: transform,opacity
}

.animations-disabled,.animations-disabled [data-animation] {
    -webkit-animation: none!important;
    animation: none!important;
    opacity: 1!important
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

.slideInLeft {
    -webkit-animation-name: slideInleft;
    animation-name: slideInleft
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

.zoomReverseIn {
    -webkit-animation-name: zoomReverseIn;
    animation-name: zoomReverseIn
}

.flipInY {
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

.flipOutY {
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
    animation-direction: reverse
}

h1 {
    font-size: 25px;
    text-align: left;
    text-transform: capitalize
}

.service-box {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    border-radius: 10px;
    cursor: pointer
}

.service-icon {
    height: 180px
}

.service-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    height: 220px;
    background: #ffc107;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform: translateY(110px) rotateX(-90deg);
    -moz-transform: translateY(110px) rotateX(-90deg);
    -ms-transform: translateY(110px) rotateX(-90deg);
    -o-transform: translateY(110px) rotateX(-90deg);
    transform: translateY(110px) rotateX(-90deg)
}

.service-box .service-icon .front-content {
    position: relative;
    top: 70px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.service-box .service-icon .front-content i {
    font-size: 28px;
    color: #fff;
    font-weight: 400
}

.service-box .service-icon .front-content h3 {
    font-size: 15px;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase
}

.service-box .service-content h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase
}

.service-box .service-content p {
    font-size: 13px;
    color: #b1b1b1;
    margin: 0
}

.yellow {
    background-position: center left;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background: radial-gradient(circle,#36348d,#2e2c7f,#262471,#1e1c64,#161457);
}

.orange {
    background-color: #fc7f0c
}

.red {
    background-color: #e84b3a
}

.grey {
    background-color: #474747
}

.service-box:hover .service-icon {
    opacity: 0;
    -webkit-transform: translateY(-110px) rotateX(90deg);
    -moz-transform: translateY(-110px) rotateX(90deg);
    -ms-transform: translateY(-110px) rotateX(90deg);
    -o-transform: translateY(-110px) rotateX(90deg);
    transform: translateY(-110px) rotateX(90deg)
}

.service-box:hover .service-content {
    opacity: 1;
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0)
}

.blink-soft {
    animation: 2s linear infinite blinker
}

@keyframes blinker {
    50% {
        opacity: 0
    }
}

span.txt-rotate {
    font-family: 'oswald'!important
}

.imgmove {
    animation: 1s ease-in-out infinite alternate swing;
    transform-origin: center -20px
}

@keyframes swing {
    0% {
        transform: rotate(3deg)
    }

    100% {
        transform: rotate(-3deg)
    }
}

img.vert-move {
    -webkit-animation: 1s infinite alternate mover;
    animation: 1s infinite alternate mover
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-50px)
    }
}

@keyframes mover {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-50px)
    }
}