body{
	font-family: Verdana;
	font-size:16px;
	margin:0;
    padding:0;
    overflow-x:hidden;
	background-color:black;
    -webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
	background-color:black;

}

#union{display:none;}
.unionnav{display:none;}
#navactive{
	color: white;
  	text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;	
}

.navbar:hover #navactive{
	color:#aaaaaa;
	text-shadow:none;
}

 @keyframes indexp {
  from { color:black;background-color:black;} 
  to { color:aaaaaa ;background-color:#191919 }  
}


@keyframes indexshow{
	from{opacity: 0};
	to{opacity: 1};
}

@keyframes imgshow {
	from {filter:grayscale(100);}
	to {filter:grayscale(0);}
}

@keyframes show {
	from {opacity: 0.5}
	to {opacity: 1}
} 


@keyframes linkhover {
	from {color: white;}
	to {color: white;
  	text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;}
} 

@keyframes divide {
	0% {background-color:white;margin-left:50vw;width:0}
    100% {background-color:white;margin-left:0vw;width:100vw;}
} 

* {
  box-sizing: border-box;
}

.navbar {
  display: flex;
  z-index: 10000;
  position: fixed;
  top: 0px;
  width: 100%;
  height:85px;
  justify-content: space-around;
  align-items: center;
  background-color:black;
  color: #aaaaaa;
}

.divide{
  display: flex;
  z-index: 9999;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0px;
  padding-top:87px;
  width: 100%;
  height:10px;
  background-color:black;
  animation:divide 1s, ease-in-out;
  animation-fill-mode: forwards;
}

.brand-title {
  font-size: 1.5rem;
  margin: 0.8rem;
}

.navbar-links ul {
  margin: 0;
  padding-top: 0;
  display: flex;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li:hover {
  
}

.navbar-links li a {
  text-decoration: none;
  color: #aaaaaa;
  padding: 1rem;
  display: block;
}

.navbar-links li a:hover{
  animation:linkhover 1s alternate;
  animation-iteration-count: infinite;
}

.toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 21px;
}

.toggle-button .bar {
  height: 5px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}



@keyframes roll {
	0% {transform: translateX(0);}

	100% {transform: translateX(-20vw);}
}

/* SUBNAV */

.subnav {
	
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items: center;
  z-index: 9997;
  position: fixed;
  width: 100%;
  padding-top:90px;
  height:130px;
  background-color:black;
  color: #aaaaaa;

}

.leftframe{
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items: center;
  z-index: 9998;
  position: fixed;
  width: 20vw;
  padding-top:90px;
  height:130px;
  background-color:black;
  color: #aaaaaa;
}

.rightframe{
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items: center;
  z-index: 9998;
  position: fixed;
  width: 20vw;
  padding-top:90px;
  height:130px;
  background-color:black;
  color: #aaaaaa;
  right:0;
}

.subnav ul {
  margin: 0;
  padding: 0;
  display: flex;
  text-align:center;
  animation:roll 1s, linear;
  animation-fill-mode: forwards;
}

.subnav li {
  list-style: none;
}

.subnav li:hover {
  
}

.subnav li a {
  text-decoration: none;
  color: #aaaaaa;
  padding: 1rem;
  display: block;
	width:20vw;
}

.subnav li a:hover{
  animation:linkhover 1s alternate;
  animation-iteration-count: infinite;
}




a:link{
	color:#aaaaaa;
}


/* BODY */ 

main{
	background-color:black;
	animation:indexshow 2s;
}

.indexinfo{
	display:flex;
	flex-direction:column;
	background-color:#232323;
	width: 100vw;
	color: black;
	padding-top: 175px;
	text-align:center;
}



.indexinfo span {
	text-align:justify;
	background-color:#232323;
	color:#aaaaaa;
	width:100vw;
	padding-left:20vw;
	padding-right:20vw;
	padding-bottom:50px;
}



.indexinfo .more{
	color: #aaaaaa;
	text-decoration:none;
	padding-bottom:50px;
	background-color: #232323;
}


.indexinfo a:hover{
  animation:linkhover 1s alternate;
  animation-iteration-count: infinite;
}


.indexinfo img{
	width: 100vw;
	height:600px;
	filter:grayscale(100);
	animation:imgshow 2s;
	animation-delay:1s;
	animation-fill-mode: forwards;
	pointer-events: none;
	
}

/*footer*/

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #aaaaaa;
	background-color: black;
	width: 100vw;
	height: 10vh;
	margin:0;
	padding:0;
	position:relative;
}

footer a {
  text-decoration: none;
  color: #aaaaaa;
  display: block;
  margin-left:150px;
  margin-right:150px;
}

footer a:hover{
  animation:linkhover 1s alternate;
  animation-iteration-count: infinite;
}




@media (max-width: 900px) {
	
  .brand-title{position:absolute;}	
	
  .toggle-button {
	margin-top:12px;
    display: flex;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links {
    display: none;
    width: 100%;
	background-color:black;
  }

  .navbar-links ul {
	padding:10px 0px;
	width: 100%;
    flex-direction: column;
  }

  .navbar-links li {
    text-align: center;
  }

  .navbar-links li a {
    padding: 0.5rem 1rem;
  }

  .navbar-links.active {
	
	  margin-top:87px;
    display: flex;	  
  }
	.subnav {display:none;}
	.leftframe,.rightframe {display:none;}
	.indexinfo span {padding-left:10vw;padding-right:10vw;line-height:25px;}
	.indexinfo {padding-top:33px;}
	.indexinfo img{height:500px;}
	#union .indexinfo {padding-top:0;}
	#union{display:flex;}
	.unionnav{display:flex;flex-direction:row;margin-top:53px;padding-top:20px;padding-bottom:20px;margin-bottom:35px;
		width:100vw;background-color:black;color:#aaaaaa; z-index:9990;justify-content: center;color: white;
  	text-shadow:0 0 7px #fff,0 0 10px #fff,0 0 21px #fff,0 0 42px #0fa,0 0 82px #0fa,0 0 92px #0fa,0 0 102px #0fa,0 0 151px #0fa;
	
	
	}
	.unionnav2{display:flex;flex-direction:row;padding-top:20px;padding-bottom:20px;margin-bottom:39px;
		width:100vw;background-color:black;color:#aaaaaa; z-index:9990;justify-content: center;color: white;
  	text-shadow:0 0 7px #fff,0 0 10px #fff,0 0 21px #fff,0 0 42px #0fa,0 0 82px #0fa,0 0 92px #0fa,0 0 102px #0fa,0 0 151px #0fa;}	
	
	footer a{
	margin-left: 30px;
    margin-right: 30px;}
	}
}

@media (max-width: 530px){
.indexinfo img{height:200px;}
}