/********************************************

Header
	Nos références
Titre de page
Page d'accueil
	Diaporama
	Actualités
	Slogans de la page d'accueil
Colonne de droite 
Formulaires 
Mots-clefs
Pages présentant chaque cours
Spécificités liés à des pages

*********************************************/



@media all and (max-width: 533px) {
		 
		body{
			font-size: 14px;
		}
		nav#menu ul, .main, #plan, #informations, #logo, .col-3{
			width: 100%;
			margin: 0 auto;
		}
		#entete, nav#menu ul, .main,
		.col, ul#vignettes li:first-child{
			width: 100% !important;
		}
		#pied, .main{
			padding: 15px 25px;
			box-sizing: border-box;
		}
		.page_sommaire{
			padding: 0;
		}
		.section, .aside{
			width: 100% !important;
			padding: 0 !important;
		}

 
		#fb_ordi{
			display: none;
		}		
		#fb_mobile{
			display: block;
		}
		#fb_mobile span{
			width: 100%;
			margin: 0 auto;
		}



	/* Header */ 

		div#entete{
			display: none;
		}
		.page_sommaire nav#menu{
			display: block;
		}
		p#annonce_sommaire {
		    width: 100%;
		    margin: 0 0 40px;
		    padding: 22px;
		    box-sizing: border-box;
		}
		div#nav-toggle{
			display: block;
		}
		/*
		div#nav-toggle, div#info-toggle{
		    width: 100%;
		    display: inline-flex;
		    flex-wrap: wrap;
		    justify-content: space-between;
		    align-items: top;
		}
		div#nav-toggle{
			display: block;
		}
		div#nav-toggle + div#info-toggle{
			display: block;
		}
		div#nav-toggle a {
		    display: inline !important;
		    padding: 0 !important;
		    margin: 0;
		}
		#nav-toggle img {
		    width: 72%;
		    float: right;
		    margin-right: 20px;
		}
	    nav#menu #nav-toggle {
	        height: 49px !important;
	    }
		nav#menu #nav-toggle span {
		    margin: 32px 20px 10px 20px;
		    height: 24px;
		    width: 50px;
		    display: block;
	     	float: left; 
            background: linear-gradient(to bottom, #5a5454 0%, #615858 20%, transparent 20%, transparent 40%, #675f5f 40%, #675f5f 60%, transparent 60%, transparent 80%, #6f6a6a 80%, #6f6a6a 100%);
	    }*/
	    nav#menu #nav-toggle span {
			margin: 20px !important; */
		    height: 24px ! important;
		    width: 50px !important;
		    margin: 0 auto !important;
		    display: block !important;
		    background: linear-gradient(to bottom, #5a5454 0%, #615858 20%, transparent 20%, transparent 40%, #675f5f 40%, #675f5f 60%, transparent 60%, transparent 80%, #6f6a6a 80%, #6f6a6a 100%);	    
		}
		p#slogan {
		    margin: 16px 0 16px 20px;
		    text-align: center;
		    letter-spacing: 13.9px;
		}
		nav#menu{
 			height: auto;
 			background-color: #000;
 			padding-bottom: 10px;
		}
		nav#menu a {
		    color: #fff;
		    background: #000;
		}
		nav#menu a:hover{
		    background: #fff;
		    color: #000;
		}
		nav#menu ul:not(#vignettes){
			display: none;
			margin: 10px auto 0;
		}		
		nav#menu ul:not(#vignettes) li {
		    background: #fff;
		    width: 100%;
		    border-bottom: 1px dotted #611f1f;
		}		
		nav#menu ul:not(#vignettes) a{
			letter-spacing: 3px;
			padding: 11px 20px;
		}


		/* Nos références */ 

				ul#vignettes{
				    width: 100%;
				    display: inline-flex;
				    flex-wrap: wrap;
				    justify-content: space-between;
				    align-items: top;
				    padding: 15px 16px 0;
				}
				ul#vignettes li:first-child{
				    padding: 0 !important;
				    height: 0;
				}
				ul#vignettes li:last-child img {
				    margin-left: 0;
				}
				ul#vignettes li{
					float: left;
					height: auto;
				}
				ul#vignettes a{
					padding: 0;
				}
				ul#vignettes a:hover{
					background-color: #fff !important;
				}
				#vignettes img {
		    		width: 77px;
		    		margin: 0;
		    	}

		/* Inscrivez-vous */

				a#bouton_annonce {
				    width: 100%;
				    box-sizing: border-box;
				    margin: 5px auto 0;
			        padding: 15px 10px !important;
				    font-size: 12px !important;
				    letter-spacing: 7.6px !important;
			        background-image: -webkit-linear-gradient(top, #ff531f, #d62e00);
				    background-image: -moz-linear-gradient(top, #ff531f, #d62e00);
				    background-image: -ms-linear-gradient(top, #ff531f, #d62e00);
				    background-image: -o-linear-gradient(top, #ff531f, #d62e00);
				    background-image: linear-gradient(to bottom, #ff531f, #d62e00);
				}

	/* Titre de page */ 

		#logo_page h1, .pseudo-titre {
			bottom: 0;
		    font-size: 25px;
		    letter-spacing: 5px;
		}
		div#diaporama h1 a {
			color: #fff;
			font-size: 14px;
		}
		#logo_page{
			height: 265px;
			overflow: hidden;
		    margin: 0;
		    margin-bottom: 23px;
		}
		#logo_page img{
			height: 265px;
		    width: auto;
		    left: -50%;
		    position: absolute;
		}
		body.adhesions #logo_page img {
		    left: -67%;			
		}
		#logo_page h1:first-letter{
			font-size: 300px;
			margin-left
		}
		body.e_commerce h1:first-letter{
			margin-right: -20px;
		}
		body.saison h2, body.references h2 {
	    	font-size: 29px !important;
	    }
		.bals_france #logo_page h1, .bals_france .pseudo-titre {
		    letter-spacing: 14px;
		}

	/* Page d'accueil */

		/* Diaporama */

				div#diaporama {
				    margin-top: 0;
				}
				.carousel-indicators {
	    			display: none !important;
	    		}
	    		.panel-overlay h1 {
				    font-size: 13.5px;
				    line-height: 20px;
				}
				body.page_sommaire .carousel-inner img {
			        width: 135%;
				    height: auto;
				    margin-left: -50px;
				    position: 50%;
				}
				.albums .carousel-inner img {
			        width: 100% !important;
				}
				.carousel-control-next, .carousel-control-prev{
					opacity: 1 !important
				}


		/* Actualités */

			div#diaporama {
			    margin: 0;
			    padding: 5px 0 30px;
			    background: #000;
		        height: 190px;
			}
			div#diaporama a{
			    color: #fff;
			}
			.panel-overlay{
			    width: 86%;
			    height: 82%;
			    top: 16px;
			    left: 26px;
			    padding: 7px;
			}
			.panel-overlay a {
			    display: block;
			    padding: 9px 9px;
			    border: 1px solid;
			    width: 76%;
			    text-align: center;
			    text-transform: uppercase;
			    margin: 13px auto 0;
			    letter-spacing: 2px;
			    border-color: #fff;
			    color: #fff;
			    font-size: 11px;
			}
			.panel-overlay p {
			    line-height: 14px;
			    font-size: 11px;
			    letter-spacing: 1px;
			    padding: 0 7px;
			}
			.panel-overlay h1:first-letter{
				font-size: 150px;
				margin-top: 0;
				margin-right: 0;
    			padding-top: 3px;
			}
			.panel-overlay h1{
				padding-bottom: 0;
			    margin-top: 0;
			    padding-top: 3px;
			}
			.carousel-control-next-icon, .carousel-control-prev-icon {
			    display: none !important;
			}
			.panel-overlay h1{
				padding-bottom: 0;
			    margin-top: 0;
			    padding-top: 3px;
			}
			.page_sommaire div.central.blanc.accueil, 
			.page_sommaire div.central.blanc.accueil>div,
			.page_sommaire div.central.blanc.accueil>div+div {
			    float: left !important;
			}
			.page_sommaire .main {
			    width: 100% !important;
			    padding: 0;
			}
			.central.blanc.accueil{
				height: auto;
				box-shadow: none;
			}
			.central.blanc.accueil img {
			    margin-top: -24px;
			    width: 100%;
			    min-height: auto;
			    display: block;
			}
			.central.blanc.accueil>div+div {
			    padding: 20px 20px 0;
			}
			.central.blanc.accueil>div, .central.blanc.accueil>div+div {
			    background-color: #fff;
			    box-sizing: border-box;
			    width: 100%;
			}
			.central.blanc.accueil>div+div {
				height: auto;
			}

		/* Slogans de la page sommaire */

				#slogans_sommaire .col {
				    font-size: 16px;
				    line-height: 31px;
				}
				#slogans_sommaire .col:nth-child(1){
			        background-position-x: 50%;
				}
				#slogans_sommaire .col:nth-child(2){
			        background-position-x: 50%;
				}
				#slogans_sommaire .col:nth-child(3){
			        background-position-x: 50%;
				}

	/* Colonne de droite */

			.aside {
			    font-size: 14px;
			}
			.livredor-entete {
			    font-size: 26px;
			}
			.livredor p {
			    font-size: 20px;
			}
			.second-media h4 {
			    text-align: left;
			}
			.video, .second-media img {
			    width: 100%;
			}

	/* Formulaires */

			input, input[type="submit"], select, textarea {
			    width: 100%;
			    box-sizing: border-box;
			    height: 50px;
			}
			textarea{
				height: 150px;
			}
			#avertissement{
			    width: 100%;
			    font-size: 10px;
			}

	/* Pages présentant chaque cours */

			body.cours h1{
				text-align: left;
			}
			ul#propositions li {
			    width: 100%;
		        padding: 10px 10px 30px;
			}
			ul#propositions img, body.cours #offres img, h1+p>a img {
		        margin: 0 13% 0 10%;
			    width: 75%;
			    height: auto;
			}
			h1+p>a img+img {
			    width: 77%;
			}
			table img {
			    width: 64%;
			    height: auto;
			}
			.aside iframe {
			    width: 100% !important;
			}
			#premier_cours p:nth-child(2) {
			    font-size: 45px;
			    line-height: 41px;
			}
			#premier_cours p:nth-child(3) {
			    font-size: 11px;
			    line-height: 30px;
			}


	/* Spécificités liés à des pages */


		/* Page La Saison des bals  */	

			#albums_photos .col a {
			    height: 214px;
			}

		/* Page dédiée à chaque bal */

		    ul.galerie li {
			    width: 100% !important;
		        height: 150px !important;
			}
			ul#champlatreux li:nth-child(1) img {
			    top: -62px;
			    width: 120%;
			}
			ul#champlatreux li:nth-child(2) img {
			    left: -18px;
			    top: -22px;
			    width: 113%;
			}
			ul#champlatreux li:nth-child(3) img {
			    top: -20px;
			}
			ul#champlatreux li:nth-child(5) img {
			    position: absolute;
			    width: 100%;
			    top: -30px;
			}
			ul#breteuil li:nth-child(1) img {
			    top: -56px;
			}
			ul#bdp li:nth-child(1) img {
			    position: absolute;
			    left: -24px;
			    top: -53px;
			    width: 110%;
			}
			ul#bdp li:nth-child(3) img {
			    position: absolute;
			    left: 0;
			    top: -38px;
			    width: 107%;
			}
			ul#bdp li:nth-child(4) img {
			    position: absolute;
			    width: 100%;
			    top: -38px;
			    left: -3px;
			}
			ul#bdp li:nth-child(5) img {
			    position: absolute;
			    top: -26px;
			    width: 100%;
			}
			ul#bdp li:nth-child(6) img {
			    position: absolute;
			    width: 100%;
			    top: 0;
			    left: 0;
			}
			ul#bdp li:nth-child(7) img {
			    position: absolute;
			    width: 104%;
			    top: -82px;
			    left: 0;
			}



		/* Page activités */


			ul#medaillons li {
				width: 100%;
			}
			ul#medaillons li img {
    			height: 190px !important;
    		}

		/* Devenir membre */

			.adhesions h3 {
			    font-size: 17px;
			    letter-spacing: 5px;
			}
			.details_img {
			    width: 100%;
		        margin-bottom: 20px;
			}
			.details_formule {
			    width: 100%;
			}
			.e_commerce h1 {
			    font-size: 33px !important;
			    text-align: center;
			}

			/* En-tête */

					body.cours div#logo_page>img {
						width: auto;
					    left: -82%;
					}
					body.cours #logo_page h1, .pseudo-titre {
					    bottom: 10px;
					    right: -16px;
					}
				    #offres h2 {
					    font-size: 16px;
					}

			/* Dimensions */	

					body.cours .aside {
					    margin-top: 40px;
	    			}
					body.cours #offres {
					    margin: 0 0 30px;
					}
					body.cours .tri-col, body.cours .col {
					    margin: 0 !important;
					    text-align: center;
					}
					.vide{
						display: none;
					}

			/* Détails des cours */

					.cours_votrevalse, .cours_votrebal {
					    text-align: center;
					    font-size: 16px;
					    letter-spacing: 3px;
					    margin: 14px auto 12px;
					}
					body.cours p.cours_votrevalse+p, 
					body.cours p.cours_votrebal+p{
						font-size: 16px;
					}
					body.cours p.cours_votrevalse+p::after,
					body.cours p.cours_votrebal+p::after {
					    content: '';
					    width: 58%;
					    height: 1px;
					    display: block;
					    margin: 40px auto;
					}
					body.cours p.cours_votrevalse+p::after{
						background-color: #ff1964;
					}
					body.cours p.cours_votrebal+p::after {
						background-color: #ff531f;
					}

			/* Tableau des tarifs */

					tr td:first-child {
					    min-width: 0;
					}
					td {
					    padding: 7px 10px;
					}
				

		/* Page Les Bals */

				body.bals div.col a {
				    display: block;
				    width: 100%;
				    height: auto;
				}
				body.bals #offres .bi-col div.col:first-child{
					margin-bottom: 30px;
				}
				body.bals div.bi-col div.col a {
					font-size: 17px;
				    background: linear-gradient(to bottom, rgb(23, 22, 22), rgba(0,0,0,0));
				}
				body.bals #offres .tri-col{
					margin: 0;
				}
				body.bals #offres .tri-col .col{
					margin: 5px auto;
				}
				body.bals .bi-col div.col:first-child {
				    background-position-x: 50% !important;
				}


		/* Page Evénementiel */

				.saison .main ul li {
				    float: left;
				    width: 100%;
				    text-align: center;
				    padding: 7px;
				    box-sizing: border-box;
				}
				.saison .main ul li img {
		    		height: 65px;
		    	}
				.col-texte {
				    min-height: 205px;
				}
				.saison #offres img {
				    width: 47% !important;
				    margin: 37px auto 0 !important;
				}
				.saison #offres h2:first-child {
				    text-align: center;
				    border: none;
				    margin-bottom: 0 !important;
				}
				.saison h3{
					border-bottom: 0 !important;
					padding: 15px 0 0 !important;
				}
				.saison h3+p{
				    font-size: 14px !important;
				}
				.saison .col-texte {
				    min-height: 0 !important;
				}
				.saison a.bouton {
				    position: initial !important;
				    margin: 10px 0 30px !important;
				}


		/* Page Contact */

				body.contact #logo_page img {
				    left: -27%;
				}
				body.contact .section, body.contact .aside{
					margin-top: 0;
				}

		/* Page paiement */

				.e_commerce h1 {
					margin: 0;
					padding-bottom: 7px;
				}
				.e_commerce #tri-col {
				    padding: 20px 0;
				}
				.e_commerce #tri-col .col {
				    margin: 5px 0;
				    line-height: 0px;
				    font-size: 29px;
				}

		/* Page albums */

				div.albums .carousel-inner img {
				    margin-left: 0 !important;
				}

}

