/* -------------------------------------------------------------------------- */
/* CSS pro web katedry informatiky 2019                                       */
/* Martin Trnecka                                                             */
/* BEM metodika, atom. pristup, castecny mobile first                         */
/* -------------------------------------------------------------------------- */

/* globalni definice a zakladni layout -------------------------------------- */
html {-webkit-text-size-adjust: none;}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: #4B4B4B;
  line-height: 1.45;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

header, main, footer {
  width: 100%;
  box-sizing: border-box;
}

main, footer {
  padding-top: 3vw;
  padding-bottom: 3vw;
  display: block;
}

h1, h2, h3, h4 {width: fit-content; font-weight: 700;}

h2 span, h3 span, h4 span {
  display: block;
  font-weight: 400;
  font-size: 1rem;
  color: gray;
}

p {padding: 0; margin: 0; margin-top: 0.5rem;}

a {
  color: #016BAB;
  text-decoration: none;
  font-weight: 500;
}

a:hover {text-decoration: underline;}
header a:hover {text-decoration: none;}

.baseline {align-items: baseline;}

/* seznam pro main a header, full-width boxy prepisuji odrazky */
main ul, main ol, .slideshow ul {padding-left: 1.5rem;}

main ul li, .slideshow ul li {
  list-style-type: none;
  position: relative;
  margin-bottom: 0.3rem;
}

main ol li {margin-bottom: 0.3rem;}

ul li span {font-weight: 400;}

main ul li::before, .slideshow ul li::before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.3rem;
  display: inline-block;
  position: absolute;
  background-color: gray;
  left: -1.5rem;
}
/* konec globalni definice a layout ----------------------------------------- */

/* navigace ----------------------------------------------------------------- */
nav, .subnav, .nav--mobile {background-color: #016BAB;}

.nav {
  margin: auto;
  display: flex;
  height: 65px;
  padding: 0;
}

.nav li {
  list-style-type: none;
  align-self: stretch;
  flex-basis: 20%;
}

.nav > li a, .nav > li span {
  display: block;
  line-height: 65px;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  font-weight: 500;
  color: white;
}

.nav > li:hover, .subnav li:hover, .nav__a--active {background-color: #00598E;}

.nav > li:hover .subnav {display: block;}


.subnav {
  position: relative;
  display: none;
  padding: 0;
  z-index: 999;
  width: 228px;
}

.subnav li a {
  text-align: left;
  line-height: normal;
  padding: 1.5vw 2vw;
  font-weight: 400;
}

.nav__a--dropdown::after {
  content: url('https://www.inf.upol.cz/img/icons/dropdown.svg');
  margin-left: 0.2rem;
  vertical-align: center;
  display: inline-block;
}

.nav--mobile {
  display: none;
  text-align: right;
}

.nav--mobile button::before {
  content: url('https://www.inf.upol.cz/img/icons/menu.svg');
  display: inline;
  margin-right: 0.5rem;
}
/* konec navigace ----------------------------------------------------------- */

/* hlavicka ----------------------------------------------------------------- */
h1 {
  display: inline-block;
  color: #4B4B4B;
  border-left: 1px solid gray;
  font-size: 1.1rem;
  padding: 20px 0 20px 25px;
  margin-left: 12px;
  font-weight: 400;
}

h1 span {font-weight: 500;}

.logo, .logo2 {
  height: 10rem;
  align-items: center;
}


.logo2 svg {
  height: 5rem;
  margin-left: 0;
  display: inline;
}

.logo svg {
  transform: scale(0.75);
  margin-left: -10px;
  display: inline;
}

.logo__menu {
  flex-grow: 1;
  text-align: right;
}

.logo__menu div {
  padding-bottom: 0.5rem;
  display: inline;
}

.logo__menu a {
  color: #707070;
  margin-right: 0.7rem;
  display: inline-block;
  font-weight: 400;
}

.eng {margin-left: 2vw;}
.eng img {margin-right: 0.25em;}

.logo__menu img {display: inline; vertical-align: middle;}

.slideshow {
  background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.85) 100%), url('https://www.inf.upol.cz/img/knihy3.jpg');
  background-position: center center;
  background-size: cover;
  width: 100%;
}

.slideshow > .container--flex {
  justify-content: flex-start;
  align-items: center;
}

.slideshow > .container--flex  > div {
  margin: 3vw 0;
}

