/* CSS Dokumant */

@import url('https://fonts.googleapis.com/css?family=Crushed|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: #009891; /* WebKit/Blink Browsers */ }
::-moz-selection { background: #009891; /* Gecko Browsers */ }
html { background: url('/data/site/template-back.jpg') no-repeat top center fixed; background-size: cover; color: #333333; font-family: 'Lora', serif; font-size: 16px; line-height: 1.5; }

.styleswitcher { background: #222222; color: #fff; right: 0; top: 50px; text-align: right; padding: 10px; position: fixed; font-size: 100%; z-index: 9; }
.styleswitcher p { text-transform: uppercase; }
.styleswitcher a {display: block; width: 80px; overflow: hidden; cursor: pointer; margin: 3px; }
.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: 'Crushed', 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: #009891; font-size: 150%; font-weight: normal; margin-bottom: 20px; }
h3 { font-size: 120%; font-weight: normal; margin-bottom: 15px; }
h4 { font-size: 100%; text-transform: uppercase; margin: 15px 0 ; display: inline-block; padding: 0 15px; position: relative; }
h4:before, h4:after { background: #009891; content: ""; display: block; height: 1px; position: absolute; top: 50%; width: 30%; }
h4:before { right: 100%; }
h4:after { left: 100%; }
p { font-size: 90%; margin-bottom: 10px; text-align: justify; }
a, a:link, a:visited { color: #009891; text-decoration: none; outline: none; }
a:hover, a:active { color: #dddddd; text-decoration: none; outline: none; }
hr { border: none; border-bottom: 1px solid #333; margin: 20px 0;  }

#sidebar { background: url('/data/site/sidebar-back-petrol.jpg'); box-shadow: rgba(0,0,0,1) 0px 0px 20px; float: left; height: 100%; overflow: visible; position: fixed; width: 300px;}
.logo { padding: 50px 30px; text-align: right; overflow: hidden; }
.mainnav { padding: 30px; text-align: right; right:0;  }
.mainnav a, .mainnav a:link, .mainnav a:visited { color: #ffffff; }
.mainnav a:hover, .mainnav a:active { color: #dddddd; }
.mainnav a.current:after, .mainnav a:hover:after { width: 0px; position: absolute; content: ""; z-index: 1; left:300px; margin-top: -50px; height: 0px; -webkit-transform:rotate(360deg); border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent transparent transparent #00857e; }
.mainnav ul { font-size: 150%; list-style: none; margin: 0; text-transform: uppercase; }
.mainnav ul li { margin-bottom: 10px; }
.social { color: #ffffff; position: absolute; bottom: 0; padding: 20px 30px 50px; width: 240px;text-align: center; }
.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(200,200,200,0.9); margin: 0 auto; overflow: auto; width: 900px; }

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

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

#main { overflow: auto; padding: 40px;  }
#main .service img { width: 100%; 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 { font-family: FontAwesome; content: '\f0da'; color: #009891; margin-right: 5px; } 

.note { border: 1px solid #009891; display: block; padding: 10px; margin: 10px 0; }
.service { text-align: center; }

.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 { width: 100%; }

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

#footer { padding: 20px 40px; text-align: center; border-top: 1px solid #009891; }
#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: #dddddd; 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:#00857e; }
	.nav:before, .nav:after { content: " "; display: table; }
	.nav:after { clear: both; }
	.nav { border: 1px solid #009891; padding; 1%; }
	.nav li { padding: 2% 0; list-style: none; border-bottom: 1px solid #009891;  }
	.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; }
	
	.responsive { background: url('/img/site/sidebar-back-petrol.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 { 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%; }
	
}

@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;  }
}