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

/* PARALAX LAYOUT */
body, html {height: 100%; margin: 0; position: relative;}
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7  {position: relative; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.bgimg-1 {background-image: url("/wp-content/uploads/sabine-liebald-home.jpg"); min-height: 100%;}
.bgimg-2 {background-image: url("/wp-content/uploads/sabine-liebald-training.jpg"); min-height: 100%;}
.bgimg-3 {background-image: url("/wp-content/uploads/sabine-liebald-leistungen.jpg"); min-height: 100%;}
.bgimg-4 {background-image: url("/wp-content/uploads/sabine-liebald-impressum.jpg"); min-height: 100%;}

.content img {max-width: 100%;}


/* PAGE */
* {font-family: 'Open Sans Condensed', sans-serif;}
html {font-family: 'Open Sans Condensed', sans-serif; margin: 0 auto; padding: 0; border: none;}
a, a:hover, img {border: none; text-decoration: none; outline: none;}
.clear {float: none; clear: both;}
#top-wrapper {width: 100%; top: 0; left: 0; z-index: 99999;position: fixed; background-image: url(https://2000-hertz.de/wp-content/themes/metafox/images/heaer-full.png); background-position: center;}
.navigation {width: 60em; margin: 0 auto;}
.navigation ul {margin: 0; padding: 0; padding: 1.5em 0;}
.navigation ul li {list-style: none; float: right; text-transform: uppercase;}
.navigation ul li a {color: #fff; padding: 1em; display: block; position: relative; text-transform: uppercase; font-size: 1.5em; }
.navigation ul li a:hover::before {color: #d0d734; width: 0.5em; height: 0.5em; display: block; content: ''; background-color: #d0d734; position: absolute; top: 0; border-radius: 2px; left: 40%; font-weight: bold;}
.navigation ul li a:focus::before {color: #d0d734; width: 0.5em; height: 0.5em; display: block; content: ''; background-color: #d0d734; position: absolute; top: 0; border-radius: 2px; left: 40%; font-weight: bold;}
.navigation ul li a.active::before {color: #d0d734; width: 0.5em; height: 0.5em; display: block; content: ''; background-color: #d0d734; position: absolute; top: 0; border-radius: 2px; left: 40%; font-weight: bold;}
.navigation ul li a.active {font-weight: bold;}
#top-navigation {position: relative; height: 12em;}
.logo {width: 35.5em; height: auto; display: block; text-align: right; float: right; /*padding-bottom: 1.25em;*/}

#to-bottom-icon {position: absolute; bottom: -1.5em; width: 100%; margin: auto; text-align: center; z-index: 9999; left: 0;}
#to-bottom-icon a {display: block;}
#to-bottom-icon-wrapper {position:relative;}
#to-top-icon {margin-top: -2em;}
#to-top-icon img {width: 2.5em; height: auto; transform: rotate(180deg);}
#to-bottom-icon img {width: 2.5em; height: auto; display: none;}

.caption-wrapper {width: 100%; padding: 1em 0; text-align: left; display: block; bottom: 0; position: absolute; background-color: rgba(0, 0, 0, 0.45); color: #fff;}
.caption-wrapper .caption {margin: 0 auto; width: 60em; line-height: 1.5em; font-weight: bold;}
.caption-wrapper .caption h1, .caption-wrapper .caption h2 {text-transform: uppercase; padding-left: 14em; font-size: 1em;}
.caption-wrapper .caption h1 span, .caption-wrapper .caption h2 span {font-size: 2em;}
.caption-wrapper .caption .caption-small {font-size: 1.875em; font-weight: lighter; padding-left: 7.35em; padding-bottom: 0.5em;}
.bgimg-7 .caption-wrapper .caption h2 span {font-size: 1.75em;}

.caption-wrapper.home {padding: 2em 0;}

.spacer {display: block; margin-bottom: 2em;}
.small-spacer {display: block; margin-bottom: 3em;}
.text-spacer {display: block; margin-bottom: 3em;}
.padding-left-in-table {padding-left: 2em;}
.uppercase-in-table {text-transform: uppercase; padding-left: 0.25em; color: #80aa1a;}
table, table tr, table tr td {color: #333;}
table tr td {padding: 0.65em 0; vertical-align: top;}
table tr td:first-child {padding-right: 2em;}

.content {margin: 0 auto; width: 60em;}
.content h2 {color: #d0d734; text-transform: uppercase; font-size: 1.75em; font-weight: bold; margin-left: -1em; letter-spacing: 1px;}
.content h3 {color: #d0d734; text-transform: uppercase; font-size: 1.35em; font-weight: bold; margin-left: 0; letter-spacing: 1px;}
.content h3.dark {color: #333; font-weight: bold; margin-left: 0; letter-spacing: 1px;}
.content h3.smaller-space {margin-bottom: 0;}

.content p {color: #333; line-height: 1.75em; font-size: 1.25em; padding: 0; margin: 0; margin-bottom: 1em;}
.content table  {font-size: 1.125em; margin-bottom: 1em;}
.content ul  {margin-bottom: 2em; padding: 0 0 0 1em; list-style: none;}
.content ul.no-margin  {margin-bottom: 0;}

.content table ul.no-margin  {margin: 0; font-size: 1em;}
.content table.leistungen {margin: 0; padding: 0; font-size: 1.25em; margin-left: 1em;}
.content table.leistungen ul.no-margin {margin: 0; padding: 0; font-size: 0.75em;}

.content ul li  {color: #333; padding-left: 0.5em; line-height: 1.75em; font-size: 1.25em; margin-bottom: 0.5em;}
.leistungen ul li  {padding: 0; margin: 0;}
.content ul li::before {content: "+"; color: #d0d734; display: inline-block; width: 1em; margin-left: -1em; font-size: 1.25em; vertical-align: middle; font-weight: bold;}
.content .datenschutz ul li::before {content: ""; display: initial; width: initial; margin-left: initial; font-size: initial; vertical-align: initial;} 
.content ul li ul li {list-style: disc; font-size: 1em;}
/*.content ul li h4:before {color: #80aa1a; width: 0.75em; height: 0.75em; display: block; content: ''; background-color: #6e6e6d; border-radius: 1em; margin: 0.5em 0.5em; float: left; background-color: #80aa1a; margin-left: 0;}*/
.content-padding {padding: 4em 0 4em 27em; position: relative;}

.content a {color: #333; border-bottom: 2px solid #d0d734;}
.content a:hover, .content a:active, .content a:focus {color: #d0d734; border-bottom: 2px solid #333;}


/*img.portrait-2 {position: absolute;	left: 0; top: 5.25em;}*/
img.portrait-2 {float: right; padding: 0em 0em 1em 1em; width: 20em; height: auto;}
img.footer-logo {position: absolute; left: 0; top: 3em; width: 13em; display: block; height: auto;}

.kontakt table,.kontakt table tr, .kontakt table tr td {color: #fff;}
.kontakt table tr td {padding: 0;}

.content-wrapper.kontakt {background-color: #80aa1a; color: #fff;}
.content-wrapper.kontakt {color: #fff;}
.content-wrapper.kontakt p {color: #fff;}
.content-wrapper.kontakt h2 {color: #fff;}
.content-wrapper.kontakt a, .content-wrapper.kontakt a:hover, .content-wrapper.kontakt a:active, .content-wrapper.kontakt a:focus {color: #fff;}

.picture-area img {float: left; text-align: left; height: 6em; width: auto;}
.picture-area img.last {float: right;}
.picture-area img {max-width: 100%; margin-bottom: 2em;}

.footer-wrapper {background-color: #6e6e6d; color: #fff;}
.footer-wrapper p {color: #fff;}
.footer-wrapper a, .footer-wrapper a:hover, .footer-wrapper a:active, .footer-wrapper a:focus {color: #fff; opacity: 1; border-bottom: 0;}
.footer-wrapper .content-padding {padding: 1em; text-align: center; position: relative;}

.grey {color: #666 !important;}
.green {color: #80aa1a !important;}
.italic-font {font-style: italic;}
.small {font-size: 0.875em;}
.icon {background-color: #80aa1a; height: 2em; width: 2em; text-align: center; border-radius: 2em; background-color: #80aa1a; height: 1.5em;
width: 1.5em; text-align: center; border-radius: 2em; display: block; color: #fff !important;}
.line-height-1em {line-height: 1em;}

.info-message {background-color: #eee; padding: 1em; margin: 1em 0;}
.info-message h3 {margin: initial;}

#mobilt-top-navigation {position: fixed; top: 0; right: 0; z-index: 99999;}
#mobilt-top-navigation i {color: #d0d734; padding: 0.5em; font-size: 1.75em; cursor: pointer; display: block; background-color: #6e6e6d;}
#mobil-navigation-bottom {position: fixed; right: 3.25em; top: 0; width: 100%; height: 100%; background-color: rgba(102, 102, 102, 0.90); z-index: 999999; overflow: hidden;}
#mobil-navigation-bottom img {text-align: left; margin: initial; padding: 4em 6.5em;}
#mobil-navigation-bottom ul {list-style: none; margin: 0; padding: 0; border-top: 1px solid #fff; margin-top: 7em;}
#mobil-navigation-bottom ul li a {text-transform: uppercase; color: #fff; font-size: 1.5em; border-bottom: 1px solid #fff; display: block; padding: 0.75em 5.5em; position: relative;}
#mobil-navigation-bottom ul li a:hover, #mobil-navigation-bottom ul li a:active, #mobil-navigation-bottom ul li a:focus, #mobil-navigation-bottom ul li a.active {color: #fff; font-weight: bold;}
#mobil-navigation-bottom ul li a span {color: #80aa1a; width: 0.75em; height: 0.75em; display: block; content: ''; background-color: #80aa1a; border-radius: 1em; margin: 0.35em 1em; float: left;}
#mobil-navigation-bottom ul li a:hover span, #mobil-navigation-bottom ul li a:active span, #mobil-navigation-bottom ul li a:focus span, #mobil-navigation-bottom ul li a.active span {background-color: #80aa1a;}
#mobil-navigation-bottom #logo {width:62%; max-width: 32em;}

#mobil-navigation-bottom ul li a:hover::before {color: #d0d734; width: 0.5em; height: 0.5em; display: block; content: ''; background-color: #d0d734; position: absolute; top: 1.25em; border-radius: 2px; left: 4.5em; font-weight: bold;}
#mobil-navigation-bottom ul li a:focus::before {color: #d0d734; width: 0.5em; height: 0.5em; display: block; content: ''; background-color: #d0d734; position: absolute; top: 1.25em; border-radius: 2px; left: 4.5em; font-weight: bold;}
#mobil-navigation-bottom ul li a.active::before {color: #d0d734; width: 0.5em; height: 0.5em; display: block; content: ''; background-color: #d0d734; position: absolute; top: 1.25em; border-radius: 2px; left: 4.5em; font-weight: bold;}

.mobil {display: none;}

.picture-area .left {float: left; width: 59%;}
.picture-area .right {float: right; width: 27%;}

.picture-area .left img {width: 100% !important; height: auto; max-height: initial;}
.picture-area .right img {width: 100% !important; height: auto; max-height: initial;}

.copyright {font-size:1.125em !important; padding-top: 1em !important;}

/* Turn off parallax scrolling for tablets and phones #80aa1a */
@media only screen and (max-device-width: 65em) {
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7 {background-attachment: scroll;}
    .bgimg-1 {background-position: right top;}
    .copyright {padding-top: 1em !important;}
}

@media only screen and (min-width : 12.5em) and (max-width : 65em)
{	
	
	.content-padding {padding: 2em 4em;}
	img.footer-logo {position: relative; top: initial; left: initial; margin-bottom: 1em;}
	.caption-wrapper .caption, .content {width: auto;}
	.caption-wrapper .caption .caption-small {padding-left: 1.35em; font-size: 1.5em;}
	.caption-wrapper .caption h1, .caption-wrapper .caption h2 {padding-left: 2em;}
	.content p {max-width: 38em;}
}

@media only screen and (min-width : 12.5em) and (max-width : 60em)
{
	/* GENERAL RESETS */
	.mobil {display: block;}
	.logo {max-width: 100%;}
	
	#mobil-navigation-bottom {display: none;}
	
	#top-wrapper, #to-bottom-icon-wrapper {display: none;}
	
	#logo-wrapper {bottom: initial; top: 2em;}
	.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7  {min-height: 28em;}
	/*.bgimg-1 {background: initial; background-color: #2B2B2B;}*/
	/*.caption-wrapper .caption h1, .caption-wrapper .caption h2, .caption-wrapper .caption p {padding: 0 1em; text-align: center;}*/
	
	.content-padding {padding: 0;}
	.content {padding: 2em;}
	
	.content h2, .content h3 {margin: initial; margin-bottom: 0.75em;}
	.content img {margin-bottom: 1em;}
	
	.line-height-1em {line-height: initial;}
	.footer-wrapper {height: initial;}
	.footer-wrapper .content {padding: 0;}
	
	
	table {width: 80%;}
	table tr td {padding: 0.25em 0;}
	/*#mobil-navigation-bottom #logo {width:40%;}*/
	.caption-wrapper.home {padding: 1em 0;}
	img.portrait-2 {width: 50%;}
	
	.kontakt table tr td {padding: 0.5em 0em; vertical-align: top;}
	.kontakt table {margin-top: 1.5em;}
	
}

@media only screen and (min-width : 12.5em) and (max-width : 48em)
{
	.picture-area {margin-top: 2em;}
	.picture-area img, .picture-area .left img, .picture-area .right img {float: left !important; width: 100% !important; height: auto !important; margin: initial !important; margin-bottom: 4em !important;}
	.picture-area .left, .picture-area .right {width: auto;}
	.picture-area .spacer {display: none;}
	.picture-area .clear {float: left; clear: initial !important;}
	
	.picture-area img.desktop {display: none;}
	
}

@media only screen and (min-width : 12.5em) and (max-width : 28.75em)
{
	#mobil-navigation-bottom {font-size: 70%;}
	#mobilt-top-navigation i {font-size: 120%;}
	.content-wrapper {font-size: 80%;}
	
	.picture-area {margin-top: 2em;}
	.picture-area img, .picture-area .left img, .picture-area .right img {float: left !important; width: 100% !important; height: auto !important; margin: initial !important; margin-bottom: 3em !important;}
	.picture-area .left, .picture-area .right {width: auto;}
	.picture-area .spacer {display: none;}
	.picture-area .clear {float: left; clear: initial !important;}
	
	.caption-wrapper {word-wrap: break-word;}
	table tr td {display: block;}
	table.no-break tr td {display: table-cell; padding-bottom: 1em;}
	
	table {margin-bottom: 1em !important;}
	
}

@media only screen and (min-width : 12.5em) and (max-width : 19.25em)
{
	#mobil-navigation-bottom {font-size: 50%;}
	#mobilt-top-navigation i {font-size: 90%;}
	table tr td {position: relative !important;}
	.content-wrapper {font-size: 70%;}
	
	.picture-area {margin-top: 2em;}
	.picture-area img, .picture-area .left img, .picture-area .right img {float: none !important; width: 100% !important; height: auto !important; margin: initial !important; margin-bottom: initial; margin-bottom: 2em !important;}
	.picture-area .left, .picture-area .right {width: auto;}
	.picture-area .spacer {display: none;}
	.picture-area .clear {float: left; clear: initial !important;}
	
	.caption-wrapper {word-wrap: break-word;}
	
	
	
	
}

.no-margin {margin: initial;}