h1 {

    font-size: 25px;

    text-align: left;

    text-transform: capitalize;

}



.service-box {

    position: relative;

    overflow: hidden;

    margin-bottom: 10px;

    perspective: 1000px;

    -webkit-perspective: 1000px;

    opacity: 0.7;

}



.service-icon {

    width: 100%;

    height: 300px;

    padding: 20px;

    text-align: center;

    transition: all .5s ease;

}



.service-content {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    opacity: 0;

    width: 100%;

    height: 400px;

    padding: 20px;

    text-align: center;

    transition: all .5s ease;

    background-color: #474747;

    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);

    color: #ffffff;

}



.service-box .service-icon .front-content {

    position: relative;

    top: 80px;

    -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: #ffffff;

    font-weight: normal;

}



.service-box .service-icon .front-content h3 {

    font-size: 25px;

    color: #8000FF;

    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-color: #ffffff;

}



.orange {

    background-color: #ffffff;

}



.red {

    background-color: #ffffff;

}



.grey {

    background-color: #ffffff;

}



.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);

    color: #fff;

}