@charset "utf-8";

/*
Author: nkoka
Author URI: http://www.nkoka.com/
*/


/* COULEURS :

rose vif : #eb439c
fond rose Titres : #ec66a2
rose pastel Header-Footer : #fce7f0 - rgba(252, 231, 240, 1)
pavé texte rose clair : #f7d5e3 -> #ffd0e3
*/




html {
	height: 100%;
	margin:0;
	padding:0;
}

body {
	font: 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
	display: table;
	height: 100%;
	width: 100%;
		background-attachment: fixed;
	background-color: #000;
background-image:-moz-linear-gradient(30deg, white, black);
background-image:-webkit-linear-gradient(30deg, white, black);
background-image:-o-linear-gradient(30deg, white, black);
background-image:linear-gradient(60deg, white, black);
}

a {
	color:#e20c75;
}
a:focus {
outline:0;
} 

.clear {
	clear:both;
}

.gras {
	font-weight: bold;	
}
.souligne {
	text-decoration: underline;	
}
.rose {
	background:#f7d5e3 !important;	
}
.petit {
	font-size: 12px;
}

h2 {
	margin-bottom:16px;
	font: 400 18px 'Merienda One', cursive;
	color: #000;
}
.styleH2 {
	margin-bottom:16px;
	font: 400 18px 'Merienda One', cursive;
	color: #000;
}

h3 {
	margin-top:-12px;
	margin-bottom:16px;
	font-weight: bold;
}

hr {
	height:1px;
	background: #ef80b2;
	border:0;
}

.new {
	color:white;
	background-color:#eb439c;
	font-weight:bold;
	animation: allblink 2s infinite;
}
@keyframes allblink { 
0% { }
50% { color:#eb439c; background-color:white; } 
}






/* =================================== HEADER et LOGO =================================== */


header {
	position: fixed;	
	left:-10%;
	top:-105px;
	width:120%;
	-ms-transform: rotate(-2.5deg); 
    -webkit-transform: rotate(-2.5deg); 
    -moz-transform: rotate(-2.5deg); 
    transform: rotate(-2.5deg);
	z-index:9999;
	background: #FFF;
}
#bandeau-logo{
	margin-left:auto;
	margin-right:auto;
	width:84%;
	max-width:1024px;
	height:170px;
	position:relative;
}
#bandeau-logo #logo1 {
	width: 305px;
	height: 137px;
	position: absolute;
	left: 5px;
	bottom: -15px;
}
#logo2 {
	display:none;
}
#logo3 {
	display:none;
}


/* =================================== MENU =================================== */


#menu ul {
	color: #FFF;
	background: #202020;
	width:100%;
	text-align:center;
	padding:1px 0;
	font-size:16px;

/*	font-family: 'PT Sans Narrow', sans-serif; font-weight: 400;*/
	border: solid 2px #202020;
}
#menu ul li {
	display:inline-block;
	text-align:center;
	position:relative;
	text-transform: uppercase;
}
#menu ul li:after {
	content:"•";
	margin: 0 2px;
	color: #eb439c;
}
#menu ul li:last-child:after {
	content:"";
	margin:0;
}
#menu li a:hover {
	background: #FFF;
	color: #000;
	border-top: solid 1px #FFF;
	border-bottom: solid 1px #FFF;
	transition-property: color;
	transition-duration: 0.3s;
}

#menu ul li ul {
	display:none;
	position:absolute;
	top:113%;
	left:-30%;
	width: 140%;
	text-align:left;	
	padding:0;
}
#menu ul li .sous-menu-galerie {
	left:-3%;
	width:100%;
}
#menu ul li ul li:after {
	content:"";
	margin:0;
}
#menu ul li a {
	text-decoration:none;
	color:#FFF;	
	line-height:16px;
	padding: 3px 10px 3px 10px;
}
#menu ul li ul li {
	width:100%;
	text-align: left;
}
#menu ul li ul li a {
	display:block;
	padding: 3px 5px 3px 7px;
}
#menu ul li ul li a:hover {
	border:none;
}
#m-danses, #m-galerie {
	cursor: default;
}





