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

body {
	margin: 0;
	padding: 0;
	
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 18px;
	
	text-align: left;
	
	background-size: cover;
	background-position: center;
	
	color: #666;
}

a {
	text-decoration: none;
	
	-webkit-transition: all 200ms ease-in-out 0ms;
	-moz-transition: all 200ms ease-in-out 0ms;
	-ms-transition: all 200ms ease-in-out 0ms;
	-o-transition: all 200ms ease-in-out 0ms;
	transition: all 200ms ease-in-out 0ms;
}

a:hover {
	cursor: pointer;
}

h1, h2, h3, h4, h5 {
	margin-top: 0;
	color: #3C748F;
	font-weight: 300;
}

h1 {	font-size: 40px; line-height: 46px;	}
h2 {	font-size: 33px; line-height: 40px;	}
h3 {	font-size: 28px; line-height: 36px;	}
h4 {	font-size: 22px; line-height: 28px; margin-bottom: 20px; }
h5 {	font-size: 18px; line-height: 22px;	margin-bottom: 20px; }


p {
	margin: 10px 0 27px;
	line-height: 28px;
}

b {
	font-weight: 400;
}

address {
	font-style: normal !important;
}

/* CLEARFIX */

.clearfix {		zoom: 1;	}
.clearfix:before, .clearfix:after {		content: "";	display: table;		}
.clearfix:after {	clear: both;	}


#website_wrapper {
	position: relative;
	margin: 0 auto;
}

