/* CTAD */

:root {
  --jrkdctadee-size: 48px;
}

.jrkdctadee {
  position: fixed;
  bottom: 90px;
  left: 24px;
  z-index: 89;
  width: var(--jrkdctadee-size);
  height: var(--jrkdctadee-size);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  background: var(--jrkdee-color-dark);
  border: 1px solid var(--jrkdee-color-brand);
  color: var(--jrkdee-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--jrkdee-shadow-md);
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--jrkdee-transition-normal), visibility var(--jrkdee-transition-normal), transform var(--jrkdee-transition-normal), background var(--jrkdee-transition-fast);
}

.jrkdctadee.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.jrkdctadee:hover {
  background: var(--jrkdee-color-brand);
  transform: translateY(-4px);
}

.jrkdctadee svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

@media (max-width: 640px) {
  .jrkdctadee {
    bottom: 78px;
    left: 14px;
    width: 42px;
    height: 42px;
  }

  .jrkdctadee svg {
    width: 18px;
    height: 18px;
  }
}