/*---------------------------------------------------------------*/
/*----------------    GENERAL    --------------------------------*/
/*---------------------------------------------------------------*/
body{
	margin:0;
	font-size:16px; font-size: 1.2em;
	font-family: 'Karla', sans-serif;
	color:#FFF;
	background-color:#F8F8F8;
	}
a{text-decoration:none; color:#FFF}
img{height:auto; border:0;}
.overlay {
   background:transparent; 
   position:relative; 
   width:100%;
   height:200px; /* your iframe height */
   top:200px;  /* your iframe height */
   margin-top:-200px;  /* your iframe height */
}

/*POUR LE TEMPS DE LOADING*/
#hideAll
 {
   position: fixed;
   left: 0px; 
   top: 0px; 
   width:100%;
   height:100%;
   background-color: white;
   z-index: 999; /* Higher than anything else in the document */
 }
/*---------------------------------------------------------------*/
/*------------------    STYLE    --------------------------------*/
/*---------------------------------------------------------------*/
.center_margin{width:1024px; width:80%; margin:auto}
.small_center_margin{width:800px; width:45%; margin:auto}
.text_center{text-align:center}
.text_left{text-align:left}
.text_right{text-align:right}
.text_justify{text-align:justify}
.valign_bas{vertical-align:bottom}
.valign_center{vertical-align:middle}
.valign_haut{vertical-align:top}
.hidden{visibility:hidden}
.rsmllpad_top{padding-top:5px;}
.smllpad_top{padding-top:20px;padding-top:2vh;}
.padding_top{padding-top:100px;padding-top:10vh;}
.padding_bottom{padding-bottom:0px;}
.smllpad_bottom{padding-bottom:20px}
.margin_top{margin-top:100px;margin-top:10vh;}
.margin_bottom{margin-bottom:0px;}
.bold{font-weight:700}
.wider{line-height:175%}
.smallline{width:100px; margin-top:20px; margin-bottom:20px;margin-top:2vh; margin-bottom:2vh}
.mauve{color:#a8208d}
.mauvebg{background-color:#a8208d}
.vert{color:#b3c023}
.vertbg{background-color:#acb91e}
.smalldivpadding{padding-top:15px; padding-bottom:15px;padding-top:2vh; padding-bottom:2vh;}
.divpadding{padding-top:30px; padding-bottom:30px;padding-top:2em; padding-bottom:2em;padding-top:4vh; padding-bottom:4vh;}
.bigdivpadding{padding-top:60px; padding-bottom:60px;padding-top:12vh; padding-bottom:8vh;}
.smallpadding{padding-left:30px; padding-right:30px;padding-left:4vw; padding-right:4vw;}
.reallybig{font-size:32px;font-size:3em;}
.biggertext3{font-size:24px;font-size:2.5em;}
.biggertext2{font-size:18px;font-size:2em;}
.biggertext{font-size:16px;font-size:1.5em;}
.smalltext{font-size:12px;font-size:1em;}
.smalltext2{font-size:11px;font-size:0.9em;}
.smallertext{font-size:10px;font-size:0.8em;}
.smallletterspacing{letter-spacing:2px}
.letterspacing{letter-spacing:5px}
.italic{font-style:italic}
.underline{border-bottom:2px solid #FFF}
.lato{font-family: 'Karla', sans-serif;}
.verticalLine {
    border-left: 20px solid #f47a20;
}
.lightline{color:#dddddd;background-color: #dddddd;height: 1px; border:none;width:80px}
.orange_text{color:#f47a20}
.dark_text{color:#333333}
.margin_auto{margin:auto}
.line_spacing{line-height:150%}

.td20{width:20%}
.td24{width:24%}
.td30{width:30%}
.td70{width:70%}
.td40{width:40%}
.td50{width:50%}
.td45{width:45%}
.td55{width:55%}
.td60{width:60%}
.td15{width:15%}
.td85{width:85%}
.td100{width:100%}
.graybg{background-color:#363436}
.grayline{color:#636868; width:100%}

.bigpadding_left{padding-left:100px; padding-left:10vw}
.med_padding_left{padding-left:40px; padding-left:4vw}
.padding_left{padding-left:20px; padding-left:2vw}
.padding_right{padding-right:20px; padding-right:2vw}
.smallhr{width:50px}
.bbottom{border-bottom:1px solid #636868}
.redtext{color:#F00; font-weight:bold}
/*---------------------------------------------------------------*/
/*----------------    MENU    -----------------------------------*/
/*---------------------------------------------------------------*/
menumobilelinks{display:none}
header{
	width:100%;
	height:100px;
	height:10vh;
	min-height:100px;
	padding-top:10px;
	padding-bottom:10px;
}

#top{
	width:100%;
	height:100px;
	height:10vh;
	min-height:80px;
	min-width:1280px;
	margin:auto;
	}
#top td{vertical-align:middle; padding-left:1%; padding-right:1%;}

nav a{color:#FFF; text-decoration:none; height:30px;}
nav a:hover{
	border-bottom: 2px solid #FFF;
}

nav ul {
	  text-align: left;
	  display: inline;
	  margin: 0;
	  list-style: none;
	
	}
nav ul li {
	  font: 17px 'Lato';

	  display: inline-block;
	  position: relative;
	  -webkit-transition: all 0.2s;
	  -moz-transition: all 0.2s;
	  -ms-transition: all 0.2s;
	  -o-transition: all 0.2s;
	  transition: all 0.2s;
	  text-align:center;
	  margin-left:25px;
	  padding-top:47px;
	  padding-bottom:47px;
	}
	
	
#uSousMenu {
  padding: 0;
  position: absolute;
  top: 110px;
  left: -90px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  width:350px;
  z-index:1000;
}
#uSousMenu li { 
  display: block; 
  color: #000;
  padding:10px 10px 10px 10px;
  text-align:center;
  margin-left:0px;
  background-image:url(../img/menubg.png);
}
#uSousMenu li a:hover { 
	font-weight:bold;
	border-bottom: 0px solid #FFF;
}
#uSousMenu3 {
  padding: 0;
  position: absolute;
  top: 110px;
  left: -120px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  width:350px;
  z-index:1000;
}
#uSousMenu3 li { 
  display: block; 
  color: #000;
  padding:10px 10px 10px 10px;
  text-align:center;
  margin-left:0px;
  background-image:url(../img/menubg.png);
}

#uSousMenu3 li a:hover { 
	font-weight:bold;
	border-bottom: 0px solid #FFF;
}

#hR1{background-color:#FFF;
    border: 0;
    border-top: 1px solid #FFF;
    margin: 1em 0;
    padding: 0; }


/*---------------------------------------------------------------*/
/*-----------------MENU MOBILE-----------------------------------*/
/*---------------------------------------------------------------*/
#topmobile{width:100%}
#topmobile td{width:50%}
#menumobile{
	display:none;
	padding:1% 1% 1% 1%;
}

#menumobile ul{
	list-style: none;
	margin:0;
	padding:0;
}
#menumobile li{
	list-style: none;
	padding: 10px 0px 10px 0px;
	border-bottom: 1px solid #999;
	font-size: 18px ;
	font-family:"Fira Sans","Trebuchet MS", Arial, Helvetica, sans-serif;
}
#umSousMenu li {border-bottom: 0px solid #999;}
#umSousMenu3 li {border-bottom: 0px solid #999;}

#menumobile a{color:#FFF; text-decoration:none;}
#menumobile a:hover{color:#b3c023; text-decoration:none;}
.menulogo{width:100px; height:auto}






/*---------------------------------------------------------------*/
/*--------------------Consentment cookies------------------------*/
/*---------------------------------------------------------------*/
	
	
	#cookie-banner {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #1f1f1f;
		color: white;
		padding: 18px;
		z-index: 999999;
		font-size: 14px;
		box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
	}

	#cookie-banner button {
		margin: 5px;
		padding: 10px 14px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
	}

	.accept { background: #4CAF50; color: white; }
	.reject { background: #E53935; color: white; }
	.custom { background: #2196F3; color: white; }

	#cookie-panel {
		display: none;
		margin-top: 10px;
		background: #2a2a2a;
		padding: 10px;
		border-radius: 6px;
	}


/*---------------------------------------------------------------*/
/*--------------------SECTIONS-----------------------------------*/
/*---------------------------------------------------------------*/
#backg{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: url(../img/bghomme2.jpg) no-repeat;
	background: url(../img/bghomme2.jpg) no-repeat bottom;
 	background-size:auto 100%;
	z-index:-1000;
}

#haut{
width:1024px;width:80vw;
margin:auto;
height:500px;height:50vh;
margin-top:120px;margin-top:20vh;
text-align:center;
}

#haut_section{
width:1024px;width:80vw;
margin:auto;
height:200px;height:10vh;
margin-top:100px;margin-top:10vh;
text-align:center;
}

