html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#adContent {
  background-color: #fff;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

#logoImageBackupText {
  font-family: 'Roboto', Arial, sans-serif;
  opacity: 0;
}

#bgImage {
  height: 100%;
  position: absolute;
  width: 100%;
}

#logoImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.product {
  background: white;
  float: left;
  overflow: hidden;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}

.productImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.sale-percent-discount {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;

}

.sale-percent-discount >.sale-badge {
  position: absolute;
  left: 0px;
  top: 0px;
}

.sale-percent-discount >.sale-badge > .discount {
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
}

.middleAnimationBox {
  align-items: flex-end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  bottom: 0px !important;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  height: 100% !important;
  left: 0px !important;
  position: absolute;
  right: 0px !important;
  top: 0px !important;
  width: 100% !important;
}

.middleAnimationText {
  align-items:center;
  -ms-flex-align:center;
  -webkit-align-items:center;
  background-color: rgba(250, 50, 50, 1);
  border-radius: 2px;
  color: white;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-weight: bold;
  left: 50%;
  opacity: 0;
  filter:alpha(opacity=0);
  position: absolute;
  top: 50%;
  transform:translate(-50%, -50%);
}

.middleAnimationBox div {
  animation: round 6s linear infinite;
  -webkit-animation: round 6s linear infinite;
}

.stopAtFirstStage div {
  animation-iteration-count: 5;
  -webkit-animation-iteration-count: 5;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.stopAtLastStage div {
  animation-iteration-count: 5;
  -webkit-animation-iteration-count: 5;
}

@-webkit-keyframes round {
    0% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    40% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    50% {
        filter: alpha(opacity=0);
        opacity: 0;
    }
    90% {
        filter: alpha(opacity=0);
        opacity: 0;
    }
    100% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
}

@keyframes round {
    0% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    40% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    50% {
        filter: alpha(opacity=0);
        opacity: 0;
    }
    90% {
        filter: alpha(opacity=0);
        opacity: 0;
    }
    100% {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
}