﻿.containerH {
  position: relative;
  width: 100%;
  display:block;
  overflow:hidden;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}
 a:hover .image{
 /* filter:  #00b8f3;  IE6-9 */
  filter: brightness(0.5);
   -webkit-filter:    brightness(0.5); /* Google Chrome, Safari 6+ & Opera 15+ */
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  overflow: hidden;
  height: 0;
  transition: .5s ease;

}

.sold {
          position: absolute;
            right: -100px;
            top:20px;
       
       -ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Safari */
    transform: rotate(40deg);
    background-color:#00b8f3;
    box-shadow: 10px 10px 5px #000;
    width:300px;
    text-align:center;
    border: solid 1px #fff;
       opacity:0.5;
}


.headline {
      position: absolute;
         opacity:0;
           bottom: 120px;
  left: 5%;
  font-size:1.3em;
  color:#fff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}


.containerH:hover .overlay {
  height: 120px; 
  opacity:0.7;
}
.containerH:hover .headline {
      left: 100px;
      font-size:2em;
      opacity:1;
}

.text {
  white-space: nowrap; 
  color: black;
  font-size: 1em;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 100px;
  transform: translate(0px, -50%);
  -ms-transform: translate(0px, -50%);
  padding-left:10px;
    border-left:solid 1px black
  }
.textPrice{
    text-align:center;
  white-space: nowrap; 
  color: black;
  font-size: 1.3em;
  position: absolute;
  overflow: hidden;  
    height:100px;
    left:-35px;
    top:10px;
    transform: translate(0px, -50%);
  -ms-transform: translate(0px, -50%);
         
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);

}
.imgInfo {
    text-align:left;
  white-space:   nowrap; 
  left:40px;
      top:60px;
        color: black;
    padding-left:10px;
  font-size: 1.3em;
  position: absolute;
  overflow: hidden;  
    transform: translate(0px, -50%);
  -ms-transform: translate(0px, -50%);
}


@media (max-width: 768px) {
.containerH {
  display:block;


}
 .overlay {
  height: 120px; 
  opacity:0.6;
       font-size: 0.7em;
          position:  relative;
}
 .headline {
      left: 100px;
      font-size:1.5em;
      opacity:1;
}


}
