@font-face{font-family:'hobostd'; src:url('img/hobostd.otf');}
@font-face{font-family:'hobostd'; src:url('img/hobostd.ttf');}
@font-face{font-family:'sylfaen'; src:url('img/BKANT.TTF');}

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

body{background-image:url("img/roulotte_tzigane.jpg"); max-width:1150px; margin:auto;}
	
	h1, h2, .ctr{text-align:center;}

	h1, h2, header p, a, nav p, .telephone_corps, .bohemienne{font-family: hobostd,"trebuchet ms";}
	p{font-family:sylfaen, "times new roman";}

/* couleur de fond*/
nav p, section, li, .bohemienne{background-color:moccasin;}


header{background-image:url("img/ciel.jpg"); width:100%; height:200px; overflow:hidden; border-bottom:2.5px solid tomato;}
	header a{color:gold; font-size:0.8em;}
	.telephone{height:200px; text-align:center; font-size:2.2em; padding-top:50px; color:gold; overflow:auto; text-shadow:2px 2px 1px brown;}
	.imghead1{float:left; max-height:200px; border-radius:0% 50% 50% 0%; border-right:5px solid tomato;}
	.imghead2{float:right; max-height:200px; border-radius:50% 0% 0% 50%; border-left:5px solid tomato;}
	
	
section{box-shadow:0px 8px 12px; margin:auto; width:62%; text-align:justify; padding-bottom:25px; margin-bottom:20px; min-height:500px; border-bottom:5px solid sandybrown;}
	section h1{padding:15px 0px; background:sandybrown;}
	section h1 a{color:black; font-size:1em;}
	section h2{font-size:1.35em; padding:10px 0px 0px 0px;}
	section p{margin:0px 10px; font-size:1.05em; padding:10px 20px;}
	section strong{color:orangered;}
	
.bohemienne{float:right; width:15%; text-align:center; box-shadow:0px 8px 8px black;}

nav{text-align:center; width:200px; float:left; box-shadow:0px 8px 8px black;}
	nav input, nav label {display:none;}
	nav p{font-size:1.8em; transition:0.3s;}
	nav ul{padding:0px; margin:0px;}
		nav li{display:block; list-style-type:none; padding:5px 0px; margin-bottom:0px; border:1px solid burlywood; min-width:165px; height:25px; transition:0.3s;}
		nav p:hover, nav li:hover, .bohemienne:hover{background-color:rgb(255,200,80); color:tomato; transition:0.3s;}

	nav ul li ul{display:none;}
	nav ul li:hover ul{display:block; position:relative; top:-29px; left:198px;}
		
a{font-size:1.2em; font-weight:bold; text-decoration:none; color:midnightblue; }
	section a{font-size:0.9em; transition:0.3s;}
	section a:hover, footer a:hover{color:tomato; transition:0.3s;}
		
footer{text-align:center; font-size:0.75em; padding:10px 0px 20px 0px;}	
	footer a{color:rgb(20,20,20); font-weight:normal;}
	footer img{width:220px;}
	
	.right, .right a{color:yellow; font-size:1em;}
	.checked {
    color: orange;
}
	.ctr{text-align:center;}
	.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;}

	
		#flyerz{margin-bottom:-25px; max-height:300px; overflow:auto; background:rgba(250,250,250,0.7); color:rgba(100,100,100,0.5);}
			#flyerz h2 a{color:rgba(100,100,200,0.5);}
			#flyerz input{display:none;}
	.container div{
    width: 85px;
    height: 85px;
}

.diaporama2{margin:0 auto; width:100%; height:250px; overflow:hidden;}
	.diaporama2 div {display:inline-block; text-align:left; height:250px; max-width:50%; width:220px; vertical-align:top;}
	.diaporama2 p {margin:0px 10px; padding:5px; font-size:0.95em; font-family:trebuchet ms;}
	.diaporama2 p span{float:right; font-style:italic;}
