body {
	background:#fff;
	overflow-x: hidden;
	font-family:'Montserrat', Helvetica, Arial, sans-serif;
	font-weight:400;
	color:#000;
	font-size:14px;
	line-height:21px;
}
::selection{
	background:rgba(0,60,255,.99);
	color:#fff;
}

img::selection{
	background:rgba(0,60,255,.4);
	color:#fff;
}

.clear {
	display:block;
	clear:both;
}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: 10px;
    background:#000;
}
 
::-webkit-scrollbar-track {
    border-radius: 10px;
    opacity:0;
}
 
::-webkit-scrollbar-thumb {
    background:#58ac31;
}

/* BANDEAU BCP MUSIC */

#bandeau-mmc {
	display:block;
	z-index:900;
	width:100%;
	height:105px;
	background:#000;
}

.bandeau-bottom {
	position:absolute;
	bottom:0;
}

.bandeau-top {
	position:fixed;
	top:0;
}

#logo-mmc {
	display:block;
	float:left;
	width:200px;
	height:21px;
	margin:42px 0 0 25px;
}

#logo-mmc img {
	display:block;
	width:100%;
}

#liens-rs-mmc {
	display:block;
	float:left;
	margin:22px 0 0 25px;
	width:800px;
	color:#fff;
	font-weight:600;
	font-size:18px;
}

#liens-rs-mmc p#liens {
	color:#58ac31;
	font-size:14px;
	letter-spacing:5px;
}


#liens-rs-mmc p#liens a {
	display:inline-block;
	font-size:18px;
	letter-spacing:0;
	color:#fff;
	text-decoration:none;
	transition: all .2s ease;
}

#liens-rs-mmc p#liens a.facebookbcp:hover {
	color:#003cff;
}
#liens-rs-mmc p#liens a.twitterbcp:hover {
	color:#3aceff;
}
#liens-rs-mmc p#liens a.soundcloudbcp:hover {
	color:#ff9e14;
}
#liens-rs-mmc p#liens a.youtubebcp:hover {
	color:#e30613;
}
#liens-rs-mmc p#liens a.instagrambcp:hover {
	color:#dd40ff;
}

#signature-mmc {
	display:block;
	font-size:12px;
	line-height:18px;
	font-weight:400;
	color:#777;
	text-transform:uppercase;
}

#signature-mmc a {
	color:inherit;
	text-decoration:none;
}

#abo-newsletter-mmc {
	display:none;
}

#signature-mmc span {
	margin-right:10px;
}

/* BANDEAU ARTISTES */

#bandeau-artistes {
	display:block;
	position:absolute;
	z-index:10;
	width:100%;
	height:170px;
	background:#000;
	bottom:105px;
}

.carousel {
	display: block;
	z-index:20;
	-webkit-transform: translateZ(0);
	width:100%;
	height:170px;
	background: #000;
	-webkit-overflow-scrolling: touch;
}
.touch .carousel {
	overflow: auto;
}

.carousel > .indicator {
	pointer-events: none;
	position: absolute;
	z-index: 4;
	bottom: 0;
	left: 0;
	background: #58ac31;
	height: 2px;
	border-radius: 10px;
	opacity: 0;
	-webkit-transition: opacity 0.2s, bottom 0.2s;
	transition: opacity 0.2s, bottom 0.2s;
}
.carousel:hover > .indicator {
	opacity: 1;
	top: -5px;
}
.carousel > .wrap {
	overflow: hidden;
}
.carousel > .wrap > ul {
	list-style: none;
	white-space: nowrap;
	height:200px;
}
.carousel > .wrap > ul > li {
	display: inline-block;
	position: relative;
	overflow: hidden;
	-webkit-transition: 0.25s ease-out;
	transition: 0.25s ease-out;
	margin:0 -2px 0 -2px;
}

.bouton-artiste {
	display:block;
	z-index:11;
	float:left;
	height:170px;
	width:250px;
	margin:0;
	background:#000;
	background-repeat: no-repeat;
	background-position: center center;
	background-size:cover;
	cursor:pointer;
	transition:0.2s ease-in-out;
}

