@charset "UTF-8";
/* CSS Document */

body{
	width:100%;
	height:100%;
	background:rgba(40,40,40,1.00);
	margin: 0px;
	padding:0px;
	font-size:1.6vw;
	font-family: 'Roboto', sans-serif;
	
}

.flexcont{
		 display: flex;
  		flex-direction: column;
	}
.flexitem{
	width:100%;
}
.subheader{
	font-family: 'Roboto', sans-serif;
	letter-spacing:0.3vw;
	font-size:9vw;
	font-weight:500;
	padding:0vh 1vw 0vh 1vw;
	color:rgba(40,40,40,1.00);
	text-stroke: 1px white;
	-webkit-text-stroke: 1px white;
}
.yellowbold{
	font-weight:500;
	color: rgba(245,253,139,1.00);
	font-size:7vw;
}
.picholder{
	width:100%;
	font-size:1.5vh;
	padding:1vh 1vw;
}
#picholder{
	margin:0px;
	padding:0px;
	width:100%;
	height:90vw;
	max-height: 800px;
	background-image: url("images/soundlab.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
#content{
	position: relative;
	
	margin: 0vh 5vw;
	min-height: 100vh;
	color: whitesmoke;
	font-size: 3vh;
	font-weight:200;
	
}
* {
  box-sizing: border-box;
}

.spacer{
	height:8vh;
}
.frontholder{
	font-size:5vw;
	width:80%;
	margin: 20vh 10vw;
	color:rgba(40,40,40,1.00);
   	text-stroke: 1px white;
	-webkit-text-stroke: 1px white;
}
.frontthree{
	width:100%;
	border: 2px solid white;
	border-radius: 20px;
}
#logostrip{
	width:100%;
	height:auto;
	position: relative;
}
#footer{
	
	width:100%;
	height:10vh;
	background:white;
	text-align: center;
	padding: 1.5vh 1vw;

	box-shadow: 0 -2px 0 gray;
}


#title{
	position: relative;
	font-size:15vw;
	font-weight: 400;
	letter-spacing:0.7vw;
	line-height: 12vw;
	width:100%;
	text-align: center;
	margin-top:12vh;
   	color:rgba(31,31,31,1.00);
   	text-stroke: 1px white;
	-webkit-text-stroke: 1px white;
}

#menubutton{
	position: absolute;
	z-index: 1;
	width:8vw;
	left: 3vw;
	top: 3vw;
	cursor: pointer;
}

#overlay{
	width:0;
	height:100%;
	top:0px;
	left:0px;
	overflow-x: hidden;
	background:rgba(246,251,138,1.00);
	position: fixed;
	z-index:3;
	transition: 0.3s;
  	
}


#xbut{
	position:absolute;
	top:3vw;
	right:3vw;
	width:8vw;
	cursor: pointer;
}

a, a:link, a:active,a:visited{
	text-decoration: none;
	color:black;
	background: rgba(246,251,138,1.00);
	font-size:3vh;
}

 a.menuitem:link, a.menuitem:visited{
	text-decoration: none;
	color:black;
	font-size:7vw;
	padding: 0px 10vw 0vh 0px;
	line-height: 11vw;
	
}

a:hover{
	text-decoration: none;
	color:#494949;
	font-size:3vh;
	background-color: white;
}



a.menuitem:hover{
	text-decoration: none;
	background: white;
	color:rgba(31,31,31,1.00);
	font-size:7vw;
}

.launchbuttons{
	position: relative;
	display: flex;
	
  
  	align-items: center;   /* <---- NEW    */
 	width:96%;
	box-sizing: border-box;
	color:whitesmoke;
	font-weight:300;
	font-size:2vh;
	height:28vh;
	text-align: left;
	border: solid 3px rgba(246,251,138,1.00);
	border-radius: 2vw;
	margin:3vh 2vw;
	padding: 2%;
	cursor:pointer;
}