/*******************************************************

	FORMATS SPECIFIQUES DE SMARTPHONES

********************************************************/


@media only screen and (min-width: 411px) and (max-width: 530px){
	ul.reservations_bal.choix_abonnement li#quatre,
	ul.reservations_bal.choix_abonnement li#cinq,
	ul.reservations_bal.choix_abonnement li#six{
	    background-size: 139%;
	    background-position: 0 -139px !important;
	}
}

/* 	
	414px 	=>	Iphone 6/7/8 PLUS 
	412px 	=> 	Nexus 6  
	411px	=> 	Pixel 2, Pixel 2XL 
*/
@media only screen and (max-width: 414px){
	#nav-toggle img {
    	width: 70%;
	}
	nav#menu #nav-toggle span {
	    margin-top: 25px;
	    height: 23px;
	    width: 43px;
	}
	p#slogan {
	    letter-spacing: 11.2px;
	}
	a#bouton_annonce {
	    letter-spacing: 5.6px !important;
	}
	#vignettes img {
	    width: 69px;
	}
	#actualites .bi-col .col {
	    background-size: 120% auto;
	}
	ul#propositions img, body.cours #offres img, h1+p>a img {
	    margin: 0 6% 0 4%;
	    width: 88%;
	}
	body.cours #offres img, h1+p>a img {
	    margin-left: 2%;
	}
	h1+p>a img+img {
	    width: 90.5%;
	}
	.e_commerce h1 {
	    font-size: 24px;
	}
	table img {
	    width: 75%;
	}
	.details_img {
	    height: 190px;
	}
	ul.galerie li {
	    height: 184px !important;
	}	
	ul#bdp li:nth-child(5) img {
	    position: absolute;
	    top: -34px;
	    width: 112%;
	    left: -26px;
	}
	ul.reservations_bal li {
	    width: 100%;
	    margin-bottom: 20px;
	}
	ul.reservations_bal li {
    	font-size: 13px;
	    background-size: 237%;
	    background-position: -49px -152px;
	    height: 314px;
	}	
	ul.reservations_bal li a {
	    margin-top: 95px;
	    height: 219px;
	}
	ul.reservations_bal li:nth-child(2) {
	    background-size: 229%;
	    background-position: -83px -15px;
	}
	span#bouton {
	    font-size: 13px;
	}	
	ul.reservations_bal.choix_abonnement li {
	    width: 100%;
	    background-size: 117%;
	    background-position: 0 0;
	    height: 350px !important;
	}
	ul.reservations_bal.choix_abonnement li a{
	    margin-top: 165px !important;
	    height: 185px !important;
	}	
}

