
/*------------------------------------------------------------------------
# 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 {
 --mxserv20-color: #dd0429;
}

#service20{ position: relative; text-align: center; padding: 15px;   transition: color 400ms, background-color 400ms;/*background: rgba(255,255,255,0.8);*/}

#service20 .iconset-box {
	border-radius: 50% 0 50% 50%;
	height: 130px;
	line-height: 56px;
	margin-bottom: 30px;
	padding: 35px;
	position: relative;
	text-align: center;
	width: 130px;
	margin:0 auto;
	z-index: 1;
}
#service20 .newsbox_sett:hover .order{background:var(--mxserv20-color);color: #fff;}
#service20 .iconset-box .order{font-size:17px;font-weight:bold;color: var(--mxserv20-color);background-color:#fff;border:5px solid #f5f3f0;border-radius:50%;height:45px;width:45px;display:flex;justify-content:center;align-items:center;align-self:center;position:absolute;top:-10px;left:-10px;z-index:2}
.iconset-box .icoset span {
	font-size: 62px;
	color: #fff;
}
#service20 .iconset-box::before {
 border: 1px dashed #f1f1f1;
 border-radius: 50% 0 50% 50%;
 content: "";
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 transition: all 700ms ease 0s;
 width: 100%;
 z-index: -999;
}
#service20 h30 {
	color: #ffffff;
	font-size: 17px;
	margin-bottom: 10px;
	letter-spacing: 0px;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 40px;
	transition: color 400ms;
	width: 100%;
	line-height: 5;
}
#service20 p {
	color: #ffffff;
	transition: color 400ms;
}
#service20:hover .iconset-box::before {
 border-color: var(--mxserv20-color);
 transform: rotate(135deg);
 color: var(--mxserv20-color);
 background-color:#fafafa;
}
#service20:hover {
 background-color: var(--mxserv20-color);
 color: #fff;
}
#service20:hover h30,#service20:hover  p {
 color: #fff;
}
#service20 .iconset-box .icon {
	color: #fb2f64;
	font-size: 36px;
	position: relative;
	z-index: 2;
}
.newsbox_sett {padding: 20px;}
