@charset "UTF-8";

.spiral_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;


  position: relative;
}

canvas {
  margin: auto;
  width:  100% !important;
  opacity: .6;
}

.logo_wrap{ width:169px; height:95px; position:relative; margin:0 auto;
text-align:center;}
.logo_opacity{ width:100%; height:95px; background:none}
.logo_part{top:0;height: 95px;}

.logo_part.w{z-index:2; background:none; position:relative; margin:0 auto; display:inline-block; 
	border-radius:1000px;
	-webkit-border-radius:1000px;}
.logo_part.d{right:0; position:absolute;}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  backface-visibility: hidden;    
  -webkit-filter: blur(0);
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes rollInLeft {
  from {
    opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-39%, 0, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(-39%, 0, 0) rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes rollInLeft {
  from {
    opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 120deg);
  }

  to {
    opacity: 1;
	background:none;
    -webkit-transform: translate3d(-39%, 0, 0) rotate3d(0, 0, 1, 0deg);
    transform: translate3d(-39%, 0, 0) rotate3d(0, 0, 1, 0deg);
  }
}

.rollInLeft {
  -webkit-animation-name: rollInLeft;
  animation-name: rollInLeft;
}

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-50%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.logo_part.w, .logo_part.w img,
.logo_part.d {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.show1 {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.show2 {
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}

.show3 {
  -webkit-animation-delay: .8s;
  animation-delay: .8s;
}

.hide {opacity:0}