/*------------Les polices*/

@font-face {
	font-family:"CaviarDreams";
		src: url("fonts/CaviarDreams.eot"); /* EOT file for IE */
		src: url("fonts/CaviarDreams.ttf") /* TTF file for CSS3 browsers */
	}
@font-face {
	font-family:"LaneNarrow";
		src: url("fonts/LaneNarrow.eot"); /* EOT file for IE */
		src: url("fonts/LaneNarrow.ttf") /* TTF file for CSS3 browsers */
	}
@font-face {
	font-family:"DancingScript";
		src: url("fonts/DancingScript.eot"); /* EOT file for IE */
		src: url("fonts/DancingScript.ttf") /* TTF file for CSS3 browsers */
	}
@font-face {
	font-family:"LaneHumoresque";
		src: url("fonts/LaneHumoresque.eot"); /* EOT file for IE */
		src: url("fonts/LaneHumoresque.ttf") /* TTF file for CSS3 browsers */
	}
@font-face {
	font-family:"Satisfy";
		src: url("fonts/Satisfy.eot"); /* EOT file for IE */
		src: url("fonts/Satisfy.ttf") /* TTF file for CSS3 browsers */
	}

/*------------Les styles*/
/*http://www.commentcamarche.net/contents/490-codes-couleur-html*/
/*------------Class*/
/* bordures */
.BORDS {
	border:10px solid grey;
}
/* format 16/9*/
.seize-neuf {
 width: 50%;
 display: inline-block;
 position: relative;
   
}
.seize-neuf:after {
    padding-top: 56.25%; /*16:9 ratio*/
    display: block;
    content: '';
}
/* Polices */
.CD {
	font-family: "CaviarDreams";
	letter-spacing: 0.05em;
	word-spacing: 0.3em;
	font-weight: 400; /* 400 normal*/
	}
.DS {
	font-family: "DancingScript";
	letter-spacing: 0.0em;
	word-spacing: 0.3em;
	font-weight: 400; /* 400 normal*/
	}
.LN {
	font-family: "LaneNarrow";
	letter-spacing: 0.0em;
	word-spacing: 0.3em;
	font-weight: 400; /* 400 normal*/
	}
.LH {
	font-family: "LaneHumoresque";
	letter-spacing: 0.05em;
	word-spacing: 0.3em;
	font-weight: 400; /* 400 normal*/
	}
.Sa {
	font-family: "Satisfy";
	letter-spacing: 0.05em;
	word-spacing: 0.3em;
	font-weight: 400; /* 400 normal*/
	}
.Taille50{
	font-size: .65em
	}
.Taille80{
	font-size: .88em
	}
.Taille120{
	font-size: 1.32em
	}	
.Taille125{
	font-size: 1.35em
	}	
.Taille150{
	font-size: 1.4em
	}
.Taille180{
	font-size: 2.06em
	}	
.Taille200{
	font-size: 2.2em
	}	
.Taille300{
	font-size: 3.3em
	}
.L8 0 {
	width:80%;
	margin-right: auto;
	margin-left: auto;
	}
.L9 0 {
	border:1px solid green;
	width:90%;
	}
.L10 0{
	border:1px solid green;
	width:100%;
	}

/* masquage de détails dans une liste */
.deroule-ul ul li {
	display:none;
}
.deroule-ul ul:hover li {
	display:block;
	position:relative;
	top:0;
	left:-25px;
}	

.deroule-p li a{
	text-decoration:none;
 	line-height:130%;
}

.deroule-p li p {
	display:none;
}
.deroule-p li:hover p {
	display:block;
	position:relative;
	top:0;
	left:0px;
}

.ombreboite {
	background-color:#F3F3F3;
	padding:5px;
	box-shadow:2px 2px 2px gray,
	-1px -1px 2px white;
	}
	
.baniere-old{
	background: linear-gradient(to bottom ,white,white,rgba(232,240,255,125),rgba(189,212,255,125),rgba(177,205,255,125),rgba(177,205,255,255),rgba(177,205,255,125),rgba(232,240,255,125), rgba(189,212,255,125), white,white,white,white, rgba(119,255,0,255),white);
	background-color:#ffffff;//#ccff8d;
//	background-image:url(img/FondBaniere.png);
//	background-repeat: no-repeat;
//	background-attachment: fixed;
//	background-size: auto auto; 
	font-family: "LaneNarrow";
	color:#ff5800;
	text-shadow:-3px -3px 0 rgba(255,255,255,100); /*décalage de l'ombre en ht à g*/
	cursor: default;
	font-size:4vw;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:10px;
	display:block; /*utilise toute la largeur*/
	text-decoration:none; /*supprime le souligné*/
	}
.baniere{
	background-color:lightgrey;//#ffffff;//#ccff8d;
	font-family: "CaviarDreams";
	color:#8270d5;
	display: flex; /* contexte sur le parent */
	flex-direction: row; /* direction d'affichage horizontal */
	display: -webkit-flex; /* OK chrome 21 */
	justify-content: center; /* alignement horizontal */
	-webkit-justify-content: center; 
	align-items: center; /* alignement vertical */
	cursor: default;
	font-size:3vw;
	font-weight:bold;
	padding-top:0px;
	padding-bottom:0px;
	/*display:block; /*utilise toute la largeur*/
	}
