@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');


@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(ilightbox.css);
@import url(lightcase.css);
@import url(skin.css);
@import url(purple.css);

* { 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: 3.000rem; font-family: 'Lato', sans-serif; font-weight: 400; margin-top: 10px; text-transform: uppercase; }
h1 span { font-weight: 200; }
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; 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; }
img { 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; }

.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; }
.intro { margin-bottom: 50px; }
.line { width: 50%; }
.map img { width: 100%; }
.profil img { border-radius: 50%; width: 100%; display: block; }
.question { font-size: 1.125rem; margin-bottom: 10px; padding: 15px 20px; text-transform: uppercase; cursor: pointer; }
.question:before { border-radius: 50%; content: "\f21e"; display: inline-block; font-family: FontAwesome; font-size: 1.75rem; height: 40px; margin-right: 20px; text-align: center; width: 45px; padding: 5px 0 0;  }
.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: 40px 30px; text-transform: uppercase; }

#main { padding-bottom: 50px; }
#main ul { margin-left: 35px; }
#main ul li { margin-bottom: 7px; margin-left: -10px;} 
#main ul li:before { content: "\f055"; font-family: FontAwesome; color: #aaa; margin: 0 10px 0 -24px; }

.gallery { -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
     -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px; margin-bottom: 7%; }
.gallery img { margin-bottom: 5px; }

.videos .entry {width: 100%; }
.videos video { max-width: 100%; }

#main .gallery ul { margin-left: 0; }
#main ul li { margin-bottom: 0; margin-left: 0;}
#main .gallery ul li:before { content: ""; margin: 0; display: none; }

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

#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 input[type='submit'] { background: #327870; border: none; cursor: pointer; font-family: 'Lato', sans-serif; font-size: 1.125rem; font-weight: 400; padding: 1.5rem; text-transform: uppercase; letter-spacing: 1px;  }
form input[type='submit']:disabled { background: #555555; color: #f5f5f5; cursor: default; }
form button { font-family: 'Lato', sans-serif; }

.field input { float: left; width: 48%;}
.fieldlong input { width: 100%;  }
.fieldlong textarea { width: 100%;}
.fieldapprove { border: 1px solid #327870; border-radius: 3px; text-align: left; margin: 0 0 1.5rem; padding: 1rem; }
.fieldapprove input { margin: 0 0 0; }
.fieldapprove a { color: #327870; display: inline-block; padding: 0 0 0.0875rem; }
.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; }

.meldung { border: 1px solid #327870; padding: 1rem; }

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

/* FARBEN & CO. */
/*
#index { background: #ffffff; color: #222222; }
#index h1, #index h2 { color: #d42a4c; }
#index header { background-image: url(/img/site/header-index.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; 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: #d42a4c; }
#index footer a:hover, #index footer a:visited:hover { color: #a62139; }

#index #navigation a, #index #navigation a:link, #index #navigation a:visited { color: #222222; }
#index #navigation a:hover, #index #navigation a:active { background: #a62139; color: #fff; }

#index .top { background: rgba(255,255,255,0.7); }
#index .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) {
#index .bottom { background-attachment: scroll; }
}
#index .box { background: #a62139; color: #fff; }
#index .box h2 { color: #fff; }
#index .line { border-bottom: 1px solid #a62139; }
#index .front { background: #333333; color: #fff; }
#index .back { background: #222222; color: #fff; }
#index .question { border: 1px solid #d42a4c; color: #d42a4c; }
#index .question:before { background: #d42a4c; color: #fff; }
#index .newsentry h3 { color: #d42a4c; }

#index #info { background: #a62139; color: #fff; }
#index #info a:link { color: #fff; }
#index #info a:visited { color: #fff; }
#index #info a:hover { color: #d42a4c; }
#index #info a:focus { color: #fff; }
#index #info a:active { color: #fff; }
#index #info a:visited:hover { color: #d42a4c; }

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

#index .banner a:link, #index footer a:visited, #index footer a:focus, #index footer a:active { color: #d42a4c; }
#index .banner a:hover, #index footer a:visited:hover { color: #a62139; }
*/



#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; }
	.gallery { -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
     -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px; }
.gallery img { margin-bottom: 5px; }
	
	}

@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%; }
	
	.gallery { -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
     -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px; }
.gallery img { margin-bottom: 5px; }
	
	}

@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: #fff;  }
	#navigation ul li { border-bottom: 1px solid #eee; }

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

.col66 { width: 96%;}
	.col100 { margin: 7px 1%; }
	
	.gallery { -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
     -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px; }
.gallery img { margin-bottom: 5px; }
	
	.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; }
	
		.gallery { -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
     -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px; }
.gallery img { margin-bottom: 5px; }
	
	.banner img { display: none; }
.banner p { font-size: 100%; }
	
}