/* Preloader */
#preloader {
	display:none;/*hide when no js*/
}

.jsSupport body {
	overflow:hidden;/*show when js is supported*/
	}

.jsSupport #preloader {
  display:block;/*show when js is supported*/
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#000; /* change if the mask should have another color then white */
	z-index:99; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/*
-----------Design Styles-----------
*/

html, body, .home .site {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

body {
	background-color: #000;
	color: #fff;
}

/*
-----------home-----------
*/
.home .site {
	background-image: url(../img/home-bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position:relative;
  overflow:hidden;
}

.home .logo {
	position: absolute;
	width: 100px;
  	left: 50%;
	top: 50%;
	margin: -50px 0 0 -50px;
	z-index: 991;
}

/*
 * Animation for webkit
*/
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
} 
 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
} 
 
/*
 * Adding the animation to our element
*/
.home .arrow-link {
	position: absolute;
	width: 26px;
  	left: 50%;
	bottom: 5%;
	margin: -13px 0 0 -13px;
	z-index: 990;
      -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
     -webkit-animation-name: bounce;
    animation-name: bounce;
     -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-iteration-count: infinite;
	}
	
.map-overlay {
	display: none;
}


.teaser-left {
	display: block;
	background:none;
	padding: 50px 0 50px 0;
}

.teaser-right {
	display: block;
	background:none;
	padding-bottom: 50px;
}

.teaser-left .text {
	margin: 0 auto;
	width: 80%;

}

.teaser-right .text {
	margin: 0 auto;
	width: 80%;
}

.submit-message {
    position: absolute;
    top:50%;
    text-align: center;
    width: 100%;
}

/*
-----------Folgeseiten-----------
*/

.site {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.header, .main-content {
	margin: 0 auto;
	width: 88%;
	padding: 0 6%;
	clear: both;
}

.header{
	min-height: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
}

.pt .header{
	background-image: url(../img/header_pt.jpg);
}

.fzf .header{
	background-image: url(../img/header_fzf.jpg);
}

.ueber-mich .header{
	background-image: url(../img/header_ueber-mich.jpg);
}

.kontakt .header{
	background-image: url(../img/header_kontakt.jpg);
}

.impressum .header{
	background-image: url(../img/header_impressum.jpg);
}

.header-content {
	margin-top:50%;
	width: 100%;
	clear: both;
}

.nav, .leistungen, .nav li, .leistungen li {
	margin:0;
	padding:0;
	list-style: none;
}

.nav {
	padding-top: 20px;
}

.nav .nav-link {
    margin-top: 22px;
	display:none;
}

.nav .nav-link a:hover {
    color:#009fe3;
}

.fzf .nav .nav-link a:hover {
    color:#e73f2c;
}

.nav .nav-active {
    display: none;
}

.nav .logo {
    width:100px;
}

input#open-menu {
	display: none;
	}
	
input[type=checkbox]:checked ~ .nav .nav-link {
display: block;
}

input[type=checkbox]:checked ~ .header-content {
margin-top: 18%;
}

.open-menu-label {
	position:absolute;
	width:20px;
	right:6%;
	top:20px;
	}

img.icon {
	width: 42px;
	margin: 0 8px 10px 0;
	float: left;
}

.footer {
    color: #808080;
	padding: 90px 0 60px 0;
}

.footer .logo {
    width: 130px;
}

.grid [class*='size'] { padding-bottom: 20px;}

.nav.grid li {
    padding-bottom: 0;
}

