/* Visual Studio Formatting Code- Not needed on actual site */
.id7-main-content-area>.id7-main-content, .container {
	padding:0;
	margin:0;
}


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

.buttons a{
	text-decoration:none;
	color:white;
}

a.btn {
	width: 100%;
	margin: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:18px;
}

div.all-student-projects {
	width:100%;
}

a.all-projects {
	text-decoration:none;
	width: 80%;
	margin: 0 auto;
	background: gray;
	color:white;
	font-size:20px;
}

a.all-projects.btn.focus, a.all-projects.btn:focus, a.all-projects.btn:hover {
	color: white;
	background: #636363;
}




/* The h1 title is hidden through a JQuery script. Code below moves the content up to the top of the page */
div.header-img {
	margin-top: -62px;	
}

/* Intro section */
section.intro {
	padding:20px 0;	
}

 
/* ----------------------------------
Title Section
-------------------------------------*/

.title-section {
	display: flex;
	flex-wrap: wrap;
	min-height: 300px;
	font-family: 'Raleway', sans-serif;
}


.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 h2 {
	text-transform: uppercase;
	font-size: 68px;
	width:100%;
	color:#204f79;
}

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

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


/* Main Section styling  */
.main-container {
	padding: 0 10px 10px 10px;	
}

.projects-text h4 {
	text-align: center;
}

.projects-text p {
	text-align: center;
}

.projects-buttons {
	display: flex;
	flex: 0 1 50%;
	justify-content: center;
	height:60px;
}
.projects-buttons div.buttons {
	flex: 0 1 85%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button.current,
button.completed,
button.archive {
	margin:5px;
	width:33%;
}

hr {
	margin: 10px 100px;
	border: 0;
	border-top: 2px solid #dcd8d8;
} 

		
/*--------------------------------
Media Queries
--------------------------------*/
            

@media screen and (max-width:425px) {
	.projects-buttons {
		height:auto;
		display:block;
		text-align:center;
	}

	.projects-buttons div.buttons {
		display:block;
	}

	button.current,
	button.completed,
	button.archive {
		margin:auto;
		width:auto;
		padding:5px;
		margin:1px;
	}
}

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

	/* Title */ 
	div.title h2 {
		font-size:50px;
	}
}

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

	/* Title Section */

	section.title-section {
		display:grid;	
		height:auto;
	}

	div.title, div.title-image {
		grid-column: 1;
		grid-row: 1;
	}

	div.title {
		background: linear-gradient(140deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5));
		z-index: 1;
	}

	div.title-image {
		display: block;
		object-fit: cover;
		max-height:300px;
		width: 100%;
		z-index: 0;
	}

	div.title-image img {
		width:100%;
		max-height:300px;
	}
}


@media screen and (min-width: 615px) {

	.projects-container {
		display:flex;
		padding:20px;
	}

	.projects-text {
		flex: 0 1 50%;
		display: flex;
		align-items: center;
		margin: 0 20px;
	}

	.projects-text h4 {
		flex: 0 1 35%;
		text-align: center;
		padding: 0 10px;
		border-right: solid 3px;
	}

	.projects-text p {
		flex: 0 1 65%;
		padding-left: 30px;
		text-align: center;
	}


	.projects-buttons {
		height:auto;
		flex: 0 1 40%;
	}

	.projects-buttons div.buttons {
		flex-direction:column;
	}
	button.current,
	button.completed,
	button.archive {
		margin:5px;
		width:auto;
	}
}

@media screen and (min-width:990px) {
	.projects-buttons div.buttons {
		flex-direction:row;
	}
	.projects-buttons {
		height:80px;
		flex: 0 1 50%;
	}
	button.current,
	button.completed,
	button.archive {
		width:33%;
	}
}