/* CSS Dokumant */

@import url('https://fonts.googleapis.com/css?family=Playball|Lora');
@import url('/assets/css/font-awesome.min.css');
@import url('/assets/css/slick-theme.css');
@import url('/assets/css/slick.css');
@import url('/assets/css/chocolat.css');

* { margin: 0; padding: 0; }
::selection { background: #7c449b; /* WebKit/Blink Browsers */ }
::-moz-selection { background: #7c449b; /* Gecko Browsers */ }
html { background: url('/data/site/template-back.jpg') no-repeat top center fixed; background-size: cover; color: #dddddd; font-family: 'Lora', serif; font-size: 16px; line-height: 1.5; }

.styleswitcher { background: #222222; font-size: 100%; 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: #b30074; color: #b30074; }
.styleswitcher a.petrol { background: #009891; color: #009891; }
.styleswitcher a.violett { background: #7c449b; color: #7c449b; }
.styleswitcher a.golden { background: #d7c69a; color: #d7c69a; }

h1 .headline { color: #ffffff; font-family: 'Playball', cursive; font-size: 230%; font-weight: normal; line-height: 0.8; }
h1 .subline { color: #ffffff; font-size: 50%; font-family: 'Lora', serif; font-weight: normal; line-height: 1;}
h2 { color: #ffffff; font-size: 150%; font-weight: normal; margin-bottom: 20px; }
h3 { font-size: 120%; font-weight: normal; margin-bottom: 10px; }
h4 { display: inline-block; font-size: 100%; margin: 15px 0 ; padding: 0 15px; position: relative; text-transform: uppercase; }
h4:before, h4:after { background: #7c449b; content: ""; display: block; height: 1px; position: absolute; top: 50%; width: 60px; }
h4:before { right: 100%; }
h4:after { left: 100%; }
p { font-size: 90%; margin-bottom: 10px; text-align: justify; }
a, a:link, a:visited { color: #7c449b;  outline: none; text-decoration: none; }
a:hover, a:active { color: #dddddd; outline: none; text-decoration: none; }
hr { border: none; border-bottom: 1px solid #ffffff; margin: 20px 0;  }
code { text-align: center; }
img { max-width: 100%; }

#sidebar { background: url('/data/site/sidebar-back-violett.jpg'); box-shadow: rgba(0,0,0,1) 0px 0px 20px; float: left; height: 100%; overflow: visible; position: fixed; width: 300px;}
.logo { overflow: hidden; padding: 50px 30px; text-align: right; }
.mainnav { padding: 30px; right: 0; text-align: right; }
.mainnav a, .mainnav a:link, .mainnav a:visited { color: #ffffff; }
.mainnav a:hover, .mainnav a:active { color: #dddddd; }
.mainnav li.current:after, .mainnav li:hover:after { border-style: solid; border-width: 18px 0 18px 20px; border-color: transparent transparent transparent #6d358c; content: ""; z-index: 1; height: 0px; left:300px;  position: absolute; -webkit-transform:rotate(360deg); width: 0px; }
.mainnav ul { font-size: 150%; list-style: none; margin: 0; text-transform: uppercase; }
.mainnav ul li { margin-bottom: 10px; }
.social { bottom: 0; color: #ffffff; padding: 20px 30px 50px; position: absolute; text-align: center; width: 240px; }
.social p { font-size: 150%; letter-spacing: 1px; text-align: center; }
.icon { display: inline-block; font-size: 200%; margin: 0 10px; }

.responsive { display: none; }
#page { background: rgba(55,55,55,0.8); margin: 0 auto; overflow: auto; width: 900px; }

#header { border-bottom: 1px solid #7c449b; overflow: auto; padding: 40px; }
#news { color: #ffffff; margin: 0 auto; padding: 10px; width: 90%; }
#news span, .news .date { color: #7c449b; font-size: 80%; letter-spacing: 1px; margin: 0;  }
#news p { font-size: 80%; }

.slick-next:before, .slick-prev:before { color: #7c449b; }

#main { overflow: auto; padding: 40px;  }
#main .service img { box-shadow: rgba(0,0,0,0.5) 0px 0px 15px; margin: 0 0 20px; }
#main ul { font-size: 90%; margin: 5px 0 15px; text-align: left;  -webkit-column-count: 3; /* Chrome, Safari, Opera */
	-moz-column-count: 3; /* Firefox */
	column-count: 3; 	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
	-moz-column-gap: 40px; /* Firefox */
	column-gap: 40px; }
#main ul li { list-style: none; margin-left: 15px; }
#main ul li:before { color: #7c449b; content: '\f0da'; font-family: FontAwesome; margin-right: 5px; } 

.note { border: 1px solid #7c449b; margin: 10px 0; padding: 10px; display: block; }

.service { text-align: center; }

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

.news { margin-bottom: 20px; }

.gallery { -moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
	-moz-column-gap: 10px;
	-webkit-column-gap: 10px;
	column-gap: 10px; }

.chocolat-image { display: inline-block; width: 100%; margin-bottom: 5px;  }

.contact { margin: 0 auto; }
.field input { background: #dddddd; color: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; float: left; width: 42%; height: 30px; font-family: 'Lora', serif; border-radius: 0; }
.fieldlong input { background: #dddddd; color: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%;  width: 92%; height: 30px; font-family: 'Lora', serif; border-radius: 0; }
.fieldlong textarea { background: #dddddd; color: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; width: 92%; font-family: 'Lora', serif; border-radius: 0;}
.captchapic img { background: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; float: left; width: 26%; height: 30px; font-family: 'Lora', serif; }
.captchafield input { background: #dddddd; color: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; float: left; width: 26%; height: 30px; font-family: 'Lora', serif; border-radius: 0; }
.buttonfield input  { height: 55px; background: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; width: 28%; float: left; color: #dddddd; text-transform: uppercase; font-weight: bold; font-family: 'Lora', serif; letter-spacing: 1px; border-radius: 0; }

#footer { padding: 20px 40px; text-align: center; border-top: 1px solid #7c449b; }
#header a, #footer a { display: block; font-size: 80%; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }



@media screen and (max-width: 1580px) {
	
	#page { margin-left: 300px; }
	
}



@media screen and (max-width: 1279px) {
	
	.styleswitcher { width: 96%; 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; }
	
	h1 .headline { font-size: 180%; font-weight: normal; line-height: 0.8; }
	
	.toggleMenu { display:  none; width: 100%; text-transform: uppercase; color: #2E2E2E; display: block;  background: none;  margin: 2% 0 0; }
	.toggleMenu:before { content: "\f0c9"; font-family: FontAwesome; margin-right: 2%; }
	a.toggleMenu { color: #ffffff; padding: 2% 0; }
	.nav { list-style: none; *zoom: 1; background:#6d358c; }
	.nav:before, .nav:after { content: " "; display: table; }
	.nav:after { clear: both; }
	.nav { border: 1px solid #7c449b; padding; 1%; }
	.nav li { padding: 2% 0; list-style: none; border-bottom: 1px solid #7c449b;  }
	.nav li:last-child { border: none; }
	.nav li a, .nav li a:visited, .nav li a:link { color: #ffffff; text-transform: uppercase; }
	.nav li a:hover, .nav li a:active { color: #dddddd; }
	.nav li.current, .nav li:active, .nav li a:active, .nav li:hover { background: #7c449b; }
	
	.responsive { background: url('/img/site/sidebar-back-violett.jpg'); display: block; text-align: center; padding: 3%; }
	.responsive:first-child { margin-top: 60px; }
	.social { position: relative; font-size: 100%; width: 100%; padding: 0; }
	.social p { text-align: center; } 
	
	#page { margin: 0 auto; width: 960px; }
	#header, #main, #footer { padding: 3%; }
	#sidebar { display: none; }
	#news { padding: 0;  }
	.note { padding: 2%; }
	p { color: #dddddd; text-align: left; }
	
	.gallery { -moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
		-moz-column-gap: 10px;
		-webkit-column-gap: 10px;
		column-gap:  10px; }
	.chocolat-image { margin-bottom: 5px; }
}



@media screen and (max-width: 1024px) {
	
	#page { margin: 0 auto; width: 96%; }
	h4:before, h4:after { width: 30px; }
	.banner img { width: 70%; }
}



@media screen and (max-width: 480px) {
	
	.gallery { -moz-column-count: 3; -moz-column-gap: 10px;
		-webkit-column-count: 3; -webkit-column-gap: 10px;
		column-count: 3; column-gap: 10px; }
	.chocolat-image { margin-bottom: 5px;  }
	.banner img { display: none; }
	.banner p { font-size: 100%; }
	
	
	.field input { background: #dddddd; color: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; width: 92%; height: 30px; font-family: 'Lora', serif; border-radius: 0; }
	.fieldlong input { background: #dddddd; color: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; width: 92%; height: 30px; font-family: 'Lora', serif; border-radius: 0; }
	.fieldlong textarea { background: #dddddd; color: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; width: 92%; font-family: 'Lora', serif; border-radius: 0; }
	.captchapic img { background: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; float: left; width: 42%; font-family: 'Lora', serif; }
	.captchafield input { background: #dddddd; color: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; float: left; width: 42%; height: 30px; font-family: 'Lora', serif; border-radius: 0; }
	.buttonfield input  { height: 45px; background: #7c449b; border: none; padding: 2%; font-size: 100%; margin: 2%; width: 96%; color: #dddddd; text-transform: uppercase; border-radius: 0; font-weight: bold; font-family: 'Lora', serif; letter-spacing: 1px; }
	
}



@media screen and (max-height: 750px) and (orientation: landscape) { 
	
	.logo { padding: 30px 30px 3%; }
	.mainnav { padding: 3% 30px; }
	.social { bottom: 0; padding-bottom: 3%; }
	
}