/* CSS Document */
@media only screen and (min-width: 2400px) {
	#blueprint { 
		height:420px;
		background-size: 3000px 1742px;
		}
}
@media only screen and (min-width: 2000px) {
	#blueprint { 
		height:380px;
		background-size: 2400px 1394px;
		}
}
@media only screen and (max-width: 1440px) {
	
	#container, #header, #footer { width:84%; padding:0 8%; }
		nav, #topBtn, #nav-work { right:8%; }	
		
	#project_tile { width:87%; margin-left: -1%; }
	#project_description { padding-right: 0%; }
	#project_caption { 
		padding-top:10px;
		padding:14px 3px 0 3px; 
		min-height:40px; 
		}
	.Intro {
		font-size:18px;
		}
	.title, .title a:link, .title a:visited, .title a:hover { font-size:30px; }
	.detail, .detail a:link, .detail a:visited, .detail a:hover { font-size:14px; line-height:1.75em; } 
	.about_detail, .service_detail { font-size:14px; line-height:1.8em; } 
}
@media only screen and (max-width: 1100px) {

	#container, #header, #footer { width:87%; padding:0 6.5%; }
		nav, #topBtn,  #nav-work { right: 6.5%; }	
		#project_tile { margin-left: -6.5px; }
		
	.Intro {
		font-size:18px;
		}
	#col_1 { 
		width:30%; 
		padding-right:4%; 
		}
	#col_2 { 
		width:66%; 
		padding-top: 52px;
		padding-bottom:10px;
		}
		#col_half { width:100%; padding-bottom:0; }
		#service_description {
			padding-top:0;
			margin-top:-18px;
			padding-left:8%;
			padding-right:0%;
			}
		#brand_description { padding: 0 0 20px 8%; margin-top:-6px; }
		#project_description { padding:0 0 20px 4%; margin-top:-4px; }
		#break { display:none; }
		#blueprint { 
		margin-top:20px;
		margin-bottom:35px;
		}
}

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

	#container, #header, #footer { width:90%; padding:0 5%; }
		nav, #topBtn, #nav-work { right:5%; }	
	#project_tile { width:86.5%; }
	.project_caption a:link, .project_caption a:visited { 
		font-size:10px; 
		color: #222; }
		#brand_description .title { padding-bottom:20px; }
		.title, .title a:link, .title a:visited, .title a:hover { font-size:26px; }
			#service_description .title, 
			#service_description .title a:link, 
			#service_description .title a:visited, 
			#service_description .title a:hover { font-size:18px; }
}

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

	#logo { width: 230px; margin-top:30px; }
	#nav-work { top:128px; }
	
	#project_nav {
		margin:0;
		margin-bottom:30px;
		padding:20px 0 50px 0;
		border-top:0px;
		border-bottom:1px dotted #BBB;
		}
		#project_nav li {
			float:left;
			padding:6px 20px 0 0;
			}
			.slash { color:#BBB; display:block; }
	#project_tile { width:83%; }
	#project_description { padding:15px 0 20px 0; margin-top:0; }
	#service_description {
			padding-left:0%;
			}
	#col_1, #col_2 {  width:100%; padding:0; float:none; }
		#col_1 { padding-top: 32px; padding-left:0; }
		#col_2 { padding-top: 0px; padding-bottom:10px; display:table; }
		#brand_description { padding: 5px 0 10px 0; }
			
	#block_form { width:100%; }
		#block_form .form_item { width:32%; margin-right:3%; }
		#block_form .form_content { width:65%; }

	.caption { line-height:1.55em; }
	.y_spacing { padding-top:0px;padding-bottom:0px; }
	.star { width:15px; height:15px; }
}