.tibz {
	background-image: url(/mmc/img/boutons-artistes/tibz.jpg);
}
.irma {
	background-image: url(/mmc/img/boutons-artistes/irma.jpg);
}
.joycejonathan {
	background-image: url(/mmc/img/boutons-artistes/joycejonathan.jpg);
}
.somevelvetmorning {
	background-image: url(/mmc/img/boutons-artistes/somevelvetmorning.jpg);
}
.dume {
	background-image: url(/mmc/img/boutons-artistes/dume.jpg);
}
.gregoire {
	background-image: url(/mmc/img/boutons-artistes/gregoire.jpg);
}
.mani {
	background-image: url(/mmc/img/boutons-artistes/mani.jpg);
}
.ivyrise {
	background-image: url(/mmc/img/boutons-artistes/ivyrise.jpg);
}
.kinnielane {
	background-image: url(/mmc/img/boutons-artistes/kinnielane.jpg);
}
.zero {
	background-image: url(/mmc/img/boutons-artistes/zero.jpg);
}
.golf {
	background-image: url(/mmc/img/boutons-artistes/golf.jpg);
}
.millersdaughter {
	background-image: url(/mmc/img/boutons-artistes/millersdaughter.jpg);
}
.daniagio {
	background-image: url(/mmc/img/boutons-artistes/daniagio.jpg);
}
.arnosantamaria {
	background-image: url(/mmc/img/boutons-artistes/arnosantamaria.jpg);
}


.bouton-artiste h2 {
	display:block;
	position:absolute;
	width:250px;
	z-index:14;
	color:#fff;
	text-align:center;
	font-weight:700;
	font-size:18px;
}

.bouton-artiste h2 span {
	padding:0 3px 0 3px;
	transition:0.1s ease-in-out;
}

.cache-bouton {
	display:block;
	width:100%;
	height:100%;
	z-index:13;
	background:#000;
	opacity:.7;
	transition:0.2s ease-in-out;
}

.bouton-artiste:hover .cache-bouton {
	opacity:.1;
}

.bouton-artiste:hover {
	border-bottom:10px solid #58ac31;
}

.cache-active {
	opacity:.1;
}

.artiste-active {
	border-bottom:10px solid #58ac31;
}

.bouton-all {
	display:block;
	float:left;
	height:100%;
	width:15%;
	margin:0;
	background:#000;
	cursor:pointer;
	transition:0.2s ease-in-out;
}

.bouton-all:hover {
	background:#58ac31;
}

.bouton-all p {
	display:block;
	position:absolute;
	width:15%;
	z-index:15;
	color:#fff;
	text-align:center;
	font-weight:700;
	font-size:20px;
	line-height:20px;
}

.bouton-arrow {
	display:block;
	float:left;
	height:100%;
	width:5%;
	margin:0;
	background:#58ac31;
	cursor:pointer;
	transition:0.2s ease-in-out;
}

/* BOUTON MUTE */

#mute-toggle {
	display:block;
	position:fixed;
	z-index:901;
	width:45px;
	height:45px;
	right:150px;
	top:17px;
	cursor:pointer;
}

#mute-toggle:hover {
	opacity:0.5;
	transition:0.2s;
}

.loud {
	background:url(/mmc/img/loud.png);
}

.mute {
	background:url(/mmc/img/muted.png);
}

/* Bouton CONNEXION */

a#connexion {
	display:block;
	position:fixed;
	width:110px;
	height:40px;
	background:#58ac31;
	fon-size:16px;
	line-height:40px;
	font-weight:700;
	top:20px;
	right:20px;
	color:#fff;
	text-align:center;
	z-index:1000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-decoration:none;
	transition:0.2s ease-in-out;
}

a#connexion:hover {
	background:#fff;
	color:#000;
}

/* TITLE ACTIVE */

#title-active {
	display:block;
	position:fixed;
	top:32px;
	left:32px;
	z-index:-50;
}

#title-active h3 {
	display:block;
	float:left;
	font-size:80px;
	line-height:80px;
	color:#fff;
	font-weight:900;
}

#title-active a {
	display:block;
	height:45px;
	width:230px;
	font-size:14px;
	line-height:44px;
	color:#fff;
	text-transform:uppercase;
	font-weight:700;
	border:1px solid #fff;
	text-align:center;
	text-decoration:none;
	margin:50px 0 0 0;
	transition:0.2s ease-in-out;	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#title-active a:hover {
	color:#000;
	background:#fff;
}

