@import url('https://fonts.googleapis.com/css?family=Rajdhani:400,600,700|Roboto:400,400i,700&display=swap&subset=latin-ext');

:root {

    /* Písma ve VisualBooku */

  --primary-font: 'Rajdhani';
  --secondary-font: 'Roboto';
  --text-block-size: 25px;

  /* Barvy ve VisualBooku */
  
  --brand-barva: #3e4360;
  --nadpisy-barva: #3e4360;
  
  --sidebar-barva: #3e4360;
  --sidebar-barva-text: #a9b3d3;
  --sidebar-barva-text-aktivni: white;
  --sidebar-barva-linky: #3e4360;
  --sidebar-barva-nadpis: #3e4360;
  --hamburger-color: #a9b3d3;
  
  --h1-barva: var(--nadpisy-barva);
  --h2-barva: var(--nadpisy-barva);
  --h3-barva: var(--nadpisy-barva);
  --h4-barva: var(--nadpisy-barva);
  --h5-barva: var(--nadpisy-barva);
  
  --text-block-light-barva-pozadi: var(--white);
  --text-block-light-barva: var(--gray70);
  --text-block-dark-barva-pozadi: var(--gray70);
  --text-block-dark-barva: var(--gray10);
  
  --horni-pruh-barva-pozadi: var(--gray10);
  --horni-pruh-barva-text-maly: #3e4360; /* + Hamburger menu */
  --horni-pruh-barva-text-velky: #f8b334;
  
  --pozadi-webu: var(--gray10);
  --text-barva: #3e4360;
  --text-odkaz-barva: #f8b334;
  
  --dolni-pruh-barva-pozadi: var(--gray10);
  --dolni-pruh-barva-text-maly: #3e4360;
  --dolni-pruh-barva-text-velky: #f8b334;
  
  --tabulka-horni-pruh: var(--white);
  --tabulka-nadpis: #f8b334;
  --tabulka-linka: var(--gray20);
  --tabulka-hover: var(--gray15);
  
  --kod-block-barva-pozadi: var(--gray10);
  --kod-block-barva-okraj: var(--gray20);
  --kod-block-barva-text: var(--gray60);
  
  --image-color-avoid: #FB4B53;
  
  /* Definice barev */
  
  --gray100: #161616;
  --gray90: #262626;
  --gray80: #393939;
  --gray70: #525252;
  --gray60: #6F6F6F;
  --gray50: #8D8D8D;
  --gray40: #A8A8A8;
  --gray30: #C6C6C6;
  --gray20: #E0E0E0;
  --gray15: #eeeeee;
  --gray10: #F4F4F4;
  
  --white: #ffffff;
  --black: #000000;
  }

    .primary-text-block-big {
        font-family: var(--primary-font);
        color: var(--text-block-dark-barva);
        font-size: 130px;
        margin-left: 15px;
      }
      
      .primary-text-block {
        font-family: var(--primary-font);
        color: var(--text-block-dark-barva);
        font-size: var(--text-block-size);
        margin-left: 15px;
        text-transform: uppercase;
      }
      
      .secondary-text-block-big {
        font-family: var(--secondary-font);
        color: var(--text-block-dark-barva);
        font-size: 130px;
        margin-left: 15px;
      }
      
      .secondary-text-block {
        font-family: var(--secondary-font);
        color: var(--text-block-dark-barva);
        font-size: var(--text-block-size);
        margin-left: 15px;
      }
      
      .primary-h1 {
        font-family: var(--primary-font);
        margin: 15px;
        font-size: var(--text-block-size);
        text-transform: uppercase;
      }
      
      .secondary-h1 {
        font-family: var(--secondary-font);
        margin: 15px;
        font-size: var(--text-block-size);
      }
      
      .primary-p {
        font-family: var(--primary-font);
        margin: 15px;
        font-size: var(--text-block-size);
        color: var(--text-block-light-barva);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        letter-spacing: 1px;
      }
      
      .secondary-p {
        font-family: var(--secondary-font);
        margin: 15px;
        font-size: var(--text-block-size);
        color: var(--text-block-light-barva);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        letter-spacing: 1px;
      }
      
      .regular {
        font-style: normal;
        font-weight: normal;
      }
      
      .regular-italic {
        font-style: italic;
        font-weight: normal;
      }
      
      .semibold {
        font-style: normal;
        font-weight: 600;
      }
      
      .semibold-italic {
        font-style: italic;
        font-weight: 600;
      }
      
      .bold {
        font-style: normal;
        font-weight: bold;
      }
      
      .bold-italic {
        font-style: italic;
        font-weight: bold;
      }
      
      .uppercase {
        text-transform: uppercase;
      }
      
      body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
      }

.grid-XL { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}

