body, main {
     background:#EAF4FF;
}
 .module {
     background: rgb(242,242,242);
     background: linear-gradient(180deg, rgba(242,242,242,1) 0%, rgba(126,165,255,1) 100%);
}
 #headbar, footer, .module .container, main .container {
     background:white;
}
/** FONT FAMILIES */
 .hind-light {
     font-family: "Hind", sans-serif;
     font-weight: 300;
     font-style: normal;
}
 .hind-regular {
     font-family: "Hind", sans-serif;
     font-weight: 400;
     font-style: normal;
}
 .hind-medium {
     font-family: "Hind", sans-serif;
     font-weight: 500;
     font-style: normal;
}
 .hind-semibold {
     font-family: "Hind", sans-serif;
     font-weight: 600;
     font-style: normal;
}
 .hind-bold {
     font-family: "Hind", sans-serif;
     font-weight: 700;
     font-style: normal;
}
/* <uniquifier>: Use a unique and descriptive class name <weight>: Use a value from 100 to 900 .montserrat-<uniquifier> {
     font-family: "Montserrat", sans-serif;
     font-optical-sizing: auto;
     font-weight: <weight>;
     font-style: normal;
}
*/
 html {
    /*font-family: "Hind", sans-serif;
     */
     font-family: "Roboto Slab", sans-serif;
}
 h1,h2,h3,h4,h5, nav a, button, a.button, a.ZNbtn {
     font-family: "Montserrat" 
}
/** FONT DIMENSIONS */
 html {
     font-size:24px;
     color:#333;
}
 body {
     font-size:1rem;
     line-height:1.4;
}
 p, li, table {
    font-size:1rem
}
 h1 {
    font-size:2.25rem;
     margin-bottom:0.5rem;
}
 h2,
.page-header 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;
}






/** -navigace */
 .nav-item a, a.ZNbtn {
     font-size:0.85rem;
     font-weight:700;
     text-transform:uppercase;
}
/** -small */
 small, footer *,
 #topbar * {
     font-size:0.65rem;
     letter-spacing:0.3px;
}
/** -bigger */
 #mod142 .container p , #mod143 .container p, #mod147 .container p{
     font-size:1.25rem;
}

/** -bigger note */
 #mod142 .container p.note , #mod143 .container p.note, #mod147 .container p.note {
     font-size:0.9rem;
}





/** -superbig */
 #heromod133 h1, #mod139 h2, #mod141 h2, #mod149 h2 {
     font-size:3rem;
}



/** -responsive */
@media(max-width:1279px){
	html {font-size:18px;}
	
}

@media(max-width:1023px){
	h3 {font-size:1rem}
	/** -superbig */
	 #heromod133 h1, #mod139 h2, #mod141 h2, #mod149 h2 {
     font-size:2.5rem;
}
}

@media(max-width:767px){
	 html { font-size:20px;	 }
	 
	 
	 /** -bigger */
	#mod142 .container p , #mod143 .container p, #mod147 .container p{
     font-size:1.15rem;
}
	 
	 /** -superbig */
	  #heromod133 h1, #mod139 h2, #mod141 h2, #mod149 h2 {
     font-size:2.15rem;
}
}

@media(max-width:601px){
	 html { font-size:18px;	 }
	  h3,
.blog-item .page-header h2 {
    font-size:1.1rem;
     margin-bottom:0.5rem;
}
}





/** -uppercase */
 .nav-item a {
     text-transform:uppercase;
}
/** -no decoration */
 #topbar a, li.nav-item a, a.ZNbtn, footer a,
 #mod133 a,
.blog-item .item-title a,
.blog-item .page-header h2 a {
     text-decoration:none;
}
/** -persen blue */
 p a, li a, .nav-item a, .module h2, .module h3, 
 #topbar small, #topbar small a, h4,.hamburger-label,
.blog-item .item-title a,
.item-page .page-header h1,
.blog-item .page-header h2 a,
.page-header h1 {
     color:#003568;
}
/** -persen orange */
#mod133 h1 strong,
 h2 strong {
	 color:#eb6508;
	 font-weight:bold
}


