html {
  /*  &:before {
       background-image: url('/wp-content/themes/kvikmyndir/promotions/frost-frame.png');
       background-repeat: repeat-x;
       position: relative;
       background-position: 0 -20px;
       content: "";
       position: fixed;
       top: 0;
       width: 100%;
       height: 20px;
       z-index: 20;
   } */
}

body {
  /* &:after {
      content: "";
      position: fixed;
      top: 0;
      width: 20px;
      height: 100%;
      z-index: 1;
      background-image: url('/wp-content/themes/kvikmyndir/promotions/frost-frame-right.png');
      background-repeat: repeat-y;
      right: 0px;
      background-position: -20px 0;;
  }
  &:before {
      content: "";
      position: fixed;
      top: 0;
      width: 20px;
      height: 100%;
      z-index: 1;
      background-image: url('/wp-content/themes/kvikmyndir/promotions/frost-frame-left.png');
      background-repeat: repeat-y;
      left: 0px;
      background-position: -20px 0;
  } */
}

/* .app_header {
    background-color: #fff;
    position: relative;
    z-index: 2;
    &::after {
        content: "";
        position: absolute;
        top: -22px;
        width: 320px;
        height: 90px;
        z-index: 1;
        background-image: url(/wp-content/themes/kvikmyndir/promotions/apprentice-toppur2.png); 
        background-size: contain;
        background-repeat: no-repeat;
        left: -60px;
        @media (max-width: 768px) {
            display: none;
        }
    }
    img {
        display: none;
    }

}
.promotion_countdown {
    background-color: white; 
    border-radius: 10px;
    //background-image: url('/wp-content/themes/kvikmyndir/promotions/garfield-animation-eat.gif')!important;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;

    @media (max-width: 768px) {
        display: none;
    }

    img {
        width: 100%;
    }
    #countdown {
        color: #ce5724!important;

    }
}
 */
.fire {
  animation: animation 1s ease-in-out infinite alternate;
  -moz-animation: animation 1s ease-in-out infinite alternate;
  -webkit-animation: animation 1s ease-in-out infinite alternate;
  -o-animation: animation 1s ease-in-out infinite alternate;
}

.burn {
  animation: animation 0.65s ease-in-out infinite alternate;
  -moz-animation: animation 0.65s ease-in-out infinite alternate;
  -webkit-animation: animation 0.65s ease-in-out infinite alternate;
  -o-animation: animation 0.65s ease-in-out infinite alternate;
}

.fire2 {
  animation: animation2 1.2s ease-in-out infinite alternate;
  -moz-animation: animation2 1.2s ease-in-out infinite alternate;
  -webkit-animation: animation2 1.2s ease-in-out infinite alternate;
  -o-animation: animation2 1.2s ease-in-out infinite alternate;
}

.fire3 {
  animation: animation3 0.8s ease-in-out infinite alternate;
  -moz-animation: animation3 0.8s ease-in-out infinite alternate;
  -webkit-animation: animation3 0.8s ease-in-out infinite alternate;
  -o-animation: animation3 0.8s ease-in-out infinite alternate;
}

.burn2 {
  animation: animation2 0.55s ease-in-out infinite alternate;
  -moz-animation: animation2 0.55s ease-in-out infinite alternate;
  -webkit-animation: animation2 0.55s ease-in-out infinite alternate;
  -o-animation: animation2 0.55s ease-in-out infinite alternate;
}

.burn3 {
  animation: animation3 0.75s ease-in-out infinite alternate;
  -moz-animation: animation3 0.75s ease-in-out infinite alternate;
  -webkit-animation: animation3 0.75s ease-in-out infinite alternate;
  -o-animation: animation3 0.75s ease-in-out infinite alternate;
}

