@charset "utf-8";

@-ms-viewport {
  width: device-width;
}

@media (max-width:1920px){
	.menu-title {
		font-size: 3rem;
	}
	.ref-name {
		font-size: 2.25rem;
	}
	.link-button {
		margin-top: 12%;
	}
	.ref-text {
	margin-bottom: 23vh;
	}
	
	.addition {
	font-size: 1.8rem;
	}
}
@media (max-width:1600px){
	.menu-title {
		font-size: 2.7rem;
	}
	.ref-name {
		font-size: 2rem;
	}
	.ref-type {
		font-size: 0.8rem;
	}
	.link-button {
		margin-top: 10%;
	}
	.button-text {
		font-size: 0.8rem;
	}
	.ref-text {
	margin-bottom: 24vh;
	}
	.link-button-container {
	bottom: 20vh;
	}
	.back-button-a {
		font-size: 0.8rem;
	}
	.addition {
	font-size: 1.4em;
	}
}

@media (max-width:1366px){
	.menu-title {
		font-size: 2.4rem;
	}
	.container {
		width: 74%;
	}
	.ref-name {
		font-size: 1.8rem;
	}
	.ref-type {
		font-size: 0.8rem;
	}
	.link-button {
		margin-top: 8%;
	}
	.button-text {
		font-size: 0.8rem;
	}
	.ref-text {
	margin-bottom: 26vh;
	}
	.link-button-container {
	bottom: 18vh;
	}
	.back-button-a {
		font-size: 0.8rem;
	}
	.addition {
	font-size: 1.4rem;
	}
}
@media (max-width:1024px){
	.menu-title {
		font-size: 1.8rem;
	}
	.container {
		width: 80%;
	}
	.back-button-top {
		display: none;
	}
	.back-button {
		display: none;
	}
	.ref-name {
		font-size: 1.4rem;
	}
	.ref-type {
		font-size: 0.8rem;
	}
	.link-button {
		margin-top: 8%;
	}
	.button-text {
		font-size: 0.8rem;
	}
	.ref-text {
	margin-bottom: 26vh;
	}
	.link-button-container {
	bottom: 20vh;
	}
	.back-button-a-bottom {
		font-size: 0.8rem;
	}
	.back-button-bottom {
		display: flex;
	}
	.addition {
		margin: 5vh 0 5vh 0;
	}
}
@media (max-width: 768px) {
	html {
		font-size: 16px;
	}
	
	.menu-title {
		font-size: 2.8rem;
	}	
	
	#main-menu-img {
	display: block;
	width: 100%;
	}
	
	#menu-item1 {
		width: 100%;
		position: relative;
	}
	
	#menu-item2 {
		width: 100%;
		position: relative;
	}
	
	#menu-item3 {
		width: 100%;
		position: relative;
	}
	
	#ecommerce-menu-con {
		width: 100%;
		height: 30vh;
		position: relative;
		display: block;
	}
	
	#mesta-obce-menu-con {
		width: 100%;
		height: 30vh;
		position: relative;
		display: block;
	}
	
	#ostatne-menu-con {
		width: 100%;
		height: 30vh;
		position: relative;
		display: block;
	}
	
	.gradient {
		height: 30vh;
		position: absolute;
		display: block;
	}
	
	.container {
		width: 80%;
	}
	
	.ref-name {
		font-size: 2.25rem;
		text-align: center;
	}
	
	.ref-type {
		font-size: 0.9rem;
	}
	
	.button-text {
		font-size: 0.9rem;
	}
	
	.ref-container-left {
		display: block;
		height: auto;
		margin: 0 0 0 0;
	}
	

	.ref-container-right {
		display: block;
		height: auto;
		margin: 0 0 0 0;
		flex-direction: row;
	}
	
	.link-button-container {
		display: none;
	}
	
	.link-button-container-mobile {
		display: block;
		width: auto;
		margin-top: 3%;
		justify-content: center;
		height: auto;
	}
	
	.ref-text-container-left {
		display: block;
		position: relative;
		width: inherit;
		margin: 0 0 10% 0;
		height: auto;
	}
	
	.ref-text-container-right {
		display: block;
		position: relative;
		width: inherit;
		margin: 0 0 10% 0;
		height: auto;
	}

	.ref-type {
		display: flex;
		justify-content: center;
	}
	
	.ref-name {
		display: flex;
		justify-content: center;
	}
	
	.ref-text {
		margin-bottom: 0;
	}
	
	.ref-img-container {
		width: 100%;
		height: auto;
	}
	
	.link-button {
		display: flex;
		width: 100%;
		justify-content: center;
		margin-top: 5%;
	}
	
	.ref-container {
		width: auto;
		display: flex;
		height: 80vh;
		align-items: center;
		margin-bottom: 0;
	}
	
	.addition {
	font-size: 1.8rem;
	}
	
	.back-button-a-bottom {
		font-size: 0.9rem;
	}
}
@media (max-width: 500px) {
	
	.menu-title {
		font-size: 2.2rem;
	}	
	
	.logo {
		font-size: 1rem;
	}
	
	.label-year {
		font-size: 1rem;
	}
	
	.ref-name {
		font-size: 1.4rem;
	}
	
	.ref-type {
		font-size: 0.8rem;
	}
	
	.button-text {
		font-size: 0.8rem;
	}
	
	.addition {
	font-size: 1.4rem;
	}
	
	.back-button-a-bottom {
	font-size: 0.8rem;
	}
}

