@import url("https://fonts.googleapis.com/css?family=Roboto:300,400");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0; }

html, body {
  background-color: transparent; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black; }
  .modal-overlay .modal-inner {
    max-height: 606px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    height: 100%;
    width: 100%;
    transform: translateY(-50%); }
    .modal-overlay .modal-inner .modal-close-btn {
      position: absolute;
      right: 0px;
      top: -25px;
      border: none;
      background: none;
      outline: none;
      color: white;
      display: block;
      font-size: 1rem; }

@media (max-width: 1099px) {
  .modal-overlay .modal-inner {
    height: 600px;
    width: 991px; } }

@media (max-width: 991px) {
  .modal-overlay .modal-inner {
    height: 600px;
    width: 768px; } }

@media (max-width: 768px) {
  .modal-overlay .modal-inner {
    height: 600px;
    width: 576px; } }

@media (max-width: 576px) {
  .modal-overlay .modal-inner {
    height: 450px;
    width: 320px; } }

#heuking-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 3px; }
  #heuking-card .inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: radial-gradient(#ffffff, #dddddd); }
    #heuking-card .inner .heuking-logo {
      position: absolute;
      top: 40px;
      right: 40px;
      display: block;
      height: auto;
      width: auto;
      max-width: 60%; }
      #heuking-card .inner .heuking-logo img {
        width: 400px;
        height: auto; }
    #heuking-card .inner .dune {
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: 80px;
      height: auto; }
      #heuking-card .inner .dune img {
        width: 100%;
        height: auto;
        position: relative; }
      #heuking-card .inner .dune .trees {
        text-align: center;
        height: auto;
        width: 420px;
        position: absolute; }
        #heuking-card .inner .dune .trees .tree {
          display: inline-block;
          height: auto;
          width: 100px;
          position: absolute;
          bottom: 0; }
          #heuking-card .inner .dune .trees .tree .tree-tile {
            background: url(../img/tree-tile.svg) no-repeat;
            background-size: contain;
            background-position: center center;
            margin: 0 auto;
            transform-origin: center center; }
            #heuking-card .inner .dune .trees .tree .tree-tile.top-tile {
              width: 60px;
              height: 60px; }
            #heuking-card .inner .dune .trees .tree .tree-tile.mid-tile {
              margin-top: -45px;
              width: 80px;
              height: 80px; }
            #heuking-card .inner .dune .trees .tree .tree-tile.bot-tile {
              margin-top: -65px;
              width: 100px;
              height: 100px; }
  #heuking-card #dune-1 {
    z-index: 2; }
    #heuking-card #dune-1 img {
      z-index: 2; }
    #heuking-card #dune-1 .trees {
      z-index: 1;
      bottom: 320px;
      left: 170px; }
      #heuking-card #dune-1 .trees .tree-1 {
        transform: scale(0.4);
        left: 130px;
        bottom: -27px; }
      #heuking-card #dune-1 .trees .tree-2 {
        transform: scale(0.8);
        left: 170px;
        bottom: -9px; }
      #heuking-card #dune-1 .trees .tree-3 {
        transform: scale(0.6);
        left: 215px;
        bottom: -20px; }
      #heuking-card #dune-1 .trees .tree-4 {
        transform: scale(0.4);
        left: 250px;
        bottom: -38px; }
  #heuking-card #dune-2 {
    z-index: 3; }
    #heuking-card #dune-2 img {
      z-index: 3; }
    #heuking-card #dune-2 .trees {
      z-index: 2;
      bottom: 255px;
      left: 0px; }
      #heuking-card #dune-2 .trees .tree-1 {
        transform: scale(0.4);
        left: 170px; }
      #heuking-card #dune-2 .trees .tree-2 {
        transform: scale(0.8);
        left: 210px;
        bottom: 3px; }
      #heuking-card #dune-2 .trees .tree-3 {
        transform: scale(0.6);
        left: 265px;
        bottom: -25px; }
  #heuking-card #dune-3 {
    z-index: 4; }
  #heuking-card #dune-4 {
    z-index: 5; }
    #heuking-card #dune-4 img {
      z-index: 5; }
    #heuking-card #dune-4 .trees {
      z-index: 4;
      bottom: 210px;
      right: 100px; }
      #heuking-card #dune-4 .trees .tree-1 {
        transform: scale(0.8);
        left: 170px;
        bottom: -55px; }
      #heuking-card #dune-4 .trees .tree-2 {
        left: 235px;
        bottom: -27px; }
      #heuking-card #dune-4 .trees .tree-3 {
        transform: scale(1.2);
        left: 310px;
        bottom: 5px; }
      #heuking-card #dune-4 .trees .tree-4 {
        transform: scale(0.8);
        left: 374px;
        bottom: 0; }
  #heuking-card .banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 210px;
    background-color: white;
    border-radius: 3px;
    z-index: 7; }
    #heuking-card .banner .banner-content {
      position: relative;
      transform: translate(-10%, -50%);
      top: 50%;
      margin: 0 auto 0 auto;
      max-width: 100%;
      width: 650px;
      height: 100%; }
      #heuking-card .banner .banner-content .banner-label {
        font-family: "Roboto", sans-serif, Helvetica, Arial;
        font-weight: 300;
        position: absolute;
        display: block;
        opacity: 0;
        text-transform: uppercase;
        animation: text-fadein 1s ease-in forwards; }
        #heuking-card .banner .banner-content .banner-label.small {
          text-align: left;
          font-size: 30px;
          color: #888888; }
        #heuking-card .banner .banner-content .banner-label.big {
          text-align: right;
          font-size: 48px;
          color: #96c11f; }
        #heuking-card .banner .banner-content .banner-label#de-label {
          top: 50%;
          transform: translateY(-50%);
          right: 0; }
        #heuking-card .banner .banner-content .banner-label#en-label {
          top: 20%;
          left: 50px;
          animation-delay: 1s; }
        #heuking-card .banner .banner-content .banner-label#fr-label {
          top: 50%;
          transform: translateY(-50%);
          left: 0px;
          animation-delay: 2s; }
        #heuking-card .banner .banner-content .banner-label#es-label {
          bottom: 20%;
          left: 80px;
          animation-delay: 3s; }

