@charset "UTF-8";
/* CSS Document */


#kontakt {
	margin-bottom: 100px;
}

.nazev {
	padding-top: 80px;
	margin-bottom: 40px;
	font-family: var(--font-kyberna);
	font-size: 1.25rem;
}

.kontakty {
	padding: 30px 0;
	border-top: 1px solid var(--cnx-greylight);
	border-bottom: 1px solid var(--cnx-greylight);
	display: flex;
}

.kontakty > div {
    display: grid;
    grid-template-columns: 60px minmax(240px,320px);
    height: 110px;
}

.kontakt-ikona {
    display: flex;
    justify-content: center;
    align-items: center;
}

.kontakt-ikona img {
	width: 48px;
}

.kontakt-text {
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.5rem;
}

.kontakt-text p {
	line-height: 1.5rem;
}

.kontakty span {
	font-size: 0.875rem;
    font-family: var(--font-kyberna);
    margin-bottom: 2px;
}

.kontakty a {
	text-decoration: underline;
	text-decoration-color: var(--cnx-main);
	text-underline-offset: 2px;
}

.kontakty a:hover {
	color: var(--cnx-main);
}

.kontakt-dalsi {
	padding: 30px 0;
	display: flex;
	gap: 50px;
	border-bottom: 1px solid var(--cnx-greylight);
}

.kontakt-dalsi span {
	font-size: 0.875rem;
	font-family: var(--font-kyberna);
	margin-right: 10px;
}

.kontakty-ucitele {
	padding-top: 60px;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 30px;
}



/* ----- Mapa ----- */




#mapa iframe {
	width: 100%;
	aspect-ratio: 2.4 / 1;
}



/* ----- Jak se k nám dostaneš ----- */



#misto .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	padding-top: 100px;
}

#misto .container > div {
	max-width: 600px;
}

#misto h2 {
	margin-bottom: 40px;
}

#misto img {
	width: 100%;
	max-width: 700px;
}



/* ----- Responz – Tablet ----- */



@media screen and (max-width: 1199px) {
	
	
	#misto .container {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.kontakty {
		flex-wrap: wrap;
	}
	
}



/* ----- Responz – Mobil ----- */



@media screen and (max-width: 599px) {
	
	
	.kontakty {
		flex-direction: column;
	}
	
	.kontakt-dalsi {
		flex-direction: column;
		padding: 50px 0;
		gap: 22px;
	}
	
	#mapa iframe {
		aspect-ratio: 2 / 3;
	}
	
}