/*------------------------------------------------------------------------
# mod_ol_services Extension
# ------------------------------------------------------------------------
# author    olwebdesign
# copyright Copyright (C) 2019 olwebdesign.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.olwebdesign.com
-------------------------------------------------------------------------*/

.ol-services4 .item--featured {
 position:relative
}
.ol-services4 .item--featured:before {
 content:'';
 width:100%;
 height:80%;
 left:0;
 bottom:0;
 position:absolute;
 background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.76)),to(transparent));
 background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.76),transparent);
 background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.76),transparent);
 background-image:-ms-linear-gradient(bottom,rgba(0,0,0,.76),transparent);
 background-image:-o-linear-gradient(bottom,rgba(0,0,0,.76),transparent);
 background-image:linear-gradient(bottom,rgba(0,0,0,.76),transparent);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(0, 0, 0, 0.76)',endColorStr='rgba(0, 0, 0, 0)')
}
.ol-services4 .item--featured img {
 width:100%
}
.ol-services4 .item--holder {
 -webkit-transition-delay:.3s;
 -moz-transition-delay:.3s;
 transition-delay:.3s;
 display:flex;
 flex-wrap:wrap;
 width:100%;
 align-items:center;
 background-color:#fff;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 padding:40px 50px;
 -webkit-transform-origin:50% 0%;
 transform-origin:50% 0%;
 -webkit-transition:all 300ms linear 100ms;
 -khtml-transition:all 300ms linear 100ms;
 -moz-transition:all 300ms linear 100ms;
 -ms-transition:all 300ms linear 100ms;
 -o-transition:all 300ms linear 100ms;
 transition:all 300ms linear 100ms;
 -webkit-transform:perspective(500px)rotateX(0);
 -khtml-transform:perspective(500px)rotateX(0);
 -moz-transform:perspective(500px)rotateX(0);
 -ms-transform:perspective(500px)rotateX(0);
 -o-transform:perspective(500px)rotateX(0);
 transform:perspective(500px)rotateX(0)
}
@media screen and (max-width:1199px) {
 .ol-services4 .item--holder{
  padding-left:30px;
  padding-right:30px
 }
}
@media screen and (max-width:767px) {
 .ol-services4 .item--holder {
  padding-left:20px;
  padding-right:20px
 }
}
.ol-services4 .item--holder .item--icon {
 line-height:1;
 margin:0 auto 26px
}
.ol-services4 .item--holder .item--icon i {
 font-size:74px
}
@media screen and (max-width:1199px) {
 .ol-services4 .item--holder .item--icon i {
  font-size:54px
 }
}
.ol-services4 .item--holder .item--icon img {
 max-height:80px;
 margin-left:auto;
 margin-right:auto
}
.ol-services4 .item--holder .item--icon-abs {
 position:absolute;
 bottom:-41px;
 right:-43px;
 line-height:1
}
.ol-services4 .item--holder .item--icon-abs i {
 font-size:126px;
 opacity:.4
}
.ol-services4 .item--holder .item--title {
 font-size:22px;
 margin-bottom:19px
}
@media screen and (max-width:1199px) {
 .ol-services4 .item--holder .item--title, {
  font-size:20px
 }
}
.ol-services4 .item--holder .item--title a {
 color:inherit
}
.ol-services4 .item--holder .item--title a:hover {
 color:inherit
}
.ol-services4 .item--holder .item--content {
 margin-top:17px
}
@media screen and (max-width:1199px) {
 .ol-services4 .item--holder .item--content{
  font-size:14px;
  line-height:24px
 }
}
.ol-services4 .item--meta {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 background-color:#0e0e0e;
 padding:40px;
 -webkit-transform-origin:50% 0%;
 transform-origin:50% 0%;
 -webkit-transition:all 300ms linear 0ms;
 -khtml-transition:all 300ms linear 0ms;
 -moz-transition:all 300ms linear 0ms;
 -ms-transition:all 300ms linear 0ms;
 -o-transition:all 300ms linear 0ms;
 transition:all 300ms linear 0ms;
 opacity:0;
 -webkit-transform:perspective(500px)rotateX(-90deg);
 -khtml-transform:perspective(500px)rotateX(-90deg);
 -moz-transform:perspective(500px)rotateX(-90deg);
 -ms-transform:perspective(500px)rotateX(-90deg);
 -o-transform:perspective(500px)rotateX(-90deg);
 transform:perspective(500px)rotateX(-90deg)
}
@media screen and (max-width:1199px) {
 .ol-services4 .item--meta {
  padding-left:30px;
  padding-right:30px
 }
}
.ol-services4 .item--meta .item--title {
 font-size:22px;
 margin-bottom:21px;
 color:#fff
}
.ol-services4 .item--meta .item--title a {
 color:inherit
}
.ol-services4 .item--meta .item--title a:hover {
 color:inherit
}
.ol-services4 .grid-item-inner {
 text-align:center;
 background-color:#c1282a;
 position:relative;
 overflow:hidden;
 -webkit-box-shadow:0 8px 40px rgba(12,12,12,.1);
 -khtml-box-shadow:0 8px 40px rgba(12,12,12,.1);
 -moz-box-shadow:0 8px 40px rgba(12,12,12,.1);
 -ms-box-shadow:0 8px 40px rgba(12,12,12,.1);
 -o-box-shadow:0 8px 40px rgba(12,12,12,.1);
 box-shadow:0 8px 40px rgba(12,12,12,.1);
 padding-top:8px
}
.ol-services4 .grid-item-inner:before {
 content:'';
 height:8px;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 background-color:#d1651a;
 background-image:-webkit-gradient(linear,left top,right top,from(#d1651a),to(#c1282a));
 background-image:-webkit-linear-gradient(left,#d1651a,#c1282a);
 background-image:-moz-linear-gradient(left,#d1651a,#c1282a);
 background-image:-ms-linear-gradient(left,#d1651a,#c1282a);
 background-image:-o-linear-gradient(left,#d1651a,#c1282a);
 background-image:linear-gradient(left,#d1651a,#c1282a);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d1651a',endColorStr='#c1282a',gradientType='1')
}
.ol-services4 .grid-item-inner .grid-item-over {
 position:relative
}
.ol-services4 .grid-item-inner:hover .item--holder {
 opacity:0;
 -webkit-transform:perspective(500px)rotateX(-90deg);
 -khtml-transform:perspective(500px)rotateX(-90deg);
 -moz-transform:perspective(500px)rotateX(-90deg);
 -ms-transform:perspective(500px)rotateX(-90deg);
 -o-transform:perspective(500px)rotateX(-90deg);
 transform:perspective(500px)rotateX(-90deg);
 -webkit-transition-delay:0s;
 -moz-transition-delay:0s;
 transition-delay:0s;
 -webkit-transition:all 300ms linear 0ms;
 -khtml-transition:all 300ms linear 0ms;
 -moz-transition:all 300ms linear 0ms;
 -ms-transition:all 300ms linear 0ms;
 -o-transition:all 300ms linear 0ms;
 transition:all 300ms linear 0ms
}
.ol-services4 .grid-item-inner:hover .item--meta {
 opacity:1;
 -webkit-transform:perspective(500px)rotateX(0);
 -khtml-transform:perspective(500px)rotateX(0);
 -moz-transform:perspective(500px)rotateX(0);
 -ms-transform:perspective(500px)rotateX(0);
 -o-transform:perspective(500px)rotateX(0);
 transform:perspective(500px)rotateX(0);
 -webkit-transition-delay:.2s;
 -moz-transition-delay:.2s;
 transition-delay:.2s
}
.ol-services4 .more-plus {
 height:57px;
 width:57px;
 line-height:57px;
 text-align:center;
 background-color:#fff;
 -webkit-border-radius:57px;
 -khtml-border-radius:57px;
 -moz-border-radius:57px;
 -ms-border-radius:57px;
 -o-border-radius:57px;
 border-radius:57px;
 font-size:22px;
 font-weight:500;
 color:#1a1a1a;
 font-family:poppins,sans-serif;
 display:inline-block
}
.ol-services4 .more-plus:hover,
.ol-services4 .more-plus:focus {
 background-color:#c1282a;
 color:#fff;
 -webkit-box-shadow:0 0 0 10px rgba(193,40,42,.4);
 -khtml-box-shadow:0 0 0 10px rgba(193,40,42,.4);
 -moz-box-shadow:0 0 0 10px rgba(193,40,42,.4);
 -ms-box-shadow:0 0 0 10px rgba(193,40,42,.4);
 -o-box-shadow:0 0 0 10px rgba(193,40,42,.4);
 box-shadow:0 0 0 10px rgba(193,40,42,.4)
}
.ol-services4 .item--gap {
 width:76px;
 height:3px;
 margin:auto;
 position:relative
}
.ol-services4 .item--gap:before,
.ol-services4 .item--gap:after {
 content:'';
 height:100%;
 position:absolute;
 top:0;
 background-color:#d1651a;
 background-image:-webkit-gradient(linear,left top,right top,from(#d1651a),to(#c1282a));
 background-image:-webkit-linear-gradient(left,#d1651a,#c1282a);
 background-image:-moz-linear-gradient(left,#d1651a,#c1282a);
 background-image:-ms-linear-gradient(left,#d1651a,#c1282a);
 background-image:-o-linear-gradient(left,#d1651a,#c1282a);
 background-image:linear-gradient(left,#d1651a,#c1282a);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d1651a',endColorStr='#c1282a',gradientType='1')
}
.ol-services4 .item--gap:before {
 left:0;
 width:19px
}
.ol-services4 .item--gap:after {
 right:0;
 width:51px
}