/* =================================== ACCUEIL ===================================*/



#accueil-global {
	width: 80%;
	max-width: 1400px;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 55px;
	padding-bottom: 50px;
	background:#FFF;
background-image:-moz-linear-gradient(top, white, #EAEAEA);
background-image:-webkit-linear-gradient(top, white, #EAEAEA);
background-image:-o-linear-gradient(top, white, #EAEAEA);
background-image:linear-gradient(to bottom, white, #EAEAEA);
}


#accueil-slider {
	position:relative;
	overflow: hidden;
	z-index: 1;
}
#accueil-slider img {
	width:100%;
	height: auto;
}


#accueil-global h2 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: bold;
	color: #FFF;
	background-color: #000;
	text-align: center;
	display: block;
	line-height: 40px;
	border-radius: 10px 10px 0px 0px;
}

#accueil-stages {
	width:250px;
	order: 2;
}
#accueil-stage-ombre {
		border-radius: 10px 10px 0px 0px;
}
#accueil-stages h2 {
	margin-bottom: 0;
}
#accueil-stages .streetjazz {
	height: 426px;
	background-image: url(../images/stage-street-jazz-2021.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-color:#FFF;	
}
#accueil-stages .modernjazz {
	height: 426px;
	background-image: url(../images/stage-modern-jazz-2021.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-color:#FFF;
}
#accueil-stages .hiphop {
	height: 426px;
	background-image: url(../images/stage-hiphop.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;	
	background-color:#FFF;
}
#accueil-stages .aucun {
	height: 426px;
	background-image: url(../images/stage-aucun.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;	
	background-color:#FFF;
}
#accueil-stages .stage-titre {
	font-size: 30px;
	line-height:26px;
	width: 240px;
	font-weight: bold;
	text-transform: uppercase;
	color: #000;
	padding-left: 10px;
	padding-top: 10px;
}
#accueil-stages .hiphop .stage-titre {
	color: #FFF;
}
#accueil-stages .date {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	position: absolute;
	bottom:116px;
	left:10px;
	padding-top: 2px;
	color: #000;
}

#accueil-stages .modernjazz .date {
	color: #FFF;
}
#accueil-stages .hiphop .date {
	color: #FFF;
}

#accueil-stages .heure {
	font-size: 18px;
}
#accueil-stages .adresse {
	position: absolute;
	width: 240px;
	bottom:6px;
	left:10px;
}	
	
#accueil-stages .studio {
	font-size: 25px;
}
#accueil-stages .salle {
	font-style: italic;	
	line-height:32px;
}
#accueil-stages .btn {
	background:#FFF;
	width:242px;
	padding: 4px;
}
.btn-ok {
	border: 2px solid #f861b1;
	color: #000;
	background-color: #f861b1;
	text-align: center;
	display: block;
	height: 38px;
	font-size: 18px;
	line-height: 38px;
	font-weight: bold;
	text-transform: uppercase;
	transition-property: color, border, background;
	transition-duration: 0.3s;
}
#accueil-stages a {
	text-decoration: none;	
}
.btn-ok:hover {
	color : #FFF;
	border: 2px solid #c10078;
	background-color: #e00583;
}
#accueil-stages .tarifs-stages {
	margin-top : 10px;
	width: 250px;
	background-color: #FFF;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}



/* ======== */


