@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root{
	--zbarva: #2A7EA0;
	--hbarva: rgb(69, 217, 163);
	--hbarva_light: #d1f8ea;
	--barva_podkres: #B9F7FA;
	--sirka_str: 1140px;
}

html, body{
  height: 100%;  
}
 
body{
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  color: #4a4c54;
  background: white;
  padding-bottom: -10px;
}

.page-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh; 
  }
  
  .content {
	flex: 1;
  }

.uzaver{
	width: 100%;
	clear: both;
}

.stred{
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center;
	display: table;
}

.stred .cell{
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center;
	display: table-cell;
}

.top_bar{
	width: 100%;
	background-color: var(--zbarva);
	z-index: 1;
}

.top_bar > div{
	width: var(--sirka_str);
	margin: 0 auto;
	padding: 15px 0;
	display: block;
	color: white;
	text-align: right;
	font-size: 0.9em;
}

.top_bar > div > div{
	display: inline-block;
	margin-left: 20px;;
}

.top_bar > div > .telefon{
	text-align: right;
}

.top_bar > div > .email{
	text-align: right;
	transition: 0.3s;
}

.top_bar > div a{
	color: white;
	text-decoration: none;
	transition: 0.3s;
}
.top_bar > div i{
	font-size: 1em;
	margin-right: 10px;
	vertical-align: middle;
	color: var(--barva_podkres)
}

.top_bar > div > div:hover, .top_bar > div > div:hover a{
	cursor: pointer;
	color: var(--barva_podkres);
}
.navbar_back{
	width: 100%;
	background-color: white;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	padding: 30px 0px;
	width: var(--sirka_str);
	margin: 0 auto;
  }
  
  .logo {
	font-size: 1.5rem;
	font-weight:light;
  }
  
  .nav-links {
	display: flex;
	list-style: none;
	transition: all 0.3s ease;
  }
  
  .nav-links li {
	margin-left: 40px;
  }
  
  .nav-links a {
	color: #333;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.1em;
	
	display: inline-block;
	padding: 15px 0px;
	position: relative;
  }

  .nav-links a:after {    
	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: block;
	height: 2px;
	left: 50%;
	position: absolute;
	background: var(--hbarva);
	transition: width 0.3s ease 0s, left 0.3s ease 0s;
	width: 0;
  }

  .nav-links a:hover:after { 
	width: 100%; 
	left: 0; 
  }
  
  .menu-toggle {
	display: none;
	font-size: 2rem;
	cursor: pointer;
  }

  .navbar .logo{
	color: var(--zbarva)
  }
  
  .bg_1{
	background: url(../img/bg_1.jpg) no-repeat center fixed;
	background-size: cover;
	position: relative;
	overflow: hidden;
	padding: 200px 0px;
	z-index: 1;
  }

  .bg_1 .bg_1_overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
	background: linear-gradient(to top, rgba(56, 118, 179, 0.7), rgba(56, 169, 179, 0.7));
	pointer-events: none; 
	z-index: 1;
  }

  .container{
	width: var(--sirka_str);
	margin: 0 auto;
	padding: 0px 20px;
  }

  .bg_1 .container{
	z-index: 3;
	position: relative;
  }

  .bg_1 h1{
	font-size: 3em;
	color: white;
	text-align: left;
	line-height: 1.2em;
	font-weight: 900;
	text-transform: uppercase;
  }
  .bg_1 h2{
	font-size: 3em;
	color: white;
	text-align: left;
	line-height: 1.2em;
	font-weight: 900;
	text-transform: uppercase;
  }
  .bg_1 p{
	font-size: 1.3em;
	color: white;
	text-align: left;
	line-height: 1.2em;
	margin-top: 20px;
  }

  .dlazdice{
	width: var(--sirka_str);
	margin: 0 auto;
	display: grid;
	justify-content: center;
	gap: 20px;
	margin-top: -60px; 
	padding: 0 20px;
	grid-template-columns: 1fr 1fr 1fr;
	position: relative;
	z-index: 2;
  }

  .dlazdice > a{
	background-color: white;
	border-radius: 8px;
	padding: 30px 40px;
	z-index: 10;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
	color: #4a4c54;
	text-decoration: none;
	transition: all 0.3s ease;
  }

  .dlazdice > a i{
	padding: 15px;
	font-size: 20px;
	border: 1px solid #e3e3e3;
	color: var(--hbarva);
	border-radius: 50%;
	display: inline-block;
	margin-bottom: 20px;
  }
  .dlazdice > a h2{
	font-size: 1.4em;
	font-weight: 700;
	color: #54555f;
}

