/* 

Theme Name: GirondeMusicBox accueil

Theme URI: www.girondemusicbox.fr

Description: GirondeMusicBox 29/06

Author: Pierre Lemaire

Creation Theme by Pierre Lemaire & François Pero

*/



/*

COULEURS :



bleu clair : #0 0 6 D F 0
bleu clair utilisé : #457DBF



*/



* {

    position: relative;

    box-sizing: border-box;

}

p{

	font-size : 12px;

	padding : 0;

}

ul {

	font-size : 12px;

}

a {

    color: #35373D;

    text-decoration: none;

	font-weight : bold;

}

a:hover{

    color: #457DBF;

}

html{

    -webkit-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%;

    margin:0px;

    padding: 0;

	height : 100%;

}

body {

    background:url(images/Background.jpg);

	background-attachment: fixed;

    font-family: "Lucida Grande", Arial, Helvetica, Sans-serif;

    font-size: 0.8em;

    text-align: left;

    margin:auto;

    padding: 0;

	position: relative;

    width:100%;

    max-width:100%;

	height : 100%;

}

#tout {

	overflow: hidden;

	clear:both;

	min-height:100%

}



@media screen and (max-width: 1440px)

{

    body {

        font-size:0.6em;

    }

}


footer {

    background:url(images/footer.png);

    background-repeat: repeat;

	height : 40px;

	position: absolute;

    bottom:0;

    width: 100%;

    font-size: 0.9em;

    color:#888;

    font-weight:bold;

    font-family: sans-serif;

    text-transform:uppercase;

}

#txtfooter {

		display: flex;

		height : 100%;

}

.txtfooter1 {

        padding: 5px 0 0 30px;

		width : 20%;

		display : flex;

}

.txtfooter1 img {

        margin : 0 5px 0 0;

}

.txtfooter2 {

        padding: 5px 0 0 0;

        text-align: end;

	width : 60%;

	overflow : hidden;

}

.txtfooter2  a{

        color : #1787bf;

}

.txtfooter2  a:hover{

        color : #FFD700;

}

.txtfooter3 {

        padding: 5px 0 0 0;

	width : 20%;

	text-align : end;

}

.txtfooter3 a {

        color : #1787bf;

}


#reseaux-sociaux{

	justify-content : space-around;
	align-items: center;
}

.block-logo{

	width : 100%;
	height : 100%;
	display : inline;
	justify-content : center;
	align-items: center;
	margin : 0 5px;

}

.block-logo img {
	width : 33px;
	height : 33px;
}

#block-droite #reseaux-sociaux a{

}

#block-droite #reseaux-sociaux a:hover{
	width : 45px;
	height : 45px;

}

article {

    padding-bottom:2%;

}

video {

    display: inline-block; max-width: 100%;

}







@font-face { 	

font-family: "Bellota"; src: url('fonts/Bellota-Regular.otf');

}



@font-face { 	

font-family: "pixiefont"; src: url('fonts/PixieFont.ttf');

}



@font-face { 	

font-family: "edo"; src: url('fonts/edo.ttf');

}



@font-face { 	

font-family: "copyB"; src: url('fonts/COPYB.ttf');

}



@font-face { 	

font-family: "sansita"; src: url('fonts/Sansita-Regular.ttf');

}



#page {

    margin: 0;

    padding: 0;

    width:100%;

    position: relative;

}

header {

    background:url(images/header1920px.png) ;

    background-size:100%;

    font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Georgia, Sans-serif;

    padding: 0;

    margin:0;

    position: relative;

	display: flex;

	height : 120px;

}

#logo {

    padding: 15px;

    height: auto;

    text-align: center;

	width : 17%;

	display : flex;

	justify-content: center;
width: 100%;
	align-items : center;

}

#logo img{

	height : 120px;

	width : auto;

	display : flex;

	justify-content: center;

}

#bandeaux{

	width : 66%;

	height : 100%;

	display: flex;

    flex-direction: column;

    justify-content: flex-end;

	flex : 2; /* Les bandeaux grossissent 2 fois plus vite en cas de changement de résolution */

}



#slogan {

	height : 20%;

    background-color: #457DBF;

	display : flex;

	align-items : center;

	justify-content : center;

}

#slogan p {

	margin : auto;

	padding : 0;

	font-weight: bold;

    font-size:1.1em;

    letter-spacing:1px;

    text-align:center;

    color:white;

    text-decoration:none;

    font-family: Trebuchet MS, Sans-serif;

    text-transform:uppercase;

}

nav {

	height : 60%;
	width: 100%;
    	margin: 0;
    	background-color:white;

}
	#menu {
		float: left;
    		width: 44%;
    		height: 100%;
		margin : 0 0 0 28%;
    		
	}

	.menu-menu-mobile-container {

		height : 100%;

		}
		
	#recherche {
   		float: left;
   		height: 100%;
    		width: 28%;
		padding : 10px 133px 12px 230px;
		}


.menu-menu-header-container{

	width : 100%;

	height: 100%;

}

.menu-menu-header{

	width : 100%;

	height: 100%;

}

nav ul {

    list-style-type:none;

	display: flex;

	height: 100%;

	width : 100%;

	justify-content : space-around;

	align-items : center;

	margin : 0;

	padding : 0;

}

nav ul li {

	height : 33px;
	text-align: center;
    	font-size: 12px;
    	text-transform: uppercase;
   	font-weight: bold;
	flex : 1;
	/* display : flex; */
	flex-direction : column;
	color : #35373D;
	border-right: solid 1px #457DBF;
	border:none;
}

nav ul li:last-child {
    border: none 0;
}

nav ul li:hover {

	background-color : #457DBF; /* bleu logo */

	color : white;

}

nav ul li a {

	height : 100%;

	width : 100%;

	display : flex;

	align-items : center;

	justify-content : center;

}

nav ul li a:hover {

	color : white;

	background-color : #7AB3F5; /* bleu clair */

}

nav ul li ul {

	display: none;

}

nav ul li:hover ul {

	text-align : left;

	display : flex;

	flex-direction: column;

	align-items : flex-start;

    height: auto;

	z-index : 99;

	position: absolute;

}

