@font-face {
 font-family: "goom";
 src: url("../fonts/goom.ttf") format("truetype");
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: black;
    width: 100%;
    height: 4%;
    padding: 10px;
    font-size: 12px;
    color: white;
    text-align: center;
    /*border-top: 1px solid white;*/
}
footer span {
    display: inline-block;
    min-width: 230px;
    font-size: 12px;
    padding: 10px;
    
}
footer span a {
    text-decoration: none;
    color: #02b9fc;
    /*transition: all 0.2s ease-in;*/
}
footer span a:hover {
    color: #999;
}
@media (max-width: 809px) {
    footer{
       background-color: transparent; 
       position: fixed;
       bottom: 0;
    }
}

body {
	font-family: "goom";
	height: 100vh;
}
/*
#block1{
	background-color: darkblue;
}
*/

/* NEW VOLUME SLIDER*/

#block2{
	/*background: coral;*/
	height: 2.5vw;
	align-items: center;
	display: flex;
}

#player_slider {
  /*
  width: 350px;
  height: 50px;
  position: relative;
  margin: 0 auto;
  top: 80px;
  padding: 50px;
    */
  margin-right: 12vw;
  margin-left: 1vw;
  /*padding-bottom: 0.3vw;*/
  padding-bottom: 8px;
}
#new_button{
  /*
  filter: invert(100%);
  width: 4vw;
  height: 4vw;
  */
}

#volume_slider {
  position: absolute;
  /*left: 24px;*/
  margin: 0 auto;
  height: 5px;
  width: 12vw;
  background: #555;
  border-radius: 15px;
}
#volume_slider .ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: white;
  border: none;
  border-radius: 10px;
  outline: none;
}
#volume_slider .ui-slider-handle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  margin-top: -8px;
  cursor: pointer;
  outline: none;
}

/* NEW VOLUME SLIDER*/

#new_button{
	filter: invert(100%);
	width: 4vw;
	height: 4vw;
}
/* DEBUT SECTION DEFILEMENT */
.marquee-rtl {
  overflow: hidden; /* important */
  width:100%; 
  /*max-width: 30em;*/ /* A ADAPTER */
}
.marquee-rtl > div {
  display: inline-block; /* important */
  white-space: nowrap; /* important */
  animation: defilement-rtl 25s infinite linear; /* défilement */
  cursor: pointer;
  padding: 10px 2em 10px 100%;
}
.marquee-rtl:hover > div {
  animation-play-state: paused; /* met en pause le défilement */
}
@keyframes defilement-rtl {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  100% {
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
  }
}

.marquee-rtl > div {
  font-size: 1.5em;
}
/* FIN SECTION DEFILEMENT */

#connect, #disconnect{
	display: none;
}

#box{
	width: 50vw;
	white-space: nowrap;
  display: table-cell;
  margin-top: auto;
  margin-bottom: auto;
  /*margin-right: 3vw;*/
  margin-left: 1vw;
}

#metadata1_test, #metadata_test{
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 0px;
	color: black;
}
#metadata1_test{
	font-size: 4vw;
}
#metadata_test{
	font-size: 2.5vw;
}

#rectangle, #rectangle_bas{
	width: 61vw;
	margin: auto;
	display: flex;
	border: 0.4vw solid black;
	box-sizing: content-box;
}


#rectangle_bas{
	border-top: 0px;
	border-bottom: 0;
	background-color: black;
}


#interaction_new{
	display: flex;
	background-color: black;
	width: 60vw;
	height: 6vw;
	align-items: center;
	justify-content: center;
}

#new_marque{
	width: 10vw;
	height: 10vw;
	padding: 1vw;
}

#toggleImage1{
	width: 4vw;
	height: 4vw;
}

.like {
	width: 2vw;
	height: 2vw;
	cursor: pointer;
	-webkit-transition: .2s;
  transition: opacity .2s;
  margin-right: 1vw;
  margin-left: 3vw;
}

#dislike {
	margin-left: 1vw;
}

.like:hover {
  opacity: 0.7;
}

#title {
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 30pt;
	line-height: 0px;
	max-width 75%;
}

#artist {
	font-size: 20pt;
}

#toggleImage2{
	height: 2.5vw;
	width: 2.5vw;
	cursor: pointer;
	-webkit-transition: .2s;
  transition: opacity .2s;
}
#toggleImage2:hover{
	opacity: 0.8;
}
#toggleImage3{
	visibility: hidden;
	height: 30px;
}

#play_pause{
	width: 15vw;
	text-align: center;
	-webkit-transition: .2s;
  transition: opacity .2s;
}

#play_pause:hover, #select_radio:hover{
	cursor: pointer;
	opacity: 0.8;
}

#volume {
	display: flex;
	align-items: center;
}

.jp-volume-bar {
	width: 50px;
	height: 10px;
	padding: 2px 2px 1px;
	overflow: hidden;
	cursor: pointer;
	border-right: 1px solid #180920;
	padding-right: 1px
}
.jp-volume-controls{
	width: 22vw;
	display: flex;
	justify-content: center;
}
.interactions{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15vw;
}

.jp-volume-bar2 {
	width: 50px;
	height: 10px;
	padding: 2px 2px 1px;
	overflow: hidden;
	cursor: pointer;
	border-right: 1px solid #180920;
}

