a:link{
  font-family: "bahnschrift";
  text-decoration: none;
  color: rgb(25, 24, 24);
}



A:hover { color: rgb(221, 216, 216);  font-family: "bahnschrift"; text-decoration: none }
A:visited {color: rgb(233, 227, 227);   font-family: "bahnschrift"; text-decoration: none }
	*{outline:none !important;}
  *:focus {outline: none !important;}
  textarea:focus, input:focus{outline: none !important;}	
 /*  a{text-decoration: none !important;outline: none !important;}
 */



.container {
    position: relative;
    width: 50.5%;
  }
  
  .image {
    display: block;
    width: 1350px;
    height: 600px;
    background-color: aliceblue;
  }
  



  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #6C8C3D;
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: .5s ease;
  }
  
  /* slider para poder mover a un lado lo que yo quiero */
  .container:hover .overlay {
    width: 1280px;
  }
  
  .text {
    font-weight: bold;
    font-family: "bahnschrift";
    color: rgb(6, 6, 6);
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }

  .text:hover{
    color: #6C8C3D;
  }



/* por debajo de los 1024px */
  @media screen and (max-width: 1035px) {
    
.container {
  position: relative;
  width: 50.5%;
}

.image {
  display: block;
  width: 1000px;
  height: 500px;
  background-color: aliceblue;
}

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

/* slider para poder mover a un lado lo que yo quiero */
.container:hover .overlay {
  width: 930px;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
}



/* por debajo de los 677px */
@media screen and (max-width: 1035px) {
    
  .container {
    position: relative;
    width: 50.5%;
  }
  
  .image {
    display: block;
    width: 650px;
    height: 400px;
    background-color: aliceblue;
  }
  
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #6C8C3D;
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: .5s ease;
  }
  
  /* slider para poder mover a un lado lo que yo quiero */
  .container:hover .overlay {
    width: 600px;
  }
  
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  }



  
/* por debajo de los 525px */
@media screen and (max-width: 525px) {
    
  .container {
    position: relative;
    width: 50.5%;
  }
  
  .image {
    display: block;
    width: 500px;
    height: 300px;
    background-color: aliceblue;
  }
  
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #6C8C3D;
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: .5s ease;
  } 
  
  /* slider para poder mover a un lado lo que yo quiero */
   .container:hover .overlay {
    width: 450px;
  }
  
  .text {
    color: white;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  } 



  /* por debajo de los 410px */
@media screen and (max-width: 410px) {
    
  .container {
    position: relative;
    width:50.5%;
  }
  
  .image {
    display: block;
    width: 680px;
    height: 670px;
    background-color: aliceblue;
  }
  
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #6C8C3D;
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: .5s ease;
  } 
  
  /* slider para poder mover a un lado lo que yo quiero */
   .container:hover .overlay {
    width: 350px;
  }
  
  .text {
    color: white;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  }