/* BODY, OBECNE */

:root {
  --oranzova: #EE9900;
  --zelena: #9CCE00; 
  --zelena_tmava: #77AA00;
  --bila: #FFFFFF;
  --pismova: #555555;
  --nadpisova: #222222;
  --cerna: #000000;
  --seda_pozadi: #EEEEEE; 
  --seda_tmavsi: #888888;
  --seda_nejtmavsi: #666666;
  --seda_podtitul: #AAAAAA;
  --seda_svetlejsi: #BBBBBB;
  --seda_svetla: #DDDDDD;
}

* {
    margin: 0; 
    box-sizing: border-box;  /* padding i border je v ramci weight/height, nepricitaji se k nim */
}

body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    background-color: var(--bila);
    line-height: 1.4em; 
    margin: 0px 6px;
}
.background_sedy {        
    background-color: var(--seda_pozadi);
}
.background_sedy_strip {        
    background-color: var(--seda_pozadi);
    width: 100%;
    height: 2em; 
    border-bottom: 1.0px dotted var(--seda_tmavsi);
}
.cara {
    position: relative;
    top: -0.5em;
    width: 100%;
    height: 1px; 
    border-top: 1.5px dotted var(--seda_tmavsi);
    margin-top: -1.2em;
    margin-bottom: 0.5em;
}
.sekce {                 /* sekce='podstranka' */
    width: 1140px; 
    margin: auto;
    padding: 1em;
    padding-bottom: 1vw; 
    padding-top: 1vw;
}

@media (max-width: 559px) {
    .sekce {width: 460px !important; }}
@media (min-width: 560px) {
    .sekce {width: 560px !important; }}
@media (min-width: 960px) {
    .sekce {width: 960px !important; }}
@media (min-width: 1200px) {
    .sekce {width: 1140px !important; }} 


/* FONTY */


h1 {                    
    color: var(--nadpisova);
    font-size: 4.5em; 
    font-weight: 900;
    letter-spacing: -0.02em; 
    text-shadow: 1px 1px var(--seda_svetlejsi);
    margin-top: 0.5em;
    margin-bottom: 0.3em;
}
h2 {    /* nadpisy sekci  */    
    font-size: 1.5em;
    font-weight: 900;
    padding-left: 4px;
    padding-bottom: 0.2em;
    position: relative;
    top: -0.6em;
}
h3 {    /* nadpisy podsekci ci knih */   
    font-size: 1em;
    font-weight: 900;
    position: relative;
    top: -0.5em;
}
p {                    
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.8em; 
    padding-bottom: 0.5em;
}

h1, h2, a , h1 a {
    color: var(--nadpisova);
}
h1 a , h1 a:hover {
    text-decoration: none;
}
h2 a , h2 a:hover {
    color: var(--seda_nejtmavsi);
    text-shadow: 0px 1px 5px var(--seda_svetla);
}
h1 a:hover  {
    color: var(--seda_nejtmavsi);
}
h3 {
   color: var(--seda_nejtmavsi);
   text-shadow: 0px 1px 5px var(--seda_pozadi);
}
p { 
    color: var(--pismova);
}
li {
    line-height: 1.8em;
    padding-left: 1px;
}
a {
    color: var(--zelena_tmava);
}
a:hover {
    color: var(--oranzova);
    text-shadow: 0px 1px 5px var(--seda_svetlejsi);
    text-decoration: none;
}
.sedy_link {
    color: var(--seda_nejtmavsi);
    text-decoration: none;
}



/* XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX  */


/* HEADER */

.header {
    display: inline-flex;
    margin-bottom: -9.2em;
}
.header_titul {
    width: 900px; 
    height: 300px;
    margin: auto;
    padding: 0;
}

@media (max-width: 559px) {
    h1 {
        font-size: 2.4em; 
        font-weight: 700;
  }
}
@media (min-width: 560px) {
    h1 {
        font-size: 3em; 
        font-weight: 700;
  }
}
@media (min-width: 960px) {
    h1 {
        font-size: 3.5em; 
        font-weight: 700;
  }
}
@media (min-width: 1200px) {
    h1 {
        font-size: 4.0em; 
        font-weight: 750;
    }
}
@media (min-width: 1200px) {
    h1 {
        font-size: 4.5em; 
        font-weight: 900;
    }
}


