* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
	color: #5c3200;
	font-size: 21px;
	transition: 0.5s;
}

#bannermenu {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: metropolis;
	font-size: 20px;
	scroll-margin-top: 40px;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

#bg_intro {
	display: flex;
	flex-flow: row wrap;
	background-color: transparent;
	margin: 0;
	padding: 0; 
	max-width: 100%;
	height: fit-content;
	max-height: 900px;
	background-repeat: no-repeat;
	background-size: 100%;
	background-image: url(img/bg_intro.png);
}

#bg_kontakt {
	display: flex;
	flex-flow: column;
	background-color: transparent;
	margin: 0;
	padding: 2% 0 1% 0;
	width: 100%;
	height: fit-content;
	background-repeat: no-repeat;
	background-size: 100%;
	background-image: url(img/train_grass.png);
}


body {
	display: flex;
	background-color: #e7e7e7;
	flex-flow: column;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

#bologna {
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

button {
	height: 95%;
	width: 16%;
	font-family: metropolis;
	font-size: 20px;
	font-weight: bold;
	margin: 0 auto;
	padding: 1% 0;
	border: none;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

.dwld_item {
	display: flex;
	flex-flow: column;
	width: 23%;
	margin: 1% auto;
	padding: 1%;
	border-radius: 10px;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

#dwld {
	margin: 1% auto;
	border-radius: 10px;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

#final {
	padding: 0;
}

@font-face {
	font-family: metropolis;
	src: url(Metropolis-Medium.otf);
}

form {
	display: flex;
	flex-flow: column;
	width: 100%;
}

.form {
	display: flex;
	flex-flow: column;
	width: 100%;
}


h1 {
	margin: 1% 0;
	padding: 0 0 0 5%;
	font-weight: bold;
	font-size: 36px;
} 

h2 {
	width: 96%; 
	margin: 1% 0 0 0;
	padding: 0 0 0 5%;
	font-weight: normal;
} 

h3 {
	margin: 1% 0;
	padding: 0 0 0 5%;
	font-weight: bold;
	font-size: 22px;
} 

h4 {
	margin: 1% 0;
	padding: 0 0 0 4%;
	font-weight: normal;
	font-size: 14px;
} 

.heading {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.horizon {
	display: flex;
	flex-flow: column;
	width: 100%;
	font-family: metropolis;
	font-size: 20px;
	padding: 2% 0 1% 0;
	scroll-margin-top: 40px;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

html {
	display: flex;
	scroll-behavior: smooth;
	width: 100%;
} 

iframe {
	display: flex;
	flex-flow: row wrap;
	width: 30%;
	aspect-ratio: 16/9;
	margin: 1% auto;
	border-style: none;
}

.tile_train iframe {
	width: 100%;
	aspect-ratio: 16/9;
	margin: 1% auto;
	border-style: none;
}

#intro {
	padding: 2% 6% 25% 6%;
	display: flex;
	flex-flow: column;
	width: 100%;
	scroll-margin-top: 40px;
}

#kontakt {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	padding: 0;
}


#kontakt p {
	padding: 10px 2%;
}

#kontakt .tile {
	display: flex;
	flex-flow: column;
	width: 28%;
	margin: 0 auto 1% 5%;
	padding: 0;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

#logo {
	width: 20%;
	margin: 2% auto;
}

p {
	width: 94%;
	margin: 0;
}

.horizon p {
	padding: 10px 2% 0 5%;
}

#prameny {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
}

.subheading {
	display: flex;
	align-items: flex-start;
	flex-flow: column;
	width: 96%;
	margin: 0 auto 0 0;
	padding: 0;
}

.tile {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 28%;
	margin: 0 auto;
	padding: 0;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

.tile_train {
	display: flex;
	flex-flow: column;
	width: 44%;
	margin: 1% auto;
	padding: 1% 0.5%;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

.a_tile {
	margin: 3% auto 0 auto;
	padding: 5%;
	font-weight: bold;
	font-size: 21px;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, #e7e7e7, #c9c9c9);
}

#trenink {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
}

#video {
	padding: 0 0 0 3%;
	display: flex;
	flex-flow: row wrap;
}




@media screen and (max-width:1600px) {

	iframe {
		width: 45%;
	}

	#logo {
		width: 24%;
		margin: 5% auto;
	}

	#video {
		padding: 0 0 0 2%;
	}

}

@media screen and (max-width:1410px) {

	.a_tile {
		font-size: 19px;		
	}

	h1 {
		font-size: 36px;	
	}

	.horizon {
		font-size: 19px;
	}

}

@media screen and (max-width:1250px) {

	button {
		font-size: 19px;
	}

	a:hover {
		font-size: 19px;
	}

	h1 {
		font-size: 32px;
		padding: 0 0 0 3%;
	}

	h3 {
		padding: 0 0 0 3%;
	}

	.horizon {
		font-size: 18px;
	}

	.horizon p {
		padding: 10px 2% 0 3%;
	}

	#kontakt .tile {
		width: 36%;
		margin: 0 auto 1% 3%;
	}

	#kontakt p {
		padding: 6px 3%;
	}
}

@media screen and (max-width:1060px) {

	button {
		font-size: 17px;
	}

	a:hover {
		font-size: 18px;
	}

	.dwld_item {
		width: 46%;
		margin: 1% auto;
	}

	h1 {
		font-size: 28px;	
	}

	#logo {
		width: 30%;
	}
}

@media screen and (max-width:1000px) {

	iframe {
		width: 90%;
		margin: 2% auto;
	}

	.horizon {
		font-size: 16px;
	}

	.tile_train {
		width: 96%;
	}

	#video {
		padding: 0;
	}
}

@media screen and (max-width:900px) {

	.a_tile {
		font-size: 17px;		
	}

	#bg_kontakt {
		flex-flow: row wrap;
	}

	button {
		width: 33.3%;
		margin: 0 auto;
		padding: 2% 0;
	}

	h1 {
		font-size: 24px;
		margin: 2% 0;
	}

	h3 {
		font-size: 20px;
	}

	#intro {
		padding: 4% 6% 25% 6%;
	}


	#kontakt p {
		padding: 4px 2%;
	}

	#kontakt .tile {
		width: 40%;
		margin: 0 auto 1% auto;
	}

	#logo {
		width: 34%;
		margin: 5% auto;
	}

	.tile {
		width: 96%;
	}

}

@media screen and (max-width:800px) {

	button {
		font-size: 16px;
	}

	a:hover {
		font-size: 17px;
	}
}

@media screen and (max-width:600px) {

	.a_tile {
		font-size: 15px;		
	}

	button {
		font-size: 14px;
	}

	a:hover {
		font-size: 15px;
	}

	.dwld_item {
		width: 90%;
		margin: 1% auto;
	}

	h1 {
		font-size: 22px;
		margin: 3% 0;
	}

	h3 {
		font-size: 18px;
	}

	.horizon {
		font-size: 14px;
	}

	#intro {
		padding: 6% 6% 25% 6%;
	}

	#kontakt .tile {
		width: 48%;
	}

	#logo {
		width: 40%;
		margin: 4% auto;
	}
}


@media screen and (max-width:380px) {

	button {

		font-size: 12px;
	}

	a:hover {
		font-size: 13px;
	}
}