.buttonimg{
			background:url("images/sl-button.png");
			background-size: contain;
			background-repeat:no-repeat;
			background-position: center center;
			height:100%;
			width:70%;
			float:left;
			margin-right:5vw;
			
		}
.vertalign{
	
}

@media (orientation: landscape) {
.subheader{
	font-family: 'Roboto', sans-serif;
	letter-spacing:0.2vw;
	font-size:7vw;
	font-weight:400;
	padding:0vh 1vw 0vh 1vw;
	color:rgba(40,40,40,1.00);
   	text-stroke: 1px white;
	-webkit-text-stroke: 1px white;
	
}
		.picholder{
	width:50%;
	font-size:1.5vh;
	padding:1vh 1vw;
}
	.flexcont{
		 display: flex;
  			flex-direction: row;
	}
	.content{
		font-size:3vw;
	}
	.yellowbold{
		font-size:5vw;
	}
	
 a:link, a:visited{
	font-size:2vw;
	text-decoration: none;
	color:black;
	background: rgba(246,251,138,1.00);
	
}
a.menuitem:link,  a.menuitem:visited{
	text-decoration: none;
	line-height: 7vw;
	font-weight:400;
	color:black;
	font-size:5vw;
	margin: 5% 3%;
	padding: 0px 150px 0px 0px;
	
}

a:hover{
	text-decoration:none;
	color:black;
	background: white;
}
	

a.menuitem:hover{
	text-decoration: none;
	background: white;
	color:rgba(31,31,31,1.00);
	font-size:5vw;
	padding: 0px 150px 0px 0px;
}


	.content{
		font-size:3vw;
	}	

	#textbox{
		font-size:2vw;
		bottom:10%;
		font-weight: 200;
		
	}
#startbut{
	height:20vh;
	width:auto;
	
}
	#logostrip{
	width:auto;
	height:100%;
	position: relative;
}
#menubutton{
	position: absolute;
	z-index:1;
	width:8vh;
	left: 3vh;
	top: 3vh;
}
#xbut{
	position:absolute;
	top:3vw;
	right:3vw;
	width:6vh;
	cursor: pointer;
	display: none;
}
#title{
	font-size:15vw;
	font-weight: 400;
	letter-spacing:0.7vw;
	line-height: 12vw;
	width:100%;
	margin-top:10%;	
   	color:rgba(31,31,31,1.00);
   	text-stroke: 1px white;
	-webkit-text-stroke: 1px white;
}
#titler{
	font-size: 15vw;
    font-weight: 400;
    letter-spacing: 0.7vw;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 10%;
	z-index: 2;
    color:#000000;
    text-shadow: -1px -1px 0 white,  
      	1px -1px 0 white,
      	-1px 1px 0 white,
       	1px 1px 0 white;
}
#overlay{
	width:0;
	height:100%;
	top:0px;
	left:0px;
	background:rgba(246,251,138,1.00);
	position: fixed;
	z-index:3;
	box-sizing: border-box;
	transition: width 0.4s;
	overflow-x: hidden;
  	
}
	.spacer{
		height:18vh;
	}	
	
#sbut{
	width:auto;
	height:8vh;
	background:whitesmoke;
	border:5px solid black;
	font-family:monospace;
	font-size:3vh;
	color:black;
	border-radius: 1.2vh;
	padding: 0vh 1vw;
	margin-bottom:3vh;
}
	#sbut:hover{
		background:#FEB3FD;
	}
#footer{
	
	width:100%;
	height:14vh;
	background:white;
	text-align: center;
	padding: 1.5vh 1vw;

	box-shadow: 0 -2px 0 gray;
}
	.buttonimg{
		background-position: left center;
		height:100%;
		width:30vh;
	}
.launchbuttons{
	position: relative;
	width:96%;
	box-sizing: border-box;
	color:whitesmoke;
	font-weight:300;
	height:28vh;
	text-align: left;
	border: solid 3px rgba(246,251,138,1.00);
	border-radius: 2vw;
	margin:3vh 2vw;
	padding: 2%;
	cursor:pointer;
}
	
	
}