body{background:url("img/wall.jpg");}

@font-face{font-family:'titre'; src:url('img/Lilly__.ttf');}

*{margin:0px; padding:0px; font-family:Century Gothic;}

a{text-decoration:none;}

img{max-width:100%;}

#top{background:url("img/wall.jpg"); min-height:100vh; width:235px; max-width:35%; position:fixed;}

#toprod{margin:auto; color:mintcream; padding:10px;}
	header{color:mintcream; font-weight:bold; padding-bottom:10px;}
	header h1{font-size:1.3em;}
		header h1:first-letter{font-size:3em; float:left; color:lightskyblue;}
		header h1 span{font-size:0.8em; font-family:titre, Century Gothic; margin-left:-10px; }
		header h1 a{font-family:titre, Century Gothic; color:mediumvioletred;}
		
		header h2 img{height:1.2em; margin-bottom:-5px;}
			header h2 a{color:yellow;}
			
	#toprod p{padding-bottom:20px; font-size:1.1em;}
		#toprod p a{color:yellow;}
	
	nav{}
		nav label, nav input{display:none;}
		nav li{list-style-type:none; font-weight:bold; height:0px; line-height:1em; margin-bottom:10px; border-left:8px solid rgba(150,100,255,0.5); border-bottom:30px solid transparent; border-right:30px solid transparent;}
			nav li:hover{border-bottom:30px solid rgba(150,100,255,0.5);}
		nav li a{font-family:titre, Century Gothic; color:mintcream; display:block; padding:5px 15px; font-size:0.75em;}

#banner{height:200px; background:url("img/background.jpg") fixed; background-size:cover;}

.sectionhead{text-align:right; margin-top:-80px; max-width:80%; margin:-80px 15% 0px 25%;}
	.sectionhead h3{font-size:1.1em; text-align:left; min-width:200px; display:inline-block; background:url("img/can.png") center right no-repeat, url("img/wall.jpg"); vertical-align:bottom; padding:10px; border-radius:15px 15px 0px 0px; background-size:contain;}
		.sectionhead h3:first-letter{font-size:2.8em; float:left; color:lightskyblue;}
		.sectionhead h3 span{font-size:0.8em; font-family:titre, Century Gothic; margin-left:-5px;}
		.sectionhead a{font-family:titre, Century Gothic; color:mediumvioletred;}
	.sectionhead p{text-align:center; font-weight:normal; max-width:60%; display:inline-block; background:url("img/wall.jpg"); vertical-align:bottom; padding:5px 15px; border-radius:15px 0px 0px 0px; color:mintcream; font-size:1.5em;}
		.sectionhead p a{color:yellow; font-family:Century Gothic;}
		.sectionhead p a+a{color:white;}

	@media screen and (max-width:640px)
	{
	
	.sectionhead{margin:10px; text-align:center; width:100%;}		
		.sectionhead h2{padding:0px;}
		.sectionhead h3{display:none;}
		.sectionhead p{max-width:none; border-radius:none; display:block; background:; padding:10px 5px;}
	}
	
section{width:100%; margin:auto; color:mintcream; background:rgba(70,70,100,0.3); border-top:10px solid rgba(150,100,255,0.5); overflow:hidden;}
	section article{max-width:80%; margin:0px 15% 0px 25%;}	
		section article h1{font-family:titre, Century Gothic; font-size:1.55em; padding:10px 0px 0px 80px;}
		section article h2{font-family:titre, Century Gothic; font-size:1.4em;}
		section article h3{margin:20px 0px;}
		section article p{text-align:justify; font-size:1em; line-height:1.5em; padding:8px 30px; margin-top:16px;}
		section a{font-family:titre, Century Gothic; color:yellow;}
			section a:hover{text-decoration:underline;}
		
#separator{margin-top:-40px; height:10px; width:400px; border-bottom:8px solid rgba(150,100,255,0.5); border-left:30px solid transparent; border-top:30px solid transparent;}
#cartouche{margin-top:50px;}

/* MENU DE LA PAGE D'ACCUEIL */
#square{text-align:center;}
	#square div{height:250px; width:250px; display:inline-block; margin:20px; border:4px solid rgba(220,220,220,0.5); transition:0.2s;}
	#square p{font-family:titre, Century Gothic;  font-size:1.2em; padding:8px 10px; transition:0.2s;}
	#square a{color:mintcream;}	
		#square div:hover{border:4px solid rgba(250,250,250,0.8); box-shadow:3px 5px 5px rgb(20,20,20); transition:0.3s;}
		#square div:hover p{text-indent:0.75em; transition:0.5s;}	

	@media screen and (max-width:640px)
	{
	#square div{margin:10px; width:220px; height:220px;}
	}