.dlazdice > a p{
	font-size: 0.9em;
	font-weight: 400;
	color: #54555f;
	margin-top: 10px;
	line-height: 1.2em;
}

.dlazdice > a:hover{
	transform: translateY(-5px);
}

.pop{
	display: inline-block;
	padding: 10px 20px;
	background-color: var(--hbarva_light);
	color: var(--hbarva);
	border-radius: 20px;
}

.uvodka{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 70px;
	margin-top: 80px;
	margin-bottom: 80px;;
}

.uvodka .uvodka_img{
	background: url(../img/obr1.jpg) no-repeat center center;
	background-size: cover;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.uvodka h2{
	font-size: 2.5em;
	color: var(--zbarva);
	text-align: left;
	line-height: 1.2em;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 15px;
}

.uvodka p{
	font-size: 1em;
	color: #54555f;
	text-align: left;
	line-height: 1.4em;
	margin-top: 20px;
	margin-bottom: 20px;
}

a.tlacitko{
	display: inline-block;
	padding: 20px 30px;
	border:1px solid var(--hbarva);
	color: var(--hbarva);
	border-radius: 30px;
	text-decoration: none;
	font-size: 1em;
	font-weight: 700;
	margin-top: 20px;
	transition: all 0.3s ease;
}

a.tlacitko:hover{
	background-color: var(--hbarva);
	color: white;
	transform: translateY(-5px);
}

.sedive{
	background-color: #f7f7f7;
	width: 100%;
	padding: 50px 0px
}

.aktuality{
	width: 100%;
	display: grid;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	grid-template-columns: 1fr 1fr;
}

.sedive h2{
	font-size: 2.5em;
	color: var(--zbarva);
	text-align: left;
	line-height: 1.2em;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 15px;
}

.aktuality .aktualita{
	background-color: white;
	border-radius: 8px;
	padding: 30px 40px;
	z-index: 10;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
	color: #4a4c54;
	text-decoration: none;
	transition: all 0.3s ease;
}

.aktuality .aktualita span{
	font-size: 1.2em;
	color: var(--zbarva);
	font-weight: 500;
	margin-bottom: 10px;
	display: block;
	line-height: 1.4em;
}

.aktuality .aktualita .datum{
	font-size: 0.9em;
	color: #878999;
	font-weight: 400;
	margin-bottom: 10px;
	line-height: 1.2em;
}

.aktuality .aktualita .datum i{
	font-size: 1.2em;
	color: var(--hbarva);
	margin-right: 5px;
	vertical-align: middle;
}

.aktuality .aktualita p{
	font-size: 0.9em;
	color: #54555f;
	text-align: left;
	line-height: 1.4em;
	margin-top: 10px;
}

.centrovat{
	text-align: center;
	width: 100%;
}

.footer {
	background-color: var(--zbarva);
	color: #fff;
	padding: 40px 20px 20px;
	font-size: 14px;
	line-height: 1.4em;
  }
  
  .footer-content {
	display: grid;
	gap: 50px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .footer-logo {
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: var(--sirka_str);
	margin: 0 auto 20px;
  }
  
  .footer-column {
	flex: 1 1 250px;
	margin: 0px;
  }
  
  .footer-title {
	font-size: 18px;
	margin-bottom: 10px;
	color: #fff;
  }
  
  .footer-hours {
	list-style: none;
	padding: 0;
	margin: 0;
  }
  
  .footer-hours li {
	margin-bottom: 4px;
  }
  
  .footer-column h4 {
	margin-bottom: 15px;
	font-size: 1.3em;
	font-weight: 600;
	border-bottom: 1px solid #2d8eb5;
	padding-bottom: 10px;
  }
  
  .footer-column ul {
	list-style: none;
	padding: 0;
  }
  
  .footer-column ul li {
	margin-bottom: 8px;
  }
  
  .footer-column a {
	color: var(--hbarva_light);
	text-decoration: none;
  }
  
  .footer-column a:hover {
	text-decoration: underline;
	color: #fff;
  }
  
  .footer-bottom {
	text-align: right;
	border-top: 1px solid #2d8eb5;
	padding-top: 20px;
	font-size: 13px;
	color: #e4e4e4;
	line-height: 1.4em;
	margin-top: 20px;
  }

  .footer-bottom a{
	color: #ffffff;
	text-decoration: none;
  }
  
  .footer-column i{
	font-size: 1em;
	margin-right: 5px;
	vertical-align: middle;
	color: var(--hbarva_light);
  }

  .footer-column.kontakt p, .footer-column.kontakt a{
	line-height: 1.6em;
  }

  .nadpis{
	background: url(../img/bg_1.jpg) no-repeat center fixed;
	background-size: cover;
	position: relative;
	overflow: hidden;
	padding: 40px 0px 50px;
	z-index: 1;
  }

  .nadpis .nadpis_overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
	background: linear-gradient(to right, rgba(16, 29, 42, 0.9), rgba(56, 169, 179, 0));
	pointer-events: none; 
	z-index: 1;
  }

  .nadpis .container{
	z-index: 3;
	position: relative;
  }

  .nadpis .container h1{
	font-size: 3em;
	color: white;
	text-align: left;
	line-height: 1.2em;
	font-weight: 700;
	margin: 20px 0px 0px;
  }

  .nadpis .container p{
	font-size: 1.3em;
	color: white;
	text-align: left;
	line-height: 1.2em;
}

.aktuality_c{
	padding: 50px 0px;
}

.aktuality_c .aktuality{
	grid-template-columns: 1fr;
}

.aktuality_c .aktuality .aktualita{
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.aktuality_c h2{
	font-size: 2.5em;
	color: var(--zbarva);
	text-align: left;
	line-height: 1.2em;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 15px;
}

.hours-section {
	max-width: var(--sirka_str);
	margin: 40px auto;
	padding: 20px;
	line-height: 1.6;
  }
  
  .hours-intro h1 {
	font-size: 28px;
	margin-bottom: 10px;
  }
  
  .hours-table {
	margin-top: 20px;
	border-top: 2px solid var(--hbarva);
	border-bottom: 2px solid var(--hbarva);
  }
  
  .day {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px dashed #ccc;
  }
  
  .day:last-child {
	border-bottom: none;
  }
  
  .day-name {
	font-weight: bold;
  }
  
  .day-time {
	color: var(--hbarva);
  }
  
  .hours-notice {
	margin-top: 30px;
	background: #f0f8ff;
	padding: 15px;
	border-left: 4px solid var(--zbarva);
	border-radius: 10px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }

    .hours-notice strong{
		font-weight: 700;
	}

  .contact-section {
	margin: 40px auto;
	padding: 20px;
	line-height: 1.6;
  }
  
  .contact-section h2{
	font-size: 2.5em;
	color: var(--zbarva);
	text-align: left;
	line-height: 1.2em;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 15px;
}
  
  .contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 30px;
  }

  .contact-info{
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 0px 30px 30px;
	;
  }
  
  .contact-info, .contact-map {
	border-radius: 10px;
  }

  .contact-map iframe{
	border-radius: 10px;
  }
  
  .contact-info h2, .contact-map h2 {
	font-size: 20px;
	margin-bottom: 10px;
  }
  
  .contact-info a {
	color: var(--hbarva);
	text-decoration: none;
  }
  
  .contact-info a:hover {
	text-decoration: underline;
  }
  
  .contact-info i{
	font-size: 1em;
	margin-right: 5px;
	vertical-align: middle;
	color: var(--hbarva_light);
  }

  .contact-info p, .contact-info a{
	line-height: 1.6em;
  }

  .contact-info strong{
	font-weight: 700;
  }

  .informace{
	background: linear-gradient(to right, rgba(56, 118, 179, 1), rgba(56, 169, 179, 1));
	width: 100%;
	padding: 80px 0px;
	display: inline-block;
  }

  .informace .container{
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 40px;
  }

  .informace .left{
	color: white;
  }

  .informace .pop_nobg{
	color: white;
	font-size: 0.8em;
	text-transform: uppercase;
	padding: 20px 30px;
	border-radius: 30px;
	background-color: rgb(255, 255, 255, 0.1);
	display: inline-block;
  }

  .informace h2{
	margin: 20px 0px 20px;
	font-size: 2.5em;	
	color: white;
	text-align: left;
	font-weight: 700;
  }

  .informace p{
	margin-bottom: 10px;
	line-height: 1.4em;
  }

  .informace strong{
	font-weight: 700;
  }

  .informace .left i{
	font-size: 0.9em;
	vertical-align: middle;
	padding: 5px;
	background: rgba(56, 169, 179, 0.9);
	color: white;
	margin-right: 5px;
	display: inline-block;
	border-radius: 50%;

  }
  .informace .left ul{
	margin-bottom: 20px;
  }
  .informace .left ul li{
	list-style: none;
	padding: 10px 0px;
  }

  .informace .right{
	background: white;
	border-radius: 10px;
	padding: 30px 40px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  }

  .informace .right .pop_n{
	color: initial;
	text-transform: uppercase;
  }

  .informace .right h2{
	margin: 10px 0px 20px;
	font-size: 2.5em;	
	color: var(--hbarva);
	text-align: left;
	font-weight: 800;
	text-transform: uppercase;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hbarva_light);
  }

  .informace .right i{
	font-size: 0.9em;
	vertical-align: middle;
	padding: 5px;
	background: rgb(69, 217, 163, 0.1);
	color: rgb(69, 217, 163);
	margin-right: 10px;
	display: inline-block;
	border-radius: 50%;

  }
  .informace .right ul{
	margin-bottom: 20px;
  }
  .informace .right ul li{
	list-style: none;
	padding: 10px 0px;
	font-weight: 700;
	letter-spacing: 0.03em;
  }

  .uvodka_2{
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	grid-gap: 70px;
	margin-top: 80px;
	margin-bottom: 80px;;
}

