/*
scale blue = #021E40;
scale orange = #FF6422;
*/

.clickTagLink {
  position: absolute;
}

html,
body {
  overflow: hidden;
  margin: 0px;
}
body {
  width: 980px;
  height: 300px;
  background: #fff;
  color: #fff;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
}

p {
  margin: 0px !important;
}

.banner {
  width: 980px;
  height: 300px;
  background-image: url(assets/Untitled.jpg);
  background-size: contain;
  background-position-x: 270px;
}

.banner:after {
  content: '';
  width: 40%;
  height: 150%;
  /* background: url(assets/julekort-utentekst2.png);
   */
  /* background: red; */
  background-position: center;
  background-size: 170%;
  position: absolute;
  left: -100px;
  bottom: -50px;
  transform: rotate(10deg);
  background-color: #021e40;
  background-image: linear-gradient(#084875, #021e40);
  background-size: 150% 150%;
  animation: my_animation 10s linear infinite;
}

.banner:hover .text-1,
.banner:hover .logo {
  display: none;
}

.banner:hover #snow-container {
  width: 100%;
  overflow: visible;
}

#snow-container {
  overflow: hidden;
  z-index: 20;
  position: absolute;
  width: 300px;
  height: 100%;
}

.logo {
  position: absolute;
  left: 20px;
  top: 20px;
  max-width: 80px;
  z-index: 2;
}

.text-1 {
  position: absolute;
  max-width: 200px;
  top: 60px;
  left: 45px;
  z-index: 2;
}

.hover {
  position: absolute;
  background: #021e40;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
  transition: 0.3s opacity ease;
  /* background-image: url(assets/julekort-utentekst2.png); */
  background-image: linear-gradient(#021e40, #084875);
  background-size: cover;
}

.hover img {
  width: 55%;
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  bottom: 20px;
  margin: auto;
  opacity: 0;
  transition: 1.5s opacity ease;
}

.banner:hover .hover {
  opacity: 1;
}

.banner:hover .hover img {
  opacity: 1;
}

.snow {
  width: 3px;
  height: 3px;
  position: absolute;
  background-color: white;
  background-size: 100% 100%;
  border-radius: 50%;
  z-index: 9999;
}

@keyframes imgevento {
  0%,
  100% {
    transform: skew(0deg, 0deg) scale(1, 1);
    filter: saturate(100%) invert(0%);
  }

  25% {
    filter: saturate(180%) invert(10%);
  }

  50% {
    transform: skew(4deg, 2deg) scale(1.1, 1.1);
    filter: saturate(100%) invert(0%);
  }

  75% {
    filter: saturate(150%) invert(20%);
  }
}