/* user-select none Elements*/
header,
footer,
a,
.slide,
.tags {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.slide:hover {
	cursor: default;	
}




/* --------------------------------------------------
		HEADER 
-------------------------------------------------- */

header {
	position: fixed;
	top: 0;
	
	padding: 40px 0 0 0;
	width: 100%;
	
	background-color: rgba(113, 177, 208, 0.75);
	z-index: 1800;
	overflow: hidden;
	
	-webkit-transition: background-color 500ms ease-in-out 0ms;
	-moz-transition: background-color 500ms ease-in-out 0ms;
	-ms-transition: background-color 500ms ease-in-out 0ms;
	-o-transition: background-color 500ms ease-in-out 0ms;
	transition: background-color 500ms ease-in-out 0ms;

}

header div.inner {
	position: relative;
	width: 844px;
	height: 130px;
	margin: 0 auto;
}

header div.top {
	height: 50px;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}

header img {
	float: left;
	margin: 0 20px 0 0;
}

header h1 {
	float: left;
	margin: 0;
	line-height: 33px;
	font-weight: 400;
	font-size: 28px;
	color: #FFF;
}

header span {
	float: right;
	margin: 13px 0 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}


/* --------------------------------------------------
		NAVIGATION 
-------------------------------------------------- */

nav {
	position: absolute;
	bottom: 0;
	
	height: 18px;
	width: 844px;
	margin: 0 0 34px 0;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

nav div.left {		float: left;	}
nav div.right {		float: right;	}

nav div.left a {	margin: 0 15px 0 0;		}
nav div.right a {	margin: 0 0 0 15px;		}

nav div.left a,
nav div.right a {
	padding: 6px 10px 34px 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	
	background-image: url(../img/arrow_white.svg);
	background-repeat: no-repeat;
	background-position: center 60px;
	background-size: 20px;
}

nav div.left a:hover,
nav div.right a:hover {
	background-color: rgba(255, 255, 255, 0.15);
	color: #FFF;
}

nav div.left a.active,
nav div.right a.active {
	background-color: rgba(110, 207, 101, 1);
	background-position: center 49px;
	color: #FFF;
	
}





/* --------------------------------------------------
		CONTENT 
-------------------------------------------------- */


div.content_wrapper {
	position: relative;
	margin: 0;
	background-color: #FFF;
}

div.content_wrapper section div.inner {
	width: 844px;
	margin: 0 auto;
	padding: 100px 0;
	
}

section#content_0 {background-color: #FFFFFF; border-bottom: 1px solid #eee;}
section#content_1 {background-color: #f6f6f6; border-bottom: 1px solid #eee; text-shadow: 0 1px 0 #FFF;}
section#content_2 {background-color: #FFFFFF; border-bottom: 1px solid #eee;}
section#content_3 {background-color: #f6f6f6; border-bottom: 1px solid #eee; text-shadow: 0 1px 0 #FFF;}
section#content_4 {background-color: #FFFFFF; border-bottom: 1px solid #eee;}
section#content_5 {background-color: #f6f6f6; border-bottom: 1px solid #eee; text-shadow: 0 1px 0 #FFF;}

/* --------------------------------------------------
		CONTENT 0  (Slideshow)
-------------------------------------------------- */

div.slideshow_wrapper {
	position: relative;
	height: 670px;
	width: 100%;
}

div.slide {
	position: absolute;
	width: 100%;
	height: 670px;
	
	background-size: cover;
	background-repeat: no-repeat;
	
	overflow: hidden;
	
	-webkit-transition: opacity 500ms ease-in-out 0ms;
	-moz-transition: opacity 500ms ease-in-out 0ms;
	-ms-transition: opacity 500ms ease-in-out 0ms;
	-o-transition: opacity 500ms ease-in-out 0ms;
	transition: opacity 500ms ease-in-out 0ms;
	
	opacity: 0.0;
	z-index: 1;
}

div.slide.active {
	opacity: 1.0;
	z-index: 2;
}

div.slide span.comp {
	display: block;
	color: #FFF;
	font-weight: 100;
}

div#slide_1 {	background-image: url(../img/slide_1.jpg);	background-position: center 60%;	}
div#slide_2 {	background-image: url(../img/slide_2.jpg);	background-position: center;	}

div.wording {
	margin: 0 auto;	
	width: 844px;
}

#wording_1 span.comp {
	margin: 370px 0 0 510px;
	padding: 130px 30px;
	
	width: 280px;
	
	text-align: center;
	font-size: 30px;
	line-height: 40px;
	
	background-color: rgba(0, 190, 0, 0.5);
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#wording_2 span.comp {
	margin: 135px 0 0 140px;
	padding: 230px 80px;

	width: 420px;

	text-align: center;
	font-size: 28px;
	line-height: 40px;

	background-color: rgba(255, 20, 20, 0.5);

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

/* --------------------------------------------------
		CONTENT 1 (Über mich)
-------------------------------------------------- */

#content_1 div.user_picture_wrapper {
	float: left;
	width: 200px;
	text-align: center;
	
}

#content_1 div.user_picture {
	width: 200px;
	height: 200px;
	
	background-image: url(../img/profile.jpg);
	background-size: 200px 200px;
	background-position: center top;
	
	box-shadow: 0 0 25px #FFF, 0 0 6px rgba(0, 0, 0, 0.2) inset;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

div.user_picture_wrapper h5 {
	margin: 20px 0;
}

div.user_picture_wrapper p {
	line-height: 20px;
	font-size: 13px;
}

div.text_wrapper_c1 {
	float: right;
	
	margin: 0;
	padding: 0 0 0 70px;
	
	width: 503px;
	border-left: 1px dotted rgba(0, 0, 0, 0.2);
}


div.text_wrapper_c1 ul,
div.text_wrapper_c1 li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

div.text_wrapper_c1 li {
	line-height: 30px;
}

div.text_wrapper_c1 li span {
	margin: 0 5px 0 15px;
	font-size: 14px;
	color: #71B1D0;
}

#content_1 div.tags span {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 5px 10px 0;
	
	background-color: #71B1D0;
	
	color: #fff;
	text-shadow: none;
	box-shadow: 0 1px 0 #fff;
}

#content_1 div.tags span.highlight {
	background-color: rgba(110, 207, 101, 1);
}


/* --------------------------------------------------
		CONTENT 2 (Repuls - Das Gerät)
-------------------------------------------------- */

section#content_2 div.inner {
}

div.text_wrapper_c2 {
	float: left;
	width: 330px;
}

div.text_wrapper_c2 p:last-of-type {
	margin: 0;
}

div.text_wrapper_c2 a {
	display: inline-block;
	padding: 5px 10px 7px 6px;
	
	font-size: 15px;
	font-weight: 400;
	color: #FFF;
	
	background-color: rgba(110, 207, 101, 1);
	text-shadow: none;
}

div.text_wrapper_c2 a:hover {
	background-color: #71B1D0;
}



