@charset "UTF-8";
/* @import "fontawesome.min.css"; */

/*
 - Site : MusiqueDePub.TV
 - Fichier : mdp-v600.css
 - Version : 6.20151112
 -
 - Auteur : Olivier Maréchal - shine@aillas.net
 */





/*
 Reset
 */
* {
	margin:0px;
	padding:0px;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
	margin-bottom: 1em;
}



/*
  Global
 */
body {
	font-family: 'ABeeZee', sans-serif;
	margin: 0px;
	background: #ffffff;
	color: #000000;
	font-size: 14px;
}
@media (max-width: 767px) {
	body {
		margin-top:15px;
	}
}



/*
 Layouts
 */

.container {
	position:relative;
	margin:0 auto;
	height:100%;
	padding:0;
}
@media (min-width: 768px) {
	.container {
		width:750px;
	}
}
@media (min-width: 992px) {
	.container {
		width:970px;
	}
}
@media (min-width: 1200px) {
	.container {
		width:1200px;
	}
}




#mainHeader {
	background-attachment: fixed;
	background-position: 50% 0px;
	margin:0 auto;
	position:relative;
	height: 0px;
}
@media (min-width: 768px) {
	#mainHeader {
    min-height: 300px;
    height: calc(250px + 10vh);
	}
}


#mainHeader .container {
	align-items: center;
	flex-basis: auto;
	display: flex;
	flex-grow: inherit;
	padding-top: 55px;
}

@media (max-width: 767px) {
	.code_url #mainHeader, .id_fiche #mainHeader {
    height: 150px;
	}
}

#mainHeader .headerBg {
    background-position: center;
    background-size: cover;
    width:100%;
		height:100%;
		position:absolute;
}


.menusWrapper {
  position:fixed;
  top:0px;
  left: 0;
  width:100%;
  z-index:4;
  min-height: 55px;
  background:rgba(1, 45, 88, 0.95);
}

.siteDown #mainHeader {
	overflow: hidden;
}



.mainBottom {
	padding:10px;
	color: white;
}

