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

:root {

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

	--radius: 20px;

/* colors */

	--dark: #1C2D2B;
	--dark_48:#929b9a;

	--light:#F8FCFC;
	--primary:#7BCDC3;
	--primary_48: #bfe7e2;

	--primarydark_48: #4e807a;
	--darklight_16: #3f4e4d;
	--lightBg:#f4fbfa /*#f9fdfd*/;

	--darkrgb: 28,45,43;
	--lightrgb:248,252,252;
	--primaryrgb:123,205,195;

	--white:#ffffff;


	--bgform: var(--light);
	--textColor: rgba(var(--darkrgb),0.8);
	--hColor: var(--dark);

	--hr:var(--dark_48);
	--border: rgba(var(--primaryrgb), 0.48);

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



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

	--buttonColorTextHover:var(--light);
	--buttonColorHover:var(--primarydark_48);
	--buttonColorBgHover:var(--primarydark_48);



/* gap */

	--mezera:clamp(80px, 6.25vw, 120px);

	--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: var(--mezera);
	--centerpaddingminus:calc(var(--mezera) * -1);

/* font size */

	--h1:64px;
	--h2:48px;
	--h3:32px;
	--h4:24px;

	--basic:16px;
	--big:20px;
	--small:12px;

/* formáty textu */

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

	--menusize: var(--basic);
	--menusize2: var(--basic);

	--label: var(--basic);
	--basictext: var(--basic);
	--tabletext: var(--basic);

/* view */

	--v4sirka:calc(25% - calc(var(--gapsmall) * 3 * 0.25) );
	--v3sirka:calc(33.33% - calc(var(--gapsmall) * 2 * 0.3333) );
	--v2sirka:calc(50% - calc(var(--gapsmall) * 1 * 0.5) );

 

}


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

:root{
--v4sirka: calc(33.333% - calc(var(--gapsmall) * 2 * 0.3333) );
}

}

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

:root{

	--v4sirka: calc(50% - calc(var(--gapsmall) * 0.5) );
	--v3sirka:calc(50 - calc(var(--gapsmall) * 0.5) );

	--centerpadding: 30px;
	--centerpaddingminus:-30px;

 	--buttonPadding: 10px 20px;

	--h1:40px;
	--h2:32px;
	--h3:24px;
	--h4:20px;

	--basic:16px;
	--big:18px;
	--small:12px;

	--menusize: var(--big);
	--menusize2: var(--basic);


}

}

@media all and (max-width: 500px) {
:root{
--v3sirka:100%;
--v4sirka: 100%;
}
}



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(--dark);
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{
   background: var(--lightBg);
}

.layout-content {
padding-bottom:var(--gapbig);
padding-top:var(--gapsmall);
}

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

.paragraph--position--center_narrow  > .paragraph-content,
.path-user .layout-content,
#block-drualas-theme-primary-local-tasks .inner-block,
.paragraph--position--centred > .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(--centernorrow);width: 100%;
margin:0px auto;padding:0px  var(--centerpadding);
  position: relative;
}

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

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

.margin_top,
.odsazeni_zhora{margin-top:var(--gap);}

.margin_bottom,
.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);}

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

.mobilepaddingtopzero{padding-top:0;}

.mobilepaddingbottomzero{padding-bottom:0;}

}


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


#header{
width:100%;
position:fixed;
top:0px;left:0px;
	-webkit-transition: var(--transitionAll);
	-moz-transition:var(--transitionAll);
	-o-transition:var(--transitionAll);
	-ms-transition:var(--transitionAll);
	transition: var(--transitionAll);
-webkit-box-shadow: 0px 16px 96px 0px rgba(var(--darkrgb),0); 
box-shadow: 0px 16px 96px 0px rgba(var(--darkrgb),0);
background:var(--light);
  z-index: 10;
}

