/* Eric Meyer reset.css v2.0 20110126 --- & --- normalize.css v2.0.1 git.io/normalize */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, sub, sup, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
table {border-collapse: collapse; border-spacing: 0;}
ol, ul {list-style: none;}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {display: block;}
audio, canvas, video {display: inline-block;}
audio:not([controls]) {display: none; height: 0;}

html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {line-height: 1;}

abbr[title] {border-bottom: 1px dotted;}
code, kbd, pre, samp {font-family: monospace, serif; font-size: 1em;}
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
em {font-style: italic;}
strong {font-weight: bold;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; text-transform: lowercase;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

input, button, select {vertical-align: middle;}
input, button, textarea, select {font: inherit;}
button, input {line-height: normal;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled], input[disabled] {cursor: default;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
textarea {overflow: auto; vertical-align: top; resize: vertical;}

img {border: 0 none; display: block;}
blockquote, q {quotes: "\ab\00a0" "\00a0\bb" "\2039\00a0" "\00a0\203a";} /*:lang(fr)*/
blockquote::before, q::before {content: open-quote;}
blockquote::after, q::after {content: close-quote;}
:focus {outline: 0 none;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* http://paulirish.com/2012/box-sizing-border-box-ftw/ */




body {
	color: #222;
	font: 0.9em/1.2em "brandon-grotesque", "Brandon Grotesque", sans-serif;
	margin: 0 0 100px;
}

.width-wrap {
	width: 100%;
	max-width: 1140px;
	padding-left: 40px;
	padding-right: 40px;
	margin-left: auto;
	margin-right: auto;
}

.hidden {
	display: none !important;
	visibility: hidden;
}
.home {
	overflow: hidden;
}

.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block; /* "table" instead of "block" to contain top-margins of child elements */
	line-height: 0;
	height: 0;
	width: 0;
	visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix{*zoom: 1;}

	/* PLAYER */
	
	#player-bar {
		height: 256px;
		position: relative;
	}
	
	.me-plugin {
		position: absolute;
	}

		#player-progress {
			cursor: pointer;
		}
	
		#player {
			position: relative;
			height: 200px;
			width: 450px;
			overflow: hidden;
		}

		.player-play {
			width: 100px;
			height: 100px;
			position: relative;
			float: left;
		}

			/*#player a {
				color: #fff;
			}*/

			#player a:hover {
				color: #000000;
			}

				
			#player .btn-pause {
				position: absolute;
				width: 38px;
				height: 38px;
				top: 50%;
				left: 50%;
				margin-top: -19px;
				margin-left: -19px;
				cursor: pointer;
				/*background-color: #fff;*/
				-webkit-border-radius: 56px;
	        			border-radius: 56px;
			}

				#player .btn-pause:active {
					-webkit-transform: scale(0.98);
					   -moz-transform: scale(0.98);
					    -ms-transform: scale(0.98);
					     -o-transform: scale(0.98);
					        transform: scale(0.98);
					-webkit-transform-origin: 50% 50%; /* Safari and Chrome */
						-ms-transform-origin: 50% 50%; /* IE 9 */
							transform-origin: 50% 50%;
				}

				#player .btn-pause:after {
					content: "";
					position: absolute;
					width: 12px;
					height: 12px;
					left: 50%;
					top: 50%;
					margin-top: -6px;
					margin-left: -6px;
					display: block;
					/*background-color: green;*/
					background-image: url('images/player-btn-sprite.svg');
					background-repeat: no-repeat;
					background-position: -4px -4px;
					background-size: 20px auto;
				}

					.no-svg #player .btn-pause:after,
					.no-svg #player .btn-pause.pause:after {background-image: url(images/player-btn-sprite.png);}

					#player .btn-pause:hover::after {
						opacity: 0.7;
					}

					#player .btn-pause.pause:after {
						background-image: url('images/player-btn-sprite.svg');
						background-position: -4px -30px;
					}

			#player .metaData {
				position: absolute;
				left: 0px;
				top: 20px;
				color: #fff;
			}

				#player .state {
					text-transform:  uppercase;
					margin-bottom: 0.9em;
					font-size: 0.8em;
					line-height: 1em;
				}

				#player .digits {
					font-weight: 100;
					margin-bottom: 0.1em;
					font-size: 1em;
					line-height: 1em;
				}

					#player .digits .currentTime, #player .digits .totalTime {
						display: inline-block;
						text-align: left;
					}

					#player .currentTime {
						margin-right: 4px;
					}

					#player .separateur {
						display: inline-block;
						height: 10px;
						width: 1px;
						margin-right: 4px;
						background-color: #eee;
						opacity: 0.8;
					}

				#player .title {
					font-size: 1.1em;
					font-weight: 500;
					display: block;
					margin-bottom: 0.5em;
					line-height: 0.9em;
					white-space: nowrap;
					overflow: hidden;
				}

				#player .metaData a {
					/*font-weight: 100;*/
					font-size: 1.1em;
					line-height: 0.9em;
					display: block;
					margin-bottom: 0.7em;
					color: #fff;
					text-transform:  uppercase;
					text-decoration: underline;
					white-space: nowrap;
					overflow: hidden;
				}
				
				#player .metaData a:hover {
					color: #eee;
				}
		
			#player .controls,
			#player .social {
				position: absolute;
				top: 40px;
				right: 7px;
			}

			#player .social {
				top: 22px;
				right: 14px;
				/* width: 70px; */
			}

				#player .controls a, #player .social a {
					display: inline-block;
					width: 20px;
					height: 20px;
					background: url('images/player-controls-sprite.svg') left -23px no-repeat;
					margin-right: 5px;
					cursor: pointer;
				}

			#player .social a {
				width: 15px;
				margin-right: 1px;
				margin-left: 10px;
				background: url('images/social-icon-sprite.svg') left top no-repeat;
			}

			#player .social a:hover {
				color: #000000;
			}

			.social img {
				display: inline;
				margin-left: 5px;
			}

			.no-svg #player .social a{background-image: url(images/social-icon-sprite.png);}



			#player .social .facebook{background-position: 0 0;}
			#player .social .twitter{background-position: -18px 0;}
			#player .social .google{background-position: -37px 0;}

				.no-svg #player .controls a{background-image: url(images/player-controls-sprite.png);}

				#player .controls .prec {background-position:	-28px -23px;}
				#player .controls .stop {background-position:	-56px -23px;}
				#player .controls .next {background-position:	-84px -23px;}
				#player .controls .random {background-position:	-113px -23px;}

				#player .controls .repeat, #player .controls .random
				{opacity: 0.6;}

				#player .controls .repeat.actif, #player .controls .random.actif
				{opacity: 1;}

					#player .controls .actif, #player .controls a:active {
						opacity: 0.8;
					}

			#player-arte {
				position: absolute;
				bottom: 20px;
				right: 13px;
				width: 250px;
				height: 50px;
			}

				#player-arte a {
					display: block;
					width: 100%;
					height: 100%;
					text-transform: uppercase;
					text-decoration: none;
					background: url(images/logo.svg) 100px 0px no-repeat;
					text-align: center;
					text-indent: -50px;
					padding-top: 10px;
					color: black;
				}

			#player .position-indicator {
				pointer-events: none;
				position: absolute;
				width: 1px;
				height: 40%;
				background: #fff;
				opacity: 0;
				left: 50%;
				top: 50%;
				margin-top: 0;
				margin-left: -0.5px;
				-webkit-transform: rotate(0rad);
				   -moz-transform: rotate(0rad);
				    -ms-transform: rotate(0rad);
				     -o-transform: rotate(0rad);
				        transform: rotate(0rad);
				-webkit-transform-origin:0% 0%;
					-ms-transform-origin:0% 0%;
						transform-origin:0% 0%;
			}


			 #player:hover .position-indicator{
			 	opacity: 0.2;
			 }

			 #player:active .position-indicator{
				opacity: 0;
			}
			
			.mejs-container, #player-handle {
				display: none;
			}


		.track-list {
			margin-left: 629px;
			padding-top: 52px;
			color: #fff;
			font-size: 0.85em;
			text-decoration: none;
		}

		.track-list a {
			text-decoration: none;
		}

		#player-bar .track-list a:hover {
			color: #eee;
		}

			.track-list > div {
				float: left;
				width: 200px;
			}

			.track-list h3 {
				text-transform: uppercase;
				margin-bottom: 1.6em;
			}
			
			.track-list li {
				font-size: 1.25em;
				font-weight: bold;
				line-height: 1.3em;
			}
			
				.track-list li .duration {
					font-size: 0.8em;
					font-weight: 100;
				}
			
				.track-list li.active {
					margin-left: -15px;
				}
			
					.track-list li.active::before {
						content: "";
						background: url('images/player-controls-sprite.svg') no-repeat -33px 0px;
						width: 12px;
						height: 12px;
						display: inline-block;
						margin-right: 6px;
					}
					.no-svg .track-list li.active::before {background-image: url(images/player-controls-sprite.png);}

		.data-player{
			float: left;

		}
		.relativ-data{
			position: relative;
		}