.snow-container {
  width: 100%;
  height: 100%;
  position: relative; }
  .snow-container .snowflake {
    display: block;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    position: relative; }

/*----------responsive ----------*/
@media (max-width: 1100px) {
  #heuking-card .inner .dune {
    bottom: 90px; }
  #heuking-card #dune-1 .trees {
    bottom: 285px;
    left: 140px; }
    #heuking-card #dune-1 .trees .tree-1 {
      transform: scale(0.4);
      bottom: -27px; }
    #heuking-card #dune-1 .trees .tree-2 {
      transform: scale(0.8);
      bottom: -9px; }
    #heuking-card #dune-1 .trees .tree-3 {
      transform: scale(0.6);
      bottom: -23px; }
    #heuking-card #dune-1 .trees .tree-4 {
      transform: scale(0.4);
      bottom: -41px; }
  #heuking-card #dune-2 .trees {
    bottom: 250px;
    left: -110px; }
    #heuking-card #dune-2 .trees .tree-1 {
      transform: scale(0.4);
      left: 170px; }
    #heuking-card #dune-2 .trees .tree-2 {
      left: 210px;
      bottom: 3px; }
    #heuking-card #dune-2 .trees .tree-3 {
      left: 260px;
      bottom: -27px; }
  #heuking-card #dune-3 {
    z-index: 4; }
  #heuking-card #dune-4 .trees {
    bottom: 180px;
    right: 100px; }
    #heuking-card #dune-4 .trees .tree-1 {
      bottom: -55px; }
    #heuking-card #dune-4 .trees .tree-2 {
      bottom: -27px; }
    #heuking-card #dune-4 .trees .tree-3 {
      bottom: 5px; }
    #heuking-card #dune-4 .trees .tree-4 {
      bottom: 0; } }