@keyframes animation {
  0% {
    text-shadow: 0 0 5px #fefcc9, 2px -2px 8px #feec85, -4px -4px 10px #ffae34, 4px -8px 12px #ec760c, -4px -12px 15px #cd4606, 0 -16px 18px #973716, 2px -18px 20px #451b0e;
  }
  100% {
    text-shadow: 0 0 5px #fefcc9, 2px -2px 8px #fefcc9, -4px -4px 10px #feec85, 4px -8px 15px #ffae34, -4px -12px 12px #ec760c, 0 -16px 20px #cd4606, 2px -18px 20px #973716;
  }
}
@-moz-keyframes animation {
  0% {
    text-shadow: 0 0 5px #fefcc9, 2px -2px 8px #feec85, -4px -4px 10px #ffae34, 4px -8px 12px #ec760c, -4px -12px 15px #cd4606, 0 -16px 18px #973716, 2px -18px 20px #451b0e;
  }
  100% {
    text-shadow: 0 0 5px #fefcc9, 2px -2px 8px #fefcc9, -4px -4px 10px #feec85, 4px -8px 15px #ffae34, -4px -12px 12px #ec760c, 0 -16px 20px #cd4606, 2px -18px 20px #973716;
  }
}
@-webkit-keyframes animation {
  0% {
    text-shadow: 0 0 5px #fefcc9, 2px -2px 8px #feec85, -4px -4px 10px #ffae34, 4px -8px 12px #ec760c, -4px -12px 15px #cd4606, 0 -16px 18px #973716, 2px -18px 20px #451b0e;
  }
  100% {
    text-shadow: 0 0 5px #fefcc9, 2px -2px 8px #fefcc9, -4px -4px 10px #feec85, 4px -8px 15px #ffae34, -4px -12px 12px #ec760c, 0 -16px 20px #cd4606, 2px -18px 20px #973716;
  }
}
@-o-keyframes animation {
  0% {
    text-shadow: 0 0 5px #fefcc9, 2px -2px 8px #feec85, -4px -4px 10px #ffae34, 4px -8px 12px #ec760c, -4px -12px 15px #cd4606, 0 -16px 18px #973716, 2px -18px 20px #451b0e;
  }
  100% {
    text-shadow: 0 0 5px #fefcc9, 2px -2px 8px #fefcc9, -4px -4px 10px #feec85, 4px -8px 15px #ffae34, -4px -12px 12px #ec760c, 0 -16px 20px #cd4606, 2px -18px 20px #973716;
  }
}
/* Animation 2 - Different flame pattern */
@keyframes animation2 {
  0% {
    text-shadow: 0 0 6px #fefcc9, -3px -3px 9px #feec85, 3px -5px 11px #ffae34, -5px -9px 13px #ec760c, 3px -13px 16px #cd4606, -2px -17px 19px #973716, 4px -19px 21px #451b0e;
  }
  100% {
    text-shadow: 0 0 6px #fefcc9, -3px -3px 9px #fefcc9, 3px -5px 11px #feec85, -5px -9px 16px #ffae34, 3px -13px 13px #ec760c, -2px -17px 21px #cd4606, 4px -19px 21px #973716;
  }
}
@-moz-keyframes animation2 {
  0% {
    text-shadow: 0 0 6px #fefcc9, -3px -3px 9px #feec85, 3px -5px 11px #ffae34, -5px -9px 13px #ec760c, 3px -13px 16px #cd4606, -2px -17px 19px #973716, 4px -19px 21px #451b0e;
  }
  100% {
    text-shadow: 0 0 6px #fefcc9, -3px -3px 9px #fefcc9, 3px -5px 11px #feec85, -5px -9px 16px #ffae34, 3px -13px 13px #ec760c, -2px -17px 21px #cd4606, 4px -19px 21px #973716;
  }
}
@-webkit-keyframes animation2 {
  0% {
    text-shadow: 0 0 6px #fefcc9, -3px -3px 9px #feec85, 3px -5px 11px #ffae34, -5px -9px 13px #ec760c, 3px -13px 16px #cd4606, -2px -17px 19px #973716, 4px -19px 21px #451b0e;
  }
  100% {
    text-shadow: 0 0 6px #fefcc9, -3px -3px 9px #fefcc9, 3px -5px 11px #feec85, -5px -9px 16px #ffae34, 3px -13px 13px #ec760c, -2px -17px 21px #cd4606, 4px -19px 21px #973716;
  }
}
@-o-keyframes animation2 {
  0% {
    text-shadow: 0 0 6px #fefcc9, -3px -3px 9px #feec85, 3px -5px 11px #ffae34, -5px -9px 13px #ec760c, 3px -13px 16px #cd4606, -2px -17px 19px #973716, 4px -19px 21px #451b0e;
  }
  100% {
    text-shadow: 0 0 6px #fefcc9, -3px -3px 9px #fefcc9, 3px -5px 11px #feec85, -5px -9px 16px #ffae34, 3px -13px 13px #ec760c, -2px -17px 21px #cd4606, 4px -19px 21px #973716;
  }
}
/* Animation 3 - Third flame pattern */
@keyframes animation3 {
  0% {
    text-shadow: 0 0 4px #fefcc9, 1px -4px 7px #feec85, -3px -6px 9px #ffae34, 3px -10px 14px #ec760c, -2px -14px 17px #cd4606, 1px -18px 20px #973716, -3px -20px 22px #451b0e;
  }
  100% {
    text-shadow: 0 0 4px #fefcc9, 1px -4px 7px #fefcc9, -3px -6px 9px #feec85, 3px -10px 17px #ffae34, -2px -14px 14px #ec760c, 1px -18px 22px #cd4606, -3px -20px 22px #973716;
  }
}
@-moz-keyframes animation3 {
  0% {
    text-shadow: 0 0 4px #fefcc9, 1px -4px 7px #feec85, -3px -6px 9px #ffae34, 3px -10px 14px #ec760c, -2px -14px 17px #cd4606, 1px -18px 20px #973716, -3px -20px 22px #451b0e;
  }
  100% {
    text-shadow: 0 0 4px #fefcc9, 1px -4px 7px #fefcc9, -3px -6px 9px #feec85, 3px -10px 17px #ffae34, -2px -14px 14px #ec760c, 1px -18px 22px #cd4606, -3px -20px 22px #973716;
  }
}
@-webkit-keyframes animation3 {
  0% {
    text-shadow: 0 0 4px #fefcc9, 1px -4px 7px #feec85, -3px -6px 9px #ffae34, 3px -10px 14px #ec760c, -2px -14px 17px #cd4606, 1px -18px 20px #973716, -3px -20px 22px #451b0e;
  }
  100% {
    text-shadow: 0 0 4px #fefcc9, 1px -4px 7px #fefcc9, -3px -6px 9px #feec85, 3px -10px 17px #ffae34, -2px -14px 14px #ec760c, 1px -18px 22px #cd4606, -3px -20px 22px #973716;
  }
}
@-o-keyframes animation3 {
  0% {
    text-shadow: 0 0 4px #fefcc9, 1px -4px 7px #feec85, -3px -6px 9px #ffae34, 3px -10px 14px #ec760c, -2px -14px 17px #cd4606, 1px -18px 20px #973716, -3px -20px 22px #451b0e;
  }
  100% {
    text-shadow: 0 0 4px #fefcc9, 1px -4px 7px #fefcc9, -3px -6px 9px #feec85, 3px -10px 17px #ffae34, -2px -14px 14px #ec760c, 1px -18px 22px #cd4606, -3px -20px 22px #973716;
  }
}