@import "print.css";

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


:root {  

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

	--gapbig: 100px;
	--gapbigminus: -100px;

	--gap: 60px;
	--gapminus: -60px;

	--gapsmall: 30px;
	--gapsmallminus:-30px;
--gapsmaller:20px;

	--center: 1600px;
	--centernorrow: 1000px;

	--centerpadding: 60px;
	--centerpaddingminus:-60px;


	--bigNumber: 90px;

	--h1: 55px;
	--h2: 35px;
	--h35: 35px;
	--h3: 28px;
	--button: 16px;
	--buttonBig: 20px;

	--menusize: 16px;
	--menusize2: 15px;

	--small: 15px;
	--big: 22px;

	--label: 18px;
	--basictext:  17px;
	--tabletext: 17px;
	--buttonPadding: 15px 25px;
	--buttonPaddingBig: 20px 50px;

	--blue0: #121f40;

	--blue1: #1e2c52;
	--blue2: #5a6991;
	
	--gray2: #eaeaea;
	--gray1: #ddd;
	--gray3:#627093;


	--darkGray: #1f1f1f;
	--darkGray2: #2d2d2d;


	--white:#fff;

	--gold1: #52431e;
	--gold2: #a69874;



	--textColor: var(--blue1);
	--hr:var(--gray1);
	--border: var(--gray1);

	--link: var(--gold1);
	--linkHover: var(--gold2);

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

	--buttonColorHover:var(--gold2);
	--buttonColorTextHover:var(--white);

	--bgform:white;
}


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

:root{

	--gapbig: 60px;
	--gapbigminus: -60px;

	--gap: 40px;
	--gapminus: -40px;

	--gapsmall: 20px;
	--gapsmallminus:-20px;

	--centerpadding: 30px;
	--centerpaddingminus:-30px;
 
	--menusize: 20px;
	--menusize2: 18px;

	--bigNumber: 60px;

 

	--h1: 35px;
	--h2: 30px;
	--h35: 25px;
	--h3: 25px;

  	--label: 17px;
  	--basictext: 17px;
  	--tabletext: 17px;
	--small: 15px;
	--big: 20px;


	--button: 16px;
	--buttonBig:18px;
	--buttonPadding: 10px 20px;
	--buttonPaddingBig: 15px 30px;
}

}



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(--blue0);
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(--gray2);
}

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

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

}


.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:0px  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, 
.paragraph--position--centred .paragraph--position--center_narrow  > .paragraph-content, 
.center .paragraph--position--centred > .paragraph-content,
.center .center,
.paragraph--position--centred > .paragraph-content .paragraph--position--centred > .paragraph-content{padding:0px;}

/*==================================================================================================================================
		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);}


/*==================================================================================================================================
		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;
}

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

.region-bottom{
background:var(--blue1);
  --link: var(--white);
  --linkHover: var(--gold2);
  --textColor: var(--white);

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

	--buttonColorHover:var(--gold2);
	--buttonColorTextHover:var(--white);


color: var(--textColor);  
padding:var(--gap) 0px;
}

.region-bottom .center{
  gap: var(--gapsmall);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

#block-drualas-theme-leftfooter .field--name-body{
  display: flex;
  gap: 10px 20px;
  align-items: center;
}

#block-drualas-theme-rightfooter .field--name-body{

}

#block-drualas-theme-leftfooter p{

}

#block-drualas-theme-leftfooter img{
width:120px;
}


.socky,
.napiste{
  display: flex;
  align-items: center;
  gap: 5px 10px;
  flex-wrap: wrap;
}

.napiste strong,
.socky strong{
display:block;margin-bottom:0px;
}

.zastupujete .field--name-field-body a,
.napiste a{
  text-transform: uppercase;  border: 1px solid var(--buttonColor);
  background-color: transparent;
  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;
}

.zastupujete .field--name-field-body a:hover,
.zastupujete .field--name-field-body a:focus,
.napiste a:hover,
.napiste a:focus{  
  border-color: var(--buttonColorHover);
  background-color: var(--buttonColorHover);
  color: var(--buttonColorTextHover);
}


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

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


.socs a.soc1{
  background-image: url(../images/fb.svg);
}

.socs a.soc2 {
  background-image: url(../images/instagram.svg);
}

.socs a.soc1:focus,
.socs a.soc1:hover{
  background-color:var(--gold2);
  background-image: url(../images/fb-a.svg);
}

.socs a.soc2:hover,
.socs a.soc2:focus {
  background-color:var(--gold2);
  background-image: url(../images/instagram-a.svg);
}


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

.region-bottom .center {
  justify-content: center;
}

.socky, .napiste {
  flex-direction: column;
}

#block-drualas-theme-leftfooter .field--name-body{
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

}

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

.region-totalbottom{
  --link: var(--gray3);
  --linkHover: var(--gold2);
  --textColor: var(--gray3);
color: var(--textColor);  
}

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

.region-totalbottom .field--name-body a{
text-decoration:none;
}


.region-totalbottom .field--name-body p{
margin:0px;
}


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

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

}

/*==================================================================================================================================
		colored bg
==================================================================================================================================*/

