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

@font-face{font-family:'pertibd'; src:url('template/Gorilla.ttf');}
@font-face{font-family:'minionbold'; src:url('template/MinionPro-Bold.otf');}
@font-face{font-family:'minion'; src:url('template/MinionPro-Medium.otf');}
@font-face{font-family:'titre'; src:url('template/HARNGTON.TTF');}

/* GLOBAL */

body{font-family:minion;}

header, nav, h1, h2, article h3{font-family:pertibd;}	

a{color:gold; text-decoration:none; font-weight:bold; transition:0.3s;}
	article a{color:darkorange;}
	
	nav a:hover, section a:hover, td a:hover, footer a:hover{transition:0.1s; text-shadow: -2px 2px 2px white, 2px 2px 2px white, 2px -2px 2px white, -2px -2px 2px white, -5px 5px 5px white, 5px 5px 5px white, 5px -5px 5px white, -5px -5px 5px white;}
	header h1:hover{transition:0.1s; text-shadow: 1px 1px 1px black,-1px 1px 1px black, -2px 2px 2px white, 2px 2px 2px white, 2px -2px 2px white, -2px -2px 2px white, -5px 5px 5px white, 5px 5px 5px white, 5px -5px 5px white, -5px -5px 5px white;}

/* EN TETE */
/*rgb(40,40,205), rgb(100,100,255), rgb(40,40,205)*/

#couplestar{overflow:hidden; background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),  midnightblue),url('template/bg00.jpg') no-repeat center fixed; background-size:cover; width:100%; height:95vh; }
	#couplestar h2{font-family:titre; text-align:center; font-size:5em; color:magenta; text-shadow:2px 1px 3px black, 0px 0px 10px white, 0px 0px 15px white, 0px 0px 5px white, 0px 0px 2px white, 0px 0px 20px white; padding-top:12vh;}
	#couplestar h2::first-letter{color:gold;}
	
.arrow{position:relative; top:60vh; text-align:center; width:auto; font-size: 2.5em; color: white; cursor: pointer; animation: float 1s infinite alternate; margin:auto;}
	.arrow img{width:2em;}

@keyframes float {
    from {transform: translateX(0%) translateY(0);}
    to {transform: translateX(0%) translateY(-10px);}}
	
	.arrow:hover {color: yellow; animation: float 0.2s infinite alternate; }