#title-active p {
	font-size:16px;
	float:left;
	color:#fff;
	font-weight:700;
	margin:10px 0 0 0;
}

#title-active img {
	float:left;
	width:20px;
	height:20px;
	margin:10px 10px 0 0;
	top:0;
}

/* CONTENT */

#content {
	width:100%;
	position:absolute;
	z-index:90;
	background:#fff;
	background-image: url(/mmc/img/cache-slideshow.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size:cover;
}

#liste-artistes {
	display:block;
	width:960px;
	margin:0 auto;
	text-align:center;
	background-repeat: no-repeat;
}

#liste-artistes h3 {
	display:inline-block;
	text-align:center;
	font-size:70px;
	line-height:70px;
	font-weight:900;
	color:#58ac31;
	background:#000;
	padding:5px 10px 5px 10px;
}

#thumblist {
	display:block;
	width:100%;
	margin-top:50px;
}

.thumb {
	display:block;
	z-index:0;
	float:left;
	width:230px;
	height:518px;
	margin:0 5px 0 5px;
	background:#000;
	background-repeat: no-repeat;
	background-position: center center;
	background-size:cover;
	cursor:pointer;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.thumb p {
	display:block;
	width:230px;
	margin:445px 0 0 0;
	position:absolute;
	z-index:80;
	font-size:25px;
	line-height:28px;
	font-weight:700;
	color:#fff;
}

.see-more {
	display:block;
	width:120px;
	position:absolute;
	margin-top:240px;
	margin-left:55px;
	z-index:80;
	font-size:14px;
	text-decoration:none;
	color:#fff;
	background:#000;
	font-weight:700;
	opacity:0;
	transition:0.3s ease;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.see-more:hover {
	background:#58ac31;
}

.gradient {
	display:block;
	position:absolute;
	z-index:50;
	width:230px;
	height:518px;
	background-image: url(/mmc/img/thumb-artistes/gradient.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size:cover;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.flou {
	display:block;
	width:230px;
	height:518px;
	position:absolute;
	z-index:30;
	background:#000;
	overflow:hidden;
	opacity:0;
	transition:0.3s linear;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.flou img {
	width:230px;
	overflow:hidden;
	opacity:1;
	transition:0s linear;
	transform: scale(1.3);
}

.thumb:hover .see-more {
	opacity:1;
}

.thumb:hover .flou {
	opacity:1;
}

.thumb:hover .flou img {
	transition:5s linear;
	transform: scale(1.6);
}

.mySlides {
    display: none;
}

.prev {
	cursor: pointer;
	position: absolute;
	height:60px;
	width:39px;
	top: 50%;
	left:40px;
	margin-top: -100px;
	transition: 0.6s ease;
	background-image: url(/mmc/img/prev-button.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size:cover;
	opacity:.3;
}

.next {
	cursor: pointer;
	position: absolute;
	height:60px;
	width:39px;
	top: 50%;
	right:40px;
	margin-top: -100px;
	transition: 0.6s ease;
	background-image: url(/mmc/img/next-button.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size:cover;
	opacity:.3;
}

.prev:hover, .next:hover {
	opacity:.6;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin:50px 5px 0 5px;
  background-color: #3e7922;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #fff;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: .2s;
  animation-name: fade;
  animation-duration: .2s;
}

@-webkit-keyframes fade {
  from {opacity: .3} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .3} 
  to {opacity: 1}
}

/* ------- SCROLL TOP BOUTON ------- */

#scroll-top {
	position:relative;
	display:block;
	width:50px;
	height:50px;
	margin:0 auto;
	background-image: url(/mmc/img/btn-top.png);
	background-size:cover;
	cursor:pointer;
	opacity:.3;
	transition: 0.6s ease;
}

#scroll-top:hover {
	opacity:.6;
}


/* ------- VIDEO BACKGROUND ------- */

* { box-sizing: border-box; }
#videobackground {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -200;
  width:100%;
  height:100%;
  overflow:hidden;
}

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* si bandes noires
.video-background iframe {
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  pointer-events: none;
}
 */

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}


/* ------- PAGE ARTISTE -------960 */


#header {
	display:block;
	position:fixed;
	z-index:10;	
	top:0;
	left:0;
	text-align:center;
}

#header h1 {
	display:inline-block;
	font-size:120px;
	line-height:120px;
	font-weight:900;
	color:#fff;
	background-color:rgba(0, 0, 0, 0.4);
}

