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

/*======================================================
Stylesheet für Sport Fusion 
Stand: 31.05.2016
Datei:stylesheet
Datum:31.05.2016
Autor: Anna Zellmann

	Aufbau: 1. Kalibrierung und Restauration
		    2. Allgemeine Styles
		    3. Styles für Layoutbereich
		    4. Sonstige Styles
			5. media queries
======================================================*/


/* ===================================
	     1. Kalibrierung und Restauration
	   =================================== */
	   
	   *{		/* Margin und Padding auf alle Elemente auf 0 setzten*/
	margin:0;
	padding:0;
}


*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(../scripts/boxsizing.htc);
} 

/* ===================================
	     2. Allgemeine Styles
	   =================================== */ 
html, body {
	color: #777877;
	font-size: 100%;
	font-size: 1.033em;  
	font-family:helvetica,arial, san-serif;
	line-height: 1.5em;
	background-color: #eceded;
	height:100%;
}

body li{
	list-style: none;
	}

h1 {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.375em;
	font-weight: normal;
	color: black;
	}
	
h2 {
	font-weight: bold;
	font-size: 1.063em;
	}

h3 {
	font-weight: bold;
	font-size: 1.033em;

}
	
img{
width:100% !important;
height:auto !important;
display:block;
}
  
/* ===================================
	     3. Styles für den Layoutbereich
	   =================================== */
	   
#container {
	position:relative;
	max-width: 1000px;
	margin: 0 auto;
	min-height: 100%; /* Mindesthöhe für moderne Browser */
	height:auto !important; /* Important Regel für moderne Browser */
	height:100%; /* Mindesthöhe für den IE */
	background-color: white;
	}
	
/* HEADER*/
	
#logo {
	background-image: url(../img/sf_logo.svg);
	background-repeat:no-repeat;
	background-size: contain;
	width: 261px;
	height: 6.125em;
	margin: 0 auto;
	margin-bottom: 1.063em;
	}
	
	
	
#text_header {
	width: 100%;
	background-color: #0ba1e2;
	color: white;
	text-align:center;
	font-family: 'Exo 2', sans-serif;
	font-size: 1em;
	font-weight: normal;
	padding:1.125em; 
	}
	
#pano_home {
	width: 100%;
	height: 12.5em;
	background-image: url(../img/pano_home.jpg);
	background-position: center top;
	background-origin: content-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	}
	
#pano_ueber_mich {
	width: 100%;
	height: 12.5em;
	background-image: url(../img/pano_impressum.jpg);
	background-position: center top;
	background-origin: content-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	}
	
#pano_konzept {
	width: 100%;
	height: 12.5em;
	background-image: url(../img/pano_konzept.jpg);
	background-position: center top;
	background-origin: content-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	}
	
#pano_leistung {
	width: 100%;
	height: 12.5em;
	background-image: url(../img/pano_leistung.jpg);
	background-position: center top;
	background-origin: content-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	}
	
	
#pano_studio {
	width: 100%;
	height: 12.5em;
	background-image: url(../img/pano_studio.jpg);
	background-position: center top;
	background-origin: content-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	}
	
#pano_partner {
	width: 100%;
	height: 12.5em;
	background-image: url(../img/pano_partner.jpg);
	background-position: center top;
	background-origin: content-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	}
	

	
#pano_kontakt {
	width: 100%;
	height: 12.5em;
	background-image: url(../img/pano_kontakt.jpg);
	background-position: center top;
	background-origin: content-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	}
	
#pano_impressum {
	width: 100%;
	height: 12.5em;
	background-image: url(../img/pano_uebermich.jpg);
	background-position: center top;
	background-origin: content-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	}
		
	
/*Menü*/

#button {
	background-color: #777877;
	padding: 0.875em 0;
	cursor: pointer;
	}
	
	
#menue {
	width: 100%;
	font-family: 'Exo 2', sans-serif;
	text-align:center;
	font-weight: 300;
	font-size: 1.155em;
	color: white;
	margin-top:1.06em;
	}
	
#slidedown {
	margin-left: 0px;
	}

#slidedown li {
	background-color: #9c9d9d;
	padding: 0.875em 0;
	border-bottom: solid 1px white;
	list-style: none;
	}
	
#menue .punkt_fest {
	color: #abd2f4;
	}
	
#slidedown a:link {
	text-decoration: none;
	color: white;
	}
	
