﻿	@font-face{font-family:'police'; src:url('IMFeGPrm28P.ttf');}
	@font-face{font-family:'raigarh'; src:url('Raigarh-Regular.otf');}
	@font-face{font-family:'annonce'; src:url('IMFeGPrm28P.ttf');}
	@font-face{font-family:'chili'; src:url('SweetChili.ttf');}
	
	*{margin:0px; padding:0px; font-family:police; font-size:1.01em; scroll-behavior: smooth;}
	
	#phone, #headergaia p span, article h4, #d1 h2 a, #encart h2, #invisible{font-family:police;}
	
	h1, h2, h3, nav li a, header h2 a, #amorce, #encart h2 a{font-family:raigarh;}
	
	#annonce p{font-family:annonce; font-size:1.2em;}

	body{background:url("background.jpg") fixed; background-size:cover;}
	#entete{max-width:1300px; margin:auto; background:mistyrose;}
	section{max-width:1150px; margin:auto; background:mistyrose;}

	header{background:url("voyance_telephone_gaia.gif") left no-repeat, url("bord-tg.png") top left no-repeat, url("bord-bd.png") bottom right no-repeat, mistyrose; background-size:250px, auto, auto; padding:0px; min-height:90px; overflow:hidden; display:flex; flex-wrap:wrap; justify-content:space-between;}
		#headergaia, #blockpunchline{}
			header h2{line-height:1.4em; font-size:2.3em;  margin:10px 25px -10px 170px; display:inline-block; vertical-align:top; transition:0.2s; padding:0px; font-family:chili; color:yellow; text-shadow:1px 2px 0px black, 1px 2px 5px black; transition:0.3s;}
			header h2 ul{list-style-type:none;}
			header h2 li{font-family:chili;}
			header h2 li:nth-child(2){text-indent:1.5em;}
			header h2 span{font-family:chili; color:darkorange; font-size:1.8em; transition:0.3s;}
			header h2 a{transition:0.2s;}
			header h2:hover li{text-decoration:underline; transition:0.3s;}
				header h2 img{max-width:550px; margin:0px 0px 0px 0px; padding:0px;}
			
			
			header img{max-width:100%;}
			#headergaia p{text-align:center;}
			#headergaia p span{font-size:1.3em; padding:3px 8px; background:lightgoldenrodyellow; box-shadow:1px 1px 2px black; display:inline-block; }
		#blockpunchline{display:flex; flex-wrap:wrap; justify-content:space-around; margin:2em 50px 20px 0px; flex-basis:50%;}
			#blockpunchline p{font-family:raigarh; font-size:1.6em; flex-basis:30%;}
				#blockpunchline p span:nth-child(1){display:none;}
			#blockpunchline img{width:400px; flex-basis:70%;}
			
			#invisible{display:none;}
			
		#soleilgaia{position:relative; width:64px; height:64px; bottom:-15px; margin:0px 0px 0px -135px; order:1; border-radius:50%; transition:0.5s;}
			#soleilgaia:hover{box-shadow: -2px 2px 4px lightgoldenrodyellow, 2px 2px 4px lightgoldenrodyellow, 2px -2px 4px lightgoldenrodyellow, -2px -2px 4px lightgoldenrodyellow, -5px 5px 15px yellow, 5px 5px 15px yellow, 5px -5px 15px yellow, -5px -5px 15px yellow; transition:0.8s;}
		

		#annonce{display:flex; flex-wrap:wrap;}
			#annonce p{padding:0px 15px 15px 15px; flex-grow:1; flex-basis:70%;}
				#horero{transition:0.2s; flex-grow:0; padding:0px 15px; order:-1;}
				#horero img{width:210px;}
				#horero:hover{filter:brightness(120%); transition:0.25s;}
				
		#encours{animation: clignote 1.5s linear infinite;} @keyframes clignote { 25%{color:yellow} 50%  {color:orange; opacity: 50; }}

	nav{text-align:center; height:350px; background:url("backgroundtop.jpg")top; background-size:cover; box-shadow:0px 10px 5px rgba(10,10,10,0.8);}
		nav input, nav label {display: none;}
		nav ul{list-style-type:none;}
			nav ul li{display:inline-block; vertical-align:top; padding:0px; margin:0px;}
			nav a{height:50px; display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:bold; width:215px; max-width:20%; background:khaki; padding:0px 10px; margin:0px; box-shadow:0px 2px 2px rgba(10,10,10,0.8); transition:0.2s; overflow:hidden; color:chocolate;}
			nav a:hover{background:gold; transition:0.2s;}
						
				nav ul li ul {position:relative; visibility:hidden; opacity:0; transition:0.5s; width:235px;  text-align:left; z-index:5;}
					nav ul li ul li{z-index:5;}
					nav ul li:hover ul{visibility:visible; opacity:1; transition:0.5s; z-index:5;}
	
	a{text-decoration:none; color:black;}
	
	mark{background:none; text-decoration:underline;}

	
	section{max-width:1050px; margin-top:45px; padding:30px; min-height:630px; overflow:hidden;}
		
		article{max-width:70%; display:inline-block; overflow:hidden; }
			article h1{padding:0px 0px 30px 0px; text-align:center; font-size:1.8em; text-decoration:underline;}
				article h2{margin:20px 10px 10px 10px; font-size:1.4em;}
					article h3{text-decoration:underline; font-size:1.1em; margin:20px 0px 15px 10px;}
					article h4{text-align:center; font-size:1.25em; margin:20px 0px;}
					
			article ul{list-style-type:disc; font-size:1.05em;  margin:0px; padding-left:25px;}
			article p{font-size:1.1em; text-align:justify; margin-bottom:15px; text-indent:1em; padding:0px 10px;}
			article a{color:darkmagenta;}
			article img{max-width:100%;}
			
			.cite{text-align:center; font-style:italic; font-size:1.1em;}
			
		#followpages{margin-top:25px; max-height:500px; overflow:auto;}
			#followpages h2 a{transition:0.1s;}
			#followpages h2 a:hover{color:orchid; transition:0.1s;}
		
		#encart{display:flex; background:khaki; border-right:solid 8px rgb(180,20,20);}
			#encart h2{text-align:center; margin-bottom:0px; font-size:1.25em;}
			#encart h2 a{color:chocolate;}
			#encart h2 span{font-weight:bold;font-size:1.25em;}
			#encart p{padding:10px; text-indent:0em;}
			#encart img{margin-right:0px; width:210px;}
			
		#esoterisme{margin:0px 0px 20px 0px;}
			#d1{display:flex; border-top:solid 1px black; margin:10px 0px; overflow:hidden;}
				#d1 div{display:block; padding:15px; width:80%;}
				#d1 div p{max-width:100%;}
					#d1 h2 a:hover{color:orchid}
					
					#d1 p a{border-bottom:1px solid black;}
					#d1 p a:hover{border-bottom:1px solid orchid;}

				#d1 img{transition:0.3s;}
				#d1 a{width:300px; overflow:hidden;}
				#d1 img:hover{transform: scale(1.2); transition:0.5s;}
			
	@media screen and (max-width: 1040px) 
	{
			
			#annonce{justify-content:center;}
			#horero{order:1;}
			#horerodiv{text-align:center;}

			
			#encart img{width:210px; padding-left:0px;}
	}
	
	@media screen and (max-width: 720px) 
		{
			
			#horero img{width:95%;}

			#encart{width:100%; flex-wrap:wrap;}
			#encart img{width:100%;}
			
			#d1{display:block; text-align:center;}
				#d1 div{width:95%; z-index:99;}
				#d1 img{width:100%; z-index:1;}
					#d1 img:hover{ transform: scale(1.03); }

		}

		aside{max-width:25%; display:inline-block; float:right; vertical-align:top; position:; right:0px;}			
			aside div{margin-bottom:15px; height:auto; border-radius:10px;  transition:0.2s; perspective:500px; perspective-origin:50% 50%; display:flex; flex-direction:column;  overflow:hidden;}
				
				aside a{max-width:100%; z-index:0;}
				
				aside img{height:; width:200x; border-radius:10px; box-shadow:0px 10px 5px rgba(10,10,10,0.8); transition:0.2s; z-index:1;}
					aside a div:hover img{transform:scale(1.055); filter:brightness(120%); transition:0.4s; z-index:1;}
			/*		
				aside div p{background:khaki; border-radius:0px 0px 10px 10px; padding:5px 10px; margin-top:-30px; text-align:center; box-shadow:0px 5px 3px rgba(10,10,10,0.8); border-bottom:3px solid orange; transition:0.2s; z-index:99;}
					aside div:hover p{transition:0.5s; background:gold; z-index:99;}
					
				aside div:hover{transform:translate(0px,0px) rotate(5deg) skewX(0deg) skewY(0deg) scale(1.1,1.1); transition:0.5s; z-index:99;}
			*/
			
			
			
	footer{background:plum;  margin-top:50px; padding:20px 0px 20px 0px; text-align:center;}
		footer p{max-width:1000px; margin:15px auto;}
		footer p a{margin:0.5em; line-height:2em;}
		footer img{max-width:250px;}
		
	/*PARTICULARS */
	
	#aida{display:flex; flex-wrap:non-wrap; text-align:center; overflow:hidden; justify-content:space-around; background:url("voyance-gratuite.jpg") top no-repeat; background-size:cover;}
		#aida img:first-child{max-width:700px;}
		#aida div{background:linear-gradient(to top, yellow, white); border-radius:0; border:3px solid rgb(180,240,255); padding:0px 1em; flex-grow:1; max-height:200px;}
		#aida div p:first-child{margin-top:10px; text-decoration:underline; font-weight:bold;}
		#aida p{font-weight:bold;}
		#aida div a>img{width:80px}
		#aida div:nth-child(n+2) img{width:115px; justify-content:center;}
				
	@media screen and (max-width: 640px) {
	#aida{background:plum; margin:0px 0px; max-width:100%; flex-wrap:wrap;} 
		#aida img:first-child{max-width:100%;}
	#aida div{max-width:27%; border-radius:0px; padding:0px 0.5em;}
		#aida div p:first-child{text-decoration:none; font-weight:bold; margin-top:5px;}
	#aida div>img{width:70px}
	#aida div:nth-child(n+2) img{width:80px}
	
	#headergaia p{display:none;}
}
		
		#cat{ text-align:center; margin:20px 0px;}
		#cat a{border-radius:10px; font-size:1.8em; font-family:raigarh; background:linear-gradient(to top,rgb(150,150,150),rgb(200,200,200), white); padding:9px; color:black; border:3px solid orange; transition:0.3s; font-style:italic;}
		#cat a:hover{background:linear-gradient(to top,rgb(220,220,220),rgb(250,250,250), white); transition:0.2s;}
	
	#troisboutons{width:100%; height:11em; background:url('voyance-gratuite.jpg') center fixed; background-size:contain; text-align:center; box-shadow:inset 0em 0.5em 1em black;}
		#troisboutons div{display:flex; flex-wrap:wrap; justify-content:space-between; padding-right:25px; padding-left:25px;}
			#troisboutons h3{font-family:chili; font-size:2em; color:white; text-shadow:0px 2px 3px black; padding:10px 0px 0px 0px;}
			#troisboutons p{text-align:center; margin-top:1.5em;}
		#troisboutons a{background:linear-gradient(rgb(250,250,190),rgb(250,250,150),yellow); border-radius:1em; padding:10px 25px; font-family:chili; border:solid rgb(150,20,110); border-width:0px 2px 5px 2px; transition:0.3s; box-shadow:0px 5px 30px rgb(220,220,150);}
			#troisboutons a:hover{padding:10px 45px; box-shadow:0px 5px 45px rgb(250,220,100); transition:0.7;}
			
	@media screen and (max-width: 640px) {
		
		#troisboutons{height:auto; background-size:cover; background:url('voyance-sentimentale.jpg') center fixed; background-size:cover;}
		#troisboutons div{display:block; padding:10px 0px;}
		#troisboutons p{margin-bottom:3.5em;}
		#troisboutons a{font-size:1.8em;}


	}

	
