/* for 1280px or less */
@media screen and (max-width: 1280px) {

	#header-inner							{ height:60px; }
	#header-inner h1						{ width:130px; }
	#header-inner nav li 					{ color: #999; margin: 0 20px; }
	#header-inner nav a 					{ height: 60px; line-height: 60px; font-size: 14px; }
	#header-inner .social-link a 			{ width: 60px; height: 60px; line-height: 60px; }
	#header-inner .social-link i 			{ font-size: 16px; }

	#main									{ padding-top:60px; }

	#cover #logo 							{ width:130px; height:157px; margin-left:-65px; margin-top:-94.5px;}
	#cover #title-image						{ width:144px; margin-left:-72px; margin-top:95px; }

	#project-filters 						{ margin-bottom: 30px;}

	#detail-header 							{ height: 60px; }
	#detail-header #detail-title			{ font-size: 1.2em; padding: 0 20px;}
	#detail-header-back 					{ width: 60px; height: 60px; line-height: 60px; }
	#detail-header-back i 					{ font-size: 20px; }
	#detail-header-buttons	a				{ height: 60px; line-height: 60px; padding: 0 20px; }
	#detail-header-buttons	span 			{ margin-left: 6px; font-size: 14px; }
	#detail-sharer button 					{ width: 40px; height: 60px; }
	#detail-sharer button i  				{ font-size: 15px;}

	#detail-section h1 						{ font-size: 1.4em; }
	#detail-section	.info .label			{ font-size:1.05em; margin-bottom: 8px; }
	#detail-section	.info .value			{ font-size:1em; }

	#about-section .paragraph h2 			{ font-size: 1.8em; }
	#team-section .inner h2					{ margin: 70px 0 40px 0;}

	#contact-box 							{ padding: 30px 25px; }
	#contact-box .header					{ padding-bottom: 25px; margin-bottom: 25px;}
	#contact-form 							{ padding: 25px 35px; }
	#contact-form .header #contact-icon 	{ width: 36px; margin-right: 15px;}
}