.slideshow h2 {color: #016BAB;}

.slideshow a:hover {text-decoration: underline;}

.slideshow ul li::before {
  background-color: #00598E;
}
/* konec hlavicka ----------------------------------------------------------- */

/* paticka ------------------------------------------------------------------ */
footer {
  color: white;
  background: #016BAB url('https://www.inf.upol.cz/img/footer-lattice.svg') no-repeat;
  background-position: 75% 45px;
  margin: 0;
}

footer h2 {
  border-top: 1px solid white;
  padding-top: 1.5rem;
  display: inline-block;
}

.footer__navigation {flex-grow: 1;}
.footer__address {flex-grow: 2;}
.footer__copyright {align-self: flex-end; flex-grow: 1;}

.footer__navigation ul {
  padding-left: 0;
  margin-top: 0.5rem;
  line-height: 1.45;
  list-style-type: none;
}

.footer__navigation a, .footer__copyright a  {color: inherit;}

.footer__copyright svg {color: white; width: 1.3rem; height: 1.3rem; margin-bottom: -0.2rem; margin-right: 1rem;}
/* konec paticka ------------------------------------------------------------ */

/* tlacitka ----------------------------------------------------------------- */
.button {
  padding: 10px 20px 10px 20px;
  box-sizing: border-box;
  display: inline-block;
}

.button--blue {
  color: white;
  background-color: #016BAB;
  border: 1px solid #016BAB;
  font-weight: 500;
}

.button--blue:hover {
  color: #016BAB;
  background-color: white;
  border: 1px solid #016BAB;
  text-decoration: none;
}

.button--white {
  color: #016BAB;
  background-color: white;
  border: 1px solid #016BAB;
  font-weight: 500;
}

.button--white:hover {
  color: white;
  background-color: #016BAB;
  border: 1px solid white;
  text-decoration: none;
}

.button--full-lenght {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
}

.nav--mobile button {
  color: white;
  background-color: #016BAB;
  border: none;
  font-weight: 500;
  font-size: 1rem;
}
/* konec tlacitka ----------------------------------------------------------- */

/* kontejnery a boxy -------------------------------------------------------- */
.container--flex {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
}

.container--full-width {
  width: 1140px;
  margin: auto;
}

.container--boxes, .heading-additional {
  justify-content: space-between;
  flex-wrap: wrap;
}

.heading-additional a {
  align-self: center;
  color: #016BAB;
}

.box {
  border-left: 1px solid #E1E1E1;
  border-right: 1px solid #E1E1E1;
  border-bottom: 1px solid #E1E1E1;
  box-sizing: border-box;
  padding: 0.7rem;
}

.box--with-border {
  border: 1px solid #E1E1E1;
  box-sizing: border-box;
  padding: 0.7rem;
}

.box--no-border {
  box-sizing: border-box;
  padding: 0.7rem;
}

.box--img {
  margin-top: 20px;
}

.box--stretch {height: 100%;}
.aktuality__box {height: 225px;}

.full-box {
  border: 1px solid #016BAB;
  box-sizing: border-box;
  padding: 0.7rem 1.7rem 1.7rem 1.7rem;
  background-color: #016BAB;
  color: white;
}

.full-box .button {
  margin-top: 20px;
  display: block;
  width: fit-content;
  position: relative;
}

.box--no-border {border: none;}
.box--no-padding {padding: 0;}
.box--no-left-padding {padding-left: 0;}
.box--no-margin {margin: 0;}

.box time, .text--gray {color: #707070;}

.box h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.img-news {
  display: block;
  width: 100%;
  height: 240px;
  border: 1px solid #eee;
  box-sizing: border-box;
}

.box--with-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem;
  cursor: pointer;
}


.box--with-icon span {color: gray; font-weight: 400;}

.box--with-icon h4 {
  color: #4B4B4B;
  margin: 0 0;
}

.box-4 {flex-basis: 260px;}
.box-3 {flex-basis: 360px;}
.box-2 {flex-basis: 550px;}
.box--max {width: 100%;}
.box-left {width: 60%; padding-right: 1.7em; box-sizing: border-box;}
.box-right {width: 40%;}

.box--blue, .box--black, .box--red, .box--green, .box--yellow {
  width: 100%;
  height: 10px;
}
.box--blue {background-color: #016BAB;}
.box--black {background-color: #4B4B4B;}
.box--red {background-color: #A00F58;}
.box--green {background-color: #629032;}
.box--yellow {background-color: #E89C00;}

.box--table-scroll {
  border-top: 1px solid #E1E1E1;
  border-bottom: 1px solid #E1E1E1;
  padding: 0.7rem 0rem;
  margin: 3vw 0;
}

.full-screen h2 {margin-top: 0;}

.full-screen--blue {
  background: rgb(0,89,142);
  background: linear-gradient(90deg, rgba(0,89,142,1) 10%, rgba(1,107,171,0.8) 50%, rgba(0,89,142,1) 90%), url('https://www.inf.upol.cz/img/chodba.jpg');
  color: white;
}

.full-screen--blue-sc2 {
  background: rgb(0,89,142);
  background: linear-gradient(90deg, rgba(0,89,142,0.3) 1%, rgba(1,107,171,0.3) 50%, rgba(0,89,142,0.3) 99%), url('https://www.inf.upol.cz/img/sc2.jpg');
  color: white;
}

.full-screen--blue ul li::before {background-color: white;}
.full-screen--blue h2 span {color: white;}

.full-screen--white {
  background: rgb(225,225,225);
  background: linear-gradient(90deg, rgba(225,225,225,1) 10%, rgba(255,255,255,0.9) 50%, rgba(225,225,225,1) 90%), url('https://www.inf.upol.cz/img/knihy-detail.jpg');
}

.full-screen--white h2 {color: #016BAB;}
.full-screen--white h2 span {color: #4B4B4B;}

.full-screen {
  width: 100%;
  margin: 3vw 0;
  padding: 3vw 0;
  background-position: center center;
  background-size: cover;
}

.full-box h3 {color: white;}
.full-box a {color: white;}
.full-box ul li::before {background-color: white;}
/* konec kontejnery a boxy -------------------------------------------------- */

/* ikony -------------------------------------------------------------------- */
.icon--ai {background: url('https://www.inf.upol.cz/img/icons/ai.svg');}
.icon--teaching {background: url('https://www.inf.upol.cz/img/icons/chalkboard-teacher.svg');}
.icon--laptop {background: url('https://www.inf.upol.cz/img/icons/laptop-code.svg');}
.icon--it {background: url('https://www.inf.upol.cz/img/icons/server.svg');}
.icon--network {background: url('https://www.inf.upol.cz/img/icons/network-wired.svg');}
.icon--graph {background: url('https://www.inf.upol.cz/img/icons/chart-network.svg');}
.icon--code {background: url('https://www.inf.upol.cz/img/icons/file-code.svg');}
.icon--phd {background: url('https://www.inf.upol.cz/img/icons/chart-scatter.svg');}



.icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  opacity: 0.12;
  background-size: 100% 100%;
}

.a--link::after {
  content: url('https://www.inf.upol.cz/img/icons/link.svg');
  display: inline;
  margin-left: 0.3rem;
}
/* konec ikony -------------------------------------------------------------- */

/* lide --------------------------------------------------------------------- */
.peoples {
  flex-wrap: wrap;
  justify-content: space-between;
}

.people {
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1.2rem;
  display: flex;
  border-top: 1px solid #E1E1E1;
}

.people img {
  height: 192px;
  height: 100%;
  width: 156px;
  margin: 0;
  margin-right: 1rem;
  border: 0;
  vertical-align: middle;
}

.people__img-odkaz {display: inline;}

.people__card {
  border-collapse: collapse;
  margin-top: 1rem;
}

.people__card--email::before {
  content: url('https://www.inf.upol.cz/img/icons/email.svg');
  display: inline-block;
  width: 1.7rem;
}

.people__card--phone::before {
  content: url('https://www.inf.upol.cz/img/icons/phone.svg');
  display: inline-block;
  width: 1.7rem;
}

.people__card--home::before {
  content: url('https://www.inf.upol.cz/img/icons/house.svg');
  display: inline-block;
  width: 1.7rem;
}

.people__card span {font-weight: 400;}
.people__card tr td {padding: 0;}
.people h3 span {color: #4B4B4B;}

.people-detail__summary th {color: #016BAB; padding: 0 0.5rem; width: 20%; text-align: left; font-weight: 500;}
.people-detail__summary th.text--gray {color: gray;}
.people-detail__summary td {color: gray; padding: 0 0.5rem;}
.people-detail__summary a {color: gray; font-weight: 400;}
.people-detail__photo img {height: 300px;}
.people-detail__photo {align-self: baseline; text-align: right;}

/*AMP*/
.people-amp__photo {
  position: relative;
  height: 192px;
  width: 156px;
  margin: 0;
  margin-right: 1rem;
  border: 0;
  vertical-align: middle;
}

/* konec lide --------------------------------------------------------------- */

/* studijni programy, specializace ------------------------------------------ */
.program a {color: #016BAB;}

.program table, .people-detail__summary {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  white-space: nowrap;
}

.program table th {color: #016BAB; padding: 0 0.5rem; width: 20%; text-align: left; font-weight: 500;}
.program table td {color: gray; padding: 0 0.5rem;}

.program h3 {color: #016BAB;}
.program h4 {margin-bottom: 0;}
/* konec studijni programy, specializace ------------------------------------ */

/* drobne CSS upravy -------------------------------------------------------- */
.illustration-cluster {
   background: url('https://www.inf.upol.cz/img/illustrations/clusters.svg') no-repeat center center;
   height: 220px;
}

.illustration-graph-color {
   background: url('https://www.inf.upol.cz/img/illustrations/bar-shifted-color.svg') no-repeat center center;
   height: 220px;
}

.illustration-lattice-big {
   background: url('https://www.inf.upol.cz/img/illustrations/lattice-big.svg') no-repeat center center;
   height: 220px;
}

.illustration-plot {
   background: url('https://www.inf.upol.cz/img/illustrations/plot.svg') no-repeat center center;
   height: 220px;
}

.illustration-cluster-2 {
   background: url('https://www.inf.upol.cz/img/illustrations/clusters3.svg') no-repeat center center;
   height: 220px;
}

.shift-up-70 {margin-top: -70px;}
.shift-up-50 {margin-top: -50px;}
.shift-up-20 {margin-top: -20px;}

.hr {border-bottom: 1px solid #E1E1E1; padding-bottom: 2vw;}

.text-right {
  text-align: right;
  margin-top: 2vw;
}

.text-left {
  text-align: left;
  margin-top: 2vw;
}

.bold {font-weight: 500;}

a.box--max {text-decoration: none;}
.span--heading {font-weight: 700;}
.nav--mobile {margin: 0;}
.pro-zajemce-o-studium .box--max {margin-top: 2vw; display: block;}
h3.blue {color: #016BAB;}
h3.white {color: white;}

.o-katedre {align-items: center; justify-content: space-between;}
.o-katedre__img {align-self: flex-end;}
.aktuality .box--no-padding {margin-bottom: 2vw;}
.aktuality-detail {justify-content: space-between;}
.aktuality-detail__img { text-align: right;}
.aktuality-detail__img img {width: 90%;}
.magazin .box {margin-bottom: 2vw;}
.program__another-study a:hover {text-decoration: none;}
.oznameni {border-left: 1px solid #E1E1E1; border-right: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; margin-bottom: 20px;}
code {font-size: 1.2rem;}
.form__email--with-button {
  padding: 9px;
  width:320px;
  box-sizing: border-box;
  display: inline-block;
  margin-right: -5px;
}

.form__input {
  padding: 9px;
  width:320px;
  box-sizing: border-box;
  display: block;
  margin-bottom: 1em;
}
.text--blue {color: #016BAB;}
.o-katedre:nth-child(2) {padding: 4vw 0;}
.sprava-stranky {margin-top: 4vw;}
.aktuality__box h3 {margin-top: 0.3rem;}

.sponzori {
  justify-content: space-around;
  align-items: center;
}

.sponzori div {text-align: center; margin-bottom: 4vw;}

.sponzori a {
  display: block;
  width: 140px;
  height: 90px;
  line-height: 90px;
}
.sponzori amp-img {
  transform: translate(0%, 50%);
}

.table--klir {border-collapse: collapse; width: 100%;}

.table--klir td, .table--klir th {
  border-bottom: 1px solid #E1E1E1;
  padding: 0.3rem;
}

.table--klir th {border-top: 1px solid #E1E1E1; text-align: left;}

.sponzori img {
  display: inline;
  width: 110px;
  vertical-align: middle;
  text-align: center;
  filter: grayscale(100%);
}

.sponzori span {
  display: block;
  text-align: center;
  color: #707070;
}

.faq {margin-bottom: 2vw;}
.faq q {font-weight: 500;}
.faq q::before,.faq q::after{ content: "";}

/* docasne musi se vyresit */
.grants img {
  width: 200px;
  filter: grayscale(100%);
  padding: 1vw;
}

.grants amp-img {
  width: 200px;
  filter: grayscale(100%);
  padding: 1vw;
  position: relative;
  margin: 1vw;
}

.grants {margin: auto;}
.partneri img {
  width: 100px;
  filter: grayscale(100%);
  padding: 1vw;
}

.partneri amp-img img {}

.row {display: flex; align-items: stretch; justify-content: center;}
.col-md-3 {width: 33%; display: block;}
.col-md-4 {width: 25%; display: block;}
.col-md-3 img, .col-md-4 img {filter: grayscale(100%); display: inline; vertical-align: middle;}
.col-md-3 a, .col-md-4 a  {display: block; height: 70px;}

.show {display: block;}
.hide {display: block;}

/* konec drobne CSS upravy -------------------------------------------------- */

/* breakpointy -------------------------------------------------------------- */
@media all and (max-width: 1180px) {

  nav {display: block;}
  .nav > li a, .nav > li span {
    width: 100%;
    font-size: 95%;
  }

  .subnav {width: auto;}

  main, footer, .nav, header, .container--full-width {width: 100%;}

  .box-4, .box-3, .box-2 {
    flex-basis: 49%;
    margin-bottom: 3vw;
  }

  .img-news {width: 100%; height: auto;}
  .aktuality__box {border-top: 1px solid #E1E1E1;}
  .aktuality-detail__img img {width: 100%;}

.logo, .container--full-width {
    padding-left: 3vw;
    padding-right: 3vw;
    box-sizing: border-box;
  }
  .box--img {margin-top: 0px;}
  .nav--showed{display: block;}
}

/* vetsi tablety, mensi monitory -------------------------------------------- */
@media all and (max-width: 990px) {
  nav {display: block;}
  .nav > li a, .nav > li span {font-size: 90%;}

  .footer__navigation {display: none;}
  .people__card {margin-top: 0.5vw;}
  .people {font-size: 0.9rem;}
  .people h3.blue {font-size: 0.9rem;}
  .people img {
    width: 100px;
    height: auto;
    margin-right: 0.7rem;
  }

  .people-amp__photo {
    width: 100px;
    height: 127px;
    margin-right: 0.7rem;
  }

  .box--table-scroll {overflow-x: auto;}

  .full-box {padding: 3vw;}
  .full-box h3 {margin-top: 0;}
}

/* tablety, mobily na sirku ------------------------------------------------- */
@media all and (max-width: 750px) {

  .not-on-small {display: none;}
  body {font-size: 95%;}
  .nav > li a, .nav > li span {font-size: 85%;}
  .o-katedre {flex-direction: column-reverse;}

  .box-left {padding-right: 0;}
  .box--table-scroll {overflow-x: auto;}

  nav ul li, .box-3, .box-4, .box-2, .box-left, .box-right {flex-basis: 100%;}
  .logo__menu {display: none;}

  h1 {
    font-size: 0.9rem;
    margin-left: 10px;
  }

  .aktuality__box {height: auto;}
  .program .full-box {margin-top: 3vw;}
  .not-on-phone {display: none;}
  .break-on-phone {display: block;}
  .box--table-scroll {margin: 4vw 0;}
}

/* niz to uz opravdu nejde */
@media all and (max-width: 665px) {
  nav {display: none;}
  .nav--mobile {display: block;}
  .nav {
    display: block;
    flex-direction: column;
    height: auto;
    padding: 0;
  }
  .nav a, .nav span {line-height: 50px;}
  .subnav li a {padding: 3vw 3vw;}
  .nav--showed {display: block;}
}

/* extra male zarizeni ------------------------------------------------------ */
@media all and (max-width: 360px) {
  h1 {font-size: 0.8rem; margin-left: 0;}
  .people {padding: 3vw;}
  .people img, .people-amp__photo {display: none;}
  .logo svg {transform: scale(0.5);}
  .logo2 svg {width: 90%; margin-left: calc(2vw+10px);} 
}