body {font-family: 'Roboto', sans-serif;}
a {color: #000;}
a:hover {color: #000;}
h1, h2, h3, h4, h5, h6 {font-family: 'Truculenta', sans-serif;}
h1 {font-size: 3rem;}

#clanek a, .clanekObsah a {color: #07bcf8;}
#clanek a:hover, .clanekObsah a:hover {color: #07bcf8; text-decoration: underline;}

/*
a#logo { display: inline-block; background: #ddd; padding: 5em 4em; text-align: center; border-radius: 50%; position: relative; top: -2em; margin-bottom: -8em; z-index: 100; }
*/
a#logo {
  display: block; margin: -40px auto 0 auto; width: 330px; height: 330px; 
  padding: 40px; /* padding: 5em 4em; */
  text-align: center; 
  border-radius: 50%; 
  position: relative;  
  z-index: 100;
  background: #fff;
  /*border: 30px solid #fff;*/  
}
a#logo .img-fluid {max-height: 100%; width: auto;}

#slider {position: relative; margin-top: -125px; z-index: 10;}

#externiLinky i {font-size: 1.2em; color: #07bcf8; margin-right: 5px;}
#externiLinky a {color: #666; /*font-weight: bold;*/ margin-left: 1px; background: #f8f8f8; display: inline-block; padding: 10px 15px; min-height: 45px;}
#externiLinky a:hover {text-decoration: none; background: #eee;}

#menu1 {margin-bottom: 5px;}
#menu1 a:hover {border-bottom: 1px solid #000000;}
#menu1 a.active {background: #eee;}

/*#menu2 {position: relative; z-index: 100; margin-top: -100px;}*/
/*#menu2 ul {background: #fff; border-radius: 10px; padding: 10px 30px;}*/

#menu2 a {
    position: relative; z-index: 100; margin-top: -130px;
    font-family: 'Truculenta', sans-serif; color: #000; font-weight: 400; font-size: 3.5rem; /*text-transform: uppercase;*/ 
    display: inline-block; width: 250px; height: 250px; 
    margin-left: 15px; margin-right: 15px; 
    /*padding: 0.5em 1.3em;*/
    padding: 45px 30px 30px 30px;
    text-align: center;
    border-radius: 50%;
    /*background-color: #ebf4fd;*/ background-image: url(img/kruh-vetsi.svg); background-size: 230px 230px; background-repeat: no-repeat; background-position: 50% 50%;
    background-color: #ebf4fd;
    background-color: linear-gradient(135deg, #ebf4fd 0%, #e0effc 100%);
    transition: 0.4s;
    line-height: 0.9;
}
#menu2 a span {font-size: 5rem;}
/*
#menu2 a#polozka1 {margin-top: -130px;}
#menu2 a#polozka2 {margin-top: -140px;}
#menu2 a#polozka3 {margin-top: -135px;}
*/
#menu2 a#polozka4 {padding-top: 35px;}
#menu2 a#polozka5 {padding-top: 35px;}

#menu2 a:hover {background-color: #fff; transform: scale(1.1, 1.1); color: #000; margin-top: -100px; margin-bottom: -50px; font-weight: 900;}
#menu2 a.active {background-color: #fff; transform: scale(1.1, 1.1); color: #000; margin-top: -100px; margin-bottom: -50px; font-weight: 900;}
#menu2 a.vyrazne {color: #000; font-weight: 900;}
/*
#menu2 a#polozka1:hover {background-color: #fff;} 
#menu2 a#polozka2:hover {background-color: #fff;}
#menu2 a#polozka3:hover {background-color: #fff;}
*/
/*
#menu2 a#polozka3 {background: url(img/ramecek2c.svg) no-repeat; background-size: 100% 100%; transform: rotate(3deg); transition: 0.6s;}
#menu2 a#polozka3:hover {transform: rotate(-4deg);}
*/

#obsah {position: relative; /*padding: 20px;*/ margin-top: -130px; }
#podmenu {/*background: #fff3e3;*/ background: #faf0fc; padding: 180px 30px 80px 30px;}
#podmenu ul {list-style: none; padding-right: 40px; line-height: 1;}
#podmenu ul li {margin-bottom: 20px;}
#podmenu a {color: #000; font-size: 1.5em; font-family: 'Truculenta', sans-serif; padding-bottom: 3px;}
#podmenu a:hover {background: url(img/cara3.svg) no-repeat bottom; text-decoration: none; /*background-size: 100%;*/}
#podmenu li.aktivni {background: url(img/sipka.svg) no-repeat right; padding-right: 40px;}
#obsah h2 {margin-top: 180px; font-size: 2.5rem; color: #000; font-weight: 400;}

#cesta {color: #000; /*font-family: 'Truculenta', sans-serif;*/ margin-bottom: 20px; padding-left: 40px;}
#cesta img {/*vertical-align: baseline;*/}
#cesta #sekce {/*font-size: 2rem; font-weight: 900;*/}
#cesta a {text-decoration: none;}
#cesta a:hover {text-decoration: none; border-bottom: none; background: none;}
 

/* tělovka světlá, tmavší: #fff9f1, #fff3e3 */
/*
#drobecky {background: #fff9f1; padding: 20px 30px; font-size: 1.2em;}
#drobecky i {font-size: 0.7em; margin-left: 10px; margin-right: 10px; color: #0083da;}
*/

#aktuality .datum {color: #999; font-size: 0.8rem;}
#aktuality a .card {border: none; border-radius: 0; background: linear-gradient(135deg, #f8f8f8 0%,#eee 100%);}
#aktuality a .card h3 {font-size: 1.5rem; font-weight: 900; background: url(img/fixa-modra.svg) no-repeat bottom left; padding-bottom: 10px;   }
#aktuality a .card-title {margin-bottom: 0.25rem;}
#aktuality a .card.zvyraznit {background: #ffd41c; background: linear-gradient(135deg, #ffe066 0%,#ffd41c 100%);}  /* #fffccc  */
#aktuality a:hover {text-decoration: none;}
#aktuality a:hover .card {background: #eee;}
#aktuality a:hover .card.zvyraznit {background: #fecf05;}

#vizitky .card {border: none; border-radius: 0; background: linear-gradient(135deg, #eee 0%,#f9f9f9 100%);}
#vizitky .card h3 {/*font-size: 1.5rem;*/ color: #000; font-weight: 900;}
#vizitky .card h4 {font-weight: 700;}
#vizitky .card-title {margin-bottom: 0.2rem;}
#vizitky a:hover {text-decoration: underline;}
#vizitky p {margin-bottom: 0.5rem;}
#vizitky .card.skupina1 {background: #ffd41c; background: linear-gradient(135deg, #ffe066 0%,#ffd41c 100%);}	/* vedeni */
#vizitky .card.skupina2 {background: #d2f2fd; background: linear-gradient(135deg, #e7f9ff 0%,#d2f2fd 100%);}	/* 1.stupen */
#vizitky .card.skupina3 {background: #d2f2fd; background: linear-gradient(135deg, #e7f9ff 0%,#d2f2fd 100%);}	/* 2.stupen */
#vizitky .card.skupina4 {background: #d2f2fd; background: linear-gradient(135deg, #e7f9ff 0%,#d2f2fd 100%);}	/* ms ucitele */

/* menší texty v kontaktech = více kontaktů na řádek, neřádkování jména a funkce */
#vizitky.vKontakty .card h3 {font-size: 1.3rem;}
#vizitky.vKontakty .card h4 {font-size: 1.3rem;}
#vizitky.vKontakty p {font-size: 0.9rem;}

/* MOZAIKA ČLÁNKŮ */
a.dlazdice {}
a.dlazdice h5 { font-size: 1.2rem; font-weight: normal; margin-bottom: 0; /*font-weight: 200;*/}
a.dlazdice.zvyraznit h5 {font-size: 1.4rem; font-weight: normal; /*font-weight: 200;*/}
a.dlazdice img {
  transition: 0.6s;
}
a.dlazdice:hover img {
  transform: scale(1.1);
}

/* CLANEK DETAIL */
#clanek {padding-top: 180px; padding-bottom: 70px; }
.clanekGalerie {}
.clanekObsah {padding: 30px;}
.clanekWysiwyg {margin-top: 30px; margin-bottom: 30px;}
.clanekWysiwyg img, .clanekWysiwyg iframe {max-width: 100%;}
#obsah .clanekWysiwyg h2 {margin-top: 20px;}

/* video v galerii - přes celou šířku a automatická výška */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#galerieModal .modal-content {background: rgba(0,0,0,0.9); color: #fff; border-radius: 0;}
#galerieModal .modal-header {border-bottom: none;}
#galerieModal .close {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.8);
    text-shadow: none;
    opacity: 1;
}
#galerieModal .carousel-caption {position: static;}

