#introPic { display:none}

#content { padding:2rem 0;}
#content H1,
#content H2 {
	color: #818181;
	background: #ececec;
	font-size: 1.4em;
	margin: 0 0 3rem 0;
	padding: 10px 30px;}
#employees { float:left; width:100%; font-size:1em; margin:0 0 0;}

#employees OL { float:left; width:100%; list-style-type:none; margin:0; padding:0;
display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	 justify-content: flex-start;
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;}
#employees OL LI { float:left; position:relative; margin:0 1% 3rem; width:23%;
	/*flex-basis: calc(25% - 2rem); -webkit-flex-basis: calc(25% - 2rem);*/
	border:1px solid #e0e0e0;
	background:#fff;
	position:relative;
	padding:20px 2%;
	text-align:center;}



div.miDetails { float:left;width:100%; padding:0%; margin:0 0 0; transition:all ease 1s; }
div.miDetails:hover { background:#f6f6f6}
div.miDetails a{ color:#96c11f;}

div.photo { float:left; width:100%; height:0; padding-bottom:60%; background:#fff ;  display:block; overflow:hidden; text-align:center; margin:0 0 0 0; position:relative;}
div.photo img { 
position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);
	-webkit-filter: saturate(0%); filter: saturate(0%);
	opacity:0.4; -webkit-opacity:0.5;
	transition:all ease 0.5s;}
		div.miDetails:hover div.photo img { -webkit-filter: saturate(100%); filter: saturate(100%);
	opacity:1; -webkit-opacity:1;}

.foto { clear:both;border:1px solid #e0e0e0;padding:20px 5%; float:left;}


#shareblog { background:#f4f4f4; padding:2% 4%; margin:0 0 30px 0; float:left; width:100%; position:relative;}
#shareblog::after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50px;
	margin-left: -15px;
	border-width: 15px;
	border-style: solid;
	border-color: #f4f4f4 transparent transparent transparent;
}
#shareblog .share {	color: #aaa;/* text-transform:uppercase;*/}
#shareblog ul {	display:inline;}
#shareblog ul li {margin:0 1% 10px 0!important; min-width:30px;}
#shareblog .share_text,
#shareblog .share_count { display:none;}


/*
#employees OL LI H4 {  margin:5% 0 0 0; padding:0 0 0 0;  font-weight:600; font-size:1.2em; }	
div.info  { background:url('../images/mihover.png'); color:#fff; width:180px; height:220px; position:absolute; left:0; top:140px; display:none}
div.info:hover { top:-30px; background-position: center 30px; }

.miDetails SPAN { float:left; padding:0px; width:55%;}
.miDetails i { margin:0 .6em 0 0}
span.miFunk		{ color:#96c11f; padding:0 0 10px 0; font-weight:600;}
span.miFon 		{ padding:3px 0; }
span.miEmail 	{ padding:3px 0; }
.miDescription { display:none;}
span.miBio			{ background: url('../images/vita.jpg') no-repeat; cursor:pointer;}

.info span.intro 						{ font-weight:bolder; line-height: 40px }
.info span.miName   				{ font-weight:bolder; margin-top:55px}

div.miFunction 			{  display:none; position:absolute;  right:0; top:140px; width:580px;  background:#fff; z-index:10; padding:20px; border-radius:5px;  box-shadow:2px  5px 5px #888;  }

div.mbio								{ float:left; width:560px; max-height:400px; margin-top:10px; overflow-y:auto; background:#F3F3F1; padding:10px }


span.miEmail a  						{ color: #878786 }
span.miEmail a:hover 			{ text-decoration:underline; color:#96c11f  }*/

/* MEDIA QUERIES  ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1250px) {
#employees OL LI {margin:0 1% 2rem;}
}
	
@media screen and (max-width:1023px) {
#employees OL LI {  width:31.333%}


}
@media screen and (max-width:767px) {
#employees OL LI {margin:0 1% 1rem;}

}
@media screen and (max-width:670px) {
#employees OL LI {  width:48%}
}
@media screen and (max-width:400px) {
#employees OL LI {  width:100%; margin:0 0 2rem;}
}