.barvy {
    color: #262526;
    color: #404040;
    color:#8C8979;
    color:#F2F2F2;
    color:#d50000;

    color: #41ad49; /* chybová hláška zelená */
    color: #e74c3c; /* chybová hláška červená */
    color: #f7cfca; /* chybová hláška světle-červená */
}

/* dává se jako základ do stylů */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Cookies */

/* *******************************************
reusable
********************************************** */

/* Tlačítka a inputy */
input[type="text"] {
    font-family: pismo_body;    
    padding: 10px;
    outline: none;
    border: 1px solid #404040;
    color: #404040;
    font-size: 16px;
}

textarea {
    font-family: pismo_body;    
    padding: 10px;
    outline: none;
    border: 1px solid #404040;
    color: #404040;
    font-size: 16px;
    width: 100%;
}


/* FORM FIELD */
/* Tam kde je povinné pole pro vyplnění přidáme hvězdičku: */
.form-field-mandatory label:after {
    content: "*";
    color: #e74c3c;
    font-size: 25px;
}


/* Check-box */
/* The containerCheckBox */
.containerCheckBox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font-family: pismo_body;   
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .containerCheckBox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #404040;
  }
  
  /* On mouse-over, add a grey background color */
  .containerCheckBox:hover input ~ .checkmark {
    border: 1px solid #404040;
  }
  
  /* When the checkbox is checked, add a blue background */
  .containerCheckBox input:checked ~ .checkmark {
    border: 0px solid #404040;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .containerCheckBox input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .containerCheckBox .checkmark:after {
    left: 9px;
    top: 0px;
    width: 5px;
    height: 20px;
    border: solid #404040;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

/* Konec - Check box */





/* A nyní CSS pro políčka */
.form-field input {
    font-family: pismo_body;    
    padding: 10px;
    border: 1px solid #404040;
    color: #404040;
    font-size: 16px;
    padding-right: 40px;
}

.form-field input[type="submit"] {
    font-family: pismo_menu;   
    background-color: #262526;
    border: 0px;
    padding: 3px 10px 3px 10px;
    text-transform: uppercase;  /* udělá velká písmena */
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    text-shadow: 1px 2px 3px #000000;
    margin: 5px 2px 5px 0px;
}

.form-field input[type="submit"]:disabled {
    background-color: #404040; ;
    color:#8C8979;
    cursor: not-allowed;
}


.form-field input[type="file"] {
    font-family: pismo_menu;   
    background-color: #262526;
    border: 0px;
    padding: 3px 10px 3px 10px;
    text-transform: uppercase;  /* udělá velká písmena */
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    text-shadow: 1px 2px 3px #000000;
    margin: 5px 2px 5px 0px;
}

.form-field.error input, .form-field.error textarea {
    border: 1px solid #e74c3c;
    background: url("../images/icons/check_false.svg") no-repeat 99% 50%;
    background-size: 30px;
}

.form-field.success input, .form-field.success textarea {
    border: 1px solid #41ad49;    
    background: url("../images/icons/check_true.svg") no-repeat 99% 50%;
    background-size: 30px;
}

.form-field small {
    color: #e74c3c;
    display: block;
    font-weight: bold;
}



/* Chybové a informační zprávy */
.my-notify {
    display: none;
}

.my-notify.success, .my-notify.error {
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}

.my-notify-tabulka-dva-sloupce {
    display: grid;
    grid-template-columns: 6% 94%; 
    max-width: 100%;
    align-items: center;
}

.my-notify.success i, .my-notify.error i {
    content: url("../images/icons/check_true.svg");
    max-width: 30px;
    max-height: 30px;
    padding-top: 3px;
    padding-left: 5px;
}

.my-notify.success i {
    content: url("../images/icons/check_true.svg");
}

.my-notify.error i {
    content: url("../images/icons/check_false.svg");
}

.my-notify.success {
    color: #41ad49;
    background-color: #DFF2BF;    
    border: 1px solid #41ad49;    
}

.my-notify.error {
    color: #e74c3c;
    background-color: #f7cfca;
    border: 1px solid #e74c3c;
}

/* KONEC - Chybové a informační zprávy */


/* Odkazy */
a:link,
a:visited {
    text-decoration: none;
}

main a:link,
main a:visited {
    font-family: pismo_body;  
    color: #404040;
    font-size: 15px;
}

main a:hover,
main a:active {
    color: #d50000;
}

/* BUTTONS   */
.btn:link,
.btn:visited {
    display: inline-block;
    /* inline-block: má marginy a paddingy po všech stranách, má výšku i šířku. A to nejdůležitější: nechá elementy vedle sebe */
    background-color: #262526;;
    padding: 3px 10px 3px 20px;
    font-size: 18px;
    font-family: pismo_menu;   
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 2px 3px #262526;
    margin: 5px 2px 5px 2px;
}

/* Neaktivní tlačítko */
.btn-noactive {
    display: inline-block;
    /* inline-block: má marginy a paddingy po všech stranách, má výšku i šířku. A to nejdůležitější: nechá elementy vedle sebe */
    background-color: #8C8979;
    padding: 3px 10px 3px 10px;
    font-size: 18px;
    font-family: pismo_menu;   
    color: #F2F2F2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px 5px 2px;
}

.btn:hover,
.btn:active {
    background: #d50000;
    transition: 0.5s;
    /* přechod v sekundách */
}

.btn span:after {
    content: " \00bb";
    width: 20px;
    color: #262526;
}

.btn:hover span:after {
    content: " \00bb";
    color: #ffffff;
    transition: 0.5s;
}

.btn-silver:link,
.btn-silver:visited {
    display: inline-block;
    /* inline-block: má marginy a paddingy po všech stranách, má výšku i šířku. A to nejdůležitější: nechá elementy vedle sebe */
    background-color: #8C8979;
    padding: 3px 10px 3px 20px;
    font-size: 18px;
    font-family: pismo_menu;   
    color: #F2F2F2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    margin: 5px 0px 5px 0px;
}

.btn-silver:hover,
.btn-silver:active {
    background: #404040;
    transition: 0.5s;
    /* přechod v sekundách */
}

.btn-silver span:after {
    content: " \00bb";
    width: 20px;
    color: #8C8979;
}

.btn-silver:hover span:after {
    content: " \00bb";
    color: #F2F2F2;
    transition: 0.5s;
}


/* Next button */
.next_button {
    display: none;
    border: 0;
    cursor: pointer;
    background-color: #000000;
    padding: 3px 10px 3px 10px;
    font-size: 18px;
    font-family: pismo_menu;   
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 2px 3px #000000;
    margin: 0px 0px 5px 0px;
}

.next_button:hover {
    background: #d50000;
    transition: 0.5s;
    /* přechod v sekundách */
}

/* SELECT menu */
select {
    max-width: 100%;
    cursor: pointer;
    font-size: 15px;
    text-transform: uppercase;
    border: 1px solid #808080;
    font-family: pismo_menu;
    text-decoration: none;
    color: #000000;
    background-color: #ffffff;
    padding-left:10px;
    padding-right: 10px;
    padding-top:2px;
    padding-bottom: 2px;
}

select:active,
select:hover {
    border: 1px solid #808080;
}

/* skryje šipku */
select::-ms-expand {
    display: none;
}

/* skryje šipku */
select {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
}



/* Ostatní nastavené stránky */
.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

body {
    background-color: #333132;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url(../images/body/bg.jpg);
}

@media only screen and (max-width: 700px) {
    body {
        background-image: none;
    }
}

.row {
    max-width: 1300px;
    margin: 0 auto;
}

/* Logo */
#logo {
    content: url("../images/body/logo.svg");
    max-width: 250px;
    height: 170px;
    padding: 10px 0px 10px 10px;

}

