@charset "UTF-8";

/* =========================
   GENERAL PAGE LAYOUT
   ========================= */

body {
	margin: 0;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
}

.container {
	background-color: #FFFFFF;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border-bottom-width: 0;
}


/* =========================
   HEADER
   ========================= */

.primary_header {
	width: 100%;
	background-color: #FFFFFF;
	padding-top: 5px;
	padding-bottom: 5px;
	clear: both;
	border-bottom: 2px solid #2C9AB7;
}

.title {
	font-weight: bold;
	font-style: normal;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FFFFFF;
	letter-spacing: 2px;
}

.site-logo {
	max-width: 100%;
	width: 350px;
	height: auto;
	display: block;
	margin: 0 auto;
}


/* =========================
   NAVIGATION
   ========================= */

.secondary_header {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 1px;
	background-color: #B3B3B3;
	clear: both;
}

.container .secondary_header ul {
	margin: 0 auto;
	list-style: none;
	padding: 0 0 10px 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 35px;
}

.secondary_header ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.secondary_header ul li a {
	display: block;
	width: auto;
	margin: 0;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	letter-spacing: 3px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s linear;
	white-space: nowrap;
}

.secondary_header ul li a:hover {
	color: #717070;
	text-decoration: none;
}


/* =========================
   MAIN ARTICLE SECTION
   ========================= */

section {
	background-color: #FFFFFF;
	width: 100%;
}

.top-content {
	display: flex;
	width: 100%;
	align-items: center;
}

.left_article {
	background-color: #FFFFFF;
	width: 60%;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	color: #343434;
	padding-bottom: 15px;
	box-sizing: border-box;
}