#accueil-news {
	width: 64%;
}
#accueil-news .news {
	background-color:#FFF;
	margin-bottom: 15px;
	border-radius: 10px 10px 0px 0px;

}
#accueil-news .news .video-responsive {
	padding-top: 0px;
	margin-top: -16px;
}
#accueil-news .news .contenu {
	padding-bottom: 20px;
	display : flex;
	align-items : center;
	justify-content: center;
}
#accueil-news .news .txt {
	font-size: 18px;
	line-height: 24px;
	order: 2;
}
#accueil-news .txt p {
	padding : 5px;
	line-height: 24px;
	margin-bottom : 10px;
	margin-right: 10px;
	margin-left: 10px;
}
#accueil-news .txt .gros {
	font-size: 22px;
	font-weight: bold;
	line-height: 24px;
}
#accueil-news .txt .petit {
	font-size: 14px;
	line-height: 18px;
	font-weight: normal;
}
#accueil-news .txt .gras {
	font-weight: bold;
}
#accueil-news .txt .pink {
	color: #eb439c;
}
#accueil-news .txt .underline {
	text-decoration: underline;
}
#accueil-news .news .pict {
	width: 50%;
	order: 1;
}
#accueil-news .news img {
	width: 100%;
	max-width:100%;
	height:auto;
}

#accueil-news .center {
	text-align: center;
}
#accueil-news .cadre {
	border : thin solid #000;
/*	width: 280px;*/
	margin-left: auto;
	margin-right: auto;
}


/* =================================== PAGES ===================================*/


#global {
	background: #FFF;
background-image:-moz-linear-gradient(top, white, #EAEAEA);
background-image:-webkit-linear-gradient(top, white, #EAEAEA);
background-image:-o-linear-gradient(top, white, #EAEAEA);
background-image:linear-gradient(to bottom, white, #EAEAEA);
	color: #000;
	width: 80%;
	max-width: 1400px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 50px;
	position:relative;
	z-index:1;
}
#global p {
	padding-bottom: 15px;
}
#global img {
	width:100%;
	max-width:100%;
	height:auto;
}
#contenu {
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	padding-left: 1%;
	padding-right: 1%;
	
	display: flex;
	justify-content : space-between;
}


#page-titre {
	background: #eb439c;
background-image:-moz-linear-gradient(left, white, #eb439c);
background-image:-webkit-linear-gradient(left, white, #eb439c);
background-image:-o-linear-gradient(left, white, #eb439c);
background-image:linear-gradient(to right, white, #eb439c);
	padding-top:81px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	text-align:right;	
}
#page-titre h1 {
	font-weight: bold;
	font: 400 24px 'Merienda One', cursive;
	text-transform: uppercase;
	color: #FFF;
	padding-right:5px;
}
.ombrage {
	background-color: #FFF;
-moz-box-shadow: 2px 2px 5px 0px #c0c0c0;
-webkit-box-shadow: 2px 2px 5px 0px #c0c0c0;
-o-box-shadow: 2px 2px 5px 0px #c0c0c0;
box-shadow: 2px 2px 5px 0px #c0c0c0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=134, Strength=5);
	
}


/* =============== PAGE SPECTACLES ============== */


.global-spectacles {
	padding-bottom: 0px !important;
}
#page-spectacles hr {
	height:1px;
	width:100%;
	background: #ef80b2;
	border:0;
	margin-top:20px;
	margin-bottom:30px;
}
#page-spectacles .contenu { /* Marge ROSE */
	width:100%;
	background:#f7d5e3;
	overflow:hidden;
}
#page-spectacles .gauche {
	float:left;
	width:24.5%;
	padding-top:1%;
	padding-left:1.5%;
	padding-right:1.5%;
	text-align:center;
}
#page-spectacles .gauche img {
	max-width:240px;
}
#page-spectacles .droite { /* Fond blanc texte */
	float:right;
	width:67.5%;
	padding-left:2.5%;
	padding-right:2.5%;
	padding-top:1%;
	background:#FFF;
}
#page-spectacles .droite-first {
	padding-top:110px;
	margin-top:-100px;
}
#page-spectacles .droite-last {
	padding-bottom:60px;
}
#page-spectacles .droite .texte {
	padding-bottom:30px;
}
#page-spectacles .droite .photos {
	width:100%;	
	max-width:590px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:20px;
	text-align: center;
}
#page-spectacles .droite .photos img {
	width:24%;
	max-width:140px;
	height:auto;
}