/* for 1024px or less */
@media screen and (max-width: 1024px) {

	.mobile-element							{ display:block; }

	/** Column layout **/
	.column-4 .col-item				     	{ width:49%; margin-right:2%; margin-top:20px; }
	.column-4 .col-item:nth-child(4n)	 	{ margin-right:2%; }
	.column-4 .col-item:nth-child(-n+4)  	{ margin-top:20px; }
	.column-4 .col-item:nth-child(3n)    	{ margin-right:2%; }
	.column-4 .col-item:nth-child(-n+3)  	{ margin-top:20px; }
	.column-4 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  	{ margin-top:0; }

	#header-inner							{ margin: 0; width: 100%; height:48px;}
	#header-inner h1						{ width:110px; margin-left: 20px; margin-right: auto;}
	#header-inner nav						{ transform: translate(-100%);}
	#header-inner .social-link a 			{ width: 48px; height: 48px; line-height: 48px; }
	#header-inner .social-link i 			{ font-size: 14px; }

	#menu-button							{ flex-shrink: 0; display:block; position:relative; cursor:pointer; width: 48px; height: 48px; border-right: 1px solid #ddd;}
	#menu-button div						{ position:absolute; left:50%; top:50%; width:36%; height:2px; background:#222; transform-origin: 50% 50%; transform: translate(-50%, -50%); transition: all .4s; }
	#menu-button #bar-1						{ margin-top: -6px;}
	#menu-button #bar-2						{ opacity: 1;}
	#menu-button #bar-3						{ margin-top: 6px;}
	
	#header-inner nav						{ position: fixed; left: 0; top: 48px; width: 100%; height: calc(100vh - 48px); background-color: #fff; border-top: 1px solid #ddd; transform: translateX(-100%); transition: all .4s; }
	#header-inner nav ul 					{ flex-direction: column; justify-content: center; height: 86%;  }
	#header-inner nav li 					{ margin: 12px 0; height: auto; }
	#header-inner nav a						{ line-height:normal; font-size: 1.15em; }
	#nav-indicator							{ display: none;}

	.show-nav 								{ overflow: hidden;}
	.show-nav #header-inner nav				{ transform: translateX(0);}
	.show-nav #menu-button #bar-1			{ margin-top: 0; transform: translate(-50%, -50%) rotate(45deg); }
	.show-nav #menu-button #bar-2			{ opacity: 0;}
	.show-nav #menu-button #bar-3			{ margin-top: 0; transform: translate(-50%, -50%) rotate(-45deg); }

	#main									{ padding-top: 48px;}
	#main .inner							{ padding: 30px 0;}

	#project-section						{ padding-top: 30px;}

	#project-list							{ margin:0 4%; height:auto !important; }
	#project-list .item	 					{ position:static; width:100% !important; margin-left:0 !important; margin-bottom:20px; }
	#project-list .item .house 				{ display:none; }
	#project-list .item .title				{ text-align:left; display:block !important; transform:none !important; position:relative; height: 0; }
	#project-list .item .title a			{ background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); color:#fff; padding:14px 18px; display:block; position:absolute; left:0; right:0; bottom:0; }
	#project-list .m-thumb					{ overflow:hidden; background:#ccc; position:relative; }
	#project-list .m-thumb img				{ width:100%; position:absolute; left:0; top:0; display:block; }	
	#project-section #knob					{ display:none; }

	#detail-header 							{ height: 48px; }
	#detail-header #detail-title			{ font-size: 1.1em; }
	#detail-header-back 					{ width: 48px; height: 48px; line-height: 48px; }
	#detail-header-back i 					{ font-size: 18px; }
	#detail-header-buttons	a				{ width: 48px; height: 48px; line-height: 48px; box-sizing: border-box; }
	#detail-header-buttons span				{ display: none;}
	#detail-sharer button 					{ width: 40px; height: 48px; }
	#detail-sharer button i  				{ font-size: 14px;}

	#detail-section	.info .label			{ font-size:1.02em; margin-bottom: 6px; }
	#detail-section	.info .value			{ font-size:1em; }
	#image-section .inner					{ padding: 0;}

	#related-nav 							{ display: none;}

	#blog-filter							{ margin-bottom: 25px;}
	#blog-filter li							{ margin: 0 10px 10px 0;}
	#blog-filter li a 						{ font-size: 1em;}
	#blog-filter li::after					{ margin-left: 10px;}

	.post-item								{ margin-left: 95px; padding:25px 15px; }
	.post-item .post-date					{ left:-95px; width: 80px; height: 80px; padding: 13px 12px 0 12px; }
	.post-item .post-date .month 			{ margin-bottom: 2px;}
	.post-item .post-date .day 				{ font-size: 36px; }

	#about-section .paragraph				{ margin-bottom: 30px;}
	#about-section .paragraph h2			{ font-size: 1.6em;}
	#about-section .paragraph.vertical .col-image   	{ width: 50%;}
	#about-section .paragraph.vertical .col-text 		{ width: 45%;}
	#about-section .paragraph.horizontal .col-image   	{ width: 60%;}
	#about-section .paragraph.horizontal .col-text 		{ width: 35%;}
	#team-section .inner					{ padding-top: 0;}
	#team-section .inner h2					{ font-size: 1.6em; margin:0 0 30px 0;}
	

	#contact-box 							{ width: 220px; padding: 30px 20px; margin-right: 20px;}
	#contact-box .icon						{ margin-right: 10px;}
	#contact-form 							{ padding: 26px 30px; }
}