#slider1{
	-webkit-appearance: none;
	border-radius: 50px;
  background: white;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  cursor: pointer;
  width: 12vw;
  height: 1vw;
}

#slider1:hover {
  opacity: 0.8;
}

button {
	-webkit-appearance: none;
	border: 0; 
	background: transparent;
}
 #slider1::-webkit-slider-thumb{
 	-webkit-appearance: none;
 	height: 1.6vw;
	width: 1.6vw;
  border-radius: 50px;
  background-color: black;
  cursor: pointer;
 }

#slider1::-moz-range-thumb {
	height: 1.6vw;
	width: 1.6vw;
  border-radius: 50px;
  background-color: black;
  cursor: pointer;
}

#hidden_artist, #hidden_title, #name, #age, #artist1, #submit, #res, #hidden_like, #hidden_dislike, #n_like {
	display: none;
}

#player{
	position: absolute;
	top: 35%;
	left: 20%;
}
#goom_space{
	width: 60vw;
	margin: auto;
	border-right: 0.75vw solid black;
	border-top: 0px;
	display: flex;
	justify-content: flex-end;
	color: white;
}

#goom_rectangle{
	padding-left: 0.5vw;
	padding-bottom: 0.3vw;
	background-color: black;
	width: 4.5vw;
	display: inline;
	justify-content: center;
}

#goom_id{
	width: 3vw;
}

#by{
	font-size: 1vw;
	margin-right: 0.2vw;
	margin-left: 0.2vw;
}

#toggleImage1, #toggleImage2 {
	-webkit-filter: invert(100%);
	filter:invert(100%);
}

h3{
	text-align: center;
}
.station{
	width: 7vw;
	justify-content: center;
	display: flex;

}
#station1, #station2, #select_radio{
	width: 4vw;
	display: none;
}

#station1{
	visibility: hidden;
}

@media screen and (max-width: 810px) {
		.site-header {
  		background-color: transparent;
		}
		#interaction_new{
			background-color: transparent;
		}
		#player{
			margin-top: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 80vh;
			position: unset;
		}
    #rectangle{
    	flex-direction: column;
    }
    #rectangle, #rectangle_bas{
			width: 100vw;
			margin: 0;
			border: 0;
		}
		#rectangle_bas{
			background-color: transparent;
		}
    #new_logo{
    	text-align: center;
    	z-index: 1;
    	height: 40vh;
    	display: flex;
    	align-items: center;
  		justify-content: center;
    }
    .interactions{
    	width: 22.5vw;
    	height: 6vw;
		}
		#play_pause{
			width: 22.5vw;
		}
		.jp-volume-controls{
			width: 33vw;
		}
		#goom_space{
			width: 30vw;
		}
		#interaction_new{
			width: 100vw;
			height: 30vh;
		}
		#metadata_test, #metadata1_test{
			display: flex;
			justify-content: center;
		}
		#metadata1_test{
			font-size: 7vw;
		}
		#metadata_test{
			font-size: 4vw;
		}
		#new_marque{
			width: 50vw;
			height: 50vw;
		}
		#slider1{
		  width: 21vw;
		  height: 1.6vw;
		}
		#volume_slider{
			width: 18vw;
		}
		#slider1::-moz-range-thumb {
			height: 2.2vw;
			width: 2.2vw;
		  border-radius: 50px;
		  background-color: black;
		  cursor: pointer;
		}
		#slider1::-webkit-slider-thumb{
			-webkit-appearance: none;
 			height: 2.2vw;
			width: 2.2vw;
  		border-radius: 50px;
  		background-color: black;
  		cursor: pointer;
		}
		.like{
			width: 4.5vw;
			height: 4.5vw;
			margin-left: 0vw;
			margin-right: 0vw;
		}
		#toggleImage1{
			height: 10.5vw;
			width: 10.5vw;
		}
		#new_button{
			filter: invert(100%);
		  width: 10.5vw;
		  height: 10.5vw;
		}
		#goom_rectangle{
			padding-left: 0.2vw;
			padding-bottom: 0.1vw;
			width: 3.5vw;
			display: inline;
		}
		#goom_id{
			width: 2vw;
			height: 0.6vw;
		}
		#by{
			font-size: 0.8vw;
		}
		#metadata1_test, #metadata_test{
			background-color: transparent;
			color: white;
		}
		#box{
			width: 100%;
			margin-right: 0vw;
  		margin-left: 0vw;
  		height: 15vh;
  		display: flex;
  		flex-direction: column;
			justify-content: center;
		}
		.station{
			width: 10.5vw;
		}
		#center_logo{

		}
		#toggleImage2{
			height: 7.5vw;
			width: 7.5vw;
		}
		#station1, #station2, #select_radio{
			width: 6vw;
			display: none;
		}
		body{
			background-image: linear-gradient(180deg, #434343 0%, black 100%);
		}
}
#toggleImage2_test{
	background-color: white;
}
#toggleImage2_test:hover{
	cursor: pointer;
}
#full_page{
	background-color: red;
}
#smileys{
	display: flex;
}
#menu_select_radio{
	display: none;
}
#main_cacher{
	display: none;
}