@charset "utf-8";
/* CSS Document */

.ic_container{
    vertical-align:baseline;
    margin:10px;
    position:relative;
    /*-moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-box-shadow: 0 1px 3px #888;
    -webkit-box-shadow: 0 1px 3px #888;*/
	display:block;
}
.overlay{
    opacity:0.5;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	display:block;

}

#design-container .overlay,
#arc-container .overlay{
	opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

.ic_caption{
    position:absolute;    
    opacity:1;   
    overflow:hidden;
    margin:0px;
    padding:0px;
    left:0px;
    right:0px;
    cursor:default;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	padding:10px 20px;
	
	top:30px;
	display:block;

}
.ic_category{
    text-transform:normal;
    font-size:11px;
    letter-spacing:0em;
    padding:0px;
    margin:0px;
	display:block;
	width:85%;
	

}
.ic_caption h4{
    padding:0px;
    margin:0px;
    font-size:15px;
	padding-bottom:5px;
	color:#000000;
	padding-right:15px;
	display:block;
	

}

.ic_text{
    padding:5px;
    margin:0px;
    text-align:justify;
    font-size:11px;
	color:#000000;
	display:block;
	

}

.face,
.showcase,
.arc{
	float:left;
	overflow:hidden;
	width:220px;
	
}

#team-container .face div,
#team-container .face h4,
#design-container .showcase div,
#design-container .showcase h4,
#arc-container .arc div,
#arc-container .arc h4{
	float:none;
	width:auto;
	text-align:left;
	color:#000000;
	display:block;
	

}

#team-container .face h4,
#design-container .showcase h4,
#arc-container .arc h4{
	font-weight:normal;
	line-height:20px;
	width:85%;
	display:block;
	

}

#team-container .face p,
#design-container .showcase p,
#arc-container .arc p{
	color:#000000;
	float:none;
	width:100%;
	text-align:left;
	padding:0;
	display:block;
	

}

#team-container .face p.ic_category,
#design-container .showcase p.ic_category,
#arc-container .arc p.ic_category{
	font-size:11px;
}

#design-container .showcase p.ic_category,
#arc-container .arc p.ic_category{
	color:#ff6600;
}

#team-container .ic_text a,
#design-container .ic_text a,
#arc-container .ic_text a{
	color:#ffffff;
	font-size:12px;
	word-break:break-all;
			-moz-word-break:break-all;
			-ms-word-break:break-all;
			-webkit-word-break:break-all;
}

#team-container .face a:hover,
#design-container .showcase a:hover,
#arc-container .arc a:hover{
	text-decoration:underline;
}

.face img,
.showcase img,
.arc img
{
	width:100%;
	display:block;
	height:auto;
}

.face, 
.showcase, 
.arc{
	height:200px;
}

/*change layout style*/
.face,
.showcase,
.arc{
	min-height:300px;
}

#team-container .ic_caption,
#design-container .ic_caption,
#arc-container .ic_caption{
	position:relative;
	top:0;
	padding:0;
	padding-top:5px;
	font-size:11px;
	background-color:#f4f4f4;
		padding:6px 10px 13px;
}

#team-container .ic_category,
#design-container .ic_category,
#arc-container .ic_category,
#team-container .ic_category a,
#design-container .ic_category a,
#arc-container .ic_category a{
	color:#575757;
	width:90%;
	
}

#team-container .face div,
#design-container .showcase div,
#arc-container .arc div
{
	width:100%;
}

#team-container .face h4, 
#design-container .showcase h4,
#arc-container .arc h4{
	color:#000;
	width:95%;
}

#team-container span,
#design-container span,
#arc-container span{
	color:#ff6600;
	font-size:11px;
	font-weight:normal;
	text-transform:uppercase;
	float:left;
	margin-right:3%;
}

@media screen and (min-width:980px){ 
	.face{
		min-height:300px;
	}
	
	#team-container span{
		width:90%;
	}
	
	.ic_caption h4{
		font-size:14px;
	}
	#team-container .face h4, 
	#design-container .showcase h4, 
	#arc-container .arc h4{
		width:93%;
	}
}

@media screen and (max-width:979px){ 
	 .face,
	 .showcase,
	 .arc{
		width:32%;		
	 }
	 
	 #team-container .face h4,
	 #design-container .showcase h4,
	 #arc-container .arc h4{
		font-size:14px;
		line-height:18px;
		width:100%;
	}
	
	 #team-container .face div,
	 #design-container .showcase div,
	 #arc-container .arc div
	{
		width:auto;
	}
	
	.showcase,
	.arc{
		min-height:250px;		
		}
		
	.face{
		min-height:260px;
	}
	
}


@media screen and (max-width:767px){
	.face,
	.showcase,
	.arc{
 		width:45%;
	}
	
	#team-container .face div,
	#design-container .showcase div,
	#arc-container .arc div
	{
		width:auto;
	}
	
	#team-container .ic_category,
	#team-container .ic_category a{
		font-size:10px;
		line-height:12px;
	}
	
}


@media screen and (device-aspect-ratio: 40/71){
	.face,
	.showcase,
	.arc{
 		width:45%;
	 }
	 
	 .face{
		 min-height:210px;
	 }
	 
	 #team-container .face div,
	#design-container .showcase div,
	#arc-container .arc div
	{
		width:auto;
	}
	
	.face{
		min-height:255px;
	}
}

@media screen and (max-width:480px){
	.ic_caption{
		top:10px;
		padding:0;
		left:0px;
	}
	
	.ic_caption h4{
		font-size:14px;
		line-height:16px;
		width:95%;
	}
	
	#team-container .face h4,
	#design-container .showcase h4,
	#arc-container .arc h4{
		font-size:13px;
		line-height:16px;
		width:100%;
	}
	
	#team-container span,
	#design-container span,
	#arc-container span{
		font-size:10px;
	}
	
	.showcase,
	.arc{
		min-height:270px;		
		}
		
	.face{
		min-height:270px;
	}
	
		 .ic_text a{
		 	word-break:break-all;
			-moz-word-break:break-all;
			-ms-word-break:break-all;
			-webkit-word-break:break-all;
			width:95%;
		 }
		 
	.ic_container{
		margin-left:2%;
		margin-right:5%;
	}
	
	#team-container .face div,
	#design-container .showcase div,
	#arc-container .arc div
	{
		width:auto;
	}
	
	#team-container .ic_category,
	#team-container .ic_category a{
		font-size:10px;
		line-height:12px;
	}
}

@media screen and (max-width:320px){
	.showcase,
	.arc{
		min-height:215px;		
		}
		
	.face{
		min-height:215px;
	}
	
	
}