.scrolltop2 #header{
-webkit-box-shadow: 0px 16px 96px 0px rgba(var(--darkrgb),0.24); 
box-shadow: 0px 16px 96px 0px rgba(var(--darkrgb),0.24);
}

.region-header{
max-width: var(--center);
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
	-webkit-transition: var(--transitionAll);
	-moz-transition:var(--transitionAll);
	-o-transition:var(--transitionAll);
	-ms-transition:var(--transitionAll);
	transition: var(--transitionAll);
  padding:10px var(--centerpadding);
}

.user-logged-in #header{
top: 80px;
}


#block-drualas-theme-site-branding{
  flex-shrink: 0;
}

a.site-logo{
 line-height: 1px;
display:block;
}

a.site-logo img{
height:55px;
    -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;
}


.scrolltop2 a.site-logo img{
height:46px;
}



@media all and (max-width: 720px) {
 
a.site-logo img,
.scrolltop2 a.site-logo img{
height:46px;
}

}

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

.header-around{
  position: relative;
padding-top:70px;
}

.region-highlighted{
	position: relative;
	padding:   var(--gapbig) 0px;
	--textColor: var(--light);
	--hColor: var(--light);
	h1{margin:20px 0px;}
}

.header-around-bgaround {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.header-around-bg {
  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%;
  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-bg {
  background-image: url(../images/default.webp);
}




.header-around-bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(270deg,rgba(var(--darkrgb), 0.16) 50%, rgba(var(--darkrgb), 1) 100%);

}

.header-around-bg::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(180deg,rgba(var(--darkrgb), 1) 0%, rgba(var(--darkrgb), 0.16) 30%, rgba(var(--darkrgb), 0.16) 70%, rgba(var(--darkrgb), 1) 100%);
}

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

.region-bottom{
  --link: var(--light);
  --linkHover: var(--primary);
  --textColor: rgba(var(--lightrgb),0.8);
  --hColor: var(--light);

  color: var(--textColor);  

  padding:var(--gap) 0px;

  a{text-decoration:none;}
  p{margin:0px;}

}

.region-bottom .center{
 
}

/* paticka menu */

footer .menu{
border-top:1px solid rgba(var(--lightrgb),0.16);
  margin: var(--gap) 0px 0px;
  list-style: none;
  padding: var(--gap) 0px 0px;
  display: flex;
  gap: var(--gapsmall);
  justify-content: space-around;
  width: 100%;
}


footer .menu li{

}

footer .menu li a{
font-weight:700;
}


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

.region-bottom .center {
  text-align: center;
}
  
}


/*==================================================================================================================================
		total bottom
==================================================================================================================================*/

.region-totalbottom{
border-top:1px solid rgba(var(--lightrgb),0.16);
  --link: var(--light);
  --linkHover: var(--primary);
  --textColor: rgba(var(--lightrgb),0.8);
color: var(--textColor);  

a{text-decoration:none;}
p{margin:0px;}

}

.region-totalbottom .field--name-body{
padding:var(--gap) 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px var(--centerpadding);
}

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

.region-totalbottom .field--name-body{
  justify-content: center;
}

}

.socs {
  gap:10px;
  display: flex;
}




.socs a{
background-position:center center;
background-repeat:no-repeat;
background-size:auto 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:1px solid var(--primary);
background-color:var(--primary);
  width: 48px;
  height: 48px;
  line-height: 100em;
  overflow: hidden;
  display: block;


  position: relative;
  z-index: 1;

&:focus,
&:hover{
border:1px solid var(--primarydark_48);
background-color:var(--primarydark_48);
}

}

.socs a[href*="facebook"]{background-image:url(../images/fb-a.svg);}
.socs a[href*="instagram"]{background-image:url(../images/insta-a.svg);}
.socs a[href*="x.com"],
.socs a[href*="twitter"]{background-image:url(../images/x-a.svg);}
.socs a[href*="linkedin"]{background-image:url(../images/linked-a.svg);}
.socs a[href*="youtube"]{background-image:url(../images/you-a.svg);}


