@font-face {
    font-family: 'Open Sans';
    font-weight: normal;	
    src: url('book-webfont.eot');
    src: url('book-webfont.eot?#iefix') format('embedded-opentype'),
		 url('book-webfont.woff') format('woff'),
         url('book-webfont.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
	font-weight: bold;
    src: url('bold-webfont.eot');
    src: url('bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('bold-webfont.woff') format('woff'),
         url('bold-webfont.ttf') format('truetype');
}

/* dummy ie8 fallback */
@font-face {
    font-family: 'Open Sans';
	font-weight: bold;
    src: url('bold-webfont.eot');
    src: url('bold-webfont.eot?#iefix') format('embedded-opentype')
}

html, body, input, textarea, button {
	font-family: 'Open Sans', 'Trebuchet MS', Tahoma, Arial;
	color: #313739;
}
html, body {
	background: url(../img/bg.png) repeat;
}
.hidden {
	display: none;
}
strong {
	font-weight: bold;
}
#wrap {
	background: url(../img/topline.png) top left repeat-x;
	position: absolute;
	width: 100%;
	overflow: hidden;
}
#wrap .topline_l {
	position: absolute;
	top: -62px;
	left: -230px;
}
.container {
	width: 960px;
	margin: 0px auto;
	position: relative;
}

#lewo {
  display:inline-block;
  margin-right:200px;
}

#prawo {
  display:inline-block;
/*  margin-left:200px; */
}

#page_header {
	height: 200px;
	width: 1000px;
	overflow: hidden;
	background: url(../img/menu_bg.png) 535px 0px no-repeat;	
}
.logo {
	display: block;
	width: 330px;
	height: 49px;
	background: url(../img/logo.png) no-repeat;
	position: absolute;
	top: 87px;
	left: 0px;
	z-index: 200;
}
.logo a {
	display: block;
	width: 100%;
	height: 100%;
}
.logo a span {
	display: none;
}
#mainmenu_wrap {
	width: 400px;
	height: 42px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	right: 25px;
}
#mainmenu {
	float: right;
	position: relative;
	left:-50%;	
	height: 42px;
}
#mainmenu ul {
	margin: 5px 0 0;
	position: relative;
	left: 50%;
}
#mainmenu li {
	float: left;
	height: 20px;
	line-height: 20px;
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
	font-size: 15px;
	padding: 5px 11px;
	position: relative;
	margin-right: 3px;	
	
	border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
}
#mainmenu li:hover {
	cursor: pointer;
	
	background: #73c3ff;
	background: -moz-linear-gradient(top, #73c3ff 0%, #3099e7 26%, #3099e7 68%, #73c3ff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#73c3ff), color-stop(26%,#3099e7), color-stop(68%,#3099e7), color-stop(100%,#73c3ff));
	background: -webkit-linear-gradient(top, #73c3ff 0%,#3099e7 26%,#3099e7 68%,#73c3ff 100%);
	background: -o-linear-gradient(top, #73c3ff 0%,#3099e7 26%,#3099e7 68%,#73c3ff 100%);
	background: -ms-linear-gradient(top, #73c3ff 0%,#3099e7 26%,#3099e7 68%,#73c3ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73c3ff', endColorstr='#73c3ff',GradientType=0 );
	background: linear-gradient(top, #73c3ff 0%,#3099e7 26%,#3099e7 68%,#73c3ff 100%);	
}
#mainmenu li img {
	margin-right: 0.4em;
	position: relative;
	top: 2px;
}
.df {
	position: absolute;
	z-index: 100;
	top: -10px;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;		
}
.df:hover {
	top: -5px;
}

/* bar */

#chocolate_bar {
	height: 255px;
	width: 100%;
	background: url(../img/bar_bg.png) repeat-x;	
}
#wheel {
	background: url(../img/wheel.png) no-repeat;	
	width: 1600px;
	height: 366px;
	position: absolute;
	right: -385px;
	top: -111px;
	
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;	
}
#wheel ul {
	display: block;
	width: 266px;
	height: 268px;
	background: url(../img/icons_bg.png) no-repeat;	
	position: absolute;
	left: 902px;
	top: 35px;
}
#wheel ul  li {
	display: block;
	width: 126px;
	height: 126px;
	float: left;
	margin-bottom: 14px;
}
#wheel_center, #wheel ul  li img {
	-moz-transition: all 0.7s ease;
	-webkit-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
#wheel #q1, #wheel #q3 {
	margin-right: 14px;
}
#wheel ul  li img {
	position: relative;
	cursor: pointer;

}
#wheel #q1 img { top: 40px; left: 40px; }
#wheel #q2 img { top: 45px; left: 15px; }
#wheel #q3 img { top: 20px; left: 40px; }
#wheel #q4 img { top: 20px; left: 20px; }

