@font-face {
	font-family:"Printvetica";
	src: url('fonts/Printvetica.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

div{
	font-family: "Printvetica" sans-serif ;
}

*{
	font-family: "Printvetica" sans-serif ;
	color: white;
	font-weight: book;
	font-size:8pt;
	background-color: ;
}
.logo{
	margin:10px;
}


.aboutpage{
	font-size:12pt;
	line-height: 2.5;
	color: darkslategrey;
	float:left;
	position:absolute;
	background-color: antiquewhite;
	width:40vw;
	height:100vh;
	margin-top:-0.9vh;
	margin-left:-40.5vw;
	z-index: 10;
}

.putexpoin{
	transform: translateX(+40vw);
	transition: transform 2s
}

button hover{
	cursor: pointer;
}

button click{
	background-color: revert;
}


.lpboard{
	float:left;
	width: 85vw;
	height:94vh;
	margin-top:3vh;
	margin-left:1vw;
	background-color:#3e0692;
	box-shadow: #8fd460 75pt 40pt 90pt 70pt;
}

.turntable{
	float: left;
	background-color:#8fd460;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:7vh;
	margin-left:8vw;
}


.turntablecenter{
	float: left;
	background-color:grey;
	width:10px;
	height:10px;
	margin-top:46.7vh;
	margin-left:30.9vw;
	border-radius:50%;
	position:absolute;
	outline: solid black 1pt;
	z-index: 0;
}

.turntoggle{
	float: left;
	background-color: #ffcc33;
	position:absolute;
	width:90px;
	height:90px;
	margin-top:7vh;
	margin-left:5vw;
	border-radius: 50%;
	outline: solid brown 0.5pt;
}

.volumetoggle{
	float: left;
	background-color: #ffcc33;
	position:absolute;
	width:120px;
	height:120px;
	margin-top:76vh;
	margin-left:3.5vw;
	border-radius: 50%;
	outline: solid brown 0.5pt;
}

.band{
	position:sticky;
}
.band1{
	float:left;
	postion:fixed;
	background-color: white;
	width:7px;
	height:350px;
	transform: rotate(-8deg);
	margin-top:11vh;
	margin-left:7vw;
}

.band2{
	float:left;
	position:fixed;
	background-color: white;
	width:7px;
	height:375px;
	transform: rotate(89deg);
	margin-top:-13vh;
	margin-left:20vw;
}

.handleanchorbig{
	float:left;
	background-color: #ffcc33;
	position:fixed;
	width:100px;
	height:100px;
	border-radius: 50%;
	margin-top:18vh;
	margin-left:59.8vw;
	box-shadow: 2pt 2pt 2pt #a7fc65;
}

.handleanchorsmall{
	float:left;
	background-color: #8fd460;
	position:fixed;
	width:50px;
	height:50px;
	border-radius: 50%;
	margin-top:20.8vh;
	margin-left:61.5vw;
	box-shadow: 2pt 2pt 2pt #a7fc65;
}

.handlerest{
	float:left;
	background-color: black;
	position:absolute;
	width:40px;
	height:60px;
	margin-top:45vh;
	margin-left:61.9vw;
}

.handle{
	float:left;
	position:absolute;
	margin-top:1vh;
	margin-left:53.6vw;
	width:auto;
	height:20vh;
	background-color:transparent;
}
.handle hover{
		transform:rotate(20deg);
}

.mixingboard{
	float:left;
	position:absolute;
	background-color: #58595b;
	margin-top:48vh;
	margin-left:72vw;
	width:4vw;
	height:40vh;
}

.mixingboard2{
	float:left;
	position:absolute;
	background-color: #58595b;
	margin-top:1vh;
	margin-left:0.5vw;
	width:3vw;
	height:38vh;
	outline: solid black 1pt;
}

.mixingboard3{
	float:left;
	position:absolute;
	background-color: black;
	margin-top:1vh;
	margin-left:1.5vw;
	width:1vw;
	height:38vh;
	outline: solid black 1pt;
}

.mixingtoggle{
	float:left;
	position:absolute;
	background-color: #bcbec0;
	margin-top:75vh;
	margin-left:71.78vw;
	width:4.5vw;
	height:4vh;
	outline: solid black 1pt;
	cursor:pointer;

}

.mixingtogglemid{
	float:left;
	position:absolute;
	background-color: black;
	margin-top:1.5vh;
	margin-left:0vw;
	width:4.5vw;
	height:1vh;
	outline: solid black 1pt;
}

.about{
	float: left;
	position:absolute;
	background-color: #e05f5f;
	border-radius: 10%;
	width:6vw;
	height:5vh;
	margin-left:69vw;
	margin-top:2.5vh;
	font-family: "Printvetica" sans-serif ;
	border:none;
	text-decoration: none;
}

.lpchoice-code{
	position: absolute;
	margin-left:86.5vw;
	margin-top:3vh;
	width:12vw;
	height:56.5vh;
	overflow:hidden;
	z-index: 1;
	background-color: #3e0692;
	border-radius: 5px;
}

.lp1{
	position: absolute;
	background-color: #4682b6;
	width: 11vw;
	height: 6vh;
	margin-top:1vh;
	margin-left:0.5vw;
	overflow:hidden;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track1{
	float: left;
	background-color:#4682b6;;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}


.lp2{
	float: left;
	position: absolute;
	background-color: #2661a7;
	width: 11vw;
	height: 6vh;
	margin-top:7.5vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}	

.track2{
	float: left;
	background-color:#2661a7;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}


.lp3{
	float: left;
	position: absolute;
	background-color: #da3837;
	width: 11vw;
	height: 6vh;
	margin-top:14vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track3{
	float: left;
	background-color:#da3837;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.lp4{
	float: left;
	position: absolute;
	background-color: #fad455;
	width: 11vw;
	height: 6vh;
	margin-top:22vh;
	margin-left:0.5vw;
	color:white;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track4{
	float: left;
	background-color:#fad455;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}


.lp5{
	float: left;
	position: absolute;
	background-color: #231f20;
	width: 11vw;
	height: 6vh;
	margin-top:28.5vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track5{
	float: left;
	background-color:#231f20;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;

}

.lp6{
	float: left;
	position: absolute;
	background-color: #da3832;
	width: 11vw;
	height: 6vh;
	margin-top:35vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track6{
	float: left;
	background-color:#da3832;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.lp7{
	float: left;
	position: absolute;
	background-color: #575759;
	width: 11vw;
	height: 6vh;
	margin-top:43vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track7{
	float: left;
	background-color:#575759;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.lp8{
	float: left;
	position: absolute;
	background-color: #ea9840;
	width: 11vw;
	height: 6vh;
	margin-top:49.5vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track8{
	float: left;
	background-color:#ea9840;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.lpchoice-portfolio{
	position: absolute;
	margin-left:86.5vw;
	margin-top:60vh;
	width:12vw;
	height:37vh;
	z-index: 1;
	background-color: #3e0692;
	border-radius: 5px;
}


.lp9{
	float: left;
	position: absolute;
	background-color: #697d54;
	width: 11vw;
	height: 5.5vh;
	margin-top:.5vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track9{
	float: left;
	background-color:#697d54;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.lp10{
	float: left;
	position: absolute;
	background-color: #e06737;
	width: 11vw;
	height: 5.5vh;
	margin-top:6.5vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track10{
	float: left;
	background-color:#e06737;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.lp11{
	float: left;
	position: absolute;
	background-color: #bcbec0;
	width: 11vw;
	height: 5.5vh;
	margin-top:12.5vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track11{
	float: left;
	background-color:#bcbec0;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}


.lp12{
	float: left;
	position: absolute;
	background-color: #dff0f6;
	width: 11vw;
	height: 5.5vh;
	margin-top:18.5vh;
	margin-left:0.5vw;
	color: darkslategrey;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track12{
	float: left;
	background-color:#dff0f6;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.lp13{
	float: left;
	position: absolute;
	background-color: #65b8ab;
	width: 11vw;
	height: 5.5vh;
	margin-top:24.5vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track13{
	float: left;
	background-color:#65b8ab;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.lp14{
	float: left;
	position: absolute;
	background-color: #cd5b9b;
	width: 11vw;
	height: 5.5vh;
	margin-top:30.5vh;
	margin-left:0.5vw;
	border:none;
	text-decoration: none;
	cursor:pointer;
    border-radius: 10px;
	font-family: "Printvetica" sans-serif ;
	text-align: center;
	font-weight: book;
}

.track14{
	float: left;
	background-color:#cd5b9b;
	width:700px;
	height:700px;
	border-radius:50%;
	position:absolute;
	outline: solid black 2pt;
	margin-top:-90vh;
	margin-left:-77vw;
	transition: transform 2s;
	z-index: 1;
	box-shadow:  5px 5px 5px dimgrey;;
}

.trackboard{
	position: absolute;
	margin-left:86vw;
	margin-top:3vh;
	width:1vw;
	height:94vh;
	overflow:hidden;
	background-color: red;

}

@keyframes puttrackin {
	100%{
		transform: translatey(100vh);
	}
}

@keyframes puttrackrotate {
	0%{
		transform: rotate(0deg);
	}

	50%{
		transform: rotate(180deg);
	}


	100%{
		transform: rotate(360deg);
	}
}


.puttrackin{
 	animation-name: puttrackrotate, puttrackin;
    animation-duration: 5s, 2s;
    animation-fill-mode: none, forwards;
}

div{
	font-family: "Printvetica" sans-serif ;
}