/* CSS Document */

@import url('/css/coco.min.css');
@import url('/css/navigation.css');
@import url('/css/font-awesome.min.css');
@import url('/css/slick.css');
@import url('/css/slick-theme.css');
@import url('/css/lightcase.css');
@import url('/css/overlay.css');

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/Roboto400.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/RobotoCondensed400.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Tulpen One';
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/TulpenOne.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { margin: 0; padding: 0; box-sizing: border-box!important; -webkit-box-sizing: border-box!important; outline: none; }
::selection { background: #B2AAAB; color: #40152A; /* WebKit/Blink Browsers */ }
::-moz-selection { background: #B2AAAB; color: #40152A; /* Gecko Browsers */ }

html { background: #40152A; color: #ddd; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.5; }
body { position: relative; }

h1 { color: #731630; font-family: 'Tulpen One'; font-size: 9rem; font-weight: bold; line-height: 1.2; margin-bottom: 2rem; text-transform: uppercase; text-shadow: 0 0 5px #333333; }
h1:after { border-top: 5px solid; content:" "; display: block; margin: 0 auto; max-width: 400px; box-shadow: 0 0 5px #333333;  width: 50%; }
h2 { color: #ddd; font-family: 'Tulpen One'; font-size: 4rem; font-weight: normal; letter-spacing: 1px; margin-bottom: 3rem; text-align: center; }
h2:after { border-top: 2px solid; content:" "; display: block; margin: 0 auto; width: 30%; }
h3 { margin-bottom: 2rem; }
h4 { font-family: 'Roboto Condensed', sans-serif; font-size: 1.25rem; font-weight: normal; margin-bottom: 0.75rem; text-transform: uppercase; }
a, a:link, a:visited { color: #eee; display: block; text-decoration: none; }
p { margin-bottom: 1rem; }
i { line-height: 0.5!important; display: block; }
img { display: block; max-width: 100%; }

.content { margin: 1rem auto; max-width: 1200px; width: 96%; }
.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; }
.flx-center				{ justify-content: center; align-items: center; }
.c15 { padding: 1.5rem 2%; width: 15%; }
.c25 { padding: 1.5rem 2%; width: 25%; }
.c33 { padding: 1.5rem 2%; width: 33.333%; }
.c33 img { display: block; width: 100%; }
.c66 { padding: 1.5rem 2%; width: 66.666%; }
.c75 { padding: 1.5rem 2%; width: 75%; }
.c100 { padding: 1.5rem 2%; width: 100%; }

#header { background: url(/img/site/back-start.jpg) no-repeat top center; background-attachment: scroll; background-size: cover;  height: 100vh; position: relative; text-align: center; }
#header .enter { bottom: 10vh; left: 0; position: absolute; right: 0;  text-align: center; }
#header .enter a { letter-spacing: 1px; margin-bottom: 1rem; text-transform: uppercase; text-shadow: 0 0 5px #333333; }
#header .enter a:after { color: #fff; content:'\f0d7'; display: block; font-family: FontAwesome; font-size: 2rem; -webkit-animation: arrow-jump 1s infinite; /* Safari 4+ */ -moz-animation: arrow-jump 1s infinite; /* Fx 5+ */ -o-animation: arrow-jump 1s infinite; /* Opera 12+ */ animation: arrow-jump 1s infinite; /* IE 10+, Fx 29+ */ }

#nav { background: #731630; font-family: 'Roboto Condensed', sans-serif; position: relative; width: 100%; z-index: 999; left: 0; right: 0; }
#nav .desktop { list-style: none; text-align: center; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; }
#nav .desktop li a { padding: 1.75rem 2rem; text-transform: uppercase; transition: .5s ease all; }
#nav .desktop li a:hover { background: #40152A; transition: .5s ease all; }
#nav .mobile { display: none; }

#footer { background: #40152A; padding: 2rem 0; text-align: center; }
#footer a { display: inline-block; padding: 0.25rem; }
#footer a:hover { color: #B2AAAB; }
.button { cursor: pointer; }

.about { background: #40152A; padding: 5rem 0; }
.about ul { 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; }
.about ul li { font-size: 1.1rem; list-style: none;  margin: 0 1rem 0 1rem; width: 30%; }
.about ul li:before { color: #B2AAAB; content: "\f0da"; font-family: FontAwesome; margin: 0 0.5rem 0 -1rem; }
.about .topnote	{ box-sizing: border-box; padding: 1rem 1rem 0 1rem; border: 1px solid #ddd;  margin: 1rem auto; max-width: 600px; width: 96%; }

.teaser { background: #731630; padding: 2rem 0; text-align: center; }
.teaser p { font-family: 'Tulpen One', sans-serif; font-size: 3rem; letter-spacing: 1px; margin: 0; }

.news { background: url(/img/site/back-news.jpg) no-repeat top center; background-attachment: fixed; background-size: cover; padding: 5rem 0; }
.news img { display: block; width: 100%; }
.news h2 { text-shadow: 0 0 5px #333;}
.news h2:after { box-shadow: 0 0 5px #333; }
.entry { background: rgba(115,22,48,0.8); padding: 2rem 3%; }
.news ul { list-style: none; }
.news ul li { margin-bottom: 0.5rem; }
.slider { display: block; margin: 0 auto; width: 80%; }
.slick-slide { margin: 0 2%; }
.slick-dots li button:before { color: #731630; }

.klinik { background: url(/img/site/back-news.jpg) no-repeat top center; background-attachment: fixed; background-size: cover; padding: 5rem 0; }
.klinik img { display: block; width: 100%;}
.kliniktext { margin: 0 auto; max-width: 1200px; width: 96%; padding: 1.5rem 2%; width: 100%; background: rgba(115,22,48,0.8); padding: 2rem 2%;}
.klinik h2 { text-shadow: 0 0 5px #333; }
.klinik h2:after { box-shadow: 0 0 5px #333; }

.video { display: block; margin: 2rem 1% 0; width: 48%; }
video { width: 98%; margin: 0 1% ; }

.gallery { background: #B2AAAB; padding: 5rem 0; }
.gallery .thumb { display: block; width: 23%; margin: 1rem 1%; overflow: hidden; position: relative; }
.gallery .thumb .details { background: rgba(115,22,48,0.8); bottom: -7rem ; padding: 0.5rem;  position: absolute; text-align: center; transition: 0.5s all ease; width: 100%; }
.gallery .thumb:hover .details { bottom: -1rem ; transition: 0.5s all ease; }
.gallery .thumb:hover .first img { transform: scale(1.5) rotate(5deg); transition: 0.5s all ease; }
.gallery .first img { display: block; transition: 0.5s all ease; width: 100%; }

.dates { background: rgba(115,22,48,0.8); border: none; border-collapse: collapse; font-family: 'Roboto Condensed', sans-serif; font-size: 1.25rem; margin: 0 1% 2rem; text-align: center; width: 31.333%; }
.dates td { height: 2.5rem; vertical-align: middle; }
.dates tr:nth-child(odd) {  text-transform: uppercase; }
.dates tr:nth-child(even) { background: #40152A; }
.arrow { display: block; margin: 0 auto; }
.arrow:before { background: #40152A; content: " "; display: block; height: 1.25rem; margin: 0 auto; transform: skewX(30deg); width: 1rem; }
.arrow:after { background: #40152A; content: " "; display: block; height: 1.25rem; margin: 0 auto; transform: skewX(-30deg); width: 1rem; }

.social { background: #731630; padding: 2rem 0; text-align: center; }
.social p { font-family: 'Tulpen One', sans-serif; font-size: 3rem; letter-spacing: 1px; margin: 0; }
.social a { display: inline-block; }
.social i { font-size: 2.5rem; margin: 1rem; }

.appointment { background: url(/img/site/back-appointment.jpg) no-repeat top center; background-attachment: fixed; background-size: cover; padding: 6rem 0;  }

.imprint { background: #40152A; color: #ffffff; overflow: auto; }
.imprint h3 { color: #ddd; font-family: 'Tulpen One'; font-size: 3rem; font-weight: normal; letter-spacing: 1px; margin-bottom: 2rem; text-align: left; }
.imprint p { font-size: 0.825rem; }
.imprint ul { list-style: disc; }
.imprint ul li { font-size: 0.825rem; }
iframe.piwik      { border: none; height: 150px; width: 100%; }

.contact { background: #40152A; padding: 6rem 0;  }
.fieldlong input, .fieldlong textarea { border: none; display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 1.125rem; margin: 0.5rem auto; padding: 1rem 2%; max-width: 700px; width: 80%; }
.fieldapprove { margin: 1rem auto; max-width: 700px; width: 80%; }
.captchapic img { display: block; margin: 0.5rem auto; max-width: 700px; width: 80%; }
.captchafield input { border: none; display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 1.125rem; margin: 0.5rem auto; padding: 1rem 2%; max-width: 700px; width: 80%; }
.buttonfield input { background: #731630; border: none; color: #ddd; cursor: pointer; display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 1.5rem; margin: 0.5rem auto; padding: 1rem 2%; text-transform: uppercase; max-width: 700px; width: 80%; }
.buttonfield input:disabled { background: #888888; cursor: default; }
.subject											{ position: absolute; visibility: hidden; z-index: -1; width: 5rem!important; }

.links { background: #B2AAAB; padding: 6rem 0; text-align: center; }
.links img { margin: 0 auto; }
.tab { overflow: hidden; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; }
.tab a { background-color: #731630; border: none; color: #DDDDDD; font-family: 'Roboto Condensed', sans-serif; font-size: 1rem; outline: none; cursor: pointer; padding: 0.5rem 1rem; transition: 0.3s; }
.tab a:hover { background: #40152A; }
.tab a.active { background: #40152A; }
.tabcontent { display: none; margin: 2rem 0; padding: 1rem 0.5rem; }
.tabcontent a { color: #40152A; display: inline-block; font-size: 0.8rem; }
.tabcontent a:hover { color: #731630; }

.columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; text-align: justify; }
.centered { text-align: center; }
.note { background: rgba(115,22,48,0.8); margin: 2rem 1%; overflow: auto; padding: 1rem 2% 0; text-align: center; width: 98%; }
.small { font-size: 0.75rem; }
.sticky { position: fixed!important; top: 0; transition: 1s all ease;  z-index: 9999; width: 100%; }
.gap { margin-top: 80px; }


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

	.dates { width: 48%; }
}

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


	.about ul { margin-left: 1rem; }
	.about ul li { width: 31.333%; }
}

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

	#nav .mobile { list-style: none; text-align: center; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-evenly; }
	#nav .mobile li { padding: 1rem 1%; text-transform: uppercase; transition: .5s ease all; width: 16.666% }
	#nav .mobile li:hover { background: #40152A; transition: .5s ease all; }
	#nav .desktop { display: none; }

	.gap { margin-top: 56px; }
	.gallery .thumb { width: 48%;  }
	.gallery .thumb .details { bottom: 0rem ; }
	.gallery .thumb:hover .first img { transform: scale(1) rotate(0deg); }
	.dates { width: 98%; }
	.video { width: 100%; }
}

@media screen and (max-width: 560px) {
	h1 { font-size: 6rem; }
	.about .c100 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
	.about ul li { width: 48%; }
	.gallery .thumb { width: 98%; }
	.columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
	.tab { overflow: hidden; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; }
	.tab a { width: 50%; }
	.tabcontent img { display: block; width: 100%; }
}

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

	.about ul li { width: 98%; }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	#header, .news, .appointment, .klinik { background-attachment: scroll; }
}


/* Animation*/

@-webkit-keyframes arrow-jump {
	0%   { opacity: 0;}
	100% { opacity: 1; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 

}

