/** BARVY */
:root {
  --blue: #204888; /* 32 72 136 */
  --purple:#6F368D; /* R 111 G 54 B 141*/
  --lightblue:#2DA3DC;  /* R 45  G 163  B 220 */
  --white:#F4FAFF;    
  --darkblue: #173566;
    /* ZENTIVA GREY GREEN BLUE */
  --color-znt-grey: #666666;
  --color-znt-green: #00bd8e;
  --color-znt-blue: #1c6dc3;
}

body {
	/*background: var(--darkblue)/*#fff*/
	/*background: #bebebe;*/
	background: var(--white)
}

.sitewrap, main {
	background: var(--white);
}

.sitewrap {
box-shadow:0 0 3px 1px rgba(0,0,0,0.2);
}

body {
	margin:0;
	padding:0;	
	}
	




#headbar, footer {
	background: white;
}

html {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
}

b, strong {
	font-weight: 700;
}

h1,h2,h3,h4,h5 {
	font-family: "Nunito Sans", sans-serif;
	color:var(--blue);
	font-weight:800;
}



/** FONT PRO HELICID NEO*/
/*Podle toho loga jde o čistý humanistický sans-serif, něco na pomezí Helvetica / Open Sans. Z Google Fonts jsou nejbližší tyhle:
Inter – hodně blízký proporcemi i kresbou, moderní a technicky „čistý“
Source Sans 3 – velmi podobný tvarům písmen (hlavně e, c, i), působí profesionálně
Open Sans – klasika, měkčí křivky, vizuálně hodně blízko
Lato – o chlup kulatější, ale pořád v tom stejném rodinném duchu
Nunito Sans – jemně zaoblenější, pokud chceš trochu přívětivější výraz*/


/** FONT DIMENSIONS */
html {
	font-size: 21px;
	color: #333;
}

body {
	font-size: 1rem;
	line-height: 1.4;
}


h1 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

h2, .page-header h1, #mod173 h1 {
	font-size: 1.75rem;
}

h3, .blog-item .page-header h2 {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

h4 {
	font-size: 1rem;
	margin-bottom: 0.5rem;
}




/** -smaller h2 */
h2 span {
	font-size: 1.1rem;
}

/** -normal text */
p, li, table {
	font-size: 1rem;
	line-height: 1.4;
	
}


#mod131 h2, #mod153 h2 {
	line-height: 1;
}
/** -navigace */
.nav-item a {
	font-size: 1rem;
	font-weight:700;	
	
}
/** -secondary */
.secondary,
.blog-featured .blog-item p,
#mod115 .ZNbox h4 {
	font-size: 0.85rem;
}
/** -smaller */
#mod115 .secondary,
footer p, .smaller {
	font-size: 0.75rem;
	letter-spacing: 0.3px;
}
/** -small */
#topbar p,
#topbar p a,
.small, small {
	font-size: 0.65rem;
	line-height: 1.5;
	letter-spacing: 0.3px;
}

/** -bigger */
p.bigger {
	font-size: 1.35rem;
}


/** -uppercase */
.upper {
	text-transform: uppercase;
}

/** -no decoration */
#topbar a, li.nav-item a, a.button, footer a, .blog-item .item-title a, .blog-item .page-header h2 a {
	text-decoration: none;
}


/** RESPONSIVE TYPOGRAPHY */
@media (max-width:1023px){
html {
	font-size: 17px;	
}
}



/** B U T T O N */
a.button {
	display: inline-block;
	/*text-transform: uppercase;*/	
	border:1px solid transparent;
	padding: 0.5rem 1rem;
	color: var(--white);
	line-height: 1;    
	background-color: var(--darkblue);	
	position: relative;
	z-index: 1;
	text-decoration: none;
	/*transform: skewX(-10deg);*/
position: relative;	
font-weight:700;
}