nav ul li ul li{

    background-color: #457DBF; /* bleu logo */

	min-height : 25px;

}

nav ul li ul li:hover {

    background-color: #7AB3F5; /* bleu clair */

}

.sub-menu li {

	width : 100%;
	height : 28px;
}

.sub-menu li a{

	color:#35373D; /* gris */
	display : flex;
	font-size : 12px;
	padding: 10px 0;
	align-items : center;
	z-index : 99;

	

}

.sub-menu li a:hover{

	color:white;

	

}

nav li ul li a {

    color:#1787BF; 

	

}

#block-droite{
		position: absolute;
		display : inherit;
		background-color: mediumseagreen;
		right: 0;
		top : 0;
		border-top-left-radius: 16px;
    		border-bottom-left-radius: 16px;
    		border-left-width: 3px;
    		border-color: white;
    		border-left-style: initial;
    		color: white;
}
#block-droite a {
	color : white;
}


#block-droite p.retour-back-office {
		text-align : center;
  		padding: 5px 5px 5px 10px;
   		margin: 0;
}

#block-droite p.retour-back-office2 {
		text-align : center;
  		padding: 5px 5px 5px 10px;
   		margin: 0;
		border-left: solid 2px;
    		border-bottom-left-radius: 19px;
    		border-left-width: 4px;
}

#block-droite #searchbar {

	height : 50%;
	display : flex;
	padding-left : 20px;
	align-items: center;

}

#block-droite #searchbar input[type="submit"]{

	display : none;
	background:url(images/glass.png) top right no-repeat;

	cursor: pointer;

	height : 32px;

	width : 32px;

	border:0;

}

#block-droite #searchbar input[type="submit"]:hover{

	background:url(images/glasshover.png) top right no-repeat;

	cursor: pointer;

	height : 32px;

	width : 32px;

	border:0;

}


#titre-site-h1 {
	display:none
}


#partie-centrale{

	display : flex;

	width : 100%;

	height : 100%;

	min-height : 100%;

}


#sidebar-gauche{

	margin-top : 10px;

	width : 17%;
	margin-left : 10px;

	height : 540px;

	/* max-height : 700px; */

	background-color : white;

	border-radius: 5px;

	box-shadow: 10px 10px 5px grey;

}

#sidebar-gauche h1{

	text-align : center;
	color: #35373D;
	font-weight: bold;
	font-size: 18px;
	margin : 0;
	padding : 0;
	padding-top : 8px;
	text-transform:uppercase;

}

#sidebar-gauche h2{

	text-align : center;
	color: #35373D;
	font-weight: bold;
	font-size: 18px;
	margin : 0;
	padding : 0;
	padding-top : 8px;
	text-transform:uppercase;

}

#sidebar-gauche h3{

	text-align : center;
	color: #35373D;
	font-weight: bold;
	font-size: 13px;
	margin : 0;
	padding : 0;

}


#sidebar-gauche #actubref-titre {

	height : 30px;
    z-index:98;

}

#sidebar-gauche #playlist {

	height: 32%;
	max-height: 160px;
    background-color: lightgray;
    margin: 10px 10px;
	border: 1px groove;
	border-color: black;
	display: flex;
	flex-direction: column;
}

#sidebar-gauche #playlist img {

	height: 75%;
	float: left;
	padding: 2% 0 0 0;
	margin: auto;
}


#sidebar-gauche #playlist-texte {
	
	padding: 2%;
    margin: auto;
}

#sidebar-gauche #playlist-texte p {
	
	color: #35373D;
	text-align: center;
}

#sidebar-gauche p {

    margin: 5px 0 15px;
    padding: 0;
    text-align: center;
    font-size: 13px;
}

#sidebar-gauche #sous-titre {

    margin: 1% 0%;
	padding: 0;
	font-size: 11px;
}

#sidebar-gauche #actubref-articles {

    height: 85%;
}


#sidebar-gauche hr {

    width: 45%;
    color: black;
    margin-top: 15px;
    margin-bottom: 15px;

}

#sidebar-gauche iframe{

	margin: 0;
	padding: 0;
	width : 100%;
	height : 100%;
	max-height : 100%;
	border : 0;
}

#sidebar-gauche #logo-sidebar{

	margin: auto;
	padding: 0;
	width : auto;
	text-align:center;
	display:none;
}

#sidebar-gauche #logo-sidebar img{

	width: 61%;
	display:none;
}

#contenu-blog{
	width : 50%;
	height : 100%;
	background-color: white;
	margin: 20px auto 50px auto;
	padding : 20px;
	display : flex;
	flex-direction : column;
}

#titre-site-h1 {
	display:none;
}

#contenu-blog #titre-page {
	color : #35373D;
	display : flex;
	justify-content : space-between;
	border-bottom: 2px solid grey;
	margin-bottom : 15px;
 }


#contenu-blog #titre-page h1{
    font-size : 24px;
    padding : 0;
    margin : auto 0;
    float : left;
}

#contenu-blog #titre-page h2{
	font-size : 24px;
	padding : 0;
	margin : auto 0;
	float : left;
}

#contenu-blog #content {
	justify-content : center;
	flex-direction : column;
}
#contenu-blog #content p {
max-width: 100%;
float: left;
}
#contenu-blog #content p img {
max-width: 100%;
height: auto;
margin-right:10px;
}

#contenu-blog #content .wp-caption {
    max-width: 100%;
}

#contenu-blog #content .wp-caption img {
    width: 100%;
    height: auto;
}

#contenu-blog #content a {
color : #457DBF;
}

#contenu-blog #content iframe{
	width: 100%;
	height : 500px;
	
}
#image {
    height: auto;
    width: auto;
    float: left;
    max-height: 150px;
    max-width: 200px;
    margin-right: 15px;
    margin-bottom: 15px;
}
#contenu{

	width : 66%;

	height : 100%;

	padding : 20px 20px 40px 20px;

	display : flex;

	flex-direction : column;

}

#contenu a {

	color : #457DBF;

}

#contenu a:hover {

	color : black;

}


#contenu #titre-page {

	color : #35373D;

	display : flex;

	justify-content : space-between;

	border-bottom: 2px solid grey;

	margin-bottom : 15px;

 }

