@charset "UTF-8";
/* For menu icons to stay the same size when hovering */
/* The opposite of the above one. For menu icons, that are supposed to grow. */
html, body {
  margin: 0;
}

/* Due to having padding included in the width of elements */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* All text is beige if it is not set otherwise by an actual element. */
body {
  color: beige;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/* Better set titles by css than by a filter in nette due to   for example... 
   If the |noescape filter is used, then using the |upper filter cancels the first
   one.
*/
.upper_title {
  text-transform: uppercase !important;
}

h1 {
  font-size: 6vmax;
}

h2 {
  font-size: 4vmax;
}

h3 {
  font-size: 3vmax;
}

h4 {
  font-size: 2vmax;
}

h5 {
  font-size: 1.7vmax;
}

p, ol, ul {
  font-size: 1.5vmax;
}

nav ul, nav li {
  margin: 0;
}

.padding_r_small {
  padding-right: 0.5rem;
}

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

.pointer {
  cursor: pointer;
}

.headline_background {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(-1%, #00284d), to(#606060));
  background: -o-linear-gradient(top, #00284d -1%, #606060 100%);
  background: linear-gradient(to bottom, #00284d -1%, #606060 100%);
}

/* Common background is grey and it didn't look good at the transition effects. */
.headline_margin_background {
  background-color: #00284d;
}

/* Headline substitute is for pages, where the main headline seems redundant. */
.headline, .headline_substitute, .headline_substitute_center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding: 2em 2em 2em 1em;
  /*font-weight: normal;*/
}

.headline, .headline_substitute {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.headline_substitute, .headline_substitute_center {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(-1%, #00284d), to(#606060));
  background: -o-linear-gradient(top, #00284d -1%, #606060 100%);
  background: linear-gradient(to bottom, #00284d -1%, #606060 100%);
}

.headline_substitute_center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Assuming headline_substitute (flexbox) is used... Properties for flex-item. */
.headline_substitute.sesit_headline {
  letter-spacing: 4px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.headline_substitute.sesit_headline * {
  margin: 0;
}

#headline_margin {
  background-color: #00284d;
  /*height: 145px;*/
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

#headline_margin.slides {
  background-color: transparent;
}

/* This is for the titles that substitute headlines, where the headline is off,
   to have the title left-aligned with other descendants of the headline(substitute). */
.headline *, .headline_substitute * {
  margin-left: 130px;
}

/*.headline_substitute h1{
    margin-left: 130px;
}*/
/* Redundant? */
.headline.slides {
  padding: 2vmax 2rem 0 2rem;
}

/* To force all headline and substitute's descendants be beige and not bold. */
.headline *, .headline_substitute *, .headline_substitute_center * {
  color: beige;
  font-weight: normal;
}

/* Do not show the menu for small screens on the bigger ones. */
.h-small {
  display: none;
}

/* Setting margins by myself */
nav {
  /* overflow: hidden; /* Don't know why I set that, dropdowns weren't all visible. */
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  width: 100%;
  z-index: 2;
}

.nav_background {
  background: -webkit-gradient(linear, left top, left bottom, from(#00284d), color-stop(25%, #00284d));
  background: -o-linear-gradient(top, #00284d 0%, #00284d 25%);
  background: linear-gradient(to bottom, #00284d 0%, #00284d 25%);
}

.nav_small {
  display: none;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

nav li {
  list-style: none;
}

/* For aligning every item in the menu on regular pages to the right
   except for the first one. */
nav ul.nav_background li:nth-child(3) {
  margin-left: auto;
}

nav li.home a {
  /*flex-grow: 1;*/
  /*margin-right: auto;*/
  padding: 0;
}

nav a {
  color: beige;
  /* #80aaff */
  /* Bez toho se položky menu mrskají*/
  text-decoration: none;
  font-weight: bold;
}

nav a, nav i {
  border: 1px solid transparent;
}

nav a:hover {
  color: beige;
  /* border: 1px solid beige;*/
  text-decoration: underline;
}

nav i:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

.nongrow_navicon:hover {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

nav ul a, nav ul span {
  padding: 0.5em 1em;
  line-height: 2rem;
}

/* Default height of the navbar. Further this is driven by javascript in main.ja. */
#nav_menu {
  padding: 2em 32px 1.5em 48px;
}

/* Default font size of the logo zdravezvyky.cz */
#logo {
  font-size: 2em;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

#start_btn {
  border: none;
  text-decoration: none;
  text-align: center;
  width: 160px;
  height: 32px;
  background-color: rgba(245, 245, 220, 0.8);
  font-size: 1.1em;
}

#start_btn a {
  color: #330033;
}

#start_btn a:hover {
  text-decoration: none;
}

#start_btn:hover {
  background-color: beige;
  cursor: pointer;
}

/* Dropdown menus on finclub and zvyky */
.dropbtn b {
  padding-right: 0.5rem;
}

.mainbtngroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Flex and inline-flex were the only displays where both buttons
  were aligned horizontally. Otherwise there was a step between.
  Don't know why.*/
  /* padding-right: 1rem; was piling up with the padding of the navbar...*/
  font-size: 0px;
  /* To not add a whitespace between the buttons */
  margin-left: auto;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  border: solid;
  border-width: 2px;
  border-radius: 6px;
  border-color: #998;
}

.mainbtngroup:hover {
  border-color: beige;
}

.mainbtngroup a {
  border: none;
  /* Otherwise it will be a gap between the two buttons on the opening page. */
  padding: 0;
  color: #998;
}

.mainbtngroup a:hover {
  color: beige;
}

.mainbtn {
  padding: 0.5rem;
  background-color: transparent;
  font-size: 14px;
  color: #998;
  cursor: pointer;
  line-height: 18px;
  border: none;
}

.mainbtn:hover {
  color: beige;
}

.first_butt_in_group {
  border-radius: 6px 0px 0px 6px;
}

.last_butt_in_group {
  border-radius: 0px 6px 6px 0px;
}

#enterbtn {
  line-height: 18px;
  /* For having the same heignt as the menubtn. */
  width: 90px;
  font-weight: bold;
}

.glow {
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  animation: glow 3s ease-in-out infinite alternate;
}

.glow:hover {
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes glow {
  from {
    color: #998;
  }
  to {
    color: transparent;
  }
}

@keyframes glow {
  from {
    color: #998;
  }
  to {
    color: transparent;
  }
}
#menubtn {
  font-size: 18px;
}

/* Rotating caret right and back down at hovering over dropdown menus. 
       Set by onmouseover and onmousedown events and respective javascript
       functions. */
.rotate_caret_up {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #00284d;
  width: 160px;
  font-size: 1rem;
  /* Because of zero font-size in the buttongroup above. */
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
}

/* Dropdown menu content is beige with opacity 0.8 on the presentation page */
.dropdown-content.slides {
  background: rgba(0, 0, 0, 0.5);
  left: auto;
  /* top: 2.3rem; */
  right: 0;
  width: 110px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: beige;
  padding: 0px 12px 0px 12px;
  text-decoration: none;
  display: block;
  min-width: 145px;
}

/* For not messing up at hovering over zvyky and finclub - was wider and interfere
to child menu by switching it to another child menu - try to comment it. */
.dropdown-content .parent > a {
  min-width: unset;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* For clickable dropdown - currently not applied. */
.dropdown_show {
  display: block;
}

.parent {
  position: relative;
  line-height: 2rem;
}

.parent:hover > ul {
  display: block;
  position: absolute;
}

.child {
  display: none;
  background: rgba(0, 0, 0, 0.5);
  left: 100%;
  top: 0px;
}

.hamburger {
  margin-left: auto;
}

.hamburger.slides {
  display: none;
}

.hamburger a {
  padding: 0.5em 0 0.5em 0;
}

#page_level {
  font-size: 0.65em;
  /*background-color: cadetblue;*/
  background: -webkit-gradient(linear, left top, left bottom, from(#00284d), color-stop(25%, #00284d));
  background: -o-linear-gradient(top, #00284d 0%, #00284d 25%);
  background: linear-gradient(to bottom, #00284d 0%, #00284d 25%);
  display: block;
  width: 100%;
}

/*@media only screen and (max-width: 1080px) {
    h1 {
	font-size: 4rem;
    }

    h2 {
	font-size: calc(4vmax * 1.3);
    }

    h3 {
	font-size: 2rem;
    }

    h4 {
	font-size: 1.7rem;
    }

    h5 {
	font-size: 1.4rem;
    }

    p, ol, ul {
	font-size: 1rem;
    }
}*/
@media only screen and (max-width: 675px) {
  .h-small {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .h-large {
    display: none;
  }

  .nav_small {
    display: block;
  }

  nav.responsive {
    background: -webkit-gradient(linear, left top, left bottom, from(#00284d), color-stop(25%, #00284d));
    background: -o-linear-gradient(top, #00284d 0%, #00284d 25%);
    background: linear-gradient(to bottom, #00284d 0%, #00284d 25%);
    z-index: 1;
  }

  /*nav.responsive .dropdown-content.slides {
  background-color: beige;
     }*/
  nav ul {
    padding-top: 0;
  }

  /* Displays only first two li elements of the regular (nav_background) ul list */
  nav ul.nav_background li:nth-child(n+3) {
    display: none;
    width: 100%;
  }

  nav ul.slides li.nav_slides {
    display: block;
    width: auto;
  }

  nav li:not(.home) {
    /* display: none;*/
    /* width: 100%; */
  }

  .mainbtngroup {
    margin-left: unset;
    margin-right: auto;
    padding-left: 0;
    -webkit-transform: scale(100%) translate(0, 0);
    -ms-transform: scale(100%) translate(0, 0);
    transform: scale(100%) translate(0, 0);
  }

  .dropdown-content {
    left: 100%;
    /* Content right after the dropdown button... */
    top: 0;
  }

  /* Cascade dropdown on the presentation page. */
  .child {
    left: unset;
    right: 100%;
  }

  /* Background color of the menu on the opening page */
  .responsive #nav_menu.slides {
    background-color: beige;
  }

  .responsive #nav_menu.slides a, .responsive #nav_menu.slides span {
    color: #330033;
  }

  nav.responsive ul.nav_background li {
    display: inline;
    padding: 0.5rem;
  }

  /* To not slide the hamburger icon to the left after clicking on it. */
  nav.responsive ul.nav_background li.hamburger {
    padding-left: 0;
    padding-right: 0;
  }

  main {
    margin: 0;
  }

  .headline, .headline_substitute, .headline_substitute_center {
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .headline *, .headline_substitute *, .headline_substitute_center * {
    margin: 0;
  }

  #logo a {
    padding: 0;
  }

  /* If the buttons don't have the same width, dropdown menu can act strangely 
     .dropbtn {
  min-width: 100px;
     }

     /* Icons on dropbuttons are aligned to the right */
  /*
     .dropbtn i {
  float: right;
     }*/
  /* Rotating caret right and back down at hovering over dropdown menus. 
     Set by onmouseover and onmousedown events and respective javascript
     functions. */
  .rotate_caret_right {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }

  /* Vertical alingment of the dropdown menu caret ??? 
    i.drd_caret {
  line-height: 140%;
    }*/
  /* Made trouble on narrow displays (Samsung A40 - 1.5em worked). 
  Works just on opening page. On others it is set by javascript. */
  #nav_menu {
    padding: 2em;
  }

  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: calc(4vmax * 1.3);
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.7rem;
  }

  h5 {
    font-size: 1.3rem;
  }

  p, ol, ul {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 480px) {
  .child {
    left: 100%;
    right: unset;
  }

  /* Dropdown menu covers the main menu if not set. But why, if it does not
     on the other screen sizes? */
  .dropdown-content.slides {
    top: 2.2rem;
  }
}
/* For shrinking the padding around the navigation bar on small displays at 
landscape orientation */
@media only screen and (max-height: 450px) {
  #nav_menu {
    padding: 0 1em;
  }

  .h-large {
    display: none;
  }

  .h-small {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .headline.slides * {
    margin: 0;
    font-size: 3rem;
  }

  .mainbtn {
    padding: 0.25rem 0.5rem;
  }
}
@media (hover: none) {
  .touch_links a {
    text-decoration: underline;
  }

  .isDisabled {
    color: currentColor;
    /*display: inline-block;  /* For IE11/ MS Edge bug */
    pointer-events: none;
  }

  .isDisabled:active {
    text-decoration: underline;
  }
}