#fartop{background:url('template/bg0.jpg') bottom fixed; background-size:cover; display:flex; flex-wrap:wrap;}
	
	header{display:flex; flex-wrap:non-wrap; justify-content:space-between; order:2; height:250px; width:100%; margin:50px auto 0px auto; padding:0px 5em; background:/*url(images/tarots.png) no-repeat right,*/ url(template/voyante-par-telephone-gratuite.png) no-repeat left; background-size:contain;}
		header div:first-of-type{text-indent:13em;}
		header div:first-of-type p:first-of-type{font-family:titre; transition:0.1s; font-size:2.5em; padding:40px 10px 0px 10px; text-shadow: 1px 1px 1px black,-1px 1px 1px black;}
			header div:first-of-type p:first-of-type::first-letter{color:gold;}
			header div:first-of-type p:first-of-type a{color:pink; transition:0.2s;}
				header div:first-of-type p:nth-of-type(2) a{transition:0.15s;}
				header div:first-of-type p:nth-of-type(2) a:hover{transition:0.15s; text-shadow: -2px 2px 2px white, 2px 2px 2px white, 2px -2px 2px white, -2px -2px 2px white, -5px 5px 5px white, 5px 5px 5px white, 5px -5px 5px white, -5px -5px 5px white;}
		header div:first-of-type p:first-of-type a:hover{color:violet; transition:0.3s;}
				header div:first-of-type p:nth-child(2){color:gold; font-size:2em; padding:0px 10px; text-shadow:1px 1px 1px black,-1px 1px 1px black;}
				header div:first-of-type p:nth-child(3){color:palegoldenrod; font-size:1.25em; font-family:lucida; font-style:italic; text-shadow:1px 1px 1px black,-1px 1px 1px black; padding-bottom:;}

		header div:nth-of-type(2){margin:2em 0em; padding:1em 2em; display:flex; flex-wrap:wrap; flex-direction:column; justify-content:center;}
			header div:nth-of-type(2) img{width:90%; margin-top:0.5em; box-shadow:0px 0px 1px cyan, 0px 0px 2px white,0px 0px 5px white; border-radius:15px;}
			header div:nth-of-type(2) a{transition:0.15s;}
			header div:nth-of-type(2) a:hover{transition:0.15s; transform:scale(95%); filter:brightness(150%);}

		header sub{font-size:0.6em;}
	
	#subheader{order:3; font-size:1.3em; width:100%; padding:1em 3.5em; margin:auto; background:linear-gradient(to right,lightblue, lightblue, dodgerblue);}
		#subheader p{margin:1em 0em;}
	
	@media screen and (max-width: 640px) {
		
		#couplestar{background:url('template/voyance-amour-tel.jpg') no-repeat center right; background-size:cover;}
			#couplestar h2{font-size:2.5em; padding-top:15vh; color:magenta;} .arrow{left:5%;}
			
			header{flex-wrap:wrap; padding:0px 1em; margin:0px auto 0px auto; height:auto;}
				header div:first-of-type{text-indent:0em;}
				header div:nth-of-type(2){margin:1em auto 0.5em auto; padding:0.5em; overflow:hidden;}	
				header div:nth-of-type(2) img{width:100%; margin-top:0em;}
	}

	
	nav{order:1; width:100%; position:fixed; top:0px;}
		nav ul{background:navy; text-align:center;}
			label, input{display:none;}
			nav li{list-style-type:none; display:inline-block; vertical-align:top; width:160px; padding:15px 10px; height:25px; font-size:0.9em; transition:0.3s;}	
			nav li a{display:block;}
				nav ul li ul{opacity:0; position:relative; top:0px; left:0px; transition:0.3s;}
				nav ul li:hover ul{opacity:1; top:20px;}
					nav ul li ul li{height:0px; padding:0px; display:block;}
					nav ul li:hover ul li{height:25px; padding:10px 0px;}

/* SECTION PRINCIPALE */

	#corpus{background:url('template/bg-zen.jpg') center fixed; background-size:cover; min-height:400px; z-index:1;}
		
		section {max-width:1250px; margin:auto; overflow:hidden; background:rgb(230,230,250); padding:3em 5em; }
		
		article{margin:0px 0px 30px 0px;display:inline-block; width:70%;  text-align:justify; color:black; font-size:1.1em; z-index:100;}
			article h1{background:navy; color:white; padding:15px; margin-bottom:10px;}
			article h2{background:royalblue; color:white; font-size:1.2em; padding:10px; max-width:100%;}
			article h3{font-size:1.15em; padding:10px;}
			article h4{text-decoration:underline;}
			article h4, article h5{font-size:1.15em; padding:10px 10px 0px 10px;}
			article p{padding:10px 10px; font-size:1.15em;}
			article ul, article ol{font-size:1.1em; margin:0em 1.5em;}
				article ol li{margin:1em 0em;}
			article img{max-width:100%;}
			
		aside{background:navy; display:inline-block; vertical-align:top; width:22%; float:right; margin:0px 0px 0px 3%; padding:20px 10px; color:white;}
			aside h1{font-size:0.8em; padding:0px 10px; text-align:center;}
			#sommaire{font-size:1.35em; text-decoration:underline; padding:10px;}
			aside p{padding:10px;}
			aside p:first-child{font-weight:bold; font-size:1.2em; text-align:center;}
				#boule{border-radius:50%; border:1px solid grey; padding:0px; background:none; margin:1em auto 10px auto; transition:1s; max-width:100%;}
				#boule:hover{box-shadow:0px -15px 15px firebrick, 0px 15px 15px deepskyblue, 12px 0px 15px green, -12px 0px 15px yellow; transition:0.5s;}
				aside ul{font-size:1.15em;}
				aside li{margin-left:2em;}


