.wbi-cont .block-grid
{
	padding: -0.5em;
}

.wbi-cont .on-hover{
	display: none;
}

.wbi-cont .on-hover .wbi-h3, .wbi-cont .on-hover .wbi-p{
	color: #2b2b2b;
}

.wbi-cont .on-hover p, .wbi-cont .on-hover .wbi-p{
	text-align: justify;
	text-align-last: center;
	font-size: 0.8em;
	padding: 0 15px;
	line-height: 22px;
}

.wbi-cont .on-hover h3, .wbi-cont .on-hover .wbi-h3 {
	font-size: 1.3em;
	line-height: 39.81px;
	font-family: Hind;
	font-weight: normal;
	text-transform: uppercase;
	padding-bottom: 10px;
}

.wbi-cont [class*="column-"]{
	padding: 0.5em;
}

.center-absolute{
 -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.wbi-cont a{
	outline: 7px solid transparent;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.wbi-cont a:after{
	content: '';
	position: absolute;
	top: 0; right: 0;
	bottom: 0; left: 0;
	background-color: rgba(0,0,0,0.3);
}

.wbi-cont.wbi-type-2 a:after{
	display: none;
}
.wbi-cont.wbi-type-2 a{
	outline: 1px solid #575757;
}

.wbi-type-2{
	padding-bottom: 2%;
}

.wbi-type-2 .block-grid{
	margin-left: -0.5em;
	margin-right: -0.5em;
}

.wbi-cont.wbi-type-2 .on-hover .table-cell{
	background-color: rgba(255,255,255,0.5);
}
.wbi-cont.wbi-type-2 .on-hover .flow-root{
	display: flow-root;
	background-color: rgba(255,255,255,0.5);
}
.wbi-cont.wbi-type-3 .on-hover .table-cell{
	background-color: rgba(255, 221, 0, 0.5);
}
.wbi-type-3.wbi-cont a:after{
	content: '';
	position: absolute;
	top: 0; right: 0;
	bottom: 0; left: 0;
	background-color: unset;
}


.wbi-cont a:hover{
	transform: scale(0.9);
	outline: 7px solid #82b437;
	z-index: 1;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.wbi-cont.wbi-type-3 a:hover{
	transform: scale(1.15);
	outline: 7px solid #91079B;
	z-index: 1;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.wbi-cont a:hover:after{
	content: '';
	position: absolute;
	top: 0; right: 0;
	bottom: 0; left: 0;
	background-color: rgba(255, 255, 255, .85);
	
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.wbi-cont a .hide{
	 -webkit-animation-name: animate-box-show;
    -webkit-animation-duration: 1s;
    animation-name: animate-box-show;
    animation-duration:1s;
	opacity: 1;
	z-index: 1;
}

.wbi-cont a .on-hover{
	-webkit-animation-name: animate-box;
    -webkit-animation-duration: 1s;
    animation-name: animate-box;
    animation-duration:1s;
	opacity: 0;
}

.wbi-cont a:hover .hide{
	 -webkit-animation-name: animate-box;
    -webkit-animation-duration: 1s;
    animation-name: animate-box;
    animation-duration:1s;
	opacity: 0;
}

.wbi-cont a:hover .on-hover{
	display: block;
	 -webkit-animation-name: animate-box-show;
    -webkit-animation-duration: 1s;
    animation-name: animate-box-show;
    animation-duration:1s;
	opacity: 1;
	padding: 2px 0px;
	z-index: 1;
}

div.wbi-cont .center-absolute hr, div.wbi-cont .center-absolute .wbi-cont-hr{
	width: 15%;
	margin: auto;
	margin-top: -30px;
	margin-bottom: -10px;
	border-top: 2px solid #82b437;
}

.wbi-cont .center-absolute > * > *{
	margin: 15px 0;
}

.wbi-cont a button, .wbi-cont a span.BTN{
	-webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out;
	margin: 20px 0;
	font-family: Hind;
	font-weight: normal;
	white-space: normal;
	max-width: 90%;
}

.wbi-cont .on-hover i{
	color: #82b437;
	font-size: 3.2em
}

.wbi-cont i{
	font-size: 60px;
	color: #fff;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

@-webkit-keyframes animate-box-show {
	 from {top: 0%; opacity: 0}
    to {top: 50%; opacity: 1}
}

@keyframes animate-box-show {
    from {top: 0%; opacity: 0}
    to {top: 50%; opacity: 1}
} 


@-webkit-keyframes animate-box {
    from {top: 50%; opacity: 1; color: white}
    to {top: 100%; opacity: 0; color: white}
}

@keyframes animate-box {
    from {top: 50%; opacity: 1; color: white}
    to {top: 100%; opacity: 0; color: white}
}