#contenu #titre-page h1{

	font-size : 24px;

	padding : 0;

	margin : auto 0;

	float : left;

}


#contenu #titre-page h2{

	font-size : 24px;

	padding : 0;

	margin : auto 0;

	float : left;

}

#contenu #titre-page .alphabet ul{

	list-style-type:none;

	display: flex;

	height: 100%;

	align-items : center;

	margin : 0;

	padding : 0;

 }

#contenu #titre-page .alphabet ul li a {

	font-size : 12px;

	font-weight : bold;

 }

#contenu #titre-page .alphabet ul li a:hover {

	color : #457DBF;

 }

#contenu #titre-page .alphabet ul li {

	margin-left : 2px;

	margin-right : 2px;

 }

#contenu #titre-page hr {

	width : 60%;

	float : left;

}



#content{

	width : 100%;

	display : flex;

	flex-wrap : wrap;

	justify-content : space-around;

}

#content p{

	font-size : 12px;

	text-align: justify;

    text-justify: inter-word;

}



#accueil-zoom {

	display : flex;

	align-items : center;

	justify-content : space-around;

	flex-wrap : wrap;

	width : 100%;

	height : auto;

	padding : 20px 0 0 0;

	

}

.zoom {

	height : 250px;

	margin-bottom : 15px;

	width : 45%;

	min-width : 250px;

	border : 2px solid grey;

	border-radius : 5px;

	background-color : white;

	padding : 15px 15px 15px 15px;

	overflow : hidden;

}

.zoom  h1{

	font-weight : normal;

	font-size : 20px;

	font-style : italic;

	color : black;

	margin : 0;

	padding : 0;

	padding-left : 15px;

}

.zoom  h2{

	margin :0;

	padding : 0;

	font-size : 24px;

	font-family : sans-serif;

	margin-bottom : 10px;

}

.zoom  ul {

	display : flex;

	flex-wrap: wrap;

	list-style-type:none;

	padding : 0;

	margin-bottom : 30px;

}

.zoom  ul li {

	border-radius : 7px;

	background-color : #35373D;

	margin-right : 5px;

	margin-top : 3px;

}

.zoom  ul li a{

	color : white;

	margin : 10px;

	font-size : 14px;

	font-weight : bold;

}

.zoom  ul li a:hover{

	color : #457DBF;

}

.zoom  p{

	margin :0;

	padding : 0;

	font-size : 12px;

	font-family : sans-serif;

	text-align: justify;

    text-justify: inter-word;

	

}

.zoom hr{

	width : 65%;

	margin-top : 20px;

	margin-bottom : 20px;

}

.zoom  img{

	float : left;

	margin-bottom : 3px;

	margin-right : 10px;

	max-width : 120px;

	max-height : 120px;

	width : 100%;

	height : auto;

}

#ajouter_fiche {
    	display: flex;
	flex-direction: column;
	width : 200px;
    	font-size: 13px;
    	align-items: center;
    	text-align: center;
    	background-color: white;
	border-top-left-radius: 16px;
    	border-bottom-left-radius: 16px;
    	border-bottom-right-radius: 16px;
}

#image_reseau {
	width : 200px;
	height: 157px;
}

#image_reseau img {
	border-top-left-radius: 16px;
	width : 200px;
	height: 157px;
}

#image_reseau a {
	padding-top : 3px;
}

.numero_page {

	width : 100%;

	display : flex;

	justify-content : space-between;

	align-items : center;

	margin-bottom : 10px;

	margin-top : 10px;

}

.numero_page ul {

	display : flex;

	flex-wrap: wrap;

	justify-content : center;

	list-style-type:none;

	margin : 0;

	padding : 0;

}

.numero_page ul li {

	margin : 0 5px 0 5px;

	display : flex;

	align-items : center;

}

.numero_page ul li  a{

	margin : 0;

	font-size : 18px;

	font-weight : bold;

}

.numero_page ul li  a.selected{

	color : #FFD700;

}

.nav_fleche{

	display : flex;

	margin : 0 20px 0 20px;

	font-size : 20px;

}

.nav_fleche a{

	margin : 0;

}



.category-section{

	margin : 15px 0 25px 0;

	padding : 20px 20px 20px 20px;

	background-color : white;

	display : flex;

	flex-wrap : wrap;

	flex-direction : column; 

	align-items : center;

	justify-content : center;

}

.category-section hr{

	margin : 10px 0 10px 0;

	width : 100%;

    border-style: inset;

    border-width: 2px;

}

.category-section h2{

	font-size : 17px;

	text-align : center;

	margin : 0;

}

.sous-categories-liste {

	display : flex;

	flex-wrap: wrap;

	align-items : center;

	justify-content : center;

	list-style-type:none;

	padding : 0;

}

.sous-categories-liste li{

	font-size : 14px;

	font-weight : bold;

	margin : 0 10px 5px 10px;

}

.sous-categories-liste a{

	color : #35373D;

}

.sous-categories-liste a:hover{

	color : #457DBF;

}

.suggestions-miniatures {

	width : 70%;
	background-color : lightgrey;
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	align-items : space-around;

}

.retour-haut {

	float : right;

	font-size : 12px;

}

#contenu #titre-page #alphabet-2.alphabet ul li {

	margin-left : 5px;

	margin-right : 5px;

}

#alphabet-2 ul{

	list-style-type:none;

	display: flex;

	flex-wrap : wrap;

	height: 100%;

	align-items : center;

	justify-content : flex-end;

	padding : 0;

 }

#alphabet-2 ul li a {

	font-size : 12px;

	font-weight : bold;

 }

#alphabet-2 ul li a:hover {

	color : #457DBF;

 }



article {

	background-color : white;

	margin : 15px 0 30px 0;

	width : 100%;

	padding : 20px 20px 20px 20px

}

article hr{

	width : 70%;

	margin : 0;

}

article .blog-titre {

	font-size : 20px;

}

article .blog-titre  h1{
	margin : 0;

}

article .blog-titre  h2{
	margin : 0;
	font-size: 20px;

}

article.blog-article {
	display:flex;
}

.blog-image  {
	margin : auto 0;
	padding-right: 20px;
		
}


.blog-image img {
	width: 200px;
	
}

