<!-- BOX DESIGN -->
		<section class="box_design text-center">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<div class="box1">
							<div class="icon">
								<i class="fa fa-search" aria-hidden="true"></i>
							</div>
							
							<div class="content_box">
								<h2>this is box style</h2>
								<p>Dear Hiring manager, I am very excited about your project “Put the Job Title Here” that you posted recent. I have much knowledge about this work. Already I have </p>
							</div>
						</div>
					</div>
					
					<div class="col-md-4">
						<div class="box1">
							<div class="icon">
								<i class="fa fa-search" aria-hidden="true"></i>
							</div>
							
							<div class="content_box">
								<h2>this is box style</h2>
								<p>Dear Hiring manager, I am very excited about your project “Put the Job Title Here” that you posted recent. I have much knowledge about this work. Already I have </p>
							</div>
						</div>
					</div>
					
					<div class="col-md-4">
						<div class="box1">
							<div class="icon">
								<i class="fa fa-search" aria-hidden="true"></i>
							</div>
							
							<div class="content_box">
								<h2>this is box style</h2>
								<p>Dear Hiring manager, I am very excited about your project “Put the Job Title Here” that you posted recent. I have much knowledge about this work. Already I have </p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- BOX DESIGN -->

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
/*font-family: 'Montserrat', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');
/*font-family: 'Raleway', sans-serif;*/
img{
	max-width:100%;
	height:auto;
}
.container{
	margin:250px auto;
}
.box1{
	background-color:#000;
	box-sizing:border-box;
	overflow:hidden;
	border-radius:10px;
	position:relative;
	
}
.icon{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#f00;
	transition:1s;
	z-index:1;
}
.box1:hover .icon{
	top:20px;
	left: calc(50% - 40px);
	width:80px;
	height:80px;
	border-radius:50%;
}
.icon i{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	font-size:80px;
	transition:1s;
	color:#fff;
}
.box1:hover .icon i{
	font-size:40px;
}
.box1 .content_box{
	margin-top:100px;
	height:calc(100% - 100px);
	box-sizing:border-box;
	text-align:center;
	padding:20px;
}

.content_box h2{
	color:#fff;
	font-size:20px;
	font-weight:bold;
	font-family:arial;
	text-transform:uppercase;
}
.content_box p{
	color:#fff;
	font-size:16px;
	font-weight:500;
	font-family:arial;
}