@import url(font-awesome.min.css);
@import url(navigation.css);
@import url(flip.css);
@import url(slick.css);
@import url(slick-theme.css);
@import url(lightcase.css);
@import url(skin.css);

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/Lato300.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: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Lato400.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: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/Lato700.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: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/GreatVibes.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;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body { font-size: 16px; font-family: 'Lato', sans-serif; line-height: 1.4; }


/* Styleswitcher */

.styleswitcher { background: rgba(0,0,0,0.7); font-size: 100%; color: #fff; padding: 10px; position: fixed; right: 0; top: 50px; text-align: right; z-index: 9; }
.styleswitcher p { text-transform: uppercase; }
.styleswitcher a { cursor: pointer; display: block; margin: 3px; overflow: hidden; width: 80px; }
.styleswitcher a.standard { background: #a62139; color: #a62139; }
.styleswitcher a.petrol { background: #327870; color: #327870; }
.styleswitcher a.purple { background: #40253D; color: #40253D; }
.styleswitcher a.dark { background: #333; color: #333; }



h1 { font-size: 2.375rem; font-family: 'Great Vibes', sans-serif; font-weight: 400; margin-top: 1rem; }
h2 { font-size: 1.75rem; font-family: 'Lato', sans-serif; font-weight: 300; margin-bottom: 30px; text-transform: uppercase; width: 100%; }
h3 { font-size: 1.75rem; font-family: 'Lato', sans-serif; font-weight: 300; margin-bottom: 50px; text-align: center; width: 100%; }
h4 { margin-bottom: 10px; font-weight: 700; }
h5 { font-size: 1.375rem; font-weight: 300; margin-bottom: 10px; }
hr { border: none;  display: block;  margin: 30px auto 15px; }
a { text-decoration: none; }
p { margin-bottom: 10px; text-align: justify; }
ul { list-style: none; margin-bottom: 10px; }
table { width: 100%; margin-bottom: 10px; }
table tr td { padding: 5px; vertical-align: top;  }
img { display: block; max-width: 100%; }
section { margin: 60px 0 80px; }
section.newstop { margin-bottom: 0; }
.newsentry { margin: 20px 0 60px; border-bottom: 1px solid #aaa;; padding-bottom: 30px; }
.newsentry h3 { font-size: 1.5rem; text-align: left; text-transform: uppercase; margin-bottom: 20px; }
.newsentry a	{ color: #912bbc; }
.newsentry .col100 { width: 100%; margin: 15px 0; }

.page { margin: 0 auto; width: 1200px; }
.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; }
.col25 { width: 21%; margin: 15px 2%; }
.col30 { width: 26%; margin: 15px 2%; }
.col33 { width: 29.333%; margin: 0 2% 15px; }
.col50 { width: 46%; margin: 15px 2%; }
.col66 { width: 62.666%; margin: 15px 2%; }
.col100 { width: 96%; margin: 15px 2%; }

.answer { padding: 15px 20px; }
.back { padding: 40px 20px; font-size: 1rem; height: 100%; }
.back p { text-align: center; }
.bottom { background-size: cover; padding-top: 35vh; }
.box { padding: 15px 20px; }
.box p { text-align: left; }
.box img { width: 100%; height: auto; display: block; }
.box a:link { color: #fff; }
.box a:visited { color: #fff; }
.box #info a:hover { color: #fff; }
.box a:focus { color: #fff; }
.box a:active { color: #fff; }
.box a:visited:hover { color: #fff; }
.flip-container, .flipper { text-align: center; width: 100%; height: 150px; }
.front { padding: 35px 20px 40px; font-size: 1.25rem; height: 100%; }
.front i, .back i { margin-bottom: 10px; }
.gb-name { color: #777777; }
.intro { margin-bottom: 50px; }
.line { width: 50%; }
.map img { width: 100%; }
.note { border: 1px solid #912bbc; margin: 1rem 0; padding: 1rem; }
.profil img { border-radius: 50%; width: 100%; display: block; }
.question { font-size: 1.125rem; margin-bottom: 10px; padding: 1rem 1.5rem; text-transform: uppercase; cursor: pointer; }
.question:before { content: "\f05a"; display: inline-block; font-family: FontAwesome; font-size: 1.75rem; height: 40px; margin-right: 20px; text-align: center; width: 45px;  }
.right { text-align: right; }

.slider-single { background: #c7d9c8; display: block; margin: 70px 0 0px; padding: 10px; }
.slider-single .slick-slide {  }
.slider-single img { display: block; margin: 0 auto; width: 100%; }

.slider-nav { background: #c7d9c8; border-top: none; }
.slider-nav .slick-slide { padding: 20px; }
.slider-nav img {  display: block; margin: 0 auto; width: 100%; }

.sidebar-slider img { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.sidebar-slider strong { font-size: 1.25rem; }
.sidebar-slider .datum {  }

.team { margin: 20px 2%; padding: 50px 20px 30px; text-align: center; transition: all ease 0.4s;}
.team:hover { transition: all ease 0.4s; }
.team img { border-radius: 50%; display: block;  margin: 0 auto 50px; width: 70%; }
.team p { font-weight: 300; text-align: center; }

img.col25 { border-radius: 50%; }


header { height: 65vh; }
header img { margin: 2% auto 0; display: block; width: 20%; }

#logo { width: 30%; padding: 0 15px; }
#logo img { display: block; width: 100%; margin-top: 17px; }
#navigation { width: 70%; padding: 0 15px; text-align: right; }
#navigation ul { margin: 0; }
#navigation a { display: block; margin: auto; padding: 30px 20px; text-transform: uppercase; }

#main { padding-bottom: 50px; }
#main ul { margin-left: 35px; column-count: 3; column-gap: 1.5rem; margin-bottom: 1rem; }
#main ul li { margin-bottom: 7px; margin-left: -10px;  break-inside: avoid; break-after: avoid; break-inside: avoid-page; page-break-inside: avoid; } 
#main ul li:before { content: "\f055"; font-family: FontAwesome; color: #aaa; margin: 0 10px 0 -24px; }

.gallery { margin-bottom: 2rem; }
.gallery a { width: 18%; margin: 0 1% 1rem; }
.gallery a img { width: 100%; height: 100%; object-fit: cover; }

footer { padding: 30px 0 120px; background: #222222; background: url(/img/site/footer-bg.jpg) repeat center center; color: #fff; }
footer p { text-align: left; }
footer .icon { font-size: 2rem; margin-right: 20px; }
footer .seal a	{ display: inline-block; margin: 0 0 0 0.5rem; }

#info { padding: 10px 0 0; position: fixed; bottom: 0; width: 100%; }
#info p { text-align: center; font-size: 1.5rem; }
#info i { margin: 0 3px 0 7px; }

form input, form textarea { background: #eee; border: none; border-radius: 0; color: #222222; font-family: 'Lato', sans-serif; font-size: 1rem; margin: 0 0 2rem; padding: 1.5rem;  }
.col33 form input, .col33 form textarea { padding: 2%; margin: 0 0 1.5rem;}
form button { font-family: 'Lato', sans-serif; }

.field input { float: left; width: 48%;}
.fieldlong input { width: 100%;  }
.fieldlong textarea { width: 100%;}
.captchapic img { border: none; margin: 0 0 2rem; float: left; width: 31.333%; }
.col33 .captchapic img { margin: 0 0 1.5rem; float: none; width: 100%; }
.captchafield input { height: 70px; float: left; width: 31.333%; margin: 0 0 2rem 3%; }
.col33 .captchafield input { float: none; width: 100%; margin: 0 0 1.5rem 0; height: auto; }
.buttonfield input  { background: #222222; border: none; padding: 1rem 1%; height: 70px; font-size: 1.125rem; margin: 0 0 2rem 3%; width: 31.333%; float: left; color: #fff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; border-radius: 0; }
.col33 .buttonfield input  { height: 70px; margin: 0 0 2rem 0; width: 100%; float: none; height: auto; padding: 1rem 0; }

.banner, .banner p { text-align: center;  margin-bottom: 20px; }
.banner { margin-top: 3rem; }
.banner img { margin: 0 auto; }

/* FARBEN & CO. */

.gradient { background: #8323b9; background: linear-gradient(180deg, #912bbc, #8c28bb, #8826ba, #8323b9, #7e21b9, #791fb8, #741cb7, #6f1ab6); }

#index { background: #111111; color: #fff; }
#index h1 { color: #912bbc; }
#index h2 { color: #912bbc; }
#index header { background: url(/img/site/header-index.jpg) center center no-repeat fixed; background-size: cover;  }

@media screen and (-webkit-min-device-pixel-ratio:0) {
#index header { background-attachment: scroll; }
}
#index footer a:link, #index footer a:visited, #index footer a:focus, #index footer a:active { color: #912bbc; }
#index footer a:hover, #index footer a:visited:hover { color: #fff; }

#index #navigation a, #index #navigation a:link, #index #navigation a:visited { color: #fff; }
#index #navigation a:hover, #index #navigation a:active { background: #8323b9; background: linear-gradient(180deg, #912bbc, #8c28bb, #8826ba, #8323b9, #7e21b9, #791fb8, #741cb7, #6f1ab6); color: #fff; }

#index #main ul li:before { color: #912bbc; }

form input, form textarea { background: #fff; }
.buttonfield input  { background: #8323b9; background: linear-gradient(180deg, #912bbc, #8c28bb, #8826ba, #8323b9, #7e21b9, #791fb8, #741cb7, #6f1ab6); }

#index .top { background: rgba(0,0,0,0.7); }
#index .bottom { background: url(/img/site/lady-alissa-dom-teaser.jpg) center center no-repeat fixed; background-size: cover;  }
@media screen and (-webkit-min-device-pixel-ratio:0) {
#index .bottom { background-attachment: scroll; }
}

#index .box { background: #8323b9; background: linear-gradient(180deg, #912bbc, #8c28bb, #8826ba, #8323b9, #7e21b9, #791fb8, #741cb7, #6f1ab6); color: #fff; }
#index .box h2 { color: #fff; }
#index .line { border-bottom: 1px solid #912bbc; }
#index .front { background: #8323b9; background: linear-gradient(180deg, #912bbc, #8c28bb, #8826ba, #8323b9, #7e21b9, #791fb8, #741cb7, #6f1ab6); color: #fff; }
#index .back { background: #fff; color: #222; }
#index .question { border: 1px solid #912bbc; color: #912bbc; }
#index .question:before { color: #912bbc; }
#index .newsentry h3 { color: #912bbc; }

#index #info { background: #8323b9; background: linear-gradient(180deg, #912bbc, #8c28bb, #8826ba, #8323b9, #7e21b9, #791fb8, #741cb7, #6f1ab6); color: #fff; }
#index #info a:link { color: #fff; }
#index #info a:visited { color: #fff; }
#index #info a:hover { color: #222; }
#index #info a:focus { color: #fff; }
#index #info a:active { color: #fff; }
#index #info a:visited:hover { color: #222; }

#index .sidebar-slider a:link { color: #fff; }
#index .sidebar-slider a:visited { color: #fff; }
#index .sidebar-slider a:hover { color: #222; }
#index .sidebar-slider a:focus { color: #fff; }
#index .sidebar-slider a:active { color: #fff; }
#index .sidebar-slider a:visited:hover { color: #222; }

#index .banner a:link, #index footer a:visited, #index footer a:focus, #index footer a:active { color: #912bbc; }
#index .banner a:hover, #index footer a:visited:hover { color: #fff; }




#praxis { background: #ffffff; color: #2e2825; }
#praxis h1, #praxis h2 { color: #327870; }
#praxis header { background-image: url(/img/site/header-index.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top center; background-size: cover;  }
@media screen and (-webkit-min-device-pixel-ratio:0) {
#praxis header { background-attachment: scroll; }
}
/*#praxis footer { background: #222222;
background: -moz-linear-gradient(top,  #222222 0%, #333333 50%, #222222 100%);
background: -webkit-linear-gradient(top,  #222222 0%,#333333 50%,#222222 100%);
background: linear-gradient(to bottom,  #222222 0%,#333333 50%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#222222',GradientType=0 ); color: #fff; }*/
#praxis footer a { color: #c7d9c8; }
#praxis footer a:hover { color: #327870; }

#praxis #navigation a, #praxis #navigation a:link, #praxis #navigation a:visited { color: #2e2825; }
#praxis #navigation a:hover, #praxis #navigation a:active { background: #327870; color: #fff; }

#praxis #main ul li:before { color: #327870; }

#praxis .bottom { background-image: url(/img/site/studio-index.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover;  }
@media screen and (-webkit-min-device-pixel-ratio:0) {
#praxis .bottom { background-attachment: scroll; }
}
#praxis .box { background: #327870; color: #fff; }
#praxis .box h2 { color: #fff; }
#praxis .top { background: rgba(255,255,255,0.7); }

#praxis #info { background: #327870; color: #fff; }
#praxis #info a:link { color: #fff; }
#praxis #info a:visited { color: #fff; }
#praxis #info a:hover { color: #c7d9c8; }
#praxis #info a:focus { color: #fff; }
#praxis #info a:active { color: #fff; }
#praxis #info a:visited:hover { color: #c7d9c8; }





@media screen and (max-width: 1280px) {
	
	.page { width: 960px; }
	header img { width: auto; height: 45vh; margin-top: 2%; }
	#logo img { margin-top: 9px; }
	#navigation a { padding: 25px 15px; }
	.col25 { width: 29.333%; }
	.col50 { width: 29.333%; }
	h1 { font-size: 2.25rem; }

	
	}

@media screen and (max-width: 980px) {
	
	.styleswitcher { width: 100%; background: #222222; left:0; top: 0; text-align: center; padding: 5px 2%; position: fixed; font-size: 100%; z-index: 9; }
	.styleswitcher p { margin: 0; text-align: center; }
	.styleswitcher a { width: 50px; display: inline-block; }
	
header { height: 55vh; }
	header img { width: auto; height: 35vh; margin-top: 2%; }
	#logo { width: 46%; }
	#logo img { margin-top: 4px; }
	.page { width: 98%; }
	#navigation { width: 100%; text-align: center; }
	h1 { font-size: 2.125rem; }

	.toggleMenu { font-weight: 800; padding: 1.25rem; text-align : right; width: 54%; } 
	.toggleMenu:before { line-height: 1.5rem; }
	.col25 { width: 46%; margin: 10px 2%; }
	.col33 { width: 46%;  margin: 10px 2%; }
	.col66 { width: 46%; margin: 10px 2%; }
	.col50 { width: 96%; margin: 10px 2%; }

	#main ul { column-count: 2; }
	.gallery a { width: 31.333%; margin: 0 1% 1rem; }
	
	}

@media screen and (max-width: 720px) {
	#logo { width: 50%; }
	h1 { font-size: 2.125rem; }
	#index header, #praxis header { height: 85vh; margin-top: 25vh; background-repeat: no-repeat; background-attachment: scroll; background-position: top center; background-size: cover; }
	#index .bottom, #praxis .bottom { background-repeat: no-repeat; background-attachment: fixed; background-position: top center; background-size: cover; }
	header img { width: auto; height: 35vh; margin-top: 2%; }
	.toggleMenu { width: 50%; } 
#navigation { background: #222; color: #222;  }
	#navigation ul li { border-bottom: 1px solid #912bbc; }

.col30 { width: 26%; }
.col33 { width: 96%; }

.col66 { width: 96%;}
	.col100 { margin: 7px 1%; }
		
	.banner img { width: 70%; }
	
	}

@media screen and (max-width: 520px) {
#logo { width: 100%; }
	#logo img { width: 80%; margin: 9px auto; }
	h1 { font-size: 3rem; text-align: center; }
	#index header, #praxis header { height: 40vh; margin-top: 14vh; background-repeat: no-repeat; background-attachment: scroll; background-position: top center; background-size: contain; }
	#index .bottom, #praxis .bottom { background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; }
	header img { width: auto; height: 32vh; margin-top: 5%; }
	.toggleMenu { text-align : center; width: 100%; } 
	.col25 { width: 96%; }
	.field input { width: 98%;}
	.captchapic img {width: 48%; }
.captchafield input {  width: 48%;  }
.buttonfield input { width: 99%; margin: 0 auto; }
		#main ul { column-count: 1; }
		.gallery a { width: 48%; margin: 0 1% 1rem; }
	
	.banner img { display: none; }
.banner p { font-size: 100%; }
	
}