.megaGradient {
	background: #012d58;
	background: -moz-linear-gradient(45deg, #012d58 0%, #003365 32%, #031120 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, #012d58), color-stop(32%, #003365), color-stop(100%, #031120));
	background: -webkit-linear-gradient(45deg, #012d58 0%, #003365 32%, #031120 100%);
	background: -o-linear-gradient(45deg, #012d58 0%, #003365 32%, #031120 100%);
	background: -ms-linear-gradient(45deg, #012d58 0%, #003365 32%, #031120 100%);
	background: linear-gradient(45deg, #012d58 0%, #003365 32%, #031120 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012d58', endColorstr='#031120', GradientType=1 );
}






/*
.enVogue > div.tail {
	width: 100%;
}
.enVogue > div.plus {
	width: 100%;
}


@media (min-width: 768px) {
	.enVogue > div.tail {
		width: 50%;
	}
	.enVogue > div.plus {
  	width: 100%;
	}
	.enVogue.home > div:nth-child(2n+1) {
  	clear:both;
	}
}

@media (min-width: 992px) {
	.enVogue > div.tail {
		width: 33%;
	}
	.enVogue > div.plus {
  	width: 67%;
	}

	.enVogue.home > div:nth-child(2n+1) {
  	clear:none;
	}
	.enVogue.home > div:nth-child(3n+1) {
  	clear:both;
	}
}

@media (min-width: 1200px) {
	.enVogue > div.tail {
		width: 25%;
	}
	.enVogue > div.plus {
  	width: 50%;
	}

	.enVogue.home > div:nth-child(3n+1) {
  	clear:none;
	}
	.enVogue.home > div:nth-child(4n+1) {
  	clear:both;
	}
}
*/


/*
 Contents
 */

.margeMDP {
	padding: 10px;
}

.margeAnnexe {
	width: 142px;
	height: 108px;
	margin:	10px;
	overflow: hidden;
}

.newRow {
	clear: both;
}
.rowMargin {
	padding-top:25px;
}
.rowMarginVertical {
	padding-top:32px;
	padding-bottom:32px;
}

/* Home page */
#zoneProgrammeTop {
	width: 368px;
	height: 20px;
	background: url(/image/accueil/bg_div_programme_top.png) no-repeat;
}


#zoneProgrammeBottom {
	width: 368px;
	height: 30px;
	background: url(/image/accueil/bg_div_programme_bottom.png) no-repeat;
}

.zoneProgrammeEntry {
	overflow: hidden;
	position: relative;
	display: block;
	border-radius: 0.5em;
  height: 80px;
  font-size:18px;
  margin-bottom: 6px;
  text-decoration: none !important;
}
.zoneProgrammeEntry span {
	margin: 0 1em;
	display: inline-block;
}
.zoneProgrammeEntry span:nth-child(2){
}
.zoneProgrammeEntry span:nth-child(3){
}

.zoneProgrammeEntry span::before {
    position: absolute;
    top: 8px;
    font-size: 10px;
    color: #febc2f;
}
.zoneProgrammeEntry .down span::before {
	color:#ffffff;
}
.zoneProgrammeEntry span.forum::before {
    color: #ffffff;
}

@media (min-width: 768px) {
	.zoneProgrammeEntry span.annonceur::before {content: "spot";}
	.zoneProgrammeEntry span.dateActu::before {content: "actu du";}
	.zoneProgrammeEntry span.dateDiffusion::before {content: "1è diffusion";}
	.zoneProgrammeEntry span.artiste::before {content: "musique";}
	.zoneProgrammeEntry span.agence::before {content: "agence";}
	.zoneProgrammeEntry span.premdiff::before {content: "1ère diffusion";}
	.zoneProgrammeEntry span.forum::before {content: "discussion";}
}

.zoneProgrammeEntry span.illustration {
	height: 80px;
	text-align: right;
	flex-grow: 1;
	margin:0em;
	line-height: inherit;
}
@media (max-width: 767px) {
	.zoneProgrammeEntry span.illustration {
		text-align: left;
		flex-grow: 0;
	}
}
.zoneProgrammeEntry span.illustration img {
	height:80px;
	max-width: 80px;
}
.zoneProgrammeEntry span.video {
	margin:0em;
	line-height: inherit;
	min-width: 80px;
	max-width: 80px;
	height: 80px;
	overflow:hidden;
}
@media (min-width: 768px) {
	.zoneProgrammeEntry span.video {
		min-width: 107px;
		max-width: 107px;
	}
}
.zoneProgrammeEntry span.video img {
	height:80px;
	max-width: 107px;
	margin-left:-15px;
}
@media (min-width: 768px) {
	.zoneProgrammeEntry span.video img {
		margin-left:0;
	}
}
.zoneProgrammeEntry span.video img.novideo {
	opacity: 0.3;
}
.tail div.video img.novideo {
	opacity: 0.3;
}

.zoneProgrammeEntry span.produit, .zoneProgrammeEntry span.titre {
	margin: 0;
  display: inline;
	color:#999;
}
@media (max-width: 767px) {
	.zoneProgrammeEntry span.titre {
		color:#000;
	}
}
.zoneProgrammeEntry span.votes {
	padding-right: 34px;
}

.zoneProgrammeEntry .vote {
    margin: 0 1em 0 0;
    position: relative;
    display: inline-block;
    height: 32px;
}
.zoneProgrammeEntry .vote::before {
	top: 2px;
    font-size: 21px;
}
.zoneProgrammeEntry .vote span {
	font-weight: bold;
  font-family: 'ABeeZee', sans-serif;
  margin: 5px 0 0 24px;
}

.zoneProgrammeEntry .info {
	flex-grow: 1;
  text-align: right;
  margin: 0 1em 0 0;
  position: relative;
  display: inline-block;
  height: 32px;
}
.zoneProgrammeEntry .info::before {
	top: 0px;
	right:0px;
	color:white;
  font-size: 30px;
}

.zoneProgrammeEntry .up {
	display:flex;
	align-items: center;
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	z-index: 2;
	background:#f0f0f0;
	opacity: 1;
	transition: all .25s ease-in-out;
}
.zoneProgrammeEntry .up:nth-child(2n) {
	border-left:8px solid #FFBC2F;
}



.zoneProgrammeEntry .up:hover {
	opacity: 0;
}
.zoneProgrammeEntry .down {
	display:flex;
	align-items: center;
	color:white;
	position:relative;
	top:0px;
	background:#FFBC2F;
	width:100%;
	height:100%;
}

.zoneProgrammeEntry.forum .up {
	background:#e4e4e4;
}
.zoneProgrammeEntry.forum .down {
	background:#133D69;
}

.zoneProgrammeDescriptif {
  margin: 15px 0;
  line-height: 22px;
}
.zoneProgrammeDescriptif a {
  margin-right: 15px;
}

.programmeTitres {
	position: absolute;
	width: 103px;
	display:block;
	word-wrap:break-word;
}

.programmeAnn {
	font-size: 13px;
	margin-bottom: 6px;
}

.programmeArt {
	font-size: 13px;
	display:block;
	line-height: 14px;
}
.actu .programmeArt {color:white;}

.ZoneProgrammeNext {
    float: left;
    margin-bottom: 20px;
    margin-top: 10px;
}

.zoneActuTop {
	width: 392px;
	height: 18px;
	background: url(/image/accueil/bg_div_generique_top.png) no-repeat center left;
}

.zoneActuMiddle {
	width:268px;
	background: url(/image/accueil/bg_div_generique_middle.png) repeat-y;
	padding:10px 12px;
}

.zoneActuBottom {
	width: 292px;
	height: 34px;
	background: url(/image/accueil/bg_div_generique_bottom.png) no-repeat;
}

.zoneAnnexe {
	width: 152px;
	height: 131px;
	background: url(/image/accueil/bg_div_annexe.png) no-repeat;
}

.zoneAnnexe2Middle {
	width: 152px;
    border-radius: 0.5em;
	    -moz-border-radius: 0.5em;
    box-shadow: 0 2px 3px #CCCCCC;
	    -moz-box-shadow: 0 2px 3px #CCCCCC;
		-webkit-box-shadow: 0 2px 3px #CCCCCC;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    margin-bottom: 1em;
    background:#f6f6f6;
}

.zoneGenerique3Top {
	width: 789px;
	height: 11px;
	background: url(/image/accueil/bg_div_generique3_top.png) no-repeat;
}

.zoneGenerique3Middle {
	width: 769px;
	background: url(/image/accueil/bg_div_generique3_middle.png) repeat-y;
}

.zoneGenerique3Bottom {
	width: 789px;
	height: 16px;
	background: url(/image/accueil/bg_div_generique3_bottom.png) no-repeat;
}

.zoneGenerique4Top {
	width: 388px;
	height: 11px;
	background: url(/image/accueil/bg_div_generique4_top.png) no-repeat;
}

.zoneGenerique4Middle {
	width: 368px;
	background: #f6f6f6;
    border-radius: 0.5em;
	    -moz-border-radius: 0.5em;
    box-shadow: 1px 2px 5px #CCCCCC;
	    -moz-box-shadow: 1px 2px 5px #CCCCCC;
		-webkit-box-shadow: 1px 2px 5px #CCCCCC;
    border-bottom: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    margin-bottom: 30px;
}

.zoneGenerique5Middle {
	width: 100%;
	background: #f6f6f6;
    border-radius: 0.5em;
	    -moz-border-radius: 0.5em;
    box-shadow: 1px 2px 5px #CCCCCC;
	    -moz-box-shadow: 1px 2px 5px #CCCCCC;
		-webkit-box-shadow: 1px 2px 5px #CCCCCC;
    border-bottom: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    margin-bottom: 30px;
}

.zoneGenerique4Bottom {
	width: 388px;
	height: 31px;
	background: url(/image/accueil/bg_div_generique4_bottom.png) no-repeat;
}

.zoneCommunity {
	background:#f6f6f6;
	width:280px;
	float:left;
    border-radius: 0.7em 0.7em 0.3em 0.3em;
	    -moz-border-radius: 0.7em 0.7em 0.3em 0.3em;
    box-shadow: 0 -5px 5px #101439;
	    -moz-box-shadow: 0 -5px 5px #101439;
		-webkit-box-shadow: 0 -5px 5px #101439;
    border-bottom: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    margin-bottom: 10px;
    max-height: 100px;
    overflow: hidden;
}
.zoneCommunity .content div {
	margin-top: 5px;
}


.zoneCommunity.middle {
	margin: 0 35px;
}

#zoneDB {
	margin-top:2em;
}

#zoneDB .titre {
	margin:5px auto 0;
	color:white;
	font-size:2em;
	width:170px;
	margin:5px auto 0;
}

.zoneDBdata {
	float: left;
	width: 130px;
	border-right: 1px dotted gray;
}

.zoneDBfiltre {
	float: left;
	margin:5px 0 0 20px;
}

.zoneDBfiltre a {
	color:white;
	padding:3px;
	font-weight:bold;
	margin:0 10px;
	cursor:pointer;
}
.zoneDBfiltre a:hover {
	background-color:highlight;
	text-decoration:none;
}
.zoneDBfiltre a:active {
	background-color:orange;
	color:highlight;
}

.zoneDBdata:hover {
	border-color: #26268f;
}

.zoneDBdataTitre {
	padding: 5px;
	height: 10px;
	text-align: center;
}
.zoneDBdataAjax {
	padding: 5px;
	margin-top:10px;
	font-size:0.8em;
	overflow: auto;
}

.audimat table {
	width:100%;
}
.audimat caption {
	font-weight:bold;
	text-align:left;
	margin-top:15px;
}
.toright {
	text-align:right;
}

.audimat li {
	list-style: decimal;
}


.cols20 {
	width:20%;
	min-width:20%;
	float:left;
}
.cols50 {
	width:50%;
	float:left;
}
.cols33 {
	width:33%;
	float:left;
}


.grayStyle {
    max-height: 500px;
    line-height: 20px;
    overflow: hidden;
    margin: 1em 1em 2em 20px;
}

.grayStyle.deg1on1 {background: linear-gradient( to right, #a7a7a7, #8b8b8b);}

.grayStyle.deg1on2 {background: linear-gradient( to right, #a7a7a7, #9a9a9a);}
.grayStyle.deg2on2 {background: linear-gradient( to right, #9a9a9a, #8b8b8b);}

.grayStyle.deg1on3 {background: linear-gradient( to right, #a7a7a7, #9f9f9f);}
.grayStyle.deg2on3 {background: linear-gradient( to right, #9f9f9f, #949494);}
.grayStyle.deg3on3 {background: linear-gradient( to right, #949494, #8b8b8b);}

.grayStyle a.citation {
	display:block;
	margin-bottom: 1em;
}
.grayStyle a.citation span {
	color:gray;
	display:block;
}
/*
.grayStyle a.citation:before {
    content: "«";
    display: block;
    position: absolute;
    margin-left: -0.8em;
    opacity: 0.3;
    font-size: 2em;
}
*/

.grayStyle ul {
        padding-left: 0px;
}
.grayStyle li {
        padding-left: 0px;
        list-style: none;
}

/* Fiches */

.fiche .pub {
	color:#01305f;
	padding: 32px;
}
.fiche .pub .descriptif a,
.fiche .about .comment a {
	color:#FFBC2F;
	text-decoration: underline;
}
.fiche .video {
	background-color: #000000;
	height:380px;
}
.fiche .musique {
	color:#01305f;
	padding: 32px;
}
.fiche .about {
	padding: 32px;
	background-color: #ffffff;
	min-height:380px;
}

.fiche .comment p {
	margin-bottom:0;
}

.spotlight {
	border: 1px dashed #35597f;
  border-radius: 1em;
  margin: 5px;
  padding: 0.7em;
  background: #fefefe;
  display: inline-block;
}



.fiche .subInfo {
  margin-top:2em;
}
.fiche .subInfo::before {
  color: #ffbc2f;
  content:"infos";
  display: block;
  font-size: 15px;
  text-transform: none;
}


.fiche .subLinks {
  margin-top:2em;
}
.fiche .subLinks::before {
  color: #ffbc2f;
  content:"liens";
  display: block;
  font-size: 15px;
  text-transform: none;
}

.subLinks > div {
  display: inline-block;
  margin: 0.5em;
  display:block;
  color: #ffbc2f;
}

.subLinks i {
	font-size: 2em;
	margin-right:0.5em;
	color: #ffbc2f;
}

.tail .bottom {
	margin: 0px 0px 0px -8px;
  width: calc(100% + 8px);
  bottom: 0px;
  left: 0;
	position: absolute;
	background: #e8e8e8;
}
@media (min-width: 768px) {
	.tail .bottom {
	}
}

.tail .bottom a {
  padding-left: 1em;
	display:block;
	text-decoration: none;
}

.tail .more {
  background: #cecece;
  float: right;
  font-size: 18px;
  border-radius: 10px 0px 0px 10px;
  padding: 10px;
  transition:all 1.5s;
}

.enVogue div.tail:hover .more {
	color: white;
	background:#ffbc2f;
	transition:all 0.2s;
}

.tail .vote {
		color: #000000;
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
}
.tail .vote::before {
    font-size: 16px;
    position: absolute;
    left: 0;
}
.tail .vote span {
		font-size: 13px;
		font-weight: bold;
    display: inline-block;
    margin-left: 20px;
    padding-top: 3px;
    font-family: 'ABeeZee', sans-serif;
}

.tail .commentaire {
	position: relative;
	text-align: center;
  display: inline-block;
  height: 32px;
  width: 32px;
}
.tail .commentaire.fa-comments:before {
    top: 5px;
    font-size: 32px;
    position: absolute;
    color: #bfbfbf;
    left: 0;
}
.tail .commentaire div {
    text-align: center;
    top: 10px;
    position: absolute;
    left: 0;
    width: 32px;
    font-family: 'ABeeZee', sans-serif;
}

.agenceAnnonceurs {
	margin-left:32px;
}
.agenceAnnonceurs article div {
  line-height: 150%;
  font-weight: bold;
  font-size: 20px;
}

.descriptifAgence {
	line-height: 200%;
	text-align: justify;
}

.fiche h1 {
  font-size: 40px;
  font-weight: normal;
  margin-left: 0;
  text-transform: uppercase;
  word-wrap: break-word;
}
.fiche h1.annonceur::before {
  color: #ffbc2f;
  content:"spot";
  display: block;
  font-size: 15px;
  text-transform: none;
}
.fiche h1.auteur::before {
  color: #ffbc2f;
  content:"musique";
  display: block;
  font-size: 15px;
  text-transform: none;
}
.fiche h1.agence::before {
  color: #ffbc2f;
  content:"agence";
  display: block;
  font-size: 15px;
  text-transform: none;
}

.fiche h2 {
  font-size: 32px;
  font-weight: normal;
  margin-left: 0;
  margin-bottom: 24px;
}

.fiche .periode {
	color: #6392c0;
}

.fiche .descriptif {
	line-height: 150%;
	text-align: justify;
}

.fiche .amazon {
	margin-bottom: 0.5em;
}
.fiche .amazon img {
	    border-radius: 0.5em;
	width: 120px;
  height: 120px;
}
/*
.fiche .amazon::before {
	content:"voir l'album";
	display:block;
	font-size: 10px;
}
*/

.fiche audio {
	width:100%;
	border-radius: 0.5em;
}
/*
.fiche .audio::before {
	content:"extrait audio";
	display:block;
	font-size: 10px;
}
*/

.fiche .amazon_mp3, .fiche .itune {
	display: inline-block;
}

.fiche .noVideo {
    background-position: 50%;
    height: 100%;
    background-size: cover;
}
.fiche .noVideo div {
    text-align: center;
    color: white;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    vertical-align: bottom;
    padding-top: 41%;
}


.hyphenateTxt {
-ms-word-break: break-all;
    word-break: break-all;   

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}  
   
#results .internautes {
	margin-top:10px;
	margin-bottom: 10px;
	border-top:1px dashed #d35f01;
}

#results .vote {
	background:transparent url(/image/fiche/emoticons.png) no-repeat scroll right top;
	padding-right:25px;
	margin-right:10px;
	display: inline-block;
	height:25px;
	font-size:1.5em;
	line-height:23px;
}
#results .vote_pos {background-position:right -50px;}
#results .vote_neg {background-position:right -75px;}
#results .vote_pos_large {background-position:right 0px;font-size:2em;}
#results .vote_neg_large {background-position:right -25px;font-size:2em;}

#results .nbReactions {font-size: 1.5em;}

#results .current_vote {
	display: table-cell;
	width: 150px;
}
#results .zone_reaction {
	display: table-cell;
	width: 630px;
}

#results .nbr_reaction {
	cursor:pointer;
}

.fiche .social {
	padding:32px;
}

.all_reactions {
	max-height:400px;
	overflow: auto;
}
@media (min-width: 768px) {
	.all_reactions {
		max-height:1000px;
	}
}
.all_reactions .item {
	    clear: both;
	    padding: 10px 0;
}
.all_reactions .count {
    color: gray;
    font-size: 14px;
}
@media (min-width: 768px) {
	.all_reactions .count {
    border: 1px solid silver;
    display: inline-block;
    padding: 0.5em;
    border-radius: 0.5em;
  }
}
    
.all_reactions .pseudo {
	font-weight: bold;
}
.all_reactions .date {
	font-style: italic;
}

.all_reactions .reaction {
	display: table-cell;
}


#results .detail_reaction {
	float:left;
	background:transparent url(/image/fiche/bg_reaction.png) no-repeat scroll right top;
	height:44px;
	width:86px;
}

#results .detail_reaction {
	float:left;
	background:transparent url(/image/fiche/bg_reaction.png) no-repeat scroll right top;
	height:44px;
	width:86px;
}

#results .zone_reaction input.vote {
	border:0;
}
#results .zone_reaction input.text {
	border:1px solid gray;
	color:gray;
	width: 250px;
}

#results .zone_reaction .avis {
	border-style: groove;
}
#results .zone_reaction .avis.pos {color:#089554}
#results .zone_reaction .avis.neg {color:#a00d2f}




#results .selected_cat {
	color: #5b9455;
}

#results .zone_url {
	float:left;
}



fieldset.avote {
	border: 0;
}



.avote .commentaires {
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid black;
    border-left: 5px solid #1a3a56;
    font-size: 16px;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
    font-family: inherit;
}
.avote .commentaires:focus {
    outline: none;
}
.avote input.commentaires {
}
.avote textarea.commentaires {
    height: 100px;
}

.avote .avis {
	border: 0;
	cursor: pointer;
	text-align: center;
	display:inline-block;
	margin-right: 1em;
}
.avote .avis .vote span {
	text-align: center;
	font-family: 'ABeeZee', sans-serif;
	font-size: 2em;
}
.avote .avis::before {
	font-size: 2em;
}

.avote.pos .pos, .avote.neg .neg {
	color:#ffbc2f;
}

.avote #submitReac {
	padding:10px;
}
fieldset.avote {
	margin-bottom:30px;
}
	