.grid-XL img {
  max-width: 100%;
  font-size: 16px;
}

.grid-L { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}

.grid-L img {
  max-width: 100%;
}

.grid-M { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  font-size: 16px;
}

.grid-M img {
  max-width: 100%;
}

.grid-S { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  font-size: 15px;
  text-align:center;
}

.grid-XS { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  align-items: stretch;
  font-size: 15px;
  text-align:center;
}

.grid-S img {
  max-width: 100%;
}

div.solo-image {
  float: left;
}

div.solo-image img {
  width: 100%;
}

.image-avoid {
  border-top: var(--image-color-avoid) solid 4px;
  color: var(--image-color-avoid);
}

div.navigace {
  background: transparent;
  border: none;
  font-family: var(--secondary-font);
  font-size: 19px;
  line-height: 2;
  color: #f8b334;
}

a {
  color: #f8b334;
  text-decoration: underline;
}

.catalog-fp8r7r-hintStyle-hintStyle-hintStyle {
  color: #f8b334;
}

.catalog-pyf5f-Html-Html {
  background: transparent;
  border: none;
  font-family: var(--secondary-font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-barva);
}

.catalog-1hv7whf-AppLayout-AppLayout {
  color: var(--hamburger-color);
}

/* Odrážky */
.catalog-1p7s4r-ul-Styled {
  color: var(--text-barva);
}

/* DO NOT popisky */
[class^="catalog-"][class$="-Image-Image"] {
  color: var(--text-barva);
}

/* Barvy popisky */
.catalog-kvcxn5-Color-Color {
  color: var(--text-barva);
}

/* Barvy HEX popisky */
.catalog-12qq0nz-Color-Color {
  color: var(--text-barva);
  font-weight: bold;
}

[class^="catalog-"][class$="Code"] {
  background-color: var(--kod-block-barva-pozadi);
  border-color: var(--kod-block-barva-okraj);
}

.catalog-uhgdsm-PageHeader-PageHeader {
  font-family: var(--primary-font);
  font-weight: bold;
  color: var(--horni-pruh-barva-text-velky);
  text-transform: uppercase;
  line-height: 1.7em;
}

.catalog-3gwipn-PageHeader-PageHeader {
  font-family: var(--primary-font);
  font-weight: 600;
  color: var(--horni-pruh-barva-text-maly);
  opacity: 1.0;
}

[class^="catalog-"][class$="-h1-headingStyle"] {
  font-family: var(--primary-font);
  font-weight: 700;
  color: var(--h1-barva);
}

[class^="catalog-"][class$="-h2-headingStyle"] {
  font-family: var(--primary-font);
  font-weight: 600;
  color: var(--h2-barva);
}

[class^="catalog-"][class$="-h3-headingStyle"] {
  font-family: var(--primary-font);
  font-weight: 700;
  color: var(--h3-barva);
}

[class^="catalog-"][class$="-h4-headingStyle"] {
  font-family: var(--secondary-font);
  font-weight: 600;
  color: var(--h4-barva);
}

[class^="catalog-"][class$="-h5-headingStyle"] {
  font-family: var(--primary-font);
  font-weight: 600;
  color: var(--h5-barva);
}

/* Textace obecna */
.catalog-2jo9q8-p-Styled {
  line-height: 1.5em;
  max-width: 690px;
  color: var(--text-barva);
  font-size: 17px;
}

/* Navigace */
.catalog-1o7e4u9-linkStyle {
  color: var(--text-odkaz-barva);
}

.catalog-144rlyb-NavigationBar-NavigationBar {
  font-family: var(--secondary-font);
  font-weight: normal;
  color: var(--dolni-pruh-barva-text-maly);
}

.catalog-1mmqys6-NavigationBar-NavigationBar {
  font-family: var(--secondary-font);
  font-weight: 700;
  color: var(--horni-pruh-barva-text-velky);
}

/* Powered by... */
.catalog-h9zh9c-Menu-Menu {
  display: none;
}

/* Kotvy */
.catalog-1peqbsk-HeadingLink {
  display: none;
}

/* Tabulka linky */
.catalog-1149i8c-Table-Table tr {
  border-color: var(--tabulka-linka);
}

/* Tabulka nadpisy */
[class^="catalog-"][class$="-HeadingCell-HeadingCell"] {
  color: var(--tabulka-nadpis);
  background-color: var(--tabulka-horni-pruh);
  padding-left: 18px;
  height: 24px;
  vertical-align: middle;
}

/* Tabulka texty */
[class^="catalog-"][class$="-Cell-Cell"] {
  padding-left: 18px;
  height: 28px;
  vertical-align: middle;
}

tr:hover {
  background-color: var(--tabulka-hover);
}