/*------------------------------------------------------------------------
# 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 {

    --mxts-primary: #dd0429;
    --mxt-primary-rgb: 221, 4, 41;
    --mxt-black: #17161a;
    --mxt-black-rgb: 23, 22, 26;
    --mxt-base: #ffffff;
    --mxt-base-rgb: 255, 255, 255;
    --mxt-extra: #f6f6f6;
    --mxt-extra-rgb: 246, 246, 246;
    --mxt-bdr-color: #e3e3e3;
    --mxt-bdr-color-rgb: 227, 227, 227;
}
.cms-fancy-box.layout4 {
  padding-top: 100px;
}
.cms-fancy-box.layout4 .inner-icon {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  background-color: var(--mxts-primary);
  display: inline-flex;
  width: 120px;
  height: 120px;
  border-radius: 5px 50px 5px 5px;
  align-items: center;
  justify-content: center;
  top: 46px;
  left: 51px;
  position: absolute;
  z-index: 2;
}
.cms-fancy-box.layout4 .inner-icon img {
  width: 120px;
  height: 120px;
}

.cms-fancy-box.layout4 .inner-icon span {
font-size: 62px; color: #fff;
}
@media screen and (max-width: 450px) {
  .cms-fancy-box.layout4 .inner-icon {
    left: 25px;
  }
}
.cms-fancy-box.layout4 .inner-content {
  overflow: hidden;
  position: relative;
  border: 1px solid #d7d7d7;
  padding: 52px 30px 40px 51px;
  -webkit-transition: 300ms all linear 0ms;
  -khtml-transition: 300ms all linear 0ms;
  -moz-transition: 300ms all linear 0ms;
  -ms-transition: 300ms all linear 0ms;
  -o-transition: 300ms all linear 0ms;
  transition: 300ms all linear 0ms;
}
@media screen and (max-width: 450px) {
  .cms-fancy-box.layout4 .inner-content {
    padding: 52px 25px 25px 25px;
  }
}
.cms-fancy-box.layout4 .inner-content:before {
  position: absolute;
  content: '';
  background-color: #d8d8d8;
  width: 100%;
  height: 1px;
  top: 14px;
  left: 0;
}
.cms-fancy-box.layout4 .inner-content:after {
  position: absolute;
  content: '';
  background-color: var(--mxts-primary);
  width: 0%;
  height: 16px;
  top: -1px;
  left: 40%;
  -webkit-transition: 300ms all linear 0ms;
  -khtml-transition: 300ms all linear 0ms;
  -moz-transition: 300ms all linear 0ms;
  -ms-transition: 300ms all linear 0ms;
  -o-transition: 300ms all linear 0ms;
  transition: 300ms all linear 0ms;
}

.cms-fancy-box.layout4 .inner-content .item--title, .cms-fancy-box.layout4 .inner-content .item--title a {
  padding-top: 20px;
  font-size: 32px;
  font-weight: 700;
  color: #2a2a2a;
}
.cms-fancy-box.layout4 .inner-content .item--description {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #666;
}
.cms-fancy-box.layout4 .wrap-inner-content {
  -webkit-transition: 300ms all linear 0ms;
  -khtml-transition: 300ms all linear 0ms;
  -moz-transition: 300ms all linear 0ms;
  -ms-transition: 300ms all linear 0ms;
  -o-transition: 300ms all linear 0ms;
  transition: 300ms all linear 0ms;
}
.cms-fancy-box.layout4:hover .wrap-inner-content {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.cms-fancy-box.layout4:hover .inner-content:after {
  width: 101%;
  left: -1px;
  right: -1px;
}