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

  display: none;
  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 hr{
  border-top: 1px solid #dfdfe1;  
  width: 100%;
  margin-top:60px;
}


#exercise #finalBoard .squareBox{
  background-color: #f3f4f5;  
  border: 1px solid white; #D2D3D5;  
  border-radius:5px;  
  width: 180px;  
  padding:5px;
  margin-right: 7px;
  display:inline-block;
  text-align: center;
  vertical-align: top;
}

#exercise #finalBoard .squareBox:hover{ 
  border: 1px solid #95a5a6;
}

#exercise #finalBoard .squareBox img{
  height: 90px;
  margin:10px 0px; 
  border-radius: 10px;
  border:0px;
}

#exercise #finalBoard .squareBox p{
  margin-top:0px;
  margin-bottom: 3px;
  
}

#exercise #finalBoard .squareBox .tlacitko{  
  width: 140px;
  margin:10px 0px;
  padding: 7px 27px;
  border-radius: 6px;  
}


/* NOVY DLAZDICE SOU MALY ZE ... */
#exercise .finalFlexikBox{
  display: flex;
  justify-content: center;
  align-items: center;  
}

#exercise .finalFlexikBox img{
  margin-left:10px;  
}

#exercise .squareBoxSmall{
  background-color: #f3f4f5;  
  border: 1px solid white; #D2D3D5;  
  border-radius:5px;  
  width: 230px;  
  padding:5px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
  vertical-align: top;

  display: inline-flex;
  justify-content: space-around; 
  align-items: center;
}

#exercise .squareBoxSmall:hover{
  border: 1px solid #95a5a6;  
  text-decoration: none;
}

#exercise .squareBoxSmall img{
  height: 70px;  
  margin:5px 5px;  
  border-radius: 10px;
}

#exercise .squareBoxSmall p{
  margin:0px 5px;  
  font-weight: bold;  
}

#exercise .squareBoxSmall span{
  font-weight: normal;  
  font-size: 14px;
  color:#2c3e50;
}

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

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

/********************* 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);
  }
}