A:LINK {color: #000000}
A:VISITED {color: #000000}
A:HOVER {color: #000000}

div.mainheader,
div.subheader {
	background-color: #545f24;
}

div.mainheader {
	background-size: 1920px;
	background-repeat: no-repeat;
	background-position: 50% -150px;
	width: 100%;
	height: 700px;
	clip-path: polygon(0 0, 100% 0, 100% 87%, 0 100%);
}

div.mainheader h1 {
	font-size: 110px;
	font-weight: 900;
	color: #fff;
	/*text-shadow: 4px 4px #000;*/
	text-shadow: 1px 1px 2px #000, 2px 2px 5px #000, 3px 3px 6px #000, 5px 5px 12px #000;
}

div.mainheader_bar {
	width: 12px;
	height: 100%;
	background-color: #f3cd4f;
}

div.subheader {
	background-size: 1920px;
	background-repeat: no-repeat;
	background-position: center -700px;
	width: 100%;
	height: 380px;
	clip-path: polygon(0 35%, 100% 0, 100% 65%, 0 100%);
}

div.subheader h1 {
	color: #fff;
	font-size: 44px;
	font-weight: 700;
	text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
}

div.anchor {
	position: relative;
	top: -70px;
}

div.vision_card {
	box-shadow: 
		5px 12px 10px rgba(0, 0, 0, 0.1),
		-3px -5px 10px rgba(0, 0, 0, 0.1);
}

div.vision_img_col {
	max-width: 592px;
}

span.color-primary {
	color: #89a86f;
}

span.color-secondary {
	color: #f3cd4f;
}

h5 {
	line-height: 1.6
}

.break-on-large {
	display: block;
}


/* ----------------- */
/*    Responsive   */
/* ----------------- */

@media (max-width: 1399px) {
	.vision_card img {
		object-fit: cover;
		aspect-ratio: auto / 1.5;
		height: 20rem;
	}
}

@media (max-width: 1199px) {
	.vision_card h5 {
		font-size: 17px;
	}
	.mission h2 {
		/*font-size: 20px;*/
	}
}

@media (max-width: 767px) {
	div.mainheader {
		background-size: 1500px;
		background-position: 50% -150px;
		height: 550px;
		/*clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);*/
	}	
	div.mainheader h1 {
		font-size: 70px;
	}
	h2 {
		font-size: 30px;
	}
	div.subheader {
		background-size: 1500px;
		height: 300px;
		clip-path: polygon(0 27%, 100% 0, 100% 73%, 0 100%);
	}
	div.vision_img_col {
		max-width: 768px;
	}
	.vision_card img {
		height: 317px;
	}
	.break-on-large {
		display: none;
	}
}

@media (max-width: 575px) {
	div.mainheader {
		background-size: 1500px;
		background-position: 80% -150px;
		height: 400px;
		/*clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);*/
	}
	div.mainheader h1 {
		font-size: 40px;
	}
	div.subheader {
		background-size: 1500px;
		background-position: center -200px;
		height: 240px;
		clip-path: polygon(0 27%, 100% 0, 100% 73%, 0 100%);
	}
	div.mainheader_bar {
		width: 7px;
	}
	.vision_card img {
		height: auto;
	}
	.vision_card h5 {
		font-size: 16px;
	}
	.about_preface h1 {
		font-size: 24px;
	}
	.principles h5 {
		font-size: 17px;
	}
	.join_preface h5 {
		font-size: 16px;
	}
}