footer{background:navy; text-align:; padding:30px; color:white; display:flex; flex-wrap:wrap; justify-content:space-around;}
	footer h4{padding:0px 10px; text-decoration:underline;}
	footer p{max-width:800px; text-align:left; margin:auto; padding:10px;}
	footer a{color:white; font-weight:normal;}
	
/* PARTICULIERS */

	.middle{text-align:center; font-weight:bold;}
	
	iframe{background:rgb(240,240,110); width:100%; height:800px;}
	
	hr{margin-bottom:20px;}

	.centre{text-align:center;}
	.imgd{float:right; margin-left:10px; border-radius:7px;}
	.imgg{float:left; margin-right:10px; border-radius:7px;}
	.imgc{display:block; margin:1em auto; max-width:100%; padding:; background:linear-gradient(to bottom, pink, purple);}
	
	.legende{text-align:center; color:midnightblue; padding-top:2px; font-style:italic; font-size:0.95em;}
	
	#fb{width:35px; margin:0px 10px -10px 0px;}
	
	#sloganaside{font-size:1.1em; text-align:center; font-family:pertibd;}
	
	#trois{text-align:center; max-width:600px; margin:auto;}
	#trois img{display:block; margin:auto; max-width:100%; width:110px; transition:0.3s;}
	#trois img:hover{transform:rotate(360deg); transition:0.65s;}
	#trois li{list-style-type:none; display:inline-block; width:31%; text-align:left;}
	#trois p{text-indent:0px; padding:0px;}
	#trois li:nth-child(2){padding:0px 15px;}
	

	#sectionindex{max-width:none;}
		#sectionindex article{max-width:1150px; display:block; margin:0px auto 0px auto;}
		#sectionindex aside{max-width:800px; display:block; margin:auto;}
	
	#titleindex{background:navy; text-align:center; color:white; padding:15px; font-size:1.4em; margin-bottom:;}
	#asideindex{background:navy;}
		
	#flyerindex{max-height:350px; overflow:auto; margin:20px 0px; background:navajowhite;}
	#flyerindex h2{text-align:center; font-size:1.1em;}
	
	#table-zodiaque td{padding:10px; vertical-align:top; font-size:1em;}
		#table-zodiaque td span{font-family:pertibd;}
		#table-zodiaque a:hover{text-decoration:underline;}
		#table-zodiaque a img{transition:0.15s}
		#table-zodiaque a:hover img{transform:scale(85%); filter:saturate(125%); transition:0.15s;}
		
		#signeelements{display:flex; flex-wrap:non-wrap; max-width:100%; overflow:hidden; transition:0.15s;}
			#signeelements img{width:150px; max-width:30%;}
			#signeelements:hover{transform:scale(95%); filter:saturate(125%); transition:0.15s;}
		
	#blocslongs div{display:inline-block;}

	#kabbale-table{width:80%; margin:auto;}
		#kabbale-table td{padding-right:10px; padding-bottom:5px;}
	#kabbale-aritable{width:100%; margin:auto; border-collapse:collapse;}
		#kabbale-aritable td{padding:5px; border:1px solid rgb(110,90,90); vertical-align:top; text-align:left;}	
	
	
#cartestarotzen{text-align:center;}	
#cartestarotzen img{max-width:180px; display:inline-block; border-radius:5px;}	

#vignettesindex{display:flex; flex-wrap:wrap; justify-content:space-around;}
	#vignettesindex a{max-width:32%; overflow:hidden;}
	#vignettesindex img{max-width:92%; overflow:hidden; padding:15px; background:linear-gradient(to bottom, pink, purple); transition:0.15s}
	#vignettesindex a:hover img{filter:invert(100%); transition:0.3s;}
	
