body{
  text-align: center;
  overflow: hidden;
font-family: 'Ropa Sans', sans-serif;
  margin-left:10px;
  margin-right:10px;
   font-weight: regular;
    color: #6c5b49;
  font-size: 25px;
}


.gif_oben{
z-index: -1;
top:0px;
display:block;
position: absolute;}

.schatten{
   top:350px;
  left:625px;
  opacity:0.75;
  width: 677px;
  height:380px;
z-index:-2;
display:block;
position:absolute;
animation: verblassen;
animation-duration:1s;}
@keyframe verblassen{
  100%{opacity:0.75;}
  0%{opacity:0;}
}


.product-stack {
   z-index:-3;
  top:350px;
  left:700px;
  margin-top: 0px;
  margin-left: 0px;
  position: absolute;
  display: block;
  width: 520px;
  height:380px;
  overflow: none;
  @media (min-width: 900px) {
    width: 300px;
    height: 400px;
  }
  p{
    font-family: arial;
    font-weight: bold;
    color: white;
    letter-spacing: 0.1em;
    position:absolute;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
}

.thrown{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  pointer-events:none;
  z-index: -1;
  .swipey-product {
    z-index: 1;
    transform: none;
  }
}

.swipey-product {
  box-shadow:0px 0px 30px rgba(0,0,0,0.1);
  position: absolute;
  left:500;
  top:400;
  width: 100%;
  height: 100%;
  transform: translate(0%, 9%) scale(0.91);
  transition: transform 300ms;
  &:nth-last-child(4) {
    transform: translate(0%, 6%) scale(0.94);
  }
  &:nth-last-child(3) {
    transform: translate(0%, 3%) scale(0.97);
  }
  &:nth-last-child(2) {
    transform: translate(0%, 0%) scale(1);
    //note: transition of this is set to none as soon as touchevent occurs
  }
  
}
  .gif_unten{
z-index:-4;
top:0px;
    left:0px;
display:block; 
position:absolute;}
}