.main_coller_one {
	float:left;
	width:33%;
	padding:0 0 1% 0;
}
 .main_coller_one h2 {
 float:left;
font-size:16px;
	color:#5b150b;
font-family: 'Roboto', sans-serif;
text-align:center;
width:100%;
padding:3% 0 0 0;
 }
.main_coller_one a {
	color:#5b150b;
cursor:pointer;
 }
 .main_coller_one a:hover {
	color:#3fab3c;
}	
.container {
  position: relative;
  width: 98%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom:0;
  left:100%;
  right:0;
  background-color: #3b160e;
  overflow: hidden;
  width:0;
  height:0;
  transition: .4s ease;
}
.container:hover .overlay {
height: 100%;
left:0;
width:100%;
}

.overlay .text a {
font-family: 'roboto', sans-serif;
color:#ffffff;
}
.overlay1 .text a {
font-family: 'roboto', sans-serif;
color:#ffffff;
}	
 
.overlay1 {
  position: absolute;
  bottom:100%;
  left:0;
  right:0;
  background-color: #3b160e;
  overflow: hidden;
  width:0;
  height:0;
  transition: .4s ease;
}
.container:hover .overlay1 {
height: 100%;
bottom:0;
width:100%;
}

.overlay2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
 background-color: #201816;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
 } 
.container:hover .overlay2 {
  width: 100%;
  left: 0;
}

.overlay3 {
   position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #4bd1c6;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
 } 
.container:hover .overlay3 {
  width: 100%;
  left: 0;
}



.text {
  white-space: nowrap; 
  color: white;
  font-size:20px;
  position: absolute;
font-family: 'roboto', sans-serif;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}


/*** Responsive ***/
@media only screen and (min-width:240px) {
.main_coller_one {
	width:99%;
	padding-left:1%;
}
}
@media only screen and (min-width:320px) {
.main_coller_one {
	width:99%;
	padding-left:1%;
}
}
@media only screen and (min-width:600px) {
.main_coller_one {
	width:49%;
	padding-left:1%;
}
}
@media only screen and (min-width:800px) {
.main_coller_one {
	width:33%;
	padding-left:0;
}
}