h1{
   font-family: "Satisfy", sans-serif; /* ;"Trirong", sans-serif;*/
    font-size:25px;
    text-align: left;
    text-transform:capitalize;
    text-shadow: 4px 2px 2px rgb(50,50,50);
}
.service-box{
   position: relative;
   top:0;
   width:98%;
   left:0;   
   overflow: none;
   
   height:auto;
   perspective:1000px;
   -webkit-perspective:1000px;
  
   display:flex;
   align-items: center;
   justify-content: center;   
   transition: all .8s ease;   
}
.service-icon{
   display:inline-block;
   width: 300px;
   margin-top:10px;
   height:330px;
   padding-right:20px;
   box-shadow: 4px 4px 8px rgb(50,50,50);

   transition: all .8s ease;
   overflow: hidden;
   -moz-overflow: hidden;
}

.service-icon img{
   margin-left:2%;
   margin-right:1%;
   margin-bottom:0;
}

.service-content{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   opacity: 0;
   width: 94%;
   height:auto;
  
   top: 10%;
   left: 5%;
   transform: translate(-5%,10%);

   background-size: contain;
   
   transition: all .8s ease;

   backface-visibility:hidden;
   transform-style: preserve-3d;
   -webkit-transform: translateY(110px) rotateX(-90deg); /* translateY(110px) */
   -moz-transform: translateY(110px) rotateX(-90deg);
   -ms-transform: translateY(110px) rotateX(-90deg);
   -o-transform: translateY(110px) rotateX(-90deg);
   transform: translateY(110px) rotateX(-90deg);
   overflow-y:scroll; 
}

.front-content {
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
   margin-top:50%;
   width: 94%;
   height:250px;   
}
.service-box .service-icon .front-content{
   position: relative;
   
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   height:auto;
   width:95%;
}

.service-box .service-icon .front-content h3 {
   font-family:  "Trirong", sans-serif;/*"Satisfy", sans-serif;*/
   font-size: 14px;
   color: rgb(138, 28, 0);
   text-align: center;
   
   text-transform: uppercase;
   text-shadow: 1px 1px 2px rgb(255, 72, 0);
}
.service-box .service-content h3 {
    font-family: "Parisienne", sans-serif;
    font-size: 14px;
   font-weight: 700;
   color: #fff;
   margin-bottom:10px;
   text-transform: uppercase;
}
.service-box .service-content p {
   font-size: 14px;
   color: #b1b1b1;
   margin:0;
   
}
.baillet{background-color: #ae642d;}
.orange{background-color: #fc7f0c;}
.red{background-color: #e84b3a;}
.grey{background-color: #474747;}
.orchidee{background-color:#da70d6;}
.blue{background-color: #0261ce;}
.mauve{background-color: #6d01d3;}
.olivedrab{background-color: #6B8E23;}
.turquoise{background-color:#01ad9c}
.lavande {background-color: #9683ec ;}
.blanc {background-color: #fff ;}

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