@media (max-width: 991px) {
  #heuking-card .inner .dune {
    bottom: 125px; }
  #heuking-card .inner .heuking-logo img {
    width: 300px; }
  #heuking-card #dune-1 .trees {
    bottom: 215px;
    left: 55px; }
    #heuking-card #dune-1 .trees .tree-1 {
      bottom: -27px; }
    #heuking-card #dune-1 .trees .tree-2 {
      bottom: -9px; }
    #heuking-card #dune-1 .trees .tree-3 {
      bottom: -23px; }
    #heuking-card #dune-1 .trees .tree-4 {
      bottom: -41px; }
  #heuking-card #dune-2 .trees {
    bottom: 182px;
    left: -130px; }
    #heuking-card #dune-2 .trees .tree-1 {
      left: 170px; }
    #heuking-card #dune-2 .trees .tree-2 {
      left: 210px;
      bottom: 3px; }
    #heuking-card #dune-2 .trees .tree-3 {
      left: 260px;
      bottom: -27px; }
  #heuking-card #dune-3 {
    z-index: 4; }
  #heuking-card #dune-4 .trees {
    bottom: 140px;
    right: 40px; }
    #heuking-card #dune-4 .trees .tree-1 {
      bottom: -55px; }
    #heuking-card #dune-4 .trees .tree-2 {
      bottom: -27px; }
    #heuking-card #dune-4 .trees .tree-3 {
      bottom: 5px; }
    #heuking-card #dune-4 .trees .tree-4 {
      bottom: 0; }
  #heuking-card .banner .banner-content {
    transform: translate(0, -50%); } }

@media (max-width: 768px) {
  #heuking-card .inner .heuking-logo img {
    width: 250px; }
  #heuking-card .inner .dune {
    bottom: 135px;
    left: -20px;
    right: -20px; }
    #heuking-card .inner .dune .trees .tree .tree-tile.top-tile {
      width: 50px;
      height: 50px; }
    #heuking-card .inner .dune .trees .tree .tree-tile.mid-tile {
      margin-top: -42px;
      width: 70px;
      height: 70px; }
    #heuking-card .inner .dune .trees .tree .tree-tile.bot-tile {
      margin-top: -62px;
      width: 90px;
      height: 90px; }
  #heuking-card #dune-1 .trees {
    bottom: 175px;
    left: 15px; }
    #heuking-card #dune-1 .trees .tree-1 {
      left: 135px;
      bottom: -21px; }
    #heuking-card #dune-1 .trees .tree-2 {
      bottom: -9px; }
    #heuking-card #dune-1 .trees .tree-3 {
      bottom: -28px; }
    #heuking-card #dune-1 .trees .tree-4 {
      bottom: -48px; }
  #heuking-card #dune-2 .trees {
    bottom: 150px;
    left: -170px; }
    #heuking-card #dune-2 .trees .tree-1 {
      left: 170px; }
    #heuking-card #dune-2 .trees .tree-2 {
      left: 210px;
      bottom: 6px; }
    #heuking-card #dune-2 .trees .tree-3 {
      left: 260px;
      bottom: -18px; }
  #heuking-card #dune-3 {
    z-index: 4; }
  #heuking-card #dune-4 .trees {
    bottom: 108px;
    right: 40px; }
    #heuking-card #dune-4 .trees .tree-1 {
      bottom: -44px; }
    #heuking-card #dune-4 .trees .tree-2 {
      bottom: -24px; }
    #heuking-card #dune-4 .trees .tree-3 {
      bottom: 5px; }
    #heuking-card #dune-4 .trees .tree-4 {
      bottom: 0; }
  #heuking-card .banner .banner-content {
    transform: translate(0, -50%);
    width: 490px; }
    #heuking-card .banner .banner-content .banner-label.small {
      font-size: 20px; }
    #heuking-card .banner .banner-content .banner-label.big {
      font-size: 38px; }
    #heuking-card .banner .banner-content .banner-label#en-label {
      top: 25%; }
    #heuking-card .banner .banner-content .banner-label#es-label {
      bottom: 25%; } }