#clanek a.partner, .clanekObsah a.partner {color: #000; text-decoration: none;}
#clanek a.partner:hover, .clanekObsah a.partner:hover {color: #000; text-decoration: none;}

#paticka {background: #2f4c4c; color: #fff; padding: 20px;}
#paticka a {color: #fff;}

.tyrkys {/*color: #4dc9f2;*/ color: #00a6dd;}

#dokumenty h3 {/*font-size: 1.5rem; font-weight: 900;*/ background: url(img/fixa-modra.svg) no-repeat bottom left; padding-bottom: 10px;   }
#dokumenty li {padding-top: 10px; list-style: none;}

#jidelak {margin-top: 50px; background: linear-gradient(135deg, #ffe066 0%,#ffd41c 100%); padding: 20px;}
#jidelak h2 {margin-top: 0; margin-bottom: 20px; background: url(img/fixa-modra.svg) no-repeat bottom left; padding-bottom: 10px;}
#jidelak ul {padding-left: 10px;}
#jidelak li {padding-top: 10px; list-style: none; font-size: 1.2rem;}
#jidelak a {color: #000;}
#jidelak a:hover {color: #000;}

.btn-primary, a.btn-primary, #clanek a.btn-primary {background-color: #4dc9f2; border-color: #4dc9f2; color: #fff;}
.btn-primary:hover, a.btn-primary:hover, #clanek a.btn-primary:hover {text-decoration: none; background-color: #07bcf8; border-color: #07bcf8;}
#objstrava .btn-lg {font-family: 'Truculenta', sans-serif; font-size: 2rem;}
#odhlasovaniStravy {background-color: #4dc9f2; color: #fff; padding: 20px; font-size: 1.2rem; }

ol.organizace li {padding-bottom: 12px;}

#paticka a:hover {text-decoration: underline;}



@media (min-width: 1600px) {
  .row-cols-xxl-3>* {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
  }
  
  .row-cols-xxl-4>* {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%;
  }
  
}

/* Large devices (desktops, less than 1200px) + o něco větší */
@media (max-width: 1800px) {
    a#logo {
        margin-top: -85px;
    }
    h1 {margin-bottom: 30px; font-size: 2.7rem;}
    #slider {margin-top: -50px;}
    #menu2 a {
        margin-top: -100px;
        font-size: 3rem; 
        width: 200px; height: 200px; 
        padding: 40px 10px 0px 10px;
        background-size: 190px 190px;
    }
    #menu2 a span {font-size: 3.7rem;}

    #menu2 a#polozka4 {padding-top: 25px;}
    #menu2 a#polozka5 {padding-top: 25px;}
}