/* for 768px or less */
@media screen and (max-width: 768px) {

	/** Column layout **/
	.column-3 .col-item 					    		{ width:48%; margin-right:4%; margin-top:40px; }
	.column-3 .col-item:nth-child(3n) 					{ margin-right:4%; }
	.column-3 .col-item:nth-child(-n+3) 				{ margin-top:40px; }
	.column-3 .col-item:nth-child(2n)	   	 			{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+2)	   	 			{ margin-top:0; }

	#main section .desc									{ line-height: 1.6em;}

	#project-filters .filter 							{ margin: 0 3px;}
	#project-filters .select2-container					{ width: 98px !important;}
	#project-filters .select2-container .select2-selection--single .select2-selection__rendered { padding-right: 10px; padding-left: 15px; line-height: 30px;}
	#project-filters .select2-container--default .select2-selection--single .select2-selection__arrow	{ right: 8px; top: 0;}

	#project-filters .select2-container--default .select2-selection--single { height: 30px; }

	.post-item											{ padding: 15px 12px 25px 12px; margin-left:0; }
	.post-item .post-date								{ display: none;}
	.post-item .post-title								{ margin-bottom:15px; font-size:18px; }
	.post-item .desc									{ line-height: 1.5em;}
	.post-item .read-more								{ margin-top: 20px; }
	.post-item .read-more a 							{ font-size: 15px; }

	#detail-sharer 										{ width: calc(100vw - 48px);}
	#detail-header #detail-title						{ padding: 0 15px; font-size: 1.02em;}

	#blog-filter li 									{ display: none; margin: 0 5px 10px 0;}
	#blog-filter li::after								{ margin-left: 5px;}
	#blog-filter li:nth-child(-n+4) 					{ display: block;}
	#blog-filter li.active								{ display: block;}
	#blog-filter.expanded li							{ display: block;}
	#blog-filter #blog-filter-more 						{ display: block; cursor: pointer;}

	#about-section .paragraph 							{ display: block;}
	#about-section .paragraph .col-image 				{ margin-bottom: 15px;}
	#about-section .paragraph h2						{ margin-bottom: 12px;}
	#about-section .paragraph .desc 					{ font-size: 1.05em;}
	#about-section .paragraph.vertical .col-image,
	#about-section .paragraph.vertical .col-text ,
	#about-section .paragraph.horizontal .col-image,
	#about-section .paragraph.horizontal .col-text 		{ width: 100%;}

	#team-section #team-list img				{ margin-bottom: 10px;}
	#team-section #team-list .name				{ font-size: 1.1em;}

	#contact-section .inner 					{ flex-wrap: wrap;}
	#contact-box 								{ width: 100%; padding: 20px; margin-right: 0; margin-bottom: 15px;}
	#contact-box .header 						{ padding-bottom: 15px; margin-bottom: 15px;}
	#contact-box .header h2 					{ font-size: 1.15em; }
	#contact-box p,
	#contact-box address						{ margin-bottom: 10px;}
	#contact-box p br,
	#contact-box address br						{ display: none;}
	#contact-form 								{ padding: 20px 20px 30px 20px; }
	#contact-form .header 						{ padding-bottom: 20px; margin-bottom: 20px;}
	#contact-form .header p 					{ font-size: 1.1em; }
	#contact-form .header p br					{ display: none;}
	#contact-form .button-wrapper				{ margin-top: 20px;}
	#contact-form input[type="submit"]			{ font-size: 1.05em; padding: 8px 35px 10px 35px;}

}

	
/* for 480px or less */
@media screen and (max-width: 480px) {
	
	#cover #logo 							{ width:120px; height:145px; margin-left:-60px; margin-top:-94.5px;}
	#cover #title-image						{ width:134px; margin-left:-67px; margin-top:75px; }
	
	#about-section .paragraph h2			{ font-size: 1.5em;}
	#team-section .inner h2					{ font-size: 1.5em; margin:0 0 30px 0;}

	#contact-box .icon						{ display: none;}
	#contact-box .header h2 				{ font-size: 1.1em; }
	#contact-box p,
	#contact-box address					{ font-size: 1em; margin-bottom: 8px;}
	#contact-form .header p 				{ font-size: 1.02em; }
	#contact-form .header #contact-icon 	{ width: 32px; margin-right: 12px;}
}