/* >>>>>>>>>>>>>> STYLES GÉNÉRIQUES <<<<<<<<<<<<< */

/** BODY **/
*{	box-sizing: border-box;}

html, body {
	width : 100%;
	height : 100%;
	margin : 0 0 0 0;
	padding : 0 0 0 0;
	font-family: 'Raleway', sans-serif;
	background-color : white;
	font-size : 14px;
	color: black;
}

a {opacity : 1; text-decoration : none; color : black; font-weight:700; font-size : 1.2em; transition : opacity 0.5s;}
a:hover {opacity : 0.6;}

h1 {color : black; font-size :4.5em; text-align:center;}
h2 {font-size : 2.9em;}
h3 {color : black; font-size :2em; text-align:center; letter-spacing : 1.5;}
h4 { font-size : 1.2em; font-weight : 700;}
h5 {letter-spacing : 2;}
p {font-size : 1.em; text-align : justify;}



/* BLOC */

.CONTENT {position : relative; width : 1200px; margin : 0 auto 0 auto; padding :  1em 0 1em 0;}
.CONTENT::after {display :table;content: " ";clear: both;}
.CONTENT_LARGEUR {width : 100%;} 
.COL12, .COL11, .COL10, .COL8, .COL6, .COL7, .COL5, .COL4 ,.COL3 ,.COL2, .COL1 {position : relative; float : left; margin : 0 0 0 0; padding : 0 0 0 0; min-height : 1px;} 
.COL12 {width : 100%;}
.COL11 {width : 91.66666666%;}
.COL10 {width : 83.3333333%;}
.COL8 {width : 66.666666%;}
.COL7 {width : 58.333333%;}
.COL6 {width : 50%;}
.COL5 {width : 41.666666%;}
.COL4 {width : 33.333333%;}
.COL3 {width : 25%;}
.COL2 {width : 16.666666%;}
.COL1 {width : 8.3333333%;}

.CITATION {padding : 3em 20em 3em 20em; text-align : center;}

/* COULEUR */
.BLANC {color:white;}
.JAUNE {color:#fdc300;}
.NOIR {color:black;}
.BGBLANC {background-color: white;}
.BGJAUNE {background-color: #fdc300;}
.BGSABLE {background-color: eae9e5;}

/*IMAGE*/
.IMAGE {background-size : cover; background-repeat : no-repeat; height: inherit; background-position : center;}

/*BOUTON*/
.BOUTON {display : inline-block; background-color :white; padding : 0.8em 1em 0.8em 1em;
	box-shadow: 1px 8px 20px #deb332;
	border-radius: 3em;
	transition : box-shadow 0.5s, opacity 0.5s;
}

.BOUTON img {width:32px;}
.BOUTON:hover {box-shadow: 0px 0px 15px #deb332;}

.BOUTONFONDBLANC {display : inline-block; background-color :white; padding : 0.8em 1em 0.8em 1em;
	box-shadow: 1px 8px 20px #e7e7e7;
	border-radius: 3em;
	transition : box-shadow 0.5s, opacity 0.5s;
}

.BOUTONFONDBLANC img {width:32px;}
.BOUTONFONDBLANC:hover {box-shadow: 0px 0px 15px #e7e7e7;}

.ARRONDI {border-radius: 3em;}

/*MASQUE BLANC SUPERIEUR*/
.MasqueBlancSuperieur {margin-top : -50px; height : 80px; background-image:url('dg/masqueblancsuperieur.png'); background-repeat : no-repeat;}

/* >>>>>>>>>>>>>> STYLES SPÉCIFIQUES <<<<<<<<<<<<< */

/* ID */
#MENU {position : absolute; z-index:100;}
#MENU .CONTENT {padding : 5em 0em 3em 0em;}
#MENU img {width : 100%;}
#MENU ul li img {width: 23px;}
#MENU ul {text-align : right; } 
#MENU ul li{display : inline-block; margin: 2em 3em 0 0;}
#MENU ul li:nth-child(5){margin: 0 0 0 0;}



#COVER {background-image: url('dg/background.jpg'); background-size:cover; background-position : center; height: 1000px;background-repeat: no-repeat;}
#TYPO {margin : 15em 0 0 0;}
#TYPO { width : 100%;}
#TYPO img {width:100%;}

#CITATION {margin-top : -300px; background-image : url('dg/blocpeinture.png'); background-repeat : no-repeat; background-position :center; padding : 3em 18em 5em 18em; text-align : center;}
#CITATION img {width : 272px;}

#ACTIVITESTITRE h3 {padding : 0 12em 0 12em;}

#ACTIVITES {text-align : center; font-weight : 700; font-size : 2em; opacity: 0s;}
#ACTIVITES a {color:#fdc300; font-size:0.8em;}
#ACTIVITES img {width:195px;}
#ACTIVITES .COL3{border-right : solid 1px gray; height : 400px; padding : 0.5em 0 0.5em 0; }
#ACTIVITES .COL3:nth-child(4){border-right : solid 0px gray;}

#PILATES {height : 40em; border-radius: 3em;}
#PILATES .COL6:nth-child(2) {padding : 3em; height:inherit;}

#GARUDA {height : 40em; border-radius: 3em;}
#GARUDA  .COL6:nth-child(1) {padding : 3em; height:inherit;}

#ABDOS {height : 40em; border-radius: 3em;}
#ABDOS .COL6:nth-child(2) {padding : 3em; height:inherit;}

#DANSE {height : 40em;}
#DANSE .COL6:nth-child(1) {padding : 3em; height:inherit;}

#SABLE {background-image : url('dg/sable.jpg'); background-size: 100% 100%; background-repeat : no-repeat;}
#QUISUISJE {background-image : url('dg/motif.png'); background-position : center; background-size : cover; padding : 4em 0 4em 0;}
#QUISUISJE .COL12 img {width : 108px;}
#QUISUISJE .COL8 img {width : 250px;}
#QUISUISJE .COL8 h3:nth-child(4) {font-weight : 300; font-size : 1.8em;}


#OUMETROUVER {background-image : url('dg/vaguejaune.png'); background-position : center; background-size : 100% 100%; height : 2em;}
#OUMETROUVER2 .COL12 img {width : 100px;}

#HORAIRES .COL3 {border-right : solid 1px gray; padding : 0 2em 0 2em;}
#HORAIRES .COL3:nth-child(4) {border : 0px;}
#HORAIRES2 .COL4 {border-right : solid 1px gray; padding : 0 2em 0 2em;}
#HORAIRES2 .COL4:nth-child(3) {border : 0px;}
#HORAIRES2 {border-top :  solid 1px gray; }
#HORAIRES2 .COL6 {border-right : solid 1px gray; padding : 0 2em 0 2em;}
#HORAIRES2 .COL6:nth-child(2) {border : 0px;}
#CONTACT {background-image : url('dg/vaguejaune2.png'); background-position : center; background-size : 100% 100%; height : 2em;}
#CONTACT .COL6 img {width:100%;}
#CONTACT2 .COL6 h3 {text-align : left; color : white;}
#CONTACT2 .COL6 {padding : 0 3em 0 3em;}

#FOOTER .CONTENT {border-top: 1px solid white; padding-top : 6em;}
#FOOTER .COL3 img {width : 80%; }
#FOOTER .COL5 img, #FOOTER .COL4 img {width : 100%;}

.MOBILE {display:none;}