@media only screen and (min-width: 395px) and (max-width: 414px){
	ul.reservations_bal.choix_abonnement li {
	    background-size: 135% !important;
	    background-position: 0 -96px !important;
	}
}


/*
	384px	=>	Nexus 4, LG Optimus
*/
@media only screen and (max-width: 384px){
	#nav-toggle img {
	    width: 74%;
	}
	nav#menu #nav-toggle span {
	    height: 22px;
	    width: 39px;
	    margin-bottom: 0;
	}
	p#slogan {
	    letter-spacing: 10px;
	}
	a#bouton_annonce {
	    letter-spacing: 4.5px !important;
	}
	#vignettes img {
	    width: 63px;
	}
	body.page_sommaire .carousel-inner img {
	    width: 159%;
	    margin-left: -110px;
	}
	#actualites .bi-col .col {
	    background-size: 129% auto;
	}
	#actualites .tri-col .col {
	    background-size: 106% auto;
	    background-position-y: 3%;
	}
	body.cours #offres img, h1+p>a img {
	    margin-left: -4.5%;
	    width: 104%;
	}
	h1+p>a img+img {
	    width: 106.5%;
	}
	table img {
	    width: 94%;
	}
	.e_commerce h1 {
	    font-size: 23px;
	}
	ul#propositions img{
	    margin-left: 2%;
	    width: 92%;
	}
	.details_img {
	    height: 170px;
	}
	ul.galerie li {
	    height: 150px !important;
	}	
	ul.reservations_bal li {
	    background-position: -49px -126px;
    	font-size: 14px;
    	height: 359px;
	}
	ul.reservations_bal li a {
	    height: 265px;
	}
	ul.reservations_bal li:nth-child(2) {
	    height: 314px;
	}
	ul.reservations_bal li:nth-child(2) a {
	    height: 219px;
	}
	span#bouton {
	    font-size: 15px;
	}
}

