@charset "utf-8";
/* CSS Document */
.rrrr {
  position: relative;
  /*width: 25%;*/
}

.rrrr .image {
  display: block;
  width: 100%;
  height: auto;
  border:5px solid #CCC;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 25px;
  right: 0px;
  background-color: #000;
  opacity: 0.5;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .8s ease;
}

.rrrr:hover .overlay {
  width: 85%;
}

.overlay .text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#banner { background-image:url(images/wood.html);}

@media (min-width: 320px) and (max-width: 450px) { .aboutusdiv {height:140px !important;}}
@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 991px) { ... }
@media (min-width: 992px) and (max-width: 1199px) 
{
	.rrrr {
  position: relative;
  /*width: 25%;*/
}

.rrrr .image {
  display: block;
  width: 100%;
  height: auto;
  border:5px solid #CCC;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 25px;
  right: 0px;
  background-color: #000;
  opacity: 0.5;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .8s ease;
}

.rrrr:hover .overlay {
  width: 85%;
}

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

	 }
@media (min-width: 1200px)
 {
	.rrrr {
  position: relative;
  /*width: 25%;*/
}

.rrrr .image {
  display: block;
  width: 100%;
  height: auto;
  border:5px solid #CCC;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 25px;
  right: 0px;
  background-color: #000;
  opacity: 0.5;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .8s ease;
}

.rrrr:hover .overlay {
  width: 85%;
}

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


}