@import "print.css";

:root {  
	--trans-color-in:all .2s ease-in-out;
	--trans-color-out:all .2s ease-in-out;

	--fontfamily:  'Montserrat',Arial,Helvetica,"Nimbus Sans L",sans-serif;
	--fontfamily2: 'DM Sans', 'Montserrat',Arial,Helvetica,"Nimbus Sans L",sans-serif;

	--basictext: 18px;
	--perextext: 20px;

	--button: 16px;

	--menusize: 14px;
	--h1: clamp(140px, 10.26vw, 187px);
	--h2a: 80px;

	--h2: 48px;
	--h3: 30px;
	--h4: 25px;
	--h3product: 25px;


	--tablehead:18px;
	--tabletext:16px;

	--center: 1600px;
	--center2: 1200px;
	--centernorrow: 900px;

	--centerpadding: 50px;
	--centerpaddingminus: -50px;

	--gapbig: 160px;
	--gapbig2: 200px;

	--gap: 80px;
	--gapminus: -80px;
	--gapsmall: 40px;
	--gapsmallminus: -40px;
	--gapsmaller: 20px;
	--gapsmallerminus: -20px;

	--blanc: #fff;
	--white: #fff;
	--textcolor: #020100;
	--black:#020100;
	--link: #020100;
	--linkhhover: #8D1656;
	--bgLightPurple: #F2EDF3;
	--border:#F2EDF3;
	--border2:#CED0BD;
	--purple:#8D1656;
	--red:#ff0000;
	--colors:#8D1656;
}


@media all and (max-width: 720px) {

:root{

	--h1: 60px;
	--h2a: 45px;
	--h2: 40px;
	--h3: 30px;
	--h4: 20px;

	--h3product: 18px;


	--tablehead:16px;
	--tabletext:16px;

	--basictext: 16px;
	--perextext: 18px;

	--menusize: 16px;
	--button: 14px;

	--gapbig: 120px;

	--gap: 50px;
	--gapminus: -50px;
	--gapsmall: 25px;
	--gapsmallminus: -25px;
	--gapsmaller: 12.5px;
	--gapsmallerminus: -12.5px;

	--centerpadding: 20px;
	--centerpaddingminus: -20px;

}

} 

body{
margin:0px;
padding:0px;
font-weight: 400;
font-family: var(--fontfamily);
font-size: var(--basictext);
line-height: 1.5em;
color: var(--textcolor);
background: var(--bgLightPurple);
min-width:1200px;
scroll-behavior: smooth;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}


@media all and (max-width: 720px) {

body{
min-width:0px;
}

}


.layout-container{
padding:0px 0px var(--gapsmall);
color: var(--black);
background: var(--white);
    margin: 0;
  position: relative;
}



/*==================================================================================================================================
		admin
==================================================================================================================================*/

.role-authenticated .header-around{
padding-top:0px;
}


.role-authenticated #header{
position:relative;
}

#header .contextual-region,
#block-drualas-theme-main-menu-menu.contextual-region {
position:static !important;
} 

.role-authenticated .rmm-toggled-controls,
.role-authenticated .rmm-fixed.oblibene{
    position: absolute;
}



.role-authenticated .for-anonym-only {
display: none;
}

@media all and (max-width: 720px) {

#toolbar-administration{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
width:100%;
}

}

/*==============================================================================================================
	login form 
==============================================================================================================*/

.path-user form{
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: var(--graybg);
  padding: var(--centerpadding);
}


.path-user form[id*='user-pass'],
.path-user form[id*='user-login-form']{
max-width:600px;margin:auto;
}


/*==============================================================================================================
	odsazeni
==============================================================================================================*/


.margintop{
margin-top:var(--gap);
}

.marginbottom{
margin-bottom:var(--gap);
}

.margin_top_minus{
margin-top:var(--gapminus);position:relative;z-index:1;
}

.margin_bottom_minus{
margin-bottom:var(--gapminus);position:relative;z-index:1;
}


.padding_top{
padding-top:var(--gap);
}