/* =============== PAGE DANSES ============== */



#global .aside-danses img {
	width:96%;
	max-width:96%;
	height:auto;
	margin:2%;
	border: solid 1px #666;
}
#global .aside-danses {
	width: 25%;
}
#global .section-danses a {
	text-decoration:none;
	color:#ec66a2;	
}
#global .section-danses a:hover {
	text-decoration:underline;
}
#global .section-danses {
	width:71%;
}
#global .article-danses {
	padding-right: 15px;
	padding-left: 15px;
}
.selon-prof {
	width:100%;
	background:#FFF;
	color:#333;
	margin-top:20px;
	margin-bottom: 15px;
	overflow: hidden;
	border-radius: 10px 10px 0px 0px;
}
.selon-prof-texte {
	padding-left:6%;
	padding-right:6%;
	padding-top:0;
	padding-bottom:2%;
}
.selon-prof ul {
	padding-bottom: 15px;
}
.selon-prof ul li{
	margin-left:20px;
	list-style-position: outside;
	list-style-image: url(../images/puce.png);
}
.section-danses h2 {
	margin-bottom:16px;
	margin-top: 6px;
	font: 400 18px 'Merienda One', cursive;
	text-align: center;
	color: #eb439c;
	border-bottom: solid 1px #eb439c;
}
.section-danses .titre-prof {
	margin-top:0;
	padding-top:4px;
	padding-bottom: 4px;
	padding-left:10px;
	text-align: left;
	background: #000;
	color: #FFF;
	border: none;
	border-radius: 10px 10px 0px 0px;
}
.section-danses .titre-prof a {
	color: #ec66a2;
}
.section-danses .titre-prof-age {
	font-size: 14px;
}


/* =============== PAGE PLANNING ============== */


#img-planning span {
	text-align:center;
	font-size:14px;
	display:none;
}
#img-planning a {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}

#planning {
	padding-top: 20px;
}
#planning-adresses {
	display: flex;
	justify-content: space-between;
}
#planning .bloc-centres-adresse {
	width:100%;
	margin-top:20px;
	margin-left:1%;
	margin-right:1%;
	padding:1%;
	text-align:center;
	background-color: #FFF;
	color: #000;
}
.metro {
	background-image: url(../images/metro.svg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 23px;
}
#planning .bloc-centres-adresse h2 {
	padding-bottom:8px;
	margin-bottom: 6px;
	border-bottom: solid 1px #000;
	font-family: 'Merienda One', cursive;
	font-size: 16px;
	font-weight: 400;
	color: #eb439c;
}
#planning .bloc-centres-adresse .adresse {
	font-size: 16px;
	display:block;
	padding-bottom: 5px;
}
#planning .lien {
	padding-top:10px;
}


/* =============== PAGE PROFESSEURS ============== */



#tapis-slider {
	width:100%;
	max-width: 1400px;
	position: relative;
	z-index: 1;
}
#profs-slider img {
	width:100%;
	height: auto;
}
.profs {
	padding: 16px;
	display: flex;
	background-color: #FFF;
	margin-bottom: 10px;
}
.profs-gauche {
	flex: 1;
}
#global .profs h2 {
	margin-bottom:0px;
	font-weight: bold;
	color: #eb439c;
	font: 400 26px 'Merienda One', cursive;
	line-height:32px;
	height: 35px;
	margin-left: 5%;
	border-bottom: thin solid #000;
}
.profs-gauche h2 {
	display: none;
}
.profs-droite {
	flex: 2;
}
.profs-danses {
	margin-bottom:20px;
	padding-left:5%;
}
.profs-danses li {
	display:inline;
}	
.profs-danses li a{
	color:#000;
	font-size:17px;
	text-decoration: inherit;

}
.profs-danses li a:hover{
	color:#eb439c;
	text-decoration: underline;
}
.profs-danses li:after {
	content:"•";
	color: #eb439c;
	margin: 0 3px 0 8px;
}
.profs-danses li:last-child:after {
	content:"";
	margin:0;
}
.profs-texte {
	padding-left: 5%;
}
.reine-site-web {
	background-image: url(../images/minipicto-FB.jpg);
	background-repeat: no-repeat;
	background-position: left 2px;
	padding-left : 25px;
}


