/* ==========================================================================
Animations
========================================================================== */
.pulse2 {
  -webkit-animation-name: pulse2;
          animation-name: pulse2;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear; }

@-webkit-keyframes pulse2 {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  50% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes pulse2 {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  50% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }
.floating-arrow {
  -webkit-animation-name: floating-arrow;
          animation-name: floating-arrow;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

@-webkit-keyframes floating-arrow {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  65% {
    -webkit-transform: translate(-50%, 15px);
            transform: translate(-50%, 15px); }
  to {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }

@keyframes floating-arrow {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  65% {
    -webkit-transform: translate(-50%, 15px);
            transform: translate(-50%, 15px); }
  to {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }
.floating-logo {
  -webkit-animation-name: floating-logo;
          animation-name: floating-logo;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

@-webkit-keyframes floating-logo {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  50% {
    -webkit-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px); }
  to {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }

@keyframes floating-logo {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  50% {
    -webkit-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px); }
  to {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }

  
.floating-logo-small {
  -webkit-animation-name: floating-logo-small;
          animation-name: floating-logo-small;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

@-webkit-keyframes floating-logo-small {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  50% {
    -webkit-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px); }
  to {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }

@keyframes floating-logo-small {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  50% {
    -webkit-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px); }
  to {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }
/* ==========================================================================
Waypoinsts
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6, .wp7, .wp8, .wp9 {
  visibility: hidden; }

.wp2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight, .bounceInDown {
  visibility: visible; }


/* ==========================================================================
.hero-strip
========================================================================== */
.hero-strip {
  padding-top: 150px;
  background: #380303 url("../img/banner.jpg") no-repeat center center;
  padding-bottom: 190px;
  position: relative; }


  .hero-strip .logo-placeholder {
    height: 238px;
    position: absolute;
    bottom: -265px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }

  .hero-strip .logo-placeholder2 {
    height: 238px;
    position: absolute;
    bottom: -265px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }            

/* ==========================================================================
.blog-intro
========================================================================== */
.blog-intro {
  padding-top: 160px; }
  .blog-intro h3 {
    margin-bottom: 70px; }
  .blog-intro .leftcol {
    padding-right: 100px;
    border-right: solid 1px #E6E9EA; }
  .blog-intro .rightcol {
    padding-left: 100px; }

.blog-intro-shop {
  padding-top: 0px; }


  @font-face {
    font-family: Secret;
    src: url(../fonts/Nagomi.ttf);
  }
  @font-face {
    font-family: Athelas;
    src: url(../fonts/Athelas.ttf);
  }
  @font-face {
    font-family: Athelas-Bold;
    src: url(../fonts/Athelas-Bold.ttf);
  }
  
p {
  font-size: 35px;
}

p.small {
  font-size: 32px;
}

  body {
    /* add custom font */
    font-family: 'Secret';
    color: #ffffffc6;
    margin-bottom: 100px;
    background-image: url('../img/bg-dark.jpg');
    background-size: contain;
 
  }

  a{
    color:#9f1117;
    text-decoration: none;
  }

  a:hover{


    text-decoration: none;
  }

  .btn{
    background-color: #bd161f;
    color: #fff;
    border: none;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 25px;
    font-size: 32px;
    cursor: pointer;
    margin-top: 60px;
    margin-bottom: 20px;
  }




  btn:hover{
    background-color: #7f090f;
    color: #fff;
  }

  #goldbtn{
    background-color: #7f6935;
    color: #fff;
    border: none;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 25px;
    font-size: 25px;
    cursor: pointer;
    margin-top: 60px;
    margin-bottom: 20px;
    font-size: 45px;
  }

  #goldbtn:hover{
    background-color: #6e957f;

  }

  img {
    border-radius: 10%;
  }

  .revealfortune {
    width: 140px;
    height: 150px;
    background: url("../img/RevealFortuneHoverBright.png") no-repeat;
    background: url("../img/RevealFortune.png") no-repeat;
    display: inline-block;
    margin-top: 30px;
  }

  .revealfortune:hover  {
    background: url("../img/RevealFortuneHoverBright.png") no-repeat;
  }


 .reveal {
   color: #ae8e45;
 }

 .reveal:hover {
  color: #ebc05c;
}

 .reveal-disclaimer {
    color: #ffffffad;
    font-size: 20px;

 }

 .audio {
  margin-left: auto; 
  margin-right: 0;
  padding-left: 30px;
  position: fixed;
  bottom: 110px;
  left: 10px
}


audio {
  width: 200px;
}


@media (max-width: 801px) {
  body{
     padding-bottom: 100px;
  }
}