article p {

	font-size : 12px;

	

}

#blog-contenu {

	font-size : 12px;

	text-align: justify;

    	text-justify: inter-word;

}

#blog-contenu p {

	text-align: justify;
	text-justify: inter-word;
	margin-top : 6px;

}
#blog-contenu img {

	margin : 10px 10px 10px 10px;

	width : auto;

	max-width : 600px;

	height : auto;

}

#contenu #blog-contenu iframe {
	margin : 15px 30px;
 }

.blog-category {
	padding: 3px 0 5px 0;
    	margin: 6px 0 0 0;
}
.blog-category a {
	font-size: 12px;
    	color: #457DBF;
    	padding: 5px;
    	border-radius: 7px;
    	background-color: lightgrey;
    	margin-right: 5px;
    	margin-top: 4px;
}
#logo-discogs {

	text-align : center;

}

#logo-discogs img {

	height : 140px;

}

	

#content #dernieres-sorties p{

	padding : 0;

	}



#content #dernieres-sorties a{

	color : #457DBF

	}

.tiers {

   	margin: 10px;
	/* width : 125px */
   	width: 13%;
    	height: 174px;
	display : flex;
	flex-direction : column;
	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;
   	border-bottom-right-radius: 10px;
    	border-bottom-left-radius: 10px;

}

.tiers:hover {

	box-shadow: 0 0 5px 2px #fff;

}

.tiers-artistes-reseaux {
	margin : 14px;
	width : 26%;
	height: 210px;
	display : flex;
	flex-direction : column;
	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;
   	border-bottom-right-radius: 10px;
    	border-bottom-left-radius: 10px;
	}

.tiers-artistes-reseaux:hover {

	box-shadow: 0 0 5px 2px #fff;

}

.postindex {

    width: 100%;

    height: 100%;

    position: relative;

    overflow: hidden;

}

.thumbnail {

	height : 60%;
	display : flex;
	align-items : center;
	justify-content : center;
	border-top-right-radius: 10px;
    	border-top-left-radius: 10px;

}

.thumbnail img {

    	background-size:contain;
	height : 100%;
	width : 100%;
	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;

}

.texte {

    	background-color:white;
    	text-align: center;
	width:100%;
	height : 40%;
    	font-family: sans-serif;
	padding-top : 8px;
	border-bottom-right-radius: 10px;
    	border-bottom-left-radius: 10px;



}

.texte a{

   	 margin : 0;
    	color: white;
	font-size : 12px;

}

.texte a:hover{

	color: #457DBF;

}

.texte h2{

    	margin : 0;
	font-size: 11px;
	text-transform:uppercase;
	color: black;

}

.texte .categorie_index {

    	color: #457DB1;
	background: lightgrey;
	position : absolute;
	width : 100%;
	padding: 2px;
	bottom : 0;
    	font-weight:bold;
	font-family: Verdana;
	overflow : hidden;
	text-overflow: ellipsis;
	border-bottom-right-radius: 10px;
    	border-bottom-left-radius: 10px;
}

.texte .categorie_index a {

    color : #457DB1;
	font-size : 9px;

}

.texte .categorie_index a:hover {

    	color:black;
	z-index:99;
	}

.texte .categorie_index-artistes-reseaux {
    	color: #457DB1;
	background: white;
	position : absolute;
	width : 100%;
	padding: 2px;
	bottom : 0;
    	border-top: 2px dotted lightgrey;
    	font-weight:bold;
	font-family: Verdana;
	overflow : hidden;
	text-overflow: ellipsis;
	border-bottom-right-radius: 10px;
    	border-bottom-left-radius: 10px;
}

.texte .categorie_index-artistes-reseaux a {
	font-size : 9px;
	color: #457DB1;
	}

.texte .categorie_index-artistes-reseaux a:hover {
	color: black;
	z-index : 99;
	}

#contenu .single-cat-block{

	display : flex;

	min-height : 430px; /* A CHANGER OU A RENDRE RESPONSIVE */

	width : 100%;

	background-color : white;

	/* align-items : center; */

	justify-content : center;

	margin-bottom : 15px;

}

.single-cat-block hr{

	position :relative;

	width : 120px;

	margin-top : 20px;

	margin-bottom : 20px;

}

#gauche{

	padding : 15px 15px 15px 15px;

	width : 60%;

	border-right : 2px solid grey;

}

#gauche h1 {

	text-align : center;

	font-size : 20px;

	color: #35373D;

	margin : 0;

	padding : 0;

}

#gauche h2 {

	text-align : center;

	font-size : 20px;

	color: #35373D;

	margin : 0;

	padding : 0;

}

#gauche img {

	height : auto;

	width : auto;

	float : left;

	max-height : 150px;

	max-width : 200px;

	margin-right : 15px;

	margin-bottom : 15px;

}

#gauche p {

	text-align: justify;

    	text-justify: inter-word;

	font-size : 12px;

}




#gauche ul {


	list-style-type:none;
	padding : 0;
	margin:0;
	margin-bottom : 30px;
	width: auto;

}

#gauche ul li {

	border-radius : 7px;
	background-color : #35373D;
	margin-right : 5px;
	margin-top : 3px;
	width : auto;
	float : left;

}

#gauche ul li a{

	color : white;

	margin : 10px;

	font-size : 12px;

	font-weight : bold;

}

#gauche ul.list-cat-reseaux li a{

	color : #FFD700;

	margin : 10px;

	font-size : 12px;

	font-weight : bold;

}

#gauche ul li a:hover{

	color : #457DBF;

}



#gauche p.modifier-page {

	text-align : center;

}

#informations{

	width : 100%;

	display : flex;

	overflow : hidden;

	justify-content : space-around;

	flax-wrap : wrap;

}

#informations hr{

	margin-top : 5px;

	margin-bottom : 5px;

}

#informations #single-disco{

	display : flex;

	flex-direction : column;

	align-items : center;

	overflow : hidden;

	width : 50%;

	text-align : center;

}

#informations #single-contacts{

	display : flex;

	flex-direction : column;

	align-items : center;

	overflow : hidden;

	width : 50%;

	text-align : center;

}