/** -light blue */
#mod143 p.note,
#mod142 p.note {color:#b7c5d2;}



/** -white */
 #mod134 *,
 #mod133 a {
     color:#fff;
}
/** BUTTON */
 a.ZNbtn {
     display:inline-block;
     text-transform:uppercase;
     border-radius:6px;
     padding:15px 20px 15px 40px;
     color:#fff;
     line-height:1;
    /*border:2px solid #f9d000;
    */
     /**BLUE background:#003568;*/
	 background:#EB6508;
	 
     background-size:26px auto;
     position:relative;
     z-index:1;
     text-decoration:none;
}
 a.ZNbtn:before {
     content:'';
     display:block;
     height:20px;
     width:20px;
     position:absolute;
     left:10px;
     bottom:17px;
     background:url(../images/bag.svg) center center no-repeat;
     background-size:20px auto;
     z-index:2;
}
 a.ZNbtn:hover {
    /**BLUE background-color:#0052a4;*/
	 background-color:#B34B06;
     text-decoration:none;
}
 a.ZNbtn:hover:before, a.ZNbtn.animateNow:before {
     animation:shopnow 2s ease-out infinite;
     transform-origin:center 2px;
}
 @keyframes shopnow {
     from {
        transform:rotate(0deg) 
    }
     10% {
        transform:rotate(18deg) 
    }
     30% {
        transform:rotate(-8deg) 
    }
     40% {
        transform:rotate(0deg) 
    }
     to {
        transform:rotate(0deg) 
    }
}
/**TOPBAR */
 #topbar .container {
     background-color:#EAF4FF;
     color:#888;
}

#mod-custom116 {padding-right:15px}

/** 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);
}
 #headbar.fixed {
     background-color:rgba(255,255,255,0.8);
     -webkit-backdrop-filter:blur(6px);
     backdrop-filter:blur(6px);
}
 .fixed #hbplhld {
    height:80px;
}
/*stejna vyska jako headbar */
 #brand {
     width:280px;
    /*zbytek mainmenu*/
}
 #brand a img {
    /**sirka loga v ramci #brand divu*/
     width:80%;
}
/** MAIN MENU */
 #mainmenu {
     width:calc(100% - 300px);
    /*podle sirky #brand divu*/
}




 #brand a {
     height:80px;
    /*urcuje vysku hedbaru, stejne musi byt hbplhld */
}
 #mainmenu .nav-item a {
     height:25px;
     padding:40px 15px 15px 15px ;
    /* výška celkem 80 = výška headbaru*/
     background:url(../images/EB6508.png) bottom center no-repeat;
     background-size:0 5px;
     transition:background-size 0.2s;
}
 #mainmenu .nav-item.Sactive a, #mainmenu .nav-item a:hover, #mainmenu .nav-item a:focus {
    /*aktivní hash section */
     transition-delay: 0.0s;
     background-size:calc(100% - 30px) 5px;
}

/** -koupit */
 #mainmenu .nav-item.item-104 a {
     background-color:#EB6508;
     color:#fff;
     background-image: url(../images/bag.svg);
     background-position: top +12px center;
     background-repeat:no-repeat;
     background-size:20px auto;
     transition:background-color 0.3s;
}
 /*#mainmenu .item-104.Sactive a, */
 #mainmenu .item-104 a:hover, #mainmenu .item-104 a:focus {
     background-size:20px auto;
     background-color:#B34B06;
}

/** -responsive */
@media (min-width:768px) and (max-width:1023px) {
	 #brand {width:260px;}
	 #mainmenu {width:calc(100% - 280px);}
}

/** -mobil */
@media (max-width:767px) {
	 #brand {width:260px;}
	 #mainmenu {
		width:100%;
		top:88px;		
		background:#fafafa;		
}

#brand a {height: 60px;}

.fixed #headbar {  height: 60px;}

.fixed #mainmenu {top:60px;}

#brand a img {width: 60%;}

#mainmenu .nav-item a {
     
     padding:20px 0;
	 text-align:center;