.uvodka_2 .uvodka_img{
	background: url(../img/bg2.jpg) no-repeat center center;
	background-size: cover;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.uvodka_2 h2{
	font-size: 2.5em;
	color: var(--zbarva);
	text-align: left;
	line-height: 1.2em;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 15px;
}

.uvodka_2 p{
	font-size: 1em;
	color: #54555f;
	text-align: left;
	line-height: 1.4em;
	margin-top: 20px;
	margin-bottom: 20px;
}

.uvodka_2 i{
	font-size: 0.9em;
	vertical-align: middle;
	padding: 5px;
	background: rgb(69, 217, 163, 0.1);
	color: rgb(69, 217, 163);
	margin-right: 10px;
	display: inline-block;
	border-radius: 50%;

  }
.uvodka_2 ul{
	margin-bottom: 20px;
  }
.uvodka_2 ul li{
	list-style: none;
	padding: 10px 0px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 1.3em;
  }

  .uvodka_2 h3{
	font-size: 1.3em;
	text-align: left;
	line-height: 1.2em;
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 15px;
	display: block;;
}
.sedivy{
	background-color: #f7f7f7;
	width: 100%;
	padding: 50px 0px
}

  .sedivy h2{
	font-size: 2.5em;
	color: var(--zbarva);
	text-align: left;
	line-height: 1.2em;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 15px;
  }

.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--hbarva);
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-icon {
  position: absolute;
  left: -27px;
  top: 15px;
  width: 12px;
  height: 12px;
  border:3px solid var(--hbarva);
  background: #f7f7f7;
  border-radius: 50%;
  z-index: 1;
}

.timeline-content {
  padding: 12px 16px;
  line-height: 1.5;
}

.timeline-content strong {
  font-weight: bold;
  color: var(--zbarva);
}

.sedive p{
	background-color: white;
	border-radius: 8px;
	padding: 30px 40px;
	z-index: 10;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
	color: #4a4c54;
	text-decoration: none;
	transition: all 0.3s ease;
}

.sedive p strong{
	color: var(--zbarva);
	font-weight: 600;
	line-height: 1.4em;
}