/* general css ----------------------------------- */
html {
	margin: 0;
	padding: 0;
	scroll-behavior:smooth;
	position: relative;
	overflow-x: hidden;
	height: 100vh;
}
body {
	overflow-x: hidden;
	color: #000;
	position: relative;
	background: #fff;
	padding: 0;
	margin: 0;
	height: 100vh;
	font-family: "roc-grotesk",sans-serif;
	font-weight:400;
}
body::-webkit-scrollbar, div::-webkit-scrollbar {width: 6px;}
body::-webkit-scrollbar-track, div::-webkit-scrollbar-track {background: rgba(255,255,255,.3);}
body::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb {
   background-color: #fff;
   border: 1px solid #fff;
}
img {max-width:100%;}
a, button, img, header, span, svg, text, :before, .owl-next, .owl-prev, .desc, .about {
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
   outline: none;
}
a {color: #000;}
a:hover {
	color: #000;
	text-decoration: none;
}
section {position: relative;}
*, ::after, ::before {box-sizing: border-box;}

.landscape {display: none;}

/* navigace ----------------------------------- */
nav {
	position: absolute;
	right: 0;
	top: 0;
	width: 25%;
	height: 100%;
}
.logo {
	width: 220px;
	display: inline-block;
	position: absolute;
	top: 80px;
	left: 15%;
}
nav p {margin: 30px 0 50px 0;}
nav h3 {margin: 0;}
nav address {
	font-style: normal;
	font-size: 14px;
	text-transform: uppercase;
	line-height: 150%;
	letter-spacing: 2px;
	position: absolute;
	left: 15%;
	bottom: 30px;
}
nav address a {text-decoration: none;}
nav address img {width: 24px;}
nav address > a {
	display: inline-block;
	position: relative;
}
nav address > a:hover:before {
   content: "";
   position: absolute;
   bottom: 2px;
   left: 0;
   width: 100%;
   height: 1px;
   background: #000;
   animation: hovermenu 0.6s 1;
}
nav address div a {
	display: inline-block;
	margin: 0 10px 0 0;
}
nav address div a:hover {transform: scale(1.2,1.2);}
.mobile > span {
	font-size: 10px;
	text-transform: uppercase;
	position: absolute;
	transform: rotate(-90deg);
	right: -25px;
	bottom: 70px;
}
.mobile > ul {
	font-size: 35px;
	font-weight: 700;
	text-transform: uppercase;
	position: absolute;
	left: 15%;
	top: 50%;
	transform: translate(0,-65%);
	margin: 0;
	padding: 0;
	list-style-type: none;
	letter-spacing: 2px;
}
.mobile > ul li {padding: 6px 0;}
.mobile > ul a {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.mobile > ul a:hover:before {
   content: "";
   position: absolute;
   bottom: 5px;
   left: 0;
   width: 100%;
   height: 2px;
   background: #000;
   animation: hovermenu 0.6s 1;
}
.visualization .mobile > ul li:first-child a:before {
   content: "";
   position: absolute;
   bottom: 5px;
   left: 0;
   width: 100%;
   height: 2px;
   background: #000;
   animation: hovermenu 0.6s 1;
}
.visualization .mobile > ul li + li a {opacity: .3;}
.hamburger {
	width: 30px;
	height: 30px;
	position: absolute;
	transform: rotate(0deg) translate(-100%,0);
	transition: .5s ease-in-out;
	cursor: pointer;
	left: 0;
	top: 25px;
	display: none;
	margin-left: -20px;
	z-index: 10;
}
.hamburger span {
   display: block;
   position: absolute;
   height: 3px;
   width: 100%;
   border-radius: 9px;
   opacity: 1;
   left: 0;
   transform: rotate(0deg);
   transition: .25s ease-in-out;
}
.hamburger span {background: #000;}
.hamburger span:nth-child(1) {top: 0px;}
.hamburger span:nth-child(2), .hamburger span:nth-child(3) {top: 8px;}
.hamburger span:nth-child(4) {top: 16px;}
.hamburger.open span {background: #000;}
.hamburger.open span:nth-child(1) {
   top: 11px;
   width: 0%;
   left: 50%;
}
.hamburger.open span:nth-child(2) {transform: rotate(45deg);}
.hamburger.open span:nth-child(3) {transform: rotate(-45deg);}
.hamburger.open span:nth-child(4) {
   top: 11px;
   width: 0%;
   left: 50%;
}

/* about ----------------------------------- */
.about {
	background: #000;
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	width: 75%;
	height: 100%;
	color: #fff;
	transform: translate(-100%,0);
	opacity: 0;
}
.about.active {
	transform: translate(0,0);
	opacity: 1;
}
.about .close {
	position: absolute;
	width: 26px;
	height: 26px;
	border: none;
	margin: 0;
	right: 30px;
	top: 30px;
	background: none;
	cursor: pointer;
	opacity: .6;
}
.about .close:hover {opacity: 1;}
.about .close span {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
}
.about .close:hover span {transform: rotate(90deg);}
.about .close span:before, .about .close span:after {
   position: absolute;
   left: 0;
   top: 50%;
   width: 100%;
   height: 2px;
   background: #fff;
   content: "";
   transform: rotate(45deg);
}
.about .close span:after {transform: rotate(-45deg);}
.about-body {
	position: absolute;
	right: 10%;
	width: 60%;
	top: 100px;
	bottom: 50px;
}
.about-body h4 {
	font-size: 100px;
	line-height: 80px;
	font-weight: 700;
	letter-spacing: 15px;
	margin: 0;
}
.about-body h4 span {
	font-size: 22px;
	letter-spacing: 4px;
	display: block;
}
.about-body > a {
	font-size: 35px;
	letter-spacing: 1px;
	display: inline-block;
	position: relative;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	margin-top: 10%;
	text-decoration: none;
}
.about-body > a:hover:before {
   content: "";
   position: absolute;
   bottom: 2px;
   left: 0;
   width: 100%;
   height: 3px;
   background: #fff;
   animation: hovermenu 0.6s 1;
}
.about-content {
    max-height: 300px;
    overflow: auto;
	margin: 50px 0 0 0;
	padding-right: 40px;
}
.about-content table td {vertical-align: top;}
.about-content table td:first-child {width: 160px;}
.about-content table td:last-child {
    padding: 13px 0 20px 0;
	color: #ADADAD;
	font-size: 15px;
	letter-spacing: 1px;
}
.about-content strong {
    position: relative;
	display: inline-block;
	font-weight: 700;
	font-size: 35px;
	padding: 0 50px 0 0;
}
.about-content strong:before {
    position: absolute;
	content: "";
	width: 25px;
	height: 3px;
	background: #fff;
	right: 0;
	top: 20px;
}

/* home --------------------- */
.home-banner {
	width: 75%;
	position: relative;
	overflow: hidden;
	height: 100vh;
	color: #fff;
}
.homepage-slider, .homepage-slider .owl-stage-outer, .homepage-slider .owl-stage-outer .owl-stage, .homepage-slider .owl-stage-outer .owl-stage .owl-item {height: 100%;}
.homepage-item {
	height: 100%;
	position: relative;
	overflow: hidden;
}
.homepage-item img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	height: 100%;
	max-width: none;
	width: auto !important;
}
.home-banner .desc {
	position: absolute;
	z-index: 10;
	text-align: right;
	right: 100px;
	bottom: 30px;
	transform: translate(0,150%);
	opacity: .5;
}
.owl-item.active .desc {
	transform: translate(0,0);
	opacity: 1;
}
.owl-item.owl-animated-out .desc {
	transform: translate(0,-200%);
	opacity: 0;
}
.home-banner .desc h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.home-banner .desc p {
	font-size: 14px;
	margin: 0;
	letter-spacing: 2px;
}
.home-banner .owl-nav {
	position: absolute;
	z-index: 10;
	bottom: 100px;
	right: 40px;
}
.home-banner .owl-next, .home-banner .owl-prev {
	position: absolute;
	background: url("../images/arrow.svg") no-repeat center !important;
	text-indent: -9999px;
	width: 12px;
	height: 53px;
	top: -70px;
	left: 0;
	opacity: .6;
}
.home-banner .owl-prev {
	transform: rotate(180deg);
	top: 15px;
}
.home-banner .owl-next:hover, .home-banner .owl-prev:hover {opacity: 1;}
.home-banner .slider-counter {
	position: absolute;
	bottom: 90px;
	right: 18px;
	z-index: 10;
	font-weight:700;
	font-size: 15px;
}

/* list ------------------------------ */
.list {
	width: 75%;
	position: relative;
	overflow: hidden;
	height: 100vh;
	color: #fff;
}
.owl-navigation {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #fff;
	width: 100%;
	height: 10%;
	display: flex;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.owl-filter-bar {
	align-self: center;
	padding-left: 40px;
}
.owl-filter-bar .item {
	text-decoration: none;
	display: inline-block;
	position: relative;
	margin: 0 15px;
	cursor: pointer;
}
.owl-filter-bar .item:hover:before {
   content: "";
   position: absolute;
   bottom: 3px;
   left: 0;
   width: 100%;
   height: 1px;
   background: #000;
   animation: hovermenu 0.6s 1;
}
.owl-navigation .slider-counter {
	color: #000;
	position: absolute;
	left: 89.9%;
	top: 50%;
	transform: translate(0,-50%);
	text-align: center;
}
.list .owl-nav {
	position: absolute;
	right: 80px;
	bottom: -35px;
	z-index: 10;
}
.list .owl-next, .list .owl-prev {
	position: absolute;
	background: url("../images/arrow-black.svg") no-repeat center !important;
	text-indent: -9999px;
	width: 53px;
	height: 12px;
	top: 0;
	left: 0;
}
.list .owl-prev {
	transform: rotate(180deg);
	left: -140px;
}
.list .owl-next.disabled, .list .owl-prev.disabled {
	opacity: .4;
	cursor: default;
}
.list .owl-next:hover {left: 10px;}
.list .owl-prev:hover {left: -150px;}
.list .owl-next.disabled:hover {left: 0;}
.list .owl-prev.disabled:hover {left: -140px;}
.slide {
	position: relative;
	margin-bottom: 8px;
	background: #ccc;
}
.slide:after {
	content: "";
	padding-top: 64%;
	display: block;
}
.slide a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
}
.slide a img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 120% !important;
	max-width: none;
}
.slide a .desc {
	position: absolute;
	left: 20px;
	bottom: -100%;
	width: 100%;
	z-index: 1;
	color: #fff;
}
.slide a .desc h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.slide a .desc p {
	font-size: 14px;
	margin: 0;
	letter-spacing: 2px;
}
.slide a:hover img {
	transform: translate(-50%,-50%) scale(1.1);
	filter: contrast(150%);
	opacity: .6;
}
.slide a:hover .desc {bottom: 20px;}

/* detail ------------------------------ */
.detail {
	width: 75%;
	position: relative;
	overflow: hidden;
	height: 100vh;
	color: #fff;
	background: #000;
}
.detail:before {
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #000;
	content: "";
	z-index: 11;
	animation: efect01 0.6s 1;
}
@keyframes efect01 { 
	0% {width: 100%;}
	100% {width: 0;}
}
.detail .close {
	position: absolute;
	width: 26px;
	height: 26px;
	border: none;
	margin: 0;
	right: 30px;
	top: 30px;
	background: none;
	cursor: pointer;
	opacity: .6;
	z-index: 5;
}
.detail .close:hover {opacity: 1;}
.detail .close span {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
}
.detail .close:hover span {transform: rotate(90deg);}
.detail .close span:before, .detail .close span:after {
   position: absolute;
   left: 0;
   top: 50%;
   width: 100%;
   height: 2px;
   background: #fff;
   content: "";
   transform: rotate(45deg);
}
.detail .close span:after {transform: rotate(-45deg);}
.detail-slider {
	height: 85vh;
	overflow: hidden;
	z-index: 2;
}
.detail-slider .owl-stage-outer, .detail-slider .owl-stage-outer .owl-stage, .detail-slider .owl-stage-outer .owl-stage .owl-item {height: 100%;}
.detail-item {
	height: 100%;
	position: relative;
	overflow: hidden;
}
.detail-item img {
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	max-width: none;
	width: auto !important;
}
.detail-slider .owl-nav {
	position: absolute;
	z-index: 10;
	top: 80%;
	left: 40px;
}
.detail-slider .owl-next, .detail-slider .owl-prev {
	position: absolute;
	background: url("../images/arrow.svg") no-repeat center !important;
	text-indent: -9999px;
	width: 12px;
	height: 53px;
	top: -70px;
	left: 0;
	opacity: .6;
}
.detail-slider .owl-prev {
	transform: rotate(180deg);
	top: 15px;
}
.detail-slider .owl-next:hover, .detail-slider .owl-prev:hover {opacity: 1;}
.detail .slider-counter {
	position: absolute;
	top: 67vh;
	left: 30px;
	z-index: 10;
	font-weight:700;
	font-size: 15px;
	text-shadow: 0 0 5px #000;
}
.detail .nfo {
    display: flex;
    flex-wrap: wrap;
	text-transform: uppercase;
	letter-spacing: 2px;
	height: 15vh;
}
.detail .title {
    flex: 0 0 auto;
    width: 30%;
	padding-left: 40px;
	align-self: center;
}
.detail .description {
    flex: 0 0 auto;
    width: 55%;
	align-self: center;
}
.detail .navi {
    flex: 0 0 auto;
    width: 15%;
	align-self: center;
	text-align: right;
	padding-right: 40px;
}
.detail .title h1 {
	font-weight: 700;
	font-size: 22px;
	margin: 0;
}
.detail .title h2, .detail .title span {
	font-weight: 400;
	font-size: 14px;
	margin: 0;
}
.detail .description p {
	font-size: 13px;
	margin: 0;
	color: #ADADAD;
}
.detail .navi a {
    display: inline-block;
	background: url("../images/arrow-detail.svg") no-repeat center;
	width: 23px;
	height: 12px;
	text-indent: -9999px;
	transform: rotate(180deg);
	margin: 5px;
}
.detail .navi a + a {transform: rotate(0);}
.detail .navi a:hover {transform: rotate(180deg) translate(5px,0);}
.detail .navi a + a:hover {transform: rotate(0) translate(5px,0);}





/* animace -------------------- */
@keyframes hovermenu { 
	0% {width: 0;}
	100% {width: 100%;}
}


/* tom 2023 ---------------------------- */