background:none;} 

 #mainmenu .nav-item.item-104 a  { padding:45px 0 15px;	 }  

}



/** HERO */
 #mod133 .Hobsah2 img {
     display:block;
     background:url(../images/persenherobg.svg) center center no-repeat;
     background-size:100% auto;
     transition:all 0.3s;
}
 #mod133 .Hobsah2 img:hover {
     transform:scale(1.1);
     background-size:90.909% auto;
}
#mod133 h1,
#mod133 p{text-shadow: 0px 0px 9px rgba(0,0,0,0.6);}

#mod133 h1  {
	pointer-events: none;
}

#mod133 h1 strong {
	font-weight:bold;
}



/** -responsive */
/* modul umoznuje jen jeden breakpoint */

@media (max-width:1279px) {
#heromod133 {aspect-ratio:1920/1000!important}
}

@media (max-width:1023px) {
#heromod133 {aspect-ratio:1920/1100!important}
}

@media (max-width:767px) {

#heromod133 {aspect-ratio:30/50!important}

#heromod133:after { /* before je pro animaci a na mobilech je skryto */
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.25);
	z-index:1;
}

.Hobsah1 {margin-top:30px;}
 .ZNhero .Hobsah {z-index:2;}
 
 #mod133 .Hobsah2 img {
	 background:none;
	 transform: scale(1.3);
	 margin-top:-15px;
}
}

@media (max-width:389px) {
 #mod133 .Hobsah2 img {
	 	 transform: scale(1);	 
}
}

/** PEČETĚ */
 #mod157, 
 #mod157 .container {
     background:#fAfAfA;
}

@media (max-width:500px) {

#mod157 .boxes {
	grid-template-columns: 1fr;
}

}

/** PECET OBLIBENO */
#mod-custom158.mod-custom.custom p {text-align:center;}
#mod-custom158.mod-custom.custom p img {width:600px;}
#mod-custom158 .container {background-color:transparent;}

/** O PERSENU */
 #mod135, #mod136 {
     background:#fff;
}
 #mod136 img {
     width:220px;
}
@media (max-width:767px) {

.ZNboxes .boxes3,
.ZNboxes .boxes4 {
  grid-template-columns: 1fr;
  gap:0;
}

.ZNboxes .boxes3 img {
  margin-bottom:-45px;
}


}


/** SILA BYLIN */
 #mod134, #mod137, #mod137 .container {
     background:#71A02D;
}
 #mod134 .container {
    background-color:transparent;
}

#mod134 img { /** MOZDIR */
	margin:30px auto;
}



 #mod137 .boxes {
    gap:15px
}
 #mod137 .ZNbox {
     position:relative;
    /*border-radius: 20px;    */
     overflow:hidden;
     background-color:white;
	 padding:0;
}
 #mod137 .ZNbox > img {
     position:relative;
     z-index:1;
     width:calc(100% - 40px);
}
 #mod137 .ZNbox > div {
     position:absolute;
     width:100%;
     height:80px;
     z-index:2;
     top:calc(100% - 80px);
     left:0;
     transition:top 0.3s;
	 background-color:#eb6508;
	 color:#fff;
}


 #mod137 .ZNbox > div:before {
    content:"\A";
    border-style: solid;
    border-width: 0 15px 15px 15px;
    border-color: transparent transparent #eb6508 transparent;
    position: absolute;
	left: calc(50% - 15px);
	top:-14px;
}


 #mod137 .ZNbox > div * {
    display:none;
}
 #mod137 .ZNbox > div h3 {
    display:block;
	color:#fff;
	margin:20px 0 0 0;
}
 #mod137 .ZNbox:hover > div,
#mod137 .ZNbox:focus > div {
     top:0px;
     bottom:auto;
     /*background:rgba(255,255,255,0.45);*/
	 background:rgba(235,101,8,0.85);
     backdrop-filter: blur(6px);
     height:100%;
	 padding-top:30px;
}

 #mod137 .ZNbox:hover > div:before,