#wheel ul  li {
	background: url(../img/icons_active.png) no-repeat -800px -800px;	
}
#wheel #q1.active { background: url(../img/icons_active.png) no-repeat top left; }
#wheel #q2.active { background: url(../img/icons_active.png) no-repeat top right; }
#wheel #q3.active { background: url(../img/icons_active.png) no-repeat bottom left; }
#wheel #q4.active { background: url(../img/icons_active.png) no-repeat bottom right; }

.wheel_control {
	opacity: 0.5;
	cursor: pointer;
	width: 37px;
	height: 70px;
	display: block;
	position: absolute;	
}
.wheel_control:hover {
	opacity: 1;
}
.wheel_control em {
	display: none;
}
#wheel_r {
	background: url(../img/wheel_r.png) no-repeat;	
	left: 1200px;
	top: 180px;
}
#wheel_l {
	background: url(../img/wheel_l.png) no-repeat;	
	left: 825px;
	top: 180px;
}

#descriptions {
	position: relative;
	z-index: 100;
	width: 580px;
	color: #fff;
	overflow: hidden;
	text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
	height: 255px;
}
#descriptions > li {
	height: 215px;
	margin-top: 45px;
	position: relative;
}
#descriptions .description_title {
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: 20px;
}
#descriptions .description_def {
	line-height: 1.4em;
	width: 540px;	
}

#descriptions .rmore {
	width: 120px;
	height: 37px;
	line-height: 39px;
	display: block;
	background: url(../img/rmore.png) no-repeat;		
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	padding-right: 15px;
	text-shadow: 0px -1px 0px #d26c00;
	cursor: pointer;
	
	position: absolute;
	right: 20px;
	bottom: 45px;
	font-size: 15px;

	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;	
}
#descriptions .rmore:hover {
	color: #fff;
	right: 15px;
}
#descriptions .rmore:active {
	color: #fff;
	bottom: 46px;
}

/**/

.hintbox {
	display: block;
	padding: 4px 10px;
	
	position: absolute;
	left: 10px;
	font-weight: bold;
	font-size: 14px;
	background: #333; /* ie fallback */
	background: rgba(0,0,0,0.7);
	color: #fff;
	
	border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;	
	
	z-index: 10000;
}

/**/

#text {
	position: relative;
	top: 530px;
}
#text > article {
	padding-left: 105px;
	position: relative;
	margin-bottom: 20px;
}
#text > article > header > img {
	position: absolute;
	left: 0px;
	top: -15px;
}
#text > article > header > h1 {
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: 45px;
}
#text > article > div.lcol, #text > article > div.rcol {
	width: 393px;
	float: left;
	text-align: justify;
}
#text > article > div.lcol {
	margin-right: 60px;
}
#text > article p {
	margin-bottom: 15px;
}
#text > article > footer {
	overflow: hidden;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	display: block;
}
#text > article > footer > .totop {
	float: right;
}

/**/

body > footer {
	display: block;
	overflow: hidden;
	height: 80px;
	line-height: 80px;
	clear: both;
	position: relative;
	top: 550px;
	text-align: right;
	font-size: 0.9em;
	color: #fff;
	background: url(../img/bar_bg.png) repeat-x;		
}

/**/

address dl, address p {
	margin-bottom: 20px;
}
address dl > dt {
	float: left;
	width: 120px;
	color: #888;
}
address dl > dd {
	overflow: hidden;
}
address dl > dd:after {
	clear: both;
}

/**/

#contactform legend {
	font-size: 1.3em;
	font-weight: bold;
	padding-bottom: 20px;
	display: block;
}
#contactform .styledinput {
	border: 1px solid #ddd;
	padding: 8px 12px;
	background: #fff;	
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
#contactform .styledinput input, #contactform .styledinput textarea {
	border: 0px;
	outline: none;
	background: transparent;
	width: 365px;
	font-size: 16px;
	resize: none;
}
#contactform textarea {
	height: 240px;
}
#contactform label {
	display: none;
}

/**/

.styledbutton {
	background: #7abcff;
	background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
	background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
	background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);

	display: inline;

	border: 0px;
	padding: 6px 15px;
	line-height: 18px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.2);

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	text-transform: uppercase;

	border-top: 1px solid #4297ee;
	border-left: 1px solid #4297ee;

	font-size: 15px;
}
.styledbutton img {
	margin: 0 2px;
}
.styledbutton:hover {
	background: #7abcff;
	color: #fff;
}

.send {
	border-color: #FF8014;

	background: rgb(255,168,76);
	background: -moz-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1)));
	background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
	background: -o-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
	background: linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
}
.send:hover {
	background: rgb(255,168,76);
}

/**/