#slidedown a:visited {
	text-decoration: none;
	color: white;
	}
	
#slidedown a:hover {
	text-decoration: none;
	color: #abd2f4;
	}
	
/*Inhalt*/

#inhalt_container {
	background-image:url(../img/kreise.png);
	background-repeat:no-repeat;
		}
	   
#inhalt_text {
	margin: 0 auto;
	width: 81%;
	}	   
	   
#btp_logo_container {
	width: 100%;
	}

#btp_logo {
	width: 211px;
	margin: 9% 0 18% 0;
	}

/* ===Unterpunkte auf Startseite===*/
	
.unterpunkte{			
	width: 81%;
	margin-bottom: 2.938em;
	}
	
.unterpunkte a:link{
	color: #777877;
	text-decoration: none;
	}
	
.unterpunkte a:visited{
	color: #777877;
	text-decoration: none;
	}
	
.unterpunkte a:hover{
	color: black;
	text-decoration: none;
	}
	
.hl_unterpunkte {
	width: 100%;
	padding-bottom: 10px;
	border-bottom: solid 2px #0ba1e2;
	}
	
.abstandshalter {
	display: none;
	width: 17%;
	height: 100px;
	float:left;
	}
	
#rechner {
	display: none;
	}
	
/* ===================================
	    Über mich
	   =================================== */	
	   
.bild {
	width: 236px;
	margin-bottom: 1.875em;
	}
	
#bild_marko {
	width: 236px;
	margin-bottom: 1.875em;
	}

.bild_text {
	width:100%;
	}
/* ===Vita Liste===*/	
		
.liste_links {
	width: 100%;
	font-weight: bold;
	}
	
.liste_rechts{
	width: 100%;
	}
	
.liste_drunter {
	width: 100%;
	}
	
.abstand_liste_unten {
	margin-bottom: 0.625em;;
	}
/* ===Qualifikationen Liste===*/
	
.liste_quali li{
	margin-bottom: 0.625em;
	}

.team_link a:link{
	color: #0ba1e2;
	text-decoration: none;
}

.team_link a:visited{
	color: #0ba1e2;
	text-decoration: none;
}

.team_link  a:hover{
	color: #777877;
	text-decoration: none;
}

.team-mobile a:link{
	color: #777877;
	text-decoration: none;
}
	
/* ===================================
	    Konzept
	   =================================== */	
.bilder{
	font-family: 'Exo 2', sans-serif;
	font-weight: normal;
	max-width: 670px;
	}
	
.bilder li{
	margin-bottom: 1.063em;
	max-width: 492px;
	}



/* ===================================
	    LEISTUNG
	   =================================== */	
	   
	   
.pt_text_links, .pt_text_rechts{
	width: 100%; 
	margin-bottom: 1.875em;
	}
	
	
.pt_bild_links, .pt_bild_rechts{
	max-width: 492px;
	margin-bottom: 1.875em;
	}

.vorteile-list li{
	margin-bottom: 10px;
}
	

	
/* ===================================
	    Partner
	   =================================== */ 
	   
.partner_logos p{
	float:left;
	height: 75px;
	margin: 0 50px 1.875em 0;
	}
/* ===================================
	    Kontakt
	   =================================== */ 
#xing {
	width: 64px;
	}
	
#mail_link a:link{
	color: #0ba1e2;
	text-decoration: none;
	}
	
#mail_link a:visited{
	color: #0ba1e2;
	text-decoration: none;
	}
	
#mail_link  a:hover{
	color: #777877;
	text-decoration: none;
	}
	
#mobile a:link{
	color: #777877;
	text-decoration: none;
	}	
		
/* ===================================
	     Footer
	   =================================== */	
	   
#footer{
	background-color: white;
	width: 100%;
	height: 50px;
	font-family: 'Exo 2', sans-serif;
	position:absolute;
	bottom: 0;
	} 
	
#footer p {
	text-align:right;
	margin-right: 32px;
	}
	
#footer p a:link{
	color: #777877;
	text-decoration: none;
	}
	
#footer p a:visited{
	color: #777877;
	text-decoration: none;
	}
	
#footer p a:hover{
	color: #0ba1e2;
	text-decoration: none;
	}  
	   
	   

/* ===================================
	     4. Sonstige Styles
	   =================================== */
.abstand_10 {
	height: 0.625em;
	}	   
	   
