*{margin:0px; padding:0px;}

	@font-face{font-family:'cambra'; src:url('charte/cambria.ttc');}
	
	body{background: url("charte/bg.jpg")no-repeat fixed; background-size:cover;}


#bodyvoyants section, #bodyvoyants header, #bodyvoyants nav {max-width:1250px;}


	img{max-width:100%;}
	
	h1, h2, header p, nav h3{font-family:cambra, cambria, constantia;}
	p, h3, a, .telsection a, #telencart{font-family:cambra, cambria, calibri;}
	
	
	section h1{text-shadow:1px 1px 1px black; font-weight:bold; font-size:2em; padding-top:10px;}
	header p{text-shadow:1px 1px 1px black; font-weight:bold; font-size:1.8em;}

	header{max-width:1250px; margin:auto; background:pink;}
		header h1{}
		header div{}
			header div img{width:100%;}
			header div a{color:deepskyblue;}

		#voyantetel {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 1.25s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  20% { transform: translate(0px, 0px) rotate(1deg); }
  35% { transform: translate(1px, 0px) rotate(4deg); }
  50% { transform: translate(2px, 0px) rotate(7deg); }
  65% { transform: translate(1px, 0px) rotate(4deg); }
  80% { transform: translate(0px, 0px) rotate(1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

		#voyantetel:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.75s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite
}

@keyframes shake {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  20% { transform: translate(1px, 0px) rotate(4deg); }
  35% { transform: translate(2px, 0px) rotate(7deg); }
  50% { transform: translate(3px, 0px) rotate(11deg); }
  65% { transform: translate(2px, 0px) rotate(7deg); }
  80% { transform: translate(1px, 0px) rotate(4deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}


	nav{max-width:1250px; margin:auto; font-size:1.1em; background:darkred;}
		nav h3{display:none;}
		nav input, nav label {display:none;}
		nav ul{list-style-type:none; max-height:;}
		nav img{float:right; max-height:115px;}
		nav p{display:inline-block; float:right; color:white; vertical-align:top;}
		nav ul li {display:inline-block; vertical-align:top; margin:10px;}
			.subnav{visibility:hidden; position:absolute; box-shadow:1px 1px 1px black; background:darkred;}
			.subnav li{display:block; margin:5px;}
			nav ul li:hover .subnav {visibility:visible;}

	section{max-width:1150px; margin:auto; background:white; text-align:justify; font-size:1.2em; padding:0px 50px 50px 50px; }
		section h1, section h2{text-align:center; text-shadow:none;}
		section h2 a{color:darkorange; text-shadow:1px 1px 2px black;}
			.telsection a{font-size:1.8em; color:gold; font-weight:bold;}
			.telsection{text-align:center; margin-top:0px;  text-shadow:1px 1px 2px black;}
		section h3{margin-top:25px; text-decoration:underline;}
		section h4{padding:0px; margin-bottom:-0.5em; font-size:1.2em;}	
		
		section ul, section ol{margin-left:1em;}
		
		section p{margin:20px 0px;}
		section img{max-width:100%;}
		
/* START ENCART ENCART ENCART */

	#encart{display:flex; background:palegoldenrod; border-bottom:5px solid goldenrod; border-left:3px solid gold; border-radius:15px 15px 15px 0px; overflow:hidden;}
			#encart h2{text-align:center; margin-bottom:0px; }
			#encart h2 a{color:darkorange; text-shadow:0px 1px 1px black;}
			#encart p{padding:10px; text-indent:0em;}
			#encart img{margin-right:0px; width:210px;}
			
			#telencart{color:darkorange; text-shadow:0px 1px 1px black; text-align:center; font-size:1.6em; margin-top:-10px; padding-bottom:0px; font-weight:bold;}
	
	@media screen and (max-width: 1040px) 
	{
			
			header{background-size:contain;}

			
			#encart img{width:210px; padding-left:0px;}
	}
	
	@media screen and (max-width: 720px) 
		{
			header{height:;}
			
			#encart{width:100%; flex-wrap:wrap; border-radius:15px; border-left:none; }
			#encart img{width:100%;}
		}
		
/* END ENCART ENCART ENCART*/

	
	#articles{height:550px; overflow:auto;}
		#articles h3{text-decoration:none;}
		#articles h3 a{color: darkorange; text-shadow:1px 1px 1px black; text-transform:uppercase; }
		
	footer{max-width:1190px; margin:auto; padding:0px 30px 25px 30px; background:lightcoral;}
		footer img{width:220px;}
		footer p{text-align:left; padding:10px;}
		#footbot{display:flex; flex-wrap:wrap;}

	nav a{color:white;}
	a{text-decoration:none; color:orangered}
	a:hover{text-decoration:underline;}


	/* PARTICULIERS	*/

	#voyant{display:flex; justify-content:space-around; align-items:flex-start;}
		#voyant div:first-of-type img {transition:0.15s; border-bottom:1px solid orange; margin:0.5em 0em; width:230px;}
		#voyant div:first-of-type:hover{filter:brightness(110%) saturate(110%) drop-shadow(0px 2px 5px orangered); transition:0.25s;}
		#voyant div{margin:0.5em; max-width:50%;}
		
	#boutonappel{text-align:center; background:linear-gradient(to bottom,yellow,gold,orange,orange,orange,darkorange); font-weight:bold; margin:0px auto 1em auto; padding:3px; max-width:20%; transition:0.25s; border:1px solid black;  box-shadow:0px 2px 8px black; border-radius:10px;}
		#boutonappel a{display:block; padding:1em 0em; color:black;}
		#boutonappel:hover{transition:0.25s; background:gold;}
		
		#voyantspe{flex-basis:; text-align:left; background:linear-gradient(rgb(220,230,255), rgb(70,150,210)); border:1px solid midnightblue; padding:0.5em; border-radius:10px; box-shadow:0px 2px 8px black;}
			#voyantspe img{margin-bottom:-17px;}
		
	.centre{font-weight:bold; text-align:center;}
	
	.imgd{float:right; margin-left:10px;}
	.imgg{float:left; margin-right:10px;}
	.imgc{display:block; max-width:100%; margin:10px auto; box-shadow:0px 3px 3px black}

	#hello p{display:inline-block; width:30%; padding:5px; text-align:left; vertical-align:top;}
	#hello img{width:80px;}
	
	
	iframe{max-width:100%;}
	


	/* HOROSCOPE MONSITEVOYANCE.COM	*/
	
	#carrés{display:flex; flex-wrap:wrap; justify-content:center;}
			#carrés a{margin:0.5em;}

		#horoscopedujour{transition:0.15s; border:10px solid lightgoldenrodyellow; box-shadow:0px 3px 4px black; margin-bottom:20px;}
			#horoscopedujour:hover{filter:brightness(120%) contrast(120%); transition:0.05s; border-color:goldenrod; box-shadow:0px 1px 2px black;}
			
		#zodiaquehoroscope{text-align:center; margin-bottom:25px;}
			#zodiaquehoroscope img{width:105px; display:inline-block; margin:10px;}
			#zodiaquehoroscope img:hover{transform:rotate(-15deg); transition:0.2s;}
			
			#horoscopegratuit img{width:50px; float:right; transition:0.1s;}
			
			.titremsvsign {font-size:20px;color:#663399;font-weight:700;}

			.titremsvdate {font-size:20px;color:#cc99cc;font-weight:400;}
			// si on ne veut pas afficher la date on mettra plutôt
			.titremsvdate {display:none;}

			.titremsvcate {font-weight:700;color:#cc99cc;}
			.textemsvcate {font-style:italic;}

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

	header{margin-top:50px; height:500px; background:url('charte/voyance-telephone-gratuite.jpg') center no-repeat, pink; background-size:contain;}
		header img{display:none;}
	
	section{padding:0px 10px 20px 10px; font-size:1.1em;}
		section h1{font-size:1.8em;}
		section h2{font-size:1.5em;}
		
		#hello p{display:inline-block; width:48%; padding:0px;}		

		#cartouche{float:none;}
		
	.imgd{float:none; display:block; margin-left:0px; max-width:100%; margin:10px auto;}
	.imgg{float:none; display:block; margin-right:0px; max-width:100%; margin:10px auto;}

		nav{position:fixed; top:0px; width:100%;}
			nav img{float:none; margin-left:10px; max-height:60px; transform: scaleX(-1);}
			nav h3{display:inline-block; padding:0px; margin:0px; position:relative; top:-15px; text-shadow:none; color:white; font-size:1.6em;}
			nav h3 span{text-decoration:underline; font-size:0.9em;}
		
		/* handling clic with CSS3 checked */
		/* Theming closed nav */	
		nav input:not(:checked) ~ ul { max-height: 0; overflow: hidden; transition:0.5s;}
		/* Theming opened nav */
		nav input:checked ~ ul {max-height: 25em; transition:0.5s;}
		

		/* Global styling nav button */	
		nav label {display:inline-block; position:fixed; margin-top:0px; right:0px; z-index: 1; height:65px; width:65px; background:firebrick; text-align:center; font-size:0.8em; line-height:1.6; color:white;}
		
		nav label:before {content:""; display:block; height:1.6rem; width:2rem; background-color:transparent;
			background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)); background-image: -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff);
			background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff); background-position:center top, center, center bottom; background-repeat:no-repeat; -webkit-background-size: 2rem .3rem; background-size: 2rem .3rem; margin:.8em auto 0; padding:0; outline:0; border:0; cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-transition: .2s cubic-bezier(0, 1.8, 1, 1.2); transition: .2s cubic-bezier(0, 1.8, 1, 1.2); transition-property: background; }
		
		/* Theming opened nav button */	
		nav input:checked + label {-webkit-transform: scale(.8); transform: scale(.8);}
		nav input:checked + label::before {background-position: center, center, center;}	
	}
	
	@media screen and (max-width: 480px) {
		
	header{height:450px;}
			nav h3{font-size:1.2em;}

	}