@charset "utf-8";

.transition-fade {
	opacity: 1;
	transition: 0.5s;
}

html.is-animating .transition-fade {
	opacity: 0;
}

.fade-in {
	animation: fadeInAnimation ease 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	}
	@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 0;
		}
	100% {
	opacity: 1;
	}
}

.main-header {
	z-index: 998;
	background-color: #020305;
	height: 10vh;
	position: relative;
	width: 100%;
}

.logo-container {
	float: left;
	margin-left: 5vh;
	height: inherit;
	display: inline-flex;
	align-items: center;
}

.label-container {
	float: right;
	margin-right: 5vh;
	height: inherit;
	display: inline-flex;
	align-items: center;
}
.logo {
	color: #FFFFFF;
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0.04rem;
	text-decoration: none;
	transition: 0.3s;
}

.logo:hover {
	color: #888888;
}

.label-year {
	color: #aaaaaa;
	font-size: 1.2rem;
	font-weight: 200;
	letter-spacing: 0.04rem;
}

body {
	color: #ffffff;
	margin: 0;
	background-color: #020305;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-size: 1rem;
}

html {
	font-size: 16px;
}

#main-menu-img {
	display: inline-flex;
	position: absolute;
	width: 100%;
	height: 90vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.menu-a {
	position: absolute;
	width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
	overflow: hidden;
    white-space: nowrap;
}
.menu-title {
	position: absolute;
	left: 5vh;
	bottom: 5vh;
	margin: 0;
	color: #FFFFFF;
	font-size: 3.6rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.1rem;
}

.gradient {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient( 200deg , rgba(2,3,5,0) 40%, rgba(2,3,5,0.9) 100%)
}

#ecommerce-menu-con {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	background: url(../images/ecommerce.webp)50% 40% no-repeat; /* 50% 50% centers image in div */
	filter: grayscale(80%);
	background-size: cover;
	transition: 0.3s;
}

#mesta-obce-menu-con {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	background: url(../images/mestaobce-alt1.webp) 50% 30% no-repeat; /* 50% 50% centers image in div */
	filter: grayscale(80%);
	background-size: cover;
	transition: 0.3s;
}

#ostatne-menu-con {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	background: url(../images/ostatne-alt.webp) 50% 50% no-repeat; /* 50% 50% centers image in div */
	filter: grayscale(80%);
	background-size: cover;
	transition: 0.3s;
}

#menu-item1 {
	width: 33.33333332%;
	overflow: hidden;
}

#menu-item1:hover > #ecommerce-menu-con {
	filter: grayscale(0%);
	transform: scale(1.1);
}

#menu-item2 {
	width: 33.33333332%;
	overflow: hidden;
}

#menu-item2:hover > #mesta-obce-menu-con {
	filter: grayscale(0%);
	transform: scale(1.1);
}

#menu-item3 {
	width: 33.33333332%;
	overflow: hidden;
}

#menu-item3:hover > #ostatne-menu-con {
	filter: grayscale(0%);
	transform: scale(1.1);
}

.back-button-top {
	display: none;

}

.back-button-a {
	display: inline-flex;
	align-items: center;
	width: 100%;
	height: 60%;
	text-decoration: none;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 200;
	letter-spacing: 0.1rem;
	transition: 0.3s;
}

.back-button-a:hover {
	opacity: 0.5;
}

.back-button-a:hover > .back-button-icon {
	margin-right: 8px;
}

.back-button-icon {
	display: inline;
	position: relative;
	background: url(../images/back.svg)50% 50% no-repeat;
	height: 12px;
	width: 12px;
	margin-right: 16px;
	transition: 0.3s;
}

.container-mobile {
	margin: auto;
	width: 70%;
	justify-content: center;
}

.container {
	margin: auto;
	width: 70%;
	justify-content: center;
}

.ref-container-left {
	display: inline-flex;
	width: 100%;
	height: 70vh;
	margin: 5vh 0 10vh 0;
}

.ref-text-container-left {
	display: flex;
	position: relative;
	width: 30%;
	margin: 0 8% 0 0%;
	height: 100%;
	align-content: center;
	align-items: center;

}

.ref-img-container {
	display: flex;
	align-items: center;
	width: 62%;
	height: inherit;
}

.ref-img {
	width: 100%;
}

.link-underline {
	width: 100%;
	height: 2px;
	float: right;
	border-bottom: 2px solid #333333;
	padding-top: 2px;
	margin: 0;
	transition: 0.3s
}

.link-button-container {
	position: absolute;
	bottom: 20vh;
}

.link-button {
	display: flex;
	margin-top: 18%;
}

.button-text {
	color: #ffffff;
	letter-spacing: 0.1rem;
	font-weight: 200;
	text-decoration: none;
	margin-top: 5px;
	padding: 0;
	font-size: 0.9rem;
	transition: 0.3s
}
.button-text:hover {
	color: #888888;
}
.button-text:hover > .link-underline {
	width: 0;
}

.ref-name {
	color: #ffffff;
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: 0.1rem;
	margin: 0;
}

.ref-type {
	color: #aaaaaa;
	font-size: 0.9rem;
	font-weight: 200;
	letter-spacing: 0.1rem;
	margin-top: 0;
	margin-bottom: 10px;
}



.ref-text {
	margin-bottom: 22vh;
}



.ref-text-container-right {
	display: flex;
	position: relative;
	width: 30%;
	margin: 0 0 0 8%;
	height: 100%;
	align-content: center;
	align-items: center;
}

.addition {
	font-size: 2rem;
	font-weight: 200;
	color: #666666;
	letter-spacing: 0.01rem;
	display: flex;
	width: 100%;
	justify-content: center;
	margin: 5vh 0 15vh 0;
}

.ref-container-right {
	display: inline-flex;
	flex-direction: row-reverse;
	width: 100%;
	height: 70vh;
	margin: 5vh 0 10vh 0;
}

.link-button-container-mobile {
	display: none;
	position: relative;
}

.no-mobile {
	display: none;
}

.ref-gradient-top {
	pointer-events: none;
	z-index: 997;
	top: 0;
	position: fixed;
	width: inherit;
	height: 20vh;
	background: linear-gradient( 0deg , rgba(2,3,5,0) 0%, rgba(2,3,5,1) 100%)
}

.ref-gradient-bottom {
	pointer-events: none;
	z-index: 996;
	bottom: 0;
	position: fixed;
	width: inherit;
	height: 20vh;
	background: linear-gradient( 180deg , rgba(2,3,5,0) 0%, rgba(2,3,5,1) 100%)
}

.back-button-bottom {
	display: none;
	justify-content: center;
	width: auto;
	margin-bottom: 15vh;
}

.back-button-a-bottom {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 60%;
	text-decoration: none;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 200;
	letter-spacing: 0.1rem;
	transition: 0.3s;
}
.back-button-a-bottom:hover {
	opacity: 0.5;
}

.back-button-icon-bottom {
	display: inline;
	position: relative;
	background: url(../images/back.svg)50% 50% no-repeat;
	height: 12px;
	width: 12px;
	margin-right: 12px;
	transition: 0.3s;
}
.back-button-a-bottom:hover > .back-button-icon-bottom {
	margin-right: 8px;
}

.back-button {
	display: inline-flex;
	z-index: 999;
	position: fixed;
	align-items: center;
	height: 10vh;
	left: 5vh;
	top: 0;
	background-color: #020305;
}