/*------------------------------------------------------------------------
# mod_ol_icons Extension
# ------------------------------------------------------------------------
# author    olwebdesign
# copyright Copyright (C) 2019 olwebdesign.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.olwebdesign.com
-------------------------------------------------------------------------*/
/* feature */
.features{
	border:1px solid #efefef;
	padding:20px;
	background:#fdfdfd;
	text-align:center;
	z-index: 2;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.features:hover{
	cursor:pointer;
	color:#fff;
	border:1px solid rgba(0,0,0,0.1);
	background:#f7d204;
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.features:hover .headtitle, .features:hover a, .features:hover span{ 
    color:#fff!important; 
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
	-webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: cubic-bezier(.165, .84, .44, 1);
    animation-timing-function: cubic-bezier(.165, .84, .44, 1);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	}

.features:hover .context{ 
    color:#fff; 
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
	-webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-timing-function: cubic-bezier(.165, .84, .44, 1);
    animation-timing-function: cubic-bezier(.165, .84, .44, 1);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	}
.features span{ font-size:40pt;}

.features .headtitle{ font-size:16pt; padding: 0px 10px;}
.features .context{ margin-bottom:20px; padding: 0px 10px;}
.features a{ font-weight:400;}
.color {
    color: #fff;
}

.panel_overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1; 
background: rgba(255, 255, 255, 0.8);}
/* feature end */
@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}