.diaporama2 figure{width:3525px; position:relative; left:0px; animation-name:diapo2; animation-duration:40s; animation-timing-function:linear; animation-iteration-count:infinite; animation-direction:normal;}

@keyframes diapo2{
	0%{left:0px;}
	100%{left:-2690px;}
}
	
		/*
		
		#flyerz input:not(:checked) ~ #flyers {max-height:0; overflow:hidden; transition:0.5s;}
		#flyerz input:checked ~ #flyers {max-height:450px; overflow:auto; transition:0.5s;}
			
		#flyerz label {display:block; width:100%; height:50px; margin:auto; background:url("img/arrow-down.png") no-repeat center, peru; background-size:contain; border-top:5px solid sandybrown;}
			#flyerz label:hover{content:""; background:url("img/arrow-down-white.png") no-repeat center, peru; background-size:contain; cursor:pointer;}
					
		#flyerz input:checked + label {background:url("img/arrow-up.png") no-repeat center, peru; background-size:contain;}
			#flyerz input:checked + label:hover {background:url("img/arrow-up-white.png") no-repeat center, peru; background-size:contain; cursor:pointer;}
		*/
		
	#tarot-carte{display:block; margin:auto; width:120px;}

	#oracle-manuscrit{text-align:center;}
		#oracle-manuscrit li a{width:120px; height:225px; display:block;}
		#oracle-manuscrit li{display:inline-block; width:120px; height:225px; background:url("img/oracle-le-manuscrit/oracle-le-manuscrit.jpg"); background-size:contain; border-radius:10px;}
		#oracle-manuscrit #achats:hover{background:url("img/oracle-le-manuscrit/achats.png"); background-size:contain;}
		#oracle-manuscrit #argent:hover{background:url("img/oracle-le-manuscrit/argent.png"); background-size:contain;}
		#oracle-manuscrit #arts:hover{background:url("img/oracle-le-manuscrit/arts.png"); background-size:contain;}
		#oracle-manuscrit #chance:hover{background:url("img/oracle-le-manuscrit/chance.png"); background-size:contain;}
		#oracle-manuscrit #changement:hover{background:url("img/oracle-le-manuscrit/changement.png"); background-size:contain;}
		#oracle-manuscrit #choix:hover{background:url("img/oracle-le-manuscrit/choix.png"); background-size:contain;}
		#oracle-manuscrit #construction:hover{background:url("img/oracle-le-manuscrit/construction.png"); background-size:contain;}
		#oracle-manuscrit #danger:hover{background:url("img/oracle-le-manuscrit/danger.png"); background-size:contain;}
		#oracle-manuscrit #deces:hover{background:url("img/oracle-le-manuscrit/deces.png"); background-size:contain;}
		#oracle-manuscrit #destin:hover{background:url("img/oracle-le-manuscrit/destin.png"); background-size:contain;}
		#oracle-manuscrit #dualite:hover{background:url("img/oracle-le-manuscrit/dualite.png"); background-size:contain;}
		#oracle-manuscrit #echanges:hover{background:url("img/oracle-le-manuscrit/echanges.png"); background-size:contain;}
		#oracle-manuscrit #emotions:hover{background:url("img/oracle-le-manuscrit/emotions.png"); background-size:contain;}
		#oracle-manuscrit #ennuis:hover{background:url("img/oracle-le-manuscrit/ennuis.png"); background-size:contain;}
		#oracle-manuscrit #equilibre:hover{background:url("img/oracle-le-manuscrit/equilibre.png"); background-size:contain;}
		#oracle-manuscrit #esoterisme:hover{background:url("img/oracle-le-manuscrit/esoterisme.png"); background-size:contain;}
		#oracle-manuscrit #examens:hover{background:url("img/oracle-le-manuscrit/examens.png"); background-size:contain;}
		#oracle-manuscrit #famille:hover{background:url("img/oracle-le-manuscrit/famille.png"); background-size:contain;}
		#oracle-manuscrit #femme:hover{background:url("img/oracle-le-manuscrit/femme.png"); background-size:contain;}
		#oracle-manuscrit #fete:hover{background:url("img/oracle-le-manuscrit/fete.png"); background-size:contain;}
		#oracle-manuscrit #force:hover{background:url("img/oracle-le-manuscrit/force.png"); background-size:contain;}
		#oracle-manuscrit #homme:hover{background:url("img/oracle-le-manuscrit/homme.png"); background-size:contain;}
		#oracle-manuscrit #hopital:hover{background:url("img/oracle-le-manuscrit/hopital.png"); background-size:contain;}
		#oracle-manuscrit #idees:hover{background:url("img/oracle-le-manuscrit/idees.png"); background-size:contain;}
		#oracle-manuscrit #justice:hover{background:url("img/oracle-le-manuscrit/justice.png"); background-size:contain;}
		#oracle-manuscrit #medecine:hover{background:url("img/oracle-le-manuscrit/medecine.png"); background-size:contain;}
		#oracle-manuscrit #mefiance:hover{background:url("img/oracle-le-manuscrit/mefiance.png"); background-size:contain;}
		#oracle-manuscrit #naissance:hover{background:url("img/oracle-le-manuscrit/naissance.png"); background-size:contain;}
		#oracle-manuscrit #nouvelles:hover{background:url("img/oracle-le-manuscrit/nouvelles.png"); background-size:contain;}
		#oracle-manuscrit #perte:hover{background:url("img/oracle-le-manuscrit/perte.png"); background-size:contain;}
		#oracle-manuscrit #protection:hover{background:url("img/oracle-le-manuscrit/protection.png"); background-size:contain;}
		#oracle-manuscrit #rencontre:hover{background:url("img/oracle-le-manuscrit/rencontre.png"); background-size:contain;}
		#oracle-manuscrit #reussite:hover{background:url("img/oracle-le-manuscrit/reussite.png"); background-size:contain;}
		#oracle-manuscrit #sante:hover{background:url("img/oracle-le-manuscrit/sante.png"); background-size:contain;}
		#oracle-manuscrit #secret:hover{background:url("img/oracle-le-manuscrit/secret.png"); background-size:contain;}
		#oracle-manuscrit #separation:hover{background:url("img/oracle-le-manuscrit/separation.png"); background-size:contain;}
		#oracle-manuscrit #soutien:hover{background:url("img/oracle-le-manuscrit/soutien.png"); background-size:contain;}
		#oracle-manuscrit #surprise:hover{background:url("img/oracle-le-manuscrit/surprise.png"); background-size:contain;}
		#oracle-manuscrit #temps:hover{background:url("img/oracle-le-manuscrit/temps.png"); background-size:contain;}
		#oracle-manuscrit #trahison:hover{background:url("img/oracle-le-manuscrit/trahison.png"); background-size:contain;}
		#oracle-manuscrit #travail:hover{background:url("img/oracle-le-manuscrit/travail.png"); background-size:contain;}
		#oracle-manuscrit #union:hover{background:url("img/oracle-le-manuscrit/union.png"); background-size:contain;}
		#oracle-manuscrit #voyage:hover{background:url("img/oracle-le-manuscrit/voyage.png"); background-size:contain;}
		
	#tableau-oracle-manuscrit{padding:0px 0px 0px 0px; border-top:20px solid tomato; border-bottom:20px solid tomato;}
	#tableau-oracle-manuscrit div{display:block; min-height:300px; padding:10px 0px;}
	#tableau-oracle-manuscrit h2{font-size:1.2em; margin:0px 30px;}
	#tableau-oracle-manuscrit img{width:156px; height:300px; padding:0px 20px;}
	#tableau-oracle-manuscrit p{}
		.carte-gauche{border-right:20px solid tomato; border-top:5px solid tomato; border-radius:0px 0px 0px 0px;}
			.carte-gauche h2{text-align:left;}
		.carte-droite{border-left:20px solid tomato; border-top:5px solid tomato; border-radius:0px 0px 0px 0px; text-align:right;}
			.carte-droite h2{text-align:right;}
			
	.encyclomenu{margin:auto; text-align:center;}
	.encyclomenu li{width:47.5%; display:inline-block; padding:15px 0px; margin:0px; padding:0px;}
	.encyclomenu h2{padding-top:15px;}
	.encyclomenu li a{background:; display:block;}
	.encyclomenu li a:hover{background:khaki;}
	.encyclomenu li img{width:200px; height:200px;}
	