/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    
    #podmenu {padding: 180px 5px 80px 5px;}

    #menu2 a {
        margin-top: -90px;
        font-size: 2.2rem; 
        width: 160px; height: 160px; 
        padding: 40px 10px 0px 10px;
        background-size: 150px 150px;
    }
    #menu2 a span {font-size: 2.7rem;}

    #menu2 a#polozka4 {padding: 25px 10px 0px 10px;}
    #menu2 a#polozka5 {padding: 25px 10px 0px 10px;}

}



/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    a#logo {
        margin-top: -85px; width: 250px; height: 250px;
        padding: 30px;
    }
    h1 {margin-bottom: 30px; font-size: 2.5rem;}
    #slider {margin-top: -50px;}

    .carousel-item {max-height: 250px;}

    #menu2 ul.nav {margin-top: -80px;}
    #menu2 a {
        margin-top: 0px;
        /*margin-left: 30px; margin-right: 30px;*/
        font-size: 2.2rem; 
        width: 160px; height: 160px; 
        padding: 40px 0px 0px 0px;
        background-size: 150px 150px;
    }
    #menu2 a span {font-size: 2.7rem;}
    #menu2 a#polozka4 {padding-top: 25px;}
    #menu2 a#polozka5 {padding-top: 25px;}

    #menu2 a:hover {margin-top: 10px;}
    #menu2 a.active {margin-top: 10px;}
    
    #podmenu {padding: 180px 5px 80px 5px;}
    
}


/* Small devices (landscape phones, less than 768px) 767.98px */
@media (max-width: 768px) {
    a#logo {
      display: block; margin: 0 auto; width: auto; height: auto; 
      padding: 0px; 
      text-align: center; 
      border-radius: 0; 
      position: relative;  
      z-index: 100;
      background: transparent;
      margin-bottom: 10px;
    }
    a#logo .img-fluid {max-height: 100%; width: auto;}
    h1 {font-size: 3rem; margin-bottom: 10px;}
    #slider {margin-top: 0px;}
    
    

    #menu2 a {
        margin-top: -30px;
        font-size: 2rem; 
        width: 140px; height: 140px; 
        padding: 30px 20px 0px 20px;
        background-size: 130px 130px;
    }
    #menu2 a span {font-size: 2.5rem;}
    #menu2 a#polozka4 {padding-top: 22px;}
    #menu2 a#polozka5 {padding-top: 22px;}
    
    #externiLinky.mb-4 {margin-bottom: 0 !important;}
    #externiLinky a {padding: 10px 10px; margin-bottom: 2px;}
    
    #podmenu {padding: 180px 5px 80px 5px; font-size: 0.85rem;}
    #podmenu ul {padding-right: 20px; padding-left: 20px;}

}