a.button:hover {
	text-decoration: none;	
	background-color: transparent;
	border:1px solid var(--darkblue);
	color:var(--darkblue);
}

.hero a.button:hover,
.MDblue a.button:hover {
	text-decoration: none;	
	background-color: transparent;
	border:1px solid var(--white);
}

#heromod122 a.button:hover {
	background-color: var(--white);
	opacity:0.75;
}


/*a.button:before {
	content: '';
	display: block;
	height: 30px;
	width: 40px;
	position: absolute;
	right: 5px;
	bottom: 9px;
	background: url(../images/bag.svg) center center no-repeat;
	background-size: 20px auto;
	z-index: 2;
	border-left: 1px solid #fff;
}*/




/**TOPBAR */
#topbar .container {
	color: #234582;
	display: grid;    
	grid-template-columns: 1fr;
}

#topbar .mod-custom * {
	line-height: 26px;
}


#topbar p {line-height:26px;}

#topbar p a,
#topbar p  {
	color:var(--blue);	
letter-spacing:0;}

#topbar p a {
	display:inline-block;
	padding:0 15px;
	transition:background-color 0.2s;
}

#topbar a {
	background:#E8E8E8;	
}


#topbar a:first-child {
	background:none;	
}


#topbar p a:hover {
	background-color:var(--blue);
	color:var(--white);
}


/** HEADBAR */
#headbar {
	-webkit-box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.12);
	-moz-box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.12);
	box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.12);
	position: relative;
	z-index: 999;
}

#headbar.fixed {
	background-color: rgba(255,255,255,0.8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

#headbar .container {
	height: 80px;
	overflow: visible;
}

.fixed #hbplhld {
	height: 80px;
}
/*stejna vyska jako headbar */
#brand {
	width: 280px;
    /*zbytek mainmenu*/;
}

#brand a img {
    /**sirka loga v ramci #brand divu*/
	width: 80%;
}





/** - mainmenu */
#mainmenu {
	width: calc(100% - 300px);
    /*podle sirky #brand divu*/;
}

#brand a {
	height: 80px;
    /*urcuje vysku hedbaru, stejne musi byt hbplhld */;
}

#mainmenu .nav-item a {
	display:inline-block;
	padding: 35px 20px 25px 20px;	
	line-height:20px;
	transition:background-color 0.2s, color 0.2s;
	color:var(--blue);	
}

#mainmenu .nav-item.item-104 .nav-link {
	background-color:var(--purple);
	color:var(--white);
}

#mainmenu .nav-item a:hover,
#mainmenu .nav-item.item-104 .nav-link:hover {
	background-color:var(--blue);
	color:var(--white);
}


@media(max-width:1365px) {
	#brand {
	width: 230px;
    /*zbytek mainmenu*/;
}

#mainmenu {
	width: calc(100% - 250px);
    /*podle sirky #brand divu*/;
}

#mainmenu .nav-item a {	
	padding: 35px 15px 25px 15px;
}



}

@media(max-width:1023px) {
	#brand, #mainmenu {
	width: 100%;
	float:none
    /*zbytek mainmenu*/;
}
#brand a {
 height:60px;
 
}

#brand a img {
  width: 180px;  
}



#mainmenu {		
	background:var(--blue); 	
}

#mainmenu .navbar-nav {float:left}

#headbar .container {padding:0;}

#brand,#mainmenu  {padding:0 1rem;}

#mainmenu .nav-item a {	
	padding: 10px 15px 10px 15px;
	background:var(--blue);
 color:var(--white);
 
}


#headbar .container {
	height: 100px;	
}

}

@media(max-width:767px) {
#mainmenu {padding:0;}
#brand {}


#mainmenu nav {overflow:hidden;}

#mainmenu .navbar-nav {
	width:100%;
	display:grid;
	grid-template-columns:repeat(5,1fr);
}

#mainmenu .navbar-nav li,
#mainmenu .navbar-nav li a {
	width:100%;
	text-align:center
}