.social h2 {
	margin:0px;
}

.zone_ajax_reaction fieldset.avote {
	float:left;
	width:220px;
}

.zone_ajax_reaction .avote label {
	display:block;
}

.zone_ajax_reaction input {
	border: 1px solid #000000;
	color: #000000;
	font-size: 9px;
}

.zone_ajax_reaction .all_reaction {
	float:left;
	width:347px;
	margin-right:16px;
}

.zone_ajax_reaction .type_vote {white-space:nowrap;}
.zone_ajax_reaction .type_vote.pos {color:green;}
.zone_ajax_reaction .type_vote.neg {color:red;}



/* initiales & catégories */
.initiales {
	float:left;
	padding-bottom: 100px;
}
@media (min-width: 768px) {
	.initiales {
		width:65%;
	}
}

.initiales div {
	float:left;
	margin-bottom:10px;
	margin-right:25px;
}

.initiales span {
	width:100px;
}

.initiales a {
    border: 1px solid #eee;
    border-radius: 2px;
    display: block;
    float: left;
    margin: 6px 6px;
    padding: 8px 12px;
    text-align: center;
}
.initiales a:hover {
	background:#ffb05c;
	text-decoration:none;
	color:white;
}

@media (min-width: 768px) {
	.categoriesContainer {
		float:left;
		width: 30%;
	}
}
@media (max-width: 767px) {
	#categoriesFixed {
		display:none;
		top: 100px;
    width: 92%;
    height: calc(100% - 147px);
    position: fixed;
    background: white;
    margin: 1em;
    padding: 1em;
    border-radius: 0.5em;
    box-shadow: 0px 5px 10px #01305f;
	}
}

