/*======================================================================
 @ Features
========================================================================*/


/*======================================================================
 @ Card container
========================================================================*/

.feature-row-features-grid {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: stretch;
}

.single-feature {
	width: 50%;
	display: flex;
	flex: 1 1 auto;
	float: left;
	padding: 15px;
	text-align: center;
}

.single-feature-content {
	background-color: #FFFFFF;
	box-shadow: 0 0 35px rgba(0,0,0,.08);
	padding: 20px 20px;
	position: relative;
	z-index: 2;
}

.single-feature-content:before {
	position: absolute;
	content: "";
	background-image: none;
	background-color: #1DA1F2;
	color: #fff;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	-webkit-transition: opacity .4s linear;
	transition: opacity .4s linear;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.single-feature-content:hover:before {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/*======================================================================
 @ Card content
========================================================================*/

.single-feature-content h3 {
	margin: 0;
	color: #666666;
	font-size: 1.714em;
	font-weight: 500;
	margin-bottom: 25px;
}
.single-feature-content:hover h3 {
	color: #FFFFFF;
}

.single-feature-content p {
	margin: 0;
}
.single-feature-content:hover p {
	color: #DDDDDD;
}

.single-feature-content i {
	font-size: 3.000em;
	width: 76px;
	height: 76px;
	border-radius: 100%;
	color: #FFFFFF;
	background-image: none;
	background-color: #1DA1F2;
	box-shadow: 0 18px 32px rgba(0,0,0,.28);
	line-height: 76px;
	display: inline-block;
	margin-bottom: 20px;
	-webkit-transition: background .4s linear;
	transition: background .4s linear;
}
.single-feature-content:hover i {
	color: #333333;
	background: none;
	background-color: #FEEDEF;
}




/*======================================================================
 @ Icons
========================================================================*/

/*======================================================================
 @ Advanced detection
========================================================================*/
.single-feature-content i.advanced-detection {
    padding-top: 5px;
}
.single-feature-content i.advanced-detection::before {
    content: url(../../../img/icons/features/advanced-detection-white.png);
}
.single-feature-content:hover i.advanced-detection::before {
    content: url(../../../img/icons/features/advanced-detection-black.png);
}

/*======================================================================
 @ Dialer
========================================================================*/
.single-feature-content i.dialpad {
    padding-top: 5px;
}
.single-feature-content i.dialpad::before {
    content: url(../../../img/icons/features/dialpad-white.png);
}
.single-feature-content:hover i.dialpad::before {
    content: url(../../../img/icons/features/dialpad-black.png);
}

/*======================================================================
 @ Call monitoring
========================================================================*/
.single-feature-content i.call-monitoring {
    padding-top: 5px;
}
.single-feature-content i.call-monitoring::before {
    content: url(../../../img/icons/features/call-monitoring-white.png);
}
.single-feature-content:hover i.call-monitoring::before {
    content: url(../../../img/icons/features/call-monitoring-black.png);
}

/*======================================================================
 @ Dashboards
========================================================================*/
.single-feature-content i.dashboard {
    padding-top: 5px;
}
.single-feature-content i.dashboard::before {
    content: url(../../../img/icons/features/dashboard-white.png);
}
.single-feature-content:hover i.dashboard::before {
    content: url(../../../img/icons/features/dashboard-black.png);
}

/*======================================================================
 @ Integration
========================================================================*/
.single-feature-content i.integration {
    padding-top: 5px;
}
.single-feature-content i.integration::before {
    content: url(../../../img/icons/features/integration-white.png);
}
.single-feature-content:hover i.integration::before {
    content: url(../../../img/icons/features/integration-black.png);
}