#informations p{

	text-align : center;

	margin : 0;

	padding : 0;

}


#gallery-1 img {	/* Pour empêcher les galleries d'images de dépasser du bord */
    width: 100%;
    height: auto;
			}

#gallery-2 img {	/* Pour empêcher les galleries d'images de dépasser du bord */
    width: 100%;
    height: auto;
			}

#gallery-3 img {	/* Pour empêcher les galleries d'images de dépasser du bord */
    width: 100%;
    height: auto;
			}

#gallery-4 img {	/* Pour empêcher les galleries d'images de dépasser du bord */
    width: 100%;
    height: auto;
			}

#droite {

	padding : 15px 15px 15px 15px;

	height : 100%;

	width : 40%;

	display : flex;

	flex-direction : column;

}

.bloc-multimedia #bloc-multimedia-1 {

	display : flex;

	flex-direction : column;

	align-items : center;

	justify-content : center;

	margin : 0;

}

#bloc-multimedia-1 iframe {

	margin : 10px 10px 10px 10px;

	width : 80%;

	height : auto;



}

.bloc-multimedia #bloc-multimedia-2 {

	display : flex;

	flex-direction : column;

	align-items : center;

	justify-content : center;

	margin : 0;

}

#bloc-multimedia-2 iframe {

	width : 80%;

	height :140px;

	margin : 10px;

}

.bloc-multimedia #bloc-multimedia-3 {

	display : flex;

	flex-direction : column;

	align-items : center;

	justify-content : center;

	margin : 0;

	width : 80%;

	height : 80px;

}



#map {

	width: 80%; 

	height: 230px; 

	margin: 10px;

}



#sidebar-droite{

	margin-top : 10px;
	margin-right : 10px;
	padding-left : 10px;
	width : 17%;
	height : 540px;
	/* max-height : 700px; */
	background-color : white;
	border-radius: 5px;
	box-shadow: -10px 10px 5px grey;

}

#sidebar-droite hr{

	width : 45%;

	color : black;

	margin-top : 15px;

	margin-bottom : 15px;

}

#sidebar-droite h1{

	text-align : center;
	color: #35373D;
	font-weight: bold;
	font-size: 18px;
	margin : 0;
	padding : 0;
	padding-top : 8px;
	text-transform:uppercase;

}

#sidebar-droite h2{

	text-align : center;
	color: #35373D;
	font-weight: bold;
	font-size: 18px;
	margin : 0;
	padding : 0;
	padding-top : 8px;
	text-transform:uppercase;

}

#sidebar-droite p{	

	margin : 5px 0 15px;
	padding : 0;
	text-align : center;
	font-size : 11px;
	display : none;
	

}

#sidebar-droite #actubref-titre {

	height : 30px;
	margin-bottom : 0px;

}

#sidebar-droite #actubref-articles {

	height : 85%;
	margin: 10px 10px 0 0;

}

#sidebar-droite .padlet {

	height:58%;
}

#sidebar-droite .agenda-musical {

	max-width: 100%;
	margin-top: 10px;
	}

#sidebar-droite .agenda-musical img {

	max-width: 100%;
}

#informations-reseaux{

	width : 100%;

	display : flex;

	overflow : hidden;

	justify-content : space-around;

	flex-wrap : wrap;

}

#informations-reseaux hr{

	margin-top : 5px;

	margin-bottom : 5px;

}

#informations-reseaux .single-contacts-reseaux{

	display : flex;

	flex-direction : column;

	align-items : center;

	overflow : hidden;

	width : 50%;

	text-align : center;

}

#informations-reseaux p{

	text-align : center;

	margin : 0;

	padding : 0;

}

.search-post{

	width : 80%;
	background-color : white;
	margin-top : 5px;
	margin-bottom : 5px;
	display: flex;
}

.search-post h2{

	text-transform : uppercase;

}

.search-thumbnail{

	height : 100px;

	width : 100px;

	background-size:contain;

	display : flex;

	align-items : center;

	justify-content : center;

}

.search-thumbnail img{

	height : 90%;

	width : 90%;

}

.search-post-content {

	width : 80%;

	height : 90%;

	overflow : hidden;}

	

.quisommesnousintro {

    font-size: 1em;

    width:80%;

    margin:0;

}

.quisommesnousintro img {

    width:200px;

    height:200px;

    margin:auto;

}


.quisommesnousintro iframe {

 width: 80%;

}

.centrequisommesnous {

 	float : left;

        padding:0;

        margin: 0 1% 2% 0;

	background-color:grey;

    	border-radius:10px;

	text-align: justify;

}

.centrequisommesnous p {

 	margin : 0;

	padding : 0 3% 3%;

}

.centrequisommesnous img {

    width: 100px;

    height: 80px;

    float: left;

    margin: 0% 4% 3%;

}

.centrequisommesnous h3 {

    width: 100%;

    padding: 0;

    color:white;

    height: auto;

	text-transform : uppercase;

	font-size : 13px; 

	text-align : center;

}

.centrequisommesnous a {

    color:white;

	z-index : 90;

}



.gauchequisommesnous {

        float:left;

        width: 49%; 

        padding:0;

        margin: 0 1% 0 0;

	text-align: justify;

}

.droitequisommesnous {

        float: right;

        width: 49%; 

        padding:0;

        margin:0;

	text-align: justify;

}

.quisommesnoussuite {

	float:left;

	width:100%;

	padding:0;

        margin:0;

}

#quisommesnous_divgauche {

    background-color:grey;

    border-radius:10px;

    margin: 0 0 2% 0;

    

}

#quisommesnous_divgauche img {

    width: auto;

    height: 60px;

    float: left;

    margin: 0 20px 10px;
}

#quisommesnous_divgauche h3 {

    float: left;

    width: 100%;

    margin: 5px 0;

    padding: 5px 20px;

    color:white;

    height: auto;

	text-transform : uppercase;

	font-size : 13px; 

}



@media screen and (max-width: 1025px)

{

    #quisommesnous_divgauche h3 {

    }

}



#quisommesnous_divgauche p {

    padding: 20px;

    margin: 0;

}



#quisommesnous_divgauche a {

    color:white;

	z-index : 90;

}