.categories a {
	padding: 0.5em;
	font-size: 16px;
	line-height: 20px;
	display: block;
}
@media (min-width: 768px) {
	.categories a {
		font-size: inherit;
		padding: 0.3em;
	}
}
.categories a:hover {
	background:#d35f01;
	text-decoration:none;
	color:white;
}

.categories {
  overflow-y: auto;
  max-height: calc(100% - 37px);
}
@media (min-width: 768px) {
	.categories {
    max-height: 500px;
	}
}


.closeButton {
	color:#d35f01;
  float: right;
  font-size: 1.5em;
  justify-content: center;
  display: flex;
}
@media (min-width: 768px) {
	.closeButton {
    display: none;
	}
}



/* contentHeader */

#mainHeader a.logo {
  display:block;
  margin: auto;
  background-image: url('/image/www/logo-mdp-2020-square-transp-blanc.png');
  width: 300px;
  height: 220px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#mainHeader .logo .baseline {
    text-align: center;
    margin: 0 auto;
    letter-spacing: 9.5px;
    font-size: 20px;
    left:5px;
    top: -32px;
    height: 23px;
    overflow: hidden;
    width: 0px;
    position: relative;
    word-break: break-all;
    word-wrap: break-word;
    color: white;
    transition: color 0.2s linear;
    animation: animLogoBaseline 3s 0.5s forwards;
    opacity:0;
}
@keyframes animLogoBaseline {
   0% { width: 0px; opacity:0; }
   100% { width: 415px; opacity:1; }
}

#mainHeader .logo:hover .baseline {
  color: #FFBC2F;
}

#mainHeader .logoMin {
	position:absolute;
	left:-200px;
	margin: 5px;
}
.siteUp .menusWrapper .logoMin {
	display:none;
}

.siteDown .menusWrapper .logoMin {
	display:block;
	left:0px;
}


.mainBottom img {
  position:relative;
  display: block;
  margin: 0px auto;
}

.mainBottom .titre {
  color:#6392c0;
  font-size: 16px;
}
.mainBottom .item {
  display:block;
  color:white;
  line-height: 25px;
  font-size: 16px;
}
.mainBottom a {
	color:#6392c0;
}

.pubMegaban {
	position: relative;
  z-index: 0;
}
.pubMegaban.bas {
    align-items: center;
    flex-direction: column;
    display: flex;
    padding: 1em 2em 2em;
}
.pubMegaban.bas::before {
    display: block;
    content:'publicité';
    color: #cecece;
}

#pubRight {
	position: relative;
  z-index: 0;
	width: 300px;
	text-align: center;
	float:right;
}
.pubSkyscraper {
	position: relative;
	margin: 1em;
  z-index: 0;
	width: 300px;
	display: flex;
	flex-direction: column;
  align-items: center;
}

.PubTail {
}

.pubMobile {
	text-align: center;
}




.feeds {
	float:right;
	margin-bottom:0;
	margin-left:0;
	margin-right:20px;
	margin-top:30px;
	text-align:right;
}

#zoneQuiz {
	font-weight: bold;
	margin-left:45px;
	font-size: 12pt;
	width: 292px;
	height: 95px;
	background: url(/image/accueil/icon_lg_quiz_out.png) no-repeat;
}

#zoneQuiz a {
	display:block;
	padding-bottom:25px;
	padding-left:0;
	padding-right:100px;
	padding-top:22px;
	text-align:center;
}

#layerFastSearch {
	background: #eeeeee;
	padding: 10px;
	border: solid 1px #5869ab;
}



.enVogue > div > div.tail {
	width: 96%;
  position: relative;
  float:left;
  border-radius: 0.5em;
  padding:15px 15px 75px 15px;
  margin: 0.5em;
  margin-bottom: 3em;
  border-top: 8px solid;
  background: #f8f8f8;
  transition: background 0.5s;
}
@media (min-width: 768px) {
	.enVogue > div > div.tail {
		height: 480px;
		padding:15px 16px 0px 16px;
	  overflow: hidden;
	  margin-bottom: 1em;
	}
}

