/* CSS Document */
input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	}
textarea:focus, input:focus {
    outline: none;
}
*:focus {
    outline: none;
}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

html, body {
	padding:0;
	margin:0;
	width:100%;
	background:#F3F3F3 url(../images/bg-bar.jpg) top repeat-x fixed;
	}
#container {
	margin:0;
	display:block;
	text-align: left;
	background-color:#F9F9F9;
	}
#header, #footer, #content, #content_1, #content_2, #content_home { 
	width:100%;
	}

#content_home {
	height:auto;
	padding:10px 0 40px 0;
	display:block;
	}
	#content, #content_1, #content_2  { 
		padding-top:20px;
		padding-bottom:70px;
		display:table;
		width:100%;
		}
		#content_1 { 
		border-top:1px dotted #04c4e7;
		padding-top:60px;
		padding-bottom:50px;
		}
		#content_2 { 
		padding-top:0px;
		padding-bottom:20px;
		}
			#blueprint {
				height:330px;
				width:100%;
				display:block;
				margin-top:20px;
				margin-bottom:80px;
				background:#F9F9F9 url(../images/sdu_blueprint_2400.jpg) center center no-repeat;
				background-size: 1500px 872px;
				-webkit-animation: fadein 2s;
			       -moz-animation: fadein 2s;
			        -ms-animation: fadein 2s;
			         -o-animation: fadein 2s;
			            animation: fadein 2s;
				}

.noscroll {
	overflow: hidden;
}
nav, #header, #footer, #logo, #copyright {
	border:0; 
	margin:0; 
	padding:0;
	overflow:hidden;
	overflow-x:hidden;
	position:relative;
	display:block;
	}
#container, #header, #footer { width:76%; padding:0 12%; }
	
#footer {
	background-color:#F3F3F3;
	}
#header { 
	height: 95px; 
	background-color:#F9F9F9;
	display:table;
	}
	#logo {
		width:230px;
		height:auto;
		margin-top:26px;
		z-index:1000;
		}
	nav { 
		width:auto;
		top:44px;
		right:12%;
		position:absolute;
		z-index:100;
		}
		nav ul { 
			margin:0; 
			padding:0;
			list-style: none;
			}
		nav li { 
			text-align: right;
			}
		.nav_sorting { display:none; }
#menu-icon {
	display: none;
	width: 36px;
	height: 36px;
	top: 34px;
	z-index:100;
	}
.nav li { 
	display: inline-block;
	padding: 0 0 0 30px;
	}
.iso {cursor: pointer;}
.current { color: #000 !important; }
/*--- responsive nav end ---*/

.nav,
.nav-work {
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	font-size: 15px;
	line-height: 1.22em;
	letter-spacing: 0.18em;
	text-transform:uppercase;
	color: #000;
	text-decoration:none;
	}
	.nav,
	.nav a:link,
	.nav a:visited { 
		color: #000; 
		text-decoration:none; 
		-webkit-transition: .3s ease-in-out; 
		transition: .3s ease-in-out;
		}
	.nav a:hover { 
		color: #999; 
		text-decoration:none;
		}
		.dropdown { display:none; }
		.nav .current { font-weight:400; letter-spacing: 0.16em; }
	.nav-work,
	.nav-work a:link,
	.nav-work a:visited { 
		font-size:12px; 
		line-height:1.35em; 
		color: #999; 
		letter-spacing: 0.18em; 
		text-decoration:none; 
		-webkit-transition: .3s ease-in-out; 
		transition: .3s ease-in-out;
		}
	.nav-work a:hover { 
		color: #000; 
		text-decoration:none;
		}
#banner {
	width: 100%;
	height: 100%;
	margin-bottom:10px;
	z-index:1;
	}
	#banner_image {
	    border:0;
	    padding:0;
		}
	.home_img { 
		width:100%; 
		height:auto; 
		}
	.slider,
	.slider a:link, 
	.slider a:visited, 
	.slider a:hover { 
		display:table; 
		color: #28d2ed;
		}
#nav-sub {
	padding:45px 0;
	display:block;
	}
	#nav-sub ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: normal;
	vertical-align:middle;
	}
	#nav-sub li {
	display: inline-block;
	padding:0;
	}
#copyright { 
	padding:80px 0 40px 0; 
	text-align:left; 
	}
	#page_title { margin:36px 0 36px 0; text-align:center; }
	img { border:none; }
	