#zodiac{margin-top:5px;}
	#zodiac div{display:inline-block; text-align:center; vertical-align:top;}
	#zodiac img{height:90px; width:90px; display:inline-block; margin:-12px 20px 20px 20px; border:4px solid rgba(220,220,220,0.5); transition:0.2s;}
	#zodiac p{display:inline-block; font-family:titre, Century Gothic; color:mintcream; transition:0.2s;}
		#zodiac div:hover img{border:4px solid rgba(250,250,250,0.8); transition:0.3s;}
		#zodiac div:hover p{text-indent:0.75em; transition:0.5s;}
		#zodiacpic{border:4px solid rgba(220,220,220,0.5);}

/* MENU DES CARTES DU TAROT DE MARSEILLE */
#tarot-cartes{margin-top:10px;}
	#tarot-cartes img{width:120px; border:2px solid black; border-radius:10px;}
		#tarot-cartes img:hover{transform: scale(1.15) rotate(3deg); transition:0.15s;}
	
	#tarotnext{text-align:center;}
		#tarotnext p{display:inline-block; vertical-align:top; text-align:center;}
		#tarotnext span{text-decoration:underline;}
		#tarotnext img{width:150px}
		
#bloc{overflow:hidden; margin-bottom:1em; max-width:100%;}
	#bloc img{filter:blur(0px); height:300px; z-index:2; max-height:100%; display:block; margin:auto; text-align:center; position:relative;}
	#blur{z-index:1; filter:blur(10px); height:299px; margin-top:-299px;}

	@media screen and (max-width:640px)
	{
		#bloc{height:349px;}
		#bloc img{display:none;}	
		#blur{filter:blur(0px); height:349px; margin-top:0px;}
	}

	.imgc{display:block; max-width:100%; margin:auto;}
	.imgd{float:right; margin-left:15px; border-radius:5px;}
	.imgg{float:left; margin-right:15px; border-radius:5px;}
	
	iframe{background-color:rgb(150,150,255);}
	
	footer{width:235px; max-width:35%; position:fixed; bottom:0px; left:0px; text-align:center; margin:52vh 0px 0px 0px; padding:5px 0px; background:rgba(0,0,0,0.25);}
		footer p{padding:5px; color:grey; font-size:0.9em;}
		footer a{color:grey;}
			footer a:hover{background:rgba(150,100,255,0.5);}

	
	
	@media screen and (max-width:1024px)
	{
		
		#top{width:200px; max-width:35%; position:fixed;}
			header h2 img{height:1em;}
			
		#toprod p{padding-bottom:10px; font-size:0.85em;}
			nav li{margin-bottom:3px;}
			nav li a{padding:5px 10px; font-size:0.65em;}
		
		#banner{height:150px;}
		
		.sectionhead{margin-top:0px; max-width:100%; margin:-20px 0px 0px 0px;}
			.sectionhead h1{display:none;}
			.sectionhead h2{display:block; text-align:right; font-size:1.3em; max-width:100%; padding:8px 10px; border-radius:0px;}
	
		section article{max-width:80%; margin:0px 0px 0px 200px;}	
			
			#bloc img{height:200px; margin:0px auto;}
		
		footer{width:200px;}
			footer p{font-size:0.7em;}
								
	}
	
	
	@media screen and (max-width:640px)
	{		
		#top{min-height:0px; width:100%; max-width:none; position:static;}
			header h1{display:inline-block;}
			header h2{float:right; display:inline-block; vertical-align:top; margin:15px 50px 0px 0px;}
				header h2 img{height:1.2em;}
		
		#toprod p{padding-bottom:10px; font-size:0.95em;}
			nav li a{padding:5px 10px; font-size:0.85em;}
		
		
		#banner{display:none;}
									
			section article{max-width:none; margin:0px; text-align:left;}
				section article p{padding:8px 10px;}
								
		footer{max-width:none; width:100%; position:static; margin:0px;}
		
		nav{position:fixed; top:0px; right:0px; background:cornflowerblue; z-index:3;}
		nav li{margin-bottom:0px; min-width:500px; max-width:100%;}
		nav span input:not(:checked) ~ ul {width:30px; max-height:0; overflow:hidden; transition:0.2s;}
		nav span input:checked ~ ul {max-height:25em; transition:0.2s;}

		nav input:not(:checked) ~ p { max-height:0; overflow:hidden; transition:0.2s;}
		nav input:checked ~ p {max-height:25em; transition:0.2s;}

		nav label {background:url("img/menuButton.png") no-repeat center; background-size:contain; display:block; position:static; padding:20px 20px; margin:auto; font-size:1.2em; text-align:center; color:mintcream; cursor:pointer; transition:0.2s;}
			nav label:before {display:block; background-color:transparent; cursor:hand; }
			nav input:checked + label {-webkit-transform: scale(0.85); transform: scale(0.85); transition:0.1s; text-align:right;}
	
	}