@charset "utf-8";
/* CSS Document */
/*@import url('https://fonts.googleapis.com/css?family=Exo:400,700');*/

/*.animabox {
	width: 100%;
	position: absolute;
	top: 50vh;
}*/
.animabox {
	/*  background: #4e54c8;  */
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	position: absolute;
	margin-top: 80px;
	/*	overflow: hidden;*/
/*	overflow-x: hidden*/
}
.aniname {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*	overflow: hidden;*/
	background: url("../../images/25.svg") 40vw 12vw no-repeat;
	background-size: 38vw auto;
	overflow-x: hidden;
}
.aniportfolio {
	position: absolute;
	margin-top: 600px;
	top: 34vw;
	left: 0;
	width: 100%;
	height: 100%;
	animation: scrollimg 1000ms ease-out;
	animation-delay: 1300ms;
	animation-fill-mode: forwards;
}
.aniname li {
	position: absolute;
	font-size: 10vw;
	font-weight: 400;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	animation: lettersfly 100ms ease-out;
	left: 1.5vw;
	opacity: 0;
	color: #001832 !important;
}
.aniname li:nth-child(1) {
	animation-delay: 100ms;
	padding-left: 0;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(2) {
	animation-delay: 1100ms;
	padding-left: 6vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(3) {
	animation-delay: 200ms;
	padding-left: 12vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(4) {
	animation-delay: 1300ms;
	padding-left: 18.5vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(5) {
	animation-delay: 900ms;
	padding-left: 23.5vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(6) {
	animation-delay: 1200ms;
	padding-left: 30vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(7) {
	animation-delay: 1300ms;
	padding-left: 36vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(8) {
	animation-delay: 1150ms;
	padding-left: 38.6vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(9) {
	animation-delay: 200ms;
	padding-left: 44.7vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(10) {
	animation-delay: 780ms;
	top: 10vw;
	padding-left: 0px;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(11) {
	animation-delay: 980ms;
	top: 10vw;
	padding-left: 6.4vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(12) {
	animation-delay: 1040ms;
	top: 10vw;
	padding-left: 12.3vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(13) {
	animation-delay: 300ms;
	top: 10vw;
	padding-left: 18.4vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(14) {
	animation-delay: 1180ms;
	top: 10vw;
	padding-left: 21vw;
	animation-fill-mode: forwards;
}
.aniname li:nth-child(15) {
	animation-delay: 1010ms;
	top: 10vw;
	padding-left: 27.9vw;
	animation-fill-mode: forwards;
}
@media screen and (max-width: 990px) {
	.aniname li {
    left: 1rem;
	}
}
@media screen and (max-width: 768px) {
    .aniportfolio {
    top: 30vw;
  }
}
@keyframes lettersfly {
 0% {
 transform: translateX(30vw);
/* color: hsla(0,0%,100%,1.00);*/
   color: rgba(0,0,0,0.8);
 opacity: 0;
}
/* 99% {
 transform: translateX(0);
	    color: rgba(148,217,245,0.80);
 opacity: 1;
}*/
100% {
 transform: translateX(0);
/* color: rgba(0,128,201,0.8);*/
 color: rgba(0,10,15,0.90);
 opacity: 1;
}
}
 @keyframes scrollimg {
 0% {
 transform: translateY(-400px);
}
 100% {
 transform: translateY(-550px);
}
}