#content_2 div.tags {
	float: right;
	
	margin: -30px 0 0 0;
	padding: 102px 130px 200px 130px;
	
	width: 237px;
	height: 237px;
	
	background-image: url(../img/device.svg);
	background-repeat: no-repeat;
	background-position: -362px -53px;
}

#content_2 div.tags span {
	display: block;
	float: left;
	
	padding: 34px 0;
	margin: 5px;
	
	width: 108px;
	
	background-color: rgba(255, 60, 23, 0.8);
	color: #FFF;
	
	text-align: center;
	text-shadow: none;
	font-size: 12px;
	line-height: 20px;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-transition: background-color 200ms ease-out 0ms;
	-moz-transition: background-color 200ms ease-out 0ms;
	-ms-transition: background-color 200ms ease-out 0ms;
	-o-transition: background-color 200ms ease-out 0ms;
	transition: background-color 200ms ease-out 0ms;
}


/* --------------------------------------------------
		CONTENT 3 Preise und Behandlungen
-------------------------------------------------- */

section#content_3 {
	background-image: url(../img/body_back.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
}

div.text_wrapper_c3 {
	float: left;
	
	margin: 0 0 0 360px;
	padding: 0 0 0 70px;
	
	width: 400px;
	
	border-left: 1px dotted rgba(0, 0, 0, 0.2);
}

table.price_table {
	
}

table.price_table tr {
	border-bottom: 1px dotted #eee;
}

table.price_table tr.head {
	font-size: 12px;
	font-weight: 400;
}

table.price_table td {
	padding: 15px 0;
	border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}

table.price_table tr.highlight {
	color: rgba(255, 114, 19, 1);
}

table.price_table td:nth-child(1) {
	text-align: left;
}

table.price_table td:nth-child(2) {
	text-align: center;
}

table.price_table td:nth-child(3) {
	text-align: right;
}

/* --------------------------------------------------
		CONTENT 4 Akademie
-------------------------------------------------- */

#content_4 div.inner {
	background-image: url(../img/repuls_device.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 350px;
}


.text_wrapper_c4 {
	text-align: left;
}


/* --------------------------------------------------
		CONTENT 5 Erfahrungsberichte
-------------------------------------------------- */

#content_5 h3 {
	padding: 0 0 20px 0;
	border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
	text-align: center;
}

#content_5 .article {
	margin: 50px 0 0 0;
}


#content_5 .article .user_picture_wrapper {
	width: 200px;
	text-align: center;
}
#content_5 .article.left .user_picture_wrapper {
	float: left;
}
#content_5 .article.right .user_picture_wrapper {
	float: right;
}



#content_5 .article .user_picture {
	width: 200px;
	height: 200px;
	
	background-size: 200px 200px;
	background-position: center;
	
	box-shadow: 0 0 25px #FFF, 0 0 6px rgba(0, 0, 0, 0.2) inset;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}


#content_5 #article_1 .user_picture {		background-image: url(../img/simon.jpg);	}
#content_5 #article_2 .user_picture {		background-image: url(../img/nouser.jpg);	}
#content_5 #article_3 .user_picture {		background-image: url(../img/nouser.jpg);	}


.article .bubble {
	position: relative;
	float: right;
	
	padding: 30px;
	width: 540px;

	background-color: rgb(113, 177, 208);
	color: #FFF;
	text-shadow: none;
	
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}
.article.left .bubble {
	float: right;
}
.article.right .bubble {
	float: left;
}

.article .bubble small {
	display: block;
	margin: 30px 0 0 0;
	line-height: 16px;
}

.article .bubble p {
	margin: 0;
}

.article .bubble .bubble_arrow {
	position: absolute;
	
	
	width: 30px;
	height: 30px;
	
	background-color: rgb(113, 177, 208);
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg); 
	transform: rotate(45deg);
}


.article.left .bubble .bubble_arrow {
	top: 85px;
	left: -10px;
}
.article.right .bubble .bubble_arrow {
	top: 85px;
	right: -10px;
}



/* --------------------------------------------------
		CONTENT 6 Kontakt
-------------------------------------------------- */

.text_wrapper_c6 {
	float: left;
	width: 250px;
}

.text_wrapper_c6 span {
	display: inline-block;
	width: 40px;
	text-align: left;
}

.contact_form_wrapper {
	float: left;
	
	margin: 0 0 0 120px;
	padding: 0 0 80px 70px;
	
	width: 400px;
	
	border-left: 1px dotted rgba(0, 0, 0, 0.2);
}

