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

:root {
 --mxtx30-color:#f0401b;
 --mxsmo30-color:#f1f1f1;
}

.mx-service30 .item--holder {
 text-align:left;
 padding:21px 30px 55px;
 position:absolute;
 bottom:0;
 left:0;
 z-index:2;
 width:100%
}
.mx-service30 .item--featured {
 position:relative;
 overflow:hidden;
 min-height: 400px;
 background-color: #222;
 -webkit-border-radius:4px 4px 0 0;
 -khtml-border-radius:4px 4px 0 0;
 -moz-border-radius:4px 4px 0 0;
 -ms-border-radius:4px 4px 0 0;
 -o-border-radius:4px 4px 0 0;
 border-radius:4px 4px 0 0
}
.mx-service30 .item--featured img {
 -webkit-border-radius:4px 4px 0 0;
 -khtml-border-radius:4px 4px 0 0;
 -moz-border-radius:4px 4px 0 0;
 -ms-border-radius:4px 4px 0 0;
 -o-border-radius:4px 4px 0 0;
 border-radius:4px 4px 0 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
}
.mx-service30 .item--featured+.item--holder {
 border-top:none;
 -webkit-border-radius:0 0 4px 4px;
 -khtml-border-radius:0 0 4px 4px;
 -moz-border-radius:0 0 4px 4px;
 -ms-border-radius:0 0 4px 4px;
 -o-border-radius:0 0 4px 4px;
 border-radius:0 0 4px 4px
}
.mx-service30 .item--title {
 font-size:24px;
 color:#fff;
 margin-bottom:9px;
 position:relative;
 padding-top:15px;
 line-height:28px
}
.mx-service30 .item--title:before {
 top:0;
 content:"";
 display:block;
 height:3px;
 width:100px;
 background-color:var(--mxtx30-color);
 position:absolute
}
.mx-service30 .item--title a {
 color:#fff;
 -webkit-transition:all 200ms linear 0ms;
 -khtml-transition:all 200ms linear 0ms;
 -moz-transition:all 200ms linear 0ms;
 -ms-transition:all 200ms linear 0ms;
 -o-transition:all 200ms linear 0ms;
 transition:all 200ms linear 0ms
}
.mx-service30 .item--title a:hover {
 color:inherit
}
.mx-service30 .item--readmore a {
 opacity:0;
 -webkit-transition:all 200ms linear 0ms;
 -khtml-transition:all 200ms linear 0ms;
 -moz-transition:all 200ms linear 0ms;
 -ms-transition:all 200ms linear 0ms;
 -o-transition:all 200ms linear 0ms;
 transition:all 200ms linear 0ms;
 -ms-transform:rotate(45deg);
 transform:rotate(45deg);
 width:24px;
 height:24px;
 line-height:24px;
 text-align:center;
 font-size:25px;
 color:var(--mxtx30-color);
 font-weight:600;
 position:absolute;
 right:30px;
 bottom:30px;
 margin:auto
}
.mx-service30 .item--content {
 -webkit-transition:all 200ms linear 0ms;
 -khtml-transition:all 200ms linear 0ms;
 -moz-transition:all 200ms linear 0ms;
 -ms-transition:all 200ms linear 0ms;
 -o-transition:all 200ms linear 0ms;
 transition:all 200ms linear 0ms;
 font-size:16px;
 color:#444;
 height:0;
 line-height:26px;
 opacity:0
}
.mx-service30 .item--icon {
 margin-bottom:10px
}
.mx-service30 .item--icon i::before {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-size: 95px;
  line-height: 70px;
}
.mx-service30 .grid-item-inner {
 margin-bottom:0;
 -webkit-transition:all 200ms linear 0ms;
 -khtml-transition:all 200ms linear 0ms;
 -moz-transition:all 200ms linear 0ms;
 -ms-transition:all 200ms linear 0ms;
 -o-transition:all 200ms linear 0ms;
 transition:all 200ms linear 0ms;
 -webkit-border-radius:15px;
 -khtml-border-radius:15px;
 -moz-border-radius:15px;
 -ms-border-radius:15px;
 -o-border-radius:15px;
 border-radius:15px;
 position:relative;
 overflow:hidden
}
.mx-service30 .grid-item-inner .item--featured-holder {
 -webkit-transition:all 200ms linear 0ms;
 -khtml-transition:all 200ms linear 0ms;
 -moz-transition:all 200ms linear 0ms;
 -ms-transition:all 200ms linear 0ms;
 -o-transition:all 200ms linear 0ms;
 transition:all 200ms linear 0ms;
 width:100px;
 height:100px;
 overflow:hidden;
 opacity:0;
 -webkit-border-radius:50%;
 -khtml-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 -o-border-radius:50%;
 border-radius:50%;
 margin-bottom:32px
}
.mx-service30 .grid-item-inner .item--price {
 -webkit-transition:all 200ms linear 0ms;
 -khtml-transition:all 200ms linear 0ms;
 -moz-transition:all 200ms linear 0ms;
 -ms-transition:all 200ms linear 0ms;
 -o-transition:all 200ms linear 0ms;
 transition:all 200ms linear 0ms;
 position:absolute;
 top:5px;
 opacity:0;
 right:15px;
 color:#fff;
 font-size:16px
}
.mx-service30 .grid-item-inner .item--price span {
 font-family:poppins,sans-serif;
 color:var(--mxtx30-color);
 font-size:24px;
 font-weight:700
}
.mx-service30 .grid-item-inner:after {
 position:absolute;
 z-index:1;
 -webkit-transition:all 200ms linear 0ms;
 -khtml-transition:all 200ms linear 0ms;
 -moz-transition:all 200ms linear 0ms;
 -ms-transition:all 200ms linear 0ms;
 -o-transition:all 200ms linear 0ms;
 transition:all 200ms linear 0ms;
 content:"";
 bottom:0;
 display:block;
 width:100%;
 height:60%;
 background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(1,1,1,.9) 5%),to(rgba(1,1,1,2%)));
 background-image:-webkit-linear-gradient(bottom,rgba(1,1,1,.9) 5%,rgba(1,1,1,2%));
 background-image:-moz-linear-gradient(bottom,rgba(1,1,1,.9) 5%,rgba(1,1,1,2%));
 background-image:-ms-linear-gradient(bottom,rgba(1,1,1,.9) 5%,rgba(1,1,1,2%));
 background-image:-o-linear-gradient(bottom,rgba(1,1,1,.9) 5%,rgba(1,1,1,2%));
 background-image:linear-gradient(bottom,rgba(1,1,1,.9) 5%,rgba(1,1,1,2%));
 filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(1, 1, 1, 0.9) 5%',endColorStr='rgba(1, 1, 1, 0.02)')
}
.mx-service30 .grid-item-inner:hover:after {
 height:100%;
 background-image:-webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#fff));
 background-image:-webkit-linear-gradient(bottom,#f1f1f1,#fff);
 background-image:-moz-linear-gradient(bottom,#f1f1f1,#fff);
 background-image:-ms-linear-gradient(bottom,#f1f1f1,#fff);
 background-image:-o-linear-gradient(bottom,#f1f1f1,#fff);
 background-image:linear-gradient(bottom,#f1f1f1,#fff);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1',endColorStr='#fff')
}
.mx-service30 .grid-item-inner:hover .item--price {
 opacity:1
}
.mx-service30 .grid-item-inner:hover .item--featured-holder {
 opacity:1;
 width:200px;
 height:200px
}
@media(min-width:1200px) and (max-width:1400px) {
 .mx-service30 .grid-item-inner:hover .item--featured-holder {
  width:180px;
  height:180px
 }
}
@media(min-width:992px) and (max-width:1199px) {
 .mx-service30 .grid-item-inner:hover .item--featured-holder {
  width:150px;
  height:150px
 }
}
@media screen and (max-width:767px) {
 .mx-service30 .grid-item-inner:hover .item--featured-holder {
  width:120px;
  height:120px
 }
}
.mx-service30 .grid-item-inner:hover .item--icon {
 position: absolute;
 right: 10px;
 top: 10px;
 color:var(--mxtx30-color);
}
.mx-service30 .grid-item-inner:hover .item--title, .mx-service30 .grid-item-inner:hover .item--title a {
 font-size:24px;
 color:#111 !important;
 }
.mx-service30 .grid-item-inner:hover .item--icon i::before {
  font-size: 115px;
 color:var(--mxtx30-color);
}

.mx-service30 .grid-item-inner:hover .item--content {
 display:block;
 height:auto;
 opacity:1
}
.mx-service30 .grid-item-inner:hover .item--featured img {
 -webkit-transform:scale(1.15);
 -khtml-transform:scale(1.15);
 -moz-transform:scale(1.15);
 -ms-transform:scale(1.15);
 -o-transform:scale(1.15);
 transform:scale(1.15)
}
.mx-service30 .grid-item-inner:hover .item--title a {
 color:#fff
}
.mx-service30 .grid-item-inner:hover .item--readmore a {
 opacity:1;
 visibility:visible;
 right:19px;
 bottom:19px
}