button.mfp-arrow-left, button.mfp-arrow-right{
bottom: .5em;
}  


 #diaporama figure {
display: none;
}

div.atelieritem a .infoatelier, #atelier div.atelieritem a p, #atelier div.atelieritem img{
display: inline-block;
width: 146px;
height:  146px;
}


#diaporama figure{
	margin-bottom: 2em;
}

#content ul.listeventalpha li{
width: 50%;
}

.red .list-wrap > h2, .red  #tab-wrapper{
	background-image: url("../img/sperateur-trait-rouge.png");
}


.list-wrap > h2, #tab-wrapper{
	background-image: url("../img/sperateur-trait-orange.png");
	background-repeat: no-repeat;
}


#content{
	margin-top: 1em;
}



.green .list-wrap > h2, .green #tab-wrapper{
	background-image: url("../img/sperateur-trait-green.png");
}



#diaporama figcaption{
	text-align: center;
}

.centercycle{
	clear: both;
	text-align: center;
}

.centercycle p{
	display: inline-block;
}

.list-wrap > h2{
	background-position: center top;
}



#tab-wrapper{
	background-position: center bottom;
	clear: both;

}



#home #slide-list{
	position: absolute;
	left: 50%;
	z-index: 1000;
	bottom: 1.5em;
}

#home #slidecaption ul{
	padding: 5em 1em;
}


#Slidecredit{
width: 100%;
text-align: center;
	bottom: .2em;
}



#col-gauche, .spectacleList{
	padding: 1em;
}

#col-gauche .spectacleList{
		padding: 0;
}




#diaporama figure figcaption *{
	color: gray;
}




/* === Header ==== */


#logo a{
	margin-top: 1em;
	display: block;
	text-indent: -5000px;
	width: 160px;
	height: 88px;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: transparent;
	background-image:  url('../img/logo.png');
	position: relative;
	z-index: 100;

}

#lang ul li span {
	display: none;
}


#fond .imgdiapo, .phone-hidden{
	display:none;
}

section#principalcorps{
	padding-top: 15em
}

section#principalcorps h1{
	margin-bottom: .5em;
}

#fond , .mobdiapo img{
	display: block;
	width: 100%;
}


#home figcaption div{
	padding: 2em 1em 2em 1em;
}



/* list actu */


#principalcorps{
	padding: 0 1em;
}

/* editent text */

.alignright, .alignleft{
	display: block;
	margin: 0.5em auto;
	max-width: 100%;
	height: auto;
}


#spectacle aside#archive-actu div{
	float: left;
}


/* fiche */
#tab h2{
	font-size: 2em;
	padding: .7em 0;
} 

#tab h2 span{
	width: 25px;
	height: 20px;
	background: url('../img/fleche-open-orange.png') top right no-repeat ; 
	float: right;
	 -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
} 

#tab h2.open span{
    -webkit-transform: rotate(-180deg);
    -moz-transform:  rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform:  rotate(-180deg);
     -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;

}

.green #tab h2 span{
	background: url('../img/fleche-open-green.png') top right no-repeat ; 

}


.red #tab h2 span{
	background: url('../img/fleche-open-red.png') top right no-repeat ; 
}

#tab-wrapper ul.nav{
	display: none;
}

#logo{
	margin-bottom: 2em;
}


#duocol article header{
clear: both;
}
@media (min-width: 640px) {
#diaporama figure{
	margin-bottom:0;
}

#archive-actu h3{
	color: #e00202;
	margin-bottom: 2.5em;
	background: transparent url('../img/tiret-red-archive.png') no-repeat top center;
	padding-top: 1em;
}

#archive-actu div{
width: 66%;
float: right;
}


#duocol article#alphabet footer{
		margin-top:0;

}

#duocol #tab-wrapper > div {
    padding: 1em;
}


#diaporama figcaption, .cycle-pager{
	text-align: left;
}

#Slidecredit{
	right:0.5em;
	bottom: .5em;
	width: auto;
	text-align: right;
}


#tab-wrapper ul.nav{
	display: block;
}

#tab .hide { position: absolute; top: -9999px; left: -9999px; }

#tab{
	background-image: none;
}