#quisommesnous_divdroite {

    float:left;

    background-color:grey;

    border-radius:10px;

    margin: 0 0 2% 0;

    

}



#quisommesnous_divdroite img {

    width: auto;

    height: 60px;

    float: right;

    margin: 0 20px 0 10px;

}



#quisommesnous_divdroite h3 {

    float: left;

    width: 100%;

    margin: 10px 0;

    padding: 0 20px;

    color: white;

    height: auto;

	text-transform : uppercase;

	font-size : 13px; 

    

}

#quisommesnous_divdroite p {

    padding: 20px;

    margin: 0;

}

#quisommesnous_divdroite a {

    color:white;

	z-index : 90;

}

#wppb_register_pre_form_message {

	display : none;

}

#wppb-register-user ul {

	width : 410px;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

#wppb-register-user ul li {
	display : flex;
	justify-content: space-between;
	margin: 2px 0;
}

#wppb-register-user ul li label {
	display: flex;
}

#wppb-register-user ul li span {
	display : none;
}

#wppb-register-user p.form-submit {
	text-align : center;
}

/*.membres {

        height:4%;

        font-style:italic;

        float:left;

        margin-right:3%;

}

.postsingle {

        height:90%;

        

        margin-bottom:50px;

        padding-left: 70px;

        padding-top: 50px;

        display:inline-block;

}

.photo {

        float:left;

        width:44%;

        margin: 0 2% 0% 0;

}

.photo img {

        max-width: 100%;

        max-height: 100%;

        height: auto;

        width: auto;

    

}

#categorie_single {

        width:200px;

        text-align:center;

        color:white;

        text-transform:uppercase;

        font-weight:bold;

        background-color:grey;

        font-size:1em;

        border-radius:10px;

        padding-top:0.5%;

        padding-bottom:0.5%;

        margin-bottom:3%;

}

#categorie_single a {

        color:#E8E8E8;

        margin-left:2%;

        margin-bottom:2%;

}

.singlebot1 {

        width:50%;

        text-align:center;

        float:left;

}

.singlebot2 {

        width:50%;

        text-align:center;

        float:left;

}

.singlebot3 {

        width:100%;

        text-align:center;

	margin:auto;

}

.albums {

        width:100%;

        text-

        float:left;

}

#hr1 {

        width: 30%;

        height: 14px;

        float:left;

        margin-right:24%;

}

#hr2 {

        width: 65%;

        height: 2%;

        float:left;

        margin-left: 17%;

        margin-bottom: 3%;

}

#hr3 {

        width: 65%;

        height: 2%;

        float:left;

        margin: 0% 20% 0% 17%;

}

.ligne {

        float: left;

        width: 10px;

        border-left: 3px black;

        height: 70px;

}

#youtube { 

		overflow: hidden;

        width: 100%;

}



@media screen and (min-width: 1800px)

 {

    #youtube{

        width: 600px;

    }

}

#youtube object,embed,iframe {

        width: 93%;

        height: 273px;

        margin: 0 0 3% 7%;

    }

*/

@media screen and (min-width: 1500px) /* Header et footer pour les résolutions HD */

{
	
	nav ul li {
		font-size : 14px;
		height : 50px;
	}
	
	nav ul li a {
		height : 100%;
	}
	
	#sidebar-droite{
		width : 18%;
		height: 750px;
	}
	
	#sidebar-gauche {
		width : 20%;
		height : 750px; 
	}
	
	article .blog-titre h2 {
  font-size: 18px;
}
	
		#sidebar-gauche #playlist img {
		
    height: 80%;
	}

	footer {
		height : 50px;
		font-size : 11px;
	}

	header{
		height : 208px;
		flex-direction : column;
	}

	#logo {
		width : 100%;
		height : 140px;
	}

	#bandeaux{
	width : 100%;
	height : 10px;
	background-color : white;
	}

	#slogan {
	height : 40%;
	}

	nav{

	height : 100%;
	width : 100%;
	margin : 0;

	}

	nav ul li {

	font-size : 13px;

	}
	.sub-menu li {
	padding : 0;
	}



	#block-droite p.retour-back-office {
		padding : 0px 3px 0px 9px;
	}

	#block-droite #searchbar {

		justify-content : flex-end;

		margin-right : 30px;

	}

	#bloc-multimedia-1 iframe {

		height : 233px;

	}

	.suggestions-miniatures .tiers {

	margin-left : 20px;

	margin-right : 20px;

	}


	.tiers {

	width : 13%;
	height : 210px;
	margin : 20px;

	}
	
	#contenu {
	padding : 50px 20px 40px 20px;
	width: 61%;
	}
}




@media screen and (max-width: 1500px) /* Design pour les résolutions moyennes */