/* =============== PAGE GALERIES ============== */


/* ==== PAGE PHOTOS ==== */

#global #page-photo h2 {
	text-align:center;
	margin-bottom:16px;
	font-size: 22px;
	color: #000;
	line-height:30px;
}
#page-photo #contenuphoto{
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	padding-left: 1%;
	padding-right: 1%;
	text-align: center;
}
#page-photo .cours, .spectacles {
	background: #FFF;
	margin-bottom: 10px;
	padding-top: 10px;
}
#page-photo .photos {
	width: 100%;	
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
}
#page-photo .photos img {
	width:24%;
	max-width:140px;
	height:auto;
}


/* ==== PAGE VIDEOS ==== */

#page-video .contenu {
	padding-left: 30px;
	padding-right: 30px;
}
#page-video .videos .video-titre {
	margin-bottom:16px;
	font: 400 18px 'Merienda One', cursive;
	color: #000;
	text-align: center;
	display: none;
}
#page-video .video-titre {
	margin-top: 15px;
}
#page-video .videos {
	width: 65%;
	margin-bottom:20px;
	margin-top:20px;
	float: left;
}
.video-responsive {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	background-color: #000;
	background-image: url(../images/loader.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
.video-responsive iframe, object, embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#page-video .textes {
	width: 33%;
	float: right;
	padding-top:10px;
	margin-top:10px;
}


/* =============== PAGE TARIFS ============== */


.tarifs {
	max-width:800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
}
.tarifs h2 {
	text-align: center;
}
.tableau-prix {
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	font-size:14px;
	color:#000;
}
table tr td {
	text-align:center;
	vertical-align:middle;
	border: solid 1px #bababa;
}
.red {
	color:#eb439c;;
}
.legende-tarifs {
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}
.tarifs-cours{
	margin-bottom: 50px;
}
.tarifs-stages ul {
	
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	margin-top:10px;
	padding: 20px;
}
.tarifs-stages ul li {
	list-style-image: url(../images/puce.png);
	list-style-position: inside;
	font-size:16px;
	line-height:30px;
	color: #000;
}
.separation {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
.separation hr {
	background: #000;
}
/* =============== PAGE CONTACT, INSCRIPTIONS ============== */


#formulaire {
	background:#f7d5e3;
	width:80%;
	max-width: 1000px;
	min-width: 580px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-bottom: 10px;
}
#formulaire-reponse {
	background:#f7d5e3;
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
	padding:15px 5px 15px 5px;
	margin-top: 30px;
	text-align:center;	
}
#formulaire form {
	width:540px;
	margin-left:auto;
	margin-right:auto;
	padding:20px 0 5px 0;
}
.etiquette {
	display:inline-block;
	width:210px;
	text-align:right;
	padding-bottom:10px;
	margin-right:10px;
}
.obligatoire {
	display:block;
}
.aligne-milieu {
	vertical-align: middle;		
}
.aligne-haut {
	vertical-align: top;	
}
#choix-stages br {
	display:none;
}
#formulaire .required {
	color: red;
	font-weight: bold;	
}
#nom, #prenom, #telephone, #email, #addition {
	width: 230px;
	padding: 5px 7px 5px 7px;
	border: none;
}
#message{
	width: 100%;
	padding: 5px 7px 5px 7px;
	border: none;
}
#addition {
	margin-top:10px;
}
#motif, #niveau, #places {
	padding: 5px 7px 5px 7px;
	border: none;
}
#envoyer {
/*	margin-left: 240px;*/
	margin-left: auto;
	margin-right: auto;
	padding: 3px 25px 3px 25px;
