/*------------------------------------------------------------------------
# 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 {
 --mxtmp-color: #E81C2E;
 --black-color: #000000;
 --white-color: #ffffff;
 --light-color: #8b8e95;
}

.service-fteen .class-button,.class-grid-style3 .class-button{text-align:center;margin-top:70px}
.service-fteen .class-item .class-title{margin-bottom:10px}
.service-fteen .class-title a {color: #000;}
.service-fteen .class-item{position:relative;margin-bottom:40px;margin-right: 20px;}
.service-fteen .class-item::before{content:"";height:234px;width:271px;background-color:#e8e8e8;position:absolute;top:38px;right:-20px;-webkit-clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.service-fteen .class-item:hover:before{background-color:var(--mxtmp-color)}
.service-fteen .class-item:hover .class-media{background-color:var(--mxtmp-color)}
.service-fteen .class-item .class-media{border-radius:50%;background-color:#646464;-webkit-box-shadow:0 6px 8px 0 rgba(0,0,0,.15);box-shadow:0 6px 8px rgba(0,0,0,.15);height:82px;width:82px;display:inline-flex;align-items:center;justify-content:center;position:absolute;top:30px;left:0;line-height:0;z-index:4;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.service-fteen .class-item .class-media img{width:52px;height:52px}
.service-fteen .class-item .class-media .class-icon i{font-size:48px;width:52px;color:#fff}
.service-fteen .class-item .class-box-content{min-height:310px;position:relative;z-index:3;-webkit-clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);display:flex;align-items:center;border:none;background-color:#f7f7f7;box-shadow:0 1px 51px rgba(0,0,0,.14);justify-content:center}
.service-fteen .class-item .class-box-content .class-thumbnail{position:absolute;bottom:0;left:100%;visibility:hidden;opacity:0;transition:all .4s;background-position:50%;-webkit-clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);height:100%;width:0%}
.service-fteen .class-item .class-box-content .class-thumbnail img{height:100%;width:100%;object-fit:cover;filter:grayscale(100%);position:relative;display:block}
.service-fteen .class-item .class-box-content .class-thumbnail a:after{content:'';position:absolute;width:100%;height:100%;left:0;right:0;top:0;background-color:rgba(0,0,0,.4)}
.service-fteen .class-item .class-box-content .class-content{text-align:center;z-index:2;position:relative;padding:0 50px}
.service-fteen .class-item:hover .class-box-content .class-thumbnail{visibility:visible;opacity:1;left:0%;-webkit-transition:width .4s ease;transition:width .4s ease;width:100%}
.service-fteen .class-item:hover .class-title a,.service-fteen .class-item:hover .class-content p{color:#fff}
.service-fteen .class-item:hover .class-title{color:#fff}.service-fteen .class-button{text-align:center;margin-top:50px}