{

	#sidebar-gauche {

		height : 430px;

	}
	
	#sidebar-gauche #actubref-titre {

    height: auto;

}
	
	#sidebar-gauche #sous-titre {

    margin: 0%;

}

	
	#sidebar-gauche #actubref-articles {

    height: 70%;

}
	
	#sidebar-gauche #playlist {
 
		flex-direction: column;
	}
	
	#sidebar-gauche #playlist-texte {

    padding: 0%;
    margin: auto;

}
		#sidebar-gauche #playlist-texte h2 {

    font-size: 10px;
	margin: auto;

}
	#sidebar-gauche #playlist-texte p {

    display: none;

}
	
	#sidebar-gauche #playlist img {
		
    height: 70%;
	max-width: 100%;
	padding: 2% 0 0% 0%;
    margin: 0 auto;
	}
	
	#sidebar-droite {

		height : 430px;

	}
	.tiers {
	width : 13%;
	margin : 10px;
	height : 180px;
	}

	header{

		flex-direction : column;
		height : 20%;
		    text-align: center;

	}

	
	#logo {

    		width: 100%;

		overflow: hidden;

    		padding: 0;

    		margin: 0;


    		justify-content: center;

	}

	#logo img {

		height : 104px;

	}

	#bandeaux{

	width : 100%;
	background-color : white;
	flex : 1;
	align-items : center;
	display : initial;
	}

	#slogan {

		height : 19px;

		width:100%;

	}

	#slogan p {
		font-size : 12px;
		margin: auto;

	}
	nav{

		width : 100%;
		margin : 0;

	}
	#menu {
    		width: 46%;
			height: 100%;
    		margin: 0 0 0 26%;
	}
	.sub-menu li {
		padding : 0;
	}
	.sub-menu li a {
    		padding: 5px 0;
	}
	#recherche {
    		width: 28%;
		padding : 5px 0px 0px 0px;
		}

	#block-droite {

	}
	#block-droite p.retour-back-office {
		padding : 3px 3px 3px 9px;
	}
	#block-droite p.retour-back-office2 {
		padding : 3px 3px 3px 9px;
	}
	#contenu {

		padding: 30px 20px 40px 20px;
	}

	#contenu #titre-page {

		padding: 0;

   		margin: auto 0;

	}

	#contenu #titre-page h1 {

		padding: 0;
   		margin: auto 0;
		font-size: 20px;

	}
	#contenu #blog-contenu iframe {
    		/* width: 340px; */
	}
	.thumbnail {
		height : 59%;
		background-color: white;
	}
	.texte {
		height : 41%
	}	
	#gauche ul {

        margin-bottom: 12px;

	}

	.single-cat-block hr {

    	margin-top: 10px;

    	margin-bottom: 10px;

	}

	#accueil-zoom {

    		padding: 5px 0 0 0;

	}

	.zoom {

    		height: 218px;

   		margin-bottom: 13px;

		padding: 15px 15px 15px 15px;

	}

	.zoom hr {

    		margin-top: 15px;

    		margin-bottom: 15px;

	}

	.zoom h2 {

    		font-size: 21px;

	}

}

@media screen and (max-width: 1500px) and (min-height: 1000px) /* Design pour les écrans carrés et grands */

{
	.tiers {

	width : 16%;
	margin : 20px;
	height : 190px;

	}

	#sidebar-gauche {

		height : 690px;

	}
	
	article .blog-titre h2 {
  font-size : 18px;
}

	#sidebar-droite {

		height : 690px;

	}
}

 @media screen and (max-width: 1024px) /* Design pour les petites résolutions */

{

	nav ul li {
	
	height : 31px
		
	}
	
	#sidebar-gauche {

	width : 18%;
	height : 450px;
	}

	#sidebar-gauche #actubref-titre {

	margin-bottom : 3%;

	}
	
	#sidebar-gauche #actubref-titre #sous-titre
	
	{
		display: none;
	}
	
	#sidebar-gauche #playlist {
    margin: 10px 5px;
	height:30%;
	padding: 2%;
	}
	
	#sidebar-gauche #playlist-texte {
	padding: 2%;
	}
	
	#sidebar-gauche #playlist-texte h2 {
	font-size: 9px;
	}
	
	#sidebar-gauche #playlist img {
	padding: 0;
	}

	#sidebar-gauche h1 {

	font-size : 18px;

	padding-top: 8px;

		}

	#sidebar-droite {

	height : 450px;
	width : 18%;
	padding: 0;

	}

	#sidebar-droite #actubref-articles {

	height : auto;
	padding-left: 10px;

	}
	
	#sidebar-droite #actubref-titre {
    height: auto;
}
	
	#sidebar-droite .padlet {
    height: 250px;
}
	
	#sidebar-droite .agenda-musical {
     margin-bottom: 10px;
}

	
	#contenu {

	width : 64%;

	padding: 20px 20px 40px 20px;

	}

	#contenu #titre-page {

		margin-bottom: 0px;

	}

	#contenu #titre-page h1 {

	padding: 0;

    	margin: auto 0;

	}	

	header{

		height : 152px;

		flex-direction : column;

		    text-align: center;

	}

	

	#logo {

    		width: 100%;

		overflow: hidden;

    		padding: 0;

    		margin: 0;

    		height: 98px;

    		justify-content: center;

	}

	#logo img {

		height : 90px;

	}

	#bandeaux{

	width : 100%;

	height : 43px;

	background-color : white;

	flex : 1;

	align-items : center;
	}

	#slogan {

		height : 40%;

		width:100%;
	}

	#slogan p {

		font-size : 10px;
	}

	nav{

		height : 60%;
		width : 100%;
		margin : 0;

	}
	#menu {
   
    		width: 56%;
    		margin: 0 0 0 22%;
	}
	#recherche {
    		width: 22%;
		padding : 5px 0px 0px 0px;
		}
	nav ul li {

		font-size : 11px;

		}
	.sub-menu li a {

   		font-size: 11px;
			}
	#block-droite p.retour-back-office {
		padding : 5px 5px 5px 10px;
	}
	#block-droite #reseaux-sociaux{

		display : none;

	}

	#block-droite #searchbar {

		justify-content : flex-end;

		margin-top : 20px;

		margin-right : 30px;

	}

	#block-droite #searchbar img {

		display : none;

	}

	#contenu #blog-contenu p {

		flex-direction : column;

	 }
	
	#contenu #blog-contenu iframe {

		width : 100%;
		height : 210px;
		margin : 15px 0;

	 }


	.tiers {

	    	width: 19%;
		
		height: 180px;

	}

	.tiers h2 {

	    font-size : 11px;

	}

	.texte {
	
	

	}

	.texte .categorie_index {

		min-height: 16px;

	}

	.suggestions-miniatures {

	width : 90%;

	}
	#accueil-zoom {

    		display : none;

	}

	.zoom h1 {

    		font-size: 21px;

		}

	.zoom h2 {

    		font-size: 21px;

		}

	.zoom p {

    		font-size: 11.5px;

		}

	.zoom hr {

   		margin-top: 12px;

    		margin-bottom: 12px;

	}
	.single-cat-block hr{

	width : 100px;

	}

	.zoom img {

    		max-width: 130px;

   		max-height: 130px;

		}

}





  @media all and (max-width: 1023px)  /* Design pour tablettes et smartphones */

