@import "print.css";
@media all and (max-width: 720px) {}

:root { 

	--fontFamily:  'Titillium Web',Arial,Helvetica,"Nimbus Sans L",sans-serif;
	--transitionAll:.3s all ease-in-out;
	--transitionTop:.3s top ease-in-out;
	--trans-color-in:all .3s ease-in-out;
	--trans-color-out:all .3s ease-in-out;

	--light:#ffffff;
	--lightrgb:255,255,255;

	--dark:#000000;
	--darkrgb: 00,00,00;
	--primary:#9b201c;
	--gray:#ededed;
	--grey:#ededed;
	--grey2: #b9b9b9;

	--textColor: var(--dark);
	--hr:var(--grey);
	--border: var(--grey2);


	--link:var(--primary);
	--linkHover:var(--dark);

	--menulink:var(--light);
	--menulinkhover: rgba(var(--lightrgb), 0.8);
	--menulinkactive:rgba(var(--lightrgb), 0.8); 

	--buttonColorText:var(--primary);
	--buttonColor:var(--primary);

	--buttonColorHover:var(--primary);
	--buttonColorTextHover:var(--light);

	--bgform: var(--grey);



/**/
	--h1: 40px;
	--h2: 30px;  
	--h3:clamp(24px, 1.875vw, 36px);
	--h4:clamp(20px, 1.5625vw, 30px);
	--basic:clamp(17px, 1.35416666vw, 26px);

	--basic2:clamp(20px, 1.35416666vw, 26px);

	--big:clamp(20px, 1.875vw, 36px);
	--small:clamp(14px, 0.9375vw, 18px);

	--cookiesBasic: 19px;
	--cookiesBasic2: 17px;

/**/
	--menusize: var(--basic2);

	--label: var(--basic);
	--basictext: var(--basic);
	--tabletext: var(--basic);
	--biggertext: var(--big);
	--footer:var(--basic);

	--button: var(--basic);
	--buttonPadding: 15px 24px;

	--mezera:60px;
	

	--gapbig: var(--mezera);
	--gapbigminus: calc(var(--mezera) * -1);
	--gap: calc(var(--mezera) * 0.5);
	--gapminus: calc(var(--mezera) * -0.5);
	--gapsmall: calc(var(--mezera) * 0.25);
	--gapsmallminus:calc(var(--mezera) * -0.25);
	--gapsmaller:calc(var(--mezera) * 0.125);
	--gapsmallerminus:calc(var(--mezera) * -0.25);
	--gapsmallest:calc(var(--mezera) * 0.0625);
	--gapsmallestminus:calc(var(--mezera) * -0.0625);

	--center: 1920px;
	--centernorrow: 1000px;

	--centerpadding: 20px;
	--centerpaddingminus:-20px;
	--centerpadding2:20px;
	--centerpaddingminus2:-20px;

}		

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

:root{

	--menusize: var(--h3);


/*
	--gapbig: 80px;
	--gapbigminus: -80px;
	--gap: 40px;
	--gapminus: -40px;
	--gapsmall: 20px;
	--gapsmallminus:-20px;
	--gapsmaller:10px;
	--gapsmallerminus:-10px;
	--centerpadding: 30px;
	--centerpaddingminus:-30px;
	--centerpadding2: 60px;
	--centerpaddingminus2:-60px;
*/

 	--buttonPadding: 10px 20px;

/*
	--h1:40px;
	--h2:32px;
	--h3:24px;
	--h4:20px;
	--basic:16px;
	--big:18px;
	--small:12px;
*/
}

}

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(--primary);
min-width:0;
scroll-behavior: smooth;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;

text-align:center;
}


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

body{
min-width:0px;
}

}

.layout-container{
  position: relative;
  background: var(--light);
}

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

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

.center_narrow  ,
.paragraph--position--center_narrow  > .paragraph-content{
max-width:var(--center);width: 100%;
margin:0px auto;padding:0px  var(--centerpadding2);
  position: relative;
}

.paragraph--position--center_narrow > .paragraph-content .paragraph--position--center > .paragraph-content,
.paragraph--position--center_narrow  > .paragraph-content  .paragraph--position--center_narrow  > .paragraph-content, 
.center  .paragraph--position--center_narrow  > .paragraph-content, 
.paragraph--position--center .paragraph--position--center_narrow  > .paragraph-content, 
.center .paragraph--position--center > .paragraph-content,
.center .center,
.paragraph--position--center > .paragraph-content .paragraph--position--center > .paragraph-content{padding:0px;}



/*==================================================================================================================================
		down
==================================================================================================================================*/

#downl a{
  z-index: 1;  content: "";
  display: block;
  position: absolute;
  width: 41px;
  margin: auto; 
  height: 17px;
  background: url(../images/down.svg) center top no-repeat;background-size:100% auto;
  bottom: 30px;
	-webkit-transition: var(--transitionAll);
	-moz-transition:var(--transitionAll);
	-o-transition:var(--transitionAll);
	-ms-transition:var(--transitionAll);
	transition: var(--transitionAll);
left: 50%;
  margin-left: -13px;
}

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

.odsazeni_zhora{margin-top:var(--gap);}
.odsazeni_zespoda{margin-bottom:var(--gap);}

