/* CSS Document */

@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Raleway:400,800');
@import url("navigation.css");
@import url("font-awesome.min.css");
@import url("slick.css");
@import url("slick-theme.css");
@import url("ilightbox/ilightbox.css");
@import url("ilightbox/skin.css");
@import url("slide-in.css");

*	{ margin: 0; padding: 0; box-sizing: border-box!important; -webkit-box-sizing: border-box!important; outline: none; }

body { color: #000; font-family: 'Raleway', sans-serif; font-size: 16px; line-height: 1.5rem; }
h1 { font-size: 1rem; text-transform: uppercase; width: 100%; }
h2 { margin-bottom: 3rem; text-align: center; text-transform: uppercase; }
h3 { color: #fff; margin-bottom: 0.5rem; letter-spacing: 2px; text-align: center; text-transform: uppercase; }
h4 { font-size: 1rem; font-weight: 800; letter-spacing: 2px; margin-bottom: 0.5rem; text-transform: uppercase; }
h5 { font-size: 1rem; font-weight: 800; letter-spacing: 2px; margin-bottom: 0.75rem; text-transform: uppercase; }
h6 { font-size: 1rem; font-weight: 800; letter-spacing: 2px; margin-bottom: 1rem; text-transform: uppercase; }
h6:after { background: #fff; content: ''; display: block; height: 3px; margin-top: 0.5rem; width: 30px; }
a { text-decoration: none; color: #000; }
p { margin-bottom: 1.5rem; text-align: justify; }
hr { border: none; border-bottom: 3px solid #000; margin: 0 auto 1rem; width: 30px; }

#intro { background: none; display: table; height: 100vh; position: relative; width: 100%; }
.intro { display: table-cell; padding: 2rem 1rem 1rem; text-align: center; vertical-align: middle; width: 100%; }
.enter { bottom: 3rem; left: 50%;  margin-left: -125px; position: absolute; }
.enter:after { color: #fff; content:'\f107'; display: block; font-family: FontAwesome; font-size: 2rem; margin-top: 1rem; }
.enter a { background: rgba(0,0,0,0.8); border-radius: 50px; color: #fff; cursor: pointer; font-size: 0.75rem; letter-spacing: 2px; padding: 1rem; text-align: center; text-transform: uppercase; }

#header { background: #fff; border-bottom: 1px solid #eee; position: relative; width: 100%; z-index: 999; }
#logo { border-right: 1px solid #eee; font-size: 1.125rem; font-weight: 800; letter-spacing: 1.5px; line-height: 1.5; padding: 2.25rem; text-transform: uppercase; }
#navigation { line-height: 1.5; padding: 2.25rem; width: 65%; }
#navigation ul li a { color: #000; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; padding: 0.0625rem 1rem 0; text-transform: uppercase; }
#navigation ul li.current a:after, #navigation ul li:hover a:after { border-bottom: 3px solid #eee; content: ""; display: block; margin: 0.5rem auto -0.5rem; width: 30px; }
#navigation ul li:nth-child(2) a:after { border:none!important; }

#news { background: url(/img/site/moderne-creation.png) fixed no-repeat; background-size: cover; color: #fff; margin: 0 auto; padding: 3rem 0 2rem; width: 100%; }
#news p { text-align: center; }

#main { background: #fff; width: 100%; }

.controls { margin: 2rem 0; text-align: center; }
.controls button { background: #fff; border: 1px solid #eee; color: #999; cursor: pointer!important; font-family: 'Raleway', sans-serif; font-size: 0.75rem; letter-spacing: 2px; margin: 0.5rem; padding: 0.75rem 1.125rem; text-transform: uppercase; transition: all ease 0.2s; }
.controls button:hover, #controls button.active { background: #000; color: #fff; transition: all ease 0.2s; }

#team { padding: 3rem 2%; }
#team .profile { background: #fff; border: 1px solid #eee; margin: 1rem 2% 2rem; padding-bottom: 1rem; position: relative; text-align: center; }
#team .profile p { text-align: center; }
#team .profile img { display: block; margin-bottom: 1.5rem; width: 100%;  transition: all ease 0.3s; }
#team .profile:hover img { opacity: 0.8; transition: all ease 0.3s; }
#team .profile a.link { background: #fff; border: 1px solid #eee; bottom: -1.25rem; color: #999; font-size: 0.625rem; font-weight: 800; letter-spacing: 2px; margin-left: -50px; padding: 0.75rem 0.5rem; position: absolute; text-transform: uppercase; width: 100px; }

#team .guest { background: #fff; margin: 1rem 2%; padding-bottom: 1rem; position: relative; text-align: justify; }
#team .guest  img { display: block; margin-bottom: 1.5rem; width: 100%; }

#teaser { background: url(/img/site/studio-background.jpg) fixed no-repeat; background-size: cover; color: #fff; padding: 3rem 0; }
#teaser a { background: #000; border-radius: 5px; color: #fff; letter-spacing: 1px; padding: 0.5rem 0.75rem; text-transform: uppercase; }
#teaser a:hover { background: #333;  }
.studio img { display: block; width: 100%; }

#service { letter-spacing: 1px; padding: 3rem 2%; }
#service .item { padding: 0.5rem; text-align: center; }
#service .item p { font-size: 0.825rem; text-align: center; }
#service .icon { background: #eb1e1e; border-radius: 50%; height: 80px; margin: 0 auto 1rem; padding-top:1.5rem; text-align: center; width: 80px;  }
#service .icon i { color: #fff;  }

#title { background: #000; padding: 4rem 0 1rem; }
#profile { padding: 3rem 0; }
.portrait img { border: 1px solid #eee; display: block; width: 100%; }

.buttons { padding-top: 2rem; width: 100%;  }
.buttons div { width: 100%; }
.buttons a { display: block; margin-bottom: 1.5rem; }
.buttons .icon { background: #eb1e1e; border-radius: 50%; display: inline-block; height: 60px; margin: 0 auto 1rem; padding-top:1rem; text-align: center; width: 60px; }
.buttons .icon i { color: #fff; font-size: 1.5rem; }
.buttons p { color: #000; display: inline-block; margin: 0; padding: 1rem; }

#overview { background: #eee; padding: 3rem 0 1rem; }
#overview img { display: block; width: 100%; transition: all ease 0.3s; }
#overview p { text-align: center; }
#overview .slick-slide { margin: 0 0.75rem; }
#overview a:hover img { opacity: 0.8; transition: all ease 0.3s; }

#studio { padding: 3rem 0 1.5rem; }
#studio img { display: block; width: 100%; }
#ambiente { padding: 1.5rem 0 3rem; }
.room  { display: block; margin-bottom: 1.5rem; }
.room h4 { font-size: 1.25rem }
.room img { display: block; width: 100%; }

#klinik { padding: 3rem 0; }
#klinik .center { display: table; margin: 1rem auto 3rem; }
#klinik .icon { background: #eb1e1e; border-radius: 50%; display: inline-block; height: 80px; margin: 0 auto 1rem; padding-top: 1.25rem; text-align: center; width: 80px;  }
#klinik .icon i { color: #fff;  }
#klinik p.bold { color: #000; display: inline-block; margin: 0; padding: 1rem; }
#klinik video { margin-bottom: 3rem; }

#salon { padding: 3rem 0; }  
#salon img { display: block; width: 100%; }
#salon .center { display: table; margin: 1rem auto 3rem; }
#salon .icon { background: #eb1e1e; border-radius: 50%; display: inline-block; height: 80px; margin: 0 auto 1rem; padding-top: 1.25rem; text-align: center; width: 80px;  }
#salon .icon i { color: #fff;  }
#salon p.bold { color: #000; display: inline-block; margin: 0; padding: 1rem; }

#kontakt { padding: 3rem 0; }
#kontakt form { display: block; overflow: auto; }
#kontakt input,
#kontakt textarea,
#kontakt button { border: none; font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: 1px; }
.field input { background: #000; color: #fff; float: left; margin: 1%; padding: 2%; width: 48%; border-radius: 0; }
.fieldlong input { background: #000; color: #fff;  margin: 1%; padding: 1rem 2%; width: 98%; border-radius: 0; }
.fieldlong textarea { background: #000; color: #fff; margin: 1%; padding: 1rem 2%; width: 98%; border-radius: 0;}
.captchapic img { background: #eee; float: left; height: 55px; margin: 1%; padding: 2%; width: 31.333%; }
.captchafield input { background: #000; color: #fff; float: left; height: 55px; margin: 1%; padding: 1rem 2%; width: 31.333%; border-radius: 0; }
.buttonfield input  { background: #eb1e1e; border-radius: 0; color: #fff; cursor: pointer; height: 55px; float: left; margin: 1%; padding: 1rem 2%; text-transform: uppercase; width: 31.333%; }

#map_canvas { background: #eee; height: 25rem; width: 100%; }

#impressum { padding: 3rem 0; }
#impressum  p { font-size: 0.825rem; margin-bottom: 1.2rem; }

#not_found { padding: 3rem 0;  }
#not_found p { text-align: center; }

#footer { background: #000; border-bottom: 1px solid #222; color: #fff; font-size: 0.825rem; letter-spacing: 1px; padding: 2rem; }
#footer a { color: #eb1e1e; display: block; margin-bottom: 0.5rem; }
#footer p { text-align: left; }
#footer img { display: block; margin: 0 auto; }

#sub { background: #000; font-size: 0.75rem; letter-spacing: 2px; padding: 2rem; text-align: center; text-transform: uppercase; }
#sub a { color: #eb1e1e; }


.page { width: 75rem; margin:0 auto; }
.flex { display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;  -webkit-align-items: flex-start; align-items: flex-start; }
.c25 { margin: 1rem 2%; width: 21%; }
.c33 { margin: 1rem 2%; width: 29.333%; }
.c50 { margin: 1rem 2%; width: 46%; }
.c66 { margin: 1rem 2%; width: 62.333%; }
.c100 { margin: 1rem 2%; width: 96%; }

.head_w { border: 6px solid #fff; color: #fff; display: inline-block; font-size: 3rem; letter-spacing: 5px; padding: 1.5rem 2rem; width: auto; }
.head_s { border: 6px solid #000; color: #000; display: inline-block; font-size: 3rem; font-weight: 800; letter-spacing: 5px; margin: 1rem auto; padding: 1.5rem 2rem; width: auto; }
.sub { color: #fff; display: block; font-size: 0.75rem; font-weight: 400; letter-spacing: 2px; margin-top: 1.5rem; }
.small { color: #999; font-size: 0.625rem!important; letter-spacing: 2px; text-transform: uppercase; }
.bold { font-size: 1.25rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.red { color: #eb1e1e; font-weight: 800; letter-spacing: 1px; text-align: center; }
.news { margin: 0 auto; text-align: center; width: 70%; }
.team { margin-bottom: 3rem; }
.guest p { font-size: 0.825rem; line-height: 1.4; }
.sticky { position: fixed!important; top: 0; }
.gap { margin-top: 6rem; }
.mix { display: none; }

video { background: #000000; display: block; width: 100%; }

video#bgvid { position: absolute; bottom: 0;	top: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -200; background: url(/img/site/moderne-creation.png) no-repeat; background-size: cover; }


@media only screen and (max-width: 1200px ) {
	.page { width: 96%; margin: 0 2%; }
	.head_w { border: 6px solid #fff; color: #fff; display: inline-block; font-size: 2.5rem; letter-spacing: 3px; padding: 1.5rem 2rem; width: auto; }
	.head_s { border: 6px solid #000; color: #000; display: inline-block; font-size: 2.5rem; font-weight: 800; letter-spacing: 3px; margin: 1rem auto; padding: 1.5rem 2rem; width: auto; }

	.button .icon { height: 55px!important; width: 55px!important; }
	.button p { padding: 0; padding-left: 0.5rem; font-size: 1rem; }
	.button { padding-top: 0.5rem; }
	.button a { margin-bottom: 0.5rem; }
	.button .icon i { color: #fff; font-size: 1.25rem; }


}


@media only screen and (max-width: 960px ) {
	#navigation, #logo { padding: 1.25rem; }
	#logo h1 { padding-bottom: 1px; }
	p { text-align: left; }


	.controls button { font-size: 0.75rem; letter-spacing: 1px; margin: 0.25rem; padding: 0.5rem 0.75rem; }

	.button { }
	.button a { margin-bottom: 0.5rem; }
	.button .icon { height: 50px!important; width: 50px!important; }
	.button .icon i { color: #fff; font-size: 1.25rem; }

	.button p {font-size: 0.825rem; }

	#index .c25 { width: 29.333%; }
	#index .c33, #index .c66 { width: 46%; }
	#index .c50 { width: 96%; }

	.room .c50 { width: 100%; }

	#klinik  { flex-direction: column-reverse; }
	#klinik .c50 { width: 96%; }
	#klinik .center { display: none; }
	.red { text-align: left; }
	
	#impressum .c33 { width: 46%; }

	.head_w {  font-size: 2rem; letter-spacing: 3px; line-height: 1.2;  }
	.head_s { font-size: 2rem; font-weight: 800; letter-spacing: 3px; }
	.sticky { position: relative!important; }
	.gap { margin-top: 0; }
	.small {  letter-spacing: 1px;  }

	.toggleMenu { font-weight: 800; padding: 1.25rem; width: 30%; border-bottom: 1px solid #eee; } 
	.toggleMenu:before { line-height: 1.5rem; }
}

@media only screen and (max-width: 780px ) {
	#logo { width: 70%; border-bottom: 1px solid #eee; }
	#logo h1 { padding-bottom: 0px; }

	#navigation {  position: relative; padding: 0; width: 100%;  }
	#navigation ul { background: #fff; padding: 1rem 0 0 ; width: 100%; text-align:center; }
	#navigation ul li a { padding: 1rem ; }


	.buttons {padding-top: 0.125rem;  }
	.buttons div { width: 50%; }

	.bounce-up , .bounce-right , .bounce-left { transition: none; opacity: 1; transform: none; } 

	.head_w { font-size: 2rem; letter-spacing: 3px;  }
	.head_s { font-size: 1.25rem; font-weight: 800; letter-spacing: 3px; }
	.bold { font-size: 1rem; }
	#index .c25 { width: 46%; }
	#index .c33, #index .c66 { width: 46%; }
	#index .c50 { width: 96%; }

	#profile .c66 { width: 96%; }
	#profile .c33 { width: 96%; }

	#kontakt .c66 { width: 96%; }
	#kontakt .c33 { width: 96%; }
	
	#kontakt .c66 { width: 96%; }
	
	#impressum .c33 { width: 96%; }

	#footer .c25 { width: 29.333%; }
	#footer .c25:first-child { display: none; }
	#footer i { display: none; }
	#footer img { width: 100%; }
}

@media only screen and (max-width: 520px ) {

	#index .c25 { width: 96%; }
	#index .c33, #index .c66 { width: 96%; }
	#index .c50 { width: 96%; }
	
	#studio { flex-direction: column-reverse; }
	#studio .c33 { width: 96%; }
	#studio .c66 { width: 96%; }

	.buttons div { width: 100%; }

	.field input { padding: 1.5rem 2%; margin: 1rem 1%; width: 98%;}
	.fieldlong input { padding: 1.5rem 2%; margin: 1rem 1%; width: 98%;  }
	.fieldlong textarea { padding: 1.5rem 2%; margin: 1rem 1%; width: 98%;}
	.captchapic img { margin: 1rem 1%; width: 48%; }
	.captchafield input { margin: 1rem 1%; width: 48%; }
	.buttonfield input  { margin: 1rem 1%; width: 98%; }

	#footer .c25 { width: 46%; }
	#footer .c25:first-child { display: inline-block; }
}