/*
	375px	=>	Iphone 6/7/8, Iphone X
*/
@media only screen and (max-width: 375px){
	nav#menu #nav-toggle span {
	    margin-right: 18px;
	}
	p#slogan {
	    letter-spacing: 9.7px;
	}
	#actualites .tri-col .col {
	    background-size: 115% auto;
	}

}

@media only screen and (min-width: 365px) and (max-width: 384px){
	ul.reservations_bal.choix_abonnement li#quatre,
	ul.reservations_bal.choix_abonnement li#cinq,
	ul.reservations_bal.choix_abonnement li#six{
	    background-position: 0 -125px !important;
	}
	ul.reservations_bal.choix_abonnement li#cinq{
	    background-position: 0 -180px !important;
	}
}

/*
	360px	=>	Galaxy S5, Nexus 5, Galaxy SIII, Galaxy Note 2, Galaxy Note 3, Blackberry Z30
*/
@media only screen and (max-width: 360px){
	nav#menu #nav-toggle span {
	    margin-top: 22px;
	}
	#nav-toggle img {
	    width: 70%;
	}
	p#slogan {
	    margin: 8px 0 16px 20px;
	    letter-spacing: 8.9px;
	}
	a#bouton_annonce {
	    letter-spacing: 3.7px !important;
	    margin: 0 auto;
	}
	#actualites .tri-col .col, #actualites .bi-col .col {
	    height: 235px;
	}
	.saison #offres img {
	    width: 54% !important;
	}
}