.padding_bottom {
padding-bottom:var(--gap);
}

.padding_bottom_small {
padding-bottom:var(--gapsmall);
}

.padding_top_small {
padding-top:var(--gapsmall);
}


/*==================================================================================================================================
		center
==================================================================================================================================*/


.path-user .layout-content,
#block-drualas-theme-primary-local-tasks .inner-block,
.center,
#cookies-docs{width: 100%;
max-width:var(--center);margin:0px auto;padding:0px  var(--centerpadding);
  position: relative;
}

.body-center{width: 100%;
max-width:var(--centernorrow);margin:0px auto var(--gap);padding:0px  var(--centerpadding);
  position: relative;
}

.narrow-1{
max-width:var(--centernorrow);margin-right:auto;margin-left:auto;
}

.center .center{
padding-right:0px;padding-left:0px;
}

/*==================================================================================================================================
		header
==================================================================================================================================*/

#header{
background:var(--bgLightPurple);
  text-align: center;
padding:15px 0px;
}


.site-logo{
  line-height: 1px;
display:inline-block;margin-bottom:15px;
}

.site-logo img{
width:100px;
}

@media all and (max-width: 720px) {

.site-logo{
margin-bottom:0px;
}

}




/*==================================================================================================================================
		footer
==================================================================================================================================*/

.region-footer{
padding:var(--gap) 0px;
}

.region-footer .center{
  flex-wrap: wrap;  display: flex;
  justify-content: space-between;
  align-items: start;

}

.region-footer .center > nav,
.region-footer .center > div{
max-width:33.333%;
}

.region-footer .center > div#block-drualas-theme-logopaticka {
  max-width: 100%;
  width: 100%;
  margin-bottom: var(--gapsmall);
}

.region-footer p{
 
line-height:1.3em;
}

.region-footer ul{  margin: 0px;
list-style:none;padding:0px;  font-family: var(--fontfamily2);
}

.extlink-nobreak .ext,
.extlink-nobreak .mailto{
display:none;
}

.region-footer ul a{
text-decoration:none;
}

.region-footer img{
width:240px;
}


.menu--footer li{
margin-bottom:20px;
}

.menu--footer a{
font-size:var(--h4);
}


.region-totalbottom{
padding:20px 0px;
border-top:2px solid var(--border2);
}

#block-drualas-theme-paticka .field--name-body{
font-size:0.9em;
line-height:1.3em;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

@media all and (max-width: 720px) {

.region-footer img {
  width: 140px;
}

}

/*** socky ***/

#block-drualas-theme-socialnisite h2{
  font-size: 0.9em;
  line-height: 1.3em;
font-family: var(--fontfamily);

}

#block-drualas-theme-socialnisite ul{
  display:flex;gap:10px;
}

#block-drualas-theme-socialnisite ul li{
  
}

#block-drualas-theme-socialnisite ul a{
/*  border: 2px solid var(--border2);*/

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; 

  display:block;width:40px;height:40px;line-height:100em;overflow:hidden;
background-position:center center;
background-repeat:no-repeat;
background-size:100% auto;
}

#block-drualas-theme-socialnisite ul a[href*='facebook']{
background-image:url(../images/icon-facebook.svg);
}


#block-drualas-theme-socialnisite ul a[href*='instagram']{
background-image:url(../images/instagram.svg);
}

@media all and (max-width: 720px) {

.region-footer .center {
flex-wrap:wrap;
}

.region-footer .center > nav, .region-footer .center > div {
  max-width: unset;
}


.bottom.right-footer{
width:100%;    text-align: center;
margin-top:10px;}

.bottom.left-footer{
width:100%;    text-align: center;
}

.menu--footer li{
margin-bottom:10px;
}


}

/*==================================================================================================================================
		page header
==================================================================================================================================*/

.page-header{
background-repeat:no-repeat;background-position:right 0;
 background-size: auto 100%;
}

.page-header .center{
padding:var(--gapbig2) var(--centerpadding) var(--gapbig);
}

.page-header:not([style=""]){
color:var(--textcolor);
}

