﻿.action{
  opacity: 0;
}

.fadein {
  -webkit-transform: translate(0, 50px);
  transform: translate(0, 50px);
  opacity: 0;
  transition: transform 1.4s, opacity 1.4s;
}
.animated.fadein {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.fade_view {
  opacity: 0;
  transition: opacity 1.0s;
}
.animated.fade_view {
  opacity: 1;
}
.loop_wrap {
    display: flex;
    width: 100vw;
    padding-top: 10px;
    padding-bottom: 10px;
	position: absolute;
	bottom: 0;
}
.loop__item {
    flex: 0 0 auto;
    font-size: 7.0rem;
	line-height: 1;
    white-space: nowrap;
    padding-right: 25px;
    padding-left: 25px;
    color: #fff;
}

.loop__item:nth-child(odd) {
    animation: loop 50s -25s linear infinite;
}
.loop__item:nth-child(even) {
    animation: loop2 50s linear infinite;
}

@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}
@keyframes MoveLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes MoveLeft2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 4);
}
.scroll-infinity__item>img {
  width: 100%;
	
}
@media screen and (max-width: 785px) {
.scroll-infinity__item {
  width: calc(100vw / 1.2);
}	
	
}
.action.animated.fadeUp{
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animated.fade_item_In01{
animation-name:fadeInAnime;
 animation-delay: 400ms;
animation-duration:.7s;
animation-fill-mode:forwards;
opacity:0;
}
.animated.fade_item_In02{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
.animated.fade_item_In03{
animation-name:fadeInAnime;
 animation-delay: 300ms;
animation-duration:.9s;
animation-fill-mode:forwards;
opacity:0;
}
.animated.fade_item_In04{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 0.7;
  }
}
.left_in_1.action{
  opacity: 1;
}
.left_in_2.action{
  opacity: 1;
}
.left_in_3.action{
  opacity: 1;
}
.left_in_1.action.animated::after{
  animation-name: left_IN_view;
  animation-fill-mode: forwards;
   animation-duration: 1s;
   transform:scaleX(0);
   transform-origin:left;
}
.left_in_2.action.animated::after{
  animation-name: left_IN_view;
  animation-fill-mode: forwards;
    animation-delay: 500ms;
     animation-duration: 1s;
   transform-origin:left;
   transform:scaleX(0);
}
.left_in_3.action.animated::after{
  animation-name: left_IN_view;
  animation-fill-mode: forwards;
   animation-duration: 1s;
   transform:scaleX(0);
   transform-origin:left;
}
@keyframes left_IN_view{
	0% {
		transform:scaleX(0);
	}
	100% {
		transform:scaleX(1);
	}
}

 
.blurTrigger{
    opacity: 0;
}
.blur.animated{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}
.blur02.animated{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-delay: 700ms;
  animation-fill-mode:forwards;
}
.blur03.animated{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-delay: 1000ms;
  animation-fill-mode:forwards;
}
@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.01);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}


.animated.fade_blok_In{
animation-name:fade_block_InAnime;
animation-duration:1s;
animation-delay: 500ms;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fade_block_InAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animated.fade_wrap_In{
animation-name:fade_wrap_InAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fade_wrap_InAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.shine.action{
  opacity: 1;
}
.animated.shine.action::after{
animation-name:shineAnime;
  animation-duration:.6s;
  animation-delay: 500ms;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes shineAnime{
	0% {
    opacity: 0;
	}
	100% {
    opacity: 1;
	}
}