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

    @font-face {
    font-family:"brandon-grotesque";
    src:url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/l?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/d?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/a?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;
    }
    
    @font-face {
    font-family:"brandon-grotesque";
    src:url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/l?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/d?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/32d3ee/0000000000000000000132e0/27/a?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=i4&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:400;
    }
    
    @font-face {
    font-family:"brandon-grotesque";
    src:url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/l?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/d?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/8f4e31/0000000000000000000132e3/27/a?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=n7&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:700;
    }
    
    @font-face {
    font-family:"brandon-grotesque";
    src:url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/l?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/d?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/383ab4/0000000000000000000132e4/27/a?primer=9534f20d24153432f138f14be19fe00ed05018076afc824dd1a6f6ca76bae7c7&fvd=i7&v=3") format("opentype");
    font-display:auto;font-style:italic;font-weight:700;
    }

    @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v17/mem6YaGs126MiZpBA-UFUK0Xdc1GAK6bt6o.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

:root {

    /* Písma ve VisualBooku */

  --primary-font: 'brandon-grotesque';
  --secondary-font: 'Open Sans';
  --text-block-size: 25px;

  /* Barvy ve VisualBooku */
  
  --brand-barva: var(--purple70);
  --nadpisy-barva: var(--purple80);
  
  --sidebar-barva: var(--purple80);
  --sidebar-barva-text: var(--purple40);
  --sidebar-barva-text-aktivni: var(--purple10);
  --sidebar-barva-linky: var(--purple80);
  --sidebar-barva-nadpis: var(--green50);
  --hamburger-color: var(--green50);
  
  --h1-barva: var(--nadpisy-barva);
  --h2-barva: var(--nadpisy-barva);
  --h3-barva: var(--nadpisy-barva);
  --h4-barva: var(--green50);
  --h5-barva: var(--green50);
  
  --text-block-light-barva-pozadi: var(--white);
  --text-block-light-barva: var(--purple70);
  --text-block-dark-barva-pozadi: var(--purple70);
  --text-block-dark-barva: var(--purple10);
  
  --horni-pruh-barva-pozadi: var(--gray10);
  --horni-pruh-barva-text-maly: var(--purple70); /* + Hamburger menu */
  --horni-pruh-barva-text-velky: var(--green50);
  
  --pozadi-webu: var(--gray10);
  --text-barva: var(--purple80);
  --text-odkaz-barva: var(--green60);
  
  --dolni-pruh-barva-pozadi: var(--gray10);
  --dolni-pruh-barva-text-maly: var(--purple70);
  --dolni-pruh-barva-text-velky: var(--green50);
  
  --tabulka-horni-pruh: var(--white);
  --tabulka-nadpis: var(--purple70);
  --tabulka-linka: var(--gray20);
  --tabulka-hover: var(--gray15);
  
  --kod-block-barva-pozadi: var(--purple10);
  --kod-block-barva-okraj: var(--purple20);
  --kod-block-barva-text: var(--purple60);
  
  --image-color-avoid: #FB4B53;
  
  /* Definice barev */
  
  --green100: #001a11;
  --green90: #002c1b;
  --green80: #004326;
  --green70: #005f36;
  --green60: #008146;
  --green50: #1da358;
  --green40: #3fbe6d;
  --green30: #77db98;
  --green20: #a3f1bb;
  --green10: #e2f9e8;
  
  --purple100: #1a112a;
  --purple90: #2c1f43;
  --purple80: #442d6a;
  --purple70: #623f9b;
  --purple60: #8358c9;
  --purple50: #9f7ae3;
  --purple40: #b79af2;
  --purple30: #cfbdfa;
  --purple20: #e6daff;
  --purple10: #f5f2ff;
  
  --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: #107e49;
}

a {
  color: #107e49;
  text-decoration: underline;
}

.catalog-fp8r7r-hintStyle-hintStyle-hintStyle {
  color: #107e49;
}

.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(--secondary-font);
  font-weight: normal;
  color: var(--horni-pruh-barva-text-maly);
  opacity: 1.0;
}

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

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

[class^="catalog-"][class$="-h3-headingStyle"] {
  font-family: var(--secondary-font);
  font-weight: 600;
  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(--secondary-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);
}