#col-gauche{
	width: 28%;
	float: left;
	z-index: 900;
	position: absolute;
	margin-top:-4.5em;
}

.col-gauche{
	margin-top: 0;
}

#tab-wrapper {
	width: 68%;
	float: right;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1000;
	top: -2.5em;
}

#tab-wrapper ul.nav{
	margin: 0;
}

#tab > h2{
	display: none;
}

#post-solo aside{
	margin-top: 0;
}


.cat{
	margin-top: 1em;
	margin-bottom: .5em;
}
#content{
	clear: both;
}

section#principalcorps {
    padding-top:0;
}

#diaporama{
float: none;
}


#spectacle aside#archive-actu div{
	float: right;
}



/*contact*/

#contact div{
float: left;
width: 50%;
padding-top: 2em;
}

#contact div.phone-hidden{
	padding-top: 0;
}

.phone-hidden{
	display:block;
}

aside{
	display: block;
}
aside img{
	display: none;
}
#wrapper > footer{
	width: 480px;
	float: right;
	background: #f0f0f0 url('../img/footer.jpg') no-repeat center right;
	padding-right: 18px;
	margin-top: 3em;
}


#fond .imgdiapo{
	display:block;
}

#fond .mobdiapo, .tablette-hidden,  #home #credits{
	display:none;
}

img.superbg {
    left: 0;
    position: fixed;
    top: 0;
    z-index: -1;
}



#home #slide-list{
	left: auto;
	right: .4em;
	bottom: 2.5em;
}

#home #slidecaption ul{
	padding: 5em 12em 1em 1em;
}


/* list actu */


.list_actu, #actu-solo{
width: 80%;
float: left;
}






aside{
width: 20%;
float: right;
margin-top: 8em;
}

aside img{
	max-width: 100%;
	margin-bottom: 80px;

}

aside #archive-actu{
	max-width: 145px;
	float: right;
	text-align: left;
	margin-top: 25px;
}

#partager ul{
	float: right;
}
#partager{
	width: 45%;
	min-height: 85px; 
	float: right;
	padding-right: 2em;
}


nav#post-nav > div{
	width: 50%;
}

#lire_plus{
	width: 45%;
	float: left;
}


#content ul.nav li a{
	margin: .5em .5em 0 0;

	font-size: 1.3em;
}

#diaporama figure figcaption{
	color: white;
	position: absolute;
	bottom: -1.5em;
	right: 0;	
	min-height: 63px;
	max-width: 250px;
	background: url("../img/figcaptiondiapo.png") no-repeat left bottom transparent;
	text-align: right;
}


#duocol #diaporama .cycle-pager{
	bottom: 2em;
	left: 1em;
	z-index: 800;
	position: absolute;
}

#duocol #tab-wrapper {
    margin: -1.5em 0 0 0;
}

#tab-wrapper .list_actu > h2, #nohome #tab-wrapper{
	background-image: none;
}


#diaporama figure figcaption > div{
padding: 1em 2em 1em 4em;

}
#diaporama figure figcaption *{
	color: white;
}


#diaporama figure figcaption .creditphoto{
	color: gray;
}

}

@media (min-width: 768px) {

#diaporama figure figcaption{
	bottom: 3em;
}
#tab-wrapper ul.nav {
     background: url("../img/tab-onglet.png") no-repeat scroll left top transparent;

}


button.mfp-arrow-left, button.mfp-arrow-right{
bottom: 50%;
}  

#lienpage{
	width: 400px;
}

#lienpage + #archive-actu {
    width: 250px;
}

#content ul.listeventalpha li{
width: 25%;
}

#atelier div.atelieritem, #atelier div.atelieritem .infoatelier, div.atelieritem img, div.atelieritem a{
display: block;
width: 146px;
height: 146px;
}

div.atelieritem{
width: 146px;
height: 146px;
float: left;
}


#atelier div.atelieritem .infoatelier{
	background-color: rgba(233, 63, 14, .7);
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.list_actu h1, .cat{
display: none;
}

#tab-wrapper ul.nav {
    margin: 0 -1.3em;
}

#wrapper{
	width: 960px;
}


section header{
width: 100%;
}
section#principalcorps {
    padding: 7em 0 0 168px;
}


#post-solo section#principalcorps {
    padding: 0 0 0 168px;
}

