/* --------------------------------------------------------------------------------------------
   --------------------------------------------------------------------------------------------
	                Jordi-Kompetenz  CSS         2017
   --------------------------------------------------------------------------------------------
   -------------------------------------------------------------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Raleway:300,700);
@import url("../font-awesome/css/font-awesome.css");/*Icon-Fonts*/

*{margin: 0; padding: 0; box-sizing: border-box;}

html{ 
	font-size:100%;
	-webkit-text-size-adjust: none;
	height: 100%;
	}
body {
	background-color: #fff;
	font-size: 1em;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	color:#434444;
	height: 101%;
	}

.clear {clear:both;}
.red {color: red;}

/* ----------------------------------------------
	          Titel / Absatz 
   ---------------------------------------------- */		
/*h1 {
	font-size:1em;
	color:#434444;
	padding: 0 0 3px 0;
	margin-bottom: 10px;
	font-weight: 700;
	border-bottom:  2px solid #9bc062;
	}*/
h2 {
	font-size:1em;
	color:#434444;
	padding: 0 0 3px 0;
	font-weight: 700;
	}
h3 {
	font-size:1.13em;
	color:#434444;
	padding: 0 0 10px 0;
	font-weight: 300;
	}
/*h4 {
	font-size:1em;
	color:#434444;
	padding: 7px 0 7px 0;
	font-weight: 700;
	}*/
p {padding: 0 0 10px 0;	 hyphens: auto;}  
hr {margin-bottom: 7px;}  
sup {font-size: 0.7em}
/* -------------------------------------
                Header 
   ------------------------------------- */
body>header {/* - erster Header im Body - */
	padding:20px 0 0 0;
	/*border-bottom:2px solid #e8404a;*/
	position:relative;	
	}
.header-segment {
	margin: 7px auto 0 auto;
	}
body>header>div img {padding-left: 15px;}

.menubutton {
    position:absolute;
    right:15px;
    top:30px;
    z-index: 400;
    font-size:1.5em;
	}

#mainnav {font-size: 0.9em;}

#mainnav ul.intro {
	padding: 0; 
	margin-bottom: 7px;
	border-bottom:2px solid #9bc062; 
	background-color:#e9f0de;
	}

#mainnav ul.intro li:nth-of-type(2){border-top: none;}/*Border nach Icons und Sprachen*/

img[alt^="logo.png"] {display: none;}/* - grosses Logo ausblenden - */
img[alt^="logointro.png"] {display: none;}

/* -------------------------------------
               navigavtion
   ------------------------------------- */ 
ul {list-style: none;}i
ol {
	list-style-position: outside;
	list-style-image: none;
	list-style-type: square;
	margin-left: 15px;
	padding: 0 0 10px 0;	 
	}

#icons {display: none;}/*Icons oben rechts Desktop ausblenden*/
#kontakt {display: none;}
.sprachen {display: none;}
.sprachen_mobile {
	text-align:right;
	padding: 0 0 5px 0; 
	margin: 0 10px;
	font-weight:700;
	}
	
#mainnav .icons {margin: 0 15px 0 0; text-align: right;}
/*#mainnav ul li:first-child:after:after {content: "."; display: block; clear: both; }*/


#mainnav .icons img {padding:0; margin:0; border-top:none;}

/*#mainnav li img {padding: 0 5px 0 0;}Icons und Sprachen*/
/*#mainnav li .icons {}Icons*/
/*#mainnav li .sprachen_mobile:nth-of-type(1) {margin-right: 10px;}Sprachen*/


#descnav {display: none;}
#mainnav ul { 
	margin:0;
	border-top:2px solid #9bc062;
	/*border-bottom:2px solid #9bc062;*/
	padding-top: 7px;
	background-color:#e9f0de; /*border-bottom: 1px solid #9bc062;*/
	}
/*#mainnav ul li:nth-of-type(2){border-top: 1px solid #9bc062;}Border nach Icons und Sprachen*/

/* -------------------------------------
                Inhaltsboxen    
   ------------------------------------- */
#boxen article {
	width: calc(100% / 1 - 0);
	padding: 15px;
	margin: 0;
	position: absolut;
	overflow: hidden;
	flex-grow: 1;
	flex-basis: auto;
	border-top: 2px solid #9bc062;
}
#boxen article.leer {display: none;}
/*#boxen */article img{max-width:100%;}
/*#boxen article:nth-child(4) {border: 0; padding:0;}*/
#introboxen article {/*Homepage*/
	width: calc(100% / 1 - 0);
	margin: 0;
	position: absolut;
	overflow: hidden;
	flex-grow: 1;
	flex-basis: auto;
	border-bottom: none;
}
#introboxen article:nth-child(1) {padding: 0 10px 5px 10px;}
#introboxen article:nth-child(2) {padding: 0 10px 10px 10px;}
/*---------Bildhovering  Intro----------*/
#introboxen article .zwei {display: none;}
#introboxen article:hover .eins {display: none;}
#introboxen article:hover .zwei {display: inline;}
/*---------Bildhovering  Team----------*/
#boxen article .zwei {display: none;}
#boxen article:hover .eins {display: none;}
#boxen article:hover .zwei {display: inline;}

/* -------------------------------------
              Attribut-Selektoren    
   ------------------------------------- */
/*pfeil nach oben*/
a[href ^="#top"] {text-decoration: none;}
a[href ^="#top"]:before {
	font-family: 'FontAwesome';
	content: "\f106";
	margin-right: 5px;
	font-size:2em;		
   }
a[href ^="#top"]:hover {
    color: #75889b;
    text-shadow: 0px 0px 2px #ff799b;	
   } 
a[href ^="mailto"]:before {
	content: "\f003";
	font-family: 'FontAwesome';
	margin-right: 5px;
	} 
a[href ^="http://"]:before {
	content: "\f08e";
	font-family: 'FontAwesome';
	margin-right: 5px;
}
a[href *=".pdf"]:before {
	content: "\f1c1";
	font-family: 'FontAwesome';
	margin-right: 5px;
	font-size:1em;
   }

/* -------------------------------------
                  Other    
   ------------------------------------- */   
::selection {
   background: #ea959c;
   color: #fff;
   }
::-moz-selection {
   background: #ea959c;
   color: #fff;
   }
/* -------------------------------------
                  Hovering    
   ------------------------------------- */  
.footer-segment a, a:visited{color:#a2a2a2;}
.footer-segment a:hover{color: #e8404a;}
.footer-segment .right a, a:visited{color:#a2a2a2;}
.footer-segment .right a:hover{color: #e8404a;}
a, a:visited, a:active{ color: #434444; text-decoration:none; transition:all 0.8s ease-in-out 0s;}
a:hover {color:#e8404a;}

#mainnav a, a:visited {
	display: block;
	padding: 5px 15px;
	}
#mainnav .on {
	display: block;
	padding: 5px 15px;
	color: #e8404a;
	}
.sprachen_mobile a, a:visited {
	padding-right: 5px;
	font-size: 0.7em;
	}
.sprachen_mobile a.on {color: #e8404a!important;}
#mainnav .icons a, a:visited {padding:0; margin:0; border:none;}
/*.menubutton a {color: #434444;}
.menubutton a:hover {color: #e8404a;}*/
/*#mainnav a:hover {	
	transition:all 0.8s ease-in-out 0s;	
	color: #e8404a;		
	}
.icons a, a:visited {padding:0;}
#boxen a, a:visited, a:active{ color: #434444; text-decoration:none;}
#boxen a:hover {color:#e8404a;}
.right a, a:visited{color:#a2a2a2;}
*/

/* -------------------------------------
                Footer    
   ------------------------------------- */
footer{
	padding: 25px 15px 300px 15px;
	background-color:#585858;
	color:#a2a2a2;
	}
.footer-segment {margin: 0 0 20px;}
.left {float: left; margin-bottom: 15px; display:block;}
.right{float: left;  border-top: 1px solid #e0e0e0; padding-top: 15px;}



/* ----------------------------------------------
	    Media Queris min-width: 480px
   ---------------------------------------------- */
@media screen and (min-width: 480px) {
article img{max-width:70%;}
#introboxen article img{max-width:100%;}
}
/* ----------------------------------------------
	    Media Queris min-width: 517px
   ---------------------------------------------- */
@media screen and (min-width: 517px) {
.right{float: right; text-align:right; border-top: none; padding-top: 0;}
}
/* ----------------------------------------------
	    Media Queris min-width: 650px
   ---------------------------------------------- */
@media screen and (min-width: 650px) {
article img{max-width:100%;}
img[alt^="logo_kl.png"] {display: none;}
img[alt^="logo.png"] {display: inline;}

#mainnav ul {border-bottom:2px solid #9bc062;}

#boxen {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding:0 10px 10px 0;
	}
#boxen article {
	width: calc(100% / 2 - 11px);
	margin: 10px 0 0 10px;
	border: 1px solid #5b5b5b;
	flex-grow: 1;
	flex-basis: auto;
	}
#boxen article.leer {display: inline; border:none;}
#introboxen {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding: 0;
	}
#introboxen article {
	width: calc(100% / 2 - 11px);
	flex-grow: 1;
	flex-basis: auto;
	}
#introboxen article:nth-child(1) {padding: 10px 0 10px 10px;}
#introboxen article:nth-child(2) {padding: 10px 0 10px 10px;	margin-right: 10px;}
}
/* ----------------------------------------------
	        Media Queris min-width: 850px
   ---------------------------------------------- */
@media screen and (min-width: 850px) {

body>header {border-bottom:none;}

#container {
	max-width:1100px;
	margin: 0 auto;
	position:relative;
	}
/* ---------  Inhaltsboxen --------*/
article {border-bottom: none;}
#boxen {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding:0 10px 10px 0;
	}
#boxen article {
	width: calc(100% / 4 - 11px);
	margin: 10px 0 0 10px;
	border: 1px solid #5b5b5b;
	flex-grow: 1;
	flex-basis: auto;
	}
#boxen article.leer {display: none;}
/*----footer-segment = 1100 minus 30 anstatt padding-----*/
.footer-segment {
	max-width:1070px; 
	margin: 0 auto;
	}
}
/* ----------------------------------------------
	  Media Queris min-width: 1024px
   ---------------------------------------------- */
@media screen and (min-width: 1024px) {
/* ---------  Header --------*/
body>header {
	padding:20px 15px 0 15px;
	position:relative;
	}
.header-segment {
	max-width:1080px;
	margin: 7px auto 0 auto;
	}
.menubutton {display: none;}
/*img[alt^="logointro.png"] {margin-left: 50px;}*/

#kontakt {display: inline; float: right; text-align:center; margin-top: 5px; height: 90px; width:90px; border: 1px solid #434444;}
#kontakt a, a:visited {
	border-bottom:2px solid #fff;
	color:#434444;	
	}
#kontakt  a:hover {
	transition:all 0.8s ease-in-out 0s;
	border-bottom: 2px solid #e8404a;	
	}
	
body>header>div img {padding-left: 0;}/*icons ohne padding*/
#icons {display: inline; float: right; text-align:right; margin-top: 5px;}
.sprachen {display: inline; float: right; margin-top: 5px; padding: 5px 0; font-size: 0.7em; font-weight:700;}
.sprachen_mobile {display: none;}

/* ---------  Navigation --------*/
#mainnav{display: none;}
#descnav{
	display: inline;
	max-width:1100px;
	margin: 70px auto 0 auto;	
	border-bottom: none;
	}
#descnav:after{
	clear: left;
	content:' ' ;
	display: block;
	}
#descnav li{float:left; margin: 0 20px 0 0;}
#descnav ul {border:none;}

#banner {
	max-width:1080px;
	margin: 0 auto;
	}
	
/* ----------Hovering--------------- */  
.sprachen a, a:visited {padding: 5px 3px;}
.sprachen a:hover {color: #e8404a;}
div.sprachen .on {
	padding: 5px 3px;
	color: #e8404a;
	}
#descnav a, a:visited {
	display: block;
	padding: 5px 0;
	border-bottom:2px solid #fff;
	}
#descnav a:hover {
	transition:all 0.8s ease-in-out 0s;
	border-bottom: 2px solid #e8404a;	
	color:#434444;
	}
#descnav .on {
	padding: 5px 0;
	color:#434444;
	border-bottom:2px solid #e8404a;
	}
}