/*
	320px	=>	Nokia Lumia 520, Iphone 4, Iphone 5SE 
*/
@media only screen and (max-width: 320px){
	nav#menu #nav-toggle span {
	    width: 30px;
	    height: 17px;
	    margin-top: 21px;
	    margin-right: 15px;
	}
	#nav-toggle img {
	    width: 73%;
	}
	p#slogan {
	    letter-spacing: 6.9px;
	}
	a#bouton_annonce {
	    letter-spacing: 2.35px !important;
	}
	#vignettes img {
	    width: 56px;
	}
	body.page_sommaire .carousel-inner img {
	    margin-left: -88px;
	}
	#actualites .tri-col .col, #actualites .bi-col .col {
	    height: 209px;
	}
	#actualites .bi-col .col {
	    background-size: 140% auto;
	}
	.panel-overlay h1 {
	    font-size: 14px;
	    letter-spacing: 0px;
	    line-height: 15px;
	}
	.panel-overlay p {
	    line-height: 14px;
	    font-size: 11px;
    }	
    nav#menu {
	    padding-bottom: 12px;
	}
    div#diaporama {
	    margin: 0;
	    padding: 5px 0 15px;
	}
	.e_commerce h1 {
	    font-size: 21px;
	}
	#premier_cours p:nth-child(1) {
	    font-size: 12px;
	}
	#premier_cours p:nth-child(3) {
	    font-size: 9px;
	    line-height: 18px;
	}
	body.contact #logo_page img {
	    left: -44%;
	}
	.central.blanc.accueil h2, .central.blanc.article h2 {
    	font-size: 24px !important;
	}
	#logo_page h1, .pseudo-titre {
	    font-size: 21px;
	}
	.e_commerce .details_img {
	    height: 170px;
	}
	ul.reservations_bal li:nth-child(2) {
    	height: 336px;
	    background-size: 257%;
	}
	ul.reservations_bal li:nth-child(2) a {
	    height: 241px;
	}
	ul.reservations_bal.choix_abonnement li {
	    background-size: 163% !important;
	    height: 343px !important;
	    background-position: 0 -121px !important;
	}
	ul.reservations_bal.choix_abonnement li#deux {
	    background-position: 0 -78px !important;
	}
	ul.reservations_bal.choix_abonnement li a {
	    margin-top: 157px !important;
	    height: 186px !important;
	}
	ul.reservations_bal.choix_abonnement h4 {
	    font-size: 17px;
	}
	.choix_abonnement h4+span {
	    font-size: 14px;
	}	
}

/*
	533px	=>	Nokia Lumia 520 format paysage
*/
@media all and (max-width: 533px) and (orientation:landscape){
	nav#menu #nav-toggle span {
	    margin: 35px 20px 10px 20px;
	    height: 27px;
	    width: 69px;
	}
	p#slogan {
	    margin: 20px 0 20px 20px;
	    letter-spacing: 16.6px;
	}
	a#bouton_annonce {
	    font-size: 15px !important;
	}
	#vignettes img {
	    width: 84px;
	}
	body.page_sommaire .carousel-inner img {
	    width: 135%;
	    height: auto;
	    margin-left: -69px;
	}
	#logo_page img {
	    left: -17%;
	}
	body.cours div#logo_page>img {
	    left: -39%;
	}
	body.references #logo_page img {
	    left: -27%;
	}
	#albums_photos .col a {
	    height: 314px;
	}
}

/*******************************************************

	TABLETTES ET SMARTPHONES PAYSAGES LARGES

********************************************************/


/* Nexus 7 (960 paysage) */
@media only screen and (min-width: 534px) and (max-width: 960px){

		#entete,
		nav#menu ul, 
		.main,
		#plan, 
		#informations{
		    width: 100%;
		}
		#entete,
		.main,
		#pied{
		    padding: 0 20px;
		    box-sizing: border-box;
		}
		ul#menu-cours {
		    height: 85.3%;
		}
		.video, .second-media img {
		    width: 100%;
		}
		.detail_offre img {
		    width: 60%;
		    height: auto !important;
		    margin-left: -12px;
		}
		ul.reservations_bal.choix_abonnement li:after {
			display: none;
		}
}

