/* CSS pro daný web
 * Verze 3.9.2019
 * dokumentace na:
 * https://docs.google.com/spreadsheets/d/1HV7JUECJavTNSYOburjemgWhfErRqC8b9kI4I-YvLwg/edit#gid=0
 */

/* Základní barevnost webu - staci vzdy hromadne nahradit ctrl+h
 * Primární: 173d7b
 * Sekundární: 3a6cab
 * Background hlavičky, doplňková: fff
 * Inverzní text: d4ebfe (inverzní k primární barvě)
 */

/* Barevnost */
header {
  background-image: url('../pics/header.jpg');
  background-color: #fff; /* pozadí pod obrázkem hlavičky - musí být čitelný text a loga !!! */
  background-size: auto 300px;
  background-position: calc(50% + 400px) calc(50% + 60px); /* vypočítané dle použitého obrázku */
}
#titulka header {
  background-size: auto 444px;
  background-position: calc(50% + 400px) -70%; /* vypočítané dle použitého obrázku */
}
@media screen and (max-width: 39.9375em) {
  header h1, #titulka header h1, header h2, #titulka header h2, header h3, #titulka header h3 {color: #173d7b!important; /* primary */ }
  header {background-color: #fff!important; }
}
header h1, header h2 {color: #173d7b; /* primary */ }
#titulka header h1 { color: #173d7b; /* primary */ }
#titulka header h2 { color: #173d7b; /* primary */ }
#titulka header h3 { color: #173d7b; /* primary */ }
nav { background: #3a6cab; /* secondary */ }
nav .menu a { background-color: #3a6cab; /* secondary */ }
nav .menu a:hover, nav a.active, nav .menu .is-active a { background-color: #173d7b; /* primary */ }
#tiraz {
  background-color: #173d7b; /* primary */
  color: #d4ebfe; /* inverzní text */
}
#tiraz a { color: #d4ebfe; /* inverzní text */ }
#tiraz h3 { color: #d4ebfe; /* inverzní text */ }
a.toc-item, span.toc-item { color: #fff; background-color: rgba(58, 108, 171, 0.95); /* secondary v rgba, pro menu s tmavým písmem na šedém pozadí použijeme např. color: #333333; background-color: rgba(206, 209, 215, 0.95); */ }
a.toc-item.active { background-color: #173d7b; /* primary */ }
a.toc-item:hover { background-color: #173d7b; /* primary */ }
.toc_kapitola .cap-num { color: #173d7b; /* primary */ }
.toc_kapitola a.toc-item:hover { background-color: #173d7b; /* primary */ }
.separated::before, .toc-section.toc-section.toc-section h2 { background-color: #173d7b; /* primary */ }
h2 {color: #3a6cab} /* secondary */
.t1, .t1 strong, .t1 em {background: #173d7b!important; color: #fafafa;} /* primary */
.t2, .t2 strong, .t2 em {background: #3a6cab!important; color: #fafafa;} /* secondary */
.t3, .t3 strong, .t3 em {background: #fff!important; color: #333333;} /* doplnkova */
sup a, sup a:visited { color: #3a6cab!important; } /* secondary */
sup a:hover { color: #fff!important; }
/* KONEC - Barevnost */

/* ************************** */
/* Barevnost vysouvacího menu */
nav .submenu::before {	border-top-color: #3a6cab; /* kontrastni - tečky*/ }
/* vysouvací menu tmavé */
/*
nav .submenu { background-color: #767676 !important; }
nav .submenu a { background-color: #767676 !important; color: #eee !important; }
nav .submenu a:hover {	background-color: #3a6cab !important; color: #fff !important; }
*/
/* vysouvací menu dle barevnosti webu */
/*
nav .submenu { background-color: #173d7b !important; }
nav .submenu a {	background-color: #173d7b !important; color: #3a6cab !important; }
nav .submenu a:hover {	color: #fff !important; }
*/

/*  *********
 *  Vlastní styly
 *  ********* */
#tiraz {
	min-height: 350px;
}

a.clickbox.bez, a.clickbox.bez:hover {
  background-color: #fffbea;
  background-size: 2.214rem;
  border-color: #f9e9c9;
  color: #DF9F03;
}
a.clickbox.bez:hover {
  background-color: #fdfade;
  border-color: #f9e5b0;
} 
a.clickbox.bez::before {
  display: none;
}

#videonavod::cue {
    background-color: transparent;
    color: #FFF;
    font-size: 32px;
    text-shadow: 2px 2px 4px #333;
}
@media screen and (max-width: 39.9375em) {
  #videonavod::cue {
    font-size: 20px;
  }
}

.toc a.toc-item .cap-num, .toc span.toc-item .cap-num {
  font-size: 35px;
  margin: -2px 15px -45px 15px;
  width: 50px;
  text-align: left;
  letter-spacing: 0;
}

.inspirace {
  margin: 3rem 0;
}
.inspirace > .column {
  margin-bottom: 2.14286rem;  /* 2x1.07143rem */
}
.inspirace a {
  display: block;
  text-decoration: none !important;
  border: 1px solid #eaeaea;
  padding: 1.5rem;
  background-color: #fafafa;
}
.inspirace a:hover, .inspirace a:focus {
  background-color: #f0f0f0;
}
.inspirace a .foto {
  border-radius: 50%;
  border: 1px solid #cacaca;
  width: 90px;
  height: 90px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
}
.inspirace a .nadpis {
  font-size: 1.4rem;
  display: block;
}

.inspirace a .jmeno {
  display: block;
  color: #777;
  font-size: 1rem;
  margin-top: .5rem;
}

.inspirace a .fakulta {
  font-size: 13px;
  display: inline-block;
  padding: 0 .5rem 0 .5rem;
  /*color: #fff;*/
  font-weight: 400;
  margin-bottom: 4px;
  background-color: #f0f0f0;
}

.inspirace a .datum {
display: block;
color: #777;
font-size: 1rem;
margin-top: .5rem;
text-align: right;
}

.reveal .foto img {
  border: 1px solid #cacaca;
  padding: 3px;
  display: block;
  margin-bottom: 1rem;
}
.reveal span.foto {
  border-radius: 50%;
  border: 1px solid #cacaca;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
  margin-right: 1rem;
}
h2.fakulta {
  margin-top: 5rem;
}
h2.fakulta > img, .nav_fakulty img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-right: 1rem;
}
nav.nav_fakulty {
  background: none;
  margin-bottom: 8rem;
}
nav.nav_fakulty > a {
  margin-bottom: 1rem;
  display: inline-block;
}


.fakulta.lf { color: #f01928; }
.fakulta.ff { color: #4bc8ff; }
.fakulta.prf { color: #9100dc; }
.fakulta.fss { color: #008c78; }
.fakulta.prif { color: #00af3f; }
.fakulta.fi { color: #000; background-color: rgba(242, 212, 92, .3) !important;}
.fakulta.pdf { color: #ff7300; }
.fakulta.fsps { color: #5ac8af; }
.fakulta.esf { color: #b9006e; }

.toc a.toc-item .cap-num.cap-icon i {
    font-size: 38px;
}

/* kolotoč odstranění kolize s unicss a další css*/
#titulka nav {
  margin-top: 0;
}
.orbit-slide > div {
  padding: 2rem 5rem;
  text-align: left;
  /*color: #fff;*/
}
.orbit-slide h3.nadpis-sekce {
  /*color: #fff;*/
  /*font-size: 1.9rem;*/
}
.orbit .orbit-controls button {
  background: none;
  color: #002776;
}
/* kolotoč odstranění kolize s unicss - konec */

#titulka h2.nadpis-sekce {
  font-size: 1.9rem;
  margin-top: 6rem;
}

main div > h2 {
  margin-top: 4rem;
}

main div > h3 {
  margin-top: 3rem;
}

main .orbit-slide div > h3 {
  margin-top: 0;
}

main div > h4 {
  margin-top: 2rem;
}

video#videonavod:focus {
    outline: none;
}


.accordion.faq .accordion-title {
  font-size: 1.21428rem;
  line-height: 1.5;
  padding: 1.5rem 3.7rem 1.5rem 2rem;
}

.accordion.faq .accordion-content {
  font-size: 1.07142rem;
  padding: 1rem 2.2rem 2rem 2.2rem;
}
.responsive-embed.widescreen + h2 {
  margin-top: 4rem;
}
h2 + .inspirace.inspirace-uzka {
  margin-top: 1.5rem;
}

.accordion-content > ul { margin-bottom: 1rem; }


#titulka a.toc-item, #titulka span.toc-item {
    min-height: 3.571rem;
}
#titulka .toc-section h2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navod figure img { border: 1px solid #f5f5f5; }




     /* obecný prvek štítku, který se používá k textu položky. 
 * Lokálním css je povoleno měnit barvu podkladu a písma případně vertikální zarovnání.
 * Štítek by měl být umístěný vedle textu základním písmem (1rem)*/

.stitek-inline {
	color: #666;
	background-color: #eee;
	padding: 1px 6px;
	font-size: .8571428rem; /* 12px */
	border-radius: 12px;
	vertical-align: 5%;
	display: inline-block;
	min-width: 22px;
	min-height: 21px;
	text-align: center;
	line-height: 1.6;
	font-weight: 600;
   
}
.stitek-inline.si-medium {
	font-size: .9285714rem;
	min-height: 28px;
	min-width: 29px;
	border-radius: 15px;
	line-height: 2;
}

.stitek-inline.si-large {
	font-size: 1em;
	min-height: 34px;
	min-width: 35px;
	border-radius: 17px;
	padding: 2px 11px;
	line-height: 2.2;
}

.stitek-inline.si-large i[class^="isi-"] {
	margin-left: -8px;
	vertical-align: text-top;
	margin-right: .5rem;
	font-size: 1.6rem;
	vertical-align: -17%;
}

.stitek-inline.si-text {
	padding-left: 12px;
	padding-right: 12px;
	font-weight: 400;
}

.stitek-inline.si-medium {
	padding-left: 8px;
	padding-right: 8px;
}

.stitek-inline.si-text.si-medium {
	padding-left: 15px;
	padding-right: 15px;
}

.stitek-inline.si-text.si-large {
        padding-left: 20px;
        padding-right: 20px;
}

.stitek-inline.si-novinky {
	background-color: #f48500;
	color: #fff;
	font-weight: 600;
}

.stitek-inline.si-novinky.si-text {
	font-weight: 600;
	text-transform: uppercase;
}

.stitek-inline.si-tmave-bg {
	background-color: #287bbf;
	color: #fff;
}

.stitek-inline.si-svetle-bg {
        background-color: #e6f7ff;
        color: #12567c;
}

.stitek-inline.si-outline {
        background-color: transparent;
	border: 1px solid #ddd;
	padding: 0 6px;
}

.stitek-inline.si-outline i[class^="isi-"] {
	color: #002776;
}

.stitek-inline.si-large.si-outline {
	min-height: 34px;
	min-width: 34px;
	padding-top: 1px;
	padding-bottom: 1px;	
}
      
      
      .border-kruh {
	border-radius: 50%;
}
      
      /**** vlastni styly ******/
      .stitek-inline { margin: 0.2rem;}
      .stitek-inline:hover { cursor: pointer; background-color: #eee;}
      .stitek-inline.si-tmave-bg:hover { cursor: pointer; background-color: #12567c;}
      .faculty-icon {
          opacity: 0.3;
          margin: 0.3rem;
      }
      .faculty-icon:hover {
          cursor: pointer; opacity: 0.9;
      }
      .faculty-icon.active {
          opacity: 1;
      }
      
     .hidden {display: none}

#filters #faculties {
  margin: 1rem -.5rem;
}     
#filters #faculties a {
  padding: 1rem .5rem;
  margin: 0;
  display: inline-block;
}
#filters #faculties a.faculties-all {
  border-right: 1px solid #cacaca;
  padding-right: 1rem;
  margin-right: .5rem;
}
@media screen and (max-width: 47.9375em) {
  #filters #faculties a img {
    width: 50px;
  }
}
#filters #faculties a.active img {
  border-bottom: 4px solid #777;
}
/* Medium and up */
@media screen and (min-width: 48em) {
  #filters #faculties {
    display: flex;
  }     
  #filters #faculties a {
    flex: 1 0 auto;
  }
 #filters #faculties a img {
  max-width: 100%;
} 
}
.nadpisek {
  color: #5a5a5a;
  font-size: .85714rem;
  text-transform: uppercase;
  font-weight: 500;
}