/*
-----------Kontaktformular-----------
*/

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea,
#contact-form button[type="submit"] {
	font:400 16px/16px 'HelveticaNeueETW01-65Md', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#contact-form {
	background:transparent;
	padding-right:6%;
	width: 94%;
}
#contact-form h3 {
	display:block;
}
#contact-form h4 {
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}
#contact-form label span {
	cursor:pointer;
	color:#fff;
	display:block;
	margin:5px 0;
	font-weight:900;
	display: none;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea {
	width:100%;
	border:3px solid #fff;
	background:transparent;
	margin:0 0 10px;
	padding:10px;
}
#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form input[type="tel"]:hover,
#contact-form input[type="url"]:hover,
#contact-form textarea:hover {
	background:#000;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#contact-form textarea {
	height:100px;
	max-width:100%;
}
#contact-form button[type="submit"] {
	cursor:pointer;
	width:100%;
	border: 3px solid #009fe3;
	color:#FFF;
	background-color:transparent;
	margin:0 0 5px 0;
	padding:15px;
	font-size: 16px;
}
#contact-form button[type="submit"]:hover {
	background-color: #009fe3;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#contact-form button[type="submit"]:active {
}
#contact-form input:focus,
#contact-form textarea:focus {
	outline:0;
}
::-webkit-input-placeholder {
    color:#fff;
}
:-moz-placeholder {
    color:#fff;
}
::-moz-placeholder {
    color:#fff;
}
:-ms-input-placeholder {
    color:#fff;
}