.footer{
	background-color:light-grey;
	//background-image:url(img/FondBaniere.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover; 
	font-family: "LaneNarrow";
	color:black;
	text-shadow:-0px -0px 0 rgba(255,255,255,100); /*décalage de l'ombre en ht à g*/
	cursor: default;
	//font-size:1.1vw;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:10px;
	display:block; /*utilise toute la largeur*/
	text-decoration:none; /*supprime le souligné*/
	}
#MenuBas{
  display:block;
  font-style: "LaneNarrow";
  color: orange;
  position: fixed;
  text-align: center;
  bottom: -5.5em;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.1em;
  padding-right: 3em;
  padding-left: 3em;
  padding-bottom: 1em;
  border-radius: 50% 50% 0 0;/*hg hd bd bg*/
  -moz-border-radius: 50% 50% 0 0;
  -webkit-border-radius: 50% 50% 0 0;
  border: solid 3px;
  border-color: rgba(0, 255, 000, 1);
  color: rgba(255, 255, 255, 1);
  background-color: rgba(0, 255, 000, 0.5);
  }

#MenuBas:hover{
  bottom: 0em;
  color: rgba(0, 255, 000, 0.4);
  background-color: rgba(0, 255, 000, 0.9);
  }
  
/* ajustement video youtube*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  max-width: 100%;
  height: auto;
} 

/*------------Balises*/
HTML {
	font-size:1.5vw;	
	text-align: justify;
	font-family: "LaneNarrow";

}
BODY { 
	background-color:lightgrey;
	word-spacing:2px;
//	font-weight:bold;
	background-image:url("/images/BG4.png");
	background-attachment:fixed;
	background-position:left top;
	background-repeat: no-repeat;
	background-size: cover;
}

H1 {
	font-family: "CaviarDreams";
	//color: #ff5800;
	color:#8270d5;
	font-size:2.2em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	font-stretch:normal;
	text-align:center;
	line-height:150%;
	letter-spacing:0.62px;
	word-spacing:0.62px;
	writing-mode:lr-tb;
//	font-weight:bold;
	}

H2 {
	font-family: "LaneNarrow";
	color: #ff5800;
	font-size:1.8em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	font-stretch:normal;
	text-align:left;
	line-height:150%;
	letter-spacing:0.62px;
	word-spacing:0.62px;
	writing-mode:lr-tb;
//	font-weight:bold;
	}
	
H3 {
	font-family: "LaneNarrow";
	color: #ff5800;
	font-size:1.6em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	font-stretch:normal;
	text-align:left;
	line-height:150%;
	letter-spacing:0.62px;
	word-spacing:0.62px;
	writing-mode:lr-tb;
//	font-weight:bold;
	}
H4 {
	font-family: "LaneNarrow";
	color: #ff5800;
	font-size:1.2em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	font-stretch:normal;
	text-align:left;
	line-height:150%;
	letter-spacing:0.62px;
	word-spacing:0.62px;
	writing-mode:lr-tb;
//	font-weight:bold;
}	
a{
	font-family: "LaneNarrow";
//	font-size:1.1em;
	color:#8270d5;//FF5800;
	text-decoration:underligne;
	font-weight:bold;	
	}
i, b, p, li, ul, ol{
	font-family: "LaneNarrow";
//	font-weight:bold;
	}
	
@media all and (min-width: 1280px) {
	BODY{
		width:1280px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:0;
	}
}
@media all and (min-width: 1024px) and (max-width: 1280px) {
	BODY{
		width:100%;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:0;
	}	
	.grid *[class*="col_"]{}
	.grid{max-width: 100%;/*1024px;*/}
	.show-desktop	{display:block;}
	.hide-desktop	{display:none;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (min-width: 768px) and (max-width: 1024px) {
	BODY{
		width:100%;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:0;
	}		
	.grid *[class*="col_"]{}
	.grid{
		max-width: 100%;/*768px;*/
		padding-left:0px;/*denis attention cumulatifs à chaque niveau*/
		padding-right:0px;/*denis*/
		margin-left:0px;/*denis*/
		margin-right:0px;/*denis*/
	}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
}


@media all and (max-width: 768px) {
	HTML{
		width:100%;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:0;
		font-size:100%;
	}	
	.grid{
		width:100%; /*rien*/
		max-width:100%;/*1220px*/
		/*margin-right:300px;
		padding:0 2em;
		/**/
		padding-left:0px;/*denis attention cumulatifs à chaque niveau*/
		padding-right:0px;/*denis*/
		}

	.grid *[class*="col_"]{
	float:none;
	width:100%;/*auto;*/
	clear:both;
	display:block;
		}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 100%;/*480px;*/}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone	{display:none;}
	.hide-phone	{display:block;}
} 
}