@charset "UTF-8";
/* CSS Document */
*{
	margin: 0px;
	padding: 0px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

}

body {	

	
}
	 

section{
	width: 12vw;
	height:100vh;
	float: left;

}
/* HERE is CSS3 ANIMATION */

@keyframes fade-in{
  0%   {opacity: 0;}
  100% {opacity: 1;}

}

  .fade-in{
  	animation-name: fade-in;
  	animation-duration: 1s;
  	animation-fill-mode: backwards;
  }

  .fade-two{
  	animation-delay: 2s;
  }

   .fade-three{
   	 animation-delay: 3s;
   }

   .fade-four{
   	 animation-delay: 4s;
   }

   .fade-five{
   	 animation-delay: 5s;
   }

   .fade-six{
   	 animation-delay: 6s;
   }

   .fade-seven{
   	 animation-delay: 7s;
   }

   .fade-eight{
   	 animation-delay: 8s;
   }



.red{
	background-color: red;
}
.orange{
	background-color: orange;
}

.yellow{
	background-color: yellow;
}

.green{
	background-color: green;
}
.blue{
	background-color: blue;
}

.cyan{
	background-color: cyan;
}
.purple{
	background-color: purple;
}
.magenta{
	background-color: magenta;
}