#mainmenu .navbar-nav li.nav-item a {
	font-size:16px;
	display:flex;	
	height:100%;
	align-items: center;
	justify-content: center;		
	font-weight:500;	
	border-right:1px solid var(--white);
	padding: 7px 5px;
	text-align:center;
}

#headbar .container {
	height: 100px;	
}

#brand:after {
	content:'';
	background:url(../images/tobolka.png) right top no-repeat;
	background-size:auto 60px;
	position:absolute;
	right:1rem;
	top:5px;
	height:100px;	
	width:300px;
	pointer-events: none;
}

}

@media(max-width:539px) {
#mainmenu .navbar-nav li.nav-item a {
	font-size:14px;
	line-height:1.1;
}





}


/** MODULES */


/** - blue */
.moduletable.MDblue,
.moduletable.MDblue .module {
background-color:var(--blue);
	}
	
.moduletable.MDblue .module * {
color:var(--white);
	}

/** -dark blue */
.moduletable.MDblue.darkblue,
.moduletable.MDblue.darkblue .module {
background-color:var(--darkblue);
	}
	
/** -dva ucinky */
.moduletable.MDdvaucinky {
background:transparent url(../images/bg-dva-ucinky.jpg) no-repeat center center / cover;
padding:2rem 0;
}

.moduletable.MDdvaucinky .module * {
color:var(--white);
	}
	
.moduletable.MDdvaucinky h3 {
text-transform:uppercase;
font-weight:900;
position:relative;
margin-top:0;
	}	
	
	
.moduletable.MDdvaucinky .ZNbox {
	display: flex;
  align-items: center; /* Vertikální centrování */
  justify-content: center;
  height:100%;
  position:relative;
}

.moduletable.MDdvaucinky .ZNbox > div {
	width:100%;  
}

.MDdvaucinky .ZNbox1:before,
.MDdvaucinky .ZNbox3:before {
	content:'1';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	font-size:12rem;
	font-weight:900;
	opacity:0.15;
	font-style:italic;
	text-align:center;
	line-height: 1;
}

.MDdvaucinky .ZNbox.ZNbox3:before {
	content:'2';	
}








	
/*.moduletable.MDdvaucinky h3:after {	
	content:'';
	display:block;
	position:absolute;
	bottom:-30px;
	left:50%;
	transform:translateX(-50%);
	background:white;
	-webkit-mask-image: url(../images/circle-plus.svg);
	mask-image: url(../images/circle-plus.svg);
	-webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain; 
  mask-size: contain;
	width:24px;
	height:24px;
	text-align:center;
}*/

.moduletable.MDdvaucinky h3:after {	
	content:'Zjistit více';
	display:block;
	position:absolute;
	bottom:-30px;
	left:50%;
	transform:translateX(-50%);	
	height:24px;
	text-align:center;
	font-size:.9rem;
	font-weight:normal;
	text-transform:none;
	
}

.MDdvaucinky .ZNbox {
	align-self: center;
	cursor:url("../images/cursor.png"), default;
	}
	
.MDdvaucinky .ZNbox div > * {display:none}
.MDdvaucinky .ZNbox div > h3 {display:block;}

.MDdvaucinky .ZNbox:hover div > * {display:block;}
.MDdvaucinky .ZNbox:hover div > h3 {display:none;}

.MDdvaucinky .ZNbox:hover div > * {animation:slowshow 0.3s;}

@keyframes slowshow {
	from {opacity:0}
	to {opacity:1}
}



@media(max-width:1600px){
	.MDdvaucinky .ZNbox2 {
		padding:2rem 0;
	} 	
}

@media(max-width:767px){
	
	.moduletable.MDdvaucinky {padding:0}
	
	.MDdvaucinky .ZNbox2 {
		padding:6rem 0;
	} 	
}