@media only screen and (max-width: 700px) {
    #logo {
        height: 100px;
    }
}

.bottom{
    padding: 10px 0px 10px 10px;
    color:#8C8979;
    font-family: pismo_body;   
}




/* Pisma */
.pismo {
    font-family: pismo_body;  
    color: #404040;
    font-size: 15px;
}

h3 {
    text-transform: uppercase;
    padding-bottom: 5px;
    padding-top: 15px;
    font-size: 17px;
    font-family: pismo_menu_light;
    border-bottom: 1px dashed #8C8979;   
    margin-bottom:5px;
    text-decoration: none;
}

h3:after {
    display: block;
    content: "";
    /* border-bottom: 1px dashed #8C8979; */
    margin: 0 auto;

}

h4 {
    text-transform: uppercase;
    padding-bottom: 3px;
    padding-top: 15px;
    font-size: 14px;
    font-family: pismo_menu_light;
}

/* Tabulka - dva sloupce */
.tabulka_dva_sloupce {
    display: grid;
    grid-template-columns: 30% 70%; 
    max-width: 100%;
}

.tabulka_dva_sloupce > div {
  margin: 2px;
  padding: 5px;
  width: 100%;
}

/* .tabulka_dva_sloupce > div:nth-child(2n+2) {
  background: lemonchiffon;
} */

