randio-radio/stile-mobile.css

@media screen and (max-width: 700px) {

.accordion-strip{
	right: 0;
	position: absolute;
}

.accordion-strip > a > h3{
	margin-top:0em;
}

#about{
	bottom:0 !important;
}
}


@media screen and (max-width: 999px) {

body{
	position: relative;
}

main{
	position: relative;

}

aside{
}

  nav {
		flex-wrap: wrap;
		position: relative;
		padding:2em;
  }

	#logo{
		display: flex;
		flex-wrap: wrap;
	}

	#logo > div{
	margin: auto;
	}

	#radio-player{
		display: flex;
		flex-wrap: wrap;
	}

	.accordion-strip{
		bottom: 0;
		position: absolute;
		margin-top: 5em;
	}

	.accordion-title{
		flex: 1 1 auto;
	}

	.text-wrapper{
		height: 100vh;
		padding: 0 2em;
	}
}


@media screen and (min-width: 1000px) {

	nav {
	  -moz-box-shadow:    0 0 10px #000000;
	  -webkit-box-shadow: 0 0 10px #000000;
	  box-shadow:         0 0 10px #000000;
	  flex: 1 1 100%;
		height:7em;
		display: flex;position: fixed;
		width: 100%;
		background: white;
		z-index: 20;
	}

	main{
	width: 100%;
	height: 100%;
	height: 87em;
	display: flex;
	justify-content: left;
	padding-top:7em;
	}

	#radio-player{
	position: relative;
	flex:0 1 50%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	padding: 5em 5em 5em 0;
	}



	#now-playing{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		padding: 0 4em 0 4em;
	}

	#piece-text
	{
		border: solid 1px black;
		width:100%;
	}

	#social{
		flex: 0 1 18%;
		padding-top:5em;
	}

	#connected-people{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border: solid 1px black;
		height: 13em;
		margin-bottom: 3em;
	}

	#piece-text > h3{
		padding-left: 1em;
		padding-right: 1em;
	}

	#piece-text > p{
		width: 70%;
		margin: auto;
		margin-bottom: 3em;
	}

	#about{
		height: 100vh;
		right: -60%;
		max-width: 60%;
		position: fixed;
		z-index: 33 !important;
		padding: 0 0 0 1%;
	}

	#about:hover{
	animation-name: tendina;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.17,.84,.44,1);
	column-fill:auto;
	}

	.text-wrapper{
		width: 80%;
	}

	.text
	{
		max-width: auto;
		margin: 2em auto;
		border-right: solid black 0.3em;
		padding-right: 2.5em;
		column-count: 2;
		column-fill: auto;
		width:100%;
		max-height: 30em;
	}

	.accordion-title{
		margin: 1em 0.5em 0 0.5em;
	}

	.accordion-strip{
	}

	.accordion-strip > a > h3{
		margin-top:1em;
	}
	/*
	#about:hover > .cookies{
		right: 0em;
		width: 40%;
		font-size: 0.8em;
	}
	*/

	#logo{
		margin: auto;
		flex: 1 1 auto;
	}

	#logo > div{
		margin-left: 1em;
	}

	#news
	{
		display: flex;
		margin: 0 17em 0 4em;
	}

	.cookies{
		bottom: 0;
	}

	#pd-ring{
		position: absolute;
		bottom: 2em;
		width: 100%;
	}

	#pd-ring > table{
		margin:auto;
	}

	@keyframes tendina {
	    0% {right: -60%;}
	    100% {right: 0;}
	}

	@keyframes schiacciamento {
	    0% {height: 0em;}
	    50% {height: 4em;}
	    100% {height: 0em;}
	}

	@keyframes scomparsa {
	    0% {color: transparent;}
	    20% {color: white;}
	    50% {color: white;}
	    80% {color: transparent;}
	}

	h1 {
	  background-color:#ffffff;
	  font:36px mono;
	  font-weight:bold;
	  color:#000000;
	  text-decoration:none;
	  margin-left:10%;
	  margin-right:10%;
	}

	#now-playing > h2, #now-playing > h3{
		background: none;
		border:solid 1pt black;
		flex:1 1 100%;
		padding-left:1em;
		padding-right:1em;
		margin-bottom: 0;
		margin-top: 1em;
	}

	#piece-text{
		margin-bottom: 0;
		margin-top: 1em;
	}

	a.logo:link {
	  color:#000000;
	  text-decoration:none;
	}

	a.logo:visited {
	  color:#000000;
	  text-decoration:none;
	}

	a.logo:hover {
	  color:#f1b2b7;
	  text-decoration:underline;
	}

	a.logo:active {
	  color:#ffffff;
	  background-color:#ffffff;
	  text-decoration:none;
	}

	a.corpo:link {
	  color:#000000;
	  text-decoration:underline;
	}

	a.corpo:visited {
	  color:#000000;
	  text-decoration:underline;
	}

	a.corpo:hover {
	  color:#f1b2b7;
	  text-decoration:none;
	}

	a.corpo:active {
	  color:#ffffff;
	  background-color:#ffffff;
	  text-decoration:none;
	}

	a.barra:link {
	  color:#000000;
	  text-decoration:underline;
	}

	a.barra:visited {
	  color:#000000;
	  text-decoration:underline;
	}

	a.barra:hover {
	  color:#f1b2b7;
	  background-color:#ffffff;
	  text-decoration:none;
	}

	a.barra:active {
	  color:#ffffff;
	  background-color:#ffffff;
	  text-decoration:none;
	}

	audio {
	  background-color:#000000;
	}

	.pd_ring {
	    width:260px;
	    height:75px;
	    background-color:"#FFFFFF";
	}

	.pd_ringnext {
	    width:55px;
	    height:25px;
	    vertical-align:middle;
	    border:none;
	}

	.pd_ringlist {
	    width: 62px;
	    height: 25px;
	    vertical-align:middle;
	    border:none;
	}

	.pd_ringrandom {
	    width:63px;
	    height:25px;
	    vertical-align:middle;
	    border:none;
	}

	.pd_ringprevious {
	    width:80px;
	    height:25px;
	    vertical-align:middle;
	    border:none;
	}

	.pd_ringinfo {
	    width:260px;
	    height:50px;
	    vertical-align:middle;
	    border:none;
	}

}



