.home
{
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
position: relative;
min-height:500px;
perspective: 1000px;
}

.container
{ 
display: block;
flex-wrap:wrap;
justify-content: space-between;
position:relative;
}
.container .box1
{
position: relative;
width: 276px;
padding:5px;
background: #fff;
_box-shadow:0 5px 15px rgba(0,0,0,.1);
border-radius: 12px;
margin:20px;
box-sizing:bolder-box;
text-align: center;
min-height:400px;
border: 2px solid #4d9665;
overflow: hidden;	
transition: .5s;

}

.container .box1:hover
{
position: relative;
width: 276px;
padding:5px;
background: #4d9665;
box-shadow:0 5px 15px rgba(0,0,0,.1);
border-radius: 12px;
margin:20px;
box-sizing:bolder-box;
text-align: center;
min-height:420px;
border: 2px solid #fff;
overflow: hidden;
content: #fff;
transition: .5s;	

}

.container .box1: p
{

transition: 1s;	

}

.container .box1:hover p
{
color: #fff;
transition: 1s;

}

.container .box1:hover b2
{
color: #fff;
transition: 1s;	

}

.container .box1 img
{

transition: 1s;

}

.container .box1:hover img
{
_transform: scale(1.3);
transform: rotateY(180deg);
transition: 1s;
		
}


.container .box1:before
{
content: '';
width: 50%;
height: 100%;
position: absolute;
top: 0;
left:0;
_background: #1d4085;
z-index:2;	
}
.container .box1 .icon
{
position: relative;
width:60px;
height:60px;
color:#fff;
background:#4d9665;
display: flex;
top: 5px;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 50%;
transition: 1s;

}


.container .box1 .content
{
	position:absolute;
	_z-index: 1;
	transition: .5s;
	top: 80px;
	
}  


.container .box1 .brn
{
 display:block;
 width: 80px;
 height: 20px;
 padding: 5px 0px;
 position: absolute;
 top: 80%;
 transform: translateY(-80%);
 left: 50%;
 transform: translateX(-50%);
 background-color: #4d9665;
 border-radius: 12px 12px 12px 12px;
 text-align: center;
 color:#fff;
 transition: 1s;
 border: 2px solid #fff;
 cursor: pointer; 
 
 }
 
 .container .box1 .brn:hover
{
 display:block;
 width: 80px;
 position: absolute;
 height: 20px;
 padding: 5px 0px;
 top: 80%;
 transform: translateY(-80%);
 left: 50%;
 transform: translateX(-50%);
 background-color: #fff;
 border-radius: 12px;
 text-align: center;
 color:#000;
 transition: 1s;
 text-decoration: none;
 cursor: pointer;
 border: 2px solid #4d9665; 
 }
 
 .container .box1 .brn a
{
 color:#fff;
 transition: 1s;
 text-decoration: none;
 }
 
 
 .container .box1 .brn:hover a
{
 color:#4d9665;
 transition: 1s;
 text-decoration: none;
 transform: scale(1.05);
 }
 
 .container .box2
{
position: relative;
width: 276px;
padding:5px;
background: #fff;
_box-shadow:0 5px 15px rgba(0,0,0,.1);
border-radius: 12px;
margin:20px;
box-sizing:bolder-box;
text-align: center;
min-height:400px;
border: 2px solid #f07453;
overflow: hidden;	
transition: .5s;

}

.container .box2:hover
{
position: relative;
width: 276px;
padding:5px;
background: #f07453;
box-shadow:0 5px 15px rgba(0,0,0,.1);
border-radius: 12px;
margin:20px;
box-sizing:bolder-box;
text-align: center;
min-height:420px;
border: 2px solid #fff;
overflow: hidden;
content: #fff;
transition: .5s;	

}

.container .box2: p
{

transition: 1s;	

}

.container .box2:hover p
{
color: #fff;
transition: 1s;

}

.container .box2:hover b2
{
color: #fff;
transition: 1s;	

}

.container .box2 img
{

transition: 1s;

}

.container .box2:hover img
{
_transform: scale(1.3);
transform: rotateY(180deg);
transition: 1s;
		
}


.container .box2:before
{
content: '';
width: 50%;
height: 100%;
position: absolute;
top: 0;
left:0;
_background: #1d4085;
z-index:2;	
}
.container .box2 .icon
{
position: relative;
width:60px;
height:60px;
color:#fff;
background:#f07453;
display: flex;
top: 5px;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 50%;
transition: 1s;

}


