/*

red     #E04443

#0097AA
#9082A7
#CB8795
#F49C5A
#C39F51
#8D8545
#EE781F
#E8112D

*/

/*@font-face{font-family:roboto;src:url(/_lib/font/roboto-bold.eot);src:url(/_lib/font/roboto-bold.eot?#iefix) format('embedded-opentype'),url(/_lib/font/roboto-bold.woff2) format('woff2'),url(/_lib/font/roboto-bold.woff) format('woff'),url(/_lib/font/roboto-bold.ttf) format('truetype'),url(/_lib/font/roboto-bold.svg#robotobold) format('svg');font-weight:700;font-style:normal}*/
@font-face{font-family:roboto;src:url(/_lib/font/roboto-italic.eot);src:url(/_lib/font/roboto-italic.eot?#iefix) format('embedded-opentype'),url(/_lib/font/roboto-italic.woff2) format('woff2'),url(/_lib/font/roboto-italic.woff) format('woff'),url(/_lib/font/roboto-italic.ttf) format('truetype'),url(/_lib/font/roboto-italic.svg#robotoitalic) format('svg');font-weight:400;font-style:italic}
@font-face{font-family:roboto;src:url(/_lib/font/roboto-light.eot);src:url(/_lib/font/roboto-light.eot?#iefix) format('embedded-opentype'),url(/_lib/font/roboto-light.woff2) format('woff2'),url(/_lib/font/roboto-light.woff) format('woff'),url(/_lib/font/roboto-light.ttf) format('truetype'),url(/_lib/font/roboto-light.svg#robotolight) format('svg');font-weight:400;font-style:normal}
@font-face{font-family:roboto;src:url(/_lib/font/roboto-medium.eot);src:url(/_lib/font/roboto-medium.eot?#iefix) format('embedded-opentype'),url(/_lib/font/roboto-medium.woff2) format('woff2'),url(/_lib/font/roboto-medium.woff) format('woff'),url(/_lib/font/roboto-medium.ttf) format('truetype'),url(/_lib/font/roboto-medium.svg#robotomedium) format('svg');font-weight:700;font-style:normal}
/*@font-face{font-family:roboto;src:url(/_lib/font/roboto-regular.eot);src:url(/_lib/font/roboto-regular.eot?#iefix) format('embedded-opentype'),url(/_lib/font/roboto-regular.woff2) format('woff2'),url(/_lib/font/roboto-regular.woff) format('woff'),url(/_lib/font/roboto-regular.ttf) format('truetype'),url(/_lib/font/roboto-regular.svg#robotoregular) format('svg');font-weight:400;font-style:normal}*/

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;	padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0;} /* remember to define focus styles! */
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;} /* tables still need 'cellspacing="0"' in the markup */
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* reset end */

* {box-sizing: border-box;}
body {font-family: "roboto", sans-serif; font-size: 1rem; position: relative; color: #333; min-height: 100vh;} /* 75.3% puvodni font size */
a {text-decoration: underline;}
a:hover {text-decoration: none;}
.box p, .box blockquote,
.text p, .text ul, .text ol, .text dl, .text address, .text blockquote {margin-bottom: .5rem; font: 1em/1.4em "roboto";}
.text ul, .text dl, .text ol {margin-top: 1rem; margin-bottom: 1rem}
.text a {text-decoration: underline; color: #333;}
.text a:hover {text-decoration: none;}
.text p img {}
.hidden {position: absolute; top: -1024px;}
.bold, strong {font-weight: bold;}
.italic, em {font-style: italic;}
.small {font-size: .8em;}

.js .js-hide {display: none;}

.flexcol {display: flex; flex-direction: column;}

.text .bottomlinks {margin: 3rem -5rem 0; color: #E60D2E; border-top: 1px solid pink; padding: 3rem 6.5rem 0;}
.text .bottomlinks a {color: inherit;}

h1, h2, h3 {color: #333; position: relative;}
h1 a, h2 a, h3 a, h4 a, .h1 a, .h2 a, .h3 a, .h4 a {color: inherit;}
h1, .h1 {font: bold 2.0rem/1.3em "roboto"; margin: 0px 0px 2rem 0px;}
.subHead {font: normal 1rem/1.4em "roboto"; display: block; color: gray; position: relative; margin-bottom: 1rem;}
h2, .h2 {font: bold 1.4rem/1.3em "roboto"; margin: 1rem 0px;}
h3, .h3 {font: bold 1.3rem/1.3em "roboto"; margin: 1rem 0px;}
h4, .h4 {font: bold 1.1rem/1.3em "roboto"; margin: 1rem 0px;}
h1 small, h2 small, h3 small {font-size: 14px; opacity: .5; }

.grayblock, blockquote {background: #eee; padding: 1rem 5rem; margin: 2rem -5rem; }
.grayblock {display: flex; flex-wrap: wrap;}
.grayblock .floatThumb {flex: 0 0; margin-right: 1rem;}
.grayblock .floatThumb img {display: block; margin: -1rem 0; width: 140px;}
.grayblock .rest {flex: 1;}
.grayblock *:last-child, blockquote *:last-child, .grayblock .perex *:last-child {margin-bottom: 0px;}
.grayblock *:first-child, blockquote *:first-child, .grayblock .perex *:first-child {margin-top: 0px;}

.text p iframe {width: 100%; margin-bottom: 1rem;}

.text ul li:before, .ni-links li:before {content:"–";position:absolute;margin-left: -1.5em; color: inherit;}
.text ul ul li:before {content: ""; color: inherit;}
.text ul ul {list-style-type: circle;}
.text ul {margin-left: 1.5em;}

.text ol {margin-left: 2em; list-style-type: decimal;}
.text ol ol {list-style-type: lower-alpha;}
.text ol ol ol {list-style-type: circle;}

.text ul ul, .text ul ol, .text ol ul, .text ol ol {margin-top: 10px; margin-bottom: 10px;}  

.text .tb-main {width: 100%; margin: 1.5rem 0; border-top: 1px solid #dcdcdc;}
.text .tb-main td, .text .tb-main th {border-bottom: 1px solid #dcdcdc; vertical-align: top; padding: .3rem .1rem; }
.text .tb-main th {font-weight: bold;}

.t-simple .text img:not([width]) {width: 100%; height: auto;}

/* layout */

body {background: #fff; }

header, article, footer {position: relative; z-index: 2; font: normal 1rem/1.3em "roboto", sans-serif;}

.t {flex: 0 0 100%; position: relative; order: 1;}
    .t form {display: inline-block; position: relative; background: #fff;}
    .t #search-query {border: 0px solid; color: gray; height: 20px; margin: 15px 15px; font-size: 1rem; width: 300px;}
    .t-ico {width: 100%; max-width: 50px; margin: auto; display: inline-block; vertical-align: top; background: #efefef; position: relative; color: #333;}
    
        
.h {position: fixed; background: #fff; width: 70px; height: 100%; display: flex; flex-flow: column; z-index: 776;}
    .h-ico { max-width: 50px; margin: auto; display: block; background: #efefef; margin-bottom: 10px; position: relative; font-size: 1.4rem; font-weight: bold; color: #333; z-index: 999;	}
    .h-ico:after {content: ""; display: block; padding-bottom: 100%; }
        .h-ico * {position: absolute; width: 100%; height: 100%; text-align: center; }
        .h-ico-txt * {height: 2rem; line-height: 2rem; top: 50%; margin-top: -1rem;}
        .h-icons {order: 1;}           
    .h-logo {order: 2; position: relative;}
        .h-img {width: 70%; margin: auto; max-width: 40px; position: relative; display: block; margin-bottom: 10px;}
        .h-tit {width: 40%; margin: auto; position: relative; display: block; max-width: 25px; border-right: .3rem solid transparent; box-sizing: content-box;}
	.h-navlauncher {background: #efefef url("/img/ico-menu-pos-333.svg") no-repeat center center; background-size: 90%; z-index: 999;}
    .h-ico:hover {background-color: #ddd;}
	.h-navlauncher.active {background: #333 url("/img/ico-menu-pos-wht.svg") no-repeat center center; background-size: 90%; box-shadow: 20px 0px 0px #333}
		
.n {position: fixed; top: 0; z-index: 776; left: 70px; height: 100%; font-size: 1rem; display: none; }
	.n .scrollbar-inner {overflow-y: auto; position: relative; height: 100%; padding-right: 20px; background: #333; box-shadow: 50px 0px 30px rgba(0,0,0,.4); }
	.scrollbar-inner > ul {margin-right: 10px; margin-bottom: 30px;	}
	.n ul { position: relative;}
	.n ul ul {margin-left: 1rem;}
	.n ul ul ul, .linav-dialogue ul, .linav-havelsplace ul {display: none;}
	.n a {background: #333; color: #eee; text-decoration: none; line-height: 1.4em; padding: .85rem 1rem; display: block; border-bottom: 1px solid #555;}
	.n a:hover, .n a:active {background: #555;}
	.n ul ul a {color: #999; padding: .5rem 1rem .5rem 2rem; margin-left: -1rem;}
	.n li {}
	
.p {position: relative; padding: 0px; background: #F4F4F4; min-height: 100%; padding: 0px .5rem 2rem .5rem; display: flex; flex-wrap: wrap; margin: 0px 0px 0px 70px; min-width: 270px; max-width: 2000px}

    article {position: relative; width: 100%; order: 5; }

			/*
            .c-text {flex: 2 0 40%; max-width: 40%;}      
            .c-context .content {background: #fff; }
            .c-aside {flex: 2;}
			*/
            .c-text .content {background: #fff; padding: 3rem 5rem 5rem; min-height: 100vh;}
			
			
    footer {margin: 1rem 0; color: #555; flex: 0 0 100%; order: 6; text-align: center;}
    footer a {color: #555;}
    
    aside.promo {flex: 2 0 40%; order: 2; position: relative; }
    
    aside.c {flex: 3 0 60%; order: 3; display: flex; flex-wrap: wrap;}
        .c > div {flex: 1; max-width: 33%;}
        .sideblock {line-height: 1.3em; font-size: .9rem;}
        .sideblock .title {font-weight: bold; text-transform: uppercase; letter-spacing: .1rem; font-size: .8rem; color: #E8112D; }
        .sideblock p {margin-bottom: 10px;}
        .sideblock a {color: #E8112D;}

/* index */

.si-bg-1 {background: #0097AA; }
.si-bg-2 {background: #9082A7; }
.si-bg-3 {background: #CB8795; }
.si-bg-4 {background: #F49C5A; }
.si-bg-5 {background: #C39F51; }
.si-bg-6 {background: #8D8545; }
.si-bg-7 {background: #EE781F; }
.si-bg-8 {background: #E8112D; }

.si-cl-1 {color: #0097AA; }
.si-cl-2 {color: #9082A7; }
.si-cl-3 {color: #CB8795; }
.si-cl-4 {color: #F49C5A; }
.si-cl-5 {color: #C39F51; }
.si-cl-6 {color: #8D8545; }
.si-cl-7 {color: #EE781F; }
.si-cl-8 {color: #E8112D; }

.ni {position: fixed; bottom: 0; background: black; z-index: 999; width: calc(100% - 70px); left: 70px; padding: 0; display: flex; max-width: 2000px;}
	.ni-txt {display: block; padding: 1rem;}
	.ni-block {display: block; color: #fff; text-decoration: none; flex: 1; padding-bottom: 30px; font: 1.25rem/1.3em "roboto"; position: relative;}
	.ni-block:after {content: ""; width: 100%; height: 30px; display: block; background: #fff; opacity: .2; position: absolute; bottom: 0; left: 0;}
	.ni-block:hover:after {opacity: .1;}
	.ni .ni-item {display: block;}
.scrolled .ni-txt { position: absolute; left: 0; bottom: 0px; width: 100%; background: inherit; background: none; line-height: 30px; padding-bottom: 0;}
.scrolled .ni-txt * {display: none;}
.scrolled .ni-txt strong {display: block; font-size: 12px; }
.scrolled .ni-block:hover .ni-txt {display: block;}
	
.si {display: block; min-height: 100vh; margin: 0 -.5rem; padding-bottom: 4rem;}	
.si top {height: 50px; line-height: 50px; display: block;}
.si top a {display: block;}
	.si-inner {padding: 0px calc(6.25% - 10px);}
	.si-inner.cols {padding: 0px calc(6.25% - 25px);}

.si header {height: 120px; border-bottom: 1px solid #777; display: flex; flex-direction: column; justify-content: flex-end; }
.si header > * {font-size: 2rem; font-weight: normal; margin: 0; padding-bottom: 1rem}
.si header strong {font-weight: bold;}
.si > h3 {border-bottom: 1px solid #777; margin-top: 0; padding-bottom: 30px; font-size: 1.6rem;}
.si-clr {color: #777;}
.si-bgr {background: #777; color: #fff;}
.si-bgr a, .si-bgr h1, .si-bgr h2, .si-bgr h3 {color: #fff;}
	
#scr1 .si-bgr {background: #0097AA} #scr1 .si-clr {color: #0097AA} #scr1 .si-bcl {border-color: #0097AA}
#scr2 .si-bgr {background: #9082A7} #scr2 .si-clr {color: #9082A7} #scr2 .si-bcl {border-color: #9082A7}
#scr3 .si-bgr {background: #CB8795} #scr3 .si-clr {color: #CB8795} #scr3 .si-bcl {border-color: #CB8795}
#scr4 .si-bgr {background: #F49C5A} #scr4 .si-clr {color: #F49C5A} #scr4 .si-bcl {border-color: #F49C5A}
#scr5 .si-bgr {background: #C39F51} #scr5 .si-clr {color: #C39F51} #scr5 .si-bcl {border-color: #C39F51}
#scr6 .si-bgr {background: #8D8545} #scr6 .si-clr {color: #8D8545} #scr6 .si-bcl {border-color: #8D8545}
#scr7 .si-bgr {background: #EE781F} #scr7 .si-clr {color: #EE781F} #scr7 .si-bcl {border-color: #EE781F}
#scr8 .si-bgr {background: #E8112D} #scr8 .si-clr {color: #E8112D} #scr8 .si-bcl {border-color: #E8112D}  

/* forms */

.form {}
.form-horizontal {}

.required .control-label {position: relative;}
.required .control-label:after {content: "*"; position: absolute; color: red; top: 0px; margin-left: 2px;}
.required.format-block .control-label label:after {content: "*"; color: red; padding-left: .2rem;}
.required.format-block .control-label:after {content: "";}

.form input, .form select, .form textarea {font-size: 1em; font-family: inherit; position: relative; max-width: 100%;}
.control-label label {font-size: 1em; font-weight: bold; color: #333}
.form-horizontal .fItem > * {display: inline-block; vertical-align: top;}
.form-horizontal .control-label {width: 35%;}
.control-group {margin-right: 5px; margin-bottom: 5px; margin-top: 5px;}
.form-horizontal .controls {width: 60%;}

.form-inline .fItem, .form-inline .fSubmit {display: inline-block; vertical-align: top;}
.form-horizontal .control-label {text-align: right; padding-right: 1rem; padding-top: .3rem;}
.form input[type=checkbox] {position: relative; vertical-align: top; display: inline-block; margin: 0px; margin-top: .2rem; margin-right: 10px;}
.form input[type=text] {min-width: 80%;}
.form input[type=email] {min-width: 98%;}
.form input[type=radio] {margin: 0px; margin-right: 5px; top: .1rem;}
.form textarea {min-width: 98%; height: 10rem;}
.form .lower textarea {height: 6rem;}

.form-inline input[type=text],
.form-inline input[type=password] {height: 34px; width: auto; min-width: 0; font-size: 1rem; padding: 0 .5rem;}
.form-inverse input {border: 0px solid;}

legend {display: block;}
.form-horizontal fieldset {background: #F3F3F3; margin: 1.5rem 0rem; padding: .5rem 1rem;}
.form-horizontal .fSubmit {margin: 1.5rem 0;}
.form-horizontal .format-block {display: flex;}
.format-block .control-label {order: 2; flex: 1; text-align: left; padding-top: 0px;}
.format-block .controls {order: 1; flex: 0;}

.format-line .controls label {display: block; margin: .35rem 0;}

.radio-block .controls {padding-top: .3rem;}
.radio {line-height: 1.4;}
.radio-block label.radio {display: block;}

@media all and (max-width: 1600px) {
	.form-horizontal .fItem > * {display: block;}
	.form-horizontal .control-label {width: 100%; text-align: left; padding-bottom: .5rem;}
	.form-horizontal .controls {width: 100%;}
	.form input[type=text] {min-width: 95%;}
}

/* thumbed lists */

.thumbed {display: flex; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #dcdcdc; margin-bottom: 2rem;}
.thumbed .thumb-wrap {}
.thumbed .thumb-rest {flex: 1; margin: 1rem 0;}
.thumbed .thumb-wrap img {display: block; width: 140px; height: auto; margin-right: 1.5rem; border: 1px solid #efefef; margin-top: 1rem;}
.thumbed h2 {margin: 0 0 .5rem 0;}
.thumbed .perex {padding-bottom: .5rem; margin: 0px;}
.thumbed .perex *:last-child {margin-bottom: 0px;}

/* articles */

.thumb-wrap {display: block; position: relative; overflow: hidden;}
.thumb-wrap img {width: 100%; height: auto; display: block;}
.thumb-wrap .btn {position: absolute; bottom: 0px; left: 0px; white-space: nowrap; overflow: hidden;}

.news-item .rest, .prod-item .rest {padding: .7rem 1rem 1rem; font-size: .9em;}
.news-item span.date {font-weight: normal; color: #aaa; font-size: .8em;}
.ni-links {background: #efefef; margin: 1rem -1rem -1rem; padding: .75rem 1rem;}
.tag { background: #999; padding: 0px 1em; color: #fff; font-weight: bold; line-height: 34px; font-size: 12px; display: inline-block; margin: 0px 3px 0px 0px; font-style: italic; letter-spacing: .1rem;	}

.prod-item .thumb-wrap {flex: 0 0 40%;}
.prod-item .rest {flex: 1; position: relative; padding-bottom: 40px}
.prod-item .btn, .prod-item .tag {position: absolute; bottom: 0px; left: 0px;}




@media all and (max-width: 1930px) {
    aside.promo {flex: 3 0 60%; order: 2; position: relative; }
    aside.c {flex: 2 0 40%; order: 3; display: flex; flex-wrap: wrap;}
        .c > div {flex: 1; max-width: 50%;}
}

@media all and (max-width: 1690px) {
	.n {left: 5%;}
	html {font-size: 14px;}
    
        .c4c5 .ix-col {flex: 1 0 100%;}
        .clr-5 {order: 1;}
        .clr-4 {order: 2;}
    aside.promo {flex: 2 0 40%; }
 
}

@media all and (max-width: 1280px) {
    .h-ico {font-size: 1.5rem;}
}

@media all and (max-width: 1200px) {
    .h-ico {font-size: 1.5rem; margin-bottom: 0px;}
	.h-icons {margin-bottom: 10px;}
	.h {width: 50px;}
	.p {margin-left: 50px; }
	.ni {width: calc(100% - 50px); left: 50px;}
	.si {padding-bottom: 15px;}
    .si header {height: 100px;}
        .clr-3 .content:nth-child(n+4) {display: none;}
    aside.promo {flex: 1 0 66.6%; max-width: 66.6%; }
    aside.c {flex: 1 0 100%; max-width: 100%; order: 6; border-top: 10px solid #fff; margin-top: 1rem; padding-top: 1.5rem;}
        .c > div {flex: 1 0 33.3%; max-width: 33.3%; }
    .f {order: 7;}

    .grayblock, blockquote {padding: 1rem 3rem; margin: 2rem -3rem; }
    .text .bottomlinks {margin: 3rem -3rem 0; color: #E60D2E; border-top: 1px solid pink; padding: 2rem 4.5rem;}
}

@media all and (max-width: 980px) {
    .h-ico {font-size: 1.2rem;}
    .n {left: 50px;}
    html {font-size: 14px;}
    
    aside.promo {flex: 1 0 100%; max-width: 100%; }
    .c > div {flex: 1 0 50%; max-width: 50%; }
	
	/* subnavigace index */
	.ni {position: relative; bottom: auto; background: black; z-index: 999; width: auto; left: auto; padding: 0; display: flex; flex-wrap: wrap; margin: 0 -.5rem;}
	.ni-txt {display: block; padding: 1rem;}
	.ni-txt br {display: none;}
	.ni-txt .offscreen {clip: unset; position: relative; height: auto; overflow: visible; clip-path: unset;}
	.ni-block {display: block; color: #fff; text-decoration: none; flex: 1 100%; width: 100%; position: relative; padding-bottom: 0px}
	.ni-block:after {content: ""; display: none;}
	.ni .ni-item {display: inline;}
		.scrolled .ni-txt { position: relative; left: auto; bottom: auto; background: none; padding-bottom: 1rem; line-height: 1.3em;}
		.scrolled .ni-txt > * {display: inline;}
		.scrolled .ni-txt strong {font: 1.25rem/1.3em "roboto"; font-weight: bold; display: inline;}
		.scrolled .ni-block:hover .ni-txt {display: block;}
		.scrolled .ni-block {display: inline;}
	
	.c-text {background: #fff;}
	.c-text .content {padding: 1.5rem 0;}
}

@media all and (max-width: 736px) {
    .c > div {flex: 1 0 100%; max-width: 100%;}
}

@media all and (max-width: 480px) {    
    .t form {width: 100%;}
    .t #search-query {width: calc(100% - 80px);}
    .p {margin-right: 0}
    aside.promo, #soc-links {display: none;}
    .n {height: calc(100% - 50px); top: 50px; left: 0px;}
    .h-navlauncher.active {box-shadow: none;}
    .grayblock, blockquote {padding: 1rem 1.5rem; margin: 2rem -1.5rem; }
    .text .bottomlinks {margin: 1rem -1.5rem 0; color: #E60D2E; border-top: 1px solid pink; padding: 2rem 3rem;}
}