@font-face {font-family: StepTitle; src: url('fonts/StepTitle.otf');}
@font-face {font-family: StepTitleBold; src: url('fonts/StepTitleBold.otf');}

body{
	background-attachment: fixed;
	background-size: cover;
	background-color: 000000;
}


#container{
		margin: 0 auto;
		width: 100%;
		padding: 0;
		font-family: StepTitleBold;
		font-size: 30;
		text-align: center;
		clear: left;	
		position: relative;
		color:FFFFFF
		
	}
	
#moon {
		position: relative;
		display: none
}
#cloud {
		position: absolute;
		width: 100%;
}

.wave_image { 
width: 400%;
}
  
.wave1 { 
	position: absolute;
	width: 100%;
	overflow: hidden;
    animation: GFG 7s infinite linear; 
} 
.wave2{ 
	position: absolute;
	width: 100%;
	overflow: hidden;
    animation: GFG 6.1s infinite linear; 
} 
.wave3 { 
	position: absolute;
	width: 100%;
	overflow: hidden;
    animation: GFG 5.2s infinite linear; 
} 
.wave4 { 
	position: absolute;
	width: 100%;
	overflow: hidden;
    animation: GFG 4.73s infinite linear; 
} 
.wave5 { 
	position: absolute;
	width: 100%;
	overflow: hidden;
    animation: GFG 3.9s infinite linear; 
} 

.sea{
	width: 100%;
	height: 300;
	top: 100;
	bottom: initial;
	position: relative; 
	left: 0;"
}

  
 @keyframes GFG { 
     0% { 
           transform: rotate(0deg)  
            translateY(50px) rotate(0deg); 
			opacity: 0

        } 
		50%{
			opacity: 1
		}
  
        100% { 
          transform: rotate(360deg)  
            translateY(50px) rotate(-360deg); 
			opacity: 0
          } 
 } 

#box{
		width: 100%;
		border: solid black 2pt;
		padding: 0;
		margin: 0;
		#width: -webkit-calc(100% - 4px);

	}

#top-bar{
	width: 100%;
	float: center;
}

#top-bar-center{
	text-align:center;
}


#button a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color:#black;
	text-decoration: none;
}

#content
{
	font-family: StepTitleBold;
	font-size: 30;
	text-align: center;
	clear: left;
	padding: 0px;
	font-weight: normal;
	color: white;	
}


#header h1 { 
	margin: 0; 
	font-family: StepTitle;
	font-size: 35px;
	font-weight: normal;

}

#footer
{
	font-family: StepTitle;
	text-align: center;
	padding: 20px;
	height: 1%;
	opacity:0.6;
	font-weight: normal;


}

.flex-container {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  
}

.flex-navigation {
	  display: flex;
	  flex-flow: column;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0;
	  margin: 0;
	list-style: none;
}


.flex-navigation a
{
	display: block;
	padding: 5px 10px;
	color: white;
	text-decoration: none;
	font-size: 40;
}

.flex-item {
  padding: 0px;
  width: 100%;
  margin-top: 10px;  
  color: white;
}

.flex-nav-item {
  padding: 0px;
  width: 100%;
  margin-top: 10px;
}


.index_image { 
width: 90%;
}

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }


iframe{
  padding: 1rem;
}


@media only screen and (min-width: 500px) {
		#header h1 { 
	font-size: 70px;
	}
	#top-bar a img{
		/*height: 70px;
		width: 70px;*/
	
}
}


@media only screen and (min-width: 600px) {
   .flex-navigation {
	  flex-flow: row;
	  
	}
	
	.flex-navigation a {
	  flex-flow: row;
	}

	#header h1 { 
	font-size: 80px;
	}
}

@media only screen and (min-width: 700px) {
	#header h1 { 
		font-size: 100px;
	}
	.index_image { 
		width: 60%;
	}
}

@media only screen and (min-width: 1000px) {
	#container{
		width: 1000;
	}
	
	.index_image { 
		width:600px;
	}

	.flex-item {
		width: 1000;
	}
	.flex-container-horizontal {
		flex-flow: row;
	}
	.flex-navigation a {
	  font-size: 20;
	}
	
	
	#top-bar-center{
		text-align: left;
	}
	.wave_image { 
		width: 200%;
	}
	


	
	/*.hover_img a:hover span { display:block; }*/
}
@media only screen and (min-width: 1250px) {
	#top-bar{
		position: -webkit-sticky;
		position: sticky;
		position: relative;
		top: 0;

	}

}
@media only screen and (min-width: 1600px) {

	#moon {
		right: 50;
		position: absolute;
		display: inline;
	}
	#cloud {
		position: absolute;
		width: 100%;
	}
	.wave_image { 
		width: 150%;
	}
}
  
.stepUp { font-family: StepTitle; }

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.button {
	background:#333;
	font-family: StepTitleBold;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  margin: 4px 2px;
  cursor: pointer;
}



.grow { 
transition: all .2s ease-in-out; 
}

.grow:hover { 
transform: scale(1.1); 
}

a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }