/* Floating animation */
@keyframes floatY{
  0%{transform:translateY(-14px)}
  50%{transform:translateY(14px)}
  100%{transform:translateY(-14px)}
}

@keyframes floatLogo {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes floatLogoSp {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

@keyframes floatitem{
    0% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}



@keyframes balance {

  0% { transform: rotate(-30deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(30deg); }
}

@keyframes rbalance {

  0% { transform: rotate(30deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(-30deg); }
}

@keyframes rotate {
  to{
    transform: rotate(360deg);
  }
}

.logo{
  width: 17em;
  height:auto;

}

.flogo{
  animation: floatLogo 3s infinite ease-in-out;
  transition: 
    scale 1s ease-in-out;
}


.flogo:hover {
  scale:1.1;
}

.sflogo{
  animation: floatLogo 2.5s infinite ease-in-out;
  transition: 
    scale 1s ease-in-out;
}


.sflogo:hover {
  scale:1.1;
}

.balance{
  animation: balance 2s infinite ease-in-out;
}

.rbalance{
  animation: rbalance 2s infinite ease-in-out;
}

.rotate{
  animation: rotate 1s linear infinite;
}

.fitem{
  animation: floatitem 2s infinite ease-in-out;
}

.ofitem{
  animation: floatitem 2s infinite ease-in-out;
    transition: 
    scale 1s ease-in-out;
}

.ofitem:hover{
  scale: 1.1;
}