.page-header:not([style=""]) .center{

}

.page-header:not([style=""]) h1{
  text-align: left;
  margin: 0px 0px;
 
}

.page-header.velky .center{
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;min-height:500px;max-height: 800px;
}

.path-frontpage .page-header.velky .center{
  justify-content: center;
}

/****==================
	kategorie
==================****/


.kategoriesekce .view-content{
  padding-right: 500px;margin-top:var(--gapbig);
  display: flex;flex-wrap:wrap;
  justify-content: start;
  align-items: start;
  gap: 20px 20px;
}

.field--name-field-odkazy{
width:100%;margin-top:var(--gapsmall);
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 10px 20px;
}

.field--name-field-odkazy .field__item{}



.kategoriesekce .view-content a,
.field--name-field-odkazy a{
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
border:2px solid var(--linkhover);
display:block;text-decoration:none;
color:var(--linkhover);
background:var(--white);
font-size:var(--button);
  font-weight: 500;
padding:15px 25px;text-transform:uppercase;
}

.kategoriesekce .view-content .active a,
.kategoriesekce .view-content a:focus,
.kategoriesekce .view-content a:hover,
.field--name-field-odkazy a:focus,
.field--name-field-odkazy a:hover{
background-color:var(--linkhover);  color: var(--white);border-color:var(--linkhover);
}


.paragraph--type--text-content  .field--name-field-odkazy{


a{
  --link: var(--purple);
border-color:var(--purple);
}

a:focus,
a:hover{

  color:white;
background-color: var(--purple);
border-color:var(--purple);
}

}

@media all and (max-width: 720px) {


.kategoriesekce .view-content,
.field--name-field-odkazy{
  padding-right: 0;  margin-top: var(--gap);
flex-wrap:wrap;  gap: 10px 10px;width:100%;
}

.kategoriesekce .view-content a,
.field--name-field-odkazy a{
  padding: 5px 20px;
}


.page-header.velky .center{
min-height:240px;  
}

.page-header{
    background-size: 55vw auto;
}

.page-header .center{
  max-height: unset;
    height: auto !important;  
padding: 49vw var(--centerpadding) var(--gap);
}

}


/*==================================================================================================================================
	nový výpis obsahu
==================================================================================================================================*/

.page-header + .center > .field--name-body{
  max-width: var(--centernorrow);
  margin-right: auto;
  margin-left: auto;
margin-top:var(--gap);
}


.cat-desc{
  max-width: var(--centernorrow);
  margin-right: auto;
  margin-left: auto;
}


.category-container{
--morelink:#512564;
display:none;
}

.category-container.active{
display:block;
}

.category-container .vypisproduktu {
margin-top:var(--gap);
}



/*==================================================================================================================================
	show more 
==================================================================================================================================*/

.showmorelink{
  text-align: center;
}

.showmorelink a{
  color: var(--colors);border:2px solid var(--colors); background:transparent;
}

.showmorelink a:focus,
.showmorelink a:hover{
color: var(--white);border:2px solid var(--colors); background:var(--colors);
}


.button .showless{display:none;}
.show .button .showless{display:inline-block;}
.show .button .showmore{display:none;}

.longtext{
position:relative;
  overflow: hidden;
  max-height: 19em;
}

.longtext:after {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 1;
  background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0);
}

.show .longtext{
  max-height: unset;
  min-height: 0;
}

.show .longtext:after{
display:none;
}


/*========================================================================================================================
			show more and less
========================================================================================================================*/

.body-more {
margin-top:20px;text-align:center;
}


.body-more a{
  display: inline-block;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  border: 1px solid var(--black);
color:var(--black);
  text-decoration: none;
  font-size: var(--button);
  padding: 10px 25px;
  text-transform: uppercase;
}

.body-more a:focus,
.body-more a:hover{background-color:var(--black);color:white;
}


.body-more a.show_less {
display:none;
}


.smore .body-more a.show_more{
display:none;
}

.smore .body-more a.show_less{
display:inline-block;
}

