@font-face {
	font-family: 'ANDALEMO';
	src: url(../fonts/ANDALEMO.TTF) format('truetype');
}

* {
	margin: 0;
	padding: 0;
}

header {
	display: none;
}

section {
		position: fixed;
		background-color: black;
	}

p {
	font-family: ANDALEMO;
	position: fixed;
	animation: design 2s;
}
	@keyframes design {
		0%		{top: 24.2vw; left: 60.5vw; font-size: 3.5vw;}
		50%		{top: 1.2vw; left: 60.5vw; font-size: 2.8vw;}
		100%	{top: 1.2vw; left: 85vw; font-size: 2.8vw;}
	}

/* about line */
		#about {
			width: .16vw;
			animation: a 2s;
		}
			@keyframes a {
				0%		{height: 13vw; top: 37vh; left: 33vw;}
				50%	{height: 100vh; top: 0vh; left: 33vw;}
				100%	{height: 100vh; top: 0vh; left: 33vw;}
			}

/* fine arte line */
		#fine-arte {
			width: .16vw;
			animation: f 2s;
		}
			@keyframes f {
				0%		{height: 13vw; top: 37vh; left: 50vw;}
				50%		{height: 100vh; top: 0vh; left: 50vw;}
				100%	{height: 100vh; top: 0vh; left: 67vw;}
			}
/* design line */

/* hamburgersssss */
			.hamburger {
				width: 0.16vw;
				height: 5.5vh;
				top: 2.5vh;
				left: 3vw;
				z-index: 5;
				animation: hamburger 2s;
			}

				@keyframes hamburger {
						0%		{height: 0vh; top: 5.5vh;}
						75%		{height: 0vh; top: 5.5vh;}
						100%	{height: 5.5vh; top: 2.5vh;}
					}

			.back {
				width: 3.3vw;
				height: 0.3vh;
				top: 15vh;
				left: 1.5vw;
				z-index: 5;
				animation: back 2s;
			}
				@keyframes back {
					0%		{width: 0vw; left: 3.3vw;}
					75%		{width: 0vw; left: 3.3vw;}
					100%	{width: 3.3vw; left: 1.5vw;}
				}

/* NEW lines*/

	.l1 {
		height: 0.16vw;
		left: 0;
		top: 6vw;
		animation: l1 2s;
	}
		@keyframes l1 {
			0%		{width: 0vw;}
			25%		{width: 0vw;}
			60%		{width: 33vw;}
			100%	{width: 33vw;}
		}

	.l2 {
		height: 0.16vw;
		top: 6vw;
		animation: l2 2s;
		animation-timing-function: linear;
	}
		@keyframes l2 {
			0%		{width: 0vw; left: 100vw;}
			25%		{width: 0vw; left: 100vw;}
			60%		{width: 33vw; left: 67vw;}
			100%	{width: 33vw; left: 67vw;}
		}

	.l3 {
		width: 0.16vw;
		left: 6vw;
		animation: line 2s;
	}
		@keyframes line {
			0% 		{top: 50vh; height: 0vh;}
			100% 	{top: 0vh; height: 100vh;}
		}



	.sl1 {
		height: 0.16vw;
		top: 20vw;
		animation: sl 2s;
	}

	.sl2 {
		height: 0.16vw;
		top: 30vw;
		animation: sl 2s;
	}

	.sl3 {
		height: 0.16vw;
		top: 40vw;
		animation: sl 2s;
	}

	.sl4 {
		height: 0.16vw;
		top: 50vw;
		animation: sl 2s;
	}

		@keyframes sl {
			0%		{width: 0vw; left: 27.5vw;}
			75%		{width: 0vw; left: 27.5vw;}
			100%	{width: 5vw; left: 25vw;}
		}

	.d1 {
		top: 6vw;
		height: 0.16vw;
		animation: d1 2s;
		animation-timing-function: linear;
	}
		@keyframes d1 {
			0%		{width: 0vw; left: 67vw;}
			60%		{width: 0vw; left: 67vw;}
			83%		{width: 27vw; left: 40vw;}
			100%	{width: 27vw; left: 40vw;}
		}

	.d2 {
		left: 40vw;
		width: 0.16vw;
		animation: d2 2s;
		animation-timing-function: linear;
	}
		@keyframes d2 {
			0%		{height: 0vw; top: 6vw;}
			83%		{height: 0vw; top: 6vw;}
			92%		{height: 2vw; top: 4vw;}
			100%	{height: 2vw; top: 4vw;}
		}

	.d3 {
		top: 4vw;
		left: 40vw;
		height: 0.16vw;
		animation: d3 2s;
		animation-timing-function: linear;
	}
		@keyframes d3 {
			0%		{width: 0vw;}
			92%		{width: 0vw;}
			100%	{width: 2vw;}
		}

	.p1 {
		top: 10vw;
		left: 50vw;
		width: 0.16vw;
		animation: p 2s;
	}

	.p2 {
		top: 30vw;
		left: 50vw;
		width: 0.16vw;
		animation: p 2s;
	}

	.p3 {
		top: 50vw;
		left: 50vw;
		width: 0.16vw;
		animation: p 2s;
	}

		@keyframes p {
			0%		{height: 0vw;}
			75%		{height: 0vw;}
			100%	{height: 18vw;}
		}


	.thick {
		position: fixed;
		left: 1.25vw;
		width: 3.5vw;
		animation: thick 2s;
	}
		@keyframes thick {
			0%		{height: 0vw; top: 35.5vw;}
			75%		{height: 0vw; top: 35.5vw;}
			100%	{height: 1vw; top: 35vw;}
		}

	.slant {
		position: fixed;
		top: 30vw;
		height: 0.16vw;
		transform: skewY(-20deg);
		animation: slant 2s;
	}

		@keyframes slant {
			0%		{width: 0vw; left: 3vw;}
			75%		{width: 0vw; left: 3vw;}
			100%	{width: 3.5vw; left: 1.25vw;}
		}

	.color1 {
		position: fixed;
		left: 1.5vw;
		width: 0.16vw;
		animation: c1 2s;
	}
		@keyframes c1 {
			0%		{height: 0vw; top: 40vw;}
			75%		{height: 0vw; top: 40vw;}
			100%	{height: 40vw; top: 40vw;}
		}

	.color2 {
		position: fixed;
		top: 40vw;
		height: 0.16vw;
		animation: c2 2s;
	}
		@keyframes c2 {
			0%		{width: 0vw; left: 3vw;}
			75%		{width: 0vw; left: 3vw;}
			100%	{width: 3vw; left: 1.5vw;}
		}

	.color3 {
		position: fixed;
		left: 4.4vw;
		width: 0.16vw;
		animation: c3 2s;
	}
		@keyframes c3 {
			0%		{height: 0vw; top: 41.5vw;}
			75%		{height: 0vw; top: 41.5vw;}
			100%	{height: 3vw; top: 40vw;}
		}

	.color4 {
		position: fixed;
		top: 42.84vw;
		height: 0.16vw;
		animation: c4 2s;
	}
		@keyframes c4 {
			0%		{width: 0vw; left: 3.75vw;}
			75%		{width: 0vw; left: 3.75vw;}
			100%	{width: 1.5vw; left: 3vw;}
		}

	.color5 {
		position: fixed;
		left: 3vw;
		width: 0.16vw;
		animation: c5 2s;
	}

		@keyframes c5 {
			0%		{height: 0vw; top: 42.13vw;}
			75%		{height: 0vw; top: 42.13vw;}
			100%	{height: 1.42vw; top: 41.42vw;}
		}