/* Nokia N9 (854 paysage) */
@media only screen and (min-width: 534px) and (max-width: 854px){

	nav#menu a {
	    letter-spacing: 2.4px;
	}
	#actualites h2{
		font-size: 11px;
	}
	#actualites .tri-col .col:nth-child(2) {
	    background-position: 75% 124%;
	}
	#actualites .bi-col .col:nth-child(1) {
	    background-position-y: 38px;
	}
	#slogans_sommaire .col, #actualites .col, #offres .col, #references .col {
	    width: 30.5%;
	}
	#slogans_sommaire .col{
		line-height: 23px;
	}
	#menu-cours li h4 {
	    line-height: 6px;
	}
	#menu-cours li a {
	    line-height: 12px;
	}
	ul#menu-cours {
	    height: 75.3%;
	}
	#premier_cours p:nth-child(1) {
	    font-size: 12px;
	}
	#premier_cours p:nth-child(2) {
	    font-size: 40px;
	    line-height: 37px;
	}
	#premier_cours p:nth-child(3) {
	    font-size: 9px;
	}
	body.cours #logo_page h1, .pseudo-titre {
	    bottom: 24px;
	}
	body.cours div#logo_page {
	    margin-bottom: 0;
	}
	#offres .col{
		font-size: 13px;
	}
	ul#propositions li {
	    width: 47.5%;
	}
	#offres h3 {
	    font-size: 17px;
	}
	#menu-cours a:hover>.detail_offre{
		display: none;
	}
	nav#menu a {
	    padding: 13px !important;
	    font-size: 12px;
	    letter-spacing: 0;
	}
	.page_sommaire .main{
	    padding: 0;
	}
	.page_sommaire .main img {
	    width: 129%;
	}
	.page_sommaire div.central img{
	    width: 200%;
	    height: auto;
	}
	.central.blanc.accueil h2, .central.blanc.article h2 {
	    font-size: 20px !important;
	}
	.central.blanc.accueil>div+div {
	    padding: 40px;
	}
	#albums_photos .col {
	    width: 48%;
	}
	ul.galerie li {
	    height: 139px !important;
	}
	ul#champlatreux li:nth-child(4) img {
	    top: -50px;
	}
	ul#champlatreux li:nth-child(5) img {
	    width: 100%;
	}
	.bals_france .section, .bals_france .aside {
	    width: 100% !important;
	    margin: 20px 0 !important;
	}
	ul.details_liste li {
	    width: 45%;
	}
	div#diaporama {
	    margin: 10px 0 0;
	    height: 350px;
	    padding: 0;
	}
	.panel-overlay {
	    width: 550px;
	    height: 295px;
	    top: 7%;
	    left: 14%;
	}
	.page_sommaire .carrousel-item img{
		width: 129% !important;
	}
	.carousel-indicators{
		display: none !important
	}
	ul.reservations_bal li {
	    background-size: 204%;	
	    font-size: 13px;
	    line-height: 19px;
	    height: 303px;
	}
	ul.reservations_bal li a{
		height: 213px;
	}
	span#bouton {
	    font-size: 12px;
	}

}

/* Pixel 2XL (823 paysage) */
@media only screen and (min-width: 534px) and (max-width: 823px){

	#actualites .tri-col .col:nth-child(1) {
	    width: 47%;
	}
	#actualites .tri-col .col:nth-child(2) {
	    width: 47%;
	}
	#actualites h2 {
	    font-size: 14px;
	}
	#actualites .tri-col .col:nth-child(3) {
	    width: 100%;
	    background-position-y: 34%;
    	height: 300px;
    	background-image: url(https://www.votrebal.com/squelettes/bal-valse-media/actu_gauche_tablette.jpg);
	}
	#actualites .tri-col .col, 
	#actualites .bi-col .col {
	    height: 260px;
	    background-size: 100%;
	}
	#actualites .bi-col .col {
	    background-position-y: 57px !important;
	}
	#menu-cours li a {
	    line-height: 11px;
	}
	ul#menu-cours {
	    height: 72.5%;
	}
	ul#propositions li {
	    width: 100%;
	}
	ul#propositions img {
	    margin-left: -2%;
	    width: 96%;
	    height: auto;
	}
	#offres h3 {
	    font-size: 15px;
	}
	.col-texte {
    	min-height: 245px;
	}

}

/* Iphone X (812 paysage) */
@media only screen and (min-width: 534px) and (max-width: 812px){
	#actualites .tri-col .col, #actualites .bi-col .col {
	    background-size: 102%;
	}
	ul#menu-cours {
	    height: 71.5%;
	}
	body.cours #logo_page h1, .pseudo-titre {
	    bottom: 36px;
	}
	body.bals div.col a {
	    letter-spacing: 1px;
	    font-size: 14px;
	}
}

/* Nexus 10 (800 portrait) */
@media only screen and (min-width: 534px) and (max-width: 800px){

	#logo img {
	    width: 315px;
	}
	#vignettes img {
	    width: 60px;
	    margin: 10px 2px 0;
	}
	ul#vignettes li:first-child{
		display: none;
	}
	.cours_votrebal, .cours_votrevalse {
	    font-size: 15px;
	}
	ul#menu-cours {
	    height: 89.5%;
	}
	#menu-cours li a {
	    line-height: 10px;
	}
	body.cours div#logo_page {
	    height: 264px!important;
	}
	body.cours #logo_page h1, .pseudo-titre {
	    bottom: -34px;
	    padding-right: 0;
	}
	ul#propositions {
	    padding: 10px 20px;
	}
	#date {
	    letter-spacing: 4px;
	}
}

/* Ipad (768 portrait) */
@media only screen and (min-width: 534px) and (max-width: 800px){
	#vignettes img {
	    width: 66px;
	    margin: 4px 2px 0;
	}
	#actualites .bi-col .col {
	    background-size: 120% !important;
	    background-position-y: 56px !important;
	}
	#slogans_sommaire .col {
	    line-height: 22px;
	    font-size: 13px;
	}
	body.cours div#logo_page {
	    overflow: hidden;
	}
	body.cours div#logo_page>img {
	    width: 104%;
	}
	body.cours #logo_page h1, .pseudo-titre {
	    bottom: -15px;
	}
	body.cours div#logo_page {
	    height: 277px!important;    
	    margin-bottom: 25px;
	}
	#menu-cours li h4 {
	    line-height: 9px;
	}
	ul#menu-cours {
    	height: 88.7%;
	    width: 44%;
	}
	.texte h2:first-child, #offres h2:first-child {
	    margin-top: 0; 
	}
	.cours_votrebal, .cours_votrevalse {
	    font-size: 14px;
	}
	#premier_cours p:nth-child(1) {
	    font-size: 10px;
	}
	#premier_cours p:nth-child(2) {
	    font-size: 34px;
	    line-height: 31px;
	}
	#premier_cours p:nth-child(3) {
	    font-size: 8px;
	    padding: 5px 0 0;
	}
	body.bals .bi-col div.col {
	    height: 240px;
	}
	body.bals div.col a {
	    letter-spacing: 1px;
	    font-size: 14px;
	}
	.saison .main ul li img {
	    height: 50px;
	}
	div#logo_page {
	    margin-bottom: 0;
	}
	.aside {
	    padding-left: 15px;
	}
	ul.reservations_bal.choix_abonnement li {
	    height: 380px;
	}
	ul.reservations_bal.choix_abonnement li a {
	    height: 205px;
        margin-top: 175px;
	}
	ul.reservations_bal.choix_abonnement h4 {
	    font-size: 14px;
	}
	ul.reservations_bal.choix_abonnement li#quatre,
	ul.reservations_bal.choix_abonnement li#cinq,
	ul.reservations_bal.choix_abonnement li#six{
	    background-size: 139%;
	    background-position: 0 -139px !important;
	}	
}