.menu {
    position: relative;
    top: 0em;
}
ul.menu {
    list-style-type: none;
    height: 3em; /* kvuli podtrzeni*/
    padding: 0;
    margin: 0;
    margin-top: 2em; 
    overflow: hidden;
}
a.menu {
    font-size: 1.0em;
    font-weight: 500;
    color: var(--oranzova);
    text-shadow: 0px 1px 5px var(--seda_svetlejsi);
    text-decoration: none;
    padding-right: 15px;
    margin-top: 5px;
    float: left;
    display: block;
}
a.menu:hover, a.menu:active , .menu_mini a:hover {
  text-shadow: 0 1px 5px var(--seda_svetla);
  text-decoration-color: var(--zelena);
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px; /* odsazeni podtrzeni*/
}
a.menu:hover , .menu_mini a:hover {
    color: var(--seda_tmavsi);
}
a.menu:active , .menu_mini a:active{
    color: var(--seda_svetlejsi);
}
.menu_mini {
    position: relative;
    top: 1em;
    left: 0.2em;
}
.menu_mini a {
    font-weight: 700;
    color: var(--oranzova);
    text-decoration: none;
    text-shadow: 0 1px 5px var(--seda_svetlejsi);
}

@media screen and (min-width: 560px) { /* toto a nasledujici funguje jako prepinac menu a menu_mini */
    .menu {    
        display:block;  
        font-size: 1em;
    } 
    .menu_mini {    
        display:none;  } 
}
@media screen and (max-width: 559px) {  
    .menu {    
        display:none;  } 
    .menu_mini {
        display:block;  

    }
    .cara {
        position: relative;
        top: -1.5em;
    }
}



/* GRAYBOX */

.graybox_container { /* grayboxy jsou male containery; vzdy tvori sloupec;  flex formatuje jen jejich obsah */
    display: flex;
    flex-direction: row;
    width: 100%;
    border-radius: 0.7em;
    background-color: var(--seda_pozadi);
    padding: 1.5em 1.2em 1.2em 1.2em;
    margin-bottom: 0.9em; /* row-gap se nechytal*/
}
.graybox_nadpis {
    position: relative;
    top: 0.5em;
    font-size: 1em;
    width: 8em;
}
.graybox_nadpis img {
    position: relative; 
    top: -0.5em;
    border: none;
    border-radius: 5px; 
    height: 190px; /* 136*200*/
    width: auto;
}
#photo {
    width: 113px;
    height: 151px;
}
.graybox_text {      
    width: 80%;
}
.graybox_list {
    list-style-image: url('square.png');
    font-size: 0.8em;
}
.graybox_list_sedy {
    list-style-image: url('square_gray.png');
    font-size: 0.8em;
}
.nested_list {
    list-style-image: none;
    list-style-type: circle;
    font-size: 0.95em;
}
.contact_list {
    list-style-image: none;
    list-style-type: none;
    font-size: 0.8em;
}
.ikonka {
    color: var(--zelena_tmava);
    display: inline;
}


@media screen and (min-width: 650px) {    
    .graybox_text {        left: -0em;    
    }} 
@media screen and (min-width: 750px) {    
    .graybox_text {        left: 1em;    
    }} 
@media screen and (min-width: 900px) {    
    .graybox_text {        left: -3em;
    }}
@media screen and (min-width: 1000px) {   
    .graybox_text {        left: -6em;
    }} 
@media screen and (min-width: 1200px) {   
    .graybox_text {        left: -0em;
    }} 
@media screen and (max-width: 560px) {
    .graybox_container { 
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .graybox_text {
        position:relative;
        left: -0em;
        width: 100%;
    }
    .graybox_nadpis {
        margin-bottom: 0.8em;
    }
    .graybox_nadpis img {
        position:relative;
        left: 2.5em;
    }
}



/* MAPA */

.mapa_container {
    display: flex;
    flex-direction: row;
}
#mapa_levy , #mapa_pravy {
    width: 50%;
}
.mapa {
    width: 100%;
    height: 200px;
    padding: 0; 
    margin: auto;
    border: 3px solid var(--bila);
    opacity: 0.8; 
    filter: grayscale(50%);
    overflow: hidden;
    border-radius: 5px; 
}
.mapa:hover {   
    opacity: 1; 
    filter: none;
}
.mapa iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 800px) {
    .mapa_container {
        flex-direction: column;
    }
    #mapa_levy {
        width: 80%;
        margin-bottom: 1em;
    }
    #mapa_pravy {
        position: relative;
        left: 2.5em;
        width: 80%;
    }
}

/* PATICKA */
  
.paticka_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: -1.0em;
}
.paticka_left  , .paticka_right {
    width: 50%;
    font-size: 0.9em;
}
.paticka_left p {
    text-align: left;
}
.paticka_right p {
    text-align: right;
    color: var(--seda_podtitul);
}
@media screen and (min-width: 900px) {
  .paticka_container {
        position: relative;
        top: -2.5em;
    }
}
@media screen and (min-width: 560px) {
  .paticka_container {
        position: relative;
        top: -1.5em;
    }
}
@media screen and (max-width: 559px) {
  .paticka_container {
        flex-direction: column;
    }
    .paticka_left p , .paticka_right p {
        width: 100%;
        text-align: center;
    }
}