@charset "UTF-8";
* {margin: 0px;padding: 0px;}

/* ---  definice hlavních proměnných ---------------- */
:root {
  --color1: #00A0DC;
  --color2: #F89C18FF;
  
  --color3: #2D4FA4 ;
  
  --color4: #ED1C24 ;
  
  

 
}


body#tinymce, body  {


color: black; 
font-size: clamp(16px, 1.07vw, 20px);
line-height: 1.6;

text-align:left; position: relative;


font-family: "Libre Franklin", sans-serif;
font-optical-sizing: auto;
font-style: normal;

font-weight: 400;

/*letter-spacing: -0.02em;*/


}

#tinymce img	{max-width: 100%;}

b, strong {font-weight: 600; color: black;}

h1, h2, h3, h4, h5, h6 {  font-weight: 700; } 



h1 {
    font-size: 2.44rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
	font-weight: 700;
	color: var(--color1);
	padding-top: 2rem;
}

h2 {
    font-size: 1.95rem;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

h3 {
    font-size: 1.56rem;
    line-height: 1.3;
    margin: 1rem 0rem 0.5rem 0rem;
	color: var(--color1);
}

h4 {
    font-size: 1.25rem;
    line-height: 1.35;
    margin-bottom: 0.4em;
	color: var(--color1);
}

h5 {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0.3em;
}

h6 {
    font-size: 0.8rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.skryte	{display: none;}
.skryte.toggle	{display: block;}

h3 > img.ic	{padding-right: 10px; height: 47px; width: auto;}

h1.hlavni, h1 strong {color: #AFD800; font-size: 36px; font-weight: 800; }
h2.hlavni, h2 strong, h1.hlavni strong {color: #F1D511; font-weight: 800;}

	.body_v3 h1 strong {font-size: 32px; line-height: 34px;}
	.body_v3 h1 {padding-top: 1.5em;}

h2.moduletitle	{text-align: center; }

.pas > .moduletitle	{font-weight: 1.4 em; width: 95%; margin: auto; padding: 105px 0px 30px 0px; }

h1 span.p	{font-size: 14px; display: block; font-weight: 400; /*position: absolute; top: 20px;*/ line-height: 16px; color:#1D1D1D; padding-bottom: 15px;}


a, .alink {color: var(--color1); transition: color .4s ease-in-out; text-decoration: underline; cursor: pointer; }
#obsah a, .alink	{font-weight: 600;}
a:hover, a.link:hover, a:active, a.link:active  {color: black;}
a.nolink	{text-decoration: none; color: inherit;}
a img {border:0px;}

ul {
  padding-left: 1.1rem; /* místo pro marker */
}

li {
  padding: 0.15rem 0rem 0.15rem 0.8rem;  /* odsazení textu od markeru */
}

li::marker {
  content: "✔";
  color: var(--color1);
  font-size: 1.1rem;
  position: relative; 
  left: -0.8rem;
}



.color1	{color: #DFD300;}
.color2	{color: #AED800;}
.color3	{color: #1F3F2A;}
.color4	{color: #FEF7E5;}
.color5	{color: #F3FDEE;}
.color6	{color: #848484;}

p {margin: 0px; padding: 6px 0px;}
.pozn {font-size: 0.75em;}
table {border-collapse:collapse;border-spacing:0; font-size: 100%;}




.tabulka th {padding: 4px 10px 4px 10px; background: #189FD6 ;color:white; border: 1px solid white;}
.tabulka_prazdna  {border-collapse: collapse;}
.tabulka_prazdna td {vertical-align: top;padding-right: 10px;padding-bottom:10px;}
.obtekany_vlevo {float:left;margin-right:20px;}
.obtekany_vpravo  {float:right;margin-left:20px;}

.clr  {
clear: both;
height: 1px;
overflow: hidden;
}



hr  {

height:1px;color:#E9E9E9;background-color:transparent;

border-top: 2px dotted #E9E9E9;
margin: 5px 0px;
border-bottom: 0px dotted #E9E9E9 !important;
}


.button_hlavni	{font-size: 15px; padding: 13px 25px; color: white !important; font-weight: 600; display: inline-block; background: #F1D511  !important; text-decoration: none  !important; border-radius: 70px; transition: background 0.7s linear, border 0.7s linear, color 0.7s linear; border: 2px solid #F1D511  !important; text-align: center;}

button, .button	{
	padding: 0.5rem 3rem;
	display: inline-block;
background: var(--color3);
color: white;
border-radius: 1rem;
cursor: pointer;	
}

button:hover, .button:hover	{
	filter: brightness(0.8); /* ztmaví na 50 % */
}



/*** nový ypůsob sloupců ********/
.sloupce2	{	display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr ;}
.sloupce3	{	display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr 1fr;}
.body_v3 .sloupce2 ,  .body_v3 .sloupce3 	{grid-template-columns: 100%; grid-gap: 10px;}
.body_v3 .sloupce2.nekolabovat , .body_v2  .sloupce2.nekolabovat	{display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr ;}



.body_v2 .sloupec2, .body_v2 .sloupec3   {margin: 0px; float: none; width: 100%;}
.body_v3 .sloupec2, .body_v3 .sloupec3   {margin: 0px; float: none; width: 100%;}

.full {
    margin-left: calc(-1 * 5vmax);
    margin-right: calc(-1 * 5vmax);
}

body#tinymce .full	{
	margin-left: 0px;
	margin-right: 0px;
}



/* =============================================== 
	mojeshow
-------------------------------------------------- */
.mojeshow {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mojeshow h1	{padding-top: 0px;}

/* levá i pravá část */
.mojeshow .obr,
.mojeshow .text {
    
    box-sizing: border-box;
}

.mojeshow .text {
	padding: 2rem 3rem;
    display: flex;
    align-items: center;   /* vertikální zarovnání */
    height: 100%;
}

/* obrázek */
.mojeshow .obr {
    position: relative;
    overflow: hidden;
}

.mojeshow .obr img {
    width: 100%;
    height: 100%;
    display: block;
	object-fit: cover;
}

/* bílý přechod shora dolů */
.mojeshow .obr::before { 
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: 
		/* horní fade */
        /*linear-gradient(
            to bottom,
            rgba(255,255,255,0.3) 0%,
            rgba(255,255,255,0) 40%
        ),
		*/
        /* spodní fade */
		/*
        linear-gradient(
            to top,
            rgba(255,255,255,0.3) 0%,
            rgba(255,255,255,0) 35%
        ),
		*/
        /* levý fade */
		/*
        linear-gradient(
            to right,
            rgba(255,255,255,0.5) 0%,
            rgba(255,255,255,0) 30%
        )
		*/
        /* pravý fade */
		
        linear-gradient(
            to left,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,0) 30%
        );
		
}

/* mobil verze */
.body_v3 .mojeshow {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

.body_v3 .mojeshow .obr {
    max-height: 50vh;
}

.body_v3 .mojeshow .obr img {
    height: 100%;
    object-fit: cover;
}
/* -------------------------------------------------- */


/* =============================================== 
	oteviracka
-------------------------------------------------- */
#oteviracka {
	/*background: #F89C1821 url(../images/hodinyOK.svg) center / auto 80% no-repeat;*/
	position: relative;
	/*background: #F89C18FF;*/
	background: #f89c1845;	
	color: black;
}

#oteviracka .sloupce2	{	grid-template-columns: 35% auto ;}
.body_v3 #oteviracka .sloupce2	{ grid-template-columns: 1fr ;}


#oteviracka .okolo	{position: relative; text-align: center;}
#oteviracka .okolo img	{width: 100%; }

.body_v3	#oteviracka .okolo img	{max-width: 250px; margin: auto;}

#oteviracka .kalok	{background: rgba(255,255,255,1); padding: 0.5rem 1rem; /*border-left: 1px solid var(--color2);*/ margin: 0.2rem 0rem 0.5rem 0rem; }

#oteviracka h3, .kal strong	{color: #F89C18FF; color: var(--color1); }
.kal em	{color: var(--color4); font-weight: 500;}
.kal em, #oteviracka h4	{margin-top: 1rem; margin-bottom: 0px; padding-bottom: 0px;}
#oteviracka p.kal	{margin: 0rem; font-size: 1.1rem;}
.kal strong {padding: 0rem 1rem;}
#oteviracka a	{display: inline-block; padding: 0.1em 0.3em; background: rgba(255,255,255,0.2); color: var(--color4); text-decoration: none; transition: background-color 0.4s ease;}
#pohotovost	{color: var(--color4);}
/*#oteviracka a:hover	{background: rgba(0,0,0,1);}*/
/*
#oteviracka::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/hodinyOK.svg) 35% 150px / auto 90% no-repeat;
	
    opacity: 0.3;
    pointer-events: none;
}
.body_v3 #oteviracka::before	{background: url(../images/hodinyOK.svg) center / auto 70% no-repeat;}
*/
#oteviracka .upozorneni {margin-top: 1rem;}
#oteviracka .upozorneni  a	{background: rgba(0,0,0,0.2); color: #189FD6;}
#oteviracka .upozorneni  strong	{color: inherit;}






#oteviracka > * {
    position: relative;
    z-index: 1;
}

#oteviracka .upozorneni	{padding: 2rem;}

#oteviracka .upozorneni, #oteviracka .kalok	{
	
	background: white;
	box-shadow: 0px -4px 10px rgba(0,0,0,0.2);
	border-radius: 0.7rem;
}

.kal_detail	{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.kal_detail .datum {width: 9rem;}

.kal_detail .datum strong	{width: 4rem; display: inline-block;}

.kal_detail .kal em a	{color: inherit; text-decoration: none;}
.kal_detail .kal em a:hover	{text-decoration: underline;}

.kal_detail .kal {}

.kal_detail .admin	{width: 100%; background: #EEEEEE; 
border-bottom: 1px solid var(--color1); 
border-left: 1px solid var(--color1); 
border-right: 1px solid var(--color1); 
padding: 0.5rem;
margin-bottom: 1rem;
position: relative; top: -0.3rem;
}


/* -------------------------------------------------- */


.nadpisSPEC {
    display: flex;
    align-items: center;
    text-align: center;
}

.nadpisSPEC::before,
.nadpisSPEC::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}

.nadpisSPEC::before {
    margin-right: 1rem;
}

.nadpisSPEC::after {
    margin-left: 1rem;
} 




/* =============================================== 
	náš tým a jiné položky
-------------------------------------------------- */

.pols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 2rem;
	padding: 2rem 0rem;
	
}

.podtisk1	{
	background: linear-gradient(
    to bottom,
    #ffffff 0,
    #D3F6FF 5rem
  );
}





.pols > div {
	text-align: center;
	padding: 1.5rem;
border-radius: 2rem;
	background: white;
	box-shadow: 0px 0px 1.2rem rgba(0,0,0,0.1);	
	
}

.pols > div h4	{
	color: black;
}

.pols > div .obr	{
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: white;
	box-shadow: 0px 0px 0.8rem rgba(0,0,0,0.15);
	overflow: hidden;
	display: flex; justify-content: center; align-items: center;
	margin: auto;
	
	background: rgba(6,120,220,0.2) url(../images/krizek.svg) center / 80% auto no-repeat;
	
}

.pols > div .obr	img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------- */



/* =============================================== 
	nabídka služeb nabidkaS
-------------------------------------------------- */
.nabidkaS {
	display: grid;
	/*grid-template-columns: 1fr 1fr 1fr 1fr 1fr;*/
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

	  grid-gap: 3rem;
	  padding: 2rem 0rem;
}

.nabidkaS > div {
	text-align: center;
}

.nabidkaS > div h3	{
	font-size: 1.5rem;
	color: var(--color1);
	text-align: center;
	margin: 0.7rem 0rem;
	padding: 0px;
}

.nabidkaS > div h4	{
	font-size: 1.1rem;
	color: var(--color1);
	text-align: center;
	margin: 0.4rem 0rem;
	padding: 0px;
}

.nabidkaS > div ul	{
	display: inline-block;
	margin: auto;
	text-align: left;
}


.nabidkaS > div .foto	{
	width: 100%;
	max-width: 200px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: white;
	box-shadow: 0px 0px 0.8rem rgba(0,0,0,0.3);
	overflow: hidden;
	display: flex; justify-content: center; align-items: center;
	margin: auto;
	
	background: rgba(6,120,220,0.2) url(../images/krizek.svg) center / 60% auto no-repeat;
	
}

.nabidkaS > div .foto	img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nabidkaS > div ul li	{
	
	padding-top: 0px;
	padding-bottom: 0px;
}

.nabidkaS li, .nabidkaS p	{/*font-size: 0.8rem;*/}


/* -------------------------------------------------- */


#pata	h3	{
	
	text-align:center;
	color: white;
	text-shadow: 0px 0px 0.5rem rgba(0,0,0,0.4);
	
}

#mapa	{max-width: 800px; margin: auto; margin-top: 2.5rem; margin-bottom: 2.5rem;}

.projektEU	{
	max-width: 800px;
	/*opacity: 0.7;*/
	color: white;
	
	text-align: center;
	background: rgba(255,255,255,0.2);
	padding: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin: auto;
	border-radius: 1rem;
}



.peligalerie	{margin: 20px 0px; text-align: center; 
display: flex; flex-wrap: wrap;
justify-content: center;
}

.peligalerie a	{width: 220px; height: auto; display: inline-block; margin: 5px; position: relative; border: 1px solid white; box-shadow: 0px 0px 7px rgba(0,0,0,0.3); transition: box-shadow 0.5s ease-in-out; background: white;
aspect-ratio: 3 / 2;
position: relative;
}

.peligalerie a:hover	{ box-shadow: 0px 0px 4px rgba(0,0,0,0.7);}
.peligalerie a:hover img	{opacity: 0.5;}
.peligalerie a	img {width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s linear; display: block;}

#tinymce .peligalerie	{padding: 20px 5px; border: 1px dotted red; margin: 10px 0px;}
#tinymce .peligalerie img	{height: 100px !important; width: auto  !important;}