#bienvenue{
	background-color:#b3c023;
}
#pourquoi{width:100%; background-color:#FFF}
#tPourquoi{width:80%; margin:auto; border-spacing:10px;border-spacing:2vw;}

#def_ergo{
	width:100%;
	}
	
#tErgo{
	width:40%}
	
#tErgo td{
	padding-top:20px;
}

.bulletpadding{padding-left:10%}

#tRdv{width:80%; margin:auto;}
#carte{width:100%; height:auto; margin:0; padding-bottom:-10px;}
#dCarte{ width:100%; background-color:#222324}
#bottomsection{width:100%; height:auto;
background-image:url(../img/darkbg.png);
background-size:100% 100%;
background-repeat:no-repeat;
padding-bottom:15px;padding-bottom: 1.5vh;
padding-top:50px;padding-top: 5vh;
text-align:center;}

#tContact{
	margin:auto;
	width:1084px;width:80%;
}
.backdots{background-image:url(../img/points.png);
background-repeat:repeat-x;}

#menubas{margin:auto}
#apropos{width:100%; margin:auto; background-color:#FFF;}
.tables{width: 1024px; width:80%; margin:auto;}
#iAndreanne{width:100%; height:auto}
#iServices{width:100%; height:auto}
.tApropos{padding:40px 0px 20px 0px;padding:10vh 0vh 10vh 0vh;}
.tServices{padding:40px 0px 20px 0px;padding:10vh 0vh 10vh 0vh;}


