*:focus{
    outline: none;
}
html {
    background: #fff;
}
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
	margin-bottom:220px;
}
h1 {
    margin: 0;
    font-size: 33px;
    color: #fdf1b8;
    padding: 0 10%;
}
h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    color: #ccc;
    padding: 0 10%;
}
.container {
    display: block;
    width: 100%;
    margin: auto;
    overflow: hidden;
}
h2 {
	font-size:42px;
	font-weight:bold;
	margin-top:40px;
	margin-bottom:5px;
	font-family: 'Merriweather', serif;
	font-weight:900;
}
.gris-dumond a {
	color:#DBDBDB;
}
.btn-conteneur {
	text-align:center;
}
.btn-conteneur a {
	display:inline-block;
	padding:10px;
	text-align:center;
	font-weight:bold;
	border:2px solid #000;
	color:#000;
	text-decoration:none;
	margin-bottom:20px;
}

/* Parallaxe */

.image {
    background: url('/images/background-test.jpg') no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	min-height:100%;
}
.content {
    max-width: 980px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    z-index: 2;
    height: 100%;
}
.content-left {
	float:left;
	width:50%;
}
.content  p {
	text-align:justify;
	font-size:14px;
	line-height:22px;
}
.content-right {
	float:left;
	width: 50%;
}
.content-right img,
.content-left img {
	max-width:100%;
}
.content-first .content-left > div {
	padding-right:30px;
}
.content-second .content-right > div {
	padding-left:30px;
}
.content-second .content-left > div {
	text-align:center;
}
.content-second .content-left > div img {
	max-width:70%;
	padding:40px;
}
.content-second, .content-first {
	clear:both;
}
.content-thirst,
.content-four {
	box-sizing: content-box;
	padding:40px;
	float:left;
}
.content-thirst p,
.content-four  p {
	text-align:left;
}
.content-thirst .content-left,
.content-four .content-left {
	width:100%;
	float:none;
}
.content-thirst h2,
.content-four h2 {
	margin-top:0;
}
.content-four {
	padding-top:0;
}
.gris-dumond,
.gris-johan,
.gris-pesez {
	color:#000;
	font-size:16px;
}
.content-thirst .gris-dumond,
.content-thirst .gris-johan {
	background-color:#000;
	color:#DBDBDB;
}
.content-thirst .gris-johan {
	background-color: #22222282;
	color:#000;
}
.content-thirst .gris-pesez {
	background-color:#DBDBDB;
	color:#000;
}
.content-second .gris-dumond,
.content-second .gris-johan,
.content-second .gris-pesez{
	font-weight:bold;
	line-height:20px;
	display:inline-block;
	padding-left:130px;
	position:relative;
}
.content-second .gris-dumond:before,
.content-second .gris-johan:before,
.content-second .gris-pesez:before {
	content: "";
	height: 2px;
	width: 120px;
	background-color: #000;
	display: block;
	position: absolute;
	left: 0;
	top: 9px;
}
.gris-johan {
	color:#22222282;
}
.content-second .gris-johan {
	padding-left:100px;
}
.content-second .gris-johan:before {
	width:90px;
	opacity:0.6;
}
.content-second .content-left {
	background-color: #DBDBDB;
}
.gris-pesez {
	color:#DBDBDB;
}
.content-second .gris-pesez {
	padding-left:80px;	
}
.content-second .gris-pesez:before {
	width:70px;
	opacity:0.35;
}
.nonedesktop {
	display:none;
}
.imageDouble img {
	float:left;
	width:50%;
}
.content-second .content-left > div img.livreouvert {
	padding: 5% 5% 0;
	max-width: 90%;
}