.container .box2 .content
{
	position:absolute;
	_z-index: 1;
	transition: .5s;
	top: 80px;
	
}  


.container .box2 .brn
{
 display:block;
 width: 80px;
 height: 20px;
 padding: 5px 0px;
 position: absolute;
 top: 80%;
 transform: translateY(-80%);
 left: 50%;
 transform: translateX(-50%);
 background-color: #f07453;
 border-radius: 12px 12px 12px 12px;
 text-align: center;
 color:#fff;
 transition: 1s;
 border: 2px solid #fff;
 cursor: pointer; 
 
 }
 
 .container .box2 .brn:hover
{
 display:block;
 width: 80px;
 position: absolute;
 height: 20px;
 padding: 5px 0px;
 top: 80%;
 transform: translateY(-80%);
 left: 50%;
 transform: translateX(-50%);
 background-color: #fff;
 border-radius: 12px;
 text-align: center;
 color:#000;
 transition: 1s;
 text-decoration: none;
 cursor: pointer;
 border: 2px solid #f07453; 
 }
 
 .container .box2 .brn a
{
 color:#fff;
 transition: 1s;
 text-decoration: none;
 }
 
 
 .container .box2 .brn:hover a
{
 color:#f07453;
 transition: 1s;
 text-decoration: none;
 transform: scale(1.05);
 }

 
.container .box3
{
position: relative;
width: 276px;
padding:5px;
background: #fff;
_box-shadow:0 5px 15px rgba(0,0,0,.1);
border-radius: 12px;
margin:20px;
box-sizing:bolder-box;
text-align: center;
min-height:400px;
border: 2px solid #679ac9;
overflow: hidden;	
transition: .5s;

}

.container .box3:hover
{
position: relative;
width: 276px;
padding:5px;
background: #679ac9;
box-shadow:0 5px 15px rgba(0,0,0,.1);
border-radius: 12px;
margin:20px;
box-sizing:bolder-box;
text-align: center;
min-height:420px;
border: 2px solid #fff;
overflow: hidden;
content: #fff;
transition: .5s;	

}

.container .box3: p
{

transition: 1s;	

}

.container .box3:hover p
{
color: #fff;
transition: 1s;

}

.container .box3:hover b2
{
color: #fff;
transition: 1s;	

}

.container .box3 img
{

transition: 1s;

}

.container .box3:hover img
{
_transform: scale(1.3);
transform: rotateY(180deg);
transition: 1s;
		
}


.container .box3:before
{
content: '';
width: 50%;
height: 100%;
position: absolute;
top: 0;
left:0;
_background: #1d4085;
z-index:2;	
}
.container .box3 .icon
{
position: relative;
width:60px;
height:60px;
color:#fff;
background:#679ac9;
display: flex;
top: 5px;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 50%;
transition: 1s;

}


.container .box3 .content
{
	position:absolute;
	_z-index: 1;
	transition: .5s;
	top: 80px;
	
}  


