@font-face {
	font-family: "MenuFont"; 
	src: url('fonts/OpenSans-Regular.ttf'), url('fonts/OpenSans-Regular.ttf');
}

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
.nav {
	z-index: 2000;
	width: 100%;
	height: 50px;
    position: fixed;
 	top: 50%;
	transform: translateY(-100%);   
    left: 0px;
}

@media only screen and (max-width: 640px) {

.nav {

visibility: hidden;

}
}

#menu {
	float: left;

   	color: rgba(150,150,150,1);
}

.nav ul {
	list-style-type: none;
	background: rgba(200,200,200,0);
    border-radius: 5px;
}

#top-menu {
   clear: both;
   display: block;
   float: left;
   padding-left: 0px;
   margin-top: 10px;
   margin-right: 20px;

}
.SideLinks {
background: rgba(200,200,200,0) !important;
animation-name: FadeIn;
animation-duration: 0.5s;  
animation-fill-mode: forwards;


	font-size: 20px;
	font-weight: normal;
	border-left: 2px solid rgba(80,80,80,1);
}

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

.nav ul li a {

	text-decoration: none;
	text-align: left;
	font-family: "MenuFont";
	font-weight: 700;
	font-size: 12px;
	color: rgba(175,175,175,0);
	display: block;
	padding-left: 5px;
	padding-top 5px;
	padding-bottom: 5px;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 3px;
	

}


/* Mouseover scroll item */

.nav ul li a:hover {
	
animation-name: FadeInHover;
animation-duration: 0.5s;  
animation-fill-mode: forwards;
	
	color: rgba(200,200,200,1);
	border-left: 0;
	border-left: 2px solid rgba(150,150,150,1);
}

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

#wrapper {
	margin-top: 1px;
	margin-bottom: 1px;
}

.container{
    padding: 0px;
}

/* Active scroll item */

.ActiveMenu {

color: rgba(100,100,100,1) !important;
border-left: 2px solid rgba(255,0,0,1) !important;
text-decoration: none;
}










.BlueStage {
  background-image: url("images/horizon.jpg");
  text-shadow: 2px 2px 5px rgba(0,0,0,1);
  height: 90%;	
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 70px;
}


@media only screen and (max-width: 640px) {
/*For mobile phones*/
.BlueStage {

padding-top: 40px;
padding-bottom: 40px;

}
}


.SlideUp {

position: relative;
animation-name: EaseUp;
animation-duration: 2s;  
animation-fill-mode: forwards;

}

@keyframes EaseUp {
  from {bottom: -50px; opacity: 0;}
  to {bottom: 0px; opacity: 1;}
}












/* END */