@media (max-width: 999px) { /* SMARTPHONES + TABLETTES */

	#menuToggle {
		background: #2b5194 no-repeat 10px center;
		padding: 13px 25px 13px 30px;
		font-size: 1.2em;
		cursor: pointer;
		z-index: 20;
		text-align: left;
		/*width: 200%;*/
	}

	.navOpen li {
		visibility: visible;

	}

	#nav {
		position: fixed;
		top: 0px;
		left: -255px;
		background-color: #2B5194;
		z-index: 20;
		overflow-y: auto;
		padding-bottom: 130px;
	}

	.menu {
		position: relative;
	    z-index: 50;
	}

	#navbg {
		position: fixed;
		top: 0;
		margin-left: -100%;
		width: auto;
		height: 100%;
		/*background-color: red;*/
	}

	#nav ul {
		width: 100%;
		padding: 5px 0;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	#nav li {
		margin: 0 3em;
		padding: 0;
		border-bottom: 1px solid;
		-webkit-transition: opacity 600ms, visibility 600ms;
  		transition: opacity 600ms, visibility 600ms;
	}

	#nav a {
		display: block;
		text-align: left;
		color:#99b1dd;
		font-size: 1.1em;
	}

	#nav a:hover {
		color:white;
	}
	
	#nav .current a {
		background: none;
		color:white;
	}

	/* on nav hover */
	#nav ul:hover {
		background-image: none;
	}

	#nav ul .current {
		background: url(/img/icon-check.png) no-repeat 10px center;
	}

	/* right nav */
	#nav.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	#nav.center ul {
		left: 50%;
		margin-left: -90px;
	}
	
	#connexion, #connexion a, #connexion a:hover {
		font-size: 1em;
		padding: 10px 15px;
		text-align: center;	
	}

	#banner {
		/*margin-bottom:10px;*/
	}
	
	#logo {
		width: 45%;
		text-align: center;
		padding-bottom: 10px;
		margin: 10px 0 0 0px;
	}

	#logo img {
		width: 75%;
		height: auto;
    	margin-left: 10px;
	}

	#frequences {
	    margin-right: 5%;
	    max-width: 45%;
	}
	
	#grid {
		float: right;
	    width: 25%;
	    text-align: right;
	    margin-right: 160px;
	}

	#play {
		/*display: block;*/
		width: 100%;
		text-align: center;
		/*float: left;*/
	}

	#middle {
		padding: 1px;
	}

	#left {
		padding: 0;
	}

	.ss-share-link {
		/*margin-left: 13px;*/
		line-height: 50px;
	}

/*	#article .presentation img {
		max-width: 50%;
	}*/
}

@media (min-width: 640px) and (max-width: 999px) { /* TABLETTES */
	
	#left .container {
		width:50%;
	}
	
	#left {
		float:left;
		width:75%;
		padding: 0 2px 10px;
	}
				
	#right {
		float:right;
		width:25%;
	}
	
	#logo {
		float:left;
		/*width:22%;*/
		margin:0;
	}
	
	#grid {
		float: right;
	    width: 30%;
	    text-align: right;
	    margin-right: 10%;
	    position: relative;
   		top: -5px;
	}
		
	#grid img {
		float:left;
		width:98px;
		height:auto;
		margin-right: 10px;
	}
	
	#grid p {
		padding-left:28%
	}

	#play {
		display: block;
		width: 100%;
		text-align: center;
		margin-top: 10px;
		float: left;
	}
	#connexion, #connexion a, #connexion a:hover {
		font-size: 1em;
		padding: 10px;		
	}

	.searchplaylist input {
		margin: 5px;
		padding: 5px;
	}

	.searchWinner input {
	    display: inline;
	    min-width: 3em;
	}
}

