html {background-color:#474747; }

body {
    background-color:#474747 ;
}
    
.wrap {


}

.left {

background-size: contain;
background-repeat:no-repeat;
    
}

.left img {
width:100%;
height:auto;
}

.right img {
width:100%;
height:auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 100%;
  right: 0;
  background-color: #00599d;
  overflow: hidden;
  width: 0;
  height: 100%;
max-height:460px;
  transition: .5s ease;
font-size:25px;
font-weight:bold;
text-align:center;
 min-height: 10em;
    display: table-cell;
    vertical-align: middle;
color:#fff;
}

.left:hover .overlay {
  width: 100%;
  left: 0;
}

.kaffee-overlay {
  position: absolute;
  top: 0;
  left: 100%;
  right: 0;
  background-color: #532a16;
  overflow: hidden;
  width: 0;
  height: 100%;
max-height:460px;
font-size:25px;
transition: .5s ease;
text-align:center;
color:#fff;
font-weight:bold;
}



.right:hover .kaffee-overlay {
  width: 100%;
  left: 0;
}



.right {
background-size: contain;
background-repeat:no-repeat;
}




@media all and (min-width: 992px) { 
.left {
height:601px;
}
.right {
height:601px;
}
}

@media all and (max-width: 992px) {
.left {
width:100%;
min-height:300px;
}
.right {
width:100%;
height:300px;
}
}