@media (min-height: 149px)  {
    #player {
        position: relative;
        height: 200px;
		width: 100%;
        overflow: hidden;
    }
    #player-progress {
    	height: 150px;
	}
    
    .player-play {
        width: 80px;
        height: 80px;
        position: relative;
    }

    #player .controls,
    #player .social {
        position: absolute;
        top: 120px;
		width: 120px;
    }
	#player .controls{
		top:70px;
		left: 180px;
	}
    #player-arte {
        position: absolute;
        bottom: 10px;
        width: 155px;
        height: 60px;
		top: 120px;
		left: 2px;
    }
    #player .btn-pause {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-top: -20px;
        margin-left: -29px;
        cursor: pointer;
        /*background-color: #fff;*/
        -webkit-border-radius: 56px;
        border-radius: 56px;
    }
    #player .social {
		width: 70px;
    }
    #player .title {
        font-size: 1.2em;
        font-weight: 500;
        display: block;
        margin-bottom: 0.5em;
        line-height: 0.9em;
        white-space: nowrap;
        overflow: hidden;
    }

}

@media (min-height: 300px) {
	.data-player{
		min-width : 225px;
	}
}

@media (max-width: 375px) AND (min-height: 300px) {
	#player {
		height: 300px;
	}
}
@media (min-width: 375px) {
	.controls{
		display: none;
	}
	#player .share{
		top: 100px;
		left: -55px;
	}
	#player-arte{
		position: absolute;
		bottom: 10px;
		width: 160px;
		height: 60px;
		top: 95px;
		left: 115px;
	}
	/*#player-arte{
		left: 0px;
	}*/
}




	/* FGA - compatibilité ascendante */
@media  (max-height: 148px){
	#player .controls, #player .social, #player-arte {
		/* position : fixed */
	}
	
	#player-progress {
    	height: 100px;
	}	
	
	.relativ-data{
   		position: fixed;
    	width: 350px;
    	height: 100%;
    }
}

	
	/* @end PLAYER */