@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Patrick+Hand');


*{ margin: 0; padding: 0; border: none; box-sizing: border-box; }

body{ font-family:  "Helvetica Neue", Helvetica, Gotham, Arial, "sans-serif"; padding-top: 50px; font-size: 14px; }
section{ padding: 100px 0; }

ul, li{ list-style-position: inside}
.wrapper{ margin: 0 auto; max-width: 1200px; padding: 0 2% }

p{     font-size: 16px;
    line-height: 30px; }
.table {
    display: table;
    height: 100%;
    width: 100%;
    min-height: 100%;
}

.cell {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    min-height: 100%;
}

header{ height: calc( 100vh - 50px);  background: url(/_img/backgrounds/sun2.jpg) no-repeat center center / cover; position: relative;}

header:before{ content: '.'; position: absolute; height:100%; width: 100%;
	background-color: rgba(255,255,255,0.53);  top: 0; left: 0; font-size: 0;
background-color: black; opacity: 0.1}
header .wrapper{ max-width: 1200px; margin: 0 auto; position: relative; text-align: center}
header .content{ ''
    text-align: center;}
header .content h2{ 
    margin-bottom: 0px;
    color: #ffe858;
    font-weight: 900;
    font-size: 77px;
    letter-spacing: 7px;}
header img{     width: 350px;}
header h1{ font-weight: 400;
    margin-bottom: 30px; color: #fff; font-family: 'Patrick Hand', cursive;
}
header h1 span{ font-weight: bold; font-size: 32px }
header .toBottom{ text-align: center; display: block; }
header .toBottom img{ width:60px; display: inline-block}

.burgerMenu{   display: none;  position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    margin: 10px;
	}
