@media only screen { 
	body {
		background: #274A76
	}
	.introCont h1 {
		margin-top: 25px;
	}
	/* content */
	.content {
	}
		.content h1, h2, h3, p {
			color: white;
			text-align: center;
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		}
		.content h1:first-of-type {
			margin-top: 20px;
			margin-bottom: -5px;
		}
	.projects {}
		.projects .row {
			padding-top: 20px;
		}
		.projects .row:last-of-type {
			padding-bottom: 30px;
		}
		.projects img {
			border-radius: 5px;
		}
		.projects p {
			color: black;
			font-size: 18px;
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			text-align: center;
		}

	.moreProjects {
		text-align: center;
	}		
		.moreProjectsCont {
			background: #C29A50; 
			margin: 0px;
			padding: 0px;
		}
		.moreProjectsText{}
			.moreProjects h1,p {
				font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
				color: white;
				text-align: left;
			}
		.moreProjectsImages {}
			.moreProjects img {
				border-radius: 15px;
				margin-bottom: 25px;
				display: inline-block;
			}
} /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (min-width: 40.063em) {
	.intro {
	  position: relative;
	}
		.introCont {
			height: 50vh;
			postition: relative;
		}
		.introCont h1 {
			position: absolute;
			top: 50%;
			left: 50%;
			width:100%;

			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			
			text-align: center;
			font-size: 50px;
			color: white;
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		}
	.content {
		background-color: #FFFFFF;
	}
		.content * {
			color: black;
		}
		.content h1, h2, h3, p {
			color: white;
		}
		.content .row:first-child {
			padding-top: 50px;
		}

	.projects {
		text-align: center;
	}
		.projects .row {
			margin-bottom: 50px;
		}
		.projects .row:last-of-type {
			padding-bottom: 100px;
		}
		.projects p {
			color: black;
		}
		.projects img {
			/*width: 650px;*/
			height: 370px;
			display: inline-block;
		}
	.moreProjectsCont {
		background: #274A76; 
	}
	.moreProjects img {
		height: 525px;
		width: 600px
	}

	#medSecImg {
		height: 450px;
	}
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (min-width: 64.063em) {
	/* top bar */
	.top-bar {
		background: transparent !important;
	}
		.top-bar.expanded .title-area {
			background: transparent;
		}
		.top-bar-section li {
			/* second layer */
			background: transparent !important;
		}
		.top-bar-section li:not(.has-form) a:not(.button) {
			/* first layer */
			background: transparent !important; /*#C29A50 */
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			font-size: 18px;
			padding: 20px;
		}
		.top-bar h1 {
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
						padding:20px;
		}
		.top-bar.expanded .toggle-topbar a {
			color: #FFFFFF !important;
		}
		.top-bar .name h1 {
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			font-size: 23px;
		}	

	.intro {
		height: 40vh;
	}
		.introCont h1 {
			margin: 0px;
		}	
		.daHeader {
			font-size: 80px;
		}
	.moreProjectsText {
		padding-left: 100px;
		padding-bottom: 50px;
	}


} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */