@charset "UTF-8";

@import url('http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic');
*, :after, :before {
	-moz-box-sizing : border-box;
	box-sizing      : border-box;
}
body {
	font-family : Lato, sans-serif;
	font-weight : 100;
}
html, body {
	overflow:visible;
}
h1, h2, h3, h4, h5, h6 {
	margin         : 0 0 30px;
	font-family    : Lato, sans-serif;
	letter-spacing : 1px;
	text-transform : full-size-kana;
}
h1 {
	margin-top  : 2em;
	font-size   : 1.925em;
	font-weight : bold;
	color       : #ef9320;
	text-align  : center;
}
h2 {
	margin-top : 2em;
	font-size  : 1.525em;
	color      : #ef9320;
}
h3 {
	margin-top : 2em;
	font-size  : 1.125em;
}
h1 + h2 {
	text-align : center;
	margin     : -20px auto 50px auto;
	color      : #333333;
}
p, a, li {
	font-family : Lato, sans-serif;
	font-weight : 100;
}
a {
	outline            : 0;
	-webkit-transition : all .2s ease-in-out;
	transition         : all .2s ease-in-out;
}
img {
	border : none;
}
select, optgroup, option {
	-webkit-font-smoothing : antialiased;
	-webkit-transform      : translateZ(0);
	transform              : translateZ(0);
	text-rendering         : optimizeLegibility;
}
.button {
	background-color : #ef9320;
}
.button:hover {
	background-color : #333333;
	color            : #ef9320;
	transition       : all .1s ease-in-out;
}
/*-----------------------------------------
 | Preloader (spinner.js)
 -----------------------------------------*/

#preloader {
	background : #333333;
	position   : fixed;
	bottom     : 0;
	left       : 0;
	right      : 0;
	top        : 0;
	height     : 100%;
	width      : 100%;
	z-index    : 9999;
}
/*-----------------------------------------
 | General Markup
 -----------------------------------------*/
.wide-container {
	max-width : none;
	width     : 100%;
	margin    : 0;
	padding   : 0;
}
.row.full-width {
	width     : 100%;
	max-width : 100% !important;
}
.shadow {
	margin-top : -5px;
	height     : 5px;
	width      : 100%;
	display    : block;
	position   : relative;
	box-shadow : 0 3px 5px rgba(51, 51, 51, 0.8);
}
.trenner {
	position   : relative;
	display    : block;
	clear      : both;
	width      : 90px;
	height     : 2px;
	margin     : 20px auto 35px auto;
	background : #c4c4c4;
}
.trenner:after {
	position  : relative;
	display   : block;
	clear     : both;
	content   : " ";
	width     : 100%;
	height    : 1px;
	color     : transparent;
	font-size : 1px;
}
h1 + .trenner {
	margin : -20px auto 50px auto;
}
/*-----------------------------------------
 | About JK
 -----------------------------------------*/

#about {
	position : relative;
	display  : block;
	clear    : both;
	float    : none;
}
#about .row > div {
	padding : 0 0 20px 0;
}
.portrait-klein-wrapper {
	display  : block;
	position : relative;
	clear    : both;
	width    : auto;
	margin   : 0 35px 0 0;
	overflow : hidden;
}
.icon-logo-wrapper {
	display    : block;
	position   : relative;
	clear      : both;
	width      : 100%;;
	text-align : center;
	margin     : 25px 0;
}
.portrait-klein-wrapper:after, .icon-logo-wrapper:after,
.portrait-klein-wrapper .portrait-klein:after,
.portrait-klein-wrapper:after .portrait-klein:after {
	content   : " ";
	clear     : both;
	height    : 1px;
	font-size : 1px;
	color     : transparent;
	position  : relative;
	width     : 100%;
	display   : block;
}
.portrait-klein-wrapper .portrait-klein {
	position      : relative;
	clear         : both;
	display       : block;
	border-radius : 50%;
	/*box-shadow    : 0 0 9px rgba(51, 51, 51, 0.9);*/
	width         : 100%;
	height        : 100%
}
.icon-logo {
	border             : 0 none;
	width              : 45px;
	margin             : 0 auto;
	border-radius      : 50%;
	overflow           : hidden;
	-webkit-box-shadow : 0 0 5px rgba(51, 51, 51, 0.9);
	box-shadow         : 0 0 5px rgba(51, 51, 51, 0.9);
}
/*-----------------------------------------
 | Anwendungsgebiete
 -----------------------------------------*/

#anwendungsgebiete {
	text-align : center;
}
#anwendungsgebiete .row canvas {
	border  : 1px solid red;
	z-index : 999999999;
}
.topic {
	min-height : 100px;
	height     : 175px;
	overflow   : hidden;
}
.topic h2 {
	margin      : 15px;
	text-shadow : none;
	text-align  : center;
	color       : #ffffff;
}
#anwendungsgebiete_circles {
	height : 170px;
}
/*-----------------------------------------
 | Wissen
 -----------------------------------------*/

.hoeren { background-color : #0296a1; }
.hoeren h2 { color : #ffffff; }
.kommunikation { background-color : #018791; }
.kommunikation h2 { color : #ffffff }
.konzentration { background-color : #01727a; }
.konzentration h2 { color : #ffffff; }
.wohlbefinden { background-color : #015d63; }
.wohlbefinden h2 { color : #ffffff; }
.besonderes { background-color : #014347; }
.besonderes h2 { color : #ffffff; }
.stimme { background-color : #0296a1; }
.stimme h2 { color : #ffffff; }
.schwangerschaft { background-color : #018791; }
.schwangerschaft h2 { color : #ffffff; }
.koordination { background-color : #01727a; }
.koordination h2 { color : #ffffff; }
.fremdsprachen { background-color : #015d63; }
.fremdsprachen h2 { color : #ffffff; }
/* noch frei */
.lernen { background-color : #014347; }
.lernen h2 { color : #ffffff; }
#wissen {
	margin-top         : 50px;
	-webkit-box-shadow : 0 3px 5px rgba(51, 51, 51, 0.5);
	box-shadow         : 0 3px 5px rgba(51, 51, 51, 0.5);
}
#wissen div.columns:hover {
	background-color   : #ef9320;
	-webkit-transition : all .3s ease-in-out;
	transition         : all .3s ease-in-out;
}
#wissen a {
	display            : block;
	position           : absolute;
	bottom             : 15px;
	left               : 0;
	right              : 0;
	width              : 100%;
	text-align         : center;
	font-size          : 24px;
	color              : white;
	opacity            : 0;
	-webkit-transition : all .3s ease-in-out;
	transition         : all .3s ease-in-out;
}
#wissen i {
	font-size   : 24px;
	line-height : 24px;
	margin-left : 10px;
}
#wissen .hoeren:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .hoeren:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .kommunikation:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .kommunikation:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .konzentration:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .konzentration:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .wohlbefinden:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .wohlbefinden:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .besonderes:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .besonderes:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .stimme:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .stimme:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .schwangerschaft:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .schwangerschaft:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .koordination:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .koordination:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .fremdsprachen:hover a { opacity : 1; text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
#wissen .fremdsprachen:hover h2 { text-shadow : 0 0 5px rgba(51, 51, 51, 0.9); }
/*-----------------------------------------
 | Behandlung
 -----------------------------------------*/
#behandlung_circles {
	margin-bottom : 20px;
}
#behandlung_circles li {
	text-align : center;
}
#behandlung_circles li h3 {
	margin-top : 0;
	text-align : center;
}
#behandlung_circles .circle-progress {
	position : relative;
}
#behandlung_circles span.percentage {
	position   : absolute;
	top        : 65px;
	left       : 0;
	right      : 0;
	text-align : center;
	color      : #545454;
	font-size  : 18px;
}
#behandlung_circles i {
	position : relative;
	float    : right;
}
/*-----------------------------------------
 | Information
 -----------------------------------------*/
#informationen {
	margin-bottom : 50px;
}
#informationen h2 {
	display       : block;
	width         : 100%;
	margin-bottom : 15px;
}
#informationen .row {
	/*border:1px solid red;*/
}
#informationen .row h2 {
	margin-top : 0;
}
/*-----------------------------------------
 | Testimonials
 -----------------------------------------*/
#testimonials {
	position         : relative;
	clear            : both;
	width            : 100%;
	height           : 225px;
	color            : #ffffff;
	background-color : #333333;
}
#testimonials-wrapper {
	display    : block;
	max-width  : 62.5rem;
	margin     : 25px auto auto auto;
	height     : 175px;
	padding    : 0;
	text-align : center;
}
#testimonials-wrapper .testimonial {
	position           : absolute;
	display            : table;
	max-width          : 62.5rem;
	min-width          : 62.5rem;
	height             : 175px;
	padding            : 0 75px;
	overflow           : hidden;
	z-index            : 10;
	opacity            : 0;
	text-align         : center;
	-webkit-transition : opacity 0.3s ease-in-out;
	transition         : opacity 0.3s ease-in-out;
}
#testimonials-wrapper .testimonial p,
#testimonials-wrapper .testimonial blockquote {
	display        : table-cell;
	vertical-align : middle;
	max-width      : 60rem;
	margin         : auto;
	font-size      : 32px;
	font-family    : Lato, sans-serif;
}
#testimonials-wrapper .testimonial:before,
#testimonials-wrapper .testimonial:after {
	content     : "\201C";
	font-family : 'trebuchet ms', verdana, arial, sans-serif;
	font-size   : 64px;
	font-weight : bold;
	color       : #ef9320;
	position    : absolute;
	top         : -15px;
}
#testimonials-wrapper .testimonial:before { left : 0; }
#testimonials-wrapper .testimonial:after { right : 0; }
/* testimonial navigation */

#testimonials nav.testimonial-navigation {
	position   : absolute;
	top        : 0;
	left       : 0;
	bottom     : 0;
	right      : 0;
	z-index    : 5;
	text-align : center;
}
#testimonials nav.testimonial-navigation a.prev,
#testimonials nav.testimonial-navigation a.next {
	opacity     : 0;
	position    : absolute;
	display     : inline-block;
	width       : 75px;
	height      : 150px;
	line-height : 225px;
}
#testimonials nav.testimonial-navigation a.prev { left : 0; }
#testimonials nav.testimonial-navigation a.next { right : 0; }
#testimonials nav.testimonial-navigation a i {
	color              : #ffffff;
	font-size          : 16px;
	font-weight        : normal;
	-webkit-transition : opacity 0.3s ease-in-out;
	transition         : all .1s ease-in-out;
}
#testimonials nav.testimonial-navigation a:hover i {
	color      : #ef9320;
	transition : all .1s ease-in-out;
}
/*-----------------------------------------
 | Container in between with images
 -----------------------------------------*/
#slogans {
	position         : relative;
	clear            : both;
	background-image : url('../img/slider/blaetter.jpg');
	background-size  : cover;
	height           : 225px;
	box-shadow       : inset 0 3px 5px rgba(51, 51, 51, 0.5);
}
#slogans-wrapper {
	display    : block;
	max-width  : 62.5rem;
	margin     : 25px auto;
	height     : 225px;
	padding    : 0;
	text-align : center;
}
#slogans-wrapper .slogan {
	position   : absolute;
	display    : table;
	max-width  : 62.5rem;
	min-width  : 62.5rem;
	height     : 225px;
	padding    : 0 75px;
	overflow   : hidden;
	z-index    : 10;
	opacity    : 0;
	text-align : center;
}
#slogans-wrapper .slogan p,
#slogans-wrapper .slogan blockquote {
	display        : table-cell;
	vertical-align : middle;
	max-width      : 62.5rem;
	margin         : auto;
	font-size      : 32px;
	font-family    : Lato, sans-serif;
	font-weight    : bold;
	color          : #ffffff;
	text-shadow    : 0 0 5px rgba(51, 51, 51, 0.9);
}
#slogans-wrapper .slogan cite {
	float       : right;
	position    : absolute;
	width       : auto;
	text-align  : right;
	display     : block;
	bottom      : 10px;
	left        : 10px;
	right       : 10px;
	text-shadow : 0 0 3px rgba(51, 51, 51, 0.9);
}
#slogans-wrapper .slogan cite small {
	color       : #dedede;
	font-size   : 85%;
	font-weight : normal;
	margin-left:5px;
}
#slogans-wrapper .slogan:before,
#slogans-wrapper .slogan:after {
	content     : "\201C";
	font-family : 'trebuchet ms', verdana, arial, sans-serif;
	font-size   : 64px;
	font-weight : bold;
	color       : #fff;
	position    : absolute;
	top         : 0;
	text-shadow : 0 0 3px rgba(51, 51, 51, 0.9);
}
#slogans-wrapper .slogan:before { left : 0; }
#slogans-wrapper .slogan:after { right : 0; }


/*-----------------------------------------
 | Kontakt
 -----------------------------------------*/
#kontakt {}

#kontakt textarea {

}

#adresszeile {
	text-align     : center;
	border-top     : 1px dotted #cccccc;
	padding    : 15px 0;
	font-size      : 13px;
	letter-spacing : 0.08em;
}
#adresszeile a {
	color:#ef9320;
	font-size:18px;
}

#google-map {
	position : relative;
}
#map-toggler {
	text-decoration : none;
}
#map-toggler:hover {
	cursor     : pointer;
	color      : #ef9320;
	transition : all .1s ease-out;
}
#map-wrapper {
	overflow : hidden;
	width    : 100%;
	height   : 0;
	z-index  : 1;
}
#map {
	width : 100%;
}


/*-----------------------------------------
 | Footer
 -----------------------------------------*/

footer.wide-container {
	background-color : #333333;
	color            : #dddddd;
	height           : auto;
	padding          : 45px 0;
}
footer .columns {
	text-align : center;
	font-size  : 18px;
}
footer .columns a {
	color : #ef9320;
}
footer .columns a:hover {
	color : #ffffff;
}