/*==================================================================================================================================
	view clanky
==================================================================================================================================*/

.viewrows .view-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: inherit;
gap:var(--gapsmall);
}

.viewcol4 > .view-content .views-row{
  width: var(--v4sirka);
}

.viewcol3 > .view-content .views-row{
  width: var(--v4sirka);
}


.viewslider .view-content {
display:flex;
}



/*==================================================================================================================================
	view proč my
==================================================================================================================================*/

.view-proc-my .view-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: start;
gap:var(--gapsmall);
text-align:center;
}

.view-proc-my .view-content > div{
width:calc(25% - (var(--gap) * 3 * 0.25));
} 

#block-oblasti .view-proc-my .view-content > div{
width:calc(50% - (var(--gap) * 1 * 0.5));
} 

.procmy{

.field--name-field-ikona img{
height:32px;
}

h3{
    margin: 10px auto;
font-size:var(--big);line-height:1.2em;
}

}

/*==================================================================================================================================
	oblasti - blok
==================================================================================================================================*/


#block-oblasti{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  gap: var(--gap);
}

#block-oblasti > div{
width:calc(50% - (var(--gap) * 0.5));
}


/*==================================================================================================================================
	teaser
==================================================================================================================================*/

.token-service,
.teaser-article{
  background: var(--white);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--textColor);
  text-decoration: none;
overflow:hidden;
text-align:center;

h3{
font-size:var(--big);line-height:1.2em;
      -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;
}

&:focus h3,
&:hover h3{
  color: var(--primary);
}

.field--name-field-ikona{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
    margin: -32px auto 0px;
    position: relative;
    z-index: 1;
    background: var(--white);

img{max-height:40px;width:auto;}
}

.button{
  padding:0px var(--gapsmall) var(--gapsmall);
    margin: auto 0px 0px;width:100%;

}

.button span{width:100%;}


}

.token-service p{margin:0px;}

.token-service-inner,
.teaser-inner{padding:var(--gapsmall);}

a{

.field--name-field-topimage,
.field--name-field-viewimage{
	line-height:1px;overflow:hidden;
img{
width:100%;  object-fit: cover;
  -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;
}


}



}
 

a:hover,a:focus {

.field--name-field-topimage,
.field--name-field-viewimage{

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;
}
}
}

 /*==================================================================================================================================
	filtry
==================================================================================================================================*/



.region-content .bef-links  ul{
  margin: 0px 0px 0px;
  display: flex;
  gap: var(--gapsmallest);  flex-wrap: wrap;
}

.region-content .bef-links  ul li{
  margin-bottom: 0px;
  padding-left: 0px;
}

.region-content .bef-links  ul li:before{
display:none; 
}


.bef-links ul a {
   font-family: var(--fontFamily);
  border: 1px solid var(--buttonColor);
  background-color: var(--buttonColorBg);
  color: var(--buttonColorText);
  font-weight: 700;
  min-height: 0px;
  font-size: var(--button);
  line-height: 1em;
  padding: var(--buttonPadding); 
  margin: 0px;  text-align: center;
  text-decoration: none;
  display: inline-block;
 -webkit-transition: var(--transitionAll);
	-moz-transition:var(--transitionAll);
	-o-transition:var(--transitionAll);
	-ms-transition:var(--transitionAll);
	transition: var(--transitionAll);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.bef-links ul a:hover,
.bef-links ul a:focus{
   border-color: var(--buttonColorHover);
  background-color: var(--buttonColorBgHover);
  color: var(--buttonColorTextHover);
}

.bef-links ul a.bef-link--selected{
   border-color: var(--dark);
  background-color: var(--dark);
  color: var(--light);
}





/*==================================================================================================================================
	serviceicons 
==================================================================================================================================*/

.serviceicons {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--gap );
  margin-bottom: var(--gapbig);
}