.enVogue > div > div.tail:nth-child(2n) {
  border-top-color: #045EBB;
}
.enVogue > div > div.tail:nth-child(2n+1) {
  border-top-color: #FFBC2F;
}
.enVogue.fiche > div > div:nth-of-type(4n+1) {
  clear:both;
}






.enVogue audio {
	margin-top:20px;
  width: calc(100% - 100px);
}

.tail .annonceur,
.tail .artiste,
.tail .agence {
	clear: both;
	text-transform: uppercase;
	font-size:24px;
  word-wrap: break-word;
}
.tail .agence {
  clear:both;
}
.tail .produit,
.tail .titre {
	font-size:18px;
  word-wrap: break-word;
}
.tail .date {
	font-size:14px;
	color:#aaa;
	font-style: italic;
}
.tail .agence::before {
	content: "agence";
	display: block;
  font-size: 10px;
  font-weight: normal;
}
.tail .illustration {
}
.tail .illustration img {
	float: right;
    object-position: center;
    object-fit: cover;
    max-width: 90px;
    height: 90px;
    border-radius: 5px;
}
.tail .video img {
	float:right;
    object-position: center;
    object-fit: cover;
    max-width: 90px;
    height: 90px;
    border-radius: 5px;
}

.tail .cols2 {
	vertical-align: top;
  display: table-cell;
  width: 50%;
}
.tail .cols2:nth-child(2n+1) {
	padding-right:10px;
}

.aRight {
	text-align:right;
}



iframe.videoplayer, object.videoplayer, embed.videoplayer {
	width:100%;
	height:100%;
	border:0;
}



/*
  QUIZ
*/

body.quiz {
	padding-top: 0;
}
#quiz {
	width:500px;
}

#quiz .gauche {
	float:left;
	width:360px;
	height:379px;
	margin-left:5px;
}

#quiz .droite {
	float:right;
	width:120px;
	border-left:2px solid black;
	padding-left:10px;
}

#quiz .footer {
	height: 30px;
	text-align:center;
	padding-top:10px;
	background: transparent url(/image/commun/bg_maindiv_bottom.png) no-repeat scroll left bottom
}

#quiz .question { 
	position:absolute;
	width:360px;
	text-align: center;
}
 
#quiz .nfiche {
	color:black;
	font-size:1.5em;
	margin-bottom:1em;
}

#quiz .sous_titre {
}

#quiz span.win { 
	color:green;
	font-weight:bold;
}
#quiz span.ok { 
	color:green;
}
#quiz span.ko { 
	color:red;
	text-decoration:line-through;
}

#quiz span.win img { 
	border:4px solid green;
}
#quiz span.ok img { 
	border:2px solid green;
}
#quiz span.ko img { 
	border:2px solid red;
}


#quiz i.arrow { 
	font-size: 2em;
	margin: 0 0.5em;
}
#quiz i.arrow.next { 
	color: #4CAF50;
}
#quiz i.arrow.preview { 
	color: #00618e;
}
#quiz i.arrow.ending { 
	color: #4CAF50;
}



  
/*
- CMS
*/

.cms {
	clear:both;
}

.cms_resume_entries {
	padding: 1em;
}
.cms_resume_entries a {
	display:block;
	margin: 10px 0;
}
.cms_resume_entries a.active {
	color: #FF9800;
}

.socialsContainer {
	padding: 1em;
	text-align:right;
}
.socials {
	display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
	padding: 0.5em;
}
@media (min-width: 768px) {
	.socials {
	  padding: 0;
	}
}
.socialsContainer .url {
	margin: 0 5px;
	padding: 5px;
	border: 0;
	border-radius: 4px;
	background: #f1f3f4;
	text-align: center;
}


.short_url_form {
	border: 0;
	color: #01305f;
	display: inline-block;
	background: inherit;
}


/*
 - textes
 */

.txtTitre1 {
	font-size: 12pt;
	font-weight: bold;
}

h1.txtTitre1 {
	border-bottom: 1px dotted;
    margin-right: 1em;
    text-align: left;
}
h2.txtTitre1, h3.txtTitre2 {
	margin:0;
}

.txtTitre2 {
	font-size: 10pt;
	font-weight: bold;
}

.sTitre {
	width: 100%;
	height: 1px;
}

.txtDate {
	font-size: 18px;
	color: #ccc;
	font-weight: normal;
	font-style: italic;
	margin:10px;
	border-left:1px solid;
	border-right:1px solid;
	display:inline-block;
	padding:0 10px;
}

.txtAnnotation {
	color: #25284b;
	font-size: 8pt;
}

.txtAnnotation a {
	color: #25284b;
	font-size: 8pt;
}

.txtGras {
	font-weight: bold;
}

.found {
	background:yellow;
	font-weight:bold;
}

.txtAlert {font-weight: bold; color:red;}
.txtSucces {font-weight: bold; color:green;}
.puce {font-size:1.5em}

h1, h2 {
	font-size: 32px;
  font-weight: normal;
}

h1 .l1, h2 .l1, h3 .l1 {
  display: block;
  font-size: 70%;
}
h1 .l2, h2 .l2, h3 .l2 {
	display: block;
  text-transform: uppercase;
}
h1.marginLeft, h2.marginLeft {
  margin-left:22px;
  margin-bottom:10px;
}
@media (min-width: 768px) {
	h1.marginLeft, h2.marginLeft {
	  margin-left:30px;
	  margin-bottom:10px;
	}
}
.programme h2, .enVogue h2 {
	margin-top:0.5em;
}

.marginBottom {
	margin-bottom:32px;
}

.borderUnder {
	border-bottom: 1px solid;
}

h2.guide {
	font-size:18px;
	margin-top:10px;
}

	


.listeCat .tail {
	padding: 30px;
}

.listeCat .tail img {
	width:100%;
}
.listeCat .tail .item {
	  width: 100%;
    position: relative;
    height: 100%;
}
.listeCat .tail .desc {
  height: 100%;
  color: white;
  position: absolute;
  top: 0px;
  width: 100%;
  transition: background .50s ease-in-out;
}
.listeCat .tail .desc:hover {
  background: rgba(0, 0, 0, 0.5);
  transition: background .25s ease-in-out;
}

.listeCat .tail .desc div {
	font-size: 100%;
	text-align: justify;
 bottom: 0px;
  position: absolute;
	line-height: 150%;
	padding: 1em;
	text-shadow: 1px 1px 2px #000000;
	transition: font-size .25s ease-in-out;
}
.listeCat .tail .desc:hover div {
  font-size: 134%;
  transition: font-size .25s ease-in-out;
}

 
/*
 - couleurs
 */

