/*------------------------------------------------------------------------
# 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 {
  --mxcolor-main: #e40013;
}

.logo-box7 .tf-overlay {
 display:block
}
.logo-box7 .logo-card7 {
 display:flex;
 align-items:center;
 justify-content:center;
 padding:40px;
 border-top:1px solid rgba(27,30,35,.1);
 border-right:1px solid rgba(27,30,35,.1);
 border-bottom:1px solid rgba(27,30,35,.1);
 border-left:1px solid rgba(27,30,35,.1);
 position:relative
}
.logo-box7 .logo-card7 img {
 transition:all .5s ease;
 position:relative;
 opacity:.4;
}
.logo-box7 .logo-card7 img.img1 {
 -webkit-clip-path:inset(0 0 0 0);
 clip-path:inset(0 0 0 0);
 transform:translateX(50%)
}
.logo-box7 .logo-card7 img.img2 {
 -webkit-clip-path:inset(0 0 100% 0);
 clip-path:inset(0 0 100% 0);
 top:0;
 left:0;
 opacity:1;
 transform:translateX(-50%)
}
.logo-box7 .logo-card7:hover img.img1 {
 -webkit-clip-path:inset(100% 0 0 0);
 clip-path:inset(100% 0 0 0)
}
.logo-box7 .logo-card7:hover img.img2 {
 -webkit-clip-path:inset(0 0 0 0);
 clip-path:inset(0 0 0 0)
}
.logo-box7 .logo-card7:hover:after {
 width:100%;
 transition-delay:.1s
}
.logo-box7 .logo-card7:hover:before {
 height:100%;
 transition-delay:.4s
}
.logo-box7 .logo-card7:hover .tf-overlay:after {
 width:100%;
 transition-delay:.1s
}
.logo-box7 .logo-card7:hover .tf-overlay:before {
 height:100%;
 transition-delay:.4s
}
.logo-box7 .logo-card7:after {
 width:0;
 height:1px;
 top:0
}
.logo-box7 .logo-card7:after,
.logo-box7 .logo-card7:before {
 position:absolute;
 content:"";
 left:0;
 background-color:var(--mxcolor-main);
 transition:all .4s ease
}
.logo-box7 .logo-card7:before {
 height:0;
 width:1px;
 bottom:0
}
.logo-box7 .tf-overlay:after {
 width:0;
 height:1px;
 bottom:0
}
.logo-box7 .tf-overlay:after,
.logo-box7 .tf-overlay:before {
 position:absolute;
 content:"";
 right:0;
 background-color:var(--mxcolor-main);
 transition:all .4s ease
}
.logo-box7 .tf-overlay:before {
 height:0;
 width:1px;
 top:0
}
.logo-box7 .name, .logo-box7 .logo-box7__text {
 position: absolute;
}
.logo-box7 .name {
 top: 10px;
}
.logo-box7 .logo-box7__text {
 bottom: 10px;
}