:root {
  --font-headings: Georgia, "Times New Roman", Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
  /* ==============================
   IKONY (CSS masky) + FARBY
   ============================== */
:root{
  --icon-color:#fff;     /* základná farba ikon */
  --icon-hover:#6b4b3e;  /* farba pri hover */

  --brand-gold:#869b5b;
  --brand-white:#fff;
  --brand-blue:#6b4b3e;
  --t:.5s;
  --ease:cubic-bezier(.2,.7,.2,1);

  --contact-phone-size: 21px;
  --contact-label-size: 12px;

  --gold-filter: invert(57%) sepia(8%) saturate(1032%) hue-rotate(6deg) brightness(92%) contrast(88%);
  --blue-filter: invert(57%) sepia(20%) saturate(873%) hue-rotate(169deg) brightness(88%) contrast(91%);
}

body { overflow: visible !important; margin: 0; padding: 0;   font-family: var(--font-body); letter-spacing: -0.25px;  
  background: url(../pictures/bg_sluzby.webp);
  background-size: cover;
  background-attachment: fixed;  
}
/* „opacity“ len na pozadí */
/*
body::before {
  content:"";
  position:absolute; inset:0;
  background: rgb(255 255 255 / 40%); 
  pointer-events:none;
}
*/

.mi{
  cursor: pointer;
  /* fixné rozmery obsahu ikony */
  --h: 36px;                  /* výška OBSAHU ikony (bez paddingu) */
  --pad: 0px;                 /* padding okolo obsahu */
  flex:0 0 auto;              /* DÔLEŽITÉ: žiadny flex-grow/shrink */
  height: calc(var(--h) + 2*var(--pad));
  width:auto;
  aspect-ratio: var(--ar,1/1);
  display:inline-block;
  vertical-align:middle;
  padding: var(--pad);
  box-sizing: content-box;

  background-color: var(--icon-color);
  transition: background-color .5s ease;

  /* maska iba v content boxe (padding je priesvitný) */
  -webkit-mask-origin: content-box;
  -webkit-mask-clip: content-box;
  mask-origin: content-box;
  mask-clip: content-box;

  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size: 100% 100%;
}
.mi:hover{ background-color: var(--icon-hover); }

@media (max-width:650px){
  .mi{ --h:28px; } /* obsah 28px, padding ostáva */
}

body {  
   margin : 0;   
   max-width: 100%;
   overflow-x: hidden;      
   font-size: clamp(1.201rem, 1.15rem + 0.36vw, 1.359rem);
   line-height: 1.6;                                  /* ľahšie čítanie */
   letter-spacing: 0.01em;                            /* voliteľné, jemné rozšírenie */
   color: #1A1D22;
}

body.page-index {
   color: #1A1D22;
   background-color : #fff;
}

body.page-admin {
   color: #13182a;
   background-color : #fff;
}


a                { color: #6b4b3e; text-decoration: none; } 
a:hover          { color: #93835e; text-decoration: underline; } 
h1{ font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h2{ font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);  }
h3{ font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); }
h4{   font-size: clamp(1.125rem, 0.98rem + 0.35vw, 1.25rem); /* ~18 → 20 px */  font-weight: 600; }

.header { text-align: center; }
.header a { padding: 50px 0; display: block; font-size: 48px; text-decoration: none; color: #656565; }

textarea {
   font-size: 18px;  
}

p.vsetkynovinky {
  float: right; 
}


.cube { display: inline-block; padding: 0px; margin: 0px; padding-bottom: 40px; padding-top: 20px; width: 33%; max-width: 390px; min-width: 300px; vertical-align: top; text-align: center; margin: 0 auto; } 
.icon_footer  { margin-bottom: 30px; margin-top: 20px; }

div.footer_icon { 
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  background-color: #0067ac;
  width: 50px;
  height: 50px;
  margin: 0px;
  border-radius: 50%;
  padding: 0px;
  transition: 0.6s;
}
div.footer_icon:hover {
  background-color: #ef1c25;
}
img.footer_icon { 
  margin: 14px;
  width: 22px;
  padding: 0px;
}

div.icon { display: inline-block; min-width: 190px; padding: 0px; margin: 0 auto; }
img.icon { width: 170px; padding: 0px; margin: 0px; }
img.icon_footer  { margin-bottom: 30px; }

/* STRUCTURE */
* {
  box-sizing: border-box;
}

#minilogo {
  display: inline-block;
  vertical-align:middle;
  width: 100%;
  height: 100%;
  max-width: 60px;
  padding: 0px;
  margin: 0px;
  padding-right: 15px;
  margin-top: -10px;
}

#nadpis         { padding-top: 40px; font-size: 24px; color: #fff; text-align: left; }
#novinkynadpis  { padding-top: 20px; padding-bottom: 20px; font-size: 24px; color: #0067ac; }

p.novinkatext   { padding: 0px; font-size: 18px; text-align: left;}

div.novinka        { width: 100%; height: 200px; margin-bottom: 20px; }

div.novinka2 {
  width: 100%;
  height: auto; 
}
#novinka2 {
  width: 100%;
  max-width: 1200px;  
  margin: 0px auto;    
  padding: 0px;
  text-align: center;
}

.container {
   display: flex;
   margin: 0px;
}

.section {
   padding: 0px;
   -o-transition:.5s;  -ms-transition:.5s;  -moz-transition:.5s;  -webkit-transition:.5s;  transition:.5s;
   flex: 1; /*grow*/
   border: 0px solid;
}
.section:hover {
  filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60; cursor: pointer; 
}

@media (max-width: 1000px) { /*breakpoint*/
  .container {
    flex-direction: column;
  }
}

.outer {
  position: relative;  
  padding: 0px;
  margin: 0px;
  height: auto;
  width: 100%;
}
.inner {  
  margin: 0 auto;  
  text-align: center;
  padding-top: 0px;  
  padding-bottom: 0px;  
  max-width: 1200px;
  width: 100%;
}

#kdesom1 {    
  width: 100%;
  height: 91px;
  background-color: #869b5b;    
  vertical-align: middle;  
  padding: 0px;
  margin: 0px;
}