/*
-----------Typografie All-----------
*/
@font-face {
    font-family: 'Trim Bold';
    src: url('../fonts/TrimWeb-Bold.eot');
    src: url('../fonts/TrimWeb-Bold.eot?') format('embedded-opentype'),
    url('../fonts/TrimWeb-Bold.woff') format('woff'),
    url('../fonts/TrimWeb-Bold.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html {
	font-size: 62.5%; /*1.5rem = 15px :) */
	}

body {
	font-size: 1.6em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.5;
	font-family: 'HelveticaNeueETW01-65Md', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
	color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
 }

h1, h2, h3, h4, h5 {
    font-family: 'Trim Bold';
    font-weight: bold;
    font-style: normal;
	text-transform: uppercase;
	margin-top: 0;
	padding: 0;
	hyphens: none;
}

h1 {
	font-size: 3.8rem;
	line-height: 0.9;
	margin-bottom: 0;
    letter-spacing: -0.1rem;
}

h2 {
	font-size: 3.8rem;
	line-height: 0.9;
	margin-bottom: 10px;
    letter-spacing: -0.1rem;
}

h3 {
	font-size: 2.5rem;
	line-height: 0.9;
	margin-bottom: 10px;
    letter-spacing: -0.1rem;
}

h4 {
	font-size: 2.0rem;
	line-height: 1;
	margin-bottom: 10px;
}

p {
    font-size: 1.4rem;
    line-height: 1.6;
	margin: 0 0 15px 0;
	 -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: auto 5;
    hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-chars: auto 5;
    -ms-hyphenate-limit-lines: 2;
    -o-hyphenate-limit-chars: auto 5;
    -o-hyphenate-limit-lines: 2;
    -moz-hyphenate-limit-chars: auto 5;
    -moz-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-chars: auto 5;
    -webkit-hyphenate-limit-lines: 2;
}

.leistungen, .leistungen p, .footer, .footer p {
    font-size: 1.3rem;
	clear: both;
}

.nav {
    font-size: 1.3rem;
    line-height: 1.1;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

/*
-----------Links-----------
*/

a {
	color: #fff;
}

a:hover {
    text-decoration: none;
}

a.button {
	display: block;
	padding: 10px;
	text-align: center;
	border: 3px solid #fff;
	text-decoration: none;
}

.nav a {
    text-decoration: none;
}

.nav .link-active a {
    color: #009fe3;
}

.fzf .nav .link-active a {
    color: #e83f2d;
}

.teaser-left a.button {
	border: 3px solid #009fe3;
}

.teaser-right a.button {
	border: 3px solid #e83f2d;
}

.footer a {
    color: #808080;
}

/*	Tablte, Desktop-----------------------------------------------------	*/
@media only screen 
and (min-width: 750px) {
	
	/*
-----------Design Styles-----------
*/

.home {
	overflow:hidden;
	}

.home .logo {
	position: absolute;
	width: 200px;
  	left: 50%;
	top: 50%;
	margin: -100px 0 0 -100px;
	z-index: 991;
}

.home .arrow-link {
	display:none;
	}

.teaser-left {
	display: block;
	position: absolute;
	z-index: 99;
	top: 0;
	left: 0;
	padding: 0;
	background-image: url(../img/home-mask-left.png);
	background-repeat: no-repeat;
	background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	background-color: transparent;
}

.teaser-right {
	display: block;
	position: absolute;
	z-index: 99;
	top: 0;
	left: 0;
	padding: 0;
	background-image: url(../img/home-mask-right.png);
	background-repeat: no-repeat;
	background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	background-color: transparent;
}
	
.teaser-left .text {
	position: absolute;
	width: 20%;
  	left: 5%;
  	top: 20%;
	transform: translate(10%,-20%);
}

.teaser-right .text {
	position: absolute;
	width: 20%;
  	right: 10%;
  	top: 80%;
	transform: translate(10%,-80%);
}

	/*
-----------Folgeseiten-----------
*/

.header, .main-content {
	margin: 0 auto;
	width: 80%;
	padding: 0 10%;
}


.header{
	min-height: 100%;
	height: 100%;
	background-image: url(../img/personal-training_01.jpg);
	background-repeat: no-repeat;
	background-position: top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.header-content {
	position: absolute;
	bottom: 20px;
	width: 80%;
}
    
.nav {
    position: relative;
	padding-top: 60px;
    z-index: 9999;
}

.nav .logo {
    width:180px;
}

.nav .nav-link {
	display:block;
}

.nav .nav-active {
    display: block;
    position: absolute;
    top:77px;
    margin-left: 20px;
    width: 40px;
}

img.icon {
	width: 44px;
	margin: 2px 8px 15px 0;
	float: left;
}
    
label.open-menu-label {
	display:none;
	}
	
.qualifikationen, .leistungen {
	padding-top: 120px;
}

	
.qualifikationen {
	padding-left: 33.33333%;
	margin-left: 10px;
	}
	
.qualifikationen ul {
	margin: 0;
	padding: 0;
	}
	
.qualifikationen ul li {
	margin-left: 0;
	padding-left: 0;
	list-style-position:outside;
	}
	
	.impressum .copyright {
		margin-left: 33.33333%;
	}
	
.impressum p {
	font-size: 1.3rem;
	}
    
    /*
-----------Kontaktformular-----------
*/

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea,
#contact-form button[type="submit"] {
	font:400 16px/16px 'HelveticaNeueETW01-65Md', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#contact-form {
	background:transparent;
	padding-left:30px;
    padding-right: 30px;
	width: 66.66666%;
}
#contact-form h3 {
	display:block;
}
#contact-form h4 {
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}
#contact-form label span {
	cursor:pointer;
	color:#fff;
	display:block;
	margin:5px 0;
	font-weight:900;
	display: none;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea {
	width:100%;
	border:3px solid #fff;
	background:transparent;
	margin:0 0 10px;
	padding:10px;
}
#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form input[type="tel"]:hover,
#contact-form input[type="url"]:hover,
#contact-form textarea:hover {
	background:#000;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#contact-form textarea {
	height:100px;
	max-width:100%;
}
#contact-form button[type="submit"] {
	cursor:pointer;
	width:50%;
	border: 3px solid #009fe3;
	color:#FFF;
	background-color:transparent;
	margin:0 0 5px;
	padding:10px;
	font-size: 16px;
}
#contact-form button[type="submit"]:hover {
	background-color: #009fe3;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#contact-form button[type="submit"]:active {
}
#contact-form input:focus,
#contact-form textarea:focus {
	outline:0;
}
::-webkit-input-placeholder {
    color:#fff;
}
:-moz-placeholder {
    color:#fff;
}
::-moz-placeholder {
    color:#fff;
}
:-ms-input-placeholder {
    color:#fff;
}
	
	/*
-----------Typografie-----------
*/

h1 {
	font-size: 4.4rem;
	line-height: 0.9;
	margin-bottom: 20px;
}