/* Iphone 6/7/8 PLUS (736 paysage) */
@media only screen and (min-width: 534px) and (max-width: 736px){
	.carousel-inner img {
	    width: 113% !important;
	    margin-left: -50px;
	}
	.carousel-indicators {
	    top: 203px !important;
	}
	div.albums .carousel-indicators {
	    display: none !important;
	}
	.panel-overlay h1 {
	    line-height: 25px;
	}
	#actualites .tri-col .col:nth-child(2) {
	    background-position: 75% 102%;
	}
	#actualites .bi-col .col {
	    background-position-y: 56px !important;
	}
	#actualites .tri-col .col, #actualites .bi-col .col {
	    background-size: 114%;
	}
	#slogans_sommaire .col {
	    line-height: 20px;
	    font-size: 15px;
	}
	body.cours div#logo_page>img {
	    width: 108.5%;
	}
	body.bals div.col a {
	    height: 131px;
	    line-height: 22px;
	}
	#offres h3 {
	    font-size: 14px;
	}
	.col-texte {
	    min-height: 250px;
	}
	.col-3 {
	    float: left;
	    width: 30%;
	}
	table img {
	    width: 100%;
	    height: auto;
	}
	ul#menu-cours {
	    height: 84.7%;
	    width: 44%;
	}
	#menu-cours li h4 {
	    line-height: 6px;
	}
}

/* Nexus 6 (732 paysage), Pixel 2 (731 paysage) */
@media only screen and (min-width: 534px) and (max-width: 731px){
	body.cours div#logo_page>img {
	    width: 109%;
	}	
	.col-texte {
	    min-height: 254px;
	}
	body.saison h2{
	    margin-top: 17px !important;
	}
	#albums_photos .col a {
	    height: 215px;
	}
}

/* Iphone 6/7/8 (667 paysage) */
@media only screen and (min-width: 534px) and (max-width: 667px){
	body {
    	font-size: 14px;
	}
	.carousel-indicators {
	    top: 183px !important;
	}
	#actualites .tri-col .col, #actualites .bi-col .col {
	    height: 230px;
	}
	#slogans_sommaire .col {
	    line-height: 37px;
	    font-size: 18px;
	    width: 100%;
	    background-position: 50% 32% !important;
	}
	.section {
	    width: 55%;
	}
	.aside {
	    width: 45%;
	}
	.spip_logo {
	    width: 131%;
	}
	#logo_page {
	    height: 266px;
	    overflow: hidden;
	}
	body.cours div#logo_page>img {
	    width: 120%;
	}
	ul#menu-cours {
	    width: 54%;
	}
	#offres img, img.offres {
	    width: 104%;
	    margin-left: -13px;
	}
	body.cours .section, body.cours .aside {
	    width: 100%;
	}
	tr td:first-child {
	    min-width: 0;
	}
	td {
	    padding: 8px;
	}
	body.cours .section{
	    padding: 0;
	}
	body.cours .aside  {
	    padding: 20px 0 0;
	    font-size: 14px;
	}
	.aside iframe {
	    width: 100%;
	    height: 322px;
	}
	table img {
	    width: auto;
	}
	.e_commerce #tri-col .col {
	    font-size: 22px;
	}
	body.saison .col img {
		margin-top: 30px;
	    width: 50% !important;
	}
	.col-texte {
	    min-height: 295px;
	}
	#offres h3 {
	    font-size: 13px;
	    min-height: 36px;
	    line-height: 16px;
	}
	#albums_photos .col a {
	    font-size: 13px;
        height: 199px;
	}
}

/* Ipad Format paysage  1024px*/
@media only screen and (min-width: 770px) and (max-width: 1100px){
	nav#menu a {
	    letter-spacing: 2.2px;
	}
	.panel-overlay {
	    left: 24%;
	    padding: 5px 15px;
	    height: 250px;
	}
	.panel-overlay h1 {
	    margin: 0;
	    padding-top: 14px;
	}
	.panel-overlay p {
	    line-height: 20px;
	    letter-spacing: 1px;
	    padding: 0;
	}
	.page_sommaire div.central img {
	    width: 116% !important;
	}
	.central.blanc.accueil h2, .central.blanc.article h2 {
	    font-size: 19px !important;
	}
}

