@charset "utf-8";


#container .bgimg.centerFix
{
	background-position: center;
	background-size: 100% auto;
	background-attachment: fixed;
	transition: none;
}

#container .bgimg.bottom2top
{
	background-position: center bottom;
	background-size: 100% auto;
}

#container .bgimg.bottom2top.on
{
	background-position: center top;
}

#container .bgimg.bottom2center
{
	background-position: center bottom;
	background-size: 100% auto;
}
#container .bgimg.bottom2center.on
{
	background-position: center center;
}

#container .bgimg.top2bottom
{
	background-position: center top;
	background-size: 100% auto;
}

#container .bgimg.top2bottom.on
{
	background-position: center bottom;
}


@keyframes parallax {
    0% {
	 transform: translateZ(-356px);
    }
    100% {
	 transform: translateZ(-360px);
    }
}


@keyframes up {
    0% {
		bottom: -400px;
		 line-height: 76%; 
   }
    50% {
		bottom: 0;
		 line-height: 76%; 
   }
    80% {
		bottom: 0;
		 line-height: 76%; 
   }
    100% {
		bottom: 0;
		 line-height: 20%; 
    }
}

@keyframes drop {
    0% {
		top: -400px;
		 line-height: 76%; 
    }
    50% {
		top: 0;
		 line-height: 76%; 
    }
   80% {
		top: 0;
		 line-height: 76%; 
    }
    100% {
		top: 0;
		 line-height: 20%; 
    }
}

@keyframes left {
    0% {
		right: -800px;
		 line-height: 76%; 
    }
    50% {
		right: 0;
		 line-height: 76%; 
    }
    80% {
		right: 0;
		 line-height: 76%; 
    }
    100% {
		right: 0;
		 line-height: 20%; 
    }
}

@keyframes right {
    0% {
		left: -800px;
		 line-height: 76%; 
    }
    50% {
		left: 0;
		 line-height: 76%; 
    }
    80% {
		left: 0;
		 line-height: 76%; 
    }
    100% {
		left: 0;
		 line-height: 20%; 
    }
}

@keyframes dense {
    0% {
		 line-height: 76%; 
    }
    50% {
		 line-height: 76%; 
    }
   80% {
		 line-height: 76%; 
    }
    100% {
		 line-height: 20%; 
    }
}

@keyframes exprosion {
  0% {
    transform: scale(0.7);
	opacity: 0;
  }
  50% {
    transform: scale(0.7);
	opacity: 0;
  }
  100% {
    transform: scale(1);
	opacity: 1;
  }
}

@keyframes disappear {
  0% {
	opacity: 1;
  }
  100% {
	opacity: 0;
  }
}

@keyframes appear {
  0% {
	opacity: 0;
	transform: scale(0);
  }
  100% {
	opacity: 1;
	transform: scale(1);
  }
}


#container.on div.headline h1 .jp{
	opacity: 0;
	transform: scale(0);
	animation-name: exprosion;
	animation-duration: 3.8s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-delay: 2.2s;
}/**/

#container.on div.headline h1 em:nth-child(1){
	top: -400px;
    animation-name: drop;
    animation-duration: 3.2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
    animation-delay: .6s;
}

#container.on div.headline h1 em:nth-child(2){
	line-height: 76%; 
    animation-name: dense;
    animation-duration: 3.2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
    animation-delay: .2s;
}

#container.on div.headline h1 em:nth-child(3){
	bottom: -400px;
    animation-name: up;
    animation-duration: 3.2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
    animation-delay: .2s;
}

#container.on div.headline h1 em i:nth-child(1){
	left: -800px;
    animation-name: right;
    animation-duration: 3.2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
    animation-delay: .2s;
}

#container.on div.headline h1 em i:nth-child(2){
	right: -1000px;
    animation-name: left;
    animation-duration: 3.2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
    animation-delay: .6s;
}

/*#container div.headline h1{
	opacity: 1;
    animation-name: disappear;
    animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
    animation-delay: 6s;
	
}

 .top.shv #frame4slider .textArea{
    animation-name: parallax;
    animation-duration: .3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
    animation-delay: .1s;
	 
 }
 */