section .toBottom{ text-align: center; display: block;margin-top: 20px; opacity: 0.8 }
section .toBottom:hover{ opacity: 1}
section .toBottom img{ width:60px; display: inline-block}
.sect_blue{ /*border-top: 15px solid #0065be;*/ background-color:#0678bc;   }
.sect_blue h2{ color:#fff;}

.sect_orange{ /*border-top: 15px solid #e46a1b;*/ background-color:#f87f30;  }
.sect_orange h2{ color:#fff;}

.sect_yellow{ /*border-top: 15px solid #dfc72f;*/ background-color:#FFD002;  }
.sect_yellow h2{ color:#fff;}

.sect_turquoise{ /*border-top: 15px solid #34b7a3;*/ background-color:#52d5c4; }
.sect_turquoise h2{ color:#fff;}

.sect_pink{ /*border-top: 15px solid #e35ddb;*/ background-color:#fbaed2; }
.sect_pink h2{ color:#fff;}

.sect_green{ /*border-top: 15px solid #46d675;*/ background-color:#37d082; }
.sect_green h2{ color:#fff;}

.sect_purple{ /*border-top: 15px solid #46d675;*/ background-color:#8a008b; }
.sect_purple h2{ color:#fff;}

h2{ text-align: center; margin-bottom: 50px;    font-size: 55px;
    font-weight: 200; font-family: 'Just Another Hand', cursive;font-family: 'Lobster', cursive; text-align: center}
h2 b{ display: block; margin-bottom: 10px }
h2 b img{ width: 60px}
.orange{ color: #f87f30; }
.yellow{ color: #ffe002; }
.turquoise{ color: #52d5c4; }
.blue{ color: #0678bc; }
.pink{ color: #fbaed2; }
.green{ color: #37d082; }
.purple{ color: #8a008b; }

.sect_blue .wrapperBtn .btn{color: #0678bc;}
.sect_orange .wrapperBtn .btn{ color: #f87f30; }
.sect_yellow .wrapperBtn .btn{ color: #ffe002; }
.sect_turquoise .wrapperBtn .btn{ color: #52d5c4; }
.sect_pink .wrapperBtn .btn{ color: #fbaed2; }
.sect_green .wrapperBtn .btn{ color: #37d082; }
.sect_purple .wrapperBtn .btn{ color: #8a008b; }

section .wrapper{ max-width: 900px}
.bigPicture {
    height: 600px;
    position: relative;
    background-color: #000;
}

.fromWYSIWYG{ color: #fff; }
.fromWYSIWYG a{ color: #fff; text-decoration: underline; font-weight: bold;}
.fromWYSIWYG img{ max-width: 100%}
.parallax {
    height: 600px;
   	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #000;
	background-position: 50% bottom;
}

nav{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	height: 50px;
	border-bottom: aliceblue;
	background-color: #fff;
	text-align: center;
	}
nav ul.nav{display: table;width: 75%;float: right;margin: 0 8% 0 0;}
nav ul li{ display: table-cell; }
nav ul li a{
    padding: inherit;
    height: 50px;
    text-decoration: none;
    color: #555;
    text-transform: uppercase;
    display: block;
    position: relative;
    z-index: 3;
    padding: 15px 2px;
    font-weight: 500;
}

nav ul.lang li a{
  font-weight: 300;
    padding: 15px 5px; font-size: 13px;
    
}
nav ul.lang li.active a{ font-weight: 600}
nav ul.nav li a span {
    position: relative;
    display: block;
    z-index: 2;
	    font-size: 12px;
}
nav ul.lang{display: table; width: 6%;float: right; position: absolute;right: 0;margin: 0 1%;}
a.topHome {
    position: absolute;
    top: 2px;
    left: 2%;
}

nav ul.nav li a:after{     content: '.';
    font-size: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 7px;
    bottom: 0;
    left: 0;
    background-color: #0678bc;
    z-index: 1; }

nav ul.nav li:hover a:after{ height: 100%}
nav ul.nav li:hover a span { color: #fff}

nav ul li.navorange a:after{ background-color: #f87f30; }
nav ul li.navyellow a:after{ background-color: #ffe002; }
nav ul li.navturquoise a:after{ background-color: #52d5c4; }
nav ul li.navblue a:after{ background-color: #0678bc; }
nav ul li.navpink a:after{ background-color: #fbaed2; }
nav ul li.navgreen a:after{ background-color: #37d082; }
nav ul li.navpurple a:after{ background-color: #8a008b; }

.fromWYSIWYG iframe{ max-width: 100%}
.fromWYSIWYG strong a{ margin: 30px auto; display: inline-block; background-color:#fff; color: #fbaed2; 
border-radius: 5px; padding: 10px;  text-decoration: none; }
.fromWYSIWYG p, .fromWYSIWYG li{
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 20px;
	font-weight: 400;
	text-align: justify
	}
.fromWYSIWYG h3{ font-size: 20px; }


.wrapperBtn{ text-align: center; }

.wrapperBtn .btn{    margin: 30px auto;
    display: inline-block;
    background-color: #fff;
    color: #fbaed2;
    border-radius: 5px;
    padding: 10px;
    text-decoration: none; font-size: 18px; }


footer{ padding: 50px 0}

footer .col{   
    display: block;
    vertical-align: top;
    width: 50%;
    float: left;
	margin-bottom: 30px
}
footer .col.last{ text-align: right}
footer .col.last .inside{ text-align: left; display: inline}
footer p.copyright { margin-bottom: 22px; }
footer p.copyright img{ display: inline-block; vertical-align: middle; margin-right: 10px; }
footer #contact{ padding-left: 15%; }
.facebook b{    width: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 7px;}
.wrapperCol{ display: table;     width: 100%;}
.btn{ background-color:#f87f30; border-radius: 5px; padding: 10px; color: #fff; text-decoration: none; display: inline-block; margin-bottom: 20px}


.circleProfil {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
	vertical-align: middle; 
    width: 20%;
    border: 3px solid #FDD55E;
}
.circleProfil img{ display: block; width: 100%}

.circleProfil + p{display: inline-block;
    margin-left: 2%;
    width: 76%; vertical-align: middle; }

footer a{ color: #0678bc;}
#creation { text-align: center}
#creation p{ text-align:center}
#creation p a{  background-color:#fff; border-radius: 5px; padding: 10px; color: #8a008b; text-decoration: none; display: inline-block; margin-bottom: 20px}


.wrapTherapie { display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1%;
    margin-left: -1%; }

.wrapTherapie .element {  -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative;
    min-width: 48%;
    max-width: 48%;
    margin: 1%; background-color: #fff}

.wrapTherapie .element a{ display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; text-decoration: none}

.wrapTherapie .element:hover{ 
  
  box-shadow: 0px 0px 82px 0px rgba(0, 0, 0, 0.35);
 
}
.wrapTherapie .element:hover .hover{ display: block}
.wrapTherapie .element .picture{ max-width: 40%; min-width: 40%; 
 -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
	position: relative;
    flex-grow: 1;
}
.wrapTherapie .element .content{  max-width: 60%; min-width: 60%; 
 -ms-flex-preferred-size: 0;
    flex-basis: 0;
	padding:  0 15px;
    -ms-flex-positive: 1;
    flex-grow: 1; align-self: center; text-align: center}
.wrapTherapie .element .picture img{ display:block; width: 100%}

.wrapTherapie .element .content h5{color: #7e1c86;
	text-decoration: none; font-weight: 200; margin-bottom: 15px; font-size: 13px
}

.wrapTherapie .element .hover {  display: none; 
  background-color: rgb(68, 12, 73, 0.7);
	position: absolute; top: 0; left: 0; width: 100%; height: 100%
	
 
}
.wrapTherapie .element .hover img{ display: inline-block; width: 30px}
.wrapTherapie .element .content h4{ color: #7e1c86;
	text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 16px }




@media only screen and (max-width:1100px){


	nav ul{ width:85%}
}
@media only screen and (max-width:1000px){

	nav ul{ width:90%}
	.parallax{ display: none}

}

@media only screen and (max-width:900px){
	.parallax{ height: 300px}
	header{ height: auto;     padding: 30px;}
		header .logo{  position: relative;
    height: auto;
    width: 60%;
    top: 0;
    right: 0;
    margin: 0 auto;
    display: block;}
	nav ul.lang{ display: none}
	header .content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
    padding: 30px 30px 0 30px;
	}
	nav ul{ display: none}
	.burgerMenu{   display: block;}
	footer .col{ display: block;   
    width: 60%;
    margin: 0 auto 0px auto;
    text-align: center!important;
    border-bottom: 1px solid #ccc;
    padding: 35px 30px; }
	footer .col.last{ border: none}
	
	nav ul li {
    display: block;
}
	
	nav ul.nav {
    display: none;
    width: 100%;
    background-color: #fff;
    top: 50px;
    position: absolute;
}
	nav ul.open{ display: block; }
	.fromWYSIWYG img{  max-width: 100%;
    height: auto!important;
		}
	h2{ font-size: 35px}
	.wrapTherapie .element{ max-width: 98%; min-width:98%}
	
}

@media only screen and (max-width:600px){ header .content{ padding: 0 2%}
	header .content h2{ font-size: 40px; }
	footer .col{ width: 90%}}