div.contact_form_overlay {
	display: none;
	position: absolute;
	
	margin: 65px 0 0 0;
	
	width: 400px;
	height: 500px;
	
	background-color: #f6f6f6;
	z-index: 5;
}

div.contact_form_overlay h5 {
	margin: 0 2px;
	padding: 18px 20px;
	
	color: #FFF;
	background-color: rgba(110, 207, 101, 1);
	
	font-size: 33px;
	text-shadow: none;
}

div.contact_form_overlay p {
	margin: 0px 2px 30px 2px;
}

form.contact_form {
	position: relative;
}

.contact_form input,
.contact_form textarea {
	margin: 2px;
	font-family: "Roboto", Arial, sans-serif;
}

.contact_form input {
	width: 358px;
	padding: 20px;
	
	background-color: #FFF;
	border: none;
	outline: none;
	border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}

.contact_form textarea {
	width: 358px;
	max-width: 358px;
	
	height: 180px;
	max-height: 180px;
	
	padding: 20px;
	background-color: #FFF;
	border: none;
	outline: none;
	border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}

.contact_form input:focus,
.contact_form textarea:focus {
	outline: none !important;
}

div.input_wrapper,
div.textarea_wrapper {
	position: relative;
	margin: 0 0 25px 0;
}

div.form_error {
	display: none;
	
	position: absolute;
	right: 5px;
	top: 7px;
	
	padding: 3px 8px;
	
	color: #FFF;
	background-color: #E79F9F;
	
	text-align: right;
	font-weight: 400;
	font-size: 12px;
	text-shadow: none;
}

.contact_form a {
	float: right;
	
	margin: 0 0 0 0;
	padding: 7px 6px 7px 10px;
	
	font-weight: 400;
	color: #FFF;
	background-color: rgba(110, 207, 101, 1);
	text-shadow: none;
}

.contact_form a:hover {
	background-color: #71B1D0;
}


.google_maps_wrapper {
	float: left;
	margin: 0 0 30px 0;
	padding: 60px 0;
	width: 844px;
	
	border-top: 1px dotted rgba(0, 0, 0, 0.2);
	border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}

#map_canvas {
	height: 430px;
	width: 844px;
}

#map_canvas h5 {
	margin: 0 0 5px 0;
}

#map_canvas p {
	margin: 10px 0 0 0;
	line-height: 20px;
}


.partner_wrapper h3 {
	float: left;
	margin: 0 20px 0 0;
}

.partner_wrapper a {
	float: left;
	margin: 7px 10px 0 0;
	padding: 4px 7px;
	
	font-size: 12px;
	background-color: #ccc;
	color: #FFF;

}

.partner_wrapper a:hover {
	background-color: rgb(113, 177, 208);
}

.partner_wrapper p {
	margin: 10px 0;
}




/* --------------------------------------------------
		FOOTER
-------------------------------------------------- */

footer {
	background-color: #71B1D0;
	color: #FFF;
	font-size: 12px;
}

footer div.inner {
	width: 844px;
	height: 25px;
	margin: 0 auto;
	padding: 20px 0;
}

footer h5 {
	color: #FFF;
}

footer div.footer_part_1,
footer div.footer_part_2,
footer div.footer_part_3 {
	float: left;
	height: 25px;
	width: 250px;	
}

footer div.footer_part_1,
footer div.footer_part_2 {
	margin: 0 47px 0 0;
}

footer div.footer_part_1 { text-align: left; }
footer div.footer_part_2 { text-align: center; }
footer div.footer_part_3 { text-align: right; }

footer div.footer_part_1 a {
	margin: 0 25px 0 0;
	color: rgba(255, 255, 255, 0.7);
}

footer div.footer_part_1 a:hover {
	color: rgba(255, 255, 255, 1.0);
}


/* --------------------------------------------------
		Additional Content
-------------------------------------------------- */

body.additional_content {
	background-color: #F6F6F6;
}

body.additional_content p {
	line-height: 22px;
}

body.additional_content #website_wrapper {
	border-top: 40px solid #71B1D0;
	border-bottom: 40px solid #71B1D0;
	padding: 70px 0;
}

body.additional_content #website_wrapper div.inner {
	margin: 0 auto;
	width: 844px;
}