.orange {color: #d35f01;}
.orangeBg {background: #d35f01;}
.blanc {color: #FFFFFF;}
.blancBg {background: #FFFFFF;}
.marine {color: #26268f;}
.marineBg {background: #26268f;}



/*
 - images
 */

img {
	border: 0px;
}



/*
 - tableaux
 */

td {
	vertical-align: top;
}



/*
 - listes
 */

ul {
	padding-left:10px;
}

li {
	margin-left: 12px;
}




/*
 - liens
 */

a {
	text-decoration: none;
	color: #000000;
}
.original a {
	text-decoration: underline;
	color: blue;
}

a:hover {
	text-decoration: underline;
}

.overUnder:hover {
	text-decoration: underline;
}
a.connexe {
	color:inherit;
	display: inline;
	border-bottom:1px dotted #7d97b1c7;
}
a.connexe:hover {
	text-decoration:none;
	border-bottom:1px solid;
}

a.exclamation span {
	display: inline-block;
	background-size: 200% 200%;
	background-position: 100% 0;
  background-image: linear-gradient(to right, #FFBC2F 50%, transparent 50%);
	animation: animExclamation 10s 2s infinite;
}
@keyframes animExclamation {
   0% { background-position: 100% 0; }
   30% { background-position: 0% 0; }
   100% { background-position: 0% 0; }
}

a.exclamation::after {
		color:#c1880f;
    content: "titre utilisé dans d'autres spots";
    display: block;
    font-size: 14px;
    text-transform: none;
    position: relative;
    bottom: 10px;
    opacity: 0;
    animation: animExclamationAfter 10s 2s infinite;
}
@keyframes animExclamationAfter {
   0% { opacity: 0; }
   30%   { opacity: 0; }
   50%   { bottom: 0px; opacity: 1; }
   95%   { bottom: 0px; opacity: 1; }
   100% { opacity: 0; }
}


.aContour a {
	text-decoration:none;
  background: #cecece;
  border-radius: 5px;
  padding: 10px;
  transition:all 0.5s;
  display: inline-block;
}
.aContour a:hover {
	color: white;
	background:#ffbc2f;
	transition:all 0.2s;
}

.aContour {
    text-align: right;
    display: block;
    width: 100%;
}



/* Pagination */
.pagination {
	float:right;
	margin-right:20px;
}
.pagination::before {
	content: "pages";
	display: block;
	font-size: 10px;
	font-weight: normal;
}

.pagination a {
	display:block;
	float:left;
	border-bottom:1px solid ;
	width:32px;
	text-align:center;
	margin:8px;
	text-decoration:none;
	font-size: 32px;
}

@media (min-width: 768px) {
	.pagination a {
		width:26px;
		margin:4px;
		font-size:26px;
	}
}

.pagination a.current {
	border-bottom:2px solid #d35f01;
	
}
.pagination a:hover {
	border-bottom-color:red;
}
.pagination span {
	float:left;
}	



/*
 - clouds
 */
.cloud a {cursor:help;}
.cloud_prog {color:orange;}
.cloud_pos {color:green;}
.cloud_neg {color:red;}
.cloud_0 {font-size:1.4em; font-weight:bold;}
.cloud_1 {font-size:1.1em;}
.cloud_2 {font-size:0.8em;}



/*
 - forms
 */

.fsaMenuMobile {
	display:none;
	width: 100%;
	position:absolute;
  	top: 55px;
}
.fsaMenuMobile fieldset {
	text-align: center;
}

.menuFirst #fsaMenu li {
	position:relative;
}
.menuFirst #fsaMenu span {
	background-color: transparent;
  border-style: solid;
  border-top-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 0px;
  position:relative;
}
#fsaMenu .item {
}
  
input.fastSearch {
	border: 1px dotted #000000;
	color: #000000;
	font-size: 9px;
	height: 12px;
	text-indent:2px;
	background-color: transparent;
}

input.fs {
	background: #ffffff;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 1px solid black;
	border-left: 5px solid #1a3a56;
	font-size: 1.5em;
	width: 100%;
	outline: none;
	padding: 0.4em;
	transition: width .25s ease-in-out;
}
input.fs::focus {
}

@media (min-width: 768px) {
	input.fs {
		font-size: 2em;
	}
}

#zone_fs {
	display:block;
	overflow:hidden;
	z-index:10;
	max-height:80vh;
	width:auto;
}
@media (min-width: 768px) {
	#zone_fs {
		
	}
}

.fsaMenuMobile #zone_fs {
	max-width:100%;
	height: 100vh;
	overflow-y: scroll;
	background: #ffffff;
	padding: 1em;
  box-shadow: 0px 0px 20px #01264c61;
}
@media (min-width: 768px) {
	.fsaMenuMobile #zone_fs {
		padding: 3em;
	}
}


#zone_fs a {
    flex-grow: 1;
    width: 100%;
    font-size: 18px;
    display: inline-table;
    color: #000000;
    padding: 1em;
    border: 0;
    flex-shrink: 1;
}
@media (min-width: 768px) {
	#zone_fs a {
		width: 50%;
	}
}
@media (min-width: 1200px) {
	#zone_fs a {
		width: calc(100%/3);
	}
}
#zone_fs a .pl {
	float: right;
	margin-left: 1em;
}

#zone_fs a span {
    display: block;
}

#zone_fs a:nth-child(3n+1):hover{
	background:#ebebeb;
}
#zone_fs a:nth-child(3n+2):hover{
	background:#dcdcdc;
}
#zone_fs a:nth-child(3n+3):hover{
	background:#d2d2d2;
}

#zone_fs a:hover {
	background:#ffffff;
	text-decoration: none;
	color:#000;
}
#zone_fs b {
	color:#ffbc2f
}

#s_ajax {
	overflow:hidden;
	flex-wrap: wrap;
}
@media (min-width: 768px) {
	#s_ajax {
	}
}

.null .advs_bt {
    color: #AAAAAA;
    font-size: 9px;
    text-align: right;
    display: block;
}
    
fieldset.null {
	border:0;
	padding:0;
}

.null a {
	color:blue;
	text-decoration:underline;
}




.quiz_zone_center {
	margin: 0 auto;
	width: 500px;
}
#quiz_zone {
	position:fixed;
    border-radius: 0.5em;
	    -moz-border-radius: 0.5em;
    box-shadow: 0px 5px 10px #01305f;
	    -moz-box-shadow: 0px 5px 10px #01305f;
		-webkit-box-shadow: 0px 5px 10px #01305f;
    background: #01305f;
	border:0;
	top:100px;
	padding:8px 11px;
	visibility:hidden;
	z-index: 10;
}
#quiz_zone .videoclose {
	text-align: right;
	color:white;
    text-decoration: underline;
    cursor: pointer;
}






/* V6 */

/* HEADER */

.blackfriday #mainHeader a.logo {background-image: url('/image/www/logo-musiquedepubtv-blackfriday2020.png');}
.sapin #mainHeader a.logo {background-image: url('/image/www/logo-2020-square-sapin.png');}
.byebye #mainHeader a.logo {background-image: url('/image/www/logo-mdp-2020-square-byebye2020.png');}
.kingofpub #mainHeader a.logo {background-image: url('/image/www/logo-mdp-2021-square-kingofpub.png');}
.poisson #mainHeader a.logo {background-image: url('/image/www/logo-mdp-2021-square-poisson.png');}
.hallo2021 #mainHeader a.logo {background-image: url('/image/www/musiquedepubtv6-logo-halloween-2021.png');}



.menuMainZone {
	margin: 0 auto;
}


