/* Foundation Zurb's Media Queries */

@media only screen {
	/* Define mobile styles */
	body {
		background-color: #FFFFFF;
		padding: 0px;
		margin: 0px;
	}

	/* intro */
	.intro {
	  height: 90vh;
	  background-color: #274A76;
	}

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

	/* "We Do Drainage" */
	.head h1 {
		color: white;
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		margin-top: 30px;
		margin-bottom: 20px;
	}

	.head p {
		color: white;
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		font-size: 18px;
	}

	/* content - "3 across" */
	.circle {
		border-radius: 100%;
		/*border: 2px solid black;*/
		height: 120px;
		width: 120px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		background: #E8B85F;
	}

		.circle i {
			margin-top: 20px;
		}

	.content h1 {
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 0px;
		color: black;
	}

	.content p {
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		text-align: center;
		padding: 0px 10px 0px 10px;
		font-size: 18px;
	}

	/* logos */
	.logos {
		background: white;
	}

		.logos h1, h2, h3, h4, h5 {
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			text-align: center;
			color: black;
			margin-top: 40px;
			margin-bottom: 40px;
			padding-left: 10px;
			padding-right: 10px;
		}

		.logos h1 {
			margin-bottom: 20px;
		}

	img {
		margin-top: 0px;
		margin-bottom: 40px;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
} 

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

/*// Medium screens*/
@media only screen and (min-width: 40.063em) { 
	/* min-width 641px, medium screens */
	.intro {
	 height: auto;
	  background: url('../img/projects/lihueBaseyardRetentionEdit.png') no-repeat center center fixed; 
	  /*lihueBaseyardRetention*/
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	}

	.mobileIntro {
		margin: 20px 0px;
	}

	/* 3 across */
	.icons {
		margin-top: 80px;
		padding-bottom: 30px;
		border-bottom: 1px solid black;
	}

	h1.iconhead {
		border-bottom: 2px solid white;
		padding-bottom: 10px;
		margin-bottom: 15px;
		margin-left: 20px;
		margin-right: 20px;
		text-align: center;
	}
	
	.logos .row:nth-last-of-type(2) {
		border-bottom: 1px solid black;
	}


} 

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

/*// Large screens*/
@media only screen and (min-width: 64.063em) {
	/* min-width 1025px, large screens */

	.fullWidth {
	   width: 100%;
	   margin-left: auto;
	   margin-right: auto;
	   max-width: initial;
	}

	.threeFourWidth {
	   width: 75%;
	   margin-left: auto;
	   margin-right: auto;
	   max-width: initial;
	}

	.intro {
	  height: 50vh;
	  /*background-color: #274A76;*/
	  background: url('../img/projects/lihueBaseyardRetentionEdit.png') no-repeat center center fixed; 
	  /*lihueBaseyardRetention*/
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	  position: relative;
	}

	/* top bar */
	.top-bar {
		background: transparent !important;
		padding: 20px 20px;
	}
		.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;
		}
		.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 .name h1 {
			font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			font-size: 23px;
		}	
	/* top bar close */

	/* header */
	.head h1 {
		color: white;
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		text-align: center;
		font-size: 80px;
	}

	.headerContainer {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}

	.content {	
		color: black;
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	}

	.content p {
		padding-left: 20px;
		padding-right: 20px;
	}

	.content h1 {
		color: black;
		font-family: "Quattrocento Sans", "Montserrat", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	}
}

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

/*// XLarge screens*/
@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 */

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