/* ---------------------------------
		General Formatting 
		----------------------------------*/
		/* Remove margin and padding from main content area */
		.id7-main-content-area>.id7-main-content, .container {
			padding:0;
			margin:0;
		}

		/* Remove page title */
		.id7-page-title {
			display:none;	
		}

		/* Remove Tertiary Navbar */
		.navbar-tertiary {
			display:none;
		}

		/* ---------------------------
		Title Section 
		-----------------------------*/
		/* Left-side */
		section.title-section {
			display:flex;
			height: 300px;
			font-family: 'Raleway', sans-serif;
			position:relative;
		}

		.title-section div.title {
			flex: 1 50%;
			background: linear-gradient(140deg, #fcfdff, #c9ebfb, #fcfdff);
			display:flex;
			flex-direction: column;
			text-align:center;
			justify-content: center;
			color:#204f79;    
			align-items:center;    
		}

		.title-section div.title h2 {
			width: 320px;
			text-transform: uppercase;
			font-size: 68px; 
		}


		/* Right side */

		div.title-image {
			flex: 1 50%;
		}

		div.title-image img {
			width:100%;
			height:100%;
			object-fit:cover;
		}

		/*-------------------
		Intro Section 
		---------------------*/
		.blog-intro {
			padding: 15px;
			width:90%;
			margin: 0 auto;
			text-align: center;
		}       
		.blog-intro h3 {
			margin: 0;
		}

		/*--------------------
		Main Section
		--------------------*/

		.wrapper {
			margin: 5px;
		}

		/* Cards */

		div.cards {
			display:flex;
			flex-wrap:wrap;
			margin: 0 auto;
		}

		div.card {
			flex: 0 auto;
			width: calc(33.3% - 25px);
			margin: 10px 12.5px;
		}

		div.card a {
			text-decoration: none;
		}

		div.card-item {
			display: flex;
			height: 425px;
			flex-wrap: wrap;
			background: #D2EBFF;
			box-shadow: 1px 1px 3px;
			transition:200ms ease-in-out;
			border-radius:5px;
		}

.card:hover .card-item {
	box-shadow: 1px 1px 5px;
}

.card .image {
	height: 50%;
	width: 100%;
	object-fit: cover;
	position:relative;
}

.card .image::before {
	content:'';
	position: absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			border-bottom:solid 1px white;
			transition: 350ms;
			z-index: 1;
		}

		.card .image::after {
			content:'';
			position: absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			border-bottom:solid 1px rgba(32, 143, 142, 0.9);
			transform: scale(0,1);
			transition: 350ms;
			z-index: 1;
		}

		.card:hover .image::after {
			transform: scale(1,1);
		}

		.card .image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius:5px;
		}

		.card .image p {
			position: absolute; 
			top:0;
			bottom:0;
			left:0;
			right:0;
			background: rgba(0, 0, 0, 0.3);
			margin:0;
			display:flex;
			justify-content: center;
			align-items: center;
			color:white;
			font-family: 'Raleway', serif;
			font-size:24px;
			opacity: 0;
			transition: 350ms ease-in-out;
			border-radius:5px;
		}

		.card:hover .image p {
			opacity: 1;
		}
		.card a:focus .image p {
			opacity: 1;
		}

		.card .name, .card .title {
			flex: 1 100%;
			display:flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding:5px;
		}

		.card .date, .card .type {
			position:relative;
			flex: 1 50%;
			display:flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding:5px;
		}

		.date::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: 5px 0;
			border-right: solid 1px white;
			border-top: solid 1px white;
			transition: 350ms ease-in-out;
		}

		.card:hover .date::after {
			border-top: solid 1px rgba(32, 143, 142, 0.9);
			border-right: solid 1px rgba(32, 143, 142, 0.9);
		}

		.card a:focus .date::after {
			border-top: solid 1px rgba(32, 143, 142, 0.9);
			border-right: solid 1px rgba(32, 143, 142, 0.9);
		}

		.type::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: 5px 0;
			border-top: solid 1px white;
			transition: 350ms ease-in-out;
		}

		.card:hover .type::after {            
			border-top: solid 1px rgba(32, 143, 142, 0.9);
		}

		.card a:focus .type::after {
			border-top: solid 1px rgba(32, 143, 142, 0.9);
		}

		/* Archive Section */

		.archive {
			padding: 10px;
		}

		/* Media Queries */

		@media screen and (max-width:990px) {

			/* Cards */
			.name h4 {
				font-size:24px;
			}
			.title h5 {
				font-size: 16px;
			}
		}

		@media screen and (max-width:768px) {
			/* Title Section */
			.title-section div.title {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: none;
			}
			.title-section div.title h2 {
				width:100%;
				background: linear-gradient(140deg, rgba(252, 253, 255, 0.4), rgba(201, 235, 251, 0.5), rgba(252, 253, 255, 0.5));
			}

			/* Cards */
			div.card {
				width: calc(50% - 25px);
			}
		}

		@media screen and (max-width:400px) {
			/* Title Section */
			.title-section div.title h2 { 
				font-size:46px;
			}

			/* Cards */
			div.card {
				width: calc(100% - 25px);
			}
		}