.menuHeader {
    margin: 0 auto;
}
.menuHeader ul {
    padding:0px;
}




/* Menus Pub et Add */
.menuAdd {
  display:none;
  position:relative;
  top:55px;
  background: rgba(1, 45, 88, 0.5);
  height: 100vh;
}

.menus ul {
	list-style-type: none;
}

.menus li {
	margin-left: 0px;
	height: 55px;
	text-align: center;
}

.menus a {
	display: block;
	color: white;
	padding: 0 15px;
	line-height: 53px;
	font-size: 20px;
}
.menus .item {
	display: block;
	color: white;
	padding: 0 15px;
	font-size: 20px;
	line-height: 55px;
}
.menuAdd a {
	font-size: 16px;
	border-right: 1px solid #375779;
}
.menus a:hover {
	text-decoration: none;
	background-color: #ffffff;
	color:#01305f;
	transition: background 0.3s ease-in-out;
}
.menus a.isactive {
	background-color: #ffffff;
	color:#01305f;
}

.menus a.logoMenu {
	line-height: normal;
	background: transparent;
}
.menus a.logoMenu:hover {
	background: #f9f6ff;
}
.menus a.logoMenu:hover img {
	mix-blend-mode: difference;
}
.logoMenuMobile {
		text-align: center;
    position: absolute;
    width: 100%;
}
.logoMenuMobile a {
	display:block;
	margin: auto;
	width:141px;
	height:48px;
	background-image:url('/image/www/logo-musique-de-pub-tv-header-2020.png');
	background-size: cover;
}

.blackfriday .logoMenuMobile a {background-image:url('/image/www/logo-musique-de-pub-tv-header-blackfriday-2020.png');}
.sapin .logoMenuMobile a {background-image:url('/image/www/logo-2020-rectangle-sapin.png');}
.byebye .logoMenuMobile a {background-image:url('/image/www/logo-mdp-2020-rectangle-byebye.png');}
.kingofpub .logoMenuMobile a {background-image:url('/image/www/logo-mdp-2021-rectangle-kingofpub.png');}
.poisson .logoMenuMobile a {background-image:url('/image/www/logo-mdp-2021-rectangle-poisson.png');}
.hallo2021 .logoMenuMobile a {background-image:url('/image/www/logo-musique-de-pub-tv-header-halloween-2021.png');}


.menuAdd .apropos a {
    float: left;
    width: calc(100% / 3);
    font-size: 13px;
}

#fastsearch {
	position: absolute;
	z-index: 2;
	right: 0px;
  font-size: 20px;
  text-align: center;
  color: #ffffff;
	float: right;
  height: 55px;
  line-height: 55px;
  width: 55px;
  cursor: pointer;
}
@media (min-width: 768px) {
	#fastsearch {
		position: static;
	}
}
#fastsearch:hover {
	color: #ffbc2e;
}
#fastsearch.activ::before {
  content: "\f00d";
	transition: all 0.5s ease-in-out;
}
    
#burger {
  position: absolute;
  z-index: 1;
  display: inline-block;
  width: 55px;
  font-size: 20px;
  line-height: 55px;
  text-align: center;
  background: #ffbc2e;
	height: 55px;
}
#burger.activ div {
  transform: rotateZ(360deg);
  transition: all 0.5s ease-in-out;
}
#burger div {
  transform: rotateZ(0deg);
  transition: all 0.5s ease-in-out;
}
#burger.activ div::before {
  content: "\f00d";
	transition: all 0.5s ease-in-out;
}



.menus ul {
	padding-left:0px;
}
.menuAdd a {
	font-size:18px;
	border-bottom: 1px solid #003365;
}

@media (min-width: 768px) {

	.menusWrapper {
   	background-position: 90% center;
   	background-color:#01305f;
	}

	.siteUp .menusWrapper {
	    background-color: rgba(1, 48, 95);
	    transition: background 1s;
	}
	.siteDown .menusWrapper {
	    background-color: rgb(1 48 95 / 80%);
	    backdrop-filter: blur(8px);
	    transition: background 1s;
	}

	.menuAdd {
		position: absolute;
    top: 53px;
    background: transparent;
    height: auto;
	}	
	.menus ul {
	}
	.menus li {
		float: left;
		text-align: inherit;
	}
	.menus a {
		margin-left:1px;
		display: inline-block;
		color: white;
		font-size: 20px;
		background-color: #FFBC2F;
		transition: padding 0.3s ease-in-out, background 0.1s ease-in-out;
	}
	.menuAdd a {
		background-color: rgba(1, 48, 95, 1);
		border-bottom: 0;
	}
	.menus .item {
		margin-left:1px;
		display: inline-block;
		color: white;
		
		padding: 0 15px;
		font-size: 20px;
		background-color: rgba(1, 48, 95, 1);
		border-right: 1px solid #375779;
	}
	.siteDown .menusWrapper a,
	.siteDown .menusWrapper .item {
		transition: padding 0.5s ease-in-out;
	}
	.siteDown .menusWrapper input.fs {
		font-size: 18px;
	}
}




@media (min-width: 768px) {
	.menus a {
		padding: 0 5px;
	}
	.menuAdd {
		position: static;
		display: block !important;
	}	
	.menuAdd a,
	.menus .item {
		background-color: transparent;
		border-top: 1px solid #375779;
	}
	#burger {
		display:none;
	}
}

@media (min-width: 992px) {
	.menus a {
		padding: 0 10px;
	}
}
@media (min-width: 1200px) {
	.menus a {
		padding: 0 15px;
	}
}



.menuFirst li:last-child {
}







.menuFirstElem.quiz .item {
    color: white;
}


.menuFirstElem.last {
    border-right-color: transparent;
}





@media (min-width: 768px) {
	.menuSecond li {
		float: left;
	}
}







/* Menus dropdown */
.menus .dropDownMenu {
	float:right;
	position:relative;
}

.dropDownMenu ul {
	overflow: hidden;
	list-style-type: none;
  position:absolute;
  display:block;
  top:55px;
  max-height:0px;
  transition: all 0.3s;
  background: rgba(1, 48, 95, 0.78);
}
.dropDownMenu:hover ul {
  max-height:200px;
  display:block;
  transition: max-height 0.4s;
}

.dropDownMenu li {
	float: left;
	margin-left: 0px;
	height: auto;
}   

.dropDownMenu.aboutMenu ul {
  right:0px;
  text-align:right;
}
.dropDownMenu.socialMenu ul {
  text-align:center;
}

.dropDownMenu ul li {
	float: none;
	margin-left: 0px;
}

.dropDownMenu ul li a {
	line-height: inherit;
	border:0px;
	margin: 5px 0;
	transition: all 0.5s ease-in-out;
}
.dropDownMenu ul li a:hover {
  color: #FFBC2F;
  background:inherit;
  transition: all 0.3s ease-in-out;
}

.dropDownMenu a:hover {
	text-decoration: none;
	color: #FFBC2F;
	background-color: transparent;
}



    
.menus a.socialmenu {
	display:inline-block;
	border-right: none;
	font-size: 22px;
	cursor: grab;
}


#mainHeader .l1,
#mainHeader .l2 {
	font-size:1em;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.68);
	display: block;
  color: white;
}
#mainHeader h1 {
}