#header p {
	display:inline-block;
	font-size:25px;
	line-height:25px;
	color:#fff;
	margin:10px 0 0 0;	
	font-weight:700;
	background:#58ac31;
	padding:0 5px 0 5px;
}

#page-artiste {
	display:block;
	position:relative;
	z-index:20;
	width:100%;
	background:#fff;
}

.bandeau {
	display:block;
	width:100%;
	width:100%;
	padding:60px 0 60px 0;
}

.contenu-bandeau {
	display:block;
	width:960px;
	margin:0 auto;
}

.prochainement {
	font-size:95px;
	line-height:60px;
	color:#e30613;
	text-transform:uppercase;
	font-weight:900;
	text-align:center;
	padding:20px 0 0 0;
	letter-spacing:-3px;
}

.prochainement span {
	font-size:35px;
	text-transform:none;
	font-weight:700;
	text-align:center;
	letter-spacing:0;
}

.bio-detail {
	font-size:20px;
	line-height:32px;
	color:#000;
	text-transform:none;
	font-weight:400;
	text-align:justify;
	letter-spacing:0;
}

.bio-detail span.exergue {
	display:block;
	width:900px;
	margin:0 auto;
	text-align:center;
	font-size:26px;
	line-height:40px;
	font-weight:700;
	padding:20px 0 20px 0;
}

.bandeau h2 {
	display:inline-block;
	font-size:50px;
	line-height:50px;
	color:#fff;
	font-weight:900;
	color:#fff;
	margin-bottom:40px;
	background:#58ac31;
	padding:5px 5px 5px 5px;
}

.bandeau p.sortie {
	display:inline-block;
	float:right;
	height:25px;
	font-size:20px;
	background-color:rgba(0, 0, 0, 0.6);
	line-height:26px;
	text-transform:uppercase;
	font-weight:700;
	padding:0 5px 0 5px;
	color:#fff;
	margin-top:36px;
}

.pochette {
	display:block;
	float:left;
	width:334px;
	height:334px;
}

.float-left {
	margin-right:32px;
}

.float-right {
	margin-left:32px;
}

.pochette img {
	display:block;
	width:100%;
	margin:0;
}

.video {
	display:block;
	width:594px;
	height:334px;
	float:left;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:1;
}

.video-container img {
	display:block;
	position: absolute;
	top:0;
	left:0;
    max-width: 100%;
	z-index:2;
	cursor:pointer;
}

.video-container img.bouton-play {
	display:block;
	position: absolute;
	top:0;
	left:0;
    max-width: 100%;
	z-index:10;
	cursor:pointer;
	transition: all .2s ease;
}

.video-container img.bouton-play:hover { transform: scale(1.2);}

.liens-plateformes {
	display:block;
	height:30px;
	width:100%;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	text-align:center;
}

.liens-plateformes p {
	display:block;
	width:100%;
	height:45px;
	float:left;
	margin-right:15px;
	margin-top:15px;
	text-align:center;
	color:#fff;
}

.liens-plateformes a {
	display:inline-block;
	height:45px;
	margin:-7px 0 0 30px;
	transition: all .4s ease;
	vertical-align:middle;
}

.liens-plateformes a:hover {
	opacity:.7;
}

.liens-plateformes a img {
	height:100%;
}

.bio {
	display:block;
	width:900px;
	margin:0 auto;
	text-align:center;
	font-size:26px;
	line-height:40px;
}

.bio span {
	font-weight:700;
}

/* BOUTON RS ARTISTE */

#reseaux-artiste {
	display:block;
	width:40px;
	height:230px;
	position:fixed;
	z-index:950;
	right:20px;
	top:50%;
	margin-top:-190px;
}

#reseaux-artiste li {
	display:block;
	width:40px;
	height:40px;
	margin:10px 0 10px 0;
	transition: all .4s ease;
}

#reseaux-artiste li:hover {
	opacity:.7;
}

#reseaux-artiste li img {
	display:block;
	width:100%;
	height:100%;
}