/* Player */
.music-player {
    display: block;
    position: fixed;
    width: 100%;
    height: 120px;
    margin: auto;
    bottom:0;
    background: #000;
    box-shadow: 1px 10px 20px 5px #222;
	z-index:100;
}
.cover {
    float: left;
    width: 100%;
    height: 66%;
}
.cover img {
    display: block;
    position: absolute;
    top: 8%;
    left: 14%;
    width: 70%;
    margin: auto;
    text-align: center;
}
.titre {
    float: left;
    width: 40%;
	margin-top:20px;
}
.lecteur {
    width: 60%;
    display: block;
    height: auto;
    position: relative;
    float: left;
}
.mejs__button>button:focus {
    outline: 0px dotted #999;
}
.mejs__container {
	margin-top:35px;
    position: relative;
    background-color: transparent;
    min-width: auto !important;
}
.mejs__controls {
    padding: 0;
    background: transparent !important;
    display: block;
    position: relative;
}
.mejs__controls div {
    display: block;
    float: left;
    position: relative;
}
.mejs__controls .mejs__playpause-button {
    position: absolute !important;
    right: 33%;
    bottom: 0%;
    width: 40px;
}
.mejs__controls .mejs__playpause-button button {
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    font-family: FontAwesome;
    font-size: 42px;
    color: #fdf1b8;
    background: transparent;
    padding: 0;
    margin: 0;
}
.mejs__controls .mejs__play button:before{
    content:"\f04b";
}
.mejs__controls .mejs__pause button:before{
    content:"\f04c";
}
.mejs__controls .mejs__volume-button button {
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    font-family: FontAwesome;
    font-size: 32px;
    color: #fdf1b8;
    background: transparent;
    margin: 0;
    padding: 0;
}
.mejs__controls .mejs__mute button:before {
    content: "\f028";
}
.mejs__controls .mejs__unmute button:before {
    content: "\f026";
}
.mejs__controls .mejs__time {
    width: 60%;
    margin-top: 0;
    color: #fff;
    height: auto;
    padding: 0;
    overflow: visible;
	margin-bottom:5px;
}
.mejs__controls .mejs__time span {
    font-size: 15px;
}
.mejs__controls span.mejs__duration {
    float: right;
    text-align: right;
    color: #ccc;
}
.mejs__controls span.mejs__currenttime {
    font-weight: 700;
    float: left;
}
.mejs__controls .mejs__time-rail {
    width: 60%;
    margin: 0;
}
.mejs__controls .mejs__time-rail span {
    position: absolute;
    top: 0;
    width: 100%;
    height: 4px;
    border-radius: 50px;
    cursor: pointer;
}
.mejs__controls .mejs__time-rail .mejs__time-loaded {
    background: rgba(255,255,255,0.2);
}
.mejs__controls .mejs__time-rail .mejs__time-float {
    display: none;
    top: -40px;
    width: 40px;
    height: 25px;
    margin-left: 0px;
    text-align: center;
    font-size: 10px;
    background: #fff;
    border: 0;
}
.mejs__controls .mejs__time-rail .mejs__time-float-current {
    display: block;
    position: relative;
    top: 0;
    margin: 0;
    line-height: 26px;
    color: #100d28;
}
.mejs__controls .mejs__time-rail .mejs__time-float-corner {
    top: auto;
    bottom: -9px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 6px solid #fff;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}
.mejs__controls .mejs__time-rail .mejs__time-current {
    background: #fdf1b8 none repeat scroll 0 0;
}
.mejs__controls .mejs__time-handle {
    display: none;
}
.mejs__controls .mejs__volume-button {
    position: relative;
    position: absolute !important;
    right: 26%;
    width: 40px;
    height: 40px;
}
.mejs__controls .mejs__horizontal-volume-slider {
    display: block;
    position: absolute !important;
    position: relative;
    right: 19%;
    width: 60px;
    height: 4px;
    margin-top: 18px;
    border-radius: 50px;
    line-height: 11px;
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-total,
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
	border:1px solid #fdf1b8;
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
    background: #fdf1b8;
}

/* mobile */

@media(max-width:880px){
	.content-second .content-right > div,
	.content-first .content-left > div	{
		padding:0 20px;
	}
	.music-player {
		height:180px;
	}
	.titre {
		width:100%;
		margin-top:20px;
	}
	.lecteur {
		width:100%;
	}
	.mejs__container {
		width:80%!important;
		margin:auto;
		margin-top:30px;
	}
}

@media(max-width:440px){
	.imageDouble img {
		width:100%;
	}
	.content-left,
	.content-right {
		width:100%;
	}
	.nonedesktop {
		display:block;
	}
	.nonemobile {
		display:none;
	}
	.titre {
		width:100%;
		margin-top:0;
	}
	.content-second .content-right > div,
	.content-first .content-left > div	{
		padding:0 20px;
	}
	.music-player {
		height:145px;
	}
	
	h3 {
		font-size:14px;
		padding:10px;
	}
	h1 {
		font-size:20px;
	}
	.mejs__controls .mejs__playpause-button {
		right:20px;
	}	
	.mejs__controls .mejs__time,
	.mejs__controls .mejs__time-rail	{
		width:70%;
		left:20px;
	}
	.mejs__container {
		margin-top:15px;
		width:100%!important;
	}
	h2 {
		font-size:36px;
	}
	h1 {
		padding-left:10px;
	}
}