/*	background: #f861b1;*/
	font: 400 16px 'Merienda One', cursive;
/*	border: none;*/
	cursor: pointer;
}
.formulaire-tarifs {
	text-align:center;
	width: 80%;
	max-width: 600px;
	padding-top:10px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
}


.section-asso {
	max-width:800px;
	margin-left: auto;
	margin-right: auto;
}
.section-asso h2 {
	text-align: center;
}


/* ================== FOOTER et RESEAUX SOCIAUX ================= */


footer {
	width: 100%;
	display: table-row;
	background: #202020;
}

footer .footer-contenu {
	width: 80%;
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	justify-content: space-between;
}
footer #copyright {
	font-size:14px;
	color: dimgrey;
	text-align: center;
}
footer #barre-noire {
	background: #000;
	line-height: 30px;
}


/* ==================== MENU FOOTER ======================*/

#menu-footer {
	margin-top : 30px;
	width: 40%;
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
	border: thin solid #808080;
	padding: 10px;
	margin-bottom: 30px;
	order: 2;
}
.menu-footer-dr{
	width: 49%;
}
.menu-footer-gh{
	width: 49%;
}
#menu-footer li a:hover {
	color: #FFF;
	transition-property: color;
	transition-duration: 0.3s;
	background-image: url(../images/puce.png);
	background-repeat: no-repeat;
	background-position: left center;
}
#menu-footer ul li a {
	text-decoration:none;
	color:#808080;
	padding-left: 10px;
	line-height: 19px;
}

/* ============================================ */


.zones-textes {
	margin-top : 30px;
	width: 50%;
	color: #808080;
		padding-right: 30px;
	order: 1;
}
.zones-textes .intro {
	font-size: 16px;
}
.zones-textes .gros {
	font-size: 20px;
	font-weight: bold;
	padding-top: 15px;
	padding-left: 18px;
	background-image: url(../images/point.svg);
	background-repeat: no-repeat;
	background-position: left 22px;
}
.zones-textes .styles {
	font-weight: bold;
	font-size: 14px;
	padding-bottom: 5px;
}
.zones-textes .lieu {
	font-size: 12px;
	padding-top: 5px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #808080;
}



/* =================== */

#barre-reseaux {
	width: 100%;
	border-top: thin solid #808080;
	margin-top: 20px;
	padding-top: 5px;
}

#suivez-nous {
	font-size: 16px;
	line-height:42px;
	width: 115px;
	float: left;
	color: #FFF;
	padding-left: 10px;
}
#reseaux-sociaux {
	padding-top:4px;
	width: 118px;
	background : #202020;
	margin-left: auto;
	margin-right:auto;
	border-radius: 10px;
}

#reseaux-sociaux ul li {
	display:inline-block;
	text-align: right;
}
#reseaux-sociaux #fb a, #reseaux-sociaux #tw a, #reseaux-sociaux #yt a{
	display:block;
	height:25px;
	width:25px;
	padding-left: 0px;
	padding-right: 4px;
}
#picto-fb:hover .st0 {
	fill: #ec66a2;
}
#picto-insta:hover .st0{
	fill: #ec66a2;
}
#picto-yt:hover .st0{
	fill: #ec66a2;
}


/* ===========================================================================================
==============================================================================================
==============================================================================================
========================================== RESPONSIVE ======================================== 
==============================================================================================
==============================================================================================
=========================================================================================== */



@media screen and (max-width: 57em) {

#menu {
	display:none;
}
header {
	position: fixed;	
	left:0;
	top:0;
	width:100%;
	border-bottom: solid 1px #000;
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
	z-index:999;
}
#bandeau-logo{
	background: #FFF;
	width:100%;

	height:75px;
}
#bandeau-logo #logo1 {
	display: none;
}
#logo2 {
	display:block;
	width:263px;
	height:67px;
	position: absolute;
	left:10px;
	bottom:5px;
}


