@charset "UTF-8";
/* CSS Document */
  
/*-------------------------------------------------------------------
	animation
-------------------------------------------------------------------*/
  
.slidein_l{
  opacity: 0;
}
.slidein_l.animated {
animation: slideIn_l 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn_l {
  0% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.slidein_r{
  opacity: 0;
}
.slidein_r.animated {
animation: slideIn_r 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn_r {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
  
.slidein_b{
  opacity: 0;
}
.slidein_b.animated {
animation: slideIn_b 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn_b {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}
  
.slidein_t{
  opacity: 0;
}
.slidein_t.animated {
animation: slideIn_t 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn_t {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.slidein_f{
  opacity: 0;
}
.slidein_f.animated {
animation: slideIn_f 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn_f {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slidein_z{
  opacity: 0;
}
.slidein_z.animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.cyndno_c_b{
  opacity: 0;
}
.cyndno_c_b.animated {
animation: cyndno_c_b 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes cyndno_c_b {
  0% {
    transform:rotate(180deg) translateY(-200px);
    opacity: 0;
  }
  100% {
    transform:rotate(180deg) translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.mask-bg {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: #084e9b;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}
.mask-bg.animated {
  color: #111111;
}
.mask-bg.animated::after {
  animation: mask-bg 1.0s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg {
  0% {
    transform: translate(0, 101%);
    color: #FFFl
  
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%);
    color: #111;
  }
}

.gotanda_heading_txt{
  opacity: 0;
}
.gotanda_heading_txt.animated {
animation: gotanda_heading_txt 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes gotanda_heading_txt {
  0% {
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
  100% {
    transform: rotate(90deg) translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}