/* CSS Dokumant */

@import url('https://fonts.googleapis.com/css?family=Rochester|Lora:wght@400;700&display=swap');
@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;  box-sizing: border-box; outline: none; }
::selection									{ background: #b30074; }
::-moz-selection						{ background: #b30074; }
html												{ background: url('/data/site/template-back.jpg') no-repeat top center fixed; background-size: cover; color: #eeeeee; font-family: 'Lora', serif; font-size: 16px; font-weight: 400; line-height: 1.5; }

.styleswitcher							{ background: #222222; font-size: 100%; padding: 1rem; position: fixed; right: 0; top: 3rem; text-align: right; z-index: 9; }
.styleswitcher p						{ text-transform: uppercase; }
.styleswitcher a						{ cursor: pointer; display: block; margin: 0 0 0.25rem; overflow: hidden; width: 100%; }
.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													{ color: #b30074; font-size: 1.75rem; font-weight: 400; margin: 0 0 1.5rem; }
h2													{ color: #ffffff; font-size: 1.5rem; font-weight: 700; margin: 0 0 2rem; }
h3													{ font-size: 1.125rem; font-weight: 700; margin: 0 0 1rem; text-transform: uppercase; }
h4													{ display: inline-block; font-size: 100%; margin: 1rem 0 ; padding: 0 1rem; position: relative; text-transform: uppercase; }
h4:before, h4:after					{ background: #b30074; content: ""; display: block; height: 0.0625rem; position: absolute; top: 50%; width: 4rem; }
h4:before										{ right: 100%; }
h4:after										{ left: 100%; }
p														{ font-size: 1.125rem; margin-bottom: 1rem; text-align: justify; }
a, a:link, a:visited				{ color: #b30074;  outline: none; text-decoration: none; }
a:hover, a:active						{ color: #dddddd; outline: none; text-decoration: none; }
ul													{ margin: 0 0 1rem; }
ul li												{ font-size: 1.125rem; }
hr													{ border: none; border-bottom: 0.0625rem solid #ffffff; margin: 2rem 0;  }
code												{ text-align: center; }
img													{ display: block; max-width: 100%; }

#sidebar										{ background: url('/data/site/sidebar-back.jpg'); box-shadow: rgba(0,0,0,1) 0 0 1.5rem; float: left; height: 100%; overflow: visible; position: fixed; width: 18.75rem;}

.logo												{ overflow: hidden; padding: 3.5rem 2rem; text-align: right; }
.headline										{ color: #ffffff; font-family: 'Rochester', cursive; font-size: 230%; font-weight: normal; line-height: 0.8; }
.subline										{ color: #ffffff; font-size: 50%; font-family: 'Lora', serif; font-weight: 700; line-height: 1;}

.mainnav										{ padding: 2rem; right: 0; text-align: right; }
.mainnav a,
.mainnav a:link,
.mainnav a:visited					{ color: #ffffff; }
.mainnav a:hover,
.mainnav a:active						{ color: #dddddd; }
.mainnav ul									{ list-style: none; margin: 0; text-transform: uppercase; }
.mainnav ul li							{ font-size: 1.5rem; }
.mainnav li.current:after,
.mainnav li:hover:after			{ border-style: solid; border-width: 0.875rem 0 0.875rem 1rem; border-color: transparent transparent transparent #7d004e; content: ""; z-index: 1; height: 0; left: 18.75rem;  position: absolute; -webkit-transform:rotate(360deg); width: 0; }

.social											{ bottom: 0; color: #ffffff; padding: 2rem 1.5rem 3.5rem; position: absolute; text-align: center; width: 100%; }
.social p										{ font-size: 150%; letter-spacing: 0.0625rem; text-align: center; }
.social .icon								{ display: inline-block; font-size: 200%; margin: 0 0.5rem; }

.responsive									{ display: none; }

#page												{ background: rgba(0,0,0,0.9); margin: 0 auto; overflow: auto; width: 56.25rem; }

#header											{ border-bottom: 0.0625rem solid #b30074; overflow: auto; padding: 2.5rem; }
#news												{ color: #ffffff; margin: 0 auto; padding: 1rem; width: 90%; }
#news span, .news .date 		{ color: #b30074; font-size: 0.875rem; letter-spacing: 0.0625rem; margin: 0;  }
#news p											{ font-size: 80%; }

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

#main												{ overflow: auto; padding: 1.5rem;  }
#main .service img					{ box-shadow: rgba(0,0,0,0.5) 0 0 0.5rem; margin: 0 0 1.25rem; }
#main ul										{ font-size: 0.875rem; margin: 0.25rem 0 1rem; text-align: left; column-count: 3; column-gap: 2rem; }
#main ul li									{ list-style: none; margin-left: 1rem; }
#main ul li:before					{ color: #b30074; content: '#'; font-family: FontAwesome; margin-right: 0.25rem; } 

.note												{ border: 0.0625rem solid #b30074; margin: 0.75rem 0; padding: 0.5rem; display: block; }

.service										{ text-align: center; }

.banner, .banner p					{ text-align: center;  margin: 0 0 0.75rem; }

.news												{ margin: 0.5rem 0; }

.gallery										{ column-count: 4; column-gap: 0.75rem; }

.chocolat-image 						{ display: inline-block; width: 100%; margin: 0 0 0.25rem; }

.contact										{ margin: 0 auto; }
.field input								{ background: #dddddd; color: #b30074; 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: #b30074; 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: #b30074; border: none; padding: 2%; font-size: 100%; margin: 2%; width: 92%; font-family: 'Lora', serif; border-radius: 0;}
.captchapic img							{ background: #b30074; border: none; padding: 2%; font-size: 100%; margin: 2%; float: left; width: 26%; height: 30px; font-family: 'Lora', serif; }
.captchafield input					{ background: #dddddd; color: #b30074; 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: #b30074; 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: 1.5rem; text-align: center; border-top: 0.0625rem solid #b30074; }
#header a, #footer a				{ display: block; font-size: 80%; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.0625rem; }


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



@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; }
	
	.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:#7d004e; }
	.nav:before, .nav:after { content: " "; display: table; }
	.nav:after { clear: both; }
	.nav { border: 1px solid #b30074; padding: 1%; }
	.nav li { padding: 2% 0; list-style: none; border-bottom: 1px solid #b30074;  }
	.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: #b30074; }
	
	.responsive { background: url('/data/site/sidebar-back.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: #b30074; 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: #b30074; 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: #b30074; border: none; padding: 2%; font-size: 100%; margin: 2%; width: 92%; font-family: 'Lora', serif; border-radius: 0; }
	.captchapic img { background: #b30074; border: none; padding: 2%; font-size: 100%; margin: 2%; float: left; width: 42%; font-family: 'Lora', serif; }
	.captchafield input { background: #dddddd; color: #b30074; 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: #b30074; 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%; }
	
}