#apropos table tr td{vertical-align:top}

#tMedailles td{padding-bottom:20px; padding-bottom:2vh;}


#dServices{width:100%; margin:auto; background-color:#FFF;}
#dServices table tr td{vertical-align:top; padding-right:13px; padding-right:1.5vw; padding-bottom:20px; padding-bottom:1vw; font-size:1.1vw}
.nopadding{padding-right:0px; padding-right:0vw}

#client_texte{width:800px; width:50%;  text-align:justify; margin:auto}
#pointe_vert{margin:auto}

#saviez_vous{width:100%; text-align:center}
#tSaviezvous{width:40%; margin:auto}

#nousjoindre{width:100%; margin:auto; background-color:#FFF;}
#tJoindre{width:75%; margin:auto}
#tJoindre td{vertical-align:top}

#tJoindre input[type="text"] {
    width: 100%;
	height:40px;
	margin-bottom:20px;
}

#tJoindre textarea {
    width: 100%;
	height:250px;
}

#tJoindre input[type="radio"] {
    transform:scale(1.5, 1.5);
	margin-right:10px;margin-right:0.5vw;
	}



@media only screen
and (min-width : 1024px)
and (max-width : 1280px) {
	nav ul li {
	  font: 16px 'Lato';
	  display: inline-block;
	  position: relative;
	  -webkit-transition: all 0.2s;
	  -moz-transition: all 0.2s;
	  -ms-transition: all 0.2s;
	  -o-transition: all 0.2s;
	  transition: all 0.2s;
	  text-align:center;
	  margin-left:30px;
	  padding-top:47px;
	  padding-bottom:47px;
	}
	
body{
	font-size:16px; font-size: 1.6em;
}

#backg{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: url(../img/bghomme2.jpg) no-repeat;
	background: url(../img/bghomme2.jpg) no-repeat bottom;
 	background-size:auto 100%;
	z-index:-1000;
}

.hide{display:none}

#top{
	min-width:100%;
	}
	