/* MOBILE FRIENDLY */	
	@media screen and (max-width: 1024px) 
		{	
		.bohemienne{font-size:0.9em;}
		
		nav{width:18%; overflow:hidden;}
			nav p{font-size:1.35em;}
			nav li{min-width:0px; height:auto;}
			nav ul li:hover ul{display:none;}
		}

	@media screen and (max-width: 640px) 
		{
		body{background:rgb(255,255,160);}
		
		header{border-radius:0px; margin-top:0px; height:110px; background-size:cover; border:none;}
		.imghead1, .imghead2{display:none;}
		.telephone{padding-top:25px; font-size:1.5em;}
		
		.bohemienne{display:none;}
		
		nav{float:none; width:100%; margin:0px; border-top:3px solid peru; border-bottom:3px solid peru; box-shadow:none;}
		nav p{padding:5px 0px 0px 0px; margin:0px; box-shadow:none;}
		nav li{padding-top:15px; margin:0px; height:40px; border-top:1px solid burlywood; box-shadow:none;}
			
		section{float:clear; width:100%; margin:0px; padding:0px 0px 20px 0px; box-shadow:none; border-bottom:3px solid peru;}
			section p{margin:0px 5px;}
					
		footer{background-image:url("images/roulotte_tzigane.jpg"); width:100%; margin:0px; padding:10px 0px 10px 0px;}
			.right, .right a{color:darkorange;}

			.encyclomenu li{width:90%;}		
			.imgd, .imgg{float:none; display:block; max-width:100%; margin:auto;}
		
		#flyerz{margin-bottom:-20px;}
			#flyerz input:checked ~ #flyers {max-height:300px; overflow:auto; transition:0.5s;}
		
		#oracle-manuscrit li{background:none;}
		#oracle-manuscrit #achats{background:url("img/oracle-le-manuscrit/achats.png"); background-size:contain;}
		#oracle-manuscrit #argent{background:url("img/oracle-le-manuscrit/argent.png"); background-size:contain;}
		#oracle-manuscrit #arts{background:url("img/oracle-le-manuscrit/arts.png"); background-size:contain;}
		#oracle-manuscrit #chance{background:url("img/oracle-le-manuscrit/chance.png"); background-size:contain;}
		#oracle-manuscrit #changement{background:url("img/oracle-le-manuscrit/changement.png"); background-size:contain;}
		#oracle-manuscrit #choix{background:url("img/oracle-le-manuscrit/choix.png"); background-size:contain;}
		#oracle-manuscrit #construction{background:url("img/oracle-le-manuscrit/construction.png"); background-size:contain;}
		#oracle-manuscrit #danger{background:url("img/oracle-le-manuscrit/danger.png"); background-size:contain;}
		#oracle-manuscrit #deces{background:url("img/oracle-le-manuscrit/deces.png"); background-size:contain;}
		#oracle-manuscrit #destin{background:url("img/oracle-le-manuscrit/destin.png"); background-size:contain;}
		#oracle-manuscrit #dualite{background:url("img/oracle-le-manuscrit/dualite.png"); background-size:contain;}
		#oracle-manuscrit #echanges{background:url("img/oracle-le-manuscrit/echanges.png"); background-size:contain;}
		#oracle-manuscrit #emotions{background:url("img/oracle-le-manuscrit/emotions.png"); background-size:contain;}
		#oracle-manuscrit #ennuis{background:url("img/oracle-le-manuscrit/ennuis.png"); background-size:contain;}
		#oracle-manuscrit #equilibre{background:url("img/oracle-le-manuscrit/equilibre.png"); background-size:contain;}
		#oracle-manuscrit #esoterisme{background:url("img/oracle-le-manuscrit/esoterisme.png"); background-size:contain;}
		#oracle-manuscrit #examens{background:url("img/oracle-le-manuscrit/examens.png"); background-size:contain;}
		#oracle-manuscrit #famille{background:url("img/oracle-le-manuscrit/famille.png"); background-size:contain;}
		#oracle-manuscrit #femme{background:url("img/oracle-le-manuscrit/femme.png"); background-size:contain;}
		#oracle-manuscrit #fete{background:url("img/oracle-le-manuscrit/fete.png"); background-size:contain;}
		#oracle-manuscrit #force{background:url("img/oracle-le-manuscrit/force.png"); background-size:contain;}
		#oracle-manuscrit #homme{background:url("img/oracle-le-manuscrit/homme.png"); background-size:contain;}
		#oracle-manuscrit #hopital{background:url("img/oracle-le-manuscrit/hopital.png"); background-size:contain;}
		#oracle-manuscrit #idees{background:url("img/oracle-le-manuscrit/idees.png"); background-size:contain;}
		#oracle-manuscrit #justice{background:url("img/oracle-le-manuscrit/justice.png"); background-size:contain;}
		#oracle-manuscrit #medecine{background:url("img/oracle-le-manuscrit/medecine.png"); background-size:contain;}
		#oracle-manuscrit #mefiance{background:url("img/oracle-le-manuscrit/mefiance.png"); background-size:contain;}
		#oracle-manuscrit #naissance{background:url("img/oracle-le-manuscrit/naissance.png"); background-size:contain;}
		#oracle-manuscrit #nouvelles{background:url("img/oracle-le-manuscrit/nouvelles.png"); background-size:contain;}
		#oracle-manuscrit #perte{background:url("img/oracle-le-manuscrit/perte.png"); background-size:contain;}
		#oracle-manuscrit #protection{background:url("img/oracle-le-manuscrit/protection.png"); background-size:contain;}
		#oracle-manuscrit #rencontre{background:url("img/oracle-le-manuscrit/rencontre.png"); background-size:contain;}
		#oracle-manuscrit #reussite{background:url("img/oracle-le-manuscrit/reussite.png"); background-size:contain;}
		#oracle-manuscrit #sante{background:url("img/oracle-le-manuscrit/sante.png"); background-size:contain;}
		#oracle-manuscrit #secret{background:url("img/oracle-le-manuscrit/secret.png"); background-size:contain;}
		#oracle-manuscrit #separation{background:url("img/oracle-le-manuscrit/separation.png"); background-size:contain;}
		#oracle-manuscrit #soutien{background:url("img/oracle-le-manuscrit/soutien.png"); background-size:contain;}
		#oracle-manuscrit #surprise{background:url("img/oracle-le-manuscrit/surprise.png"); background-size:contain;}
		#oracle-manuscrit #temps{background:url("img/oracle-le-manuscrit/temps.png"); background-size:contain;}
		#oracle-manuscrit #trahison{background:url("img/oracle-le-manuscrit/trahison.png"); background-size:contain;}
		#oracle-manuscrit #travail{background:url("img/oracle-le-manuscrit/travail.png"); background-size:contain;}
		#oracle-manuscrit #union{background:url("img/oracle-le-manuscrit/union.png"); background-size:contain;}
		#oracle-manuscrit #voyage{background:url("img/oracle-le-manuscrit/voyage.png"); background-size:contain;}
		
		/* 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:absolute; margin-top:2px; right:25px; z-index: 1; height:65px; width:65px; background:firebrick; border-radius:50%; 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;}	
	}