.margin_top_big{margin-top:var(--gapbig);}
.margin_bottom_big{margin-bottom:var(--gapbig);}

.margin_top_small{margin-top:var(--gapsmall);}
.margin_bottom_small{margin-bottom:var(--gapsmall);}


.padding_top_big{padding-top:var(--gapbig);}
.padding_bottom_big{padding-bottom:var(--gapbig);}
.padding_top{padding-top:var(--gap);}
.padding_bottom{padding-bottom:var(--gap);}
.padding_top_small{padding-top:var(--gapsmall);}
.padding_bottom_small{padding-bottom:var(--gapsmall);}

.margin_top_minus   {
margin-top:var(--gapminus);
}

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

.mobilepaddingtopzero{padding-top:0;}

.mobilepaddingbottomzero{padding-bottom:0;}


}


/*==================================================================================================================================
		styl textu
==================================================================================================================================*/

.smalltext {
  font-size: var(--small);
  line-height: 1.5em;

}

.bigtext {
  font-size: var(--big);
  line-height: 1.5em;
}


.bannertext > div > .paragraph-content-list{
margin-top:var(--gapminus);

padding:var(--gap) var(--centerpadding) 0px;
background:var(--light);
}


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

#header{
z-index:10000;
  position: fixed;  min-width: 1200px;
  top: 0px;
  left: 0px;
  width: 100%;
padding:20px 0px;
  -webkit-transition: .3s all ease-in-out;
  -moz-transition: .3s all ease-in-out;
  -o-transition: .3s all ease-in-out;
  -ms-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;
background:rgba(var(--darkrgb),0);
}

.scrolltop2 #header{
background:rgba(var(--darkrgb),0.8);

}

#header .center{
  display: flex;
  justify-content: center;
  align-items: center;
max-width:100%;
}


#block-drualas-theme-sitebranding{
  text-align: center;
  display: none;line-height:1px;
}

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

#header{
  min-width: 0px;
}

#block-drualas-theme-sitebranding{
    display: block;
    position: relative;
    z-index: 1000000;
  }

#header .center{position:static;
  justify-content: space-between;
}

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

}

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

.region-bottom{
padding:var(--gapsmall) 0px;
color:var(--light);

  --link: var(--light);
  --linkHover: rgba(var(--lightrgb), 0.8);

}

#block-drualas-theme-paticka .field--name-body{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gapsmaller);
}

#block-drualas-theme-paticka .field--name-body p{margin:0px;}

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

#block-drualas-theme-paticka .field--name-body{
  justify-content: center;
}

}


 

/*==================================================================================================================================
		banner
==================================================================================================================================*/

.header-around {
  width: 100%;
  min-height: 350px;
  height: 100vh;
  max-height: 30vw;
  position: relative;
}

.nema .header-around {
background-image:url(../images/banner.webp);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}



#block-drualas-theme-views-block-slick-block-1 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

#block-drualas-theme-views-block-slick-block-1 .view-slick .view-content {
  margin: 0px;
  position: static;  padding: 0px 0px;
}

#block-drualas-theme-views-block-slick-block-1 .view-slick .view-content .slick-track, 
#block-drualas-theme-views-block-slick-block-1 .view-slick .view-content .slick-list {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

#block-drualas-theme-views-block-slick-block-1 .view-slick .slick-slide{
  margin: 0px ;
}


.slick-item {
 width: 100%;
overflow:hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
}

@keyframes showSlide{
0% {-moz-transform:  scale(1);-webkit-transform:  scale(1);-o-transform:  scale(1);-ms-transform:  scale(1);transform:  scale(1);}
50% {-moz-transform:  scale(1.05);-webkit-transform:  scale(1.05);-o-transform: scale(1.05);-ms-transform:  scale(1);transform:  scale(1.05);}
100% {-moz-transform:  scale(1);-webkit-transform:  scale(1);-o-transform:  scale(1);-ms-transform:  scale(1);transform:  scale(1);}
}


.slick-item-in{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  animation: showSlide 10000ms infinite ease;
  -webkit-transform-origin: right center 0;
  -moz-transform-origin: right center 0;
  -o-transform-origin: right center 0;
  -ms-transform-origin: right center 0;
  transform-origin: right center 0;
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}


.nema .header-around:before,
.slick-item:after{
content:"";display:block;width:100%;height:100%;
position:absolute;top:0px;left:0px;
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.16) 39%, rgba(0, 0, 0, 0) 100%);
}

 
/*==================================================================================================================================
		galerie
==================================================================================================================================*/

.view-galerie .view-content{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;

> div{width:100%;}

}

.field--name-field-galerie{
display:flex;flex-wrap:wrap;align-items:start;justify-content:center;
gap:10px;


.field__item{
width:calc(20% - (10px * 4 * 0.2));
}

}





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

.field--name-field-galerie .field__item{
width:calc(25% - (10px * 3 * 0.25));
}

}

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

.field--name-field-galerie .field__item{
width:calc(33.33% - (10px * 2 * 0.3333));
}

}

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

.field--name-field-galerie .field__item{
width:calc(50% - (10px * 1 * 0.5));
}

}
