@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--orange: #E8952D;
	--blue: #214F73;
	--pink: #d94f79;
	--font_text: "Raleway", sans-serif;
	--font_head: "Bitter", serif;
	--barva1: var(--blue);
	--barva2: var(--orange);
	--shadow: 0 0 10px #DDD;
	--mobile_ul_li_bg: #214F73DD;
	--mobile_ul_bg: var(--mobile_ul_li_bg);
	--hor_res_menu_border: var(--orange);
	--hor_res_menu_color: var(--hor_res_menu_border);
}

body { font-family: var(--font_text);}

a { color: var(--orange); }

h1, h2, h3, h4 {font-family: var(--font_head); color: var(--blue); line-height: 1.1; word-spacing: 0.1em;}
h1 strong, h1 em,
h2 strong, h2 em { color: var(--pink); display: inline-block; position: relative; }
h1 { font-size: clamp(52px, 6.2vw, 82px); font-weight: 600;}
h2 { font-size: clamp(36px, 4vw, 50px); font-weight: 600; width:fit-content; }
h3 { font-size: clamp(28px, 3vw, 36px); font-weight: 600;}
h4 { font-size: clamp(23px, 2.3vw, 28px); font-weight: 600; }
h5, .marker { font-size: 1rem; font-weight: 700; color: var(--orange); word-spacing: 0.08em;}
section[style^="color:"] h4 { color: inherit;}

h1 strong::after, h1 em::after {
	content: "";
  position: absolute;
  left: 2%;
  bottom: -7px;
  width: 96%;
  height: 6px;
  background-color: #E8952D;
  border-radius: 100% 20% 100% 15%;
  transform: rotate(-2deg);
}


h2::after {
  content: "";
  display: block;
  width: 74px;
  height: 5px;
  margin: 17px auto 0;
  background-color: #E8952D;
  border-radius: 100% 15% 100% 20%;
  transform: rotate(-2deg);
}

h3 { position: relative; padding-left: 23px; line-height: 1.2; }
h3::before {
  content: "";
  position: absolute;
  top: 0.14em;
  bottom: 0.12em;
  left: 0;
  width: 6px;
  background-color: #E8952D;
  border-radius: 10px;
  transform: rotate(2deg);
}

.subpage h1 { font-size: clamp(36px, 4.4vw, 60px);}
.subpage h2 { font-size: clamp(25px, 2.8vw, 33px); }
.subpage h3 { font-size: clamp(20px, 2.1vw, 25px);}
.subpage h4 { font-size: clamp(18px, 2vw, 22px);}

a.tlacitko {
  padding: 15px 23px;
  border: 2px solid var(--orange);
  color: var(--blue);
  background-color: var(--orange);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  transform: translateY(0);
  box-shadow: 0 7px 18px rgba(242, 164, 65, 0.25);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
a.tlacitko:hover {
	background-color: #e8952d;
  color: #173d5b;
  box-shadow: 0 9px 22px rgba(242, 164, 65, 0.32);
  transform: translateY(-2px);
}
a.tlacitko.white {
	background-color: rgba(255, 255, 255, 0.88);
	border-color: var(--blue);
	box-shadow: 0 6px 16px rgba(33, 79, 115, 0.1);
}
a.tlacitko.white:hover {
	color: #FFF;
	background-color: var(--blue);
	transform: translateY(-2px);
}
.ilu_b a.tlacitko::after { display: none; }
.ilu_b a.tlacitko {
	color: var(--blue) !important;
	background-color: var(--orange) !important;
	border: 2px solid var(--orange) !important;
}
.ilu_b a.tlacitko:hover {
	background-color: #e8952d !important;
	color: #173d5b !important;
	border: 2px solid var(--orange) !important;
}
.ilu_b a.tlacitko.white {
	color: var(--blue) !important;
	background-color: rgba(255, 255, 255, 0.88) !important;
	border-color: var(--blue) !important;
}
.ilu_b a.tlacitko.white:hover {
	color: #FFF !important;
	background-color: var(--blue) !important;
	border-color: var(--blue) !important;
}
a.tlacitko.arrow::after { content: " →"; font-size: 19px; font-weight: 400; margin-top: -5px; margin-bottom: -5px;display: inline-block; margin-left: 0.4rem;}
.ilu_b a.tlacitko.arrow::after { content: " →"; font-size: 19px; font-weight: 400; display: inline-block; margin-left: 0.4rem;
	position: static; width: initial; height: initial; border: none; opacity: 1;
}

#horizont-0, #head-sogan div { background-color: var(--blue) !important; }
#head-sogan div { color: #FFF !important; }


ul#m0 li a {
	color: #FFF;
	background-color: transparent;
	border-radius: 0;
	position: relative;
}
ul#m0 li a::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--orange);
	position: absolute;
	left: 0;
	bottom: 0;
	opacity: 0;
	transition: 0.3s;
}
ul#m0 li a:hover,
ul#m0 li a.a_Tactive {
	color: #FFF;
	background-color: transparent;
}
ul#m0 li a:hover::after,
ul#m0 li a.a_Tactive::after {
	opacity: 1;
}
@media (max-width: 640px) {
  ul#m0 {
    background-color: var(--mobile_ul_bg) !important;
  }
  ul#m0 li {
    background-color: var(--mobile_ul_li_bg) !important;
    border-bottom: none;
    padding: 0 1rem;
  }
  ul#m0 li:first-child { margin-top: 3rem; }
}