.container .box3 .brn
{
 display:block;
 width: 80px;
 height: 20px;
 padding: 5px 0px;
 position: absolute;
 top: 80%;
 transform: translateY(-80%);
 left: 50%;
 transform: translateX(-50%);
 background-color: #679ac9;
 border-radius: 12px 12px 12px 12px;
 text-align: center;
 color:#fff;
 transition: 1s;
 border: 2px solid #fff;
 cursor: pointer; 
 
 }
 
 .container .box3 .brn:hover
{
 display:block;
 width: 80px;
 position: absolute;
 height: 20px;
 padding: 5px 0px;
 top: 80%;
 transform: translateY(-80%);
 left: 50%;
 transform: translateX(-50%);
 background-color: #fff;
 border-radius: 12px;
 text-align: center;
 color:#000;
 transition: 1s;
 text-decoration: none;
 cursor: pointer;
 border: 2px solid #679ac9; 
 }
 
 .container .box3 .brn a
{
 color:#fff;
 transition: 1s;
 text-decoration: none;
 }
 
 
 .container .box3 .brn:hover a
{
 color:#679ac9;
 transition: 1s;
 text-decoration: none;
 transform: scale(1.05);
 }

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

 .container
 {
  display: block;
  flex-wrap:wrap;
  justify-content: space-between;
  position:relative;
  min-height:680px;
 }

 .container .box1
 {
  position: relative;
  width: 200px;
  padding:5px;
  background: #fff;
  _box-shadow:0 5px 15px rgba(0,0,0,.1);
  border-radius: 12px;
  margin:20px;
  box-sizing:bolder-box;
  text-align: center;
  min-height:620px;
  border: 2px solid #4d9665;
  overflow: hidden;
  transition: .5s;

 }

 .container .box1:hover
 {
  position: relative;
  width: 200px;
  padding:5px;
  background: #4d9665;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  border-radius: 12px;
  margin:20px;
  box-sizing:bolder-box;
  text-align: center;
  min-height:630px;
  border: 2px solid #fff;
  overflow: hidden;
  content: #fff;
  transition: .5s;

 }
 .container .box1 .brn
 {
  display:block;
  width: 80px;
  height: 20px;
  padding: 5px 0px;
  position: absolute;
  top: 90%;
  transform: translateY(-80%);
  left: 50%;
  transform: translateX(-50%);
  background-color: #4d9665;
  border-radius: 12px 12px 12px 12px;
  text-align: center;
  color:#fff;
  transition: 1s;
  border: 2px solid #fff;
  cursor: pointer;

 }

 .container .box1 .brn:hover
 {
  display:block;
  width: 80px;
  position: absolute;
  height: 20px;
  padding: 5px 0px;
  top: 90%;
  transform: translateY(-80%);
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 12px;
  text-align: center;
  color:#000;
  transition: 1s;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #4d9665;
 }


 .container .box2
 {
  position: relative;
  width: 200px;
  padding:5px;
  background: #fff;
  _box-shadow:0 5px 15px rgba(0,0,0,.1);
  border-radius: 12px;
  margin:20px;
  box-sizing:bolder-box;
  text-align: center;
  min-height:620px;
  border: 2px solid #f07453;
  overflow: hidden;
  transition: .5s;

 }

 .container .box2:hover
 {
  position: relative;
  width: 200px;
  padding:5px;
  background: #f07453;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  border-radius: 12px;
  margin:20px;
  box-sizing:bolder-box;
  text-align: center;
  min-height:630px;
  border: 2px solid #fff;
  overflow: hidden;
  content: #fff;
  transition: .5s;

 }
 .container .box2 .brn
 {
  display:block;
  width: 80px;
  height: 20px;
  padding: 5px 0px;
  position: absolute;
  top: 90%;
  transform: translateY(-80%);
  left: 50%;
  transform: translateX(-50%);
  background-color: #f07453;
  border-radius: 12px 12px 12px 12px;
  text-align: center;
  color:#fff;
  transition: 1s;
  border: 2px solid #fff;
  cursor: pointer;

 }

 .container .box2 .brn:hover
 {
  display:block;
  width: 80px;
  position: absolute;
  height: 20px;
  padding: 5px 0px;
  top: 90%;
  transform: translateY(-80%);
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 12px;
  text-align: center;
  color:#000;
  transition: 1s;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #f07453;
 }


 .container .box3
 {
  position: relative;
  width: 200px;
  padding:5px;
  background: #fff;
  _box-shadow:0 5px 15px rgba(0,0,0,.1);
  border-radius: 12px;
  margin:20px;
  box-sizing:bolder-box;
  text-align: center;
  min-height:620px;
  border: 2px solid #679ac9;
  overflow: hidden;
  transition: .5s;

 }

 .container .box3:hover
 {
  position: relative;
  width: 200px;
  padding:5px;
  background: #679ac9;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  border-radius: 12px;
  margin:20px;
  box-sizing:bolder-box;
  text-align: center;
  min-height:630px;
  border: 2px solid #fff;
  overflow: hidden;
  content: #fff;
  transition: .5s;

 }
 .container .box3 .brn
 {
  display:block;
  width: 80px;
  height: 20px;
  padding: 5px 0px;
  position: absolute;
  top: 90%;
  transform: translateY(-80%);
  left: 50%;
  transform: translateX(-50%);
  background-color: #679ac9;
  border-radius: 12px 12px 12px 12px;
  text-align: center;
  color:#fff;
  transition: 1s;
  border: 2px solid #fff;
  cursor: pointer;

 }

 .container .box3 .brn:hover
 {
  display:block;
  width: 80px;
  position: absolute;
  height: 20px;
  padding: 5px 0px;
  top: 90%;
  transform: translateY(-80%);
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 12px;
  text-align: center;
  color:#000;
  transition: 1s;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #679ac9;
 }


}