@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
body{
	background-color: #333333;
	font-family: 'Lato', sans-serif;
	font-size: 1.3em;
	margin: 15px auto;
	padding: 20px;
	text-align: center;
	min-height: 50vh;
	color:#EEE;
}
h2 {display:block; color: #EEE; margin:0px; font-size: 2em; margin-bottom:30px; letter-spacing: .06em;}
h1 {display:block; color: #EEE; margin:0px; font-size: 2.6em; margin-bottom:30px; padding:0 0 20px 0; border-bottom:1px solid #EEE;letter-spacing: .4em;}
#controls {width:90%; max-width: 1024px; padding: 20px; margin: auto; border: 1px #eee solid; border-radius: 10px; }
#logo {width:90%; max-width: 1024px; padding: 20px; margin: 40px auto;}
svg {color: #eee;}

/*progress{
	width: 80%;
	margin: 10px;
	opacity: 0.5;
}*/

.volumen{
	width: 460px;
	margin:auto;
	/*position: relative;
	text-align:center;*/
	color: #6c5ce7;
	margin-bottom:20px;
	/*border:solid #FFF 1px;*/
}

#botoplay {width:100%; text-align:center; margin: 40px auto;}
#currentPlay{
	color: #6c5ce7;
}

.inputDiv {
  width: 460px;
  margin: 60px auto;
  position: relative;
}

input[type='range'] {
  display: block;
  width: 360px;
  margin:auto;
}

input[type='range']:focus {
  outline: none;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  background-color: #EEE;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
  border-radius: 50%;
  margin-top: -9px;
}

input[type=range]::-moz-range-thumb {
  background-color: #EEE;
  width: 15px;
  height: 15px;
  border: 3px solid #333;
  border-radius: 50%;
}

input[type=range]::-ms-thumb {
  background-color: #EEE;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
  border-radius: 50%;
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: #EEE;
  height: 3px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
}

input[type=range]::-moz-range-track {
  background-color: #EEE;
  height: 3px;
}

input[type=range]::-ms-track {
  background-color: #EEE;
  height: 3px;
}

input[type=range]::-ms-fill-lower {
  background-color: HotPink
}

input[type=range]::-ms-fill-upper {
  background-color: black;
} 


.tornar {background-color:#FFFFFF; padding: 30px 40px; font-size:40px; text-decoration:none; margin-top:40px; }
.tornar a {text-decoration:none;color:#232323;}
.tornar:hover {background-color:#ff9933;}

/* altaveus */
.fa-volume-down {float:left; margin-top:-10px;}
.fa-volume-up {float:right; margin-top:-10px;}