@charset "utf-8";
/* CSS Document */

/* 
######################
#   CONTACTS         #
######################
*/

@media print
{
table		{width: 17cm}
td.office	{width: 5cm}
td.name		{width: 5cm}
}
@media screen
{
td.office	{width: 8em}
td.name		{width: 8em}
}
@media all
{
table#gen	{margin-bottom: 1em}
table#other	{margin-top: 1em}
div.body p 	{padding-bottom: 1em}
td 			{vertical-align: top }

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
} 

 
.wrap li {
  background: none;
}

img.holder {
	height: 120px;
	width: 90px;
	text-align: center;
	margin: 0, auto, 0, auto;
}
officer.p {
	padding: 0, 5em, 1.8ex, 5em;
	
}

 div.body p {
    padding-bottom: 0.3ex;
  }
  
li.officer {
	list-style: none;
	text-align: center;
	margin: 10px;
	text-align: center;
	border: solid 1px #DDD;
	padding: 8px;
	min-width: 175px;
	width: calc((100% - 154px) / 4);

}

@media screen and (max-width: 1250px) { 
li.officer {
	width: calc((100% - 120px) / 3);
}

@media screen and (max-width: 1038px) { 
li.officer {
	width: calc((100% - 80px) / 2);
}


p.officers {
	font-weight: bold;
	margin-top: 1.5ex;
	margin-bottom: 1ex;
	padding: 3px;
}
		
  
p.holder {
	text-align: center;
}
p.office {
	text-align: center;
	font-size: 110%;
	font-weight: bold;
}

}