#tErgo{
	width:80%}

.reallybig{font-size:32px;font-size:2em;}
.biggertext3{font-size:24px;font-size:2em;}
.biggertext2{font-size:18px;font-size:1.8em;}
.biggertext{font-size:16px;font-size:1.7em;}
.smalltext{font-size:14px;font-size:1.5em;}
.smalltext2{font-size:12px;font-size:1.2em;}

}

@media only screen
and (min-width : 480px)
and (max-width : 1024px) {
	
#backg{
	background: url(../img/bghomme2.jpg) no-repeat;
 	background-size:auto 100%;
	}
	
	#btServices{display:none}
	#haut{
		margin-top:120px;margin-top:10vh;
	}
	
	.bigmobpadtop{padding-top:60px}
	.mobpadtop{padding-top:30px}
	header {display:none}
	#menumobile{display:block;}
	#menumobilelinks{display:none;}
	
	body{
	font-size:16px; font-size: 3vw;
	}
	.hide{display:none}
	
	#top{
		min-width:100%;
		}
		
	#tErgo{
		width:80%}
	
	.smalltext{font-size:14px; font-size:2.5em;font-size:2.5vw}
	.smalltext2{font-size:12px; font-size:2em;font-size:2vw}
	.biggertext{font-size:28px; font-size:4em;font-size:4vw;}
	.biggertext2{font-size:30px; font-size:4.3em;font-size:4.3vw;}
	.biggertext3{font-size:32px; font-size:4.5em;font-size:4.5vw}
	.reallybig{font-size:36px; font-size:5em;font-size:5vw;}
	
	#tBienvenue{width:100%}
	#tBienvenue tr {
      display: block;
    }

    #tBienvenue td {
      display: block;
    }
	.td20{width:100%;text-align:center}
	.td24{width:100%; text-align:center}
	.td40{width:100%; text-align:center}
	.td50{width:100%; padding-top:20px;padding-top:5vw;}
	.td15{width:100%}
.td85{width:100%}
	.text_right{text-align:center}
	
	#tPourquoi tr {
      display: block;
    }

    #tPourquoi td {
      display: block;
    }
	
	#tErgo tr {
      display: block;
    }

    #tErgo td {
      display: block;
    }
	.bulletpadding{padding-left:0%}
	
	#tRdv tr {
      display: block;
    }

    #tRdv td {
      display: block; text-align:center; padding-top:3vw;
    }
	#hR1{display:none;}
	
	#tContact tr {
      display: block;
    }

    #tContact td {
      display: block; text-align:center;
    }
	
	#iAdresse{display:none}
	#iPhone{display:none}
	#iCourriel{display:none}
	
	#menubas tr {
      display: block;
    }

    #menubas td {
      display: block; text-align:center;
    }
	
	#def_ergo{
	width:100%;}
	
	#apropos tr{display: block;}
	#apropos tr td{display: block;}
	#apropos hr{display:none}
	
	
	#tServ tr{display: block;}
	#tServ tr td{display: block; }
	#dServices table tr td{padding-right:0px; font-size:24px;font-size:3em;font-size:3vw}
	#dServices table tr td img{display:none}
	.alignleft{text-align:left}
	
	#client_texte{width:95%; text-align:justify; margin:auto;font-size:24px;font-size:3em;font-size:3vw}
	
	#tSaviezvous{width:90%}
	#tSaviezvous tr{display:block}
	#tSaviezvous tr td{display:block; padding-top:30px;padding-top:3vh;}
	
	#tForm_suite input[type="radio"] {
    transform:scale(1.5, 1.5);
	margin-right:20px;margin-right:2vw;
	}

	#tJoindre{width:100%}
	#tJoindre tr{display:block}
	#tJoindre td{display:block}
	
	#tJoindre_infos{width:100%}
	#tJoindre_infos td{width:100%}
	.padding_left{padding-left:0px}
	
	#tJoindre input[type="text"] {
    width: 90%;
	height:40px;
	margin-bottom:20px;
	}
	
	#tJoindre textarea {
		width: 90%;
		height:250px;
	}
	#tHeures{width:100%}
	#tHeures tr{ display:table-row}
	#tHeures td{ display:table-cell; width:50%}
}