@media only screen and (max-width: 800px) {
::-webkit-scrollbar {
    display: none;
}
	body {
	padding-top:80px; 
	}
	/*#content { border-top:1px dotted #555; }*/
	#header { 
		height:80px;
		top:0;
		background-color:#FAFAFA;
		position:fixed;
		z-index:100;
		}
	#logo {
		position:fixed;
		height:60px;
		width: 210px;
		margin-top:22px;
		}
	#menu-icon {
		display: inline-block;
		position:fixed;
		top: 23px;
		right: 5%;
		z-index:1000;
		}
		a:hover#menu-icon {
			/* background-color: #47dff7; */
			border-radius: 0;
			}
	.menu-icon-off {
		background: url(../images/menu-icon.svg) center no-repeat;
	}
	.menu-icon-on {
		background: url(../images/menu-icon-close.svg) center no-repeat;
	}
	nav { 
		position:static;
		top:60px;
		}
	nav ul {
		display: none;
		background-color: #47dff7;
		left: 0;
		top: 80px;
		width:100%;
		padding:0px 0px 10px 0px;
		margin: 0;
		border-radius: 0;
		position:relative;
		overflow-y:scroll;
		/*overflow: hidden;*/
		z-index:100; 
	}
	.header-blue {
		background-color: #47dff7 !important;
	}
	nav li {
		width: 100%;
		padding: 0;
		margin: 0;
		height:auto;
		border-top:1px dotted #555;
		text-align: left;
		}
	.nav {
		font-weight: 400;
		font-size: 17px;
		letter-spacing: 0.36em;
		}
		.nav a:link, .nav a:visited { color: #000; }
		.nav a:hover { color: #FFF; }
		.nav li { padding: 21px 0 19px 2px; }
			.dropdown { display:inline-block; float:right; margin-top:-4px; padding-right:.7%; }
			.dropdown img { width:28px; height:28px; }
		.nav_sorting { 
				display:none;
				font-weight: 300;
				list-style: disc;
				text-align:right;
				color: #000;
			}
		.nav_sorting li { padding: 4px 0 21px 3px; border:none; }
		
	.banner { margin-bottom:20px; }
	#brand_intro { width:70%; }
	#nav-work { display:none; }
	#project_tile { width:102%; margin-left: -1%; }	

	.text  { font-size:18px; }
	.text_info { font-size: 15px; }
	
	.page_title, 
	.page_sub_title { font-size:28px; padding-bottom:12px; letter-spacing:0.02em; }
	.page_sub_title { font-size:25px; ) 
	.copyright { font-size:11px; }
	.project_caption a:link, .project_caption a:visited { 	color: #000; }
	#service_description { padding-top:60px; }
	#content_2 { 
		padding-bottom:0px;
		}
	#blueprint { 
		height:300px;
		background-size: 1200px 800px;
		}
}

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

	#container, #header, #footer { width:88%; padding:0 6%; }
	#topBtn, #menu-icon { right: 6%; }
	#logo { margin-top:20px; }
	.dropdown { padding-right:.8%; }
	#brand_intro { width:100%; }
	#project_tile { width:103%; margin-left: -1.5%; }
	.web_image { box-shadow: 0px 6px 20px #DFDFDF; margin-bottom:30px; }
	#blueprint { 
		height:350px;
		background-size: 1000px 582px;
		}
}

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

	#container, #header, #footer { width:85%; padding:0 7.5%; }
	#topBtn, #menu-icon { right:7.5%; }
	#brand_intro {  padding:40px 0 15px 0; }
	.dropdown { padding-right:1.1%; }
	#project_tile { width:104%; margin-left: -2%; }
		
	#block_form .form_item { width:35%;margin-right:3%; }
	#block_form .form_content { width:62%; }
		.form_field, .form_menu { float:left; }
			#message, 
			.form_field, .form_menu { width:99%; }
		.Intro_1 { 	font-size:19px; }
		#service_description .title { 
			padding-top:15px; 
			padding-bottom:8px;
			}
	#project_item {
	padding-bottom: 18px;/*space below image and text div*/
	}
	.g-recaptcha {
	transform: scale(0.8);
	} 
	#content_2 { 
		display:none;
		}
}

@media only screen and (max-width: 600px) {
	
	#col_1 { padding-top: 35px; }
	#col_2 { padding-top: 10px; }
	.dropdown { padding-right:1.2%; }
	#block_form .form_item { width:37%;margin-right:3%; }
	#block_form .form_content { width:60%; }
		#form_button { font-size:15px; height:36px; }
	#break_res { display:block; }
	#expand { padding-top: 0px; }
	#service_description .service_detail { width:100%; }
	.form_field,
	.form_menu {
		height:36px;
		margin: 4px 0 12px 0;
		}
	#message {
		margin-top:4px;
		min-height: 200px;
		}	
}

@media only screen and (max-width: 550px) {
	
	#block_form { width:100%; }
	#block_form .form_item, 
	#block_form .form_content { width:100%; float:left; margin:0; }
	.web_image { box-shadow: 0px 5px 16px #DDD; margin-bottom:28px; }	
	#project_item { padding-bottom: 12px; }/*space below image and text div*/

}

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

	.dropdown { padding-right:1.5%; }
		.detail, .detail a:link, .detail a:visited, .detail a:hover,
		.about_detail, .service_detail { font-size:14px; line-height:1.6em; } 
		
		.title, .title a:link, .title a:visited, .title a:hover { font-size:23px; }
			#service_description .title, 
			#service_description .title a:link, 
			#service_description .title a:visited, 
			#service_description .title a:hover { font-size:17px; }
			
			#service_description #expand { display:none; }

}