/*
breakpoints: sm 576px; md 768px; lg 992px; xl 1200px
*/

:root {
	--font-size-h1: 1.625rem;
	--c-red:			#E8112D;
	--c-red-darker:		#C4182E;
	--c-red-darkest:	#A01F2F;
	--c-gray-10:		rgba(0 0 0 / .1);
}

/* 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: "" "";}
input, button, select, textarea {font-family: inherit; font-size: 1rem;}
/* reset end */

/* global */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body * {
    position: relative;
}

/* base */
html, body {font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 400; background: #efefef; color: #333;}
a { color: inherit; text-decoration: none;}

@media all and (min-width: 1200px) {
	html, body {font-size: 16px;}
}

/* utility */

.d-none {display: none;}
.offscreen { clip-path: inset(100%);clip: rect(1px 1px 1px 1px); /* IE 6/7 */ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.onscreen { position:relative; clip:auto; width:auto; height:auto; overflow:auto; }
.bold, strong {font-weight: 700; letter-spacing: .03rem}
.italic, em {font-style: italic;}
.svg-icon path {fill: currentColor; }

.video-responsive { position:relative; width: 100%; padding-bottom:56.25%; height:0; overflow: hidden; }
.video-responsive iframe, .video-responsive object, .video-responsive embed { position:absolute; top:0; left:0; width:100%; height:100%; }

@media all and (min-width: 576px) {
	.d-sm-inline-block {display: inline-block;}
}

@media all and (min-width: 768px) {

}

@media all and (min-width: 992px) {

}

@media all and (min-width: 1200px) {

}

/* buttons */
	
.btn__line > .btn {margin: 0 .5rem .5rem 0;}

.btn {position: relative; padding: 0em 1rem; height: 50px; line-height: 51px; display: inline-block; text-decoration: none; text-transform: uppercase;
	letter-spacing: .1rem; color: #fff; font-weight: bold; font-size: .8rem; vertical-align: top;
	cursor: pointer;width: auto; overflow: visible; border: 0px solid;
	background: var(--c-red);
}
.btn:hover {background: var(--c-red-darker); text-decoration: none;}

.btn--ico {padding: 0;}
	.btn--ico svg {width: 50px; height: 50px; vertical-align: top;}
	.btn--ico span {padding-right: 1rem;}
.btn--back {background: rgba(0 0 0 / .3)}
	.btn--back svg {background: rgba(0 0 0 / .3)}
	.btn--back span {display: inline-block; padding-left: 1rem;}
	.btn--back:hover {background: rgba(0 0 0 / .5)}

/* knvh bily pruh + zaklad layoutu */

.h { background: #fff; display: flex; z-index: 776;}
    
	.h__logo {order: 1; width: 40px; height: 40px;}
        .h__logo-img {width: 20px; height: 20px; display: block; margin: 10px;}
		.h__logo-tit {display: none;}
	
	.h__icons {order: 2; display: flex; flex-flow: row-reverse; margin-left: auto;}
		.h__icons-navlauncher {z-index: 999;}
		.h__icons-navlauncher.active {color: red; box-shadow: 20px 0px 0px #333}
		.h__icons-lng > span {text-transform: uppercase; height: auto; top: 50%; transform: translatey(-50%); font-size: 1.4rem;}
		
    .h__ico { height: 40px; width: 40px; margin-left: 5px; display: inline-block; font-size: 1.2rem; font-family: roboto; font-weight: bold; color: #333; z-index: 999;	}
		.h__ico:hover {background-color: #fff;}
        .h__ico * {position: absolute; width: 100%; height: 100%; text-align: center; top: 0}
	
	.b--p .h {display: none} /* na malych podstrankach nezobrazuj bily pruh */
	
.p {top: 40px; position: fixed; height: calc(100vh - 40px); width: 100%;}	
.b--p .p {top: 0px; min-height: 100vh;}	
	
	@media all and (min-width: 768px) {
		
		.b--p .h {display: flex;}
			
		.h {position: fixed; flex-flow: column; width: 50px; height: 100%;}
		.h__logo {order: 2; text-align: center; width: 100%; height: auto;}
		.h__icons {margin-bottom: 10px; order: 1; display: block; margin-left: initial;}
        .h__logo-img {width: 70%; margin: auto; max-width: 40px; position: relative; display: block; margin-bottom: 10px;}
        .h__logo-tit {width: 100%; height: 250px; margin: auto; position: relative; border-right: .3rem solid transparent; display: block;}
		.h__ico { max-width: 50px; width: 100%; height: 0px; padding-top: 100%; margin: auto; display: block; position: relative; font-size: 1.2rem; font-family: roboto; font-weight: bold; color: #333; z-index: 999;	}
		
		.p {top: 0; left: 50px; height: 100vh; width: calc(100% - 50px)}
	}

/* hp */
.p__intro {width: 100%; height: 100%; background: #333; color: #fff; padding-top: 10px; padding-bottom: 10px; display: flex; flex-direction: column}
.p__intro > * {flex-grow: 0;}
.p__intro-middleblock {margin: 0 10px; width: calc(100% - 20px); display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.p__intro-middleblock > * {display: block;}
.p__intro-title {background: var(--c-red); padding: 2rem; display: flex; grid-column: 1 / span 2}
.p__intro-title span {margin: auto 0; padding-bottom: 1rem;}
.p__intro-title strong {font-size: 1.6rem; text-transform: uppercase; letter-spacing: .25rem; display: block; margin-bottom: 1rem;}
.p__intro-title small {display: block;}
.p__intro-block { display: flex; text-decoration: none; text-transform: uppercase; letter-spacing: .1rem; color: #fff; font-weight: bold; font-size: .8rem;	}
.p__intro-block:hover {text-decoration: none;}
.p__intro-block:before {content: " "; opacity: .5; position: relative; width: 100%; height: 0; padding-top: 100%; left: 0; top: 0; background: #555 no-repeat center center; background-size: cover;}
.p__intro-block:hover:before {opacity: .2;}
.p__intro-block strong {position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: flex; text-align: center}	
.p__intro-block span {margin: auto; letter-spacing: .1rem;}

.p__intro-block--books:before {background-image: url("img/map-im1.jpg");}
.p__intro-block--places:before {background-image: url("img/map-im2.jpg");}
.p__intro-block--1:before {background-image: url("img/vh-im1.jpg");}
.p__intro-block--2:before {background-image: url("img/vh-im2.jpg");}
.p__intro-block--3:before {background-image: url("img/vh-im3.jpg");}
.p__intro-block--4:before {background-image: url("img/vh-im4.jpg");}

	@media all and (min-width: 768px) {
		.p__intro-middleblock {margin: auto 10px;}
	}
	
	@media all and (min-width: 992px) {
		
		.p__intro-middleblock {grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 1fr; margin: auto; max-width: 90%}
		.p__intro-title {grid-column: 1 / span 2}
		.p__intro-block span {margin: auto; position: absolute; left: 0; bottom: 0; line-height: 50px; padding: 0 1rem;}	

		.p__intro--vh .p__intro-block br {display: none;}
		.p__intro-block--1, .p__intro-block--2, .p__intro-block--3, .p__intro-block--4 {grid-row: 2;}

	}


/* navigace a dropdown */

.n {color: #fff;}
.n a {white-space: nowrap; font-weight: 400; }
.n a:hover {text-decoration: none;}

.n__level {display: flex;}

.n__sublevel {background: var(--c-red); position: fixed; bottom: 70px; width: calc(100% - 20px); left: 10px; display: none;}
.n__sublevel a {letter-spacing: .05rem;}
.n__sublevel-item a {background: rgba(255 255 255 / .2); display: block; padding: .5rem 1rem; margin-bottom: 1px;}
.n__sublevel-item a:hover {background: none;}
.n__sublevel-item--label {line-height: 50px; padding: 0 1rem; }
.n__sublevel-item--label:hover {cursor: pointer;}
.n__sublevel-item--label:after {content: "×"; position: absolute; top: 0; right: 0; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 2.3rem;}
.n__sublevel-check:before {content: " "; display: inline-block; width: 1.3rem; height: 1.3rem; vertical-align: middle; margin-right: 1rem; margin-top: -2px; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3333 2H4.66667C3.19391 2 2 3.19391 2 4.66667V11.3333C2 12.8061 3.19391 14 4.66667 14H11.3333C12.8061 14 14 12.8061 14 11.3333V4.66667C14 3.19391 12.8061 2 11.3333 2Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-size: 100%; background-repeat: no-repeat;}
.n__sublevel-check--checked:before {background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3333 2H4.66667C3.19391 2 2 3.19391 2 4.66667V11.3333C2 12.8061 3.19391 14 4.66667 14H11.3333C12.8061 14 14 12.8061 14 11.3333V4.66667C14 3.19391 12.8061 2 11.3333 2Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 7.99999L7.5 9.33332L10 6.66666' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}

.n--controls {position: fixed; bottom: 10px; left: 10px; display: flex;}
	.n--controls .btn--back {position: fixed; top: 50px; left: 10px}
	.b--p .n--controls .btn--back {position: fixed; top: 10px; left: 10px}
	.n--controls .n__level-item {margin-right: 10px;} 
	
.n--language {position: fixed; bottom: 10px; right: 10px;}
	.n--language .n__sublevel {right: 0;}
	.n--language .n__level-item {margin-left: 10px;} 
	
.n__level-item--dropdown.active > .n__sublevel {display: block; }
.scrolled .n__level-item--top {display: block;}

@media all and (min-width: 768px) {
	.n--controls {position: absolute; top: 10px; left: 10px; bottom: auto; width: 75%; }
	.n--controls .btn--back {position: relative; top: 0; margin-right: 10px;}
	.b--p .n--controls .btn--back {position: relative; top: 0; left: 0}
	.n--language {position: absolute; top: 10px; right: 10px; bottom: auto;}
	.n__sublevel {bottom: auto; position: absolute; left: auto; width: auto; min-width: 120%; top: 55px;}
	.n__sublevel-item--label {display: none;}
	.n__level-item--dropdown:hover {border-bottom: 5px solid var(--c-red-darker);}
	.n__level-item--dropdown:hover > .n__sublevel {display: block; }
}


/* mapa */

.map {width: 100%; height: 100%; display: flex; }

/* popup */
.popup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0 0 0 /.8); z-index: 900; color: #fff;}
.popup:target {display: block;}
.popup__body {background: var(--c-red); position: fixed; top: 0; right: 0; width: 100%; height: 100%; padding: 10px; display: flex; flex-direction: column;}
.popup img {width: 100%; }
.popup__container {width: 100%; height: 100%; overflow: hidden; overflow-y: auto; padding-right: 10px;}
.popup__close {position: fixed; top: 0px; right: 0px; z-index: 910; line-height: 50px; font-size: 2.3rem; width: 50px; text-align: center; opacity: .8}
.popup__close:hover {text-decoration: none; opacity: 1}

@media all and (min-width: 992px) {
	.popup__close {top: 12px; right: 12px;}
	.popup__close-out {width: 100%; height: 100%; position: fixed;}
	.popup__body {width: 50%; padding: 2rem;}
}

	.booklist__item {display: flex;}
	.booklist__item-text {order: 2}
	.booklist__item-image {order: 1; flex: 0 0 7%; margin-right: 1rem; padding-top: .25rem;}

/* scrollbar */
.popup__container::-webkit-scrollbar {width: 10px;}
.popup__container::-webkit-scrollbar-track { background: rgba(255 255 255 /.2); }
.popup__container::-webkit-scrollbar-thumb { background: rgba(255 255 255 /.2); }

/* text typo */
.text a:hover {text-decoration: underline; }

.text h1 {font-size: 1.6rem; font-weight: 700;}
.text h2 {font-size: 1.6rem; font-weight: 700; margin: 1.5rem 0}
.text h2:first-child {margin-top: 0;}
.text h2 small {font-weight: normal; display: block; font-size: 1.2rem; font-style: italic;}

.text p, .text ul, .text ol, .text dl, .text address, .text blockquote {margin-bottom: 1.5rem;}
.text ul, .text dl, .text ol {margin-top: 2rem;}

.text ul > li:before, ul.bullet > li:before {content: "—"; position:absolute;margin-left: -1.5em; color: var(--c-lightgray);}
.text ul ul > li:before, ul.bullet ul > li:before {content: "";}
.text ul ul, ul.bullet ul {list-style-type: circle;}
.text ul, ul.bullet  {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 blockquote {padding-left: 2rem; border-left: 5px solid rgba(255 255 255 /.1); font-style: italic;}

/* timeline */
.p--vh-timeline {background: #333; color: #fff; position: relative; height: auto; padding: 70px 10px; z-index: 780;}
.p--vh-timeline header {display: none;}
.p--vh-timeline:before {content: " "; position: absolute; top: 0; left: 0; height: 100%; width: 35px; background: #444; border-right: 2px dashed #111;}

.timeline h1 {margin: 2rem 0 2rem calc(50px);}
.timeline__block {display: flex; padding-top: 4rem; padding-bottom: 1rem; flex-direction: column; margin-left: 50px;}
.timeline__block:before {content: " "; position: absolute; width: 100%; height: 100px; background: transparent no-repeat left 20px; top: 0; left: 0; background-image: url("data:image/svg+xml,%3Csvg width='897' height='45' viewBox='0 0 897 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-137 0C-137 24.8528 94.4688 45 380 45C665.531 45 897 24.8528 897 0H-137Z' fill='url(%23paint0_radial)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(380) rotate(90) scale(45 517)'%3E%3Cstop stop-opacity='0.13'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E%0A");}
.timeline__block-title {position: absolute; background: #111; top: 0; line-height: 40px; padding: 0 1rem; border-radius: 50px; left: -50px;}

.timeline__block-image img {max-width: 100%;}
.timeline__block-image-count {display: inline-block; vertical-align: top; font-size: 10px; font-weight: 700; color: #fff; line-height: 12px; opacity: .5; margin-left: .5rem;}
.timeline__block-image-count svg {width: 12px; height: 12px; display: inline-block; vertical-align: bottom; margin-right: 3px;}
.timeline h1 {font-size: 1.6rem; font-weight: 700;}
.timeline h1 small {font-weight: normal; display: block; opacity: .5}

@media all and (min-width: 768px) {
	.p--vh-timeline {padding: 70px 5%;}
	.p--vh-timeline:before {content: " "; position: absolute; top: 0; left: 0; height: 100%; width: 27.6%; background: #444; border-right: 2px dashed #111;}
	
	
	.timeline h1 {margin: 3rem 0 3rem calc(25% + 2rem);}
	.timeline__block { flex-direction: row; margin-left: 0;}
	.timeline__block-title {left: calc(25% - 1rem);}
	.timeline__block-content {order: 2; flex: 0 1 75%; width: 75%; padding-left: 2rem; max-width: 650px; }
	.timeline__block-image {order: 1; flex: 0 0 25%; width: 25%; text-align: right; padding-right: 2rem;}
	.timeline__block-image-count {display: block; padding-top: .25rem; margin-left: 0;}
}

body #lightGallery-close:after {
	right: 0 !important;
    top: 0 !important;
    width: 100%;
    height: 100%;
    text-align: center !important;
    line-height: 50px !important;
	text-shadow: 0px 0px 10px rgb(0 0 0 / 75%);
}

body #lightGallery-close {
    right: 0 !important;
    bottom: auto !important;
	width: 50px !important;
	height: 50px !important;
	top: 0;
	background-color: !important;
}