@media (min-width: 768px) {
	#mainHeader .l1,
	#mainHeader .l2 {
		font-size:1.5em;
	}
	#mainHeader h1 {
	}
}



@media (min-width: 768px) {

	/* Accueil */
	body.accueil #mainHeader .headerBg {
		background-image:url('/image/www/illustration-2020-halloween.jpg');
		filter:blur(10px) hue-rotate(-50deg) saturate(100%);
		animation: animAccueil 2s 0.5s forwards;
	}
	@keyframes animAccueil {
     from {
     	filter:blur(10px) hue-rotate(-50deg) saturate(100%);
     }
     to   {
     	filter:blur(0px) hue-rotate(0deg) saturate(80%);
     }
	}

	/* Accueil */
	body.blackfriday.accueil #mainHeader .headerBg {background-image:url('/image/www/illustration-blackfriday.jpg');}
	body.sapin.accueil #mainHeader .headerBg {background-image:url('/image/www/illustration-2020-sapin.jpg');}
	body.byebye.accueil #mainHeader .headerBg {background-image:url('/image/www/illustration-2020-byebye.jpg');}
	body.kingofpub.accueil #mainHeader .headerBg {background-image:url('/image/www/illustration-2021-kingofpub.jpg');}
	body.poisson.accueil #mainHeader .headerBg {background-image:url('/image/www/illustration-2021-poisson.jpg');}
	body.hallo2021.accueil #mainHeader .headerBg {background-image:url('/image/www/illustration-2021-halloween.jpg');}
	
	
	
	/* Boutique, proposez, presse, contacts */
	body.boutique #mainHeader .headerBg,
	body.proposez #mainHeader .headerBg,
	body.presse #mainHeader .headerBg,
	body.contacts #mainHeader .headerBg {
		background-image:url('/image/www/illustration-2020-tele.jpg');
   	filter:blur(10px) hue-rotate(45deg) saturate(100%);
		animation: animCtc 3.5s 0.5s forwards;
	}
	@keyframes animCtc {
     from {filter:blur(10px) hue-rotate(45deg) saturate(100%);}
     to   {filter:blur(0px) hue-rotate(0deg) saturate(100%);}
	}
	


	/* News, New */
	body.news #mainHeader .headerBg,
	body.new #mainHeader .headerBg {
		background-image:url('/image/www/illustration-2020-record.jpg');
   	filter:blur(3px) hue-rotate(45deg) saturate(135%);
		animation: animActu 2s 0.3s forwards;
	}
	@keyframes animActu {
     from {filter:blur(3px) hue-rotate(45-deg) saturate(135%);}
     to   {filter:blur(0px) hue-rotate(0deg) saturate(100%);}
	}
	
	
	
	/* Agence */
	body.agence #mainHeader .headerBg {
		background-image:url('/image/www/illustration-agence.jpg');
	}
	
	
	
	/* Catégorie, guide-index */
	body.categorie #mainHeader .headerBg,
	body.guide-index #mainHeader .headerBg {
		background-image:url('/image/www/illustration-2020-vusmettre.jpg');
		filter:blur(3px);
		animation: animCat 2s 0.5s forwards;
	}
	@keyframes animCat {
     from {filter:blur(3px);}
     to   {filter:blur(0px);}
	}

	
	
	/* Interview, interview */
	body.interview #mainHeader .headerBg,
	body.interviews #mainHeader .headerBg {
		animation: animInter 2s 0.5s forwards;
		filter:blur(3px);
		background-image:url('/image/www/illustration-2020-leds.jpg');
	}
	@keyframes animInter {
     from {filter:blur(3px);}
     to   {filter:blur(0px);}
	}
		
	body.compo #mainHeader .headerBg {
		background-image:url('/image/www/illustration-2020-giantmixage.jpg');
		filter:blur(3px);
		animation: animCompo 4s 0.5s forwards;
	}
	@keyframes animCompo {
     from {filter:blur(3px);}
     to   {filter:blur(0px);}
	}
		
	
	
	/* Retro */
	body.retro #mainHeader .headerBg {
		background-image:url('/image/www/illustration-2020-dominos.jpg');
		filter:blur(4px);
		animation: animRetro 2s 0.3s forwards;
	}
	@keyframes animRetro{
     from {filter:blur(4px);}
     to   {filter:blur(0px);}
	}
	
	
	
	/* code_url, id_fiche */
	body.code_url #mainHeader .headerBg,
	body.id_fiche #mainHeader .headerBg {
		background-attachment:fixed;
		background-size:contain;
		background-image:url('/image/www/illustration-fiche.jpg');
		animation: animFiche 3s 0.5s forwards;
	}
	@keyframes animFiche {
     0% { background-position: 50% -50px; background-size: 130%; }
     20%   { background-position: 50% -75px; }
     100%   { background-position: 50% -100px; background-size: 110%; }
	}

	/* code_url, id_fiche */
	body.code_url #mainHeader .headerBgBis,
	body.id_fiche #mainHeader .headerBgBis {
		background-attachment:fixed;
		background-size:contain;
		background-image:url('/image/www/illustration-fiche.jpg');
		animation: animFicheBis 3s 0.5s forwards;
		mix-blend-mode: soft-light;
	}
	@keyframes animFicheBis {
     0% { background-position: 50% -50px; background-size: 160%; }
     20%   { background-position: 50% -75px; }
     100%   { background-position: 50% -100px; background-size: 110%; }
	}
	
}





/* COMPO */

.detailCompo a {
	text-decoration: underline;
	color:rgba(1, 48, 95, 0.8);
}

article .illustration {
	width:100%;
}

article .actu::before {
	content:'actualité';
	font-size:12px;
	font-style: normal;
}
article .actu {
	margin-top:1em;
	font-size: 115%;
  color: #555;
  font-style: italic;
  line-height: 1.5em;
}

article .presentation {
	margin-top:2em;
}
article .presentation::before {
	content:'présentation';
	font-size:12px;
}

article .social {
	padding-left:5em;
	margin-bottom:2em;
}
article .social > div {
	margin-bottom:2em;
}

article .social.large div::before {
	color: #dddddd;
	font-size:200%;
	display:block;
}
article .youtube::before {
	content:'Youtube';
}
article .soundcloud::before {
	content:'Soundcloud';
}
article .deezer::before {
	content:'Deezer';
}
article .spotify::before {
	content:'Spotify';
}



/* CMS */

.cms {
	margin: 1em;
	font-size: 16px;
}

@media (min-width: 768px) {
	.cms {
		margin: 0;
		font-size: 14px;
	}
}

.cms input, .cms textarea {
	padding: 1em;
	width:100%;
	margin: 0.5em 0;
	font-size:1em;
}
@media (min-width: 768px) {
	.cms input {
		padding: 0.5em;
	}
}


iframe.sandb {
	  border: 0;
}
iframe.sandb.FOOTERMOBILE {
    width: 320px;
    height: 50px;
}
iframe.sandb.MEGABAN {
    width: 970px;
    height: 90px;
}
iframe.sandb.SKYSCRAPER {
    width: 300px;
    height: 600px;
}
iframe.sandb.PAVE {
    width: 300px;
    height: 250px;
}