.dark_bg {
--textColor:var(--white);
  --link: var(--white);
  --linkHover: var(--gray2);

  background: var(--gold2);
  color: var(--textColor);
}

.gold_bg{
 --border: var(--gray3);
  background: var(--gray1);


--bgform:var(--gray1);

}


/*==================================================================================================================================
		čísla
==================================================================================================================================*/

#block-cisla{
  width: 100%;
  margin: auto;
}


.numbers{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: start;
}

.number{
padding:20px;  text-align: center;width:25%;
}

.number .item{
  font-size: var(--bigNumber);
  font-weight: 700;
  display: block;
  line-height: 1em;
}

.number .popis{
text-transform:uppercase;
display:block;
}

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

.number{
width:50%;
}


}

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

 
.number{width:100%;}

}


/*==================================================================================================================================
		obsah
==================================================================================================================================*/

.field--name-field-image img,
.field--name-field-obrazek img{
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}


/*==================================================================================================================================
		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 0px 15px 0px rgba(0,0,0,0); 
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0);
background:var(--gray2);
  z-index: 10;
}

.scrolltop2 #header{
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); 
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}

.region-header{
  display: flex;
  justify-content: space-between;
padding:10px var(--centerpadding);
  align-items: center;
}

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


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

.scrolltop2 a.site-logo{
width:50px;
}

.header-around{
padding-top:140px;
}


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

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

.header-around{
padding-top:102px;
} 

.region-header{
padding:10px var(--centerpadding);
}

a.site-logo{
	width:80px;
}

}
 

/*==================================================================================================================================
	teaser s pozadim
==================================================================================================================================*/

.teaser-article{
  padding-bottom: 66.7%;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  width: 100%;
  background: #fff;
display:flex;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0);
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0);
color:var(--textColor);
--textColor:var(--white);
  --link: var(--white);
  --linkHover: var(--white);
}

/*
a.teaser-article:focus,
a.teaser-article:hover{
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}*/

.teaser-article:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(0deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
  z-index: 1;
}

.teaser-article:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(0deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
opacity:0;
  z-index: 1;
  -webkit-transition: var(--transitionAll);
  -moz-transition: var(--transitionAll);
  -o-transition: var(--transitionAll);
  -ms-transition: var(--transitionAll);
  transition: var(--transitionAll);
}

.teaser-article:hover:after ,
.teaser-article:focus:after {
opacity:1;
}

.teaser-osoba-img{
  line-height: 1px;
  display: flex;
  overflow: hidden;
}

.teaser-article-img{
  line-height: 1px;
  display: flex;
  overflow: hidden;
position:absolute;top:0px;left:0px;width:100%;height:100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
background-repeat:no-repeat;
background-position:center center;

}

.teaser-article-img .field--name-field-obrazek {
  width: 100%;  display: flex;
}

.teaser-osoba-img img,
.teaser-article-img 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.teaser-osoba-img:focus img,
a.teaser-osoba-img:hover img,
a:hover .teaser-article-img img,
a:focus .teaser-article-img 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;
}

.teaser-article-inner{
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 20px;
  z-index:2;
}

.teaser-article h3{
text-transform:uppercase;
margin:0px;
}

.teaser-article-text{
  -webkit-transition: .6s all ease-in-out;
  -moz-transition: .6s all ease-in-out;
  -o-transition: .6s all ease-in-out;
  -ms-transition: .6s all ease-in-out;
  transition: .6s all ease-in-out;
  max-height: 1px;  overflow: hidden;
}

.teaser-article:hover .teaser-article-text{
  max-height: 500px;
}

 


.article-date{
font-size:var(--small);
}

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

.teaser-article:before {
  background: linear-gradient(0deg,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}

}

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

.teaser-article-text{display:none;}
}



/*==================================================================================================================================
	teaser s pozadim
==================================================================================================================================*/