.abstand_17 {
	height: 1.063em;
	}

.abstand_20{
	height: 20px;
}
	
.abstand_30 {
	height: 1.875em;
	}
	
.abstand_60 {
	height: 2.7em;
	} 
	
.abstand_65 {
	height: 4.063em;
}

.abstand_100 {
	height: 6.25em;
}

.display-none {
			display: none;
		} 
		
.clear {
	clear:both;
	} 
	
.blau {
	color: #0ba1e2;
	}
	
.fett {
	font-weight: bold;
	}
	
.linie {
	width: 100%;
	height: 50px;
	border-top: solid 2px #0ba1e2; 
	}
	
#google {
	display: none;
	}
/* ===================================
	     5. media queries
	   =================================== */
   
@media screen and (min-width: 670px) {

#logo {
	background-image: url(../img/sf_pt.svg);
	background-repeat:no-repeat;
	background-size: contain;
	width: 67%;
	height: 7em;
	margin: 0 0 0 15.5%;
	padding: 0.625em;
	}
	
#text_header {
	display: none;
	}

#pano_home {
	height: 293px;
	}
	
#pano_ueber_mich {
	height: 293px;
	}

#pano_konzept {
	height: 293px;
	}
	
#pano_studio {
	height: 293px;
	}
	
#pano_leistung {
	height: 293px;
	}
	
#pano_partner {
	height: 293px;
	}
	
#pano_kontakt {
	height: 293px;
	}
	
#pano_impressum {
	height: 293px;
	}

.display_large {
	display: none;
	}
	
.display-none {
			display: block;
		}
		
#menue {
	width: 100%;
	height: 42px;
	background-color: #777877;
	color: white;
	text-align: left;
	font-size: 1.06em;
		}  	
	
#slidedown {
	margin-left: 15.5%;
	}

	
#slidedown li {
	float:left;
	margin-right: 4%;
	padding: 6px 0.5% 8px 0.5%;
	border-bottom: none;;
	list-style: none;
	background-color: #777877;
	}	
	
/*Inhalt*/

#inhalt_text {
	margin: 0 0 0 16%;;
	width: 68.3%;
	}	   
#btp_logo_container {
	width: 100%;
	}

#btp_logo {
	margin: 0 0 0 85%;
	}
	
/*Unterpunkte*/
	
.unterpunkte{			
	width: 40.845%;
	margin-bottom: 2.938em;
	float:left;
	}

.abstandshalter {
	display: block;
	}
	
#rechner {
	display: block;
	}
	
/*Über mich*/

.bild {
	float:left;
	max-width:236px
	height:auto;
	position: relative;
	display:block;
	margin:0 auto;
	margin-right: 3.5%;
	}

.bild_text {
	float:left;
	width: 61%;
	}

/* ===Vita Liste===*/
.liste_vita li{
	float: left;	
}

.liste_links {
	width: 120px;
	}
	
.liste_rechts{
	width: 67.9%;
	}
	
.liste_drunter {
	margin-left: 120px;
	width:  67.9%;
	}
	
.abstand_liste_large {
	margin-bottom: 0.625em;
	}
	
/* ===================================
	    Konzept
	   =================================== */	
.bilder{
	width: 100%;
	}
		
.bilder li {
	float: left;
	max-width:49%;
	height:auto;
	position: relative;
	display:block;
	}
	
.mar_r_10 {
	margin-right: 2%; 
	}
	
.bilder .img_large {
	float: left;
	max-width:32%;
	height:auto;
	position: relative;
	display:block;
	}
	
/* ===================================
	    Leistung
	   =================================== */	
	
.pt_text_links{
	float:left;
	width: 48.5%;
	margin-right: 3%; 
	}
	
.pt_bild_rechts{
	float:left;
	max-width: 48.5%;
	}
	
.pt_text_rechts{
	float:left;
	width: 48.5%;
	}
	
.pt_bild_links{
	float:left;
	max-width: 48.5%;
	margin-right:3%;
	}
	
#google {
	display: block;
	}
	
}

@media screen and (min-width: 670px) and (max-width: 793px){
	#logo {
	height: 5.5em;
	}
	
	#slidedown {
	margin-left: 10%;
	}
	
	#slidedown li {
	margin-right: 3%;
	padding: 6px 0.5% 8px 0.5%;
	}
	
	#btp_logo {
	margin: 0 0 0 75%;
	}	
	


}