h2 {
	font-size: 4.4rem;
	line-height: 0.9;
	margin-bottom: 20px;
}

h3 {
	font-size: 2.7rem;
	line-height: 0.9;
	margin-bottom: 15px;
}
    
p {
    font-size: 1.5rem;
     line-height: 1.6;
    margin-bottom: 15px;
    }

.home p {
	font-size: 1.4rem;
	margin: 0 0 20px 0;
}


.header-content h1 {
    text-align: right;
    font-size: 5.3vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
	margin-top: 4px;
}

.fzf .header-content h1 {
    text-align: right;
    font-size: 4.5vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
}
	
.ueber-mich .header-content h1 {
    text-align: right;
    font-size: 4.6vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
}
	
.kontakt .header-content h1 {
    text-align: right;
    font-size: 4.0vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
}
	
.impressum .header-content h1 {
    text-align: right;
    font-size: 4.6vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
}
    
.nav .link-active a {
    color: #fff;
}
    
.fzf .nav .link-active a {
    color: #fff;
}
	
/*
-----------Non-Semantic Helper Classes-----------
*/
.borderBox, 
  .grid,
  .grid:after,
  .grid:before,
  .grid [class*='size'],
  .grid [class*='size']:after,
  .grid [class*='size']:before,
  section
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
-----------Grid Formatting-----------
*/
.grid:after { content: ""; display: table; clear: both; }
.grid .size1of1 { float: none; }
.grid .size1of2 { width: 50%; }
.grid .size1of3 { width: 33.33333%; }
.grid .size2of3 { width: 66.66666%; }
.grid .size1of4-5 { width: 22.22222%; }
.grid .size1of4 { width: 25%; }
.grid .size3of4 { width: 75%; }
.grid .size1of5 { width: 20%; }
.grid .size2of5 { width: 40%; }
.grid .size3of5 { width: 60%; }
.grid .size4of5 { width: 80%; }
.grid .size1of6 { width: 16.6666666%; }
.grid .size5of6 { width: 83.3333333%; }
.grid .size1of7 { width: 14.2857143%; }
.grid .size2of7 { width: 28.5714286%; }
.grid .size3of7 { width: 42.8571429%; }
.grid .size4of7 { width: 57.1428572%; }
.grid .size5of7 { width: 71.4285715%; }
.grid .size6of7 { width: 85.7142858%; }
.grid .size1of8 { width: 12.5%; }
.grid .size3of8 { width: 37.5%; }
.grid .size5of8 { width: 62.5%; }
.grid .size7of8 { width: 87.5%; }
.grid [class*='size'] { float: left; }

/*
-----------Gutter Formatting-----------
*/
.grid { margin-left: -30px; }
.grid [class*='size'] { padding: 0 0 30px 30px;}
.size1of3:nth-of-type(4){
    clear: both;
}
}

/*
-----------Desktop-----------
*/
@media (min-width : 775px) {
	html, body, .home .site, .teaser-left, .teaser-right {
	width: 100%;
	height: 100%;
	min-height: 100%;
}
	
.map-overlay {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
  	left: 50%;
  	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 999;
}

.map-image {
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: 3;
}

map, img.map, .map-image, map area, .area-left, .area-right, a{
    outline:none !important;
}

.home .logo {
	position: absolute;
	width: 200px;
  	left: 50%;
	top: 50%;
	margin: -100px 0 0 -100px;
	z-index: 991;
}

.teaser-left {
	display: none;
}

.teaser-right {
	display: none;
}
	
.teaser-left .text {
	position: absolute;
	width: 20%;
  	left: 5%;
  	top: 50%;
	transform: translate(10%,-50%);
}

.teaser-right .text {
	position: absolute;
	width: 20%;
  	right: 10%;
  	top: 50%;
	transform: translate(10%,-50%);
}
	}

