:root {
  --safari-sm-left: calc(var(--compatible-with-offset) * 3);
  --safari-sm-top: calc(var(--compatible-with-offset) * 1.5);
  --safari-lg-left: 15%;
  --safari-lg-top: 20%;

  --wechat-sm-left: calc(var(--compatible-with-offset) * 10);
  --wechat-sm-top: var(--compatible-with-offset);
  --wechat-lg-left: 40%;
  --wechat-lg-top: 23%;

  --google-sm-left: calc(var(--compatible-with-offset) * 16);
  --google-sm-top: calc(var(--compatible-with-offset) * 2);
  --google-lg-left: 60%;
  --google-lg-top: 25%;

  --android-sm-left: calc(var(--compatible-with-offset) * 22);
  --android-sm-top: var(--compatible-with-offset);
  --android-lg-left: 85%;
  --android-lg-top: 10%;

  --instagram-sm-left: calc(var(--compatible-with-offset) * 1.5);
  --imstagram-sm-top: calc(var(--compatible-with-offset) * 7);
  --instagram-lg-left: 10%;
  --imstagram-lg-top: 55%;

  --shopify-sm-left: calc(var(--compatible-with-offset) * 8);
  --shopify-sm-top: calc(var(--compatible-with-offset) * 10);
  --shopify-lg-left: 30%;
  --shopify-lg-top: 70%;

  --apple-sm-left: calc(var(--compatible-with-offset) * 14);
  --apple-sm-top: calc(var(--compatible-with-offset) * 9);
  --apple-lg-left: 55%;
  --apple-lg-top: 75%;

  --facebook-sm-left: calc(var(--compatible-with-offset) * 20);
  --facebook-sm-top: calc(var(--compatible-with-offset) * 10.5);
  --facebook-lg-left: 80%;
  --facebook-lg-top: 60%;
}

#compatible-with .title {
  color: var(--black-bis);
  font-family: "Gotham Bold", sans-serif;
  font-size: 28px;
  margin-bottom: 0px;
  opacity: 0;
}

#compatible-with .title.animate {
  animation: title 2s ease-in-out;
  opacity: 1;
}

@keyframes title {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#compatible-with .card {
  background: var(--white-ter);
  max-width: 325px;
  position: relative;
}

#compatible-with .image {
  display: none;
}

#compatible-with .icon {
  position: absolute;
  opacity: 0;
}

#compatible-with .icon.animate {
  opacity: 1;
}

#compatible-with .icon.safari.animate {
  animation: safari 1.25s ease-in;
  left: var(--safari-sm-left);
  top: var(--safari-sm-top);
  transform: initial;
}

#compatible-with .icon.wechat.animate {
  animation: wechat 1.25s ease-in;
  left: var(--wechat-sm-left);
  top: var(--wechat-sm-top);
  transform: initial;
}

#compatible-with .icon.google.animate {
  animation: google 1.25s ease-in;
  left: var(--google-sm-left);
  top: var(--google-sm-top);
  transform: initial;
}

#compatible-with .icon.android.animate {
  animation: android 1.25s ease-in;
  left: var(--android-sm-left);
  top: var(--android-sm-top);
  transform: initial;
}

#compatible-with .icon.instagram.animate {
  animation: instagram 1.25s ease-in;
  left: var(--instagram-sm-left);
  top: var(--instagram-sm-top);
  transform: initial;
}

#compatible-with .icon.shopify.animate {
  animation: shopify 1.25s ease-in;
  left: var(--shopify-sm-left);
  top: var(--shopify-sm-top);
  transform: initial;
}

#compatible-with .icon.apple.animate {
  animation: apple 1.25s ease-in;
  left: var(--apple-sm-left);
  top: var(--apple-sm-top);
  transform: initial;
}

#compatible-with .icon.facebook.animate {
  animation: facebook 1.25s ease-in;
  left: var(--facebook-sm-left);
  top: var(--facebook-sm-top);
  transform: initial;
}

@keyframes safari {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--safari-sm-left);
    top: var(--safari-sm-top);
    transform: initial;
  }
}

@keyframes wechat {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--wechat-sm-left);
    top: var(--wechat-sm-top);
    transform: initial;
  }
}