.right_article {
	width: 40%;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.right_article img {
	max-width: 100%;
	height: auto;
	display: block;
}

.diamond-logo {
	width: 100%;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 20px;
}

.diamond-logo img {
	max-width: 400px;
	width: 100%;
	height: auto;
}

.container .left_article h3 {
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 5%;
	color: #717070;
	font-weight: bold;
	text-transform: uppercase;
}

.container .left_article p {
	padding-left: 5%;
	padding-right: 5%;
	text-align: left;
	line-height: 24px;
	margin-top: 30px;
	margin-bottom: 15px;
	color: #343434;
}

.noDisplay {
	display: none;
}
/* =========================
   RIGHT ARTICLE LISTS
   ========================= */

.container .right_article ul {
	margin: 0;
	padding: 0;
}

.right_article ul li {
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	list-style: none;
	text-align: center;
	background-color: #FFFFFF;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 0;
	transition: all 0.3s linear;
	border-left: 5px solid #717070;
}

.right_article ul li:hover {
	background-color: #717070;
	cursor: pointer;
}


/* =========================
   FOUR-COLUMN ROW
   ========================= */

.row {
	width: 100%;
	margin: 0;
	padding: 0;
	display: inline-block;
}

.row.blockDisplay {
	display: block;
}

.columns {
	width: 25%;
	float: left;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	color: #2C9AB7;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.container .columns p {
	padding-left: 25px;
	padding-right: 25px;
}

.container .columns h4 {
	text-align: center;
	color: #2C9AB7;
}

.column-icon {
	width: 100px;
	height: 100px;
	object-fit: contain;
	display: block;
	margin: 0 auto 36px auto;
}


/* =========================
   HALF COLUMNS
   ========================= */

.column_half {
	width: 50%;
	float: left;
	margin-top: 0;
}

.left_half {
	background-color: #52BAD5;
}

.right_half {
	background-color: #01B2D1;
	color: #FFFFFF;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	text-align: center;
	font-weight: bold;
}

.container .column_half.left_half h2 {
	color: #FFFFFF;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	text-align: center;
}

.column_title {
	padding-top: 25px;
	padding-bottom: 25px;
}


/* =========================
   FULL-WIDTH ARTICLE
   ========================= */

.full_article {
	width: 100%;
	background-color: #FFFFFF;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	color: #343434;
	padding-bottom: 15px;
	box-sizing: border-box;
}

.container .full_article h3 {
	padding-left: 3%;
	padding-right: 5%;
	margin-top: 20px;
	color: #717070;
	font-weight: bold;
	text-transform: uppercase;
}

.container .full_article p {
	padding-left: 3%;
	padding-right: 5%;
	text-align: left;
	line-height: 24px;
	margin-top: 20px;
	margin-bottom: 15px;
	color: #343434;
}

.container .full_article ul {
	padding-left: calc(3% + 20px);
	padding-right: 5%;
	margin-top: 10px;
	margin-bottom: 15px;
	color: #343434;
	line-height: 24px;
	text-align: left;
}

.container .full_article li {
	margin-bottom: 6px;
}


/* =========================
   PLACEHOLDER / THUMBNAILS
   ========================= */

.placeholder {
	width: 100%;
	padding-top: 30px;
	padding-bottom: 30px;
	height: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.thumbnail {
	width: 100px;
	height: 100px;
	border-radius: 200px;
	margin-left: auto;
	text-align: left;
}

.thumbnail_align {
	text-align: center;
}


/* =========================
   SOCIAL AREA
   ========================= */

.social {
	text-align: center;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	width: 100%;
	background-color: #414141;
	clear: both;
	overflow: auto;
}

.social_icon {
	width: 25%;
	text-align: center;
	float: left;
	transition: all 0.3s linear;
	line-height: 0;
	padding-top: 7px;
}

.container .social .social_icon:hover {
	cursor: pointer;
	opacity: 0.5;
}


/* =========================
   FOOTER
   ========================= */

.footer {
	background-color: #717070;
}

.copyright {
	text-align: center;
	background-color: #717070;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
}


/* =========================
   TABLETS AND PHONES
   ========================= */

@media (max-width: 768px) {

	.container {
		width: 95%;
	}

	section {
		display: flex;
		flex-direction: column;
	}

	.left_article {
		width: 100%;
		order: 1;
		height: auto;
	}

	.right_article {
		width: 100%;
		order: 2;
		height: auto;
		padding-bottom: 25px;
	}

	.diamond-logo {
		width: 100%;
		order: 3;
		padding-top: 10px;
		padding-bottom: 20px;
	}

	.right_article img {
		max-width: 400px;
		width: 100%;
		height: auto;
	}

	.placeholder {
		margin: 0;
		padding: 0;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 100%;
	}

	.columns {
		width: 100%;
		float: none;
		margin-top: 6px;
		margin-bottom: 6px;
		padding: 0;
	}

	.columns p,
	.container .columns p {
		padding-left: 14px;
		padding-right: 14px;
	}

	.column_half.left_half,
	.column_half.right_half {
		width: 100%;
		float: none;
	}

	.secondary_header {
		margin: 0;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.container .secondary_header ul {
		margin: 0;
		padding: 10px 0;
		height: auto;
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.secondary_header ul li {
		float: none;
		width: auto;
		margin: 0;
		text-align: center;
	}
    .top-content {
	flex-direction: column;
}

.left_article {
	width: 100%;
}

.right_article {
	width: 100%;
}
    
}


/* =========================
   VERY SMALL PHONES
   ========================= */

@media (max-width: 320px) {

	.container {
		width: 100%;
	}

	.secondary_header {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.container .secondary_header ul {
		padding: 8px 0;
	}

	.secondary_header ul li a {
		font-size: 14px;
		letter-spacing: 2px;
	}

	.left_article {
		width: 100%;
	}

	.right_article {
		width: 100%;
		padding-bottom: 20px;
	}

	.diamond-logo img {
		max-width: 95%;
	}

	.columns {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.columns p,
	.container .columns p {
		padding-left: 10px;
		padding-right: 10px;
	}

	.column_half.left_half,
	.column_half.right_half {
		width: 100%;
	}

	.copyright {
		padding-top: 25px;
		padding-bottom: 10px;
		margin-bottom: 0;
	}

	.container .left_article h3 {
		margin-top: 30px;
	}

	.social .social_icon img {
		width: 80%;
	}
}


/* =========================
   MID-SIZE DESKTOP / TABLET
   ========================= */

@media (min-width: 769px) and (max-width: 1000px) {

	.secondary_header {
		overflow: visible;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.container .secondary_header ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		gap: 35px;
		padding: 0 0 10px 0;
		margin: 0 auto;
	}

	.secondary_header ul li {
		margin: 0;
		width: auto;
		white-space: nowrap;
	}

	.columns {
		width: 25%;
		float: left;
		padding: 0;
	}

	.container .columns p {
		padding-left: 15px;
		padding-right: 15px;
	}
}