#mod137 .ZNbox:focus > div:before  {
	 display:none;
 }


 #mod137 .ZNbox:hover > div *,
#mod137 .ZNbox:focus > div * {
    display:block;
}

@media(max-width:1023px){
	 #mod137 .ZNbox > div {
        top:calc(100% - 60px);    
}
}








/** PERSEN PRODUKTY */
 .slozeni {
     border-collapse: collapse;
}
 .slozeni tr td {
     padding:3px;
     text-align:center;
     width:33.333%;
     font-size:0.85rem;
     border-right:2px solid #fff;
     background-color:#f1fbe6;
}
 .slozeni tr td:last-child {
     border-right:none;
}
 .slozeni tr:nth-child(2) td {
     font-size:1rem;
     font-weight:bold;
}
 #mod122, #mod122 .container {
    background:#fafafa;
}
 #mod123, #mod123 .container {
    background:#fff;
}
 #pimgmod122 img, #pimgmod123 img {
     background-image:url(../../../images/produkty/persen-20-40-bg.png);
     background-position:center center;
     background-repeat:no-repeat;
     background-size:85% auto;
     transition:background-size 0.3s, margin 0.3s;
}
 #pimgmod122 img {
     background-image:url(../../../images/produkty/persen-forte-20-40-bg.png);
}
 .panelmod122:hover #pimgmod122 img, .panelmod123:hover #pimgmod123 img {
     background-size:100% auto;
     margin-right:10px;
    margin-left:-10px;
     margin-top:10px;
    margin-bottom:-10px;
}


@media(max-width:767px){
	.panelmod122 .ptext,
	.panelmod123 .ptext,
.panelmod122 .pimg,
.panelmod123 .pimg	{width: 100%!important;}

#mod122 .ZNvertcent,
#mod123 .ZNvertcent {
	position:relative;
	top: auto;
  transform: translateY(0);}
	
	
	#mod122 img,
#mod123 img {
transform:scale(1.05);
background-size: 100% auto;}
	
}
	
	
	







/** STUDIUM */
#mod142 .container {
     background:transparent;
     color:#fff;
}

#mod142  {
	background:url(../images/bluegrad.svg) #003568 left center no-repeat;
	background-size:100% 100%;
}
/** SPANEK */
 #mod143 .container {
     background:transparent;
     color:#fff;
}

#mod143  {
	background:url(../images/bluegrad.svg) #003568 left center no-repeat;
	background-size:100% 100%;
}

 #mod143 a {
         color:#fff;
		 }

 #mod141 {
    position:relative;
     z-index:1
}
 #mod141:before {
     content:'';
     background:url(../images/plant-fg.png) center center no-repeat;
     background-size:contain;
     display:block;
     width:35vw;
     height:35vw;
     position:absolute;
     right:0;
     bottom:0;
     z-index:2;
}

@media (max-width:767px) {
	#mod141:before {     
     width:45vw;
     height:45vw;
	}
}