/* Extra small devices (portrait phones, less than 576px) 575.98 */
@media (max-width: 576px) {
    a#logo {
      display: block; margin: 0 auto; width: 45vw; height: 45vw; 
      padding: 0px; 
      text-align: center; 
      border-radius: 0; 
      position: relative;  
      z-index: 100;
      background: transparent;
      margin-bottom: 10px;
    }
    a#logo .img-fluid {max-height: 100%; width: auto;}
    h1 {font-size: 2rem; margin-bottom: 10px;}
    #slider {margin-top: 0px;}
    
    #slider {display: none;}
    
    #menu2 ul.nav {margin-top: 0px;}

    #menu2 {text-align: center; background: url(img/slider/motiv-1b-sm.jpg) no-repeat center right; background-size: cover; padding-top: 20px; padding-bottom: 20px; }
    #menu2.menu21 { background-image: url(img/slider/motiv-1b-sm.jpg);}
    #menu2.menu22 { background-image: url(img/slider/motiv-2b-sm.jpg); background-position: 100% 30%; }
    #menu2.menu23 { background-image: url(img/slider/motiv-3b-sm.jpg); background-position: 100% 18%;}
    #menu2 a {
        /* margin-top: -10px; margin-left: 5px; margin-right: 5px; */
        display: block;
        margin: 10px 0;
        font-size: 2rem; 
        width: 140px; height: 140px; 
        
        padding: 30px 0px 0px 0px;
        background-size: 130px 130px;
        position: relative;
    }
    #menu2 a#polozka1 {right: 40px;}
    #menu2 a#polozka2 {right: 80px;}
    #menu2 a#polozka3 {right: 10px;}
    #menu2 a#polozka4 {right: 60px; padding: 20px 20px 0 20px;}
    #menu2 a#polozka5 {padding: 20px 20px 0 20px;}
    
    #menu2 a span {font-size: 2.7rem;}
    #menu2 a:hover {transform: scale(1.1, 1.1); margin-top: -20px; margin-bottom: -50px;}
    #menu2 a.active {transform: none; margin-top: 0px; margin-bottom: -50px;}
    
    #externiLinky a {padding: 10px 10px; margin-bottom: 2px;}
    
    #obsah {margin-top: 0;}
    #podmenu {padding: 35px 0px 15px 0px; font-size: 1rem;}
    #podmenu ul {padding-left: 10px; padding-right: 10px;}
    #podmenu ul li {display: inline-block; margin-left: 5px; margin-right: 5px;}
    #podmenu ul li a {background: url(img/cara3.svg) no-repeat bottom;}
    #podmenu li.aktivni {background: none; padding-right: 0px;}
    #podmenu li.aktivni a { background: url(img/cara3.svg) no-repeat bottom, url(img/fixa-modra.svg) no-repeat bottom left;}
    
    #obsah .px-5 {padding-left: 15px !important; padding-right: 15px !important;}
    #obsah h2 {margin-top: 20px;}
    #clanek {padding-top: 20px; padding-bottom: 30px;}
    .clanekObsah {padding: 0px;}
    
}


/* strankovani */
.page-link {
    width: 2rem;
    text-align: center;
    height: 2rem;
    border-radius: 50%;
    margin-left: 2px;
    margin-right: 2px;
    color: #333;
}
.page-link:hover {color: #000}
.page-item.active .page-link {
    background-color: #4dc9f2;
    border-color: #4dc9f2;   
}
.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}
.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}


#kalendarOutlookSeznam .card {border: none; border-radius: 0; background: linear-gradient(135deg, #f8f8f8 0%,#eee 100%);}
#kalendarOutlookSeznam .card h3 {font-size: 1.5rem; font-weight: 900; background: url(img/fixa-modra.svg) no-repeat bottom left; padding-bottom: 10px;}
#kalendarOutlookSeznam .card-title {margin-bottom: 0.25rem;}
#kalendarOutlookSeznam pre {font-family: 'Roboto', sans-serif; text-wrap: wrap; font-size: 1rem;}

/*ul#kalendarOutlookZobrazeni a {color: #000;}*/
#kalendarOutlookZobrazeni.nav-pills .nav-link.active, #kalendarOutlookZobrazeni.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #4dc9f2;
}
#kalendarOutlookZobrazeni.nav-pills .nav-link {
    border-radius: 50%;
    border-width: 0;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    /*line-height: 2rem;*/
    font-size: 1.5rem;
    padding: 0;
    text-align: center;
}