{

	#partie-centrale {

		flex-flow: column;

			}

	#sidebar-gauche {

		order : 2;
		background-color: white;
		width : 50%;
		height: 400px;
   		border-bottom: aliceblue;
    	border-bottom-width: 5px;
    	border-top: 0;
   		border-left: 0;
    	border-right: 0;
    	border-style: solid;
    	box-shadow: none;
		margin: 20px auto;
			}

	#sidebar-gauche #actubref-articles {

   		
		height:40%;

			}
	
	#sidebar-gauche #actubref-titre {

   		margin: 14px;

			}

	#sidebar-gauche #actubref-titre h1 {

		font-size : 21px;

		text-transform : initial;

		padding : 0;

		margin : 0;

		border-bottom: 2px solid grey;

			}

	#sidebar-gauche #sous-titre
	
	{
		margin:0;
	}
	
	#sidebar-gauche #sous-titre p
	
	{
		font-size: 14px;
	}
	
	#sidebar-gauche #playlist {
    height: 50%;
	padding: 0;
	margin: 10px 10px;
	max-height: 150px;
	}
	
	#sidebar-gauche #playlist img {
    padding: 0;
	}
	
	#sidebar-gauche #playlist-texte {
    padding-top: 2%;
	}
	
	#sidebar-gauche #playlist-texte h2 {
    padding-top: 3% 0;
	font-size: 13px;
	}
	
	#sidebar-gauche #playlist-texte h2 {
    
	}
	
	#sidebar-droite {

		order: 3;
    	width: 50%;
    	background-color: white;
		height : auto;
		margin: 0px auto 70px auto;
			}

	#sidebar-droite h2 {

		font-size : 10px;

			}

	#sidebar-droite p {

		font-size : 8px;

			}

	#contenu {

		width : 100%;

		order : 1;

		padding-bottom : 0px;

		}
	
	#contenu-blog {

		width : 90%;
		margin-bottom: 20px;
		}

	#contenu #titre-page {

			}

	#contenu #titre-page h1 {

   		font-size: 21px;

   		width: 100%;

   		text-align: center;

   		float: none;

			}

	#content p {

		font-size: 12px;

		}

} 

	@media all and (max-width: 600px) /* Design pour smartphones */

{

	header {
		height : 190px;
		}
	nav {
		height : 71%;
		display: flex;
    		flex-direction: column;
		}

	#bandeau {
    		height : 95px;
		}

	#logo{
    		height : 95px;

		}

	#slogan {
    		height : 31%;
		}

	#menu {
    		width: 100%;
  		height: 50%;
		margin : 0;
		}

	nav ul li {

		 height: 35px;
		}
		
		.menu-menu-mobile-container {

		height : 100%;

		}

	#recherche {
    		width: 50%;
		height : 50%;
    		padding: 0;
    		margin: auto;
		float : none;
		}

	.alphabet {
		display : none;
		}

	#partie-centrale {

					}

	#sidebar-gauche {
		
		order : 2;
		background-color: white;
		width : 90%;
		height: 400px;
   		border-bottom: aliceblue;
    	border-bottom-width: 5px;
    	border-top: 0;
   		border-left: 0;
    	border-right: 0;
    	border-style: solid;
    	box-shadow: none;
		margin: 20px auto;

			}

	#sidebar-gauche #actubref-titre {

		height: 7%;

   		margin-bottom: 5%;

			}

	#sidebar-gauche #actubref-titre h1 {

		font-size : 32px;

		text-transform : initial;

			}

	#sidebar-droite {

		order: 3;
    	width: 90%;
    	background-color: white;
		height : 600px;
		margin: 0px auto 70px auto;

			}

	#sidebar-droite h2 {

		font-size : 10px;

			}

	#sidebar-droite p {

		font-size : 8px;

			}

	#contenu {

		width : 100%;
		margin-bottom : 20px;

		}

	#contenu #titre-page {

		font-width : 35px;

			}

	#contenu #titre-page h1 {

   		font-size: 35px;

   		width: 100%;

   		text-align: center;

   		float: none;

			}

	#contenu .single-cat-block {

		display: initial;
		width: 100%;

		}

	#contenu-blog {

		width : 90%;

		}

	#contenu-blog #titre-page h1  {

		text-align: center;

		}
	
	#content {

		margin-bottom : 0px;

		}

	#content p {

		font-size: 13px;

		}

	article.blog-article {

    		flex-direction: column;

		}
		
	article hr {
   		 width: 70%;
		 margin: auto;
		}

	.blog-image {
    		margin: 0 0 10px 0;
    		display: flex;
    		flex-direction: column;
		padding : 0;
		}

	a.more-link {
   		 display : none;
		}

	.blog-image img {

    		width: 100%;

		}

	.blog-texte {

		}
		
	.blog-titre{

    		margin : auto;
		text-align: center;

				}
		
	.blog-category {
    		padding: 0;
    		display: flex;
    		justify-content: space-around;
    		margin: 0;
	}
		

	.category-section {
    		background: none;
		border-bottom: 4px;
    		border-bottom-style: double;
		margin: 0px;
	}

	.category-section hr {

		border-style: solid;
		border-color: grey;
    		border-width: 1px;
	}

	.sous-categories-liste {

		margin: 0;

	}
	.suggestions-miniatures {
    		width: 100%;
		height: 180px;
		background: none;
	}
	
	.thumbnail {
    		height: 45%;
	}

	.texte {
    		height: 55%;
	}

	.tiers-artistes-reseaux {
    		margin: 3px;
    		width: 30%;
		height: auto;
	}


	.retour-haut {
    		display: none;
	}

	.tiers {

		width : 30%;
		height: 134px;

		}

	#gauche {

		width: 100%;
		border : none;

		}

	#gauche img {

		float: none;
		width: 100%;
		max-height: 100%;
    		max-width: 100%;
		}

	#gauche ul {

       	 justify-content: space-around;

		}

	#droite {

		width: 100%;
		border : none;
		padding: 0 15px;
		}

	#bloc-multimedia {

		margin : 10px;
		width : auto;
		height : auto;
		}

	#bloc-multimedia-1 iframe {

		margin : 0;
		width : 100%;
		margin: 0 0 15px 0;
		}

	#bloc-multimedia-2 iframe {

		margin : 0;
		width : 100%;
		margin: 0 0 15px 0;
		}

	footer {
   		
		position : initial ;
		}
	
	.txtfooter1 {
    padding: 5px 0 0 5px;
	}
	
		#accueil-zoom {

    		display : block;

	}

}