#col_1, #col_2 {
	float:left;
	padding:0;
	display:block;	
	}
	#col_1 { 
		width:26%; 
		padding-right:7%; 
		padding-top: 42px; 
		}
	#col_2 { 
		width:67%; 
		padding-top: 4px;
		padding-bottom: 10px;
		}
#col_half { 
	width:50%;
	padding: 0 0 30px 0;
	vertical-align:top;
	text-align:left;
	display:table;
	float:left;
}
#expand {
  display: block;
  text-align: right;
  border: none;
  width: 22px;
  height: 22px;
  padding: 2px 4px 0 4px;
  cursor: pointer;
  float: right;
}
.star { 
	width:17px;
	height:17px; 
	vertical-align:middle;
	display:inline-block;
	padding-top:8px;
	}

#topBtn img { width:28px; height:28px; }
	#topBtn {
	  display: none;
	  position: fixed;
	  bottom: 38px;
	  right: 12%;
	  z-index: 99;
	  border: none;
	  outline: none;
	  background-color: transparent;
	  color: white;
	  cursor: pointer;
	  padding:0;
	}
	#topBtn:hover {
	  background-color: transparent;
	}
/*---------------------------- Work & Work detail page ----------------------------*/
#nav-work {
	padding: 0;
	margin: 0;
	display:block;
	width:auto;
	text-align:right;
	position:absolute;
	top:152px;
	right:12%;
	}
	#nav-work ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: normal;
	vertical-align:middle;
	}
	#nav-work li {
	display: block;
	padding:8px 0;
	}
	.slash { display:none; }
	
#project_tile {
	width:90%;
	margin-top:23px;
	margin-left: -1%;
	padding:0;
	display:table;
	vertical-align:middle;
	}
	.Intro_1,
	#brand_description,
	#service_description,
	#project_tile img,
	#project_description img {		
	-webkit-animation: fadein 4s;
       -moz-animation: fadein 4s;
        -ms-animation: fadein 4s;
         -o-animation: fadein 4s;
            animation: fadein 4s;
          }
	#project_caption {
		padding:14px 1px 0 1px;
		min-height:45px;
		text-align:center;
	}
	.project_caption img { width:100%; height:auto; }

	.grid {
		width:100%;
		height:auto;
		padding-top:25px;
		}
		.grid:after {
		  content: '';
		  display: block;
		  clear: both;
		}
	.grid img {
		-webkit-user-select: none;
		-moz-user-select: none; 
		-ms-user-select: none; 
		user-select: none; 
	  }
.bw {
  -webkit-filter: grayscale(15%);
	-webkit-transition: .3s ease-in-out; 
	transition: .3s ease-in-out;
	} 
	.bw:hover {
	  -webkit-filter: grayscale(0%);
	}
#title { font-size:90%; font-size:.90em; padding-bottom:30px; color:#04c4e7; }

/*---------------------------- Project detail page ----------------------------*/
#brand_intro, 
#brand_description,
#service_description,
#project_description {
	padding:40px 8% 30px 8%;
	margin:0;
	clear:both;
	display:block;
	}
	#brand_intro { width:50%; padding:134px 0 134px 0; }
	#brand_description { padding-top:40px; text-align:left; }
	#service_description { padding-top:30px; padding-bottom:30px; text-align:left; padding-left:4%;padding-right:4%; }
	#service_description .title { padding-top:14px; padding-bottom:10px; }
	#service_description .service_detail { padding-top:10px; padding-bottom: 14px; width:90%; display: none; }	
	#project_description { padding:40px 4% 30px 4%; }
	
.banner img,
#project_description img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
  }
#project_nav {
	margin-top:30px;
	padding:30px 0;
	text-align:left;
	display: table;
	width:100%;
	border-top:1px dotted #BBB;
	}
	#project_nav ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		line-height: normal;
		}
	#project_nav li {
		float:none;
		padding:8px 0;
		}
	.slash {
	color:#BBB;
	}

#project_item {
	width: 100%;
	margin: 0;
	vertical-align: top;
	text-align:left;
	}	
#project_item_phone {
	width: 30%;
	margin: 0 6% 0 0;
	}	
