/* STYLES FOR RESPONSIVE DESIGN */


/* LARGE BREAKPOINT ------------------------ */

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


	h2 {font-size: 25px;
		margin: 0px;
		}


	/* IDs -------------------------- */

	#header {padding: 10px 25px;
		}


	/* CLASSES ---------------------- */

	.project-index-image {width: 325px;
		height: 230px;
		}

	 .project-description {font-size: 14px;
	 	}

}



/* MIDDLE BREAKPOINT ----------------------- */

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


	/* IDs -------------------------- */

	#contact-container {padding: 0px;
		display: block;
		}

	#contact-left {width: 100%;
		height: unset;
		float: unset;
		max-width: unset;
		margin-left: unset;
		margin-right: unset;
		}

	#contact-right {width: 100%;
		height: unset;
		float: unset;
		margin-bottom: 50px;
		max-width: unset;
		margin-right: unset;
		margin-top: -30px;
		}

	#header-logo {max-width: 250px;}


	/* CLASSES ---------------------- */

	.contact-text {margin: auto;
		}

	.content-box {padding: 50px 40px;
		}

	.header-links {font-size: 15px;
		}

	.project-bigtext {text-align: center;
		}

	.p-image {width: 100%;
		min-width: 300px;
		height: auto;
		aspect-ratio: 1.4/1;
		}

	.project-index-image {margin: 0px 0px 20px 0px;
		}

	.project-index-item-container {display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0px auto 100px auto;
		max-width: 325px;
		}

	.work-display {width: unset;
		padding: 30px;
		}

}



/* SMALL BREAKPOINT ------------------------- */

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

	/* IDs -------------------------- */

	#contact-container {padding: 10px 0px;
		display: block;
		}

	#contact-left {width: 100%;
		height: unset;
		float: unset;
		max-width: unset;
		margin-left: unset;
		margin-right: unset;
		}

	#contact-right {width: 100%;
		height: unset;
		float: unset;
		margin-bottom: 50px;
		max-width: unset;
		margin-right: unset;
		}

	#header {width: 100%;
		display: block;
		text-align: center;
		padding: 10px 0px;
		}

	#header-logo {margin-left: -20px;
		margin-top: 40px;
		}

	#intro-container {padding: 50px 40px;
		}


	/* CLASSES ---------------------- */

	.contact-text {margin: auto;
		}

	.content-box {padding: 50px 20px;
		}

	.work-display {margin-top: 15%;
		}

}