.inner-body::after {
    content: "";
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0px;
    bottom: 0px;
z-index:1;
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}


.smore .inner-body:after{
display:none;
}


.inner-body{
    overflow: hidden;
    max-height: 18em;
}

.smore .inner-body{
    max-height: unset;
    min-height: 0;
}

@media all and (max-width: 720px) {

.body-more a{
  padding: 10px 20px;
}

}



/*==================================================================================================================================
	vypis produkt
==================================================================================================================================*/

.node-teaser-product {
display:block;text-decoration:none;text-align:center;
}

.node-teaser-product  .field--name-field-galerie{
margin-bottom:20px;overflow:hidden;  line-height: 1px;position:relative;
}
 

.node-teaser-product h3{
font-size:var(--h3product);  margin: 0px;font-weight:400;
}

.node-teaser-product  .field--name-field-kategorie{
}

.vypisproduktu .product-text{padding:0px 20px;}

.vypisproduktu .view-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
margin:0px -15px;gap: var(--gap)  0px ;
}

.vypisproduktu .view-content .views-row{
width:33.333%;padding:0px 15px; 
}

@media all and (max-width: 720px) {

.vypisproduktu .view-content .views-row{
width:50%;
}


}


.node-teaser-product  .field--name-field-galerie img {
  -webkit-transition: .5s all ease-in-out;
  -moz-transition: .5s all ease-in-out;
  -o-transition: .5s all ease-in-out;
  -ms-transition: .5s all ease-in-out;
  transition: .5s all ease-in-out;
}

.node-teaser-product:hover   .field--name-field-galerie img,
.node-teaser-product:focus  .field--name-field-galerie img{
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transform-origin: center center 0;
  -moz-transform-origin: center center 0;
  -o-transform-origin: center center 0;
  -ms-transform-origin: center center 0;
  transform-origin: center center 0;
  filter: brightness(1) ;
}
/*==================================================================================================================================
	výpis štítku
==================================================================================================================================*/

.path-taxonomy .layout-content{
padding:var(--gap) 0px 0px;
}


/*==================================================================================================================================
	detil produktu
==================================================================================================================================*/

.node-produkt .center{
  display:flex;align-items:start;padding-top:var(--gap);margin:0px auto var(--gap);
}

.node-produkt h1{
  font-size: var(--h2);
  text-align: left;
}

.node-produkt .galerie{
width:50%;flex-shrink: 0;
}

.node-produkt .detail{
width:50%;padding-left:var(--gap);
}



.field--label-inline {
display:flex;
}


.field--label-inline .field__label{
font-weight:500;margin-right:10px;
}

.field--label-inline .field__label:after{content:":";}

.node-produkt .field--name-field-perex{
margin-top:20px;
}



@media all and (max-width: 720px) {


.node-produkt .center{
  padding-top: var(--gapbig);
  flex-wrap: wrap;
}

.node-produkt .galerie {
  width: 100%;order:1;
}

.node-produkt .detail {
  width: 100%;
  padding-left: 0;order:0;
}


}




/***** podobné ****/


.block-views-blockpodobne-clanky-block-1{width: 100%;
max-width:var(--center);margin:0px auto var(--gap);padding:0px  var(--centerpadding);
  position: relative;
}

.block-views-blockpodobne-clanky-block-1 h2{
text-align:center;margin-bottom:var(--gapsmall);
}

/*==================================================================================================================================
	front category
==================================================================================================================================*/

.frontcategoryview .view-content {
  display: flex;
  justify-content: inherit;
  align-items: inherit;
  flex-wrap: wrap;
max-width:1080px;margin:0px auto;
}

.frontcategoryview .view-content .views-row {
width:50%;  display: flex; 
}

.node-teaser-page{
color:white;text-align:center;
  display: block;  text-decoration: none;position:relative;
overflow:hidden;  
padding-top:136%;  width: 100%;
}

 .page-view-image{
background-repeat:no-repeat;background-position:center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
position:absolute;top:0px;left:0px;width:100%;height:100%;
  -webkit-transition: .5s all ease-in-out;
  -moz-transition: .5s all ease-in-out;
  -o-transition: .5s all ease-in-out;
  -ms-transition: .5s all ease-in-out;
  transition: .5s all ease-in-out;
}

