html, body{
	overflow: hidden;
}

header {
	background: black;
	position: fixed;
	top: 0;
	left: 0;
	right:0;
	z-index: 9;
}

#innerHeader2{
	display: flex; 
   justify-content: center; 
}

#innerHeader{
	width: 40vw;
	height: 13vw;
	margin: auto;
	background: linear-gradient(to right, #8e2784 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%);
	animation-name: color-change;
	animation-duration: 22s;
	animation-iteration-count: infinite;
	
	
}

@keyframes color-change{

	0% { background: linear-gradient(to right, #8e2784 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%);}
	
	9% { background: linear-gradient(to right, #bf2653 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%);}

	18% {background: linear-gradient(to right, #bf2653 20%, #0b6132 20%, #0b6132 40%, #8e2784 40%, #8e2784 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }
	
	27% {background: linear-gradient(to right, #bf2653 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }
	
	36% {background: linear-gradient(to right, #bf2653 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #293f76 60%, #293f76 80%, #0b6132 80%, #0b6132 100%); }
	
	45% { background: linear-gradient(to right, #bf2653 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #d29d2a 60%, #d29d2a 80%, #0b6132 80%, #0b6132 100%);}
	
	54% {background: linear-gradient(to right, #293f76 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #d29d2a 60%, #d29d2a 80%, #0b6132 80%, #0b6132 100%); }
	
	63% {background: linear-gradient(to right, #293f76 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #d29d2a 60%, #d29d2a 80%, #bf2653 80%, #bf2653 100%); }
	
	72% {background: linear-gradient(to right, #293f76 20%, #0b6132 20%, #0b6132 40%, #8e2784 40%, #8e2784 60%, #d29d2a 60%, #d29d2a 80%, #bf2653 80%, #bf2653 100%); }
	
	81% {background: linear-gradient(to right, #293f76 20%, #0b6132 20%, #0b6132 40%, #8e2784 40%, #8e2784 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }
	
	90% {background: linear-gradient(to right, #293f76 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }

	100% { background: linear-gradient(to right, #8e2784 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%);}
}

/*#innerHeader{
	width: 40vw;
	height: 13vw;
	margin: auto;
	background: linear-gradient(to right, #8e2784 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%);
	animation-name: color-change;
	animation-duration: 22s;
	animation-iteration-count: infinite;
	
	
}

@keyframes color-change{

	0% { background: linear-gradient(to right, #8e2784 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%);}
	
	9% { background: linear-gradient(to right, #bf2653 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%);}

	18% {background: linear-gradient(to right, #bf2653 20%, #0b6132 20%, #0b6132 40%, #8e2784 40%, #8e2784 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }
	
	27% {background: linear-gradient(to right, #bf2653 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }
	
	36% {background: linear-gradient(to right, #bf2653 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #293f76 60%, #293f76 80%, #0b6132 80%, #0b6132 100%); }
	
	45% { background: linear-gradient(to right, #bf2653 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #d29d2a 60%, #d29d2a 80%, #0b6132 80%, #0b6132 100%);}
	
	54% {background: linear-gradient(to right, #293f76 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #d29d2a 60%, #d29d2a 80%, #0b6132 80%, #0b6132 100%); }
	
	63% {background: linear-gradient(to right, #293f76 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #d29d2a 60%, #d29d2a 80%, #bf2653 80%, #bf2653 100%); }
	
	72% {background: linear-gradient(to right, #293f76 20%, #0b6132 20%, #0b6132 40%, #8e2784 40%, #8e2784 60%, #d29d2a 60%, #d29d2a 80%, #bf2653 80%, #bf2653 100%); }
	
	81% {background: linear-gradient(to right, #293f76 20%, #0b6132 20%, #0b6132 40%, #8e2784 40%, #8e2784 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }
	
	90% {background: linear-gradient(to right, #293f76 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }

	100% { background: linear-gradient(to right, #8e2784 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%);}
}*/

/*@keyframes color-change{

	0% { background: linear-gradient(to right, #8e2784 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }

	20% { background: linear-gradient(to right, #d29d2a 20%, #293f76 20%, #293f76 40%, #bf2653 40%, #bf2653 60%, #8e2784 60%, #8e2784 80%, #0b6132 80%, #0b6132 100%); }

	40% { background: linear-gradient(to right, #0b6132 20%, #8e2784 20%, #8e2784 40%, #293f76 40%, #293f76 60%, #d29d2a 60%, #d29d2a 80%, #bf2653 80%, #bf2653 100%); }

	60% { background: linear-gradient(to right, #293f76 20%, #bf2653 20%, #bf2653 40%, #0b6132 40%, #0b6132 60%, #d29d2a 60%, #d29d2a 80%, #8e2784 80%, #8e2784 100%); }

	80% { background: linear-gradient(to right, #bf2653 20%, #d29d2a 20%, #d29d2a 40%, #8e2784 40%, #8e2784 60%, #0b6132 60%, #0b6132 80%, #293f76 80%, #293f76 100%); }

	100% { background: linear-gradient(to right, #8e2784 20%, #0b6132 20%, #0b6132 40%, #d29d2a 40%, #d29d2a 60%, #293f76 60%, #293f76 80%, #bf2653 80%, #bf2653 100%); }
}


#innerHeader img{
	width: 40vw;
	height: auto;
	opacity: .25;
	position: absolute;
	display: none;
}*/

#animatedLogo{
	width: 40vw;
	height: 13vw;
	position: absolute;
	top: 0;
	left: 50%;
   	margin-left: -20vw;
	animation: letter-change 22s steps(1);
	animation-iteration-count: infinite;
	background-image: url("../img/uagc-logo.png");
	background-size: contain;
	background-repeat: no-repeat;
}

@keyframes letter-change{

	0% { background-image: url("../img/uagc-logo.png");}
	
	9% { background-image: url("../img/v1.png");}

	18% {background-image: url("../img/v2.png"); }
	
	27% {background-image: url("../img/v3.png"); }
	
	36% {background-image: url("../img/v4.png"); }
	
	45% { background-image: url("../img/v5.png");}
	
	54% {background-image: url("../img/v6.png"); }
	
	63% {background-image: url("../img/v7.png"); }
	
	72% {background-image: url("../img/v8.png"); }
	
	81% {background-image: url("../img/v9.png"); }
	
	90% {background-image: url("../img/v10.png"); }

	100% { background-image: url("../img/uagc-logo.png");}
}

#subHeader{
	position: absolute;
	top: 14vw;
	font-size: 1.25em;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	font-family: sans-serif;
	font-weight: bolder;
	color: rgba(0,0,0,.1);
	z-index: 8;
}

#content{
  /*background: repeating-radial-gradient(
  circle,
  rgba(146,146,146,.50),
  rgba(146,146,146,.5) 10px,
  white 10px, 
  white 20px);*/
	
  background: repeating-linear-gradient(
  to right,
  rgba(0,0,0,.5),
  rgba(0,0,0,.5) .1%,
  white .1%,
  white 3%
);
	
	display: flex; 
    align-items: center; 
 	justify-content: center; 
	position: fixed;
	top:0;
	bottom:0;
	left: 0;
	right:0;
	
}

#contentBlock{
	background: black;
	width: 60%;
	max-width: 800px;
	padding: 100px;
 	text-align: center; 
	overflow:hidden;
	outline: 1px solid white;
    outline-offset: -12px;
	z-index: 7;
	
}

#contentBlock a{
	color: white;
	font-size: 1.25em;
	text-decoration: none;
	font-family: sans-serif;
	
}

#contentBlock a:hover, #contentBlock a:active{
	color: #BF2652;
	filter: blur(2px);
}


footer {
	width: 100%;
	position: fixed;
	bottom: -5px;
	padding: 0;
	margin: 0;
	z-index: 99;
}

footer img{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}



.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
pointer-events:none;
}

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 51.1%;
  background: rgba(255, 255, 255, 0);
  overflow: hidden;
}
.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 10vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111 75%, #111 100%);
  -webkit-animation: drop 9s 0s infinite;
          animation: drop 9s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line:nth-child(1) {
  margin-left: -53.25%;
}
.line:nth-child(1)::after {
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
}
.line:nth-child(2) {
  margin-left: 36.7%;
}
.line:nth-child(2)::after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.line:nth-child(3) {
  margin-left: 23.30%;
}
.line:nth-child(3)::after {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.line:nth-child(4) {
  margin-left: -23.30%;
}
.line:nth-child(4)::after {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
.line:nth-child(5) {
  margin-left: 43.30%;
}
.line:nth-child(5)::after {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.line:nth-child(6) {
  margin-left: -36.70%;
}
.line:nth-child(6)::after {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.line:nth-child(7) {
  margin-left: 13.30%;
}
.line:nth-child(7)::after {
  -webkit-animation-delay: 4.1s;
          animation-delay: 4.1s;
}
.line:nth-child(8) {
  margin-left: -13.30%;
}
.line:nth-child(8)::after {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.line:nth-child(7) {
  margin-left: -23.45%;
}
.line:nth-child(7)::after {
  -webkit-animation-delay: 4.1s;
          animation-delay: 4.1s;
}
.line:nth-child(8) {
  margin-left: 33.30%;
}
.line:nth-child(8)::after {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}


@-webkit-keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

@keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}