#home figcaption div{
	padding: 5em 1em 2em 20em;
}

#home #principal{
	margin-left: 2em;
}

.list_actu, #actu-solo{
	width: 500px;
	padding: 0 0 0 6.8em;
}

#archive-actu{
	width: 200px;
}

aside{
	margin-top: 0;

}
aside img{
	display: block;}

/* actu solo */

.alignleft{
	float: left;
	 margin: 0.5em 1em 1em 0;
}

.alignright{
	float: right;
	margin: 0.5em  0 1em 1em;
}

#col-gauche{
	width: 300px;
	padding: 30em 2em 0 1em;
	float: left;
	position: absolute;
	top: 0em;
	z-index: 790;
	margin: 0;
}

#col-gauche{
		background: url("../img/desktop-diapo.png") top left no-repeat;
}


#col-gauche aside h3, #col-gauche aside .alpha ul{
	background: url("../img/tiret-orange-aside.png") no-repeat scroll left top transparent;
	margin-top: 1em;
	padding-top: 1em;
}


#post-solo header {
    float: none;
    position: static;
    width: 100%;
}

#content {
    clear: none;
}

#wrapper #content .last{
	margin: 0;
	padding: 0;
}

#content ul.nav li a{
	font-size: 1.3em;
}




#wrapper #content .last{
	margin: 0;
	padding: 0;
}

#content ul.nav li a{
	margin: .5em .5em 0 0;
	font-size: 1.25em;
}

#duocol article{
width: 790px;
float: right;
}
#col-gauche aside{
	margin-top: 0;
}

#duocol #diaporama #bord{
	background: transparent url('../img/bord-diapo.png') no-repeat left top;
	z-index: 500;
	width: 33px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}



#duocol #diaporama #bottom{
	background: transparent url('../img/bottom-diapo.png') no-repeat right top;
	z-index: 500;
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: -1.5em;
	right: -2em;
}

#duocol #diaporama .cycle-pager{
	bottom: 9em;
	left: 4em;
}

#duocol #col-gauche{
	width: 300px;
	float: left;
	background: transparent url('../img/header-col.png') no-repeat left top;
	min-height: 200px;
	padding: 3em 2em 2em 1em;
}

#tab-wrapper {
	position: static;
}

#duocol #content{
	z-index: 900;
	position: relative;
	margin-top: -11em;
}

#duocol #tab-wrapper{
width: 460px;
float: right;
margin-top: 6em;
}
#home #slidecaption ul{
	padding: 5em 12em 1em 20em;
}


#archive-actu h3.returnActu {
	margin-top: -3em;
}

#diaporama{
 width: 790px;
 position: relative;
height: 360px
 }


}


@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {



 
#spectacle #archive-actu h3{
 	background-image: url("../img/tiret-orange-archive@2x.png");
 		background-size: 140px 6px; 

}
.orangefleche{
	background-image: url("../img/orange-go@2x.png");
	background-size: 10px 24px; 

}

.returnActu a{
	background-image: url('./img/post_left_red_p@2x.png');
		background-size: 12px 75px; 

}
#partager li a span{
	background-image:  url('../img/share@2x.png');
	background-size: 180px 120px; 
}

.linknext{
	background-image: url('../img/post_right@2x.png');
	background-size: 55px 130px;
}

.linkprev{
		background-image:  url('../img/post_left@2x.png');
	background-size: 55px 130px;
}

button.mfp-close {
	background-image:  url('../img/croix@2x.png');
	background-size: 18px 20px;
}
button.mfp-arrow{
		width: 30px;
		height: 36px;
		background-size: 30px 74px;
	

}


.red #col-gauche aside h3, .red #col-gauche aside .alpha ul {
    background-image: url("../img/tiret-red-aside@2x.png");
    background-repeat: no-repeat;
    background-size: 105% auto;
}


#tab div h2{
		background: url("../img/h2-tab.png") no-repeat scroll left top transparent;

}


.green #tab div h2{
		background: url("../img/h2-tab-green@2x.png") no-repeat scroll left top transparent;

}

.red #tab div h2{
		background: url("../img/h2-tab-red@2x.png") no-repeat scroll left top transparent;	
}



/* */

}

}