@media (max-device-width: 768px) and (orientation: landscape) {
   html {
		font-size: 16px;
	}
	.logo {
		font-size: 0.8rem;
	}
	.label-year {
		font-size: 0.8rem;
	}
	
	.menu-title {
		font-size: 1.2rem;
	}	
	
	#main-menu-img {
	display: inline-flex;
	width: 100%;
	}
	
	#menu-item1 {
		width: 33.33333332%;
		position: relative;
	}
	
	#menu-item2 {
		width: 33.33333332%;
		position: relative;
	}
	
	#menu-item3 {
		width: 33.33333332%;
		position: relative;
	}
	
	#ecommerce-menu-con {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
	}
	
	#mesta-obce-menu-con {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
	}
	
	#ostatne-menu-con {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
	}
	
	.gradient {
		height: 100%;
		position: absolute;
		display: block;
	}
	
	.container {
		width: 90%;
	}
	.ref-container {
		display: block;
	}
	.ref-container-left {
	display: inline-flex;
	width: 100%;
	height: 70vh;
	margin: 5vh 0 10vh 0;
	}
	.ref-container-right {
	display: inline-flex;
	flex-direction: row-reverse;
	width: 100%;
	height: 70vh;
	margin: 5vh 0 10vh 0;
	}
	
	.ref-text-container-left {
	display: flex;
	position: relative;
	width: 35%;
	margin: 0 8% 0 0%;
	height: 100%;
	align-content: center;
	align-items: center;
	}
	.ref-text-container-right {
	display: flex;
	position: relative;
	width: 35%;
	margin: 0 0% 0 8%;
	height: 100%;
	align-content: center;
	align-items: center;
	}
	.ref-img-container {
	display: flex;
	align-items: center;
	width: 57%;
	height: inherit;
}
	
	.back-button-top {
		display: none;
	}
	.back-button {
		display: none;
	}
	.ref-name {
		display: block;
		font-size: 1.2rem;
		text-align: left;
	}
	.ref-type {
		display: block;
		font-size: 0.6rem;
	}
	.link-button {
		display: flex;
		width: 100%;
		justify-content: flex-start;
		margin-top: 5%;
	}
	.button-text {
		font-size: 0.6rem;
	}
	.ref-text {
	margin-bottom: 26vh;
	}
	.link-button-container {
	display: block;
	position: absolute;
	bottom: 13vh;
	}
	.link-button-container-mobile {
	display: none;
	position: relative;
	}
	.back-button-a-bottom {
		font-size: 0.6rem;
	}
	.back-button-bottom {
		display: flex;
	}
	.addition {
		font-size: 1.2rem;
		margin: 5vh 0 5vh 0;
	}
}

@media (max-device-width: 500px) and (orientation: landscape) {
	.logo {
		font-size: 0.6rem;
	}
	.label-year {
		font-size: 0.6rem;
	}
	
	.menu-title {
		font-size: 1rem;
	}
	.ref-name {
		display: block;
		font-size: 0.8rem;
		text-align: left;
	}
}