#project_item_tablet {
	width: 64%;
	margin: 0;
	}
	#project_item_phone, 
	#project_item_tablet {
		padding: 0 0 23px 0;/*space below image and text div*/
		float:left;
		vertical-align: top;
		text-align:left;
	}
	@media only screen and (max-width: 580px) {
		#project_item_phone { width: 50%; margin:0 0 0 24.5%; }
		#project_item_tablet { width: 100%; }
	}
	#pic_content {
		width:100%;
	}
	#project_item_2 {
		width:104%;
		margin-left:-2%;
	}
	#pic_content_2 {
		width:46%;
		height:46%;
		float:left;
		display: table-cell;
		padding:0 2% 4% 2%;
		}
	#project_item_3 {
		width:103%;
		margin-left:-1.5%;
	}
	#pic_content_3 {
		width:30.3%;
		height:30.3%;
		float:left;
		display: table-cell;
		padding:0 1.5% 3% 1.5%;
		}
	
.web_image { box-shadow: 0px 8px 22px #DDD; margin-bottom:34px; }

.web_image_phone,
.web_image_tablet { background-color: #fff; box-shadow: 0px 8px 22px #DDD; margin-bottom:34px; }
	.web_image_phone { border-radius: 26px; border:7px solid #CCC; }
	.web_image_tablet { border-radius: 28px; border:10px solid #CCC; }
	.round_corners_top { border-radius: 30px 30px 0 0; }
	.round_corners_bottom { border-radius:  0 0 30px 30px; }
	
	@media only screen and (max-width: 900px) {
		.web_image_phone { border:6px solid #CCC; }
		.web_image_tablet { border:8px solid #CCC; }
	}
	@media only screen and (max-width: 580px) {
		.web_image_tablet { border-radius: 26px; }
		.round_corners_top { border-radius: 26px 26px 0 0; }
		.round_corners_bottom { border-radius:  0 0 26px 26px; }
	}
	@media only screen and (max-width: 450px) {
		.web_image_phone { border:5px solid #CCC; }
		.web_image_tablet { border:7px solid #CCC; }
		.web_image_phone,
		.web_image_tablet { border-radius: 20px; }
		.round_corners_top { border-radius: 20px 20px 0 0; }
		.round_corners_bottom { border-radius:  0 0 20px 20px; }
	}
.y_spacing { padding-top:20px;padding-bottom:30px; }

#break,
#break_res { padding:0;margin:0;line-height:0px; }
	#break { display:block; }
	#break_res { display:none; }

/*---------------------------- TEXT ----------------------------*/
p { padding-top: 0; padding-bottom:15px; margin: 0; }
u { text-decoration:none; border-bottom:1px dotted #222; padding-bottom:1px; }
.blue { color:#04c4e7; }
.group { white-space:nowrap; }

.caption,
.copyright,
.detail,
.about_detail,
.service_detail,
.text,
.text_form,
.text_info,
.Intro,
.Intro_1,
.project_caption,
.page_sub_title  {
	font-family: 'Open Sans', sans-serif; 
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6em;
	letter-spacing: 0.05em;
	color: #222;
	}
	.text a:link,
	.text a:visited { color: #04c4e7; text-decoration:none; }
	.text a:hover { color: #000000; text-decoration:none; }
	.text_form { line-height:1.7em; }

.text_info { font-size: 13px; line-height: 1.7em; font-weight: 300; color: #222; text-decoration:none; }
	.text_info a:link,
	.text_info a:visited { color: #222; text-decoration:none; }
	.text_info a:hover { color: #04c4e7; text-decoration:none; }

.page_sub_title { font-size:18px; line-height:1.33em; border-bottom:1px solid #04c4e7;padding-bottom:6px;text-align:left; }
.address { letter-spacing:0.02em; }
.copyright { font-size:10px; line-height:2em;font-weight:300;letter-spacing:0.18em;text-transform: uppercase; }

.caption { font-weight: 300; font-size:14px; line-height:1.7em; color: #666; letter-spacing: 0.03em; margin-top:8px; }
	.caption a:link,
	.caption a:visited { color: #000; text-decoration:none; }
	.caption a:hover { color: #04c4e7; text-decoration:none; }
.project_caption { font-size:11px; line-height:1.45em; font-weight: 300; color: #F9F9F9; letter-spacing: 0.14em; text-transform: uppercase; }
	.project_caption a:link,
	.project_caption a:visited { color: #F9F9F9; text-decoration:none; -webkit-transition: .5s ease-in-out; transition: .4s ease-in-out; }
	.project_caption a:hover { color: #222; text-decoration:none; }

.Intro,
.Intro_1 {
	font-weight:300;
	font-size:19px;
	line-height:1.65em;
	letter-spacing: .02em; 
	}
	.Intro a:link, .Intro a:visited,
	.Intro_1 a:link, .Intro_1 a:visited { color: #222; text-decoration:none; border-bottom:1px dotted #BBB; padding-bottom:1px; }
	.Intro a:hover, .Intro_1 a:hover { color: #222; text-decoration:none; border-bottom:0px; }
		.intro p { padding-bottom:28px; }
		.intro_b { font-weight: 600; letter-spacing: .015em;  }
		.Intro_1 { font-size:23px; line-height:1.6em; }
		.Intro_1 p { padding-bottom:30px; }
	
.detail, .detail a:link, .detail a:visited, .detail a:hover { font-weight:300; font-size:15px; line-height:1.68em; color: #222; letter-spacing:0.03em; }
	.detail a:link,
	.detail a:visited { color: #04c4e7; text-decoration:none; }
	.detail a:hover { color: #222; text-decoration:none; }
	.detail_b { font-weight:400; }

.about_detail, .service_detail { font-weight:300; font-size:15px; line-height:1.68em; }

#block_form,
#recaptcha { 
	width:700px; 
	margin:0 auto; 
	padding:50px 0 20px 0;
	display: table;
	-webkit-animation: fadein 2s;
       -moz-animation: fadein 2s;
        -ms-animation: fadein 2s;
         -o-animation: fadein 2s;
            animation: fadein 2s;
	}
	#recaptcha {
	padding-top: 5px;
	width: 100%;
	}
	.g-recaptcha {
	    margin-left: -50px; 
		margin-right: -50px; 
		display: flex;
	    justify-content: center;
	    transform: scale(0.85);
	}
	
	#recaptcha-error {
	   display: flex;
	    justify-content: center;
	}
	#block_form .form_item,
	#block_form .form_content {
		float:left;
		margin-bottom:4px;
		}
		#block_form .form_item { width:32%; margin-right:3%; }
		#block_form .form_content { width:65%; }

#message {
		min-height: 180px;
		width:100%;
		margin-top:30px;
		}		
		
.form_field,
.form_menu {
		height:30px;
		width:100%;
		border-bottom:1px solid #CCC;
		border-top:none;
		border-left:none;
		border-right:none;
		border-radius:0px;
		background:transparent;
		float:right;
		padding: 0;		
			-ms-box-sizing:content-box;
			-moz-box-sizing:content-box;
			-webkit-box-sizing:content-box; 
			box-sizing:content-box;
		}
		.form_menu {
			letter-spacing:.02em;
			}
			.form_field:focus { border-bottom: 1px solid #666; }
			
#form_button {
		width:100px;
		height:32px;
		background-color:#000;
		color:#f4f4f4;
		border:none;
		border-radius:0px;
		margin:14px 0 14px 0;
		-webkit-transition: .3s ease-in-out; 
		transition: .3s ease-in-out;
		}
		#form_button:hover {
		background-color:#04c4e7;
		}
.form_field, .form_menu, #form_button {
		font-family: 'Open Sans', sans-serif; 
		font-weight:400;
		font-size:14px;
		line-height:1.8em;
		}
	
.home_text,
.title,
.form_title,
.form_item { 
	font-family: 'Work Sans', sans-serif;
	font-size:18px;
	line-height:1.4em; 	
	letter-spacing: 0.05em;
	color: #222;
	}
	.form_item { font-size: 16px; line-height:2em; text-transform:uppercase; letter-spacing: 0.12em; } 
	.title, .form_title { text-transform:uppercase; letter-spacing: 0.15em; }

.iso {
	-webkit-transition: .3s ease-in-out; 
	transition: .3s ease-in-out;
	}
.iso:hover {
	color:#000;
	}
.title, .title a:link, .title a:visited, .title a:hover { 
	font-size:28px;
	line-height:1.2em; 
	color: #222;
	text-decoration: none;
	}
	#service_description .title, 
	#service_description .title a:link, 
	#service_description .title a:visited, 
	#service_description .title a:hover { font-size:20px; }