@keyframes rotate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes swing {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes pebble-passing {
  0% {
    left: 0;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  50% {
    left: 50%;
    opacity: 1;
  }
  98% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes bump {
  0%, 37%, 48%, 100% {
    transform: translateY(0);
  }
  43% {
    transform: translateY(-8px);
  }
}
@keyframes box-bump {
  0%, 44%, 50%, 100% {
    bottom: 0;
  }
  47% {
    bottom: 5px;
  }
}
#landing { background: transparent; }
#landing * { 
  position: absolute;
  box-sizing: border-box;
}
#landing *:before, #landing *:after {
  position: absolute;
  content: '';
}
#landing article { left: 400px; right: 0px;  text-align: center; }
#landing article p , #landing article main{ left: 0px; right: 0px;  top: 30px; }
.rel {
  top: 0;
  bottom: 0;
  width: 100%;
}

.container {
  /*top: 0;*/
  left: 0;
  bottom: 0;
  
  width: 360px;
  height: 345px;
  margin: auto;
}

.line {
  border-radius: 3px;
  left: 25px;
  right: 69px;
  bottom: 0;
  height: 3px;
  background-color: #4C4C4C;
}
.line:before, .line:after {
  border-radius: 3px;
  height: 3px;
  background-color: #4C4C4C;
}
.line:before {
  left: -25px;
  width: 20px;
}
.line:after {
  right: -69px;
  width: 53px;
}

.pebble {
  border: 3px solid #4C4C4C;
  bottom: 0;
  width: 15px;
  height: 10px;
  background-color: #BAA89C;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0;
  animation: 5s pebble-passing linear infinite;
  z-index: -1;
}

.cart {
  left: 34px;
  width: 255px;
  height: 100%;
  animation: 5s bump linear infinite;
}

.cart__body {
  width: 100%;
  height: 215px;
  transform-origin: center bottom;
  animation: 2.5s swing linear infinite;
  animation-direction: reverse;
}

.curtain {
  width: 100%;
  height: 125px;
}

.curtain__panel {
  height: 100%;
  border-right: 3px solid #4C4C4C;
}
.curtain__panel:nth-child(odd) {
  background-color: #EF9674;
}
.curtain__panel:nth-child(even) {
  background-color: #D7F4EF;
}

.curtain__top {
  border: 3px solid #4C4C4C;
  border-radius: 3px;
  width: 100%;
  height: 50px;
  z-index: 2;
}
.curtain__top .curtain__panel {
  width: 36px;
}
.curtain__top .curtain__panel:nth-child(1) {
  left: 0px;
}
.curtain__top .curtain__panel:nth-child(2) {
  left: 36px;
}
.curtain__top .curtain__panel:nth-child(3) {
  left: 72px;
}
.curtain__top .curtain__panel:nth-child(4) {
  left: 108px;
}
.curtain__top .curtain__panel:nth-child(5) {
  left: 144px;
}
.curtain__top .curtain__panel:nth-child(6) {
  left: 180px;
}
.curtain__top .curtain__panel:nth-child(7) {
  left: 216px;
}

.curtain__bot {
  top: 47px;
  width: 100%;
  height: 41px;
}
.curtain__bot:after {
  width: 100%;
  height: 10px;
  left: 0px;
  background-color: #000000;
  opacity: 0.25;
}
.curtain__bot .curtain__panel {
  border: 3px solid #4C4C4C;
  top: -2px;
  width: 39px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  transform-origin: center top;
  animation: swing 2.5s linear infinite;
}
.curtain__bot .curtain__panel:nth-child(1) {
  left: 0px;
}
.curtain__bot .curtain__panel:nth-child(2) {
  left: 36px;
}
.curtain__bot .curtain__panel:nth-child(3) {
  left: 72px;
}
.curtain__bot .curtain__panel:nth-child(4) {
  left: 108px;
}
.curtain__bot .curtain__panel:nth-child(5) {
  left: 144px;
}
.curtain__bot .curtain__panel:nth-child(6) {
  left: 180px;
}
.curtain__bot .curtain__panel:nth-child(7) {
  left: 216px;
}

.curtain__bobbles {
  top: 70px;
  left: 66px;
  right: 66px;
  height: 55px;
}

.curtain__bobble {
  border: 3px solid #4C4C4C;
  bottom: 0;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #D7F4EF;
  transform-origin: center -55px;
  animation: swing 2.5s linear infinite;
  z-index: -1;
}
.curtain__bobble:before {
  top: -40px;
  left: 0;
  right: 0;
  width: 3px;
  height: 40px;
  margin: auto;
  background-color: #4C4C4C;
}
.curtain__bobble:nth-child(2) {
  left: 36px;
}
.curtain__bobble:nth-child(3) {
  right: 36px;
}
.curtain__bobble:last-child {
  right: 0;
}

.middle {
  top: 70px;
  left: 29px;
  right: 29px;
  height: 90px;
}

.middle__pillar {
  border: 3px solid #4C4C4C;
  width: 15px;
  height: 100%;
  background-color: #BAA89C;
}
.middle__pillar:last-child {
  right: 0;
}

.middle__box {
  border: 3px solid #4C4C4C;
  border-radius: 3px;
  bottom: 0;
  width: 65px;
  height: 15px;
  background-color: #EF9674;
  animation: 5s box-bump linear infinite;
}
.middle__box:first-child {
  left: 24px;
}
.middle__box:last-child {
  right: 24px;
}

.fridge {
  border: 3px solid #4C4C4C;
  border-radius: 3px;
  top: 157px;
  left: 14px;
  right: 14px;
  height: 122px;
  background-color: #D7F4EF;
}
.fridge:after {
  width: 100%;
  height: 15px;
  background-color: #000000;
  left: 0px;
  opacity: 0.25;
}

.fridge__handle {
  border: 3px solid #4C4C4C;
  border-radius: 3px;
  top: 8px;
  right: -94px;
  width: 94px;
  height: 14px;
  background-color: #EF9674;
}
.fridge__handle:before {
  border: 3px solid #4C4C4C;
  top: 13px;
  left: -15px;
  width: 60px;
  height: 7px;
  transform: rotate(-30deg);
  background-color: #EA723D;
  z-index: -1;
}
.fridge__handle:after {
  width: 100%;
  height: 4px;
  background-color: #000000;
  opacity: 0.25;
   left: 0px;
}

.fridge__sign {
  border: 3px solid #4C4C4C;
  border-radius: 3px;
  top: 22px;
  left: 22px;
  bottom: 22px;
  right: 22px;
  background-color: #9DD2C2;
}
.fridge__sign:after {
  width: 100%;
  height: 10px;
  background-color: #000000;
  opacity: 0.25;
   left: 0px;
}

.wheel {
  border: 3px solid #4C4C4C;
  left: 0;
  right: 0;
  bottom: 0;
  width: 134px;
  height: 134px;
  margin: auto;
  border-radius: 100%;
  animation: 5s rotate linear infinite;
}
.wheel:before, .wheel:after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 100%;
}
.wheel:before {
  width: 112px;
  height: 112px;
  border: 8px solid #BAA89C;
}
.wheel:after {
  border: 3px solid #4C4C4C;
  width: 106px;
  height: 106px;
}

.wheel__spoke {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 108px;
  height: 3px;
  margin: auto;
  background-color: #4C4C4C;
}
.wheel__spoke:nth-child(1) {
  transform: rotate(0deg);
}
.wheel__spoke:nth-child(2) {
  transform: rotate(36deg);
}
.wheel__spoke:nth-child(3) {
  transform: rotate(72deg);
}
.wheel__spoke:nth-child(4) {
  transform: rotate(108deg);
}
.wheel__spoke:nth-child(5) {
  transform: rotate(144deg);
}

.wheel__center {
  border: 3px solid #4C4C4C;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 29px;
  height: 29px;
  margin: auto;
  border-radius: 100%;
  background-color: #BAA89C;
}

@media screen and (max-width:500px) {

#landing article      { position: absolute; left: 0px; top: 120px; right: 0px; text-align: center; }
#landing header { left: 0px; right: 0px;  }
#landing article main         { top: 0px;  }
}