@media (min-width: 999px) { /* PC */
		
	#left .container {
		width:33.33%;
	}
		
	#left {
		float:left;
		width:74.99%;
	}
				
	#right {
		float:right;
		width:25%;
	}

	#logo {
		float:left;
		width:21%;
		height:100%;
		margin: 0 50px 10px 0px;
	}
	
		.freq-strip {
			display: flex;
			flex-wrap: wrap;
			gap: 0;
			border-top: 1px solid rgba(255, 255, 255, .14);
		}
	
		.freq-item {
			flex: 1 1 100px;
			padding: 15px 15px 10px 0;
			border-right: 1px solid rgba(255, 255, 255, .14);
		}
	
		.freq-item:last-child {
			border-right: none;
		}
	
		.freq-item .city {
			display: block;
			font-size: 12.5px;
			color: #CBDAF7;
			margin-bottom: 4px;
		}
	
		.freq-item .mhz {
			font-family: var(--display);
			font-weight: 700;
			font-size: 21px;
			color: #fff;
		}
	
		.freq-item .mhz span {
			font-size: 12px;
			color: var(--amber);
			font-weight: 600;
			margin-left: 2px;
		}

	#grid {
		float: right;
	    width: 25%;
	    text-align: right;
	    margin-right: 160px;
	}
		
	#grid img {
		float:left;
		width:98px;
		margin: 0 20px;
		height:auto;
	}
	
	#grid p {
		padding-left:33%
	}

	#play {
		display: block;
		width:17%;
		text-align: center;
		margin-top: 10px;
		float: right;
	}

	#menuToggle {
		display: none;
	}
	
	nav {
		/* margin-bottom: 10px; */
	}

	nav ul li {
		float:left;
		display:block;
	}
	
	nav ul li a {
		display:block;
		padding:10px 15px;
		color: #fff;
		margin: 0 1px;
	}
	
	nav ul li a:hover, nav ul li a:focus, nav ul li a.selected {
		/* background-color: #2EC2EF; */
		background-color: #5c8ad3; /* #99B1DD; */
		/* border-radius: 6px; */
		color:#fff;
		text-decoration: none; 
		border-bottom: 3px solid white;
		padding: 10px 15px 7px 15px;
	}

	.menu {
		border-top: 1px solid #5c8ad3;
	}

	#search, #sn, #sd {
		min-width: 1em;
		/*margin: 0 5px;*/
	}

	#connexion, #connexion a, #connexion a:hover {
		font-size: 0.9em;
		padding: 5px;	
		text-decoration: none;	
	}

	.searchplaylist input {
	    margin: 5px;
	    padding: 5px;
	}
}

@media (max-width: 450px) {
	#connexion span {
		display: none;
	}

	#connexion a .fa {
		margin: 0;
	}

	#logo {
		float: left;
    	margin: 0 0 0 10px;
	}

	#logo img {
		width: 100%;
    	margin: 0;
	}

	#frequences {
	    margin-right: 5%;
	    max-width: 45%;
	}

	#grid {
		margin: -10px 15px 0 0;
    	width: 40%;
	}
	.player.container {
		margin-left: auto !important;
    	margin-right: auto !important;
    	float: none !important;
	}
	#liveImg {
		margin: 0 !important;
	}
	#r8player table {
	    margin: 0 !important; 
	}
}

@media (max-width: 635px) {
	#logo {
		/*float: left;*/
	}

	#play {
		width: 50%;
		float: right;
		margin: -222px 0px 0px 0px;
	}

	.horoscope>div>div {
		width: 33%;
	}
}

@media (max-width: 400px) {
	.horoscope > div > div {
	    width: 50%;
	    display: inline-block;
	}
}

@media (min-width: 401px) and (max-width: 789px) {
	.horoscope > div > div {
	    width: 33%;
	    display: inline-block;
	}
}

@media (min-width: 790px) {
	.horoscope > div > div {
	    width: 25%;
	    display: inline-block;
	}
}

@media (min-width: 450px) and (max-width: 640px) {
	#logo {
		margin-top: 3%;
		float: left;
	}

	#play {
		width: 50%;
		float: right;
		margin: -65px 25% 0px 0px;
	}

	#grid {
		float: right;
	    width: 25%;
	    text-align: right;
	    margin-right: 10%;
	    position: relative;
   		top: -5px;
	}
}