/*Desktop Portrait*/
@media only screen 
and (max-width : 950px)
and (min-height : 750px) { 
	.home .site {
	background-image: url(../img/home-bg_p.jpg);
}
.teaser-left .text {
	position: absolute;
	width: 25%;
  	left: 5%;
  	top: 20%;
	transform: translate(10%,-20%);
}

.teaser-right .text {
	position: absolute;
	width: 25%;
  	right: 10%;
  	top: 80%;
	transform: translate(10%,-80%);
}
}

@media only screen 
and (max-width : 1200px)
and (min-height : 1000px) { 
	.home .site {
	background-image: url(../img/home-bg_p.jpg);
}
.teaser-left .text {
	position: absolute;
	width: 25%;
  	left: 5%;
  	top: 20%;
	transform: translate(10%,-20%);
}

.teaser-right .text {
	position: absolute;
	width: 25%;
  	right: 10%;
  	top: 80%;
	transform: translate(10%,-80%);
}
}


/*Tablet Portrait*/
@media only screen 
and (max-width : 960px) 
and (min-width : 750px) { 
    
.home .site {
	background-image: url(../img/home-bg_ipad-p.jpg);
}
    
.teaser-left {
    position: static;
	background:none;
}

.teaser-right {
    position: static;
	background:none;
}

.teaser-left .text {
	position: absolute;
	width: 25%;
  	left: 5%;
  	top: 10%;
	transform: translate(10%,-10%);
    z-index: 999;
}

.teaser-right .text {
	position: absolute;
	width: 25%;
  	right: 10%;
  	top: 90%;
	transform: translate(10%,-90%);
    z-index: 999;
}
 
.header, .main-content {
	margin: 0 auto;
	width: 88%;
	padding: 0 6%;
	clear: both;
}
	
.header-content {
	position: absolute;
	bottom: 20px;
	width: 88%;
}
    
.header-content h1 {
    text-align: right;
    font-size: 5.9vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
	margin-top: 4px;
}

.fzf .header-content h1 {
    text-align: right;
    font-size: 5.0vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
}
	
.ueber-mich .header-content h1 {
    text-align: right;
    font-size: 5.2vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
}
	
.kontakt .header-content h1 {
    text-align: right;
    font-size: 4.5vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
}
	
.impressum .header-content h1 {
    text-align: right;
    font-size: 5.0vw;
    letter-spacing: -0.1rem;
    line-height: 0.8;
}
    
.leistungen .size1of3 {
    width: 50%; 
    }
    
.size1of3:nth-of-type(4){
    clear: none;
}
    .size1of3:nth-of-type(3){
    clear: both;
}
    .nav li a {
        font-size: 1.2rem;
        letter-spacing: 0;
    }
    
     .nav li.size1of6 {
         width: auto;
    }

    .footer p, .footer a {
    font-size: 1.2rem;
    }
   
}


/*Mobile Portrait*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 
	.home .site {
	background-image: url(../img/home-bg_p.jpg);
}
}

/*Desktop Big*/
@media (min-width : 1600px) {
    
.home .site {
	background-image: url(../img/home-bg-big.jpg);
}
    
.pt .header{
	background-image: url(../img/header_pt-big.jpg);
}

.fzf .header{
	background-image: url(../img/header_fzf-big.jpg);
}

.ueber-mich .header{
	background-image: url(../img/header_ueber-mich-big.jpg);
}

.kontakt .header{
	background-image: url(../img/header_kontakt-big.jpg);
}

.impressum .header{
	background-image: url(../img/header_impressum-big.jpg);
}
    
    
.about .header-content .size2of3 {
	   -webkit-columns: 2 450px;
    -moz-columns: 2 450px;
    columns: 2 450px;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}
    
 
}

@media (min-width : 1800px) {


.leistungen .size1of3 {
    width: 16.6666666%; 
    }
    
.leistungen h3 {
    font-size: 2.2rem;
    letter-spacing: 0;
    }
    
img.icon {
	width: 37px;
	margin: 0 8px 15px 0;
	float: left;
}
    
.size1of3:nth-of-type(4){
    clear: none;
}
    
.size1of3:nth-of-type(7){
    clear: both;
}
}