/*
Theme Name: metafox
Author: metafox Webagentur
Author URI: http://metafox-webagentur.de/
Description: A small and easy responsive Layout
Tags: responsive, blank
*/

/* FONTS */
@font-face {font-family: OpenSans; src: url('fonts/OpenSans-Regular.ttf') format('truetype');}

/* PRESETS */
* {margin: 0; padding: 0; position: relative; outline: none;}
html, body {height: 100%;}
img, iframe {max-width: 100%; height: auto; border: 0;}
a, a:hover, a:active, a:focus, a:visited {text-decoration: none; outline: none;}
a img {outline: none;}
.mobil {display: none;}
.clear {float: none; clear: both;}
body {font-family: OpenSans; background-color: #f8f8f8;}

body {background-image: url('images/hintergrund.jpg'); background-attachment: fixed; background-size: 100% auto; background-repeat: no-repeat;}

/* ESSENTIELS */
.header-wrapper-inner {padding: 1em 0;}
.header-wrapper-inner, .the-content {width: 60em; margin: 0 auto; position: relative;}
.header-wrapper-inner .navigation {width: auto; position: absolute; bottom: 1.5em; right: 1em; list-style: none;}
.header-wrapper-inner .navigation li {float: left; margin-right: 1em;}
.header-wrapper-inner .navigation li a {font-size: 1.125em; color: #df521e; font-weight: bold;}
.header-wrapper-inner .logo {float: left; width: 22em; height: auto; display: block; margin-left: 1em;}

#header-wrapper ul.navigation li a:hover, #header-wrapper ul.navigation li a:active, #header-wrapper ul.navigation li a:focus, #header-wrapper ul.navigation li.current_page_item a {text-decoration: underline}

.header-wrapper-inner {background-color: #fff;}
.the-content {background-color: #eee;}

.contact-data i {width: 1em; text-align: center;}
.contact-data {color: #333;}
.contact-data a {color: #333;}
.contact-data a:hover, .contact-data a:active, .contact-data a:focus {text-decoration: underline;}
.contact-data {position: absolute; right: 2em; top: 2em; border: 1px solid #df521e; padding: 1em;}
.contact-data h3 {color: #df521e; margin-bottom: 0.5em; text-align: center;}

#header-wrapper {margin-top: 1em;}
#page-wrapper {margin-bottom: 3em;}
#outer-pagewrapper {box-shadow: 0.125em 0.25em 0.5em #333; width: 60em; margin: 0 auto;}

.the-text {padding: 1em 2em;}
.the-text h1 {color: #df521e; font-size: 1.65em; margin-bottom: 0.65em; text-align: center; border-bottom: 1px solid; padding-bottom: 0.5em; border-top: 1px solid; padding-top: 0.5em;}
.the-text h2 {color: #df521e; font-size: 1.5em; margin-bottom: 0.5em; padding: 0;}
.the-text h3 {color: #333; font-size: 1.25em; margin-bottom: 0.25em; border-left: 1.25em solid #ffb783; padding-left: 0.5em;}
.the-text h4 {color: #df521e; font-size: 1.125em; margin-bottom: 0.25em; padding: 0;}
.the-text h5 {color: #df521e; font-size: 1em; margin-bottom: 0.25em; padding: 0;}
.the-text h6 {color: #df521e; font-size: 1em; margin-bottom: 0.25em; padding: 0;}
.the-text p {color: #333; font-size: 1em; margin-bottom: 1em; padding: 0; line-height: 1.75em;}
.the-text a {color: #df521e;}
.the-text a:hover, .the-text a:active, .the-text a:focus {text-decoration: underline;}
.the-text ul li a {margin-bottom: 0.25em; font-size: 1em; color: #333;}
.the-text ul li {margin-bottom: 0.25em; color: #333;}
.the-text ul {margin-bottom: 2em; margin-left: 1em;}
.the-text img.alignleft {float: left; width: 48%; margin-right: 1em; margin-bottom: 1em;}
.the-text img.alignright {float: right; width: 48%; margin-left: 1em; margin-bottom: 1em;}

a.action-button {background-color: #df521e; color: #fff; padding: 1em; display: inline-block; margin-bottom: 1em; border: 1px solid #df521e; margin-right: 1em;}
a.action-button i {margin-right: 0.5em;}
a.action-button:hover, a.action-button:active, a.action-button:focus {background-color: #fff; color: #df521e;}

/* MOBIL PRESETS */
.mobil {display: none;}
#mobil-navigation-top {text-align: center; background-color: #df521e;}
#mobil-navigation-top a {color: #fff; display: inline-block; font-size: 1.75em; margin: 0 0.125em; padding: 0.5em;}
#to-top-button {text-align: center; background-color: #df521e;}
#to-top-button a {color: #fff; display: inline-block; font-size: 1.75em; margin: 0 0.125em;	padding: 0.5em;}
#mobil-navigation-bottom h2 {color: #fff; background-color: #df521e; font-size: 1.25em; text-transform: uppercase; padding: 1em; text-align: center; margin-top: 0; margin-bottom: 0; border-bottom: 1px solid #000; border-top: 1px solid #000;}
#mobil-navigation-bottom ul.navigation li.page_item a {padding: 1em 2em; background-color: #999; color: #fff; display: block; border-bottom: 1px solid #000;}
#mobil-navigation-bottom ul.navigation li.current_page_item a, #mobil-navigation-bottom ul.navigation li.page_item a:hover, #mobil-navigation-bottom ul.navigation li.page_item a:active, #mobil-navigation-bottom ul.navigation li.page_item a:focus {background-color: #eee; color: #333;}
#mobil-navigation-bottom ul.navigation ul.children li a {font-size: 0.875em; padding-left: 3em; background-color: #21c2f3;}

@media only screen and (min-width : 12.5em) and (max-width : 60em)
{
	/* RESETS */
	.mobil {display: block;}
	#outer-pagewrapper, .header-wrapper-inner,.the-content {width: auto;}
	#header-wrapper, #page-wrapper {margin: 0 auto;}
	.header-wrapper-inner .logo {float: initial; width: 22em; height: auto; display: block; margin: 0 auto;	max-width: 80%;}
	.the-text img.alignright, .the-text img.alignleft {float: none; width: 100%; margin-left: initial; margin-top: 1em; margin-bottom: 0;}
	
	/* HIDE OUTS */
	.contact-data, #header-wrapper .navigation {display: none;}
}