@media screen and (max-width: 640px){#vignettesindex{justify-content:center; padding:0px; margin:0px;} #vignettesindex a{max-width:90%; padding:0px; margin:0px; overflow:visible;} #vignettesindex img{max-width:100%; padding:10px; margin-left:-10px; overflow:visible;}}

	@media screen and (max-width: 860px) 
{
	aside{width:20%; min-height:20px;}
}
	
	@media screen and (max-width: 640px) 
{
	#fartop{background:linear-gradient(to right bottom, darkblue, dodgerblue, darkblue); background-size:contain; margin-top:1.15em;}
	
	header{background:none; text-align:center; padding-bottom:1em;}
		header h3{padding:0.5em 0.5em;}
		header div{text-indent:0em;}

	nav{width:100%; margin-top:0em; overflow:hidden; background:mediumorchid;}
	nav li{display:block; width:100%; height:auto;}

		nav ul li ul, nav ul li:hover ul{opacity:1; position:static; width:100%; top:0px; margin-top:10px;}
		nav ul li ul li, nav ul li:hover ul li{height:25px; padding:15px 0px;}
		nav ul li ul li a{color:white;}
		
			nav label {background:url('template/favicon.png') left bottom no-repeat; background-size:55px;}
			nav input:not(:checked) ~ ul { max-height:0; overflow:hidden; transition:0.2s;}
			nav input:checked ~ ul {max-height:60em; transition:0.2s;}
			nav #li1 input:not(:checked) ~ ul { max-height:0; overflow:hidden; transition:0.2s;}
			nav #li1 input:checked ~ ul {max-height:60em; transition:0.2s;}
			nav #li2 input:not(:checked) ~ ul { max-height:0; overflow:hidden; transition:0.2s;}
			nav #li2 input:checked ~ ul {max-height:60em; transition:0.2s;}
			nav #li3 input:not(:checked) ~ ul { max-height:0; overflow:hidden; transition:0.2s;}
			nav #li3 input:checked ~ ul {max-height:60em; transition:0.2s;}

			#li1 label, #li2 label, #li3 label{float:right; width:30px; height:30px; background:url("template/arrow-down.png")no-repeat center; background-size:contain; margin:-40px 20px 0px 0px;}
			nav label {display:block; position:static; padding:10px 0px; margin:auto; font-size:1.5em; text-align:center; color:white; transition:0.2s;}
			nav input:checked + label {-webkit-transform: scale(.8); transform: scale(.8); transition:0.1s;}
			nav #li1 input:checked + label, nav #li2 input:checked + label, nav #li3 input:checked + label{background:url("template/arrow-up.png") no-repeat center; background-size:contain;}
			
	section{padding:0px;}
	
	article{text-align:left; max-width:100%; padding:0px 0px 1em 0px; margin-bottom:0px;}
		article h1, aside, .imgd, .imgg, .imgc{border-radius:0px;}	
		article h2{font-size:1.2em; padding:5px 10px; margin:0px;}
		article h3{text-align:left; padding:10px 15px 5px 15px;}
		article, aside{display:block; width:100%;}
		article .imgc {max-width:95%;}
		article p{padding:10px 15px;}
		
	aside{float:none; margin:0px; padding:10px 0px;}
		aside h1{padding:10px;}
		aside ul{padding:0px 10px;}
		aside li {padding:5px 0px;}
	
	
	#behind-flyer{background:url(template/bg.jpg) top fixed; background-size:cover; height:200px; box-shadow:inset 0px 5px 8px black;}

	#boule{max-width:70%; margin:auto;}
	#boule:hover{box-shadow:;}
	
	#trois li{width:30%; margin-top:15px;}

	#table-zodiaque td{padding:3px; font-size:0.85em; text-align:left;}
		#table-zodiaque td span{font-family:pertibd; font-size:0.75em;}

		#kabbale-aritable td{padding:1px; font-size:0.9em;}	
		 
	footer{padding:15px;}
}