@charset "UTF-8";

.business { padding:1rem 0;}
	.binner { padding:1rem 0;}
	.business h3 { padding:.5rem 0; font-size:1.4rem;}
	.business p { padding:.5rem 0; font-size:1.4rem;}
	.business ol { padding:.5rem 0 .5rem 1em; margin: 0 0 0 1em; list-style: decimal;}
	.business li { padding:.5rem 0; font-size:1.4rem;}

#works ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; max-width:920px; font-size: 1.4rem; padding:1rem 0; margin: 0 auto; list-style: none;}
	#works li { padding: 2rem 0;}
		#works li a { display: block; color: #444; text-decoration:none; opacity: 1;}
			#works li a:hover { opacity: .5;}
		.workphoto { display: block; width: 100%; height:300px; background-repeat: no-repeat; background-position: center center; background-size: cover;margin-bottom: 1rem;}
		.worktext { display: block; padding:0 0 0 3rem; position: relative;}
			.worktext::before {display: block; content: ""; width: 20px; height: 20px; border: 1px solid #777; position: absolute; left:2px; top:0;}
			.worktext::after { display: block; content: ""; width: 8px; height: 8px; border-right: 1px solid #777; border-top: 1px solid #777; transform: rotate(45deg); position: absolute; left:6px; top:6px;}

.clients { padding:2rem 0;}
	.clients ul { padding:.25rem 0; margin:0; list-style:none;}
		.clients li { display:block; padding: .5rem 0 .5rem 3rem; font-size:1.4rem; }
			.clients li a {color:#333; text-decoration:underline;}
			.clients li a:hover { color:#999; text-decoration:none;}
			.clients li:before { display: block; width: 30px; height:28px; content:""; margin-left:-3rem; float:left; background-position: left; background-repeat: no-repeat;background-size: contain;}
			li.pdf:before { background-image:url(../images/fileicons/pdf.png); }
			li.doc:before { background-image:url(../images/fileicons/doc.png);}
			li.xls:before { background-image:url(../images/fileicons/xls.png);}
			li.txt:before { background-image:url(../images/fileicons/txt.png);}
			li.jpg:before { background-image:url(../images/fileicons/jpg.png);}
			li.ppt:before { background-image:url(../images/fileicons/ppt.png);}

/* responsible settings */
@media all and (min-width:320px){
	/* 320px+ settings */
	.business { padding:2rem 0;}
	#works li { width:100%;}
}

@media all and (min-width:640px){
	/* 640px+ settings */
	.business { padding:2rem 0; display: flex;justify-content: space-between; margin: 0 auto;}
	.binner { padding:2rem 0;}
	#works li { width: calc(96% / 2);}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.business { width: 960px;}
	.binner { padding: 2rem; min-width: 400px;}
	#works li { width: calc(94% / 3);}
	.clients { padding:4rem 0;}
		.clients table { width: 920px; margin: 0 auto;border-collapse:collapse; }
			.clients th { border-bottom: 1px solid #000; padding: .5rem 2rem; font-size: 1.4rem; text-align: left;}
			.clients td { padding:1rem 2rem 0 2rem; font-size: 1.4rem;}
			.clients tr td:nth-of-type(1) { width: 22%;}
			.clients tr td:nth-of-type(2) { width: 22%;}
			.clients tr td:nth-of-type(3) { width: 22%;}
			.clients tr td:nth-of-type(4) { width: 33%;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}