:root {
  --shadow-color: #6410ca;
  --text-color: #fff;
}

[data-product="PDR"] {
  --transform-unset: scale(1);
  --transform-hover: scale(1.05);
  --animation: none;
  --hover-anime: var(--animation);
}

[data-product="PHD"] {
  --transform-unset: scale(1);
  --transform-hover: scale(1);
  --animation: 6s linear 4 shake;
  --hover-anime: 0.2s ease 1 pop-left;
}

@keyframes shake {
  0% {right: -10px;}
  88% {right: -10px;}
  91% {right: 0px;}
  94% {right: -12px;}
  97% {right: 0px;}
  100% {right: -10px;}
}

@keyframes pop-left {
  0% {right: -10px;}
  100% {right: 0px;}
}

.creative-library {
  position: fixed;
  right: -10px;
  top: 35%;
  transition: all 0.2s;
  z-index: 999;
  filter: drop-shadow(5px 5px 6px #0000006b) drop-shadow(0px 20px 16px #0000001b);
  transform: var(--transform-unset);
  animation: var(--animation);
}

.creative-library b {
  position: absolute;
  right: 10%;
  top: 60%;
  text-align: end;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-color);
  filter: drop-shadow(0px 2px 2px var(--shadow-color));
}

.creative-library:hover {
  transform: var(--transform-hover);
  right: 0px;
  animation: var(--hover-anime);
}

.JPN .creative-library b {
  font-size: 23px;
  line-height: 1.2;
  top: 51%;
}

.JPN .creative-library b span {
  font-size: 32px;
  color: var(--text-color);
}

/*==================================================
                    iPad layout
==================================================*/

@media (max-width: 500px) {
  .creative-library {
    display: none;
  }
}