#slider_out {
	position: relative;
	padding-top: 10px;
}
#slider_wrapper {
	width: 700px;
	margin: 0px auto;
	overflow: hidden;
	position: relative;
}
#slider {
	width: 10000px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;	
}
#slider_wrapper:before, #slider_wrapper:after {
	width: 107px;
	position: absolute;
	height: 120px;
	z-index: 100;
	display: block;
}
#slider_wrapper:before {
	top: -30px;
	left: 0px;
	content: url(../img/sh.png);
}
#slider_wrapper:after {
	top: -30px;
	right: 0px;
	content: url(../img/sh2.png);
}
#slider > li {
	display: inline-block;
	overflow: hidden;
	margin-right: 40px;
	opacity: 0.1;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;		
}
#slider > li.l2 {
	opacity: 0.3;
}
#slider > li.active {
	opacity: 1;
}
#slider > li:hover {
	opacity: 1;
}
#slider_indic {
	margin-top: 30px;
	text-align: center;
}
#slider_indic > li {
	display: inline-block;
	background: #d9d9db;
	width: 13px;
	height: 13px;
	border-radius: 30px;
	cursor: pointer;
}
#slider_indic > li:hover {
	background: #e2c09f;
}
#slider_indic li~li {
	margin-left: 10px;
}
#slider_indic > li.active {
	background: #f17802;
}
.slider_c {
	width: 19px;
	height: 22px;
	background: url(../img/arr.png) left top no-repeat;
	display: block;
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin-top: -35px;
	opacity: 0.8;
}
.slider_c:hover {
	opacity: 1;
}
#slider_l {
	left: 30px;
}
#slider_r {
	background-position: right top;
	right: 30px;
}
.slider_c em {
	display: none;
}
#slider .scale {
	height: 80px;
	width: auto;
}

/**/

#send_message {
	font-weight: bold;
	color: #fff;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
	z-index: 1000;
	font-size: 15px;
	position: fixed;
	left: 0px; 
	right: 0px;
	color: #313739;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
#send_message div {
	padding: 12px 15px;
}
#send_message img {
	margin-right: 5px;
	vertical-align: middle;
}

#send_message.err, #send_message.mail, #send_message.text {
	background: rgb(255,123,13);
	background: -moz-linear-gradient(top, rgba(255,123,13,1) 14%, rgba(255,168,76,1) 96%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,rgba(255,123,13,1)), color-stop(96%,rgba(255,168,76,1)));
	background: -webkit-linear-gradient(top, rgba(255,123,13,1) 14%,rgba(255,168,76,1) 96%);
	background: -o-linear-gradient(top, rgba(255,123,13,1) 14%,rgba(255,168,76,1) 96%);
	background: -ms-linear-gradient(top, rgba(255,123,13,1) 14%,rgba(255,168,76,1) 96%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b0d', endColorstr='#ffa84c',GradientType=0 );
	background: linear-gradient(top, rgba(255,123,13,1) 14%,rgba(255,168,76,1) 96%);
	border-bottom: 1px solid #FF7B0D;
}
#send_message.ok  {
	background: rgb(165,201,86);
	background: -moz-linear-gradient(top, rgba(165,201,86,1) 1%, rgba(205,235,142,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(165,201,86,1)), color-stop(100%,rgba(205,235,142,1)));
	background: -webkit-linear-gradient(top, rgba(165,201,86,1) 1%,rgba(205,235,142,1) 100%);
	background: -o-linear-gradient(top, rgba(165,201,86,1) 1%,rgba(205,235,142,1) 100%);
	background: -ms-linear-gradient(top, rgba(165,201,86,1) 1%,rgba(205,235,142,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5c956', endColorstr='#cdeb8e',GradientType=0 );
	background: linear-gradient(top, rgba(165,201,86,1) 1%,rgba(205,235,142,1) 100%);
	border-bottom: 1px solid #a5c956;
}
#send_message .topline_l {
	position: absolute;
	top: 0px;
	left: -230px;
}

#text {
	--gap: 5rem;
	.kontakt {
		--gap: 1rem;
	}
	.tags {
		& {
			margin-block: calc(var(--gap)/2);
		}
		i {
			border: 1px solid #a5d8ff;
			background: #7abcff;
			color: white;
			border-radius: 1.4rem;
			padding-inline: 1.4rem;
		}
	}
	h2 {
		font-size: 1.6em;
		font-weight: bold;
		margin-block: var(--gap);
	}
	p {
		line-height: 2rem;
		font-size: 1.2em;
		text-align: justify;
		margin-block: var(--gap);
	}
	footer {
		margin-top: var(--gap);
		margin-bottom: calc(var(--gap)/2);
	}
	article > header > h1 {
		line-height: 1.5rem;
		margin-bottom: calc(var(--gap)/2);
	}
}