/* Blackberry Z30, Galaxy Note 3, Galaxy Note II, Galaxy SIII, LG Optimus L70, Nexus 4, Nexus 5, Galaxy S5, (640 paysage) */
@media only screen and (min-width: 534px) and (max-width: 640px){
	#logo img {
	    width: 275px;
	}
	#vignettes img {
	    width: 56px;
	}
	#entete, nav#menu ul, .main {
	    margin: 0;
	}
	div#diaporama {
	    margin-top: 30px;
	}
	#slogans_sommaire .col {
	    line-height: 33px;
	    font-size: 17px;
	}
	#slogans_sommaire .col {
	    background-position: 50% 41% !important;
	}
	#logo_page {
	    height: 197px;
	}
	.spip_logo {
	    width: 100%;
	}
	h1{
		font-size: 18px;
	}
	body.cours div#logo_page>img {
	    width: 125.5%;
	}
	body.cours #offres .bi-col, 
	body.cours #offres .tri-col {
    	width: 100%;
    	display: inline;
	}
	body.cours #offres .col {
	    width: 50%;
	    padding: 0 21px 0 0;
	    box-sizing: border-box;
	}
	body.bals div.col a {
	    height: auto;
	}
	body.bals #offres .tri-col {
		margin: 0;
	}
	body.saison .col img {
	    width: 69% !important;
	}
	body.contact h1 {
	    margin-bottom: 0 !important;
	}
	ul.reservations_bal li {
	    background-size: 238%;
		background-position: -48px -120px;
	    height: 259px;
	    margin-top: 25px;
	}
	ul.reservations_bal li a {
	    height: 169px;
	}
	ul.reservations_bal li:nth-child(2){
		background-position: -107px -40px;
	}
	h4+span {
	    display: none;
	}
	span#bouton {
	    font-size: 13px;
	    letter-spacing: 2px;
	}
}

/* Nexus 7, Blackberry Playbook (600 portrait) */
@media only screen and (min-width: 534px) and (max-width: 600px){
	p#slogan {
	    letter-spacing: 5.8px;
	} 
	nav#menu a {
	    font-size: 10.5px;
	    padding: 15px 11px !important;
	}
	ul#menu-cours {
	    height: 84.7%;
	}
	#menu-cours li h4 {
	    line-height: 6px;
	}
	.carousel-indicators {
	    top: 161px !important;
	}
	#actualites h2 {
	    font-size: 13px;
	}
	#actualites p {
	    font-size: 14px;
	}
	#actualites .bi-col .col:nth-child(1) {
	    background-size: 130%;
	}
	#actualites .bi-col .col {
   		background-size: 133% !important;
	    height: 230px;
	}
	#slogans_sommaire .col {
	    line-height: 27px;
	    font-size: 16px;
	}
	.spip_logo {
	    width: 121%;
	}
	#logo_page {
	    height: 221px;
	}
	body.cours div#logo_page>img {
	    width: 134.5%;
	}
	body.cours #offres .col {
	    padding: 0 33px 0 0;
	}
	table {
	    font-size: 12px;
	}
	td {
	    padding: 5px;
	}
	#date {
	    letter-spacing: 3px;
	}
	#offres h3 {
	    min-height: 48px;
	}
	.col-texte {
	    min-height: 320px;
	}
	body.contact .section, body.contact .aside{
		width: 100%;
		padding: 0;
		margin-top: 0;
	} 
	input, input[type="submit"], select, textarea {
	    width: 100%;
	    height: 46px;
	    box-sizing: border-box;
	}
	textarea{
		height: 150px;
	}
	.livredor p {
	    font-size: 22px;
	}
	#albums_photos .col a {
	    font-size: 12px !important;
	}
	#albums_photos .col a {
	    font-size: 13px;
	    height: 179px;
	}
	body.saison h2 {
	    margin-top: 40px !important;
	}
	.saison h2+ul {
	    margin-bottom: 0;
	}
	.saison #offres {
    margin-top: 20px;
}
 
/* Iphone 5/SE (568 paysage) */
@media only screen and (min-width: 534px) and (max-width: 568px) and (orientation:landscape) {
	#logo img {
	    width: 250px;
	}
	p#slogan {
	    letter-spacing: 4.9px;
	    margin-left: 8px;
	}
	#vignettes img {
	    width: 50px;
	}
	nav#menu a {
	    padding: 15px 9px !important;
	}
	.carousel-indicators {
	    top: 151px !important;
	}
	#actualites h2 {
	    font-size: 17px;
	}
	#actualites .tri-col .col, #actualites .bi-col .col {
	    height: 222px;
	}
	.spip_logo {
	    width: 128%;
	}
	body.cours div#logo_page>img {
	    width: 142.5%;
	}
	ul#menu-cours {
	    width: 58%;
	}
	body.cours #offres .col {
	    padding-right: 20px;
	}
	.livredor-entete {
	    font-size: 30px;
	}
	.aside iframe {
	    height: 258px;
	}
	h1+p>a {
	    text-align: center;
	}
	h1+p>a img+img {
	    margin-left: -1%;
	}
	.e_commerce #tri-col {
	    padding: 20px 0;
	}
	.e_commerce #tri-col .col {
	    margin: 5px 0;
	    line-height: 0px;
	    font-size: 29px;
	    width: 100%;
	}
	body.saison_bals .section, body.saison_bals .aside{
		width: 100%;
		margin: 0;
		padding: 0;
	} 
	body.saison_bals .section{
		margin-top: 30px;
	}
	ul#propositions li {
	    width: 49%;
	}
	#offres {
 	   margin-top: 20px;
 	}
 	.col-texte {
	    min-height: 340px;
	}
	#albums_photos .col a {
	    font-size: 14px !important;
	    letter-spacing: 7px;
	}
	#albums_photos .col a {
	    height: 214px;
	}
}