/** KDY SE UZIVA */
 #mod131, #mod131 .container {
     background: #fff;
}
 #mod145 {
     background: transparent;
     overflow:visible;
     padding:5vw 18vw;
}
 #mod145 {
     background:#fff;
}
 #mod145.ZNboxes .boxes6 {
     grid-template-columns: repeat(3, 1fr);
     gap:100px;
}
 #mod145 .ZNbox {
     position: relative;
    /*overflow: hidden;     */
     aspect-ratio: 1/1;
     font-weight:bold;
     z-index:1;
    /*margin-bottom:15px;
    */
     border-radius:50%;
     background: #EB6508;
     
     padding:15px;
}
 #mod145 .ZNbox img, #mod145 .ZNbox div {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
 #mod145 .ZNbox img {
     display:block;
     width: 100%;
     border-radius:50%;
     filter: grayscale(93%);
     -webkit-filter: grayscale(93%);
     -moz-filter: grayscale(93%);
     transition:all 0.2s;
     opacity:0.05;
}
 #mod145 .ZNbox div {
     color: #fff;
}
 #mod145 .ZNbox:hover img {
     filter: grayscale(0%);
     -webkit-filter: grayscale(0%);
     -moz-filter: grayscale(0%);
     opacity:1;
}
 #mod145 .ZNbox:hover {
     text-shadow: 
	 3px 3px 12px rgba(0,0,0,0.5),
	 3px -3px 12px rgba(0,0,0,0.5),
	 -3px 3px 12px rgba(0,0,0,0.5),
	 -3px -3px 12px rgba(0,0,0,0.5);
}
 #mod145 .ZNbox:after {
     content:'';
     display:block;
     position:absolute;
     bottom:0px;
     width:130%;
     height:130%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background:url(../images/dekor.png) bottom center no-repeat;
     background-size:100% auto;
     z-index:2;
     transform-origin:50% 50%;
     transition:width 0.3s, height 0.3s, transform 1.3s ease-out;
}
/*#mod145 .ZNbox1:after {
    --rotation-deg:10deg
}
 #mod145 .ZNbox2:after {
    --rotation-deg:-50deg
}
 #mod145 .ZNbox3:after {
    --rotation-deg:30deg
}
 #mod145 .ZNbox4:after {
    --rotation-deg:40deg
}
 #mod145 .ZNbox5:after {
    --rotation-deg:-20deg
}
 #mod145 .ZNbox6:after {
    --rotation-deg:0deg
}
*/
 #mod145 .ZNbox:after {
    transform:translate(-50%, -50%) rotate(var(--rotation-deg, 0deg));
}
 #mod145 .ZNbox:hover:after {
    /*width:140%;
     height:140%;
     */
}


#mod147 .container {background:transparent;}

#mod147  {
	background:url(../images/greengrad.svg) #71a02d left center no-repeat;
	background-size:100% 100%;
	color:#fff;
}



@media (max-width:1699px){
     #mod145.ZNboxes .boxes6 {
        gap:100px;
    }
	
		#mod145 .ZNbox p {
        font-size:0.85rem;
    }
	
	
}

@media (max-width:1599px){

		#mod145 .ZNbox p {
        font-size:0.7rem;
    }
	
	
}



 @media (max-width:1365px){
     #mod145.ZNboxes .boxes6 {
        gap:60px;
    }
	
			#mod145 .ZNbox p {
        font-size:0.7rem;
    }
	

	
}
 @media (max-width:1279px){
     #mod145 {
        padding: 5vw 100px;
    }
     #mod145.ZNboxes .boxes6 {
        gap:105px;
    }
}
 @media (max-width:1110px){
     #mod145 .ZNbox p {
        font-size:0.85rem;
    }
}
 @media (max-width:1023px){
     #mod145 {
        padding: 5vw 100px;
    }
     #mod145.ZNboxes .boxes6 {
         gap:100px;
         grid-template-columns: repeat(2, 1fr);
    }
}
 @media (max-width:767px){
     #mod145 {
        padding: 100px;
    }
     #mod145.ZNboxes .boxes6 {
         gap:60px;
         grid-template-columns: repeat(2, 1fr);
    }
}

 @media (max-width:599px){
     #mod145 {
        padding: 30px 20vw;
    }
     #mod145.ZNboxes .boxes6 {
         gap:100px;
         grid-template-columns: 1fr;
    }
}


/** SILA KOZLIKU */

 #mod150, #mod150 .container {
     background:#003568;
     color:#fff;
}

#mod149 .Hobsah1 {
	justify-content:center;
}

/** KDE KOUPIT */
 #mod132 {
}
 #mod132, #mod132 .container {
     background:#fafafa;
}
 #mod132 .ZNbox {
     background-color:#fff;
    /*border-radius:20px;
    */
}
 #mod132 .ZNbox img {
	 padding:60px 0;
    width:100%
}
 #mod132 .ZNbox:hover {
     box-shadow:0 0 5px 5px rgba(0,0,0,0.1);
}
 #mod132 .ZNbox p {
    margin-top:0
}



@media (max-width:1279px){
	 #mod132 .ZNbox img { padding:50px 0;}
    
}