#kdesom2 {   
  vertical-align: middle;  
  margin: 0 auto;
  padding: 0px;
  width: 100%;
  height: 100%;
  max-width: 1200px;   
}

#scroll {
    position:fixed;
    right:30px;
    bottom:30px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#869b5b; 
    text-indent:-9999px;
    display:none;

}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#fff;
}
#scroll:hover {
    background-color:#6b4b3e;
    opacity:1;
    filter:alpha(opacity=100);-moz-opacity:.100;opacity:.100;     
}

footer {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  margin: 0px auto;  
  background-repeat: repeat;
  clear: both;
  padding: 0px;
}


p.nadpis                  { font-size: 28px; color: #0067ac; font-weight: normal; }
a.novinky2                { font-size: 16pt; color: #0067ac; text-decoration: none; } 
a.novinky2:hover          { font-size: 16pt; color: #0067ac; text-decoration: none; } 
a.novinky                 { font-size: 14pt; color: #656565; text-decoration: none; text-align: justify; } 
a.novinky:hover           { font-size: 14pt; color: #0067ac; text-decoration: none; text-align: justify;  } 
a.white                   { font-size: 18px; color: #fff; text-decoration: none; }
a.white:hover             { font-size: 18px; color: #fff; text-decoration: underline; }
a.whitebig                { font-size: 24px; color: #fff; padding-top: 5px; text-decoration: none; }
a.whitebig:hover          { font-size: 24px; color: #fff; padding-top: 5px;  text-decoration: underline; }
a.nadpis                  { font-size: 18px; color: #0067ac; text-decoration: none; } 
a.nadpis:hover            { font-size: 18px; color: #0067ac; text-decoration: underline; } 
p.oznam                   { font-size: 17px; color: #0067ac; } 
input.text                { font-size: 15px; color: #0067ac; text-align: center; border: 1px solid #0067ac; background-color: #ffffff; height:40px; min-width: 200px; cursor: pointer; } 
input.text_hover          { font-size: 15px; color: #0067ac; text-align: center; border: 1px solid #0067ac; background-color: #fbf5f7; height:40px; min-width: 200px; cursor: pointer; } 


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1050px or less */
@media screen and (max-width: 1050px) {

.section {  
  margin-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
}

}

/* for 650px or less */
@media screen and (max-width: 650px) {
  
a.kdesom {
  display: none;
}

.prihovor_img{
  width: 100%;
  min-width: 150px;
  max-width: none;
}

.inner {
  padding-bottom: 20px;
}

.icon_footer  { 
  margin-bottom: 0px;
  margin-top: 20px;
  padding: 0px;
}

.section {
  min-width: 300px;
  width: 100%;
}

.cube { padding-bottom: 20px; padding-top: 0px; }

}

/* for 480px or less */
@media screen and (max-width: 480px) {  

a.kdesom {
  display: none;
}


.section {
  margin: 0px;

}

  #minilogo {
     display: inline-block;
     vertical-align:middle;
     width: 100%;
     max-width: 45px;
     margin-left: 18px;
     padding-right: 10px;
  }  

div.icon { min-width: 300px; padding: 0px; margin: 0 auto; }
img.icon { width: 170px; padding: 0px; margin: 0px; }

}

#text {
  margin-bottom: 0px;
}

p.textwhite               { color: #ffffff; }
p.nadpiswhite             { font-size: 15px; color: #ffffff; }
p.copyright               { font-size: 15px; color: #ffffff; }

select {
height: 36px;
padding:0px;
border-radius: 6px; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border: 1px solid #03325E;

   margin: 0;
    background: #e5eaee;
    color:#03325e;
        outline:none;
    display: inline-block;

}


td.tip                    { height: 22px; background-color:#ffcc33;}
td.gray                   { height: 22px; background-color:#dddddd;}
a.oznam                   { font-size: 15px; color: #21252a; }
a.oznam:hover             { font-size: 15px; color: #03325e; }
a.selected                { font-size: 15px; color: #ed1c24; font-weight: bold; }
a.selected:hover          { text-decoration: underline; font-size: 15px; color: #03325e; }
a.notselected             { text-decoration: none; font-size: 15px; color: #03325e; }
a.notselected:hover       { text-decoration: underline; font-size: 15px; color: #03325e; }
table.aktivny             { cursor: pointer; }
a.aktivny                 { color: #21252a; font-size: 15px; text-decoration: none; }
a.aktivny:hover           { color: #656565; font-size: 15px; text-decoration: none; }
p.text                    { font-size: 15px; color: #656565; }
textarea                  { font-size: 15px; color: #000000; }
img.hlavna                { border-color:#21252a;  border-style:dashed;  border-width:5px; }
p.zlta15                  { font-size: 15px; color: #03325e; }
p.modra15                 { font-size: 15px; color: #03325e; }
a.modra                   { font-size: 18px; }