/*communication--------------------------------*/
#communication .mini_title{
	margin-bottom: 30px;
}
#communication .box{
	width: 31.1827956988%;
	float: left;
	margin:0 31px 30px 0;
	position: relative;
	transition: opacity 0.5s ease-out 0s;
}
#communication .box.right{
	margin-right:0;
}
#communication .box:hover{
	opacity: 0.8;
}


/*-----------------------------------------------------	*/
/*	for 0 - 979px				*/
/*-----------------------------------------------------	*/

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

	/* ------ communication ------*/
	#communication .box{
		float: left;
		margin:0 3% 30px 0;
		text-align: center;
	}
	#communication .box.right{
		padding-right:0;
	}



}


/*-----------------------------------------------------	*/
/*	for - 639px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 639px) {
	/* ------ communication ------*/
	#communication .mini_title{
		margin-bottom: 5px;
	}
	#communication #title{
		max-width:100%;
		height: auto;
		margin-bottom: 15px;
	}
	#communication #title h2 img{
		width: auto;
		height: 40px;
		box-sizing:border-box;
	}
	#communication .box{
		width: 46%;
		float: left;
		margin: 0;
		padding:10px 2%;
		text-align: center;
	}
	#communication .box.right{
		padding-right:2%;
	}
}