/*=======================COMUNE=====================*/

html{
	width: 100%;
	height: 100%;
}

body {
  margin:0;
  font-family: monospace;
	width: 100%;
	height:100%;
	height: 100vh;
}

#about{
	background: #333333;
	z-index: 10;
}

#about-randio:target > .text, #listen:target > .text, #functioning:target > .text, #further:target > .text, #random:target > .text, #contribution:target > .text, #policy:target > .text, #patches:target > .text, #contacts:target > .text, #other-radios:target > .text
{
	display:block;
}


.text-wrapper > article{
	margin: 0;
	font-size: 1.2em;
}

.accordion-strip > a > h3{
	margin: 0;
	background: white;
	border:0.1em solid black;
	color:black;
	padding-left:1em;
	padding-right:1em;
}

.accordion-strip{
	display: flex;
	flex-wrap: wrap;
}

.accordion-title{
	text-decoration: none;
	display: block;
}

.text
{
	display:none;
	color:white;
	line-height: 1.5em;
	max-height: 30em;
	overflow: scroll;
}

.cookies{
	background:black;
	width:100%;
	height: 0%;
	position: fixed;
	text-align: center;
	left: 0;
	display: flex;
	animation-name: schiacciamento;
	animation-duration: 4s;
	animation-delay: 0.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.cookies > p{
	color: white;
	animation-name: scomparsa;
	animation-duration: 4s;
	animation-delay: 0.3s;
}