/* ========================= ACCUEIL =========================*/	
	

#accueil-global {
	width:90%;
	padding-top: 75px;
	padding-bottom: 50px;
}
#accueil-slider #welcome {
	height:30px;
	bottom:0;
	right:0;
	padding:0;
	-ms-transform: rotate(0deg); 
	-webkit-transform: rotate(0deg); 
	-moz-transform: rotate(0deg); 
	transform: rotate(0deg);
}
.styleH2 {
	-ms-transform: rotate(0deg); 
	-webkit-transform: rotate(0deg); 
	-moz-transform: rotate(0deg); 
	transform: rotate(0deg);
	position: relative;
	text-align: center;
	top:2px;
	right:0;
}

.accueil-textes {
	width: 100%;
	margin-top: 30px;
}
#accueil-news {
	width: 55%;
}
#accueil-news .news h2 {
	line-height: 40px;
	font-size: 22px;
}
#accueil-stages h2 {
	font-size: 22px;
}
#accueil-news .contenu {
	flex-direction: column;
}
#accueil-news .news .pict {
	width: 80%;
	order: 3;
}


/* ========================= PAGES =========================*/


#global {
	width: 90%;
	padding-bottom: 50px;
}
#page-titre {
	padding-top: 80px;
	padding-bottom: 5px;
	background: #eb439c;
}
#page-titre h1 {
	text-align:center;
	padding-right:0;
}


/* =============== PAGE SPECTACLES ============== */


#page-spectacles .gauche {
	width:30.5%;
}
#page-spectacles .droite { 
	width:61.5%;
}
#page-spectacles .droite .photos {
	width:65%;	
	padding-bottom:20px;
}
#page-spectacles .droite .photos img {
	width:47%;
}
#page-spectacles .gauche {
	padding-top:1.5%;
}



/* ======= PAGE DANSES ====== */

#global .aside-danses img {
	display: none;
/*	width:47.5%;
	max-width:47.5%;
	height:auto;
	margin:0.5% 0 0.5% 0.5%;*/
}
#global .aside-danses {
		display: none;
	}
/*#global .aside-danses {
	width: 30%;
}*/

#global .section-danses {
	width:100%;
}

/* ======= PAGE PLANNING ====== */

#img-planning span {
	display:block;
}

/* ======= PAGE CONTACT ====== */
.section-asso {
	width:94%;
}

/* ========================= FIN PAGES ========================= */

footer .footer-contenu {
		width: 95%;
	}
#menu-footer {
	width: 48%;
	}
footer .zones-textes {
		width: 52%;
	}

}



@media screen and (max-width: 42em) {


	
#bandeau-logo{
	height:55px;
}

#bandeau-logo #logo2 {
	display:none;
}
#bandeau-logo #logo3 {
	display:block;
	width:230px;
	height:61px;
	position: absolute;
	left:25px;
	bottom:-12px;
}
/*	.js .slicknav_menu {
		position:fixed;
		top:0px;
		right:0px;
	}*/
	
/* ========================= ACCUEIL =========================*/	
	

#accueil-global {
	width:95%;
	padding-top: 10px;
	padding-bottom: 10px;
}

#accueil-slider {
	display: none;
}


#accueil-stages {
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	order: 1;
}
#accueil-news {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	order: 2;
	margin-top: 40px;
}


/* ========================= PAGES =========================*/


#global {
	width:95%;
}
#contenu {
	padding-left:1%;
	padding-right:1%;
	flex-direction: column;
}
#page-titre {
	padding-top:60px;
	padding-bottom: 5px;
}
#page-titre h1 {
	font-size: 20px;
}

/* =============== PAGE SPECTACLES ============== */


