.directors-inner{
	padding: 1vw 1vw;
}

.board h2, .directors h2, .association h2, .past-presidents h2, .auditors h2{
	font-size: 33px;
	font-weight: bold;
	color: #4186ba;
	padding: 3vw 0px;
}

.board h2:before, .directors h2:before, .association h2:before, .auditors h2:before{
	content: "";
	display: block;
	width: 10em;
	max-width: 100%;
	border-bottom: 1px solid #4186ba;
	margin: 0em auto 0.1em;
}

.board h2:after, .directors h2:after, .association h2:after, .auditors h2:after{
	content: "";
	display: block;
	width: 10em;
	max-width: 100%;
	border-bottom: 1px solid #4186ba;
	margin: 0.1em auto 0em;
}

.past-presidents h2:before{
	content: "";
	display: block;
	width: 16em;
	max-width: 100%;
	border-bottom: 1px solid #4186ba;
	margin: 0em auto 0.1em;
}

.past-presidents h2:after{
	content: "";
	display: block;
	width: 16em;
	max-width: 100%;
	border-bottom: 1px solid #4186ba;
	margin: 0.1em auto 0em;
}

.director-group{
	padding: 10px 5px;
}

.director-group h3{
	font-size: 22px;
	color: #3d92cf;
}

.director-group p{
	font-size: 18px;
	color: black;
	padding: 5px 0px;
}

.director-group p .type{
	font-weight: bold;
}

.board{
	display: grid;
	grid-template-columns: repeat(12 , 1fr);
	text-align: center;
	grid-gap: 1vw;
}

.board h2{
	grid-column: span 12;
}

.board .col-1{
	grid-column: span 4;
}

.board .col-2{
	grid-column: span 4;
}

.board .col-3{
	grid-column: span 4;
}

.board .col-4{
	grid-column: span 6;
	justify-self: end;
}

.board .col-5{
	grid-column: span 6;
	justify-self: start;
}

/* 
 * ==============
 * Directors
 * ==============
 * */

.directors{
	display: grid;
	grid-template-columns: repeat(12 , 1fr);
	text-align: center;
	grid-gap: 1vw;
}

.directors h2{
	grid-column: span 12;
}

.directors .col-1{
	grid-column: span 4;
}

.directors .col-2{
	grid-column: span 4;
}

.directors .col-3{
	grid-column: span 4;
}

.directors .col-4{
	grid-column: span 4;
}

.directors .col-5{
	grid-column: span 4;
}

.directors .col-6{
	grid-column: span 4;
}

.directors .col-7{
	grid-column: span 4;
}

.directors .col-8{
	grid-column: span 4;
}

.directors .col-9{
	grid-column: span 4;
}

.directors .col-10{
	grid-column: span 6;
	justify-self: end;
}

.directors .col-11{
	grid-column: span 6;
	justify-self: start;
}

/* 
 *=============
 * Others
 *=============
 * */

.others{
	display: grid;
	grid-template-columns: repeat(12 , 1fr);
	text-align: center;
}

.association{
	grid-column: span 6;
}

.staff-name{
	font-size: 22px;
	color: #3d92cf;	
}

.past-presidents{
	grid-column: span 6;
}

.past-presidents .past-box{
	padding: 0vw 6vw;
}

.past-presidents .past-box p{
	display: grid;
	grid-template-columns: repeat(12,1fr);
	align-items: center;
	padding: 4vw 2vw;
	background: #4186ba;
}

.past-presidents .past-box p img{
	grid-column: span 4;
}

.past-presidents .past-box p a{
	grid-column: span 7;
	color: #fff;
	text-align: left;
}

.auditors{
	grid-column: span 12;
}

/* 
 *=============
 * Resonsive
 *=============
 * */

/* Tablet menu */
@media all and (max-width: 960px) {
	
	.board .col-1, .board .col-2, .board .col-3, .board .col-4{
		grid-column: span 6;
    	justify-self: auto;
	}

	.board .col-5{
		grid-column: span 12;
    	justify-self: auto;
	}

	.directors .col-1, .directors .col-2, .directors .col-3, .directors .col-4, .directors .col-5, .directors .col-6, .directors .col-7, .directors .col-8, .directors .col-9, .directors .col-10{
		grid-column: span 6;
    	justify-self: auto;
	}

	.directors .col-11{
		grid-column: span 12;
		justify-self: auto;
	}

	.association{
		grid-column: span 6;
	}
	
	.past-presidents{
		grid-column: span 6;
	}

	.past-presidents, .association, .directors, .board{
		word-wrap: break-word;
		white-space: normal;
	}
	
	.past-presidents h2:before, .association:before, .directors:before, .board:before{
		width: auto;
		max-width: 90%;
	}

	.past-presidents h2:after, .association:after, .directors:after, .board:after{
		width: auto;
    	max-width: 90%;
	}

	.past-presidents .past-box p img{	
    	grid-column: span 12;
    	justify-self: center;
    	padding-bottom: 10px;
	}

	.past-presidents .past-box p a{
		grid-column: span 12;
    	justify-self: center;
    	text-align: center;
	}	

	.auditors{
		grid-column: span 12;
	}
}

/* Tablet menu */
@media all and (max-width: 630px) {

	.board .col-1, .board .col-2, .board .col-3, .board .col-4, .board .col-5{
		grid-column: span 12;
	}
	
	.directors .col-1, .directors .col-2, .directors .col-3, .directors .col-4, .directors .col-5, .directors .col-6, .directors .col-7, .directors .col-8, .directors .col-9, .directors .col-10, .directors .col-11{
		grid-column: span 12;
	}

	.association{
		grid-column: span 12;
	}
	
	.past-presidents{
		grid-column: span 12;
	}

	.auditors{
		grid-column: span 12;
	}
}

/* Mobile menu */
@media all and (max-width: 360px) {

	.board h2::after, .directors h2::after, .association h2::after, .auditors h2::after {
    	width: auto;
	}

	.board h2::before, .directors h2::before, .association h2::before, .auditors h2::before {
    	width: auto;
	}
}