@media(max-width:549px){
	
	.moduletable.MDdvaucinky .ZNbox.ZNbox2 {
		display:none;
	} 	
	
	.MDdvaucinky .ZNboxes .boxes3 {
  grid-template-columns: repeat(2, 1fr);
	}
	
	.MDdvaucinky .ZNboxes .boxes3 h3 {
  padding:6rem 0;
	}
	
	.moduletable.MDdvaucinky #mod118 .ZNbox h3:after {
		bottom:10px;
	}
	
	
}

@media(max-width:499px){
	
	.MDdvaucinky .ZNboxes .boxes3 h3 {
  padding:0;
	}
	
	.MDdvaucinky .ZNboxes .boxes3 .ZNbox1 h3 {
  padding:7rem 0;
	}
	
	.MDdvaucinky .ZNboxes .boxes3 .ZNbox3 h3 {
  padding:7rem 0 6rem 0;
	}
	
	
.MDdvaucinky .ZNbox:hover div > * {
	font-size:14px;
}


	
	
	
}

	



/** - paleni zahy video */
#mod120 {
	background-color:#fff;
}

/** - davkovani */
#pimgmod113.pimg img {
  transform: rotate(-40deg) scale(0.9);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

#pimgmod113.pimg.active img {
  transform: rotate(0deg) scale(1);  
}

	

/** - kdy muze byt helicid volbou */



#mod115 { 
	position:relative;
	padding-bottom:6rem;
}

#mod115:after {
	content:'';
	background-color:var(--blue);
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:4rem;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

#mod115.ZNboxes .boxes8 {	
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap:0;
	row-gap:1rem;
}

#mod115 .boxes .ZNbox  {	
	text-align:center;
}

#mod115.module.ZNboxes .container {
	padding:5px; /* pro sshadow*/
}

#mod115 .boxes .ZNbox img {	
	display:inline-block;
	width:150px;	
}

#mod115 .boxes .ZNbox > div {	
	padding:0 1rem 0 1rem;
}

#mod115 .boxes .ZNbox > div > h3,
#mod115 .boxes .ZNbox > div > h4,
#mod115 .boxes .ZNbox > div > p {
	margin-top:0;
	margin-bottom:0.5rem;
}



@media(max-width:1023px) {
	#mod115 .boxeswrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; 
		padding: 10px;
	}
	
	#mod115.ZNboxes .boxes8 {	
	grid-template-columns: repeat(8, 135px);
	width: max-content;	
}

#mod115 .boxes .ZNbox > div {	
	padding:0 0.5rem;
}

}


/** - kde koupit */
#mod112 .boxes {margin-top:2rem}
#mod112 .boxes .ZNbox {
	/*border:1px solid #bebebe;*/
	padding: 1rem;
	background:#fff;
}

@media(max-width:767px){
	#mod112 .boxes {
		grid-template-columns:1fr 1fr;
		gap:2rem;
	}
	}




/** - bottom banner */
#heromod122 .Hobsah1 {max-width:60%}
#heromod122 .Hobsah2 {max-width:40%}
#heromod122 .Hobsah1 h2 {
	text-shadow:0 0 8px black;
	line-height:1;
}

 #heromod122 .Hobsah2 img {
	 margin-top:100px;
 }

#bottombanner {
	position:relative;
}

#bottombanner:after {
	content:'';
	background-color:var(--blue);
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

@media(max-width:767px){
	 #heromod122 .Hobsah2 img {
	 margin-top:1rem;
	 margin-bottom:0;
 }
 
 #heromod122 .Hobsah1 {
  max-width: 80%;
  margin-top:5rem;
}
 
 
 #heromod122 .Hobsah2 {
  
  max-width: 40%;
  position:absolute;
  bottom:0;
  right:0;
}
 
 
}


@media(max-width:599px){
 
 
 #heromod122 .Hobsah2 {
  max-width: 40%;
}

 #heromod122 .Hobsah1 {
  max-width:70%;
  margin-top:2rem;
}
 
 
 #heromod122  a.button {
	padding:0.5rem;
	margin-bottom:0.5rem;
}
 
}