.serviceicons .view-content{
  display: flex;
  justify-content: center;
  gap: var(--gap) var(--gapsmall);
flex-wrap:wrap;
}

.serviceicons .view-content .views-row{
  width: calc(20% - (var(--gapsmall) * 4 * 0.2));
}


a.icon-service{
  text-align: center;
  display: block;
  color: var(--dark);
  text-decoration: none;
  font-weight: 700;

.field--name-field-ikona {
display:flex;justify-content:center;align-items:center;height:40px;margin-bottom:10px;
}

.field--name-field-ikona img{
max-height:40px;width:auto;
}

&:focus,
&:hover{  color: var(--primary);}
}


/*==================================================================================================================================
	Footer block
==================================================================================================================================*/

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


#block-drualas-theme-kontakt{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  align-items: start;
}

#block-drualas-theme-kontakt > div{
  width: calc(50% - (var(--gap)*0.5));
}




/*==================================================================================================================================
	Footer form
==================================================================================================================================*/

.webform-submission-form > div.form-type-tel label,
.webform-submission-form > div.form-type-textarea label,
.webform-submission-form > div.form-type-email label, 
.webform-submission-form > div.form-type-textfield label{
  -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;
  position: absolute;
left:calc(var(--gapsmall) + 10px) ;
top:21px;
}

.webform-submission-form > div.form-type-tel.focused label,
.webform-submission-form > div.form-type-textarea.focused label,
.webform-submission-form > div.form-type-email.focused label,
.webform-submission-form > div.form-type-textfield.focused label{
   top: 11px;   font-size: var(--small);   

}


/*** captcha ***/


.captcha{
margin:0px 0px 20px;
}

.captcha legend{
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  overflow:hidden;
  clip: rect(1px,1px,1px,1px);
}

.captcha input{width:292px;min-width:292px;max-width:292px;border:1px solid var(--border);   flex-shrink: 0;}

.captcha label:after{content:" PROMAX";font-weight:700;display:inline;color:var(--primary);}

.captcha label{ 
  -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;
  position: absolute;
  left: var(--gapsmall);
  top: 21px;
}

.captcha .focused  label{
   top: 11px;      color: rgba(var(--darkrgb),0.48);  font-size:var(--small);

}


.captcha .form-item {
margin-bottom:0px;
  display: flex;
  justify-content: start;
  align-items: start;
gap:10px;
}

.captcha .description{
  align-self: center;   text-align: left;  padding: 0px;
}

.captcha .captcha__description{
display:none;
} 


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

.captcha .form-item {
flex-wrap:wrap;
}


}

/*** messages ***/

.form-item--error-message{display:none;}

/*** confirm ***/

.webform-confirmation{
  text-align: center;
}

.webform-confirmation__message{
  font-size: var(--h2);  margin: 0px 0px 20px !important;
  font-weight: 700;    color: var(--primary);
}
 

.region-content .webform-confirmation__message{
color:var(--dark);
}


/*** form ***/


.webform-submission-form {
display:flex;margin:0px -10px;
flex-wrap:wrap;
justify-content:start;align-items:start;

.form-submit{width:100%;}

}

.webform-submission-form > fieldset,
.webform-submission-form > div{
padding:0px 10px 0px;width:100%;position:relative;
}

.webform-submission-form > div.webform-type-tel,
.webform-submission-form > div.form-type-email,
.webform-submission-form > div.form-type-textfield{
width:50%;
}

.form-item--error-message{display:none;}
 
.webform-confirmation{
  text-align: center;
}

.webform-confirmation__message{
  font-size: var(--h2);  margin: 0px 0px 20px !important;
  font-weight: 700;    color: var(--pink);
}
 

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

.webform-submission-form > div.webform-type-tel,
.webform-submission-form > div.form-type-email, .webform-submission-form > div.form-type-textfield {
  width: 100%;
}

}