@media (max-width: 576px) {
  #heuking-card .inner .heuking-logo {
    top: 20px;
    right: 20px; }
    #heuking-card .inner .heuking-logo img {
      width: 180px; }
  #heuking-card .inner .dune {
    bottom: 110px;
    left: -50px;
    right: -50px; }
    #heuking-card .inner .dune .trees .tree .tree-tile.top-tile {
      width: 30px;
      height: 30px; }
    #heuking-card .inner .dune .trees .tree .tree-tile.mid-tile {
      margin-top: -27px;
      width: 50px;
      height: 50px; }
    #heuking-card .inner .dune .trees .tree .tree-tile.bot-tile {
      margin-top: -47px;
      width: 70px;
      height: 70px; }
  #heuking-card #dune-1 .trees {
    bottom: 125px;
    left: -45px; }
    #heuking-card #dune-1 .trees .tree-1 {
      left: 135px;
      bottom: -21px; }
    #heuking-card #dune-1 .trees .tree-2 {
      left: 158px;
      bottom: -17px; }
    #heuking-card #dune-1 .trees .tree-3 {
      bottom: -25px;
      left: 186px; }
    #heuking-card #dune-1 .trees .tree-4 {
      bottom: -38px;
      left: 210px; }
  #heuking-card #dune-2 .trees {
    bottom: 100px; }
    #heuking-card #dune-2 .trees .tree-2 {
      left: 197px;
      bottom: 0px; }
    #heuking-card #dune-2 .trees .tree-3 {
      left: 230px;
      bottom: -15px; }
  #heuking-card #dune-3 {
    z-index: 4; }
  #heuking-card #dune-4 .trees {
    bottom: 81px;
    right: 7px; }
    #heuking-card #dune-4 .trees .tree-1 {
      bottom: -46px;
      left: 191px; }
    #heuking-card #dune-4 .trees .tree-2 {
      bottom: -32px;
      left: 233px; }
    #heuking-card #dune-4 .trees .tree-3 {
      bottom: -15px;
      left: 282px; }
    #heuking-card #dune-4 .trees .tree-4 {
      bottom: -11px;
      left: 322px; }
  #heuking-card .banner {
    height: 160px; }
    #heuking-card .banner .banner-content {
      width: 300px; }
      #heuking-card .banner .banner-content .banner-label.small {
        font-size: 14px; }
      #heuking-card .banner .banner-content .banner-label.big {
        font-size: 22px; }
      #heuking-card .banner .banner-content .banner-label#en-label {
        top: 30%; }
      #heuking-card .banner .banner-content .banner-label#es-label {
        bottom: 30%; } }

/*---------- Animations ----------*/
@keyframes text-fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.animate-1 {
  animation: tree-animation-1 4s linear infinite; }

.animate-2 {
  animation: tree-animation-2 4s linear infinite; }

.animate-3 {
  animation: tree-animation-3 4s linear infinite; }

.animate-4 {
  animation: tree-animation-4 4s linear infinite; }

@keyframes tree-animation-1 {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-3deg); }
  75% {
    transform: rotate(3deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes tree-animation-2 {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-5deg); }
  75% {
    transform: rotate(5deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes tree-animation-3 {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(2deg); }
  75% {
    transform: rotate(-2deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes tree-animation-4 {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(4deg); }
  75% {
    transform: rotate(-4deg); }
  100% {
    transform: rotate(0deg); } }