@font-face {
    font-family: 'specialelite';
    src: url('/fonts/special_elite_sv/specialelite-webfont.eot');
    src: url('/fonts/special_elite_sv/specialelite-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/special_elite_sv/specialelite-webfont.woff2') format('woff2'),
		 url('/fonts/special_elite_sv/specialelite-webfont.woff') format('woff'),
         url('/fonts/special_elite_sv/specialelite-webfont.ttf') format('truetype'),
         url('/fonts/special_elite_sv/specialelite-webfont.svg#specialelite') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media only screen {

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
	b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, 
	output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; vertical-align:baseline; }
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
	html, body { height:100%; }
	body { font:normal normal normal medium/1.25 'Trebuchet MS', Helvetica, sans-serif; color:#000; background:#fff url(../images/bg-768.jpg) center 50px no-repeat; text-align:left; }
	body#jazzfinger { background-image:url(../images/bg-jazzfinger.jpg); background-color:#a4a7a4;}
    body#roots { background-image:url(../images/W2bg.jpg); background-color:#000000; color:#fff;}
    body#blod { background-image:url(../images/bg-blod.jpg); background-color:#000000; color:#fff;}
	body#magi { background-image:url(../images/bg-magi.jpg); background-color:#000000; color:#fff;}
	ul { list-style:disc outside none; padding-left:1em; }
	ol { list-style:decimal outside none; padding-left:1.5em; }
	ul, ol { text-align:left; margin:auto 1em 1em 1em; }
	blockquote, q { quotes:none; margin-left:1.5em; }
	blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
	table { border-collapse:separate; border-spacing:0; width:100%; }
	strong { font-weight:bold; font-style:normal; }
	em { font-weight:normal; font-style:italic; }
	sup, sub { vertical-align:baseline; position:relative; top:-0.4em; font-size:0.75em; }
	sub { top:0.4em; }

	a { text-decoration:none; }
	a:link { color:#C21900; }
	a:visited { color:#A71900; }
	a:hover { color:#C21900; text-decoration:underline; }
	a:active { color:#A71900; }
	h1, h2, h3, h4 { font-family:'specialelite', serif; }
	h1, h2, h3, h4, h5, h6 { text-align:left; }
	h1 { font-size:2.0em; margin:0 0 1em 0; }
	h2 { font-size:1.75em; margin:0 0 1em 0; text-align:center; }
	h3 { font-size:1.5em; margin:1em 0; }
	h4 { font-size:1.125em; margin:1em 0; }
	h5 { font-weight:bold; margin:1em 0; }
	h6 { font-style:italic; margin:1em 0; }
	p { margin:0 0 1em 0; }
	hr { display: block; height:1px; width:7em; border:0; border-top:1px solid #000; margin:2em auto; padding:0; }

	.container { margin:0 auto -6.5em auto; width:100%; min-height:100%; }
	.container:after { content:""; display:block; }
	.footer, .container:after { height:6.5em; /* push must be the same height as footer */ }
	.footer { clear:both; width:100%; margin:0; color:#838383; }
	.footer p { padding:2.5em 0 0 0; text-align:center; }
	.content { margin:0 auto; padding:0 1.25em; }
	.nav-wrapper { width:100%; background-color:#252525; border-bottom:1px solid #A71900; }

	.logo img { display:block; margin:40px auto; }
	.header-image img { display:block; margin:0 auto 4em auto; }

	.main-nav { background: #252525; }
	.main-nav:after { clear:both; content:"\00a0"; display:block; height:0; font:0px/0 serif; overflow:hidden; }
	.nav-home { float:left; margin:0; }
	.nav-home a { display:block; padding:10px 10px 10px 20px; color:#fff; font-size:22px; font-weight:normal; line-height:29px; text-decoration:none; }
	#main-menu { clear:both; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }
	/* Mobile menu top separator */
	#main-menu:before { content:''; display:block; height:1px; font:1px/1px sans-serif; overflow: hidden; background:#A71900; }
	/* Mobile menu toggle button */
	.main-menu-btn { float:right; margin:10px; position:relative; display:inline-block; width:29px; height:29px; text-indent:29px; white-space:nowrap; overflow:hidden; cursor:pointer; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
	/* hamburger icon */
	.main-menu-btn-icon,
	.main-menu-btn-icon:before,
	.main-menu-btn-icon:after { position:absolute; top:50%; left:2px; height:2px; width:24px; background:#fff; -webkit-transition:all 0.25s; transition:all 0.25s; }
	.main-menu-btn-icon:before { content:''; top:-7px; left:0; }
	.main-menu-btn-icon:after { content:''; top:7px; left:0; }
	/* x icon */
	#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon { height:0; background:transparent; }
	#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before { top:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
	#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after { top:0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	/* hide menu state checkbox (keep it visible to screen readers) */
	#main-menu-state { position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); }
	/* hide the menu in mobile view */
	#main-menu-state:not(:checked) ~ #main-menu { display:none; }
	#main-menu-state:checked ~ #main-menu { display:block; }

}

@media only screen and (min-width: 700px) {
	.content { max-width:700px; }
	
}

@media only screen and (min-width: 768px) {
	  
	body { background-image:url(../images/bg.jpg); text-align:justify; }
	body#jazzfinger { background-image:url(../images/bg-jazzfinger.jpg); }
	.main-nav { max-width:740px; margin:0 auto; }

	/* hide the hamburger-button in desktop view */
	.main-menu-btn { position: absolute; top: -99999px; }
	/* always show the menu in desktop view */
	#main-menu-state:not(:checked) ~ #main-menu { display: block; }
	#main-menu { float:right; clear:none; }
	#main-menu:before { display:none; }
	
}