#page-spectacles {
	text-align: center;
}
#page-spectacles .contenu { /* Marge ROSE */
	background:#FFF;
}
#page-spectacles .droite { /* Fond blanc texte */
	float:none;
	width:90%;
	padding-left: 5%;
	padding-right: 5%;
}
#page-spectacles .droite-last {
	padding-bottom:50px;
}
#page-spectacles .droite .photos {
	width:55%;
	min-width:250px;
}
#page-spectacles .droite .photos img {
	width:47%;
}
#page-spectacles .gauche {
	display:none;
}



/* ======= PAGE DANSES ====== */


#global .aside-danses img {
	display: none;
/*	width:47.5%;
	max-width:47.5%;
	height:auto;
	margin:0.5% 0 0.5% 0.5%;*/
}
#global .aside-danses {
		display: none;
	/*width: 100%;
	margin-right:0;
	padding-right: 0;
	margin-bottom:10px;*/
}
#global .section-danses {
	width:100%;
}


/* ======= PAGE PROFESSEURS ====== */


#profs-slider {
	display:none;
}
.profs {
	padding-top: 20px;
	padding-bottom:0;
	flex-direction: column;
}
.profs-gauche {
	text-align: center;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}
#global .profs-gauche h2 {
	display: inherit;
	border-bottom: none;
	margin: 0px;
	color: #FFF;
	background-color: #000;
	border-radius: 10px 10px 0px 0px;
	line-height: 40px;
	height: 40px;
}
#global .profs-droite h2 {
	display: none;
}
#global .profs-gauche img {
	max-width: 300px;
}
.profs-droite {
	flex: 1;
}
.profs-danses {
	text-align:center;
	margin-top:5px;
	padding:0;
}
.profs-danses li {
	display:block;
	line-height:24px;
}
.profs-danses li a {
	color: #eb439c;	
	text-decoration: underline;
}
.profs-danses li a:hover {
	color: #000;	
}
.profs-danses li:after {
	content:"";
}
.profs-texte {
	padding: 0px;
}

/* =============== PAGE PLANNING ============== */


#planning .bloc-centres-adresse {
	width:80%;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	padding:1%;
}
#planning-adresses {
	flex-direction: column;
	margin-left:auto;
	margin-right:auto;
	}
#planning .bloc-centres-adresse h2 {
	margin-top:5px;
}

/* =============== PAGE GALERIES ============== */

/* ==== PHOTOS ==== */


#page-photo .photos img {
	width:40%;
}

/* ==== VIDEOS ==== */

#page-video .contenu {
	padding-left: 5%;
	padding-right: 5%;
}
#page-video .videos .video-titre {
	display: block;
}
#page-video .videos {
	width: 100%;
	margin-top:0px;
	float: none;
}

#page-video .textes {
	width: 100%;
	float: none;
}
#page-video .textes h2 {
	display: none;
}


/* =============== PAGE TARIFS ============== */

.tarifs {
	padding-left: 2%;
	padding-right: 2%;
}


/* =============== PAGE CONTACT ============== */

#formulaire{
	width:95%;
	min-width: inherit;
	}
#formulaire form {
	width:100%;
	text-align:center;
}
.etiquette {
	width:100%;
	text-align:center;
	padding-bottom:5px;
}
.aligne-milieu {
	padding-top:10px;	
}
.aligne-milieu br {
	display:none;
}
#nom, #prenom, #telephone, #email, #addition {
	width: 90%;
	text-align: center;
	line-height: 30px;
}
	#message{
		width: 90%
	}
#choix-stages br {
	display:block;
}

/* ========================= FIN PAGES ========================= */

footer .footer-contenu {
	flex-direction : column;
}
footer #menu-footer {
	width: inherit;
	text-align: center;
	order: 1;
}
footer #menu-footer ul {
line-height: 25px;
}
	
footer .zones-textes {
	width: 100%;
	min-width: 250px;
	padding-top:20px;
	padding-bottom:40px;
	padding-right: 0px;
	margin-top: 0;
	order: 2;
}
footer .zones-textes .intro {
	text-align: center;
}
footer #barre-reseaux {
	width: 100%;
	align-self: flex-end;
}
}