#cartesbas{margin:2em 0em; text-align:center; display:flex; flex-wrap:wrap; justify-content:space-around;}
#cartesbas img{max-width:45%; box-shadow:0px 3px 10px black;}


	.centre{text-align:center; font-weight:bold;}
	.imgc{display:block; max-width:100%; margin:auto; margin-bottom:25px; box-shadow:0px 10px 5px rgb(30,30,30);}
	.imgd{float:right; margin-left:10px; box-shadow:1px 1px 3px black;}
	.imgg{float:left; margin-right:10px; box-shadow:1px 1px 3px black;}
	
	#sommaire{box-shadow:1px 2px 3px black; background:rgb(250,170,170); margin:20px 0px;}
		#sommaire p{font-weight:bold; text-decoration:underline; padding-top:25px;}
		#sommaire ul{padding:10px 20px;}
		#sommaire li{margin:0px 0px 10px 0.5em;}
		#sommaire a{font-family:chili; color:rgb(50,30,240);}
			#sommaire a:clicked{}
	
	iframe{max-width:100%;}
	

	#plan{display:flex; flex-wrap:wrap;}
		#plan p{margin:10px;}
		
	#tableau-tarot-de-marseille{display:flex; flex-wrap:wrap; padding:25px; justify-content:space-between;}
		#tableau-tarot-de-marseille img{width:120px; transition:0.3s; box-shadow:1px 1px 3px black;}
				#tableau-tarot-de-marseille img:hover{transform:rotate(3deg) skewX(0deg) skewY(0deg) scale(1.1,1.1) ; position:relative; box-shadow:1px 3px 5px black; transition:0.5s;}

	#horoscopemois{text-align:center; display:flex; flex-wrap:wrap;}
	#horoscopemois div{border:4px solid rgb(210,210,255); max-width:65px; height:65px; margin:1em 1.5em; border-radius:0px; background:linear-gradient(to top,gold,yellow); transition:0.15s;}
		#horoscopemois div:hover{background:linear-gradient(to top,orange,gold); transition:0.15s;}
	
	
	/* MOBILE FRIENDLY */	
	@media screen and (max-width: 1040px) 
		{	
			header{padding-bottom:0px;}
			header h1{text-align:center; width:100%; margin-bottom:0.5em;}
			header div{display:block; width:100%; margin:auto; padding:5px 0px; text-align:center; border-radius:0px;}
			
			
			#headergaia{padding:0px;}
			
		#blockpunchline{flex-basis:100%; margin:130px 25px 0px 25px; min-height:125px; text-align:center;}
					
		#soleilgaia{display:none;}

			nav{height:300px; background:; text-align:center;}
				nav a {min-width:25%;}
					
				nav ul li ul li{display:none;}
				nav ul li:hover ul li{display:block; transition:0.15s;}

			
	/*		
		nav{text-align:center; height:350px; background:url("backgroundtop.jpg")top; background-size:cover; box-shadow:0px 10px 5px rgba(10,10,10,0.8);}
		nav input, nav label {display: none;}
		nav ul{list-style-type:none;}
			nav ul li{display:inline-block; vertical-align:top; }
			nav a{height:50px; display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:bold; width:215px; max-width:20%; background:khaki; padding:0px 10px; box-shadow:0px 2px 2px rgba(10,10,10,0.8); transition:0.2s; overflow:hidden; color:chocolate;}
			nav a:hover{background:gold; transition:0.2s;}
						
				nav ul li ul {position:relative; visibility:hidden; opacity:0; transition:0.5s; width:235px;  text-align:left; z-index:5;}
					nav ul li ul li{padding:0px; z-index:5;}
					nav ul li:hover ul{visibility:visible; opacity:1; transition:0.5s; z-index:5;}
		
			
			*/
			
			
			
			section{padding:30px 0px 0px 0px;}			
			
			article{max-width:90%;}
			
/*

		aside{max-width:22%; display:inline-block; float:right; vertical-align:top; position:relative; right:-80px;}			
			aside div{margin-bottom:15px; height:220px; width:100%; border-radius:10px;  transition:0.2s; perspective:500px; perspective-origin:50% 50%; display:flex; flex-direction:column;  overflow:hidden;}
				
				aside a{background:red; z-index:0;}
				
				aside div img{height:200px; width:200x; border-radius:10px; box-shadow:0px 10px 5px rgba(10,10,10,0.8); transition:0.2s; z-index:1;}
					aside div:hover img{transform:scale(1.2); transition:0.5s; z-index:1;}
				
				aside div p{background:rgb(255,215,255); border-radius:0px 0px 10px 10px; padding:5px 10px; margin-top:-30px; text-align:center; box-shadow:0px 5px 3px rgba(10,10,10,0.8); border-bottom:3px solid orange; transition:0.2s; z-index:99;}
					aside div:hover p{transition:0.5s; background:orchid; z-index:99;}



*/
			aside{position:static; float:none; max-width:none; text-align:center; display:block; margin-top:25px; text-align:left; padding:0px 25px;}
				aside div{overflow:show; height:auto; width:99%; margin: 12px auto; display:inline-block;}
				aside div p{margin-top:0px; padding:15px 0px;}
				aside div img, aside div p, aside div a, aside div{border-radius:0px;}
				aside div img{max-width:100%; height:; box-shadow:none;}
					aside a div:hover img{transform:none;}

			
			
		}
		
	@media screen and (max-width: 640px) 
		{
			header{background:url(voyance-gratuite.jpg) center no-repeat; background-size:cover; min-height:400px;}
			#headergaia{background:none;}  
			#headergaia h2{text-align:left; margin:0px 0px 10px 0px;}
			#headergaia h2 img{}
			/*#headergaia h2 a{font-size:0.95em; font-family:chili; background: -webkit-linear-gradient(firebrick, orangered,orange,gold,gold,yellow,white);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition:0.15;}
			#headergaia h2:hover a{font-size:0.95em;  background: -webkit-linear-gradient(purple,pink,white);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition:0.2;}*/
			
	.imgc{box-shadow:none; border:1px solid black; max-width:99%;}
	.imgd{float:none; box-shadow:none; border:1px solid black; max-width:99%; display:block; margin:auto; margin-bottom:25px;}
	.imgg{float:none; box-shadow:none; border:1px solid black; max-width:99%; display:block; margin:auto; margin-bottom:25px;}

			
			#invisible{display:block; color:white; background:orangered; padding:5px 10px; margin-top:10px;}
			
			#blockpunchline {margin-top:-15px; display:block;}
				#blockpunchline p{color:white; text-shadow:0px 1px 1px black;}
				#blockpunchline p span:nth-child(1){display:inline;}
				#blockpunchline p span:nth-child(2){display:none;}
			#annonce{padding-top:10px;}

			section{margin-top:0px;}
				
				article{max-width:none; width:100%; display:block; text-align:left;}
					article h1{font-size:1.8em;}
					article p{font-size:1.2em;}
					article img{padding:0px;}
					
			aside{position:static; float:none; max-width:none; text-align:center; display:block;}
				aside div{overflow:show; height:auto;}
				aside div p{margin-top:0px; padding:15px 0px;}
				aside div img, aside div p, aside div a, aside div{border-radius:0px;}
				aside div img{height:auto;}
					aside div img:hover{transform:scale(1.05);}					
			
			#cartesbas img{max-width:80%;}
				#cartesbas img:first-child{margin-bottom:20px;}
									
			footer{margin-top:0px;}
			
			nav{min-height:; height:auto; overflow:hidden;}
			nav ul{}
			nav ul li{min-width:100%;}
			nav ul li a{font-size:1.6em; min-width:100%; display:block; text-align:center; box-shadow:none;}



		/*	
			nav ul li{display:inline-block; vertical-align:top; }
			nav a{height:50px; display:table-cell; vertical-align:middle; font-size:1.2em; font-weight:bold; width:200px; padding:0px 10px; box-shadow:0px 2px 2px rgba(10,10,10,0.8); transition:0.2s; overflow:hidden;}
			nav a:hover{background:gold; transition:0.2s;}
						
				nav ul li ul {position:relative; visibility:hidden; opacity:0; transition:0.5s; width:200px;  text-align:center; z-index:5;}
					nav ul li ul li{padding:0px; z-index:5;}
					nav ul li:hover ul{visibility:visible; opacity:1; transition:0.5s; z-index:5;}

			*/
			
			
		nav input, nav label {display: visible;}

			
		nav input:not(:checked) ~ ul { max-height: 0; overflow: hidden; transition:0.5s;}
		nav input:checked ~ ul {max-height: 25em; transition:0.5s;}
		
		#firstlabel{display:block; position:fixed; top:0px; right:0px; height:50px; width:50px; background:gold; text-align:center; font-size:1.1em; line-height:1.8; color:white;}
		
		nav{position:fixed; top:0px; right:0px; background:none;}
		
		nav label:before {content:""; display:block; height:1.6rem; width:100%; 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; }
		
		nav input:checked + label {-webkit-transform: scale(.8); transform: scale(.8);}
		nav input:checked + label::before {background-position: center, center, center;}	
	}