@media(max-width:519px){
 
 
 #heromod122 .Hobsah2 {
  display:none;
}


 
 
}




/** -responsive panels */
@media(max-width:767px){
.ZNpanel .ptext,
.ZNpanel .pvid,
.ZNpanel .pimg {
	width:100%;
	float:none;
}

.ZNpanel .ZNvertcent {
	position:relative;
	top: auto;
	transform:none;
}
}


/** BLOG */

.page-featured #zivotosprava > .container {
	background-color:var(--lightblue);
	}

.blog-featured .blog-items,
.com-content-category-blog__items {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:2rem;
}

#zivotosprava .blog-featured {}
	
.blog-featured figure a {display:block;line-height:0}

.blog-featured h2 {	
 color:var(--white);
 line-height:1.2;
}


.blog-featured h3 a {	
 color:var(--blue);
}

.blog-featured h3 a {	
 color:var(--blue);
}

.blog-featured h3 a:hover {	
 text-decoration:underline;
}

.blog-featured .readmore  {	
 margin-bottom:0;
 font-weight:500;
}

.blog-featured .readmore a {	
 color:var(--blue);
 font-weight:600; 
}

.blog-featured .readmore a span {	
 display:none;
 
}

.blog-featured p {	
 margin:0.5rem 0;
}



.com-content-category-blog__item figure {
	margin:0;
}

.blog-featured .blog-item {
	background-color:var(--white);
	box-shadow:0 0 3px 1px rgba(0,0,0,0.3);
}

.blog-featured .item-content {
	padding:0.5rem 1rem;
}

.blog-featured .item-content > h3:first-child {
	margin-top:0;
}


/** - responsive */
@media(max-width:1023px){
.blog-featured .blog-items,
.com-content-category-blog__items {	
	grid-template-columns:1fr;
	gap:1rem;
}

.blog-featured .blog-item {
	display:grid;
	grid-template-columns:1fr 2fr;
}
.blog-items .blog-item a {
	width:100%;
	height:100%;
	overflow:hidden;
}

.blog-items .blog-item a img {
	width:auto;
	height:100%;
	object-fit: cover; /* Klíčová vlastnost: vyplní prostor bez deformace */
  display: block;
}
}

/** - article */
.item-page figure.right.item-image
{
	float:right;
	width:500px;
	margin:0 0 1rem 1rem;
	
}
.right.item-image img {
	width:100%;
	height:auto;	
}

.item-page div.com-content-article__body > p:first-child {
	font-weight:700;
}

/** BANNERY */
.pharmacy-promo {
	position:fixed;
	left:50%;
	top:80px;	
}

.pharmacy-promo:hover {
	filter:brightness(0.9);		
}



#left-pharmacy-promo {transform:translateX(-730px)}
#right-pharmacy-promo {transform:translateX(610px)}



/** FOOTER */
footer {
	background-color: #003568;
	color: #fff;
	text-align: center;
	background: var(--color-znt-blue);
  background: linear-gradient(
    135deg,
    var(--color-znt-green) 0%,
    var(--color-znt-blue) 65%,
    var(--color-znt-blue) 100%
  );
}

footer a {
	color: #bfd5ea;
	text-decoration: none;
     /*text-decoration-style:dotted;*/;
}

footer img {
	width: 200px;
}



/** BACK TO TOP */
#backtotop {
	background-color: #003568;
}


/** PROKLADY */

#mod112 .container > h2:first-child {
	margin-top:0
}


#mod115 .container > h2:first-child,
.blog-featured > .page-header h2 {
	margin-bottom:4rem;
}




@media(max-width:1023px) {

#mod115 .container > h2:first-child,
.blog-featured > .page-header h2 {
	margin-bottom:1rem;
}
}