#betterhints { background: rgba(255,255,255,0.01); margin: 0; width: 100%; min-height: 4em;
font-family: 'Archivo Black', sans-serif; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); text-transform: uppercase; }

#betterhints.bottom { position: fixed; bottom: 0; left: 0; padding: 1em;  }
#betterhints.bottom .betterhint { width: 66%; }

#betterhints a { color: #fff; }

#betterhints .betterhint { text-align: center; background: orange; padding: 2px; margin: 0 auto; color: #fff; font-size: 14px; font-weight: 300; text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3); margin-bottom: 2px;

  animation: colorchange 10s;
  -webkit-animation: colorchange 10s;
  -webkit-animation-iteration-count: infinite;

 }

 #betterhints .betterhint.has_image { padding: 0; margin: 0 auto 3px auto; }
 #betterhints .betterhint.has_link { cursor:pointer; }

 #betterhints.animate .betterhint  {}

#betterhints .betterhint:last-child {
    margin-bottom: 0;
}

#betterhints .betterhint-content { padding: 1em;
  background: url('') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

 #betterhints .betterhint-content p { font-family: 'Archivo Narrow', sans-serif; margin: 0; padding: 0; text-transform: none; font-size: 1.3em; font-weight: 400; }

 #betterhints .pulsate {
   box-shadow: 0 0 0 rgba(96,29,164, 0.4);
   animation: pulse 2.4s infinite;
 }

 @-webkit-keyframes pulse_main {
   0% {
     -webkit-box-shadow: 0 0 0 0 rgba(96,29,164, 1);
   }
   70% {
       -webkit-box-shadow: 0 0 0 10px rgba(96,29,164, 0);
   }
   100% {
       -webkit-box-shadow: 0 0 0 0 rgba(96,29,164, 0);
   }
 }
 @keyframes pulse_main {
   0% {
     -moz-box-shadow: 0 0 0 0 rgba(96,29,164, 1);
     box-shadow: 0 0 0 0 rgba(96,29,164, 1);
   }
   70% {
       -moz-box-shadow: 0 0 0 10px rgba(96,29,164, 0);
       box-shadow: 0 0 0 10px rgba(96,29,164, 0);
   }
   100% {
       -moz-box-shadow: 0 0 0 0 rgba(96,29,164, 0);
       box-shadow: 0 0 0 0 rgba(96,29,164, 0);
   }
 }

@keyframes colorchange
{
  0%   {background: #000099;}
  25%  {background: purple;}
  50%  {background: orange;}
  75%  {background: purple; }
  100% {background: #000099;}
}


@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
  0%   {background: #000099;}
  25%  {background: purple;}
  50%  {background: orange;}
  75%  {background: purple; }
  100% {background: #000099;}
}

@media (min-width: 1001px) {
  #betterhints.bottom .betterhint { width: 44%;  }
}

@media (max-width: 1000px) {
  #betterhints.bottom .betterhint { width: 80%;  }
}

@media (max-width: 700px) {
  #betterhints { padding: 0; }
  #betterhints.bottom .betterhint { width: 100%;  }
}