@media (max-width:767px){
	 #mod132 .ZNbox img { padding:0px 0;	 
    width:75%}
    
}

/** PORADNA */


#mod153 .container,
#mod153,
#info,
#info .container,
#mod153 .container,
#mod156,#mod156 .container {
	background:#d9e8fd; /** modra */
	background:#f7ffeb; /** zelena */
	}

.twoC {padding: 5px 30px;
  color: #f5faff;
  background: #2c679f;}
.twoC ul {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	column-gap: 75px;
}

.com-content-article figure.right.item-image {float:right;width:45%;margin-left:30px;}
.com-content-article figure.right.item-image img {height:auto;}

@media (max-width:767px){
	
	twoC {padding: 5px 10px;  }
	
	.twoC ul {
	columns: 1;
	-webkit-columns: 1;
	-moz-columns: 1;
	column-gap: 0;
}

.com-content-article figure.right.item-image {float:none;width:100%;margin-left:0px;}
    
}



/** FACEOOK */
.FBdiv {text-align:center;}

/** FOOTER */
 footer {
     background-color:#003568;
     color:#fff;
     text-align:center;
}
 footer a {
    color:#fff;
    text-decoration:underline;
    text-decoration-style:dotted;
}

 footer img {width:200px;
}

/** DECHOVE CVICENI BREATH */
 #hero {
    position:relative;
}
 .BRbyliny {
    margin-top:60px;
}
 body.nowbrething > * {
    max-height:0;
    overflow:hidden;
}
 #BRexc {
     display:none;
     position:absolute;
     top:0;
     left:0;
     width:100%;
     min-height:100vh;
     max-height:5000px;
     overflow:hidden;
     background:url(../images/BRbg.jpg) #bebebe center center no-repeat;
     background-size:cover;
     z-index:999;
}
 #BRexc.active {
     display:block;
     animation:showmeslow 0.5s;
}
 @keyframes showmeslow {
     from {
        opacity:0
    }
     to {
        opacity:1
    }
}
 #BRicon, #BRclose {
    /* index.php v hero */
     position:absolute;
     right:30px;
     top:15px;
     width:64px;
     height:64px;
     background:url(../images//BR-icon.svg) center center no-repeat;
     background-size:cover;
     z-index:3;
     cursor:pointer;
}
 #BRclose {
     background:url(../images/close-icon.svg) center center no-repeat;
     background-size:30px auto;
}
 .closeBR {
    cursor:pointer;
}
 #BRwrap {
     position:relative;
     height:360px;
     width:100%;
}
 #BRcirc,#BRtxt,#BRcircshadow {
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);
}
 #BRcirc {
     border-radius:50%;
}
 #BRcircshadow {
     width:320px;
     height:320px;
     background-color:rgba(255,255,255,0.6);
     border-radius:50%;
}
 #BRtxt {
    color:#fff;
    text-transform:uppercase;
    width: 300px;
     text-align: center;
}
 #BRinst {
     position:relative;
     text-align:center;
     padding:15px;
     width:700px;
     margin:0 auto;
     max-width: calc(100vw - 30px);
}

/** -responsiv */
@media (max-width:767px) {
	
	#BRicon, #BRclose {
        
     right:15px;
     top:45px;
     width:40px;
     height:40px;
     
}
	
	
}



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

/** PROKLADY */
 #mod131, #mod135, #mod134 {
    padding-top:60px;
}
 #mod136, #mod137, #mod132 h2 {
    padding-bottom:60px;
}
 #mod132, #mod142, #mod143, #mod147, #mod150,.FBdiv,
 #mod122, #mod123, #mod153 {
    padding-top:60px;
     padding-bottom:60px;
}
 
@media (max-width:767px) { 
 #mod131, #mod135, #mod134 {
    padding-top:30px;
}
 #mod136, #mod137, #mod132 h2 {
    padding-bottom:30px;
}
 #mod132, #mod142, #mod143, #mod147, #mod150,.FBdiv,
 #mod122, #mod123, #mod153 {
    padding-top:30px;
     padding-bottom:30px;
}
}