#head_grid_mid { align-items: start; }
div.lightDark.backgroundLight { box-shadow: var(--shadow); }
.part33.p_1 div.lightDark.backgroundLight, .part50.p_1 div.lightDark.backgroundLight, .parts60 div.p_1 div.lightDark.backgroundLight, .part33.p_1 div.lightDark.backgroundDark, .part50.p_1 div.lightDark.backgroundDark, .parts60 div.p_1 div.lightDark.backgroundDark {
  margin-left: 15px;
}
.part33.p_3 div.lightDark.backgroundLight, .part50.p_2 div.lightDark.backgroundLight, .parts60 div.p_2 div.lightDark.backgroundLight, .part33.p_3 div.lightDark.backgroundDark, .part50.p_2 div.lightDark.backgroundDark, .parts60 div.p_2 div.lightDark.backgroundDark {
  margin-right: 15px;
}
.part33 { display: flex; }
.part33 .lightDark  {flex: 1;}

div.article-preview {
	padding-bottom: 100px;
}
/*div.text-article-preview a.tlacitko { left: 1rem; transform: none; }*/
div.text-article-preview a.tlacitko:hover { transform: translate(-50%,-2px); }
@media (max-width: 640px) {
  div.article-preview-envelope {
    margin-bottom: 2rem;
  }
}

div.subcategory { padding: 0 0 70px; }
div.subcategory h2, div.article-preview-envelope h2 { width: 100%; box-sizing: border-box; }

.homepage .mhdr {
	box-sizing: border-box;
	overflow: hidden;
}
.homepage .mhdr::after {
	content:"";
	position:absolute;
	left:50%;
	width:500%;
	background:#fbf8f1;
	border-radius:50%;
	transform: translateX(-50%);
	aspect-ratio: 1;
	top: calc(100% - 200px);
	box-shadow: 0 0 5px #FFF;
}
@media (max-width: 1620px) {
	#content-1.homepage {
		margin: -120px auto 0;
		position: relative;
	}
	#head_envelope.homepage {
		padding-bottom: 180px;
	}
}


a#scrollToHome {
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 40px;
  box-sizing: border-box;
  background: var(--blue);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: normal;
  line-height: 1.6em;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  font-size: 0;
  bottom: 1rem;
  right: 1rem;
}
#scrollToHome::before, #scrollToHome:hover::before { background-color: transparent; content:  "→"; font-size: 27px;
	width: auto; height: 4px; transform: translate(-50%,-50%) rotate(-90deg);
  top: 50%;
  left: calc(50% - 1px); line-height: 0;
  font-family: Arial, Helvetica, sans-serif;
}
a#scrollToHome:hover {
	background: var(--orange);
	transform: translateY(-2px);
	color: var(--blue) !important;
}
div.offsetPart a.tlacitko {
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 40px;
  box-sizing: border-box;
  background: var(--blue);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: normal;
  line-height: 1.6em;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  font-size: 0;
  width: var(--servis_button_size);
  height: var(--servis_button_size);
  transform: none;
  position: relative;
}
div.offsetPart a.tlacitko::before, div.offsetPart a.tlacitko:hover::before { background-color: transparent; content:  "→"; font-size: 27px;
	width: auto; height: 4px; transform: translate(-50%,-50%) rotate(90deg);
  top: 50%;
  left: calc(50% + 1px); line-height: 0;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
}
div.offsetPart a.tlacitko:hover {
	background: var(--orange);
	transform: translateY(-2px);
	color: var(--blue) !important;
	transform: translateY(2px);
}