/********************* FINAL BOARD ********************/
#exercise #finalBoard{

  text-align: center;
  max-width:600px;
  border: 1px solid #dfdfe1;  
  border-radius:2px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;  
  margin-bottom: 60px;
  padding: 30px 20px;  
  background-color: white;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.1);
  
}

#exercise #finalBoard .hero-image img {
  max-width: 100%;
  width: 250px;
}

#exercise #finalBoard .recommendations {
  text-align: left;
  min-height: 15px;
}

#exercise #finalBoard hr{
  border-top: 1px solid #dfdfe1;  
  width: 100%;
  margin-top:60px;
}

#finalBoard img.hero {
  max-width: 100%;
  width: 250px;
}

.shield-inline {
  height: 1.5em;
  vertical-align: bottom;
}

/* reccomendations divider */
.recommendations:empty + .divider {display: none !important;}

/********************* ANIMACE ********************/
.fb-anim-pulse {
  animation: pulse 1.25s ease-in-out;
}

@keyframes fb-pulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.fb-anim-fall-fade-bounce {
  animation: fb-fall-fade-bounce 1.5s ease-out;
}

@keyframes fb-fall-fade-bounce {
  0% {
    opacity: 0;
    transform: translateY(-35px);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  55% { transform: translateY(-15px);}
  70% { transform: translateY(0); }
  85% { transform: translateY(-5px);}
  100% { transform: translateY(0); }
}

.fb-anim-subtle-rotate {
  animation: fb-subtle-rotate 1.25s ease-out;
  transform-origin: center bottom;
}

@keyframes fb-subtle-rotate {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.fb-anim-quick-fade-bounce {
  animation: fb-quick-fade-bounce 1.5s ease-out;
}

@keyframes fb-quick-fade-bounce {
  0% {
    opacity: 0; transform: translateX(-25px);
  }
  20% {
    opacity: 0.5; transform: translateX(20px) rotate(-2deg);
  }
  40% {
    opacity: 1; transform: translateX(-15px) rotate(1.5deg);
  }
  60% {
    opacity: 1; transform: translateX(10px) rotate(-1deg);
  }
  80% {
    opacity: 1; transform: translateX(-5px) rotate(0.5deg);
  }
  100% {
    opacity: 1; transform: translateX(0);
  }
}

:root {
  --hero-image-animation-classes: fb-anim-pulse fb-anim-fall-fade-bounce fb-anim-subtle-rotate fb-anim-quick-fade-bounce;
}