#splash{
  position:absolute; 
  top:0; 
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  margin:0;
  padding:0;
  color:white;
  background-color:black;
  font-family: Sans-Serif;
  text-align: center;
  font-size:20px;
  font-size:10vw;
  opacity: 0.8;
}
#splashdiv1 {
  font-size:50px;
  font-size:10vmin;
  padding:0;
  margin:0;
  padding-top:20vmin;

}
#splashdiv2 {
  font-size:25px;
  font-size:4vmin;
  padding:0;
  margin:0;
  padding-top:2vmin;

}
#splashdiv3 {
  font-size:15px;
  font-size:3vmin;
  margin:0;
  padding:0;
  padding-top:10vmin;
}
#splashdiv4 {
  font-size:10px;
  font-size:2vmin;
  margin:0;
  padding:0;
  padding-top:15vmin;

 }
.UIcontainer{
  z-index:2; 
  width:200px;
  display:inline-block; 
  position:absolute;
  top:10px;
  left:10px;
  border-color:#505050;
  border-style:solid;
  border-width: 2px 2px 2px 2px;
  text-decoration: none;
  color: white;
  text-align: center;
  font-size:15px;
  font-family: Sans-Serif;
  padding:5px;
  padding-top:0px;
}

.UItopbar{
  display:block;
  margin:0;
  padding:0;
  background-color:#d3d3d3;
  height: 10px;
  width: 210px;
  margin-left:-5px;
  opacity: 0.8;
  transition: opacity: 0.15s;

}
.UItopbar:hover {
	opacity: 1;
}



.playPause{
  position:absolute;
  border:none;
  border-radius:25%;
  width:50px;
  height:50px;
  left:80px;
  top:105px;
  opacity: 0.2;
  transition: opacity: 0.15s;
  font-size:20px;
  padding:0;
  margin:0;
  line-height:0;

}
.playPause:hover {
  opacity: 0.9;
}

.chooseSys{
  position:absolute;
  border:none;
  border-radius:15%;
  width:30px;
  height:20px;
  left:170px;
  top:237px;
  opacity: 0.2;
  transition: opacity: 0.15s;
  font-size:25px;
  padding:0;
  margin:0;
  line-height:0;
}
.chooseSys:hover {
  opacity: 0.9;
}
.showButton{
  display:block;
  z-index:2;
  height:30px;
  width:200px;
  font-size:15px;
}
.hideButton{
  display:none;
}
#fullScreenButton {
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border: none;
  background-color: #4E2A84;
  color: white;
  text-align: center;
  margin:0;
  margin-left:0px;
  margin-right:0px;
  opacity: 0.8;
  transition: opacity: 0.15s;
}
#fullScreenButton:hover {
	opacity: 1;
}
#fullScreenButton:active {
  background-color: #4E2A84;
}
#fullScreenButton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: right 0.5s;
}
#fullScreenButton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: right 0.5s;
}
#fullScreenButton:hover span {
  padding-right: 25px;
}
#fullScreenButton:hover span:after {
  opacity: 1;
  right: 0;
}


.UIDiv {
  z-index:0;
  background-color: #4E2A84;
  padding:5px;
  margin:5px;
  margin-left:0px;
  margin-right:0px;
  height:40px;
  opacity: 0.8;
  transition: opacity .15s;

}
.UIDiv:hover {
  opacity: 1;
}

.sliderText {
  text-align: center;
  font-size: 15px;
  color: white;
}

.slider {
  background-color: #4E2A84;
  width: 170px;
  height: 15px;
  outline:none;
  cursor: pointer;
  margin:0px;
  margin-top:5px;

}
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 15px;
  border-radius: 35%; 
}
.slider::-moz-range-thumb {
  width: 10px;
  height: 15px;
  border-radius: 35%;
}

.timeText{
  font-size: 20px;
  padding:10px;
}
.timeDiv{
  height: 175px;
  width:200px;
}

.sysText {
  text-align: center;
  font-size: 12px;
  color: lightgray;
  margin-top:5px;
}

.creditText {
  z-index:2; 
  text-decoration: none;
  color: white;
  text-align: center;
  font-size:15px;
  font-family: Sans-Serif;
  height:20px;
  margin-top:10px;
  margin-bottom:-30px;
}