@media only screen
and (min-width : 120px)
and (max-width : 480px) {
	.logo{width:125px; height:auto}
	#backg{
	background: url(../img/bghomme2.jpg) no-repeat;
 	background-size:auto 100%;
	}
	.bigmobpadtop{padding-top:60px}
	.mobpadtop{padding-top:30px}
	.hidemob{display:none}
	#haut{
		margin-top:120px;margin-top:0vh;
	}
	
	header {display:none}
	#menumobile{display:block;}
	#menumobilelinks{display:none;}
	
	body{
	font-size:16px; font-size: 4vw;
	}
	.hide{display:none}
	
	#top{
		min-width:100%;
		}
		
	#tErgo{
		width:80%}
	
	
	.smalltext{font-size:18px; font-size:3em;font-size:3vw}
	.smalltext2{font-size:14px; font-size:2.5em;font-size:2.5vw}
	.biggertext{font-size:30px; font-size:4.5em;font-size:4.5vw;}
	.biggertext2{font-size:32px; font-size:4.6em;font-size:4.6vw;}
	.biggertext3{font-size:36px; font-size:5em;font-size:5vw}
	.reallybig{font-size:42px; font-size:6em;font-size:6vw;}
	
	#tBienvenue{width:100%}
	#tBienvenue tr {
      display: block;
    }

    #tBienvenue td {
      display: block;
    }
	
	.td20{width:100%;text-align:center}
	.td24{width:100%; text-align:center}
	.td40{width:100%; text-align:center}
	.td50{width:100%; padding-top:30px;padding-top:5vw;}
	.td15{width:100%}
.td85{width:100%}
	.text_right{text-align:center}
	
	#tPourquoi tr {
      display: block;
    }

    #tPourquoi td {
      display: block;
    }
	
	#tErgo tr {
      display: block;
    }

    #tErgo td {
      display: block;
    }
	.bulletpadding{padding-left:0%}
	
	#tRdv tr {
      display: block;
    }

    #tRdv td {
      display: block; text-align:center;  padding-top:20px;padding-top:3vw;
    }
	#hR1{display:none;}
	
	#tContact tr {
      display: block;
    }

    #tContact td {
      display: block; text-align:center;
    }
	
	#iAdresse{display:none}
	#iPhone{display:none}
	#iCourriel{display:none}
	
	#menubas tr {
      display: block;
    }

    #menubas td {
      display: block; text-align:center;
    }
	
	#def_ergo{
	width:100%;
	}
	
	#apropos tr{display: block;}
	#apropos tr td{display: block;}
	#apropos hr{display:none}
	
	#tServ tr{display: block;}
	#tServ tr td{display: block; }
	#dServices table tr td{padding-right:0px; font-size:28px;font-size:5em;font-size:5vw}
	#dServices table tr td img{display:none}
	.alignleft{text-align:left}
	
	#client_texte{width:95%; text-align:justify; margin:auto;font-size:28px;font-size:5em; font-size:5vw}
	
	#tSaviezvous{width:90%}
	#tSaviezvous tr{display:block}
	#tSaviezvous tr td{display:block; padding-top:20px; padding-top:3vh;}
	
	#tJoindre input[type="text"] {
    width: 90%;
	height:40px;
	margin-bottom:20px;
	}
	
	#tJoindre textarea {
		width: 90%;
		height:250px;
	}
	
	#tJoindre{width:100%}
	#tJoindre tr{display:block}
	#tJoindre td{display:block}
	
	#tJoindre_infos{width:100%}
	#tJoindre_infos td{width:100%}
	.padding_left{padding-left:0px}
	
	#tHeures{width:100%}
	#tHeures tr{ display:table-row}
	#tHeures td{ display:table-cell; width:50%}
		
}

@media only screen
and (min-width : 1280px)
{
	#backg{
 	background-size:100% auto;
	}
}


@media (orientation:landscape)
{
	#backg{
 	background-size:100% auto;
	}
}

@media (orientation:portrait)
{
	#backg{
 	background-size:auto 100%;
	}
}