/* CSS Document */

#inner {
  display: table;
  margin: 0 auto; padding: 8px;
  border: 1px solid #ccc; text-align:center;
}

#outer { margin: 8px auto;
  border: 1px solid #ccc; padding: 8px;
  width:97%
}
.col1 { float:left; width:auto; height: auto; 	margin: 8px 18px; box-shadow: 5px 10px 18px #888888;}
.colx { float:left; width:auto; height: auto; 	margin: 8px 18px 8px 70px; box-shadow: 5px 10px 18px #888888;}

.container {
  position: relative;
  width: 272px
}

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

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

.container:hover .overlay {
  height: 100%; opacity: .8;
}

.text1 {
  color: white; 
  font-size: 16px;
  position: absolute;
  width: 80%;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.text2 {
  color: white;
  font-size: 14px;
  position: absolute;
  top: 65%;
  left: 53%; width: 95%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 999px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 999px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 999px), only screen and (min-device-pixel-ratio: 2) and (max-width: 999px), only screen and (min-resolution: 192dpi) and (max-width: 999px), only screen and (min-resolution: 2dppx) and (max-width: 999px) {
.container { width: 100%;}
.colx { margin: 8px 8px 8px 50px;}
.col1 { margin: 8px 8px 8px 50px;;}

.text2 { left: 50%; width: 95%;}