.main_coller_one {
	float:left;
	width:48%;
	padding:0 0 1% 0;
}	
.container {
  position: relative;
  width: 98%;
}

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

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

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

.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: 40px;
  position: absolute;
   font-family: 'Lato-Bold';
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}