.field--name-field-galerie{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-content: inherit;
  margin: -20px;
}

.field--name-field-galerie .field__item{
  display: flex;
  justify-content: start;
  align-content: inherit;
  padding: 20px;
  width: 50%;
}

.field--name-field-galerie .field__item a{
  display: flex;
  justify-content: start;
  align-content: inherit;
}

.field--name-field-galerie .field__item a img{
  object-fit: cover;
}




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


.field--name-field-galerie{
  margin: -10px;
}

.field--name-field-galerie .field__item{
  padding: 10px;
}


}

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

.field--name-field-galerie .field__item{
width:100%;
}

}


/*==================================================================================================================================
	detail projektu
==================================================================================================================================*/

.field--name-field-logo{
line-height:1px;
margin:0px auto;
max-width:300px;
}

.field--name-field-logo img{
width:100%;
}

.margin_top40{margin-top:40px;}

.page-node-type-clen .field--name-field-logo{
margin-bottom:20px;
}

.page-node-type-clen h1{
  margin: 0px auto 20px;
}

.paragraph-item-content-link2{margin-bottom:20px;}

.node-clen .pulka.last .field--name-body {
 padding:40px 0px 40px 20px;
}

.node-clen .pulky{  align-items: inherit;}
.node-clen .pulka.first{display:flex;}

.node-clen .pulka.first .field--name-field-obrazek{display:flex;}
.node-clen .pulka.first .field--name-field-obrazek img{  object-fit: cover;}

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

.node-clen .pulka.last .field--name-body {
padding-left:0px;
}

}

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

.radkypartners .view-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: inherit;
  margin: -20px;
}

.radkypartners  .views-row{
  display: flex;
  justify-content: start;
  align-content: inherit;
  padding: 20px;
  width: 50%;
}

.teaser-partner h3{margin-bottom:10px;}

.teaser-partner .field--name-field-charakteristika{
text-transform:uppercase;font-weight:700;margin-bottom:10px;
}

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


.radkypartners  .views-row{
width:100%;
}

}


.teaser-partner{
  text-align: center;border:1px solid var(--gray1);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding:40px;
text-decoration:none;
  background: var(--gray1);
--link:var(--blue1);
--linkHover:var(--blue2);
}

.teaser-partner .field--name-field-logo {
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}



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

.teaser-osoba{
  border: 1px solid var(--border);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  width: 100%;
}

.teaser-osoba-text{
  padding: var(--gapsmall);
}

.teaser-osoba h3{
  --link: var(--black);
  --linkHover: var(--pink);
  font-size: var(--big);
}

.teaser-osoba-img,
.teaser-osoba .field--name-field-obrazek img{
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

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

.teaser-osoba-text{
  padding: var(--gapsmall) var(--gapsmall) 30px;
}

}




/*==================================================================================================================================
	vypis osob
==================================================================================================================================*/




.viewrows2 .view-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-content: inherit;
  margin: 0px -20px;
}

.viewrows2 .views-row{
  display: flex;
  justify-content: start;
  align-content: inherit;
  padding: 20px;
  width: 50%;
}

 



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

.viewrows2 .view-content{
  margin: -10px;
}
 
.viewrows2 .views-row{
width:100%;  padding: 10px;

}

}



/*==================================================================================================================================
	vypis partneru
==================================================================================================================================*/

.logapartners .view-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-content: inherit;
  margin:0px -20px;
}

.logapartners .views-row{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 33.33%;
}

.token-partner{
width:100%;
line-height:1px;
}

.token-partner a{display:block;}

.token-partner .field--name-field-logo {
  max-width: 300px;
}

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


.logapartners .view-content{
  margin:0px  -20px;
}

.logapartners .views-row{
  padding: 20px;
}

.token-partner .field--name-field-logo {
  max-width:200px;
}


}

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

.logapartners .views-row{
width:100%;
}

}

/*==================================================================================================================================
	kontakt
==================================================================================================================================*/

iframe{
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}





/*** captcha ***/


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

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


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

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



.captcha .form-item {
margin-bottom:0px;
  display: flex;
  justify-content: start;
  align-items: center;
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;
}


}



/*** form ***/


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

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

}


/*** úprava kontaktu ***/

.page-id-701 .layout-content,
.page-id-700 .layout-content{
padding-bottom:0px;
}


.radkypartners .view-content > h2{
width:100%;text-align:center;
}

.radkypartners .view-content .views-row + h2{
  margin-top: var(--gap);
}