@charset "utf-8";
/* CSS Document */


@font-face {
font-family: "FantaisieArtistique";
src: url("fantaisieartistique/FantaisieArtistique.otf");
}

html{font-family:FantaisieArtistique;}



#page { max-width: 1600px; margin: 0 auto; position: relative; }
/* text */




a.nav {color: yellow;}
a.nav :visited { color: #65b1ff;}


	
	/* header */
	
	header { height: 630px; background: #62346E url("images/Pumpkin-Man-1600.jpg") no-repeat center bottom; position:relative; padding-top: 200px; background-position: center;}


header a.logo {
	z-index: 1;
	position: absolute; 
	display: block; width: 160px; height: 66px;
    background: url(images/logo.PNG) no-repeat 0 0; 
	background-size: contain; top: 15px; left: 20px;
}

header a.logo span{display: none;}

header div.hero{position: relative; width: 25%; top: 230px; left: 55%;
}
header div.hero h1{line-height: 1.2em; margin: 0px 0px 30px 0; color: white;white-space: nowrap; width: 300px;}

/* Aside */



/* Section -all*/

section{padding: 0px 0px;
background-color: #62346E;}


/* section - main */

section.main {max-width: 100%; margin-top: 20px; margin-bottom: 20px; flex-wrap: wrap; border: medium solid yellow; }



section.main aside {text-align: center; color: white; height: 1000px; padding: 0px,10px,0px,10px;} 

section.main aside h1 {position: relative; width: 100%; top: 0px; text-align: center; font-size: 50px; color: yellow;}


section.main aside p {font-size: 40px; text-align: center; width: 100%; margin-left: 0px; top: 10px;padding: 0px,10px,0px,10px; height: 50px}


/* 3d models */


section.atmosphere{background-color: #000000;  color: #060606;
}



/* Film/effects */

section.main blockquote { 
	 color: #FFFFFF; background-color: #000000;padding: 0px, 0px, 10px, 0px;  
}

section.atmosphere blockquote p.quote {font-style: italic; font-size: 2em; padding: 10px, 0px, 0px, 0px;}
section.atmosphere blockquote p.credit {color: #DFADE8; font-size: .9em; line-height: 1.3em; position: relative;}


section.atmosphere blockquote::before { content:'\201c'; color: 
#72A60C; position: absolute; top: 10px;  font-size: 5em;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";}

section.atmosphere blockquote p.quote::after { content:'\201d'; color: #72A60c; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif" }




p{ 
position: relative;
max-width: 100%;}


/*   navigation   */

nav { background-color: #62346E ; position: absolute;
	top: 0px; left: 0px; padding: 50px 0 0 0;
	width: 100%;
	font-size: 140%; }
nav::after { content:''; display: block; clear: both; }

nav ul { list-style: none; margin: 0; padding: 0;}

nav ul li:hover { background-color: #62346E; }
nav ul li:hover > ul { display: block;  }

nav ul li a { 
	display: inline-block;
	color: #FBFBFB;
	padding: 10px 20px;
	text-decoration: none;
	width: 125px;
	position: relative;
}
nav ul li a.nav {padding: 30px, 30px, 30px, 30px;}

nav ul li a:visited { color: yellow;}

nav ul li a:hover { background-color: #AD1BCD; }

nav ul ul { position: absolute; top: 100%; background-color: #62346E; display: none; }

nav ul ul li { position: relative; }

nav ul ul ul { left: 100%; top: 0px; }



/*    top-level     */
nav > ul { padding-left: 200px; }
nav > ul > li { float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 15px 20px;}


/*  footer   */

footer {font-size: .8em; margin: 40px; color: aqua;}
footer .content { display: inline; }

footer a { margin-left: 30px; color: aliceblue;  }
footer a:visited { margin-left: 30px; color: aliceblue;  }
footer a:hover { margin-left: 30px; color: yellowgreen;  }



html {
	background-color:  #260E2F;
}



	@media screen and (max-width : 850px ){
		
		header div.hero {max-width: 100%; left: 0px; top: 0px; text-align: center; padding: 0px;}
		header div.hero h1 {font-size: 50px; margin: 150px 0px 10px -150px; left: 0px; padding: 0px;}
		section.main aside{height: 1000px;}
	section.main aside h1{font-size: 50px; text-align: center; max-width: 100%;}
		
		section.main aside p {font-size: 30px;}
		
	
	
	
	
	header {height: 360px; background-image: url( "images/Pumpkin-Man-1000.jpg"); background-position: center; }
	
	nav {margin-left: 0px; margin-top: 30px; position: static; width: 100%; padding: 5px 0px 5px 0px; background-color: #62346E;}
	
	header div.hero {width: 300px; top: -50px; left: 330px; }
	header div.hero h5 {margin-bottom: 10px;}
	
	
		nav ul, nav ul ul, nav ul ul ul { display: block; position: static; }
	nav ul, nav ul ul, nav ul ul ul { display: block; position: static; }
		
		nav > ul { padding: 0;}
		nav > ul > li { float: none; margin-top: 25px;}

		
		nav ul li:hover {background: none;}

		nav ul li a { 
			width: auto;
		    display: block;
			margin: 8px 10px;
			padding: 8px 15px;
			border: 1px solid rgba(255, 255, 255,.25);
				
		}
		nav ul li a:hover {background-color: rgba(255,255,255,.2);}
		
		nav ul ul {background: none;}
		
		nav ul ul li a { margin-left: 30px; }
		nav ul ul ul li a { margin-left: 60px; }
}

	@media screen and ( max-width : 625px ){
	
	header { height: 110px; background-image: url( images/Great_sword_625.jpg); margin-bottom: 50px;}
		
		
		header div.hero h1 {font-size: 40px; margin: 0px 0px 0px -200px}
		
	section.main aside h1{font-size: 50px; text-align: center; margin-left: 50px; max-width: 100%;}
		section.main aside h2 {font-size: 30px;}
		section.main aside p {font-size: 30px;}
		
	
	h3 {margin-bottom: 0px; font-size: 2em;}
	
	
	header {height: 160px; background-image: url("images/Pumpkin-Man-600.jpg"); background-position: left top;}
	
	nav {margin-left: 0px; margin-top: 30px; position: static; width: 100%; padding: 5px 0px 5px 0px;}
	
	
	
	
	
		nav ul, nav ul ul, nav ul ul ul { display: block; position: static; }
	nav ul, nav ul ul, nav ul ul ul { display: block; position: static; }
		
		nav > ul { padding: 0;}
		nav > ul > li { float: none; margin-top: 25px;}

		
		nav ul li:hover {background: none;}

		nav ul li a { 
			width: auto;
		    display: block;
			margin: 8px 10px;
			padding: 8px 15px;
			border: 1px solid rgba(255, 255, 255,.25);
				
		}
		nav ul li a:hover {background-color: rgba(255,255,255,.2);}
		
		nav ul ul {background: none;}
		
		nav ul ul li a { margin-left: 30px; }
		nav ul ul ul li a { margin-left: 60px; }
}
		
@media screen and (max-width: 425px) {
	
	header { height: 120px; background-image: url("images/Pumpkin-Man-600.jpg"); background-position: center;}
	header a.logo { width: 250px; height: 50px; background: rgba(0,0,0,.65) url(images/FF_logo_small.jpg) no-repeat center center; background-size: 200px 25px; margin-left: 50px;}
	header div.hero {width: 100%; left: 0px; top: 0px;}
	header div.hero h1 {font-size: 35px; text-align: center; max-width: 100%; margin: 35px 0px 10px 40px; left: 0px;; padding: 0px;}
	header div.hero h5 {font-size: 30px; max-width: 100%; margin: 0px 0px 10px 60px; left: 0px;; text-align: center; color: white; padding: 10px 0px 0px 0px; bottom: 0px;}
	section.main aside h1{font-size: 50px; text-align: center; margin-left: 50px; max-width: 100%;}
		section.main aside h2 {font-size: 30px;}
		section.main aside p {font-size: 30px;}
		section.Info h3 {font-size: 15px; text-align: center;}
		section.Info h2 {text-align: center; max-width: 100%; font-size: 20px; margin-left: 0px;}
	h1 {font-size: 1em;}
	h3 {margin-bottom: 0px; font-size: 1em;}
	
	
	
	
	
 nav {margin-top: 10px; float: left; max-width: 100%; margin-left: 0px; position: static; background-color: #62346E; padding: 0px;}
		nav ul, nav ul ul, nav ul ul ul { display: block; position: static; }
		
		nav > ul { padding: 0;}
		nav > ul > li { float: none; margin-top: 25px;}

		
		nav ul li:hover {background: none;}
		
		nav ul li a { 
			width: auto;
		    display: block;
			margin: 8px 10px;
			padding: 8px 15px;
			border: 1px solid rgba(255, 255, 255,.25);
				
		}
		nav ul li a:hover {background-color: rgba(255,255,255,.2);}
		
		nav ul ul {background: none;}
		
		nav ul ul li a { margin-left: 30px; }
		nav ul ul ul li a { margin-left: 60px; }
	    
}