.skew-menu ul li {
     display: inline-block;
     background: #ffffff26;
     padding: 5px 15px;
     margin-left: 5px;
     transform: skew(-20deg);
     border-left: 2px solid #626262;
     float: right;
     margin: 0;
     position: relative;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
}
 .skew-menu ul li:hover {
     background: #ffffff12;
}
 .skew-menu ul li a {
     display:inline-block;
     transform: skew(20deg);
     line-height: 35px;
}
 .bk-service-0{
   background: #D9D9D9;
}
 .bk-service-1{
   background: #c4c4c4;
}
 .bk-service-2{
   background: #D9D9D9;
}
 .bk-service-3{
   background: #c4c4c4;
}
 .bk-service-4{
   background: #D9D9D9;
}
 .bk-service-5{
   background: #c4c4c4;
}
 .bk-service-6{
   background: #D9D9D9;
}
 .box-accessory{
     background-color: #222;
     font-family: 'Open Sans', sans-serif;
     overflow: hidden;
     position: relative;
     box-shadow: 0 0 10px rgba(0,0,0,0.2)
}
 .box-accessory:before, .box-accessory:after{
     content: '';
     background: #0dbae8;
     width: 10px;
     height: 90%;
     box-shadow: 15px 0 0 #0dbae8;
     transform: skewY(50deg);
     position: absolute;
     bottom: -100%;
     left: 5px;
     z-index: 1;
     transition: all 0.45s ease;
}
 .box-accessory:after{
     box-shadow: -15px 0 0 #0dbae8;
     left:auto;
     right: 5px;
     bottom: auto;
     top: -100%;
}
 .box-accessory:hover:before{
     bottom: -10px;
}
 .box-accessory:hover:after{
     top: -10px;
}
 .box-accessory img{
     width: 100%;
     height: auto;
     transition: all 0.45s;
}
 .box-accessory:hover img{
     opacity: 0.3;
     filter: grayscale(90%);
}
 .box-accessory .box-accessory-content{
     color: #fff;
     text-align: center;
     width: 100%;
     padding: 0 30px;
     opacity: 0;
     transform: translateX(-50%) translateY(-50%);
     position: absolute;
     top: 50%;
     left: 50%;
     transition: all 0.45s ease;
}
 .box-accessory:hover .box-accessory-content{
     opacity: 1;
}
 .box-accessory .title{
     font-size: 23px;
     font-weight: 800;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin: 0 0 2px;
}
 .box-accessory .post{
     color: #0dbae8;
     font-size: 16px;
     text-transform: capitalize;
}
 .box-accessory .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     opacity: 0;
     transform: translateX(-50%) rotateX(90deg);
     transform-origin: bottom center;
     position: absolute;
     left: 50%;
     bottom: 10px;
     transition: all 0.3s ease;
}
 .box-accessory:hover .icon{
     opacity: 1;
     transform: translateX(-50%) rotateX(0);
}
 .box-accessory .icon li{
     display: inline-block;
     margin: 0 2px;
}
 .box-accessory .icon li a{
     color: #fff;
     background-color: #0dbae8;
     font-size: 14px;
     text-align: center;
     line-height: 35px;
     height: 35px;
     width: 35px;
     border-radius: 50%;
     display: block;
     transition: all 0.3s;
}
 .box-accessory .icon li a:hover{
     color: #0dbae8;
     background-color: #fff;
}
 @media only screen and (max-width:990px){
     .box-accessory {
         margin: 0 0 30px;
    }
}
 .box-service{
     font-family: 'Ubuntu', sans-serif;
     overflow: hidden;
     position: relative;
     z-index: 1;
     transition: all 0.3s ease-in-out;
     box-shadow: 0 0 10px rgba(102, 100, 100, 0.79);
     border-radius: 5px;
}
 .box-service:hover{
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
 .box-service:before{
     content: '';
     background-color: rgba(255,255,255,0.8);
     height: 100%;
     width: 50px;
     position: absolute;
     right: 15px;
     top: -100%;
     z-index: 1;
     transition: all 0.3s ease;
}
 .box-service:hover:before{
     top: 0;
}
 .box-service img{
     width: 100%;
     height: auto;
     transition: all 0.3s ease;
}
 .box-service:hover img{
     filter: hue-rotate(180deg);
}
 .box-service .box-service-content{
     color: #fff;
     background: rgba(0,0,0,0.85);
     text-align: left;
     width: calc(100% - 65px);
     padding: 15px;
     transform: translateY(-50%) scaleX(0);
     transform-origin: left center;
     position: absolute;
     top: 50%;
     left: 0;
     transition: all 0.3s ease-in-out;
}
 .box-service:hover .box-service-content{
     transform: translateY(-50%) scaleX(1);
}
 .box-service .title{
     font-size: 20px;
     font-weight: 800;
     font-style: italic;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin: 0 0 4px;
     color: #C90B0E
}
 .box-service .post{
     font-size: 15px;
     text-transform: capitalize;
     margin: 0 0 5px;
     display: block;
}
 .box-service .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     transform: translateY(-50%);
     position: absolute;
     top: 50%;
     right: 23px;
     z-index: 1;
}
 .box-service .icon li{
     transform: scale(0);
}
 .box-service:hover .icon li{
     transform: scale(1);
     transition: all 0.3s ease 0.1s;
}
 .box-service .icon li a{
     color: #fff;
     background: #111;
     font-size: 20px;
     text-align: center;
     line-height: 35px;
     height: 35px;
     width: 35px;
     margin: 10px 0;
     display: block;
     transition: all 0.3s ease;
}
 .box-service .icon li a:hover{
     color: #111;
     background-color: #e7e7e7;
}
 @media only screen and (max-width:990px){
     .box-service {
         margin: 0 0 30px;
    }
}
 .btn-box{
     color: #222;
     background-color: #e7e7e7;
     font-family: 'Prompt', sans-serif;
     font-size: 18px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     padding: 13px 25px;
     border: none;
     border-radius: 0;
     overflow: hidden;
     position: relative;
     z-index: 1;
     transition: all 0.5s;
}
 .btn-box:hover{
     color: #fff;
     text-shadow: 0 0 3px #333;
     box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
}
 .btn-box:before, .btn-box:after{
     content: "";
     background-color: #e7e7e7;
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
     z-index: -1;
     transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
}
 .btn-box:after{
     background-color: #4cd137;
     width: 100%;
     height: 0%;
     top: -10%;
     left: 0%;
     right: auto;
     bottom: auto;
     z-index: -2;
}
 .btn-box:hover:before{
     background-color: #e84118;
}
 .btn-box:hover:after{
     height: 100%;
     top: 101%;
}
 .btn-box.red:after{
     background-color: #e84118;
}
 .btn-box.red:hover:before{
     background-color: #e84118;
}
 .btn-box.blue:after{
     background-color: #0097e6;
}
 .btn-box.blue:hover:before{
     background-color: #0097e6;
}
 .btn-box.purple:after{
     background-color: #6c5ce7;
}
 .btn-box.purple:hover:before{
     background-color: #6c5ce7;
}
 @media only screen and (max-width: 767px){
     .btn-box{
         margin-bottom: 20px;
    }
}
 .clients .owl-item img{
     border: 1px solid #ddd;
     box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* ------------------------- */
 .list-service{
     background-color: #000;
     overflow: hidden;
     position: relative;
     z-index: 1;
     transition: all 0.3s ease 0.3s;
     margin-bottom: 20px;
     box-shadow: 0px 2px 6px 0px #ddd;
     border: 1px solid #ddd;
}
 .list-service:hover{
     background-color: #c90b0e;
     box-shadow: 0px 10px 10px 0px #555;
     border: 1px solid #c9c9c9;
}
 .list-service:before, .list-service:after, .list-service .list-service-content:before, .list-service .list-service-content:after{
     content: '';
     background-color: #c90b0e;
     width: 100%;
     height: 5px;
     position: absolute;
     top: 0;
     left: -100%;
     transition: all 0.4s ease-in;
}
 .list-service:after{
     top: auto;
     bottom: 0;
     left: 100%;
}
 .list-service .list-service-content:before{
     width: 5px;
     height: 100%;
     top: 100%;
     left: 0;
}
 .list-service .list-service-content:after{
     width: 5px;
     height: 100%;
     top: -100%;
     left: auto;
     right: 0;
}
 .list-service:hover:before, .list-service:hover:after{
     opacity: 0.2;
     left: 0;
}
 .list-service:hover .list-service-content:before, .list-service:hover .list-service-content:after{
     opacity: 0.2;
     top: 0;
}
 .list-service img{
     width: 100%;
     height: auto;
     transition: all 0.3s ease;
}
 .list-service:hover img{
     opacity: 0.35;
}
 .list-service .list-service-content{
     color: #fff;
     height: 100%;
     width: 100%;
     padding: 15px 0 0 15px;
     opacity: 0;
     position: absolute;
     top: 100%;
     left: 0;
     transition: all 0.45s ease;
}
 .list-service:hover .list-service-content{
     opacity: 1;
     top: 0;
}
 .list-service .title{
     font-size: 22px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     text-shadow: 0 0 10px rgba(0,0,0,0.5);
     margin: 0 0 4px;
}
 .list-service .title a{
     color: #fff
}
 .list-service:hover .title a{
     color: #fff;
     text-shadow: #474747 3px 5px 2px;
}
 .list-service .post{
     font-size: 16px;
     letter-spacing: 1px;
     text-transform: lowercase;
     text-shadow: 0 0 10px rgba(0,0,0,0.5);
     margin: 0 0 5px;
     display: block;
}
 .list-service .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     opacity: 0;
     transform: rotate(-45deg);
     position: absolute;
     bottom: 15px;
     right: 15px;
     transition: all 0.4s cubic-bezier(0.6, -0.8, 0.735, 0.045);
}
 .list-service:hover .icon{
     opacity: 1;
     transform: rotate(0deg);
}
 .list-service .icon li{
     display: inline-block;
}
 .list-service .icon li a{
     color: #fff;
     background-color: #c90b0e;
     font-size: 16px;
     text-align: center;
     line-height: 38px;
     width: 40px;
     height: 40px;
     margin: 0 5px;
     border-radius: 50%;
     border: 2px solid #fff;
     display: block;
     position: relative;
     transition: all 0.3s ease 0s;
}
 .list-service .icon li a:hover{
     box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
 .list-service .icon li a:hover:after{
     content: "";
     width: 100%;
     height: 100%;
     border-radius: 50%;
     position: absolute;
     top: 0;
     left: 0;
     animation: animate 0.5s ease-out 75ms;
}
 @keyframes animate{
     0%{
         opacity: 0.3;
    }
     40%{
         opacity: 0.5;
         box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
    }
     100%{
         box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
         transform: scale(1.5);
         opacity: 0;
    }
}
 @media only screen and (max-width:990px){
     .list-service {
         margin: 0 0 30px;
    }
}
/* ------------------------- */
 .box-gallery{
     position: relative;
     text-align: center;
     overflow: hidden;
     transition: all 0.3s ease 0.3s;
     margin-bottom: 20px;
     box-shadow: 0px 2px 6px 0px #ddd;
     border: 1px solid #ddd;
}
 .box-gallery:hover{
     background-color: #c90b0e;
     box-shadow: 0px 10px 10px 0px #555;
     border: 1px solid #c9c9c9;
}


.box-gallery.nobk2:hover{
    background-color: #fff;
}
.nobk2 .blog__title{
   font-size: 22px;
   padding: 15px 0;
   margin: 0;
  }
 .box-gallery img{
     width: 100%;
     height: auto;
}
 .box-gallery .option{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transition: all 0.5s ease 0s;
}
 .box-gallery:hover .option{
     background: rgba(0, 0, 0 ,0.8);
}
 .box-gallery .link{
     border: 4px solid #fff;
     position: relative;
     top: 0;
     width: 100%;
     height: 100%;
     line-height: 40px;
     font-size: 18px;
     display: inline-block;
     color: #fff;
     transition: all 0.5s ease 0s;
     opacity: 0;
}
 .box-gallery .link:hover{
     color:#fff;
}
 .box-gallery:hover .link{
     top: 40%;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     opacity: 1;
}
 @media only screen and (max-width: 990px){
     .box-gallery{
         margin-bottom: 20px;
    }
}
/* ------------------------- */