@media only screen { 
	body {
	background: url('../img/projects/mehanaDetentionSystemCoverFlip.png') no-repeat center center fixed; 
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	}

	/* top bar */
	.top-bar {
		/*background: transparent;*/
		background: #C29A50 !important;
	}

	.top-bar.expanded .title-area {
		/*background: transparent;*/
		background: #C29A50 !important;
	}

	.top-bar-section li {
		/* second layer */
		/*background: transparent !important;*/
		background: #C29A50 !important;
	}

	.top-bar-section li:not(.has-form) a:not(.button) {
		/* first layer */
		/*background: transparent !important;*/
		background: #C29A50 !important;
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	}

	.top-bar h1 {
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	}

	.top-bar.expanded .toggle-topbar a {
		color: #FFFFFF !important;
	}
	/* top bar close */

	/* intro close */

	/* content */
	.content {
		position: relative;
		text-align: center;
	}
		.content p {
			padding-top: 20px;
			color: white;
			text-align: center;
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			margin-left: 10px;
			margin-right: 10px;
		}

		.content h1, h2, h3 {
			color: white;
			text-align: center;
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			padding: 20px;
		}

		.content h1 {
			margin-left: 25px;
			margin-right: 25px;
		}

		.content img {
			margin-top: 20px;
			border: 2px solid white;
			border-radius: 5%;

			margin-left: auto;
			margin-right: auto;
			display: inline-block;
		}

		.separator {
			border-bottom: 2px solid white;
			padding-left: 20px;
			padding-right: 20px;
		}

	table {
		margin-right: auto;
		margin-left: auto;
	}

	.contactCont {
		background: rgba(0,0,0,0.4);
	}

} /* 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) {

} /* 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 {
		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;
		}	

		.content p {
			margin-left: 130px;
			margin-right: 130px;
			font-size: 20px;
		}

		.content h1 {
			margin-left: 75px;
			margin-right: 75px;
		}

} /* 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 */