@media only screen and (max-width: 700px) {
    .tabulka_dva_sloupce {
        grid-template-columns: 100%; 
    }
}



/* Tabulka - tři sloupce */

.tabulka_tri_sloupce {
    display: grid;
    grid-template-columns: 50px 50px 70%; 
    max-width: 480px;
}

.tabulka_tri_sloupce > div {
  margin: 2px;
  background: powderblue;
  padding: 5px;
}

.tabulka_tri_sloupce > div:nth-child(3n+2) {
  background: lemonchiffon;
}

.tabulka_tri_sloupce > div:nth-child(3n+3) {
    background: yellow;
}

.scroll_menu_left {
    height: 200px;
    overflow-y: auto;
}

/* *******************************************
NAVIGATION
********************************************** */
nav {
    background-image: linear-gradient(to bottom, #555555, #000000);    
}

nav ul {
    font-size: 0px; /* jelikož jsou v seznamu ul li mezery, tak font size 0px mi to vyřeší */
}

nav ul li {
    display: inline-block; /* změním blokový element na inline-block, tak aby odkazy byly vedle sebe */
    font-family: pismo_menu;    
    border-right: 1px dashed #808080; 
}

nav ul li a:link,
nav ul li a:visited {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 70px;
    text-shadow: 1px 2px 3px #000000;
    text-transform: uppercase; /* velká písmena */
    color: #ffffff;
    font-size: 25px;
    text-decoration: none; /* zmizí podtržení odkazu */
}

nav ul li:hover,
nav ul li:active {
    transition: background-color 0.5s;
    background-color: #d50000;
    
}

.sub-menu {
    display: none;
}

/* po najetí myši necháme menu znovu objevit */
nav ul li:hover .sub-menu { /* když najedu myší na "ul li", tak aplikuj na .sub-menu toto */
    display: block;
    position: absolute;
}

nav ul li:hover .sub-menu ul li { /* když najedu myší na "ul li", tak aplikuj na .sub-menu toto */
    display: block;
    background-color: #000000;
    border-bottom: 1px dashed #808080; 
    border-right: 0px dashed #808080; 
}

nav ul li:hover .sub-menu ul li a { 
    font-size: 15px;
    line-height: 50px;
}

nav ul li:hover .sub-menu ul li:hover { 
    background-color: #d50000;
}

/* Zarovnání hamburger-menu napravo */
.navigation {
    display: flex;
    justify-content: right;
}


/* Samotné hamburger-menu */
.hamburger-menu {
    display: flex; /* vyřeší mi to, že nemusí být uvnitř žádný text a já mohu malovat pomocí width a height */
    width: 45px;
    height: 40px;
    border: 3px solid #fff;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

/* Vytvoření samotných hamburgerů */
.hamburger {
    width: 35px;
    height: 5px;
    background-color: #fff;
    border-radius: 5px;
    transition: background-color 1s;
}

.hamburger:before,
.hamburger:after {
    display: block;
    background-color: #fff;
    content: "";
    width: 35px;
    height: 5px;
    border-radius: 5px;
    transition: transform 1s;
}

.hamburger:before {
    transform: translateY(-10px);
}

.hamburger:after {
    transform: translateY(5px);
}

/*  Po kliknutí na hamburger se přidá classa pomocí JavaScriptu */
.hamburger-hover {
    background-color: transparent;
}

.hamburger-hover:before {
    transform: rotate(45deg) translate(0px, 0px);
}

.hamburger-hover:after {
  transform: rotate(-45deg) translate(4px, -4px);
}
/* Konec hamburger-hover */



/* Mobilní verze menu */
/* Je to jednoduché - 
- vytvoříme label s checkboxem. Checkbox necháme jako display:none
- nechám všechno zmizet = jako display: none
A pak při 965px nechám zase menu zobrazit, jako display: block */
nav label {
    cursor: pointer;
    display: none;
    text-align: right;
    padding: 15px;
}

/* Necháme zmizet checkbox, tak aby nebyl vidět */
#mobile-menu {
    display: none;
}

@media only screen and (max-width: 885px) {
    /* změníme opět label na viditelný */
    nav label {
        display: block;
    }

    /*  u "ul li" (tedy seznam) musíme změnit z inline-block opět na blokový element tak aby byly odkazy pod sebou */
    nav ul li {
        display: block; /* změním zpět na blokový element */
        padding: 0;
    }

    nav ul li:hover .sub-menu { 
        position: relative; /* dám zpět z posotion "absolute" na "relative" */
    }

    /* A nyní vytvoříme podmínku, pro neviditělný chceckbox
    Když "#mobile-menu" bude "checked", tak najdi za nim následující ".mobile-menu-hidden" a aplikuj na něj */
    #mobile-menu:checked ~ .mobile-menu-hidden {
        display: none;
    }

}
/* Konec mobilní verze menu */