/* FLECHE SCROLL HELP */

#scrollarrow {
	display:block;
	position:fixed;
	z-index:1;
	width:20px;
	height:40px;
	background:url(/mmc/img/scroll.png);
	opacity:1;
	left:50%;
	margin-left:-10px;
}

@keyframes move {
  from {
    bottom: 130px;
  }

  to {
    bottom: 140px;
  }
}

div#scrollarrow {
  animation-duration: 0.5s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* BACK ARROW */

#back-arrow {
	display:block;
	width:100px;
	height:20px;
	background:url(/mmc/img/back-arrow.png);
	position:fixed;
	z-index:1;
	top:30px;
	left:40px;
	transition: all .4s ease;
}

#back-arrow:hover {
	opacity:.7;
}

/* LOADER */

.loader {
	position:fixed;
	z-index:9999;
	background:url('/mmc/img/loader.png') 50% 50% no-repeat;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	animation-name: rotate; 
    animation-duration: 1s; 
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

#cache-load {
	position:fixed;
	z-index:9998;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background:#000;
}

/* FOOTER */

#footer {
	display:block;
	width:200px;
	height:27px;
	margin:0 auto;
}

#footer img {
	display:block;
	width:100%;
	opacity:.3;
}

/* ABOUT */

#about {
	display:block;
	position:absolute;
	width:900px;
	height:460px;
	top:50%;
	left:50%;
	margin-top:-270px;
	margin-left:-450px;
	z-index:800;
	color:#fff;
	text-align:center;
	font-size:14px;
	line-height:20px;
	font-weight:700;
}

.about-reseaux-labels li {
	display:inline-block;
	margin:5px;
}

.about-reseaux-labels li img {
	width:25px;
}

.label-block {
display:block;
width:300px;
float:left;	
}

/* LEGAL */

#legal {
	display:block;
	position:absolute;
	width:700px;
	height:420px;
	top:50%;
	left:50%;
	margin-top:-255px;
	margin-left:-350px;
	z-index:800;
	color:#fff;
	text-align:center;
	font-size:16px;
	line-height:26px;
	font-weight:700;
}

#legal span {
	font-weight:400;
	color:#666;
}

#legal img {
	display:inline-block;
	margin-bottom:40px;
	opacity:.15;
}

#legal a {
	color:inherit;
	text-decoration:none;
}

/* RESPONSIVE GRAND ECRANS */

@media screen and (min-width: 1400px) {
	
#liste-artistes {
	width:1160px;
}

.thumb {
	width:280px;
	height:630px;
}

.thumb p {
	width:280px;
	margin:555px 0 0 0;
}

.see-more {
	width:120px;
	margin-top:300px;
	margin-left:80px;
}

.gradient {
	width:280px;
	height:630px;
}

.flou {
	width:280px;
	height:630px;
}

.flou img {
	width:280px;
}

.colonne {
	display:block;
	width:380px;
	float:left;
}

/* ------- PAGE ARTISTE ------- */

.contenu-bandeau {
	width:1200px;
}

.pochette {
	width:418px;
	height:418px;
}

.float-left {
	margin-right:40px;
}

.float-right {
	margin-left:40px;
}

.video {
	width:742px;
	height:418px;
}

}

/* RESPONSIVE PETITS ECRANS */

@media (max-width: 1150px) {
#liste-artistes {
	width:880px;
}

.thumb {
	width:210px;
	height:473px;
}

.thumb p {
	width:210px;
	margin:400px 0 0 0;
}

.see-more {
	width:120px;
	margin-top:220px;
	margin-left:50px;
}

.gradient {
	width:210px;
	height:473px;
}

.flou {
	width:210px;
	height:473px;
}

.flou img {
	width:210px;
}

.prev {
	height:60px;
	width:39px;
	top: 50%;
	left:110px;
	margin-top:210px;
}

.next {
	height:60px;
	width:39px;
	top: 50%;
	right:110px;
	margin-top:210px;
}

.dot {
	margin-top:65px;
}

.contenu-bandeau {
	width:900px;
}

.pochette {
	width:315px;
	height:315px;
}

.float-left {
	margin-right:25px;
}

.float-right {
	margin-left:0;
}

.video {
	width:560px;
	height:315px;
}

}