@keyframes google {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--google-sm-left);
    top: var(--google-sm-top);
    transform: initial;
  }
}

@keyframes android {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--android-sm-left);
    top: var(--android-sm-top);
    transform: initial;
  }
}

@keyframes instagram {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--instagram-sm-left);
    top: var(--instagram-sm-top);
    transform: initial;
  }
}

@keyframes shopify {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--shopify-sm-left);
    top: var(--shopify-sm-top);
    transform: initial;
  }
}

@keyframes apple {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--apple-sm-left);
    top: var(--apple-sm-top);
    transform: initial;
  }
}

@keyframes facebook {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--facebook-sm-left);
    top: var(--facebook-sm-top);
    transform: initial;
  }
}

@media only screen and (min-width: 768px) {
  #compatible-with .card {
    height: 350px;
    max-width: initial;
    width: 600px;
  }

  #compatible-with .card-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
  }

  #compatible-with .card .title {
    font-size: 50px;
  }

  #compatible-with .image {
    display: block;
    position: absolute;
  }

  #compatible-with .image.girl {
    bottom: -100px;
    right: -50px;
    width: 120px;
  }

  #compatible-with .image.jacket {
    left: -100px;
    top: -50px;
    width: 200px;
  }

  #compatible-with .icon.safari.animate {
    animation: safari-lg 1.25s ease-in;
    top: var(--safari-lg-left);
    left: var(--safari-lg-top);
    transform: scale(1.75);
  }

  #compatible-with .icon.wechat.animate {
    animation: wechat-lg 1.25s ease-in;
    left: var(--wechat-lg-left);
    top: var(--wechat-lg-top);
    transform: scale(1.75);
  }

  #compatible-with .icon.google.animate {
    animation: google-lg 1.25s ease-in;
    left: var(--google-lg-left);
    top: var(--google-lg-top);
    transform: scale(1.75);
  }

  #compatible-with .icon.android.animate {
    animation: android-lg 1.25s ease-in;
    left: var(--android-lg-left);
    top: var(--android-lg-top);
    transform: scale(1.75);
  }

  #compatible-with .icon.instagram.animate {
    animation: instagram-lg 1.25s ease-in;
    left: var(--instagram-lg-left);
    top: var(--imstagram-lg-top);
    transform: scale(1.75);
  }

  #compatible-with .icon.shopify.animate {
    animation: shopify-lg 1.25s ease-in;
    left: var(--shopify-lg-left);
    top: var(--shopify-lg-top);
    transform: scale(1.75);
  }

  #compatible-with .icon.apple.animate {
    animation: apple-lg 1.25s ease-in;
    left: var(--apple-lg-left);
    top: var(--apple-lg-top);
    transform: scale(1.75);
  }

  #compatible-with .icon.facebook.animate {
    animation: facebook-lg 1.25s ease-in;
    left: var(--facebook-lg-left);
    top: var(--facebook-lg-top);
    transform: scale(1.75);
  }
}

@keyframes safari-lg {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--safari-lg-left);
    top: var(--safari-lg-top);
    transform: scale(1.75);
  }
}

@keyframes wechat-lg {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--wechat-lg-left);
    top: var(--wechat-lg-top);
    transform: scale(1.75);
  }
}

@keyframes google-lg {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--google-lg-left);
    top: var(--google-lg-top);
    transform: scale(1.75);
  }
}

@keyframes android-lg {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--android-lg-left);
    top: var(--android-lg-top);
    transform: scale(1.75);
  }
}

@keyframes instagram-lg {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--instagram-lg-left);
    top: var(--instagram-lg-top);
    transform: scale(1.75);
  }
}

@keyframes shopify-lg {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--shopify-lg-left);
    top: var(--shopify-lg-top);
    transform: scale(1.75);
  }
}

@keyframes apple-lg {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--apple-lg-left);
    top: var(--apple-lg-top);
    transform: scale(1.75);
  }
}

@keyframes facebook-lg {
  from {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
  to {
    left: var(--facebook-lg-left);
    top: var(--facebook-lg-top);
    transform: scale(1.75);
  }
}