/* Accordion - vysouvací sekce - např. na stránce Cookies.php */

.arrow {
    border: solid #404040;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    margin-right: 10px;
    padding-top: 6px;
    padding-right: 6px;
    transition: 0.4s;

}

.tlacitkoSekce {

    cursor: pointer;
    padding: 0px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    background-color: transparent;
    font-weight: 900;
    color: #404040;
    text-transform: uppercase;
    font-size: 17px;
    padding-top: 15px;
    padding-bottom: 5px;
    font-family: pismo_menu_light;
}

.panel {
    border-top: 1px dashed #8C8979;    
    padding: 0px 0px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Konec Accordion - vysouvací sekce */




/* Odrážkový seznam - ikonka */
section ul li {
    list-style: none;
    padding-left: 20px;
    position: relative;
    padding-top: 3px;
}
  
section ul li:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0px;
    display: inline-block;
    height: 12px;
    width: 12px;
    background-size: contain;
    background-image: url("../images/body/list.svg");
}
/* KONEC - Odrážkový seznam - ikonka */


/* Načítání stránky */

#loader-background {
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}

.loader {
    position: absolute;    
    top: 50%;
    left: 41%;
    transform: translate(-50%, -50%);    
    border: 5px solid #cccccc;
    border-radius: 50%;
    border-top: 5px solid #000000;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
    z-index: 3;
}

@keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}



/* Footer */

.footer_tabulka_tri_sloupce {
    display: grid;
    grid-template-columns: 33% 33% 33%; 
    max-width: 100%;
    column-gap: 2px;
}

@media only screen and (max-width: 700px) {
    .footer_tabulka_tri_sloupce {
        grid-template-columns: 100%;
    }
}

.bottom-footer {
    background-color: #262526;
    padding: 20px 0px 0px 20px;
    color:#8C8979;
    font-family: pismo_body;   
}

.bottom-footer a:link,
.bottom-footer a:visited {
    text-decoration: none;
    color: #8C8979;
}

.bottom-footer a:hover,
.bottom-footer a:active {
    color: #d50000;
    transition: 0.5s;
    /* přechod v sekundách */
}

/***** Stop floating - až na konec CSS ****
Musím si zapamatovat když něco floatuji, tak vždy musím float ukončit a to udělám tímto příkazem

*/
.clearfix {zoom: 1}
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}