.node-teaser-page:hover  .page-view-image,
.node-teaser-page:focus  .page-view-image{
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transform-origin: center center 0;
  -moz-transform-origin: center center 0;
  -o-transform-origin: center center 0;
  -ms-transform-origin: center center 0;
  transform-origin: center center 0;
}


.page-view-text{
padding:var(--gapsmall) var(--gapsmaller);  
width:100%;position:absolute;bottom:0px;left:0px;
}

.node-teaser-page:hover,
.node-teaser-page:focus{
color:#fff;
}

.more-link{
text-decoration:underline;
}

.node-teaser-page:hover .more-link,
.node-teaser-page:focus .more-link{
text-decoration:none;
}

.page-view-text h2{
font-size:var(--h2a);
}

.node-teaser-page .field--name-field-uvodni-text {
min-height:calc(4.5em + 20px);
}

@media all and (max-width: 700px) {

.page-view-text{
  position: relative;
background:var(--bgrowcolor);
}

.node-teaser-page{
  padding-top: 0%;
}

.page-view-image{
  position: relative;  height: auto;  padding-top: 100%;
}

 

}

@media all and (max-width: 550px) {



.frontcategoryview .view-content .views-row {
width:100%; 
}

.node-teaser-page .field--name-field-uvodni-text {
  min-height: 0;
}

}


/*========================================================================================================================
			ladění
========================================================================================================================*/

img[src*='logo-inimitable-color.png'],
img[src*='group_79']{
width:330px;max-width:90%;
}

@media all and (max-width: 720px) {

img[src*='logo-inimitable-color.png'],
img[src*='group_79']{
width:200px;max-width:90%;
}


}




 
.path-frontpage  #page-title{
  position: relative;
  font-size: var(--h2a);text-transform:uppercase;color:var(--black);

  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  width: 100%;
  max-width: 50%;
}

.path-frontpage  .page-header.velky .page-header2{
  padding-left: 0;
}

.and{ 
margin:0px -15px 0px -10px;
}
.txt{position:relative;z-index:1;}

.and img{ 
  width: 110px;}


@media all and (max-width: 1700px) {

.path-frontpage #page-title{
  justify-content: left;  max-width: 100%;

}

}


/*========================================================================================================================
			pozadí v rohu
========================================================================================================================*/
/*
.node-id-540 .page-header
.node-id-50 .page-header
.node-id-49 .page-header
.node-id-48 .page-header*/

.page-header.velky .page-header2{
  background-repeat: no-repeat;
  background-position: left top;
background-size:650px auto ;
padding-left:var(--gapbig);
}

.node-produkt{
  background-repeat: no-repeat;
  background-position: left top;
background-size:650px auto ;
}



/* pece - zluta */

.cat-1, 
.node-id-49 .page-header2{
background-image:url(../images/zluta.webp);
}


/*styl - modra */
.cat-5,
.node-id-50 .page-header2{
background-image:url(../images/modra.webp);
}

/*barveni - fialova */
.cat-4,
.node-id-48 .page-header2{
background-image:url(../images/fialova.webp);
}


/*ostatni - cervena*/
.cat-6,
.node-id-540 .page-header2{
background-image:url(../images/cervena.webp);
}


@media all and (max-width: 1700px) and (min-width: 1300px) {

.node-produkt,
.page-header.velky .page-header2{
background-size:40vw auto;
}

}

@media all and (max-width: 1300px) {

.node-produkt{
   background-size: 550px auto;
}

.page-header.velky .page-header2{
  padding-left: var(--gap);    background-size: 550px auto;
}

}

@media all and (max-width: 720px) {

.node-produkt,
  .page-header.velky .page-header2 {
    background-size: 200px auto;
  padding-left: 0;
  }

}

@media all and (max-width: 400px) {
 
 .page-header.velky .page-header2 {
    background-size: 50vw auto;
}

}