.pin {
background: url('PlanIMG/Pin.png') no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: -15px;
left: -10px;
z-index: 3;
}


/* ANIMATION 1 WITH DELAY */

#ribbon {
  background: #d7372c;
  width: 30px;
  height: 105px;
  position: absolute;
  margin: 0 auto;
  top: -5px;
  left: -5px;
  display: block;
  z-index: 0;
 -webkit-box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
 -moz-box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
  box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  animation: swing ease-in-out 1s infinite alternate;
  transform-origin: center -5px;
}



/* ANIMATION 2 WITH DELAY */

#ribbon2 {
  background: #d7372c;
  width: 30px;
  height: 105px;
  position: absolute;
  margin: 0 auto;
  top: -5px;
  left: -5px;
  display: block;
  z-index: 0;
 -webkit-box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
 -moz-box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
  box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  animation: swing ease-in-out 1s infinite alternate;
 -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
 -webkit-animation-duration: 1s;
  animation-duration: 1s;
 -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transform-origin: center -5px;
}



/* ANIMATION 3 WITH DELAY */

#ribbon3 {
  background: #d7372c;
  width: 30px;
  height: 105px;
  position: absolute;
  margin: 0 auto;
  top: -5px;
  left: -5px;
  display: block;
  z-index: 0;
 -webkit-box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
 -moz-box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
  box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  animation: swing ease-in-out 1s infinite alternate;
 -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
 -webkit-animation-duration: 1s;
  animation-duration: 1s;
 -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transform-origin: center -5px;
}



/* ANIMATION 4 WITH DELAY */

#ribbon4 {
  background: #d7372c;
  width: 30px;
  height: 105px;
  position: absolute;
  margin: 0 auto;
  top: -5px;
  left: -5px;
  display: block;
  z-index: 0;
 -webkit-box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
 -moz-box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
  box-shadow: 5px 1px 6px -2px rgba(0,0,0,0.64);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  animation: swing ease-in-out 1s infinite alternate;
 -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
 -webkit-animation-duration: 1s;
  animation-duration: 1s;
 -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transform-origin: center -5px;
}



.OFF-Sale{
  color: #f6f6f6;
  width: 95px;
  font: 13px 'IranSans-Light';
  position: absolute;
  text-align: center;
  transform: rotate(-87deg);
  text-shadow: 1 -1px 1px rgba(0, 0, 0, 0.1);
  margin-top: 45px;
  left: -35px;
}

/* Traditional Ribbon */
.traditional:after,
.traditional:before {
  border-top: 15px solid #d7372c;
  bottom: -15px;
  content: '';
  height: 0;
  position: absolute;
  width: 0;
  z-index: -1;
  top: 100px;
}

.traditional:after {
  border-right: 25px solid transparent;
  left: 0;
}
.traditional:before {
  border-left: 25px solid transparent;
  right: 0;
}





@keyframes swing {
    0% { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}