.black { color: #25211F !important; color: var(--black) !important; }
.white { color: #E5E5E5 !important; color: var(--white) !important; }
.extrawhite { color: #F0F0F0 !important; color: var(--extrawhite) !important; }
.blue { color: #2F65B0 !important; color: var(--blue) !important; }
.red { color: #ED1F1F !important; color: var(--red) !important; }
.yellow { color: #F58529 !important; color: var(--yellow) !important; }
.strblue { color: #357BC2 !important; color: var(--strblue) !important; }
.elgreen { color: #00AA80 !important; color: var(--elgreen) !important; }
.itred { color: #D90000 !important; color: var(--itred) !important; }

.center { text-align: center; }
.wider { max-width: 1600px !important; }
/* live chat card */
.livecards {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.livecards li {
  display: block;
}
.livecards a {
  display: block;
}

/* navigation bar */
.top-nav {
  background-color: white;
}
.top-nav > ul {
  display: flex;
  flex-direction: column;
}
.top-nav li { 
  display: flex;
  align-items: center;
}
.top-nav li:first-child { flex-grow: 1; }
.top-nav a {
  padding: .5em;
  display: flex;
  align-items: center;
  font-size: 1.4em;
}

/* icon images */
[class^="img-"]::before, [class*=" img-"]::before, .logo-spsse::before, .logotyp-spsse::before {
  content: "";
  display: block;
  font-size: 1.75em;
  width: 1em;
  height: 1em;
  background: center / contain no-repeat transparent;
}
[class^="img-"]:hover { transform: scale(1.15); }
/* .logo-spsse::before { background-image: url("../img/spsse-logo-70x70.svg"); } */
.logo-spsse::before { background-image: url("../img/spsse-logo-262x70.svg"); width: calc(3.743 * 1.2em); height: 1.2em; }
.logotyp-spsse::before { background-image: url("../img/spsse-logo-262x70.svg"); font-size: 1.5em; width: 197px; height: 52px; }
.img-360::before { background-image: url("../img/360.svg"); }
.img-tree::before { background-image: url("../img/tree.svg"); }
.img-user-plus::before { background-image: url("../img/user-plus.svg"); }
.img-FAQ::before { background-image: url("../img/question.svg"); }
.img-smile::before { background-image: url("../img/smajlik-34x34.svg"); display: inline-block; vertical-align: middle; }

/* buttons */
.btn { 
  display: inline-block;
  padding: 1em;
  text-align: center;
}
.btn:hover {
  text-decoration: none;
  color: inherit;
}
.btn-outline { 
  border: 2px solid currentColor;
  font-weight: 600;
  min-width: 200px;
  color: inherit;
}
.btn-big {
  font-weight: 800;
  color: #F0F0F0; /*IE*/
  color: white;
  background-color: #2F65B0; /*IE*/
  background-color: var(--blue);
  padding: 1em 3em;
}
.btn-live {
  /* font-size: 1.1em; */
  color: #F0F0F0; /*IE*/
  color: white;
  background-color: #D90000; /*IE*/
  background-color: var(--itred);
  font-weight: 600;
  padding: .5em;
  margin: .25em;
}
.btn-big:hover, .btn-live:hover {
  color: #E5E5E5; /*IE*/
  color: var(--white);
  box-shadow: .2em .2em .2rem .1em var(--white);
  transform: translate(-0.1em, -0.1em);
}
.btn-outline:hover {
  text-decoration: underline;
}

/* FAQ block */
.faq dt {
  font-weight: 600;
}

/* obory info block */
.obory .str h3 {
  background-color: #357BC2; /*IE*/
  background-color: var(--strblue);
  color: white;
}
.obory .ele h3 {
  background-color: #00AA80; /*IE*/
  background-color: var(--elgreen);
  color: white;
}
.obory .it h3 {
  background-color: #D90000; /*IE*/
  background-color: var(--itred);
  color: white;
}

.obory .str footer {
  color: #357BC2; /*IE*/
  color: var(--strblue);
}
.obory .ele footer {
  color: #00AA80; /*IE*/
  color: var(--elgreen);
}
.obory .it footer {
  color: #D90000; /*IE*/
  color: var(--itred);
}
.obory dl {
  padding: 0 1em;
}
.obory ul { list-style: none; }
.obory li::before {
  content: "\2022";
  color: red;
  font-weight: 800;
  font-size: 1.2em;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
.obory .str li::before {
  color: #357BC2; /*IE*/
  color: var(--strblue);
}
.obory .ele li::before {
  color: #00AA80; /*IE*/
  color: var(--elgreen);
}
.obory .it li::before {
  color: #D90000; /*IE*/
  color: var(--itred);
}

/* PF block */
.content.bgblue { 
  background-color: #357BC2;
  background-color: var(--strblue);
  color: #E5E5E5;
  color: var(--extrawhite);
  padding-left: 3em;
  padding-right: 3em;
  box-sizing: border-box;
}
.content.bgblue a { 
  color: currentColor;
  text-decoration: underline;
}
.content.bgblue a:hover { 
  text-decoration: none;
}

/* odpočet - počítadlo času */
.countdown {
  margin: 0 auto;
  margin-top: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  max-width: 960px;
}

.countdown > div {
  flex-basis: 8.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.countdown > div span:first-of-type {
  font-size: 1em;
  text-align: center;
}

.countdown > div span:nth-child(2) {
  font-size: calc(1.2em + 5vw);
  text-align: center;
  line-height: 1.15;
}

/* mobil only features */
@media only screen and (max-width: 759.9px) {
    /* accordion roller */
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      transition: 0.4s;
    }
    .accordion.active, .accordion:hover {
      background-color: #ccc;
    }
    .accordion:after {
      content: '\002B';
      color: currentColor;
      font-weight: 800;
      float: right;
    }
    .active:after {
      content: "\2212";
    }
    .accordion + * {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
}

/* bouncing arrow */
.arrow { display: none; }
@media only screen and (min-width: 760px) {
  .arrow {
    position: relative;
    display: block;
    padding: 1em;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
    background-size: contain;
    background-origin: content-box;
    background-repeat: no-repeat;
  }
  .bounce { animation: bounce 2s infinite; }
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
  }
}