/*lokalni font*/
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-Bold.ttf) format(truetype);
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-BoldItalic.ttf) format(truetype);
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-SemiBold.ttf) format(truetype);
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-SemiBoldItalic.ttf) format(truetype);
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-Medium.ttf) format(truetype);
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-MediumItalic.ttf) format(truetype);
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-Regular.ttf) format(truetype);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-Italic.ttf) format(truetype);
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-Light.ttf) format(truetype);
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-LightItalic.ttf) format(truetype);
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-ExtraLight.ttf) format(truetype);
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-ExtraLightItalic.ttf) format(truetype);
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-Thin.ttf) format(truetype);
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'josefinsanslocal';
    src: url(font/static/JosefinSans-ThinItalic.ttf) format(truetype);
    font-weight: 100;
    font-style: italic;
}

:root{ /*variables*/
    /*BARVY*/
    --Pozadi: #F1E7DD;
    --Text: #000000;
    --Primary: #D39AE1;
    --Secondary: #ffffff;

    --cara: clamp(0.15vw, 0.3vh, 0.3vh);
}
@media (max-width: 1200px){
    :root{
        --cara: clamp(0.2vw, 0.2vh, 0.2vh);


    }
}


/*
TO DO:
- odkaz v uvodnim textu, fialova barva
- predelat samotne vw na clamp
*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'josefinsanslocal', 'Josefin Sans', 'josefin-sans',  serif;
    text-shadow: 0 0 0;
}
html{
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    min-height: 100%;
    width: 100vw;

    display: flex;
    flex-direction: column;

    scroll-behavior: smooth;

    overflow-x: hidden !important;
}
body{
    background-color: var(--Pozadi);
    flex-grow: 1;

    min-height: 100%;
    width: 100vw;

    display: flex;
    flex-direction: column;

    overflow-x: hidden !important;

    -moz-osx-font-smoothing: grayscale !important;
    -webkit-font-smoothing: antialiased !important;
}
p{
    line-height: 1.2;
    font-weight: 400;
}
h1{
    line-height: 1.2;
}
h2{
    line-height: 1.2;
}
h3{
    line-height: 1.2;
}
h4{
    line-height: 1.2;
}
h5{
    line-height: 1.2;
}
h6{
    line-height: 1.2;
}

/*bold text phone*/
html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    font-family: inherit !important;
}
  
@-moz-document url-prefix() {
    body {
      font-weight: lighter !important;
    }
}

h1{
    font-weight: normal;
}
h2{
    font-weight: normal;
}
h3{
    font-weight: normal;
}
h4{
    font-weight: normal;
}
h5{
    font-weight: normal;
}
h6{
    font-weight: normal;
}
b{
    font-weight: normal;
}


/*            ---------------COOKIES--------------------             */

div.SusenkyDiv{
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 7;
    display: none;/*default: none*/
    justify-content: center;
    align-items: center;
}
div.SusenkyContent{
    width: clamp(40vw, 80vh, 85vw);
    max-height: 90svh;
    position: fixed;
    background-color: var(--Pozadi);
    z-index: 7;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding-top: clamp(3vw, 6vh, 6vh);
    padding-bottom: clamp(1.5vw, 3vh, 3vh);
}
p.SusenkyText{
    text-align: center;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    font-weight: 400;
    color: var(--Text);
    width: 80%;
}
p.SusenkyText strong{
    font-size: clamp(1.5vw, 3vh, 3vh);
}
div.SusenkyTlacitka{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 90%;
    padding-top: clamp(0.5vw, 1vh, 1vh);
}
a.SusenkyTlacitko{
    color: var(--Text);
    text-decoration: none;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    text-align: center;
    font-weight: 500;
    background-color: var(--Secondary);
    padding: clamp(1vw, 2vh, 2vh);
    border-width: var(--cara);
    border-radius: clamp(0.5vw, 1vh, 1vh);
    border-style: solid;
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
a.SusenkyTlacitko:hover{
    color: var(--Primary);
}
/*a.SusenkyTlacitko.ano:hover{
    color: var(--Text);
}*/

a.SusenkyTlacitko.ano{
    border-color: var(--Primary);
    border-width: calc(var(--cara)*1.1);
    /*color: var(--Primary);*/
}

a.SusenkyTlacitko.ne{
    border-color: var(--Text);
}

@media (orientation: portrait){
    div.SusenkyTlacitka{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    a.SusenkyTlacitko.ano{
        margin-bottom: clamp(1.3vw, 2.6vh, 2.6vh);
    }
    p.SusenkyText{
        font-size: clamp(1.3vw, 2.2vh, 2.2vh);
        width: 80%;
    }
    p.SusenkyText strong{
        font-size: clamp(1.5vw, 2.6vh, 2.6vh);
        width: 90%;
    }
}

@media (max-width: 1200px){
    a.SusenkyTlacitko:hover{
        color: var(--Text);
    }
    /*a.SusenkyTlacitko.ano:hover{
        color: var(--Primary);
    }*/
    a.SusenkyTlacitko:active{
        color: var(--Primary);
        transition-duration: 0.1s;
    }
    /*a.SusenkyTlacitko.ano:active{
        color: var(--Text);
        transition-duration: 0.1s;
    }*/
}


/*      horni lista      */
div.menuCont{
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: var(--Primary);
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

div.menuCont.onasMenu{
    position: relative;
}

div.menuCont div.menu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;

    margin-top: clamp(1.5vw, 3vh, 3vh);
    margin-bottom: clamp(1.5vw, 3vh, 3vh);
    margin-right: clamp(1.5vw, 3vh, 3vh);

    transition-property: width, margin-right;
    transition-duration: 0.5s;
    
}
div.menuCont div.menu ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
div.menuCont div.menu ul li{
    list-style: none;
}
div.menuCont div.menu ul li a{
    color: var(--Text);
    text-decoration: none;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    font-weight: 400;

    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
div.menuCont div.menu ul li a:hover{
    color: var(--Secondary);
    transition-duration: 0.2s;
}
div.menuCont div.menu ul li a.active{
    color: var(--Secondary);
    pointer-events: none;
}

div.menuCont.Mobil{
    display: none; 
}
div.MenuMobilP{
    position: static;
    height: 0;
    display: none;
}

div.MenuLogo{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100%;
    margin-left: clamp(1.5vw, 3vh, 3vh);
}
div.MenuLogo a{
    display: flex; 
    justify-content: center;
    align-items: center;
    text-decoration: none;

    height: clamp(3.25vw, 6.5vh, 6.5vh);
}
img.MenuLogoImg{
    object-fit: contain;
    height: 100%;
    transition-property: rotate;
    transition-timing-function: ease-out;
    transition-duration: 0.4s;
}
div.MenuLogo a:hover img.MenuLogoImg{
    transition-duration: 0.3s;
    rotate: 20deg;
}

@media (max-aspect-ratio: 31/19){
    div.menuCont div.menu ul li a{
        font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    }
    /*div.menuCont div.menu{
        width: 95%;
        margin-right: clamp(1.2vw, 2.4vh, 2.4vh);
    }*/
    /*div.menuCont div.menu ul li a:hover{
        color: var(--Text);
    }
    div.menuCont div.menu ul li a:active{
        color: var(--Secondary);
        transition-duration: 0.2s;
    }*/
}

@media (max-aspect-ratio: 27/19){/*4/3*/
    div.MenuMobilP{
        position: static;
        height: clamp(8vw, 8vh, 8vh);
        display: none;
    }
    div.menuCont{
        display: none; 
    }
    div.menuCont.Mobil{
        display: flex;
        align-items: start;
        justify-content: center;

        min-height: clamp(7vw, 7.6vh, 7.6vh);

        overflow: hidden;
    }

    div.menuCont.Mobil div.menu{/*8.6vh*/
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    
        margin-top: clamp(1vw, 3vh, 3vh);
        margin-bottom: clamp(1vw, 3vh, 3vh);
        margin-right: 0;
    
        transition-property: max-height, margin-top;
        transition-duration: 0.6s;
        transition-timing-function: ease-out;

        max-height: 0;
        
        
    }
    div.menuCont.Mobil div.menu ul{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 0;
        opacity: 0;
        transition-property: opacity, height;
        transition-duration: 0.25s, 0.6s;
        transition-timing-function: ease-out;
    }
    div.menuCont.Mobil div.menu ul li{
        margin-top: clamp(1vw, 2vh, 3vh);
        margin-bottom: clamp(1vw, 2vh, 3vh);
    }
    div.menuCont.Mobil div.menu ul li a{
        font-size: clamp(1.8vw, 3.2vh, 3.2vh);
    }

    div.MenuIcon{
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: 0;
        right: 0;
        margin-top: clamp(2vw, 2vh, 2vh);
        margin-bottom: clamp(2vw, 2vh, 2vh);
        height: clamp(3vw, 3.6vh, 3.6vh);/*clamp(1.3vw, 2.6vh, 2.6vh)*/

        margin-right: clamp(3vw, 3vh, 3vh);
    }
    a.MenuIcon{
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        height: 100%;
    }
    a.CloseIcon{
        display: none;
        text-decoration: none;
        height: 100%;
    }
    a.MenuIcon img{
        object-fit: contain;
        height: 100%;
    }
    a.CloseIcon img{
        object-fit: contain;
        height: 100%;
    }
    div.menuCont.Mobil.down a.MenuIcon{
        display: none;
    }
    div.menuCont.Mobil.down a.CloseIcon{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    div.MenuLogo{
        min-height: clamp(7vw, 7.6vh, 7.6vh);
        margin-left: clamp(2.9vw, 2.9vh, 2.9vh);
    }
    div.MenuLogo a{
        height: clamp(5.3vw, 5.7vh, 5.7vh);
    }

    div.menuCont.Mobil.down div.menu{
        margin-top: clamp(1vw, 6vh, 6vh);
        margin-bottom: clamp(1vw, 3vh, 3vh);
        max-height: clamp(35vw, 70vh, 70vh);
    }
    div.menuCont.Mobil.down div.menu ul{
        opacity: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: clamp(35vw, 70vh, 70vh);
        transition-duration: 0.6s, 0.6s;
        transition-delay: 0.1s, 0s;
    }
}



@media (max-width: 1200px){
    div.MenuMobilP{
        position: static;
        height: clamp(8vw, 8vh, 8vh);
        display: none;
    }
    div.menuCont{
        display: none; 
    }
    div.menuCont.Mobil{
        display: flex;
        align-items: start;
        justify-content: center;

        min-height: clamp(7vw, 7.6vh, 7.6vh);

        overflow: hidden;
    }

    div.menuCont.Mobil div.menu{/*8.6vh*/
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    
        margin-top: clamp(1vw, 3vh, 3vh);
        margin-bottom: clamp(1vw, 3vh, 3vh);
        margin-right: 0;
    
        transition-property: max-height, margin-top;
        transition-duration: 0.6s;
        transition-timing-function: ease-out;

        max-height: 0;
        
        
    }
    div.menuCont.Mobil div.menu ul{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 0;
        opacity: 0;
        transition-property: opacity, height;
        transition-duration: 0.25s, 0.6s;
        transition-timing-function: ease-out;
    }
    div.menuCont.Mobil div.menu ul li{
        margin-top: clamp(1vw, 2vh, 3vh);
        margin-bottom: clamp(1vw, 2vh, 3vh);
    }
    div.menuCont.Mobil div.menu ul li a{
        font-size: clamp(1.8vw, 3.2vh, 3.2vh);
    }
    div.menuCont.Mobil div.menu ul li a:hover{
        color: var(--Text);
    }
    div.menuCont.Mobil div.menu ul li a:active{
        color: var(--Secondary);
        transition-duration: 0.1s;
    }

    div.MenuIcon{
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: 0;
        right: 0;
        margin-top: clamp(2vw, 2vh, 2vh);
        margin-bottom: clamp(2vw, 2vh, 2vh);
        height: clamp(3vw, 3.6vh, 3.6vh);/*clamp(1.3vw, 2.6vh, 2.6vh)*/

        margin-right: clamp(3vw, 3vh, 3vh);
    }
    a.MenuIcon{
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        height: 100%;
    }
    a.CloseIcon{
        display: none;
        text-decoration: none;
        height: 100%;
    }
    a.MenuIcon img{
        object-fit: contain;
        height: 100%;
    }
    a.CloseIcon img{
        object-fit: contain;
        height: 100%;
    }
    div.menuCont.Mobil.down a.MenuIcon{
        display: none;
    }
    div.menuCont.Mobil.down a.CloseIcon{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    div.MenuLogo{
        min-height: clamp(7vw, 7.6vh, 7.6vh);
        margin-left: clamp(2.9vw, 2.9vh, 2.9vh);
    }
    div.MenuLogo a{
        height: clamp(5.3vw, 5.7vh, 5.7vh);
    }
    div.MenuLogo a:hover img.MenuLogoImg{
        transition-duration: 0s;
        rotate: none;
    }
    div.MenuLogo a:active img.MenuLogoImg{
        transition-duration: 0.1s;
        rotate: 20deg;
    }

    div.menuCont.Mobil.down div.menu{
        margin-top: clamp(1vw, 6vh, 6vh);
        margin-bottom: clamp(1vw, 3vh, 3vh);
        max-height: clamp(35vw, 70vh, 70vh);
    }
    div.menuCont.Mobil.down div.menu ul{
        opacity: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: clamp(35vw, 70vh, 70vh);
        transition-duration: 0.6s, 0.6s;
        transition-delay: 0.1s, 0s;
    }
}

/*uvodni stranka*/

div.Landing{
    background-color: rgba(0, 0, 0, 0.1);
    width: 100vw;
    height: 100vh;
}
div.BannerUvod{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100vw;
    height: 101vh;
    overflow: hidden;
}

div.BannerUvod img{
    content: url(img/landing2.jpg);
    height: 101vh;
    min-width: 100vw;
    object-fit: cover;
    overflow-x: hidden;
    vertical-align: middle;
    object-position: 73% 50%;
    transition-property: object-position;
    transition-duration: 0.4s;
}
@media (max-aspect-ratio:10/9){
    div.BannerUvod img{
        content: url(img/landingNoText2.jpg);
        object-position: 49.3% 50%;
    }
}

div.Uvod{
    min-height: 10vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(5vw, 10vh, 10vh);
}
p.UvodText{
    position: relative;
    text-align: center;
    font-size: clamp(1.5vw, 3vh, 3vh);
    color: var(--Text);
    width: 70%;
    font-weight: 400;

    top: clamp(2vw, 4vh, 4vh);
    opacity: 0;

    transition-property: top, opacity;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
p.UvodText.show{
    top: 0;
    opacity: 1;
}

div.MedialniVychova{
    min-height: 10vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: clamp(2.5vw, 5vh, 5vh);/*clamp(5vw, 10vh, 10vh)*/
    padding-top: clamp(5vw, 10vh, 10vh);
    padding-left: clamp(2vw, 4vh, 4vh);
    padding-right: clamp(2vw, 4vh, 4vh);
}
h3.MedialniVychovaNadpis{
    position: relative;
    text-align: center;
    font-size: clamp(2vw, 3.6vh, 3.6vh);
    font-weight: 700;
    color: var(--Text);
    width: clamp(38vw, 76vh, 43vw);
    padding: clamp(2vw, 4vh, 4vh);

    opacity: 0;
    right: clamp(6vw, 12vh, 7vw);

    transition-property: opacity, right;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
h3.MedialniVychovaNadpis.show{
    opacity: 1;
    right: 0;
}
p.MedialniVychovaText{
    text-align: left;
    font-size: clamp(1.5vw, 2.6vh, 2.6vh);
    font-weight: 400;
    color: var(--Text);
    width: clamp(40vw, 80vh, 45vw);
}

div.PrurezoveTema{
    min-height: 10vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    padding: clamp(2.5vw, 5vh, 5vh);
    padding-left: clamp(2vw, 4vh, 4vh);
    padding-right: clamp(2vw, 4vh, 4vh);
}
h3.PrurezoveTemaNadpis{
    position: relative;
    text-align: center;
    font-size: clamp(2vw, 3.6vh, 3.6vh);
    font-weight: 700;
    color: var(--Text);
    width: clamp(38vw, 76vh, 43vw);
    padding: clamp(2vw, 4vh, 4vh);
    opacity: 0;

    left: clamp(6vw, 12vh, 7vw);

    transition-property: opacity, left;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
h3.PrurezoveTemaNadpis.show{
    opacity: 1;
    left: 0;
}
p.PrurezoveTemaText{
    text-align: left;
    font-size: clamp(1.5vw, 2.6vh, 2.6vh);
    font-weight: 400;
    color: var(--Text);
    width: clamp(40vw, 80vh, 45vw);
}


div.Oblacky{
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
}
div.MG{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
div.PT{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
img.OblacekImg{
    object-fit: contain;
    width: clamp(34vw, 60vh, 44vw);
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) #555);
}
p.OblacekText{
    position: absolute;
    text-align: center;
    font-size: clamp(1.5vw, 2.6vh, 2.8vh);
    font-weight: 400;
    color: var(--Text);
    width: 75%;
}
p.OblacekText span{
    font-weight: 700;
}


div.postavicka{
    position: relative;
}
img.postavicka{
    display: none;
    position: absolute;
    object-fit: contain;
    height: clamp(17vw, 33vh, 34vh);
}
img.postavicka.PrurezoveTemaNadpis{
    left: 50%;
    top: 0;
    transform: translate(-50%, -90%);
}

@media (max-aspect-ratio:4/3){
    p.UvodText{
        width: 80%;
    }
    
    p.MedialniVychovaText{
        font-size: clamp(1.5vw, 2.5vh, 2.5vh);
    }
    
    p.PrurezoveTemaText{
        font-size: clamp(1.5vw, 2.5vh, 2.5vh);
    }
    
    p.OblacekText{
        width: 75%;
        font-size: clamp(1.8vw, 1.9vh, 2vh);
    }
}

@media (orientation: portrait){
    div.Uvod{
        min-height: 10vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: clamp(5vw, 10vh, 10vh);
        padding-top: clamp(5vw, 5vh, 5vh);
        padding-bottom: clamp(5vw, 5vh, 5vh);
        padding-left: 0;
        padding-right: 0;
    }
    p.UvodText{
        text-align: left;
        font-size: clamp(1.3vw, 2.6vh, 2.6vh);
        color: var(--Text);
        width: 80%;
        font-weight: 400;
    }
    
    div.MedialniVychova{
        min-height: 10vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: clamp(2.5vw, 5vh, 5vh);
        padding-top: clamp(5vw, 4vh, 4vh);
        padding-left: 0;
        padding-right: 0;
    }
    h3.MedialniVychovaNadpis{
        text-align: left;
        font-size: clamp(2vw, 3.6vh, 3.6vh);
        font-weight: 700;
        color: var(--Text);
        width: clamp(38vw, 76vh, 80vw);
        padding: clamp(2vw, 4vh, 4vh);
        padding-left: 0;
        padding-right: 0;
    }
    p.MedialniVychovaText{
        text-align: left;
        font-size: clamp(1.5vw, 2.5vh, 2.5vh);
        font-weight: 400;
        color: var(--Text);
        width: clamp(40vw, 80vh, 80vw);
    }
    
    div.PrurezoveTema{/**/
        min-height: 10vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: clamp(2.5vw, 5vh, 5vh);
        /*padding-top: clamp(11vw, 23vh, 23vh);/*33vh*/
        padding-left: 0;
        padding-right: 0;
    }
    h3.PrurezoveTemaNadpis{/**/
        text-align: left;
        font-size: clamp(2vw, 3.6vh, 3.6vh);
        font-weight: 700;
        color: var(--Text);
        width: clamp(38vw, 76vh, 80vw);
        padding: clamp(2vw, 4vh, 4vh);
        padding-left: 0;
        padding-right: 0;
    }
    p.PrurezoveTemaText{/**/
        text-align: left;
        font-size: clamp(1.5vw, 2.5vh, 2.5vh);
        font-weight: 400;
        color: var(--Text);
        width: clamp(40vw, 80vh, 80vw);
    }
    
    
    div.Oblacky{
        width: 100vw;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    }
    img.OblacekImg{
        width: clamp(34vw, 60vh, 85vw);
        margin: clamp(1.5vw, 4vh, 4vh);
    }
    p.OblacekText{
        font-size: clamp(1.7vh, 3vw, 2.5vh);
        width: 70%;
    }
    

    img.postavicka{/**/
        position: absolute;
        object-fit: contain;
        height: clamp(17vw, 33vh, 34vh);
    }
    img.postavicka.PrurezoveTemaNadpis{/**/
        left: 50%;
        top: 0;
        transform: translate(-50%, -95%);
    }
}

@media (max-width: 1200px){
    
}


/*spodni cast*/
div.SpodniCast{
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background-color: var(--Primary);

    margin-top: clamp(3vw, 6vh, 6vh);

    padding-top: clamp(1.5vw, 3vh, 3vh);
    padding-bottom: clamp(1.5vw, 3vh, 3vh);

    padding-left: clamp(5vw, 10vh, 10vh);
    padding-right: clamp(5vw, 10vh, 10vh);

    color: var(--Text);
}

div.Kontakt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
div.Kontakt h5{
    font-weight: 700;
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
}
div.Kontakt p{
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
}
div.Kontakt a{
    color: var(--Text);
    text-decoration: none;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
div.Kontakt a:hover{
    color: var(--Secondary);
}

div.ExterniLoga{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin-right: 3vw;
}
img.ExterniLogo{
    object-fit: contain;
    margin: 1.8vw;
    margin-top: 0;
    margin-bottom: 0;
}
img.ExterniLogo.l1{
    width: clamp(5vw, 10vh, 10vh);
}
img.ExterniLogo.l2{
    width: clamp(4vw, 8vh, 8vh);
}

div.Legal{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
div.Legal div{
    height: clamp(1vw, 2vh, 2vh);
}
div.Legal a{
    color: var(--Text);
    text-decoration: none;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
div.Legal a:hover{
    color: var(--Secondary);
}

div.Autor{
    position: relative;
    z-index: 4;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Primary);
    padding-top: clamp(1.2vw, 2.4vh, 2.4vh);
    padding-bottom: clamp(1.1vw, 2.2vh, 2.2vh);
    border-top: var(--Text) solid var(--cara);
}
div.Autor p{
    color: var(--Text);
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
}
div.Autor a{
    color: var(--Text);
    text-decoration: none;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;

    pointer-events: none;/**/
}
div.Autor a:hover{
    /*color: var(--Secondary);*/
}

@media (max-aspect-ratio: 28/19){
    div.ExterniLoga{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        margin-right: 0;
    }
    img.ExterniLogo{
        margin: 0;
    }
    img.ExterniLogo.l1{
        width: clamp(3.8vw, 7.6vh, 7.6vh);
        margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
    }
    img.ExterniLogo.l2{
        width: clamp(3.5vw, 7vh, 7vh);
        margin-top: clamp(0.75vw, 1.5vh, 1.5vh);
    }
}

@media (max-aspect-ratio: 213/190){
    div.SpodniCast{
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    
        margin-top: clamp(3vw, 6vh, 6vh);
    
        padding-top: clamp(1.5vw, 3vh, 3vh);
        padding-bottom: clamp(1.5vw, 3vh, 3vh);
        padding-left: 0;
        padding-right: 0;
    
    }
    
    div.Kontakt{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-bottom: clamp(2.8vw, 5.6vh, 5.6vh);
    }
    div.Kontakt h5{
        font-size: clamp(1.4vw, 2.5vh, 2.5vh);
    }
    div.Kontakt p{
        font-size: clamp(1.3vw, 2vh, 2vh);
    }
    div.Kontakt a{
        font-size: clamp(1.3vw, 2vh, 2vh);
    }
    div.Legal{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    div.Legal div{
        height: clamp(1vw, 2vh, 2vh);
    }
    div.Legal a{
        font-size: clamp(1.3vw, 2vh, 2vh);
    }

    div.ExterniLoga{
        padding-bottom: clamp(2.8vw, 5.6vh, 5.6vh);
    }
    
    div.Autor{
        justify-content: center;
        align-items: center;
        padding-top: clamp(1.2vw, 2.4vh, 2.4vh);
        padding-bottom: clamp(1.1vw, 2.2vh, 2.2vh);
    }
    div.Autor p{
        font-size: clamp(1.3vw, 2vh, 2vh);
    }
    div.Autor a{
        font-size: clamp(1.3vw, 2vh, 2vh);
    }
}

@media (max-width: 1200px){
    div.Kontakt a:hover{
        color: var(--Text);
    }
    div.Legal a:hover{
        color: var(--Text);
    }
    div.Kontakt a:active{
        color: var(--Secondary);
        transition-duration: 0.1s;
    }
    div.Legal a:active{
        color: var(--Secondary);
        transition-duration: 0.1s;
    }

    div.SpodniCast{
        margin-top: clamp(3vw, 6vh, 6vh);
        padding-top: clamp(2vw, 3vh, 3vh);
        padding-bottom: clamp(2vw, 3vh, 3vh);
    }
    div.Kontakt h5{
        font-size: clamp(1.7vw, 2.5vh, 2.5vh);
    }
    div.Kontakt p{
        font-size: clamp(1.6vw, 2vh, 2vh);
    }
    div.Kontakt a{
        font-size: clamp(1.6vw, 2vh, 2vh);
    }
    div.Legal a{
        font-size: clamp(1.6vw, 2vh, 2vh);
    }
    div.Autor p{
        font-size: clamp(1.6vw, 2vh, 2vh);
    }
    div.Autor a{
        font-size: clamp(1.6vw, 2vh, 2vh);
    }
}




/*             O NAS                  */
div.OnasNadpis{
    width: 100vw;
    height: 18vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
h1.OnasNadpis{
    font-size: clamp(3.5vw, 6.5vh, 7vh);
    font-weight: 700;
}

div.OnasUvodniFoto{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    /*padding: clamp(4vw, 8vh, 8vh);*/
}
img.OnasUvodniFoto{
    object-fit: contain;
    width: clamp(44vw, 78vh, 80vw);
}

div.Medailonky{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100vw;
    margin-top: 11.5vh;
    margin-bottom: 1vh;
}
p.MedailonkyUvod{
    position: relative;
    text-align: center;
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    color: var(--Text);
    width: 70%;
    font-weight: 400;
    padding-bottom: clamp(2vw, 6vh, 6vh);
    top: clamp(2vw, 4vh, 4vh);
    opacity: 0;

    transition-property: top, opacity;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
p.MedailonkyUvod.show{
    top: 0;
    opacity: 1;
}

div.Medailonek{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-bottom: clamp(2vw, 6vh, 6vh);
}
div.Medailonek.r{
    flex-direction: row-reverse;
}
div.MedFotka{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: clamp(2vw, 4vh, 4vh);
    width: clamp(18vw, 28vh, 36vh);
}
img.MedFotka{
    object-fit: contain;
    width: 100%;
    border-radius: 50%;
}
div.MedText{
    width: 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.MedText.externi{
    width: 50vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}
p.MedText{
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    color: var(--Text);
    
    font-weight: 400;
}
p.MedText span{
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    color: var(--Text);
    font-weight: 700;
}
p.MedText a{
    /*text-decoration: underline;*/
    color: var(--Text);
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
p.MedText a:hover{
    color: var(--Primary);
    transition-duration: 0.2s;
}

div.Medailonek p.MedText{
    position: relative;
    left: clamp(3vw, 6vh, 4vw);
    opacity: 0;
    transition-property: opacity, left;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
div.Medailonek p.MedText.show{
    opacity: 1;
    left: 0;
}
div.Medailonek.r p.MedText{
    position: relative;
    left: calc(clamp(3vw, 6vh, 4vw)*-1);
    opacity: 0;
    transition-property: opacity, left;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
div.Medailonek.r p.MedText.show{
    opacity: 1;
    left: 0;
}

div.MedailonkyExterni{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    border-top: var(--Text) solid var(--cara);
    margin-top: clamp(2vw, 4vh, 4vh);
}
div.MedailonkyExterni h1{
    font-size: clamp(2.5vw, 4.1vh, 4.4vh);
    font-weight: 700;
    padding: clamp(0.75vw, 1.5vh, 1.5vh);
    padding-top: calc(clamp(0.75vw, 1.5vh, 1.5vh)*2);
    padding-bottom: clamp(1.5vw, 2vh, 2vh);
    width: 80vw;
    text-align: left;
}

div.MedailonkyExterni h1 a{
    /*text-decoration: underline;*/
    color: var(--Text);
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
div.MedailonkyExterni h1 a:hover{
    color: var(--Primary);
    transition-duration: 0.2s;
}



@media (orientation: portrait){
    h1.OnasNadpis{
        font-size: clamp(3.5vw, 5.5vh, 6vh);
    }

    div.Medailonky{
        margin-top: 8vh;
        margin-bottom: 3vh;
    }
    p.MedailonkyUvod{
        text-align: left;
        font-size: clamp(1.4vw, 2.6vh, 2.6vh);
        width: 80%;
        padding-bottom: clamp(2vw, 6vh, 6vh);
    }
    
    div.Medailonek{
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-bottom: clamp(2vw, 6vh, 6vh);
    }
    div.Medailonek.r{
        flex-direction: column;
    }
    div.MedFotka{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: clamp(2vw, 4vh, 4vh);
        width: clamp(18vw, 30vh, 70vw);
    }
    div.MedText{
        width: clamp(50vw, 55vh, 70vw);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div.MedText.externi{
        justify-content: center;
    }
    p.MedText{
        font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    }
    p.MedText span{
        font-size: clamp(1.3vw, 2.6vh, 2.6vh);
        font-weight: 700;
    }

    div.MedailonkyExterni{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div.MedailonkyExterni h1{
        text-align: center;
    }
}

@media (max-width: 1200px){
    h1.OnasNadpis{

    }
    h1.OnasNadpis{
        font-size: clamp(3.5vw, 5.5vh, 6vh);
    }

    div.Medailonky{
        margin-top: 8vh;
    }
    p.MedailonkyUvod{
        text-align: left;
        font-size: clamp(1.9vw, 2.6vh, 2.6vh); /*+0.5vw*/
        padding-bottom: clamp(2vw, 5.5vh, 6vh);
    }
    
    div.Medailonek{
        padding-bottom: clamp(1.5vw, 5.5vh, 6vh);
    }
    div.MedFotka{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: clamp(2vw, 4vh, 4vh);
        width: clamp(18vw, 28vh, 36vh);
    }
    p.MedText{
        font-size: clamp(1.8vw, 2.6vh, 2.6vh); /*+0.5vw   original: font-size: clamp(1.3vw, 2.6vh, 2.6vh);*/
    }
    p.MedText span{
        font-size: clamp(1.8vw, 2.6vh, 2.6vh); /*+0.5vw*/
        font-weight: 700;
    }

    p.MedText a:hover{
        color: var(--Text);
    }
    p.MedText a:active{
        color: var(--Primary);
        transition-duration: 0.1s;
    }

    div.MedailonkyExterni h1 a:hover{
        color: var(--Text);
    }
    div.MedailonkyExterni h1 a:active{
        color: var(--Primary);
        transition-duration: 0.1s;
    }

}
/**/





/*Rozcestnik*/

div.RozcestnikNadpis{
    width: 100vw;
    height: 22vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
h1.RozcestnikNadpis{
    font-size: clamp(3.5vw, 7vh, 7vh);
    font-weight: 700;
}

div.RozcestnikUvod{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
}
p.RozcestnikUvod{
    width: 60%;
    text-align: center;
    font-size: clamp(1.5vw, 3vh, 3vh);
}

div.RozcestnikContainer{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin-top: clamp(2.5vw, 5vh, 5vh);
}
div.RozcestnikSekce{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin: clamp(2.5vw, 5vh, 5vh);
}
div.RozcestnikSekce h2{
    text-align: center;
    font-size: clamp(2.5vw, 5vh, 5vh);
    font-weight: 700;
    color: var(--Text);

    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
div.RozcestnikSekce h2.show{
    opacity: 1;
}
div.RozcestnikOdkazy{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}
div.RozcestnikOdkazy p{
    text-decoration: none;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    color: var(--Text);
    font-weight: 400;
    text-align: center;
}
div.RozcestnikOdkazy a{
    text-decoration: none;
    color: var(--Text);
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
div.RozcestnikOdkazy a:hover{
    color: var(--Primary);
    transition-duration: 0.2s;
}

@media (orientation: portrait){
    div.RozcestnikNadpis{
        height: 18vh;
    }
    h1.RozcestnikNadpis{
        font-size: clamp(3.5vw, 5.5vh, 6vh);
    }
    
    p.RozcestnikUvod{
        width: 80%;
        text-align: center;
        font-size: clamp(1.5vw, 3vh, 3vh);
    }
    
    div.RozcestnikContainer{
        margin-top: clamp(2.5vw, 5vh, 5vh);
    }
    div.RozcestnikSekce{
        margin: clamp(2.5vw, 5vh, 5vh);
    }
    div.RozcestnikSekce h2{
        text-align: center;
        font-size: clamp(2.5vw, 4vh, 4vh);
    }
    div.RozcestnikOdkazy p{
        font-size: clamp(1.3vw, 2.6vh, 2.6vh);
        text-align: center;
    }
}

@media (max-width: 1200px){
    h1.RozcestnikNadpis{

    }
    h1.RozcestnikNadpis{
        font-size: clamp(4vw, 5.5vh, 6vh);
    }
    
    p.RozcestnikUvod{
        font-size: clamp(2vw, 3vh, 3vh);
    }
    
    div.RozcestnikContainer{
        margin-top: clamp(2.5vw, 5vh, 5vh);
    }
    div.RozcestnikSekce{
        margin: clamp(2.5vw, 5vh, 5vh);
    }
    div.RozcestnikSekce h2{
        font-size: clamp(3vw, 4vh, 4vh);
    }
    div.RozcestnikOdkazy p{
        font-size: clamp(1.8vw, 2.6vh, 2.6vh);
    }

    

    div.RozcestnikOdkazy a:hover{
        color: var(--Text);
    }
    div.RozcestnikOdkazy a:active{
        color: var(--Primary);
        transition-duration: 0.1s;
    }
}


/**/





/*      SLOVNÍČEK     */
div.SlovnicekNadpis{
    width: 100vw;
    height: 18vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
h1.SlovnicekNadpis{
    font-size: clamp(3.5vw, 6.5vh, 7vh);
    font-weight: 700;
}

div.SlovnicekSearchCont{
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: clamp(4vw, 8vh, 8vh);
    padding-top: clamp(2vw, 4vh, 4vh);
}
div.SlovnicekSearch{
    width: clamp(20.5vw, 41vh, 41vh);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--Primary);
    position: relative;
}
img.SlovnicekSearch{
    object-fit: contain;
    width: clamp(2vw, 4vh, 4vh);
    margin-left: clamp(0.5vw, 1vh, 1vh);
}
input.SlovnicekSearch{
    text-align: left;
    padding: clamp(0.5vw, 1vh, 1vh);
    border-width: 0;
    color: var(--Secondary);
    font-weight: 300;
    font-size: clamp(1.5vw, 3vh, 3vh);
    resize: none;
    border-radius: 0;
    border-color: var(--Text);
    background-color: var(--Primary);
    width: clamp(18vw, 36vh, 36vh);

    border-color: var(--Primary);

    position: relative;
    
}
input.SlovnicekSearch:focus{
    outline: none !important;
}

input.SlovnicekSearch:focus-visible{
    outline: none !important;
}

input.SlovnicekSearch:focus::placeholder {
    opacity: 0;
}
input.SlovnicekSearch:focus-visible::placeholder {
    opacity: 0;
}

input.SlovnicekSearch:focus::-webkit-input-placeholder {
    opacity: 0;
}
  
input.SlovnicekSearch:focus:-moz-placeholder {
    opacity: 0;
}
  
input.SlovnicekSearch:focus::-moz-placeholder {
    opacity: 0;
}
  
input.SlovnicekSearch:focus:-ms-input-placeholder {  
    opacity: 0;
}
  
input.SlovnicekSearch:focus::input-placeholder {  
    opacity: 0;
}


input.SlovnicekSearch::placeholder {
    opacity: 100%;
}
input.SlovnicekSearch::placeholder {
    opacity: 100%;
}

input.SlovnicekSearch::-webkit-input-placeholder {
    opacity: 100%;
}
  
input.SlovnicekSearch:-moz-placeholder {
    opacity: 100%;
}
  
input.SlovnicekSearch::-moz-placeholder {
    opacity: 100%;
}
  
input.SlovnicekSearch:-ms-input-placeholder {  
    opacity: 100%;
}
  
input.SlovnicekSearch::input-placeholder {  
    opacity: 100%;
}
div.SlovnicekSearchAnim{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--cara);
    width: 0;
    z-index: 3;
    background-color: var(--Secondary);

    transition-property: width;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
div.SlovnicekSearchAnim.on{
    height: var(--cara);
    width: 100%;
}


div.SlovnicekPojmy{/*min height*/
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

    padding-left: 14vw;

    min-height: clamp(20vw, 40vh, 40vh);

    margin-bottom: clamp(10vw, 20vh, 20vh);
}
h3.nicNenalezeno{
    display: none;
    font-size: clamp(2vw, 4vh, 4vh);
    font-weight: 800;
    color: var(--Text);
    margin-top: clamp(3vw, 6vh, 6vh);
}

a.PojemOdkaz{
    text-decoration: none;
    margin-top: clamp(3vw, 6vh, 6vh);
    /*box-shadow: 0 0 clamp(0.3vw, 0.6vh, 0.6vh) #555;*/
}
div.Pojem{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;

    background-color: var(--Primary);
    padding: clamp(1.4vw, 2.8vh, 2.8vh);
    padding-bottom: 0;
    padding-top: clamp(0.9vw, 1.8vh, 1.8vh);
    width: clamp(35vw, 70vh, 75vw);/*EDIT*/

    transition-property: height, background-color;
    transition-duration: 0.6s, 0.3s;
    transition-timing-function: ease-out;

    overflow: hidden;
}
a.PojemOdkaz div.Pojem:hover{
    background-color: var(--Secondary);
}
a.PojemOdkaz.down div.Pojem:hover{
    background-color: var(--Primary);
}
h4.Pojem{
    font-size: clamp(2vw, 4vh, 4vh);
    font-weight: 800;
    color: var(--Text);
    padding-top: clamp(0.6vw, 1.2vh, 1.2vh);
    padding-bottom: clamp(1.1vw, 2.2vh, 2.2vh);

    transition-property: padding-bottom;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
p.PojemP{
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    color: var(--Text);
    padding-bottom: 0;/*clamp(1.3vw, 2.6vh, 2.6vh)*/
    font-weight: 400;
    overflow: hidden;

    /*transform: scaleY(0);
    transform-origin: top;*/

    transition-property: transform, max-height, opacity;
    transition-duration: 0.6s, 0.6s, 0.4s;
    transition-delay: 0s, 0s, 0s;
    transition-timing-function: ease-out;

    max-height: 0;
    opacity: 0;
}
a.PojemOdkaz.down p.PojemP{
    /*transform: scaleY(1);*/
    opacity: 100%;
    max-height: 100vh; 
    transition-duration: 0.6s, 0.6s, 0.5s;
    transition-delay: 0s, 0s, 0.1s;
}
a.PojemOdkaz.down h4.Pojem{
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
}

div.PojemOdkaz{
    text-decoration: none;
    margin-top: clamp(3vw, 6vh, 6vh);
    /*box-shadow: 0 0 clamp(0.3vw, 0.6vh, 0.6vh) #555;*/
}
div.PojemOdkaz a.PojemOdkaz{
    margin-top: 0;
}
div.PojemOdkaz div.Pojem{
    padding-left: 0;
    padding-top: 0;
    padding-right: 0;
}
div.PojemOdkaz div.Pojem:hover{
    background-color: var(--Secondary);
}
div.PojemOdkaz.down div.Pojem:hover{
    background-color: var(--Primary);
}
div.PojemOdkaz.down a.PojemOdkaz div.Pojem:hover{
    background-color: var(--Secondary);
}
div.PojemOdkaz.down a.PojemOdkaz.down div.Pojem:hover{
    background-color: var(--Primary);
}
div.PojemOdkaz a.PojemOdkaz div.Pojem{
    padding-left: clamp(1.4vw, 2.8vh, 2.8vh);
}
div.PojemOdkaz h4.Pojem{
    padding-left: clamp(1.4vw, 2.8vh, 2.8vh);
    padding-top: clamp(1.5vw, 3vh, 3vh);
    padding-right: calc(clamp(1.4vw, 2.8vh, 2.8vh)*2);
    width: 100%;
    pointer-events: auto;
    cursor: pointer;
}
div.PojemOdkaz p.PojemP{
    padding-left: clamp(1.4vw, 2.8vh, 2.8vh);
    padding-right: calc(clamp(1.4vw, 2.8vh, 2.8vh)*2);
}
div.SkupinaPojmu{
    
    max-height: 0;

    transition-property: max-height;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
div.PojemOdkaz.down div.SkupinaPojmu{
    max-height: 100vh;
    transition-timing-function: ease-in;
}
span.odkazVPojmu{
    pointer-events: auto;
    cursor: pointer;
    text-decoration: underline;
    font-style: italic;
}
a.highlighted div.Pojem{
    background-color: var(--Secondary);
}
div.highlighted div.Pojem{
    background-color: var(--Secondary);
}



div.navigaceSlovnicek{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 50vh;
    transform: translateY(-50%);
    left: clamp(2vw, 2vh, 2vh);
    background-color: var(--Secondary);
    padding-top: clamp(0.8vw, 1.6vh, 1.6vh);
    padding-bottom: clamp(0.8vw, 1.6vh, 1.6vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);

    margin-top: 0;
    opacity: 100%;

    transition-property: margin-top, opacity;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
div.navigaceSlovnicek.menuVisible{
    transition-duration: 0.2s;
    margin-top: clamp(2.1vw, 4.2vh, 4.2vh);
}
/*div.navigaceSlovnicek.spodekVisible{
    transition-duration: 0.2s;
    margin-top: calc(clamp(4vw, 8vh, 8vh)*-1);
}*/
div.navigaceSlovnicek.hidden{
    opacity: 0;
}
div.navigaceSlovnicek h3.pismenoNavigace{
    color: var(--Text);
    padding-top: clamp(0.3vw, 0.6vh, 0.6vh);
    padding-bottom: clamp(0.2vw, 0.4vh, 0.4vh);
    padding-left: clamp(0.5vw, 1vh, 1vh);
    padding-right: clamp(0.5vw, 1vh, 1vh);
    font-size: clamp(1.05vw, 2.1vh, 2.1vh);
    line-height: 1.05;
}
div.navigaceSlovnicek a.pismenoNavigace{
    text-decoration: none;
    color: var(--Text);
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
div.navigaceSlovnicek a.pismenoNavigace:hover{
    text-decoration: none;
    color: var(--Primary);
    transition-duration: 0.2s;
}
div.navigaceSlovnicek h3.pismenoNavigace.unclickable{
    padding-top: clamp(0.1vw, 0.2vh, 0.2vh);
    padding-bottom: clamp(0.1vw, 0.2vh, 0.2vh);
    padding-left: clamp(0.5vw, 1vh, 1vh);
    padding-right: clamp(0.5vw, 1vh, 1vh);
}
a.unclickable{
    pointer-events: none;
}

@media (orientation: portrait){
    div.SlovnicekSearchCont{
        padding-right: clamp(1vw, 1vh, 1vh);
        justify-content: flex-start;
        padding-left: 14vw;
    }
    div.navigaceSlovnicek{
        left: clamp(1vw, 1vh, 1vh);

        padding-top: clamp(0.8vw, 1.6vh, 1.6vh);
        padding-bottom: clamp(0.8vw, 1.6vh, 1.6vh);
        border-radius: clamp(0.3vw, 0.6vh, 0.6vh);

    }
    div.navigaceSlovnicek h3.pismenoNavigace{
        padding-top: clamp(0.3vw, 0.6vh, 0.6vh);
        padding-bottom: clamp(0.2vw, 0.4vh, 0.4vh);
        padding-left: clamp(0.5vw, 0.5vh, 0.5vh);
        padding-right: clamp(0.5vw, 0.5vh, 0.5vh);
        font-size: clamp(1.05vw, 1.9vh, 1.9vh);
    }
    h1.SlovnicekNadpis{
        max-width: 70%;
    }
}

@media (orientation: portrait){
    h1.SlovnicekNadpis{
        font-size: clamp(4vw, 4.25vh, 4.25vh); /*font-size: clamp(3.5vw, 7vh, 7vh);*/
    }
    div.SlovnicekSearchCont{
        padding-right: clamp(4vw, 2vh, 2vh);
        padding-top: clamp(2vw, 4vh, 4vh);
    }
    div.SlovnicekSearch{
        width: clamp(21.5vw, 30vh, 30vh);
    }
    img.SlovnicekSearch{
        width: clamp(3vw, 4vh, 4vh);
        margin-left: clamp(0.5vw, 0.5vh, 0.5vh);
    }
    input.SlovnicekSearch{
        padding: clamp(1vw, 1vh, 1vh);
        font-size: clamp(2vw, 2.9vh, 2.9vh); /*font-size: clamp(1.5vw, 3vh, 3vh);*/

        width: clamp(18vw, 25.5vh, 25.5vh);
    }

    div.SlovnicekPojmy{
        padding-left: 14vw;
        min-height: clamp(20vw, 40vh, 40vh);
        margin-bottom: clamp(7.5vw, 15vh, 15vh);
    }
    h3.nicNenalezeno{
        font-size: clamp(3vw, 3.5vh, 3.5vh); /*font-size: clamp(2vw, 4vh, 4vh);*/
        margin-top: clamp(3.2vw, 5vh, 5vh);
    }
    a.PojemOdkaz{
        margin-top: clamp(3.2vw, 5vh, 5vh);
    }
    div.PojemOdkaz{
        margin-top: clamp(3.2vw, 5vh, 5vh);
    }
    h4.Pojem{
        font-size: clamp(3vw, 3.5vh, 3.5vh); /*font-size: clamp(2vw, 4vh, 4vh);*/
        padding-top: clamp(1vw, 1vh, 1vh);
        padding-bottom: clamp(1vw, 1.8vh, 1.8vh);
    }
    a.PojemOdkaz.down h4.Pojem{
        padding-bottom: clamp(1vw, 1vh, 1vh);
    }
    p.PojemP{/**/
        font-size: clamp(2vw, 2.6vh, 2.6vh); /*font-size: clamp(1.3vw, 2.6vh, 2.6vh)*/
    }
    div.PojemOdkaz h4.Pojem{
        padding-left: clamp(1.4vw, 2.8vh, 2.8vh);
        padding-top: clamp(1.5vw, 3vh, 3vh);
        padding-right: calc(clamp(1.4vw, 2.8vh, 2.8vh)*2);
    }
    div.PojemOdkaz p.PojemP{
        padding-left: clamp(1.4vw, 2.8vh, 2.8vh);
        padding-right: calc(clamp(1.4vw, 2.8vh, 2.8vh)*2);
    }

    div.navigaceSlovnicek.menuVisible{
        transition-duration: 0.2s;
        margin-top: clamp(8vw, 4.2vh, 4.2vh);
    }
    div.navigaceSlovnicek{
        left: clamp(2vw, 1vh, 1vh);

        padding-top: clamp(0.4vw, 1.6vh, 1.6vh);
        padding-bottom: clamp(0.4vw, 1.6vh, 1.6vh);
        border-radius: clamp(0.3vw, 0.6vh, 0.6vh);

    }
}

@media (max-width: 1200px){
    h1.SlovnicekNadpis{
        font-size: clamp(4vw, 4.25vh, 4.25vh); /*font-size: clamp(3.5vw, 7vh, 7vh);*/
    }

    div.SlovnicekSearchCont{
        padding-right: clamp(4vw, 2vh, 2vh);
        padding-top: clamp(2vw, 4vh, 4vh);
    }
    div.SlovnicekSearch{
        width: clamp(21.5vw, 30vh, 30vh);
    }
    img.SlovnicekSearch{
        width: clamp(3vw, 4vh, 4vh);
        margin-left: clamp(0.5vw, 0.5vh, 0.5vh);
    }
    input.SlovnicekSearch{
        padding: clamp(1vw, 1vh, 1vh);
        font-size: clamp(2vw, 2.9vh, 2.9vh); /*font-size: clamp(1.5vw, 3vh, 3vh);*/

        width: clamp(18vw, 25.5vh, 25.5vh);
    }

    div.SlovnicekPojmy{
        padding-left: 14vw;
        min-height: clamp(20vw, 40vh, 40vh);
        margin-bottom: clamp(7.5vw, 15vh, 15vh);
    }
    h3.nicNenalezeno{
        font-size: clamp(3vw, 3.5vh, 3.5vh); /*font-size: clamp(2vw, 4vh, 4vh);*/
        margin-top: clamp(3.2vw, 5vh, 5vh);
    }
    a.PojemOdkaz{
        margin-top: clamp(3.2vw, 5vh, 5vh);
    }
    div.PojemOdkaz{
        margin-top: clamp(3.2vw, 5vh, 5vh);
    }
    div.Pojem{
        
    }
    h4.Pojem{
        font-size: clamp(3vw, 3.5vh, 3.5vh); /*font-size: clamp(2vw, 4vh, 4vh);*/
        padding-top: clamp(1vw, 1vh, 1vh);
        padding-bottom: clamp(1vw, 1.8vh, 1.8vh);
    }
    a.PojemOdkaz.down h4.Pojem{
        padding-bottom: clamp(1vw, 1vh, 1vh);
    }
    p.PojemP{
        font-size: clamp(2vw, 2.6vh, 2.6vh); /*font-size: clamp(1.3vw, 2.6vh, 2.6vh)*/
    }
    div.PojemOdkaz h4.Pojem{
        padding-left: clamp(1.4vw, 2.8vh, 2.8vh);
        padding-top: clamp(1.5vw, 3vh, 3vh);
        padding-right: calc(clamp(1.4vw, 2.8vh, 2.8vh)*2);
    }
    div.PojemOdkaz p.PojemP{
        padding-left: clamp(1.4vw, 2.8vh, 2.8vh);
        padding-right: calc(clamp(1.4vw, 2.8vh, 2.8vh)*2);
    }



    div.Pojem:hover{
        background-color: var(--Primary) !important;
    }
    div.navigaceSlovnicek.menuVisible{
        transition-duration: 0.2s;
        margin-top: clamp(8vw, 4.2vh, 4.2vh);
    }
    div.navigaceSlovnicek a.pismenoNavigace:hover{
        color: var(--Text);
    }
    div.navigaceSlovnicek a.pismenoNavigace:active{
        text-decoration: none;
        color: var(--Primary);
        transition-duration: 0.1s;
    }
    div.navigaceSlovnicek{
        left: clamp(2vw, 1vh, 1vh);

        padding-top: clamp(0.4vw, 1.6vh, 1.6vh);
        padding-bottom: clamp(0.4vw, 1.6vh, 1.6vh);
        border-radius: clamp(0.3vw, 0.6vh, 0.6vh);

    }

    
    /*div.navigaceSlovnicek.spodekVisible{
        transition-duration: 0.2s;
        margin-bottom: clamp(4.6vw, 4.2vh, 4.2vh);
    }*/

}




/*BLOG*/

div.BlogNadpis{
    width: 100vw;
    height: 22vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
h1.BlogNadpis{
    font-size: clamp(4vw, 8vh, 8vh);
    font-weight: 700;
}

div.BlogUvod{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
}
p.BlogUvod{
    width: 60%;
    text-align: center;
    font-size: clamp(1.5vw, 3vh, 3vh);
}

div.BlogKat{
    margin-top: 1vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin-bottom: clamp(3.5vw, 7vh, 7vh);
    overflow: visible;
}
div.BlogKat a{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    margin: clamp(3vw, 3vh, 3vh);
    filter: drop-shadow(0 0 clamp(0.3vw, 0.6vh, 0.6vh) #555); /*mbe stin*/
    overflow: visible;
}
div.BlogKat a.BlogKatOdkaz{
    opacity: 0;

    transition-property: opacity;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
div.BlogKat a.BlogKatOdkaz.show{
    opacity: 1;
}
/*div.BlogKat a.selected{
    pointer-events: none;
}*/
div.BlogKatImg{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(14vw, 25vh, 25vh);
    width: clamp(14vw, 25vh, 25vh);
    border-radius: clamp(0.75vw, 1.5vh, 1.5vh) clamp(0.75vw, 1.5vh, 1.5vh) 0 0;
}
div.BlogKatImg.pozadi{
    background-color: var(--Secondary);
}
img.BlogKatImg{
    overflow: hidden;
    object-fit: cover;
    height: 100%;

    transition-property: height;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
img.BlogKatImg.vse{
    height: 65%;
}
img.BlogKatImg.cr{
    height: 80%;
}
img.BlogKatImg.globus{
    height: 70%;
}
div.BlogKat a:hover img.BlogKatImg{
    height: 110%;
    transition-duration: 0.4s;
}
div.BlogKat a:hover img.BlogKatImg.vse{
    height: 75%;
    transition-duration: 0.4s;
}
div.BlogKat a:hover img.BlogKatImg.cr{
    height: 90%;
    transition-duration: 0.4s;
}
div.BlogKat a:hover img.BlogKatImg.globus{
    height: 80%;
    transition-duration: 0.4s;
}
div.BlogKat a.selected img.BlogKatImg{
    height: 110%;
    transition-duration: 0.4s;
}
div.BlogKat a.selected img.BlogKatImg.vse{
    height: 75%;
    transition-duration: 0.4s;
}
div.BlogKat a.selected img.BlogKatImg.cr{
    height: 90%;
    transition-duration: 0.4s;
}
div.BlogKat a.selected img.BlogKatImg.globus{
    height: 80%;
    transition-duration: 0.4s;
}
div.BlogKatText{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Primary);
    padding: clamp(0.7vw, 1.4vh, 1.4vh);
    padding-top: calc(clamp(0.7vw, 1.4vh, 1.4vh)*1.25);
    width: 100%;
}
h5.BlogKatText{
    font-size: clamp(1.5vw, 3vh, 3vh);
    color: var(--Text);
    line-height: 1.05;
    transition-property: color;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
div.BlogKat a:hover h5.BlogKatText{
    color: var(--Secondary);
    transition-duration: 0.4s;
}
div.BlogKat a.selected h5.BlogKatText{
    color: var(--Secondary);
    transition-duration: 0.4s;
}

div.BlogPrispevky{
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: clamp(3vw, 6vh, 6vh);
    min-height: clamp(15vw, 30vh, 30vh);
}
div.BlogPrispevkyNadpis{
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--Primary);
    padding-left: 14vw;
    padding-right: 7vw;
}
h1.BlogPrispevkyNadpis{
    font-size: clamp(2.5vw, 5vh, 5vh);
    font-weight: 700;
    padding: clamp(0.5vw, 1vh, 1vh);
    padding-top: calc(clamp(0.5vw, 1vh, 1vh)*2);
}

div.BlogSearch{
    width: clamp(20.5vw, 41vh, 41vh);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--Primary);
    position: relative;
    box-shadow: 0 0 clamp(0.4vw, 0.8vh, 0.8vh) #555;
}
img.BlogSearch{
    object-fit: contain;
    width: clamp(2vw, 4vh, 4vh);
    margin-left: clamp(0.5vw, 1vh, 1vh);
}
input.BlogSearch{
    text-align: left;
    padding: clamp(0.5vw, 1vh, 1vh);
    border-width: 0;
    color: var(--Secondary);
    font-weight: 300;
    font-size: clamp(1.5vw, 3vh, 3vh);
    resize: none;
    border-radius: 0;
    border-color: var(--Text);
    background-color: var(--Primary);
    width: clamp(18vw, 36vh, 36vh);

    border-color: var(--Primary);

    position: relative;
    
}
input.BlogSearch:focus{
    outline: none !important;
}

input.BlogSearch:focus-visible{
    outline: none !important;
}

input.BlogSearch:focus::placeholder {
    opacity: 0;
}
input.BlogSearch:focus-visible::placeholder {
    opacity: 0;
}

input.BlogSearch:focus::-webkit-input-placeholder {
    opacity: 0;
}
  
input.BlogSearch:focus:-moz-placeholder {
    opacity: 0;
}
  
input.BlogSearch:focus::-moz-placeholder {
    opacity: 0;
}
  
input.BlogSearch:focus:-ms-input-placeholder {  
    opacity: 0;
}
  
input.BlogSearch:focus::input-placeholder {  
    opacity: 0;
}


input.BlogSearch::placeholder {
    opacity: 100%;
}
input.BlogSearch::placeholder {
    opacity: 100%;
}

input.BlogSearch::-webkit-input-placeholder {
    opacity: 100%;
}
  
input.BlogSearch:-moz-placeholder {
    opacity: 100%;
}
  
input.BlogSearch::-moz-placeholder {
    opacity: 100%;
}
  
input.BlogSearch:-ms-input-placeholder {  
    opacity: 100%;
}
  
input.BlogSearch::input-placeholder {  
    opacity: 100%;
}
div.BlogSearchAnim{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--cara);
    width: 0;
    z-index: 3;
    background-color: var(--Secondary);

    transition-property: width;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
div.BlogSearchAnim.on{
    height: var(--cara);
    width: 100%;
}

h3.nicNenalezenoBlog{
    display: none;
    font-weight: 600;
    font-size: clamp(2vw, 4vh, 4vh);
    color: var(--Text);
    margin-top: clamp(3vw, 6vh, 6vh);
    margin-left: 14vw;
}

a.BlogPrispevek{
    width: clamp(45vw, 90vh, 75vw);
    text-decoration: none;
    display: flex;
    padding: clamp(1.4vw, 2.8vh, 2.8vh);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--Secondary);
    margin-top: clamp(3vw, 6vh, 6vh);
    margin-left: 14vw;
    border: var(--Secondary) solid clamp(0.3vw, 0.6vh, 0.6vh);
    border-color: var(--Secondary);
    transition-property: border-color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    box-shadow: 0 0 clamp(0.4vw, 0.8vh, 0.8vh) #555;
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
}
a.BlogPrispevek:hover{
    border-color: var(--Primary);
    transition-duration: 0.2s;
}
a.BlogPrispevek.blogshown{
    display: flex;
}
a.BlogPrispevek{
    display: none;
}
a.BlogPrispevek h2{
    font-weight: 600;
    font-size: clamp(2vw, 4vh, 4vh);
    color: var(--Text);
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
}
a.BlogPrispevek p{
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    color: var(--Text);
}
a.BlogPrispevek p.datum{
    color: var(--Text);
    opacity: 75%;
}

div.PrispevekImg{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.PrispevekImg img{
    object-fit: contain;
    width: clamp(34vw, 68vh, 100%);
    max-height: 50vh;
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) #555);
}

@media (orientation: landscape){
    div.BlogKat a#BlogKatOdkazDomaci{
        transition-delay: 0.3s;
    }
    div.BlogKat a#BlogKatOdkazZahranicni{
        transition-delay: 0.6s;
    }
}

@media (orientation: portrait){
    div.BlogNadpis{
        
    }
    div.BlogNadpis{
        height: 18vh;
    }
    h1.BlogNadpis{
        font-size: clamp(5vw, 6.5vh, 7vh);
    }
    
    p.BlogUvod{
        width: 80%;
        text-align: left;
    }
    
    div.BlogKat{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: clamp(3vw, 4vh, 4vh);
        margin-bottom: clamp(3.5vw, 6vh, 6vh);
    }
    div.BlogKat a{
        margin: clamp(3vw, 2.5vh, 2.5vh);
    }
    div.BlogKatImg{
        height: clamp(14vw, 22vh, 22vh);
        width: clamp(14vw, 22vh, 22vh);
    }
    div.BlogKatText{
        padding: clamp(0.7vw, 1.4vh, 1.4vh);
        padding-top: calc(clamp(0.7vw, 1.2vh, 1.2vh)*1.25);
        padding-bottom: clamp(0.7vw, 1.2vh, 1.2vh);
    }
    h5.BlogKatText{
        font-size: clamp(1.5vw, 3vh, 3vh);
    }
    

    div.BlogPrispevkyNadpis{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 14vw;
        padding-right: 7vw;
    }
    h1.BlogPrispevkyNadpis{
        font-size: clamp(2.5vw, 5vh, 5vh);
        padding: clamp(0.5vw, 2vh, 2vh);
        padding-left: 0;
        padding-top: calc(clamp(0.5vw, 2vh, 2vh)*2);
    }
    
    div.BlogSearch{
        width: clamp(20.5vw, 41vh, 75vw);
        margin-top: clamp(0.5vw, 1.5vh, 1.5vh);
        margin-bottom: clamp(0.5vw, 3.5vh, 3.5vh);
    }
    input.BlogSearch{
        width: clamp(18vw, 36vh, 65vw);
    }

    h3.nicNenalezenoBlog{
        font-size: clamp(3vw, 3.5vh, 3.5vh);
        margin-top: clamp(3vw, 6vh, 6vh);
        margin-left: 14vw;
    }
    
    a.BlogPrispevek{
        width: clamp(45vw, 90vh, 75vw);
        padding: clamp(1.4vw, 2.4vh, 2.4vh);
    }
}
@media (max-width: 1200px){



    div.BlogKat a:hover img.BlogKatImg{
        height: 100%;
    }
    div.BlogKat a:hover img.BlogKatImg.vse{
        height: 65%;
    }
    div.BlogKat a:hover img.BlogKatImg.cr{
        height: 80%;
    }
    div.BlogKat a:hover img.BlogKatImg.globus{
        height: 70%;
    }
    div.BlogKat a.selected img.BlogKatImg{
        height: 110%;
        transition-duration: 0.4s;
    }
    div.BlogKat a.selected img.BlogKatImg.vse{
        height: 75%;
    }
    div.BlogKat a.selected img.BlogKatImg.cr{
        height: 90%;
    }
    div.BlogKat a.selected img.BlogKatImg.globus{
        height: 80%;
    }
    div.BlogKat a:active img.BlogKatImg{
        height: 110%;
        transition-duration: 0.4s;
    }
    div.BlogKat a:active img.BlogKatImg.vse{
        height: 75%;
        transition-duration: 0.4s;
    }
    div.BlogKat a:active img.BlogKatImg.vse{
        height: 90%;
        transition-duration: 0.4s;
    }
    div.BlogKat a:active img.BlogKatImg.vse{
        height: 80%;
        transition-duration: 0.4s;
    }

    div.BlogKat a:hover h5.BlogKatText{
        color: var(--Text);
    }
    div.BlogKat a.selected h5.BlogKatText{
        color: var(--Secondary);
        transition-duration: 0.4s;
    }
    div.BlogKat a:active h5.BlogKatText{
        color: var(--Secondary);
        transition-duration: 0.4s;
    }

    a.BlogPrispevek:hover{
        border-color: var(--Secondary);
    }
    a.BlogPrispevek:active{
        border-color: var(--Primary);
        transition-duration: 0.1s;
    }
}





/*Prispevek*/
div.PrispevekContainer{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: clamp(4vw, 8vh, 8vh);
    padding-bottom: clamp(4vw, 8vh, 8vh);
    min-height: clamp(35vw, 70vh, 70vh);
}
div.PrispevekContent{
    /*background-color: var(--Secondary);*/
    width: 75%; 
    /*box-shadow: 0 0 clamp(0.4vw, 0.8vh, 0.8vh) #555;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: clamp(6vw, 12vh, 12vh);
}

div.PrispevekNadpis{
    width: 100%;
}
div.PrispevekNadpis h1{
    text-align: center;
    font-size: clamp(2.5vw, 5vh, 5vh);
    font-weight: 700;
    color: var(--Text);
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
}

div.PrispevekUvod{
    width: 100%;
    font-weight: 700;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    line-height: 1.3;
}
div.PrispevekUvod p{
    font-weight: 700;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    line-height: 1.3;
}

div.PrispevekText{
    width: 100%;
    line-height: 1.3;
    font-weight: 400;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
}
div.PrispevekText p{
    line-height: 1.3;
    font-weight: 400;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
}
div.PrispevekText h5{
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    font-weight: 700;
}
b{
    font-weight: 700;
}
div.PrispevekText ul{
    display: block;
    list-style-type: disc;
    padding-left: calc(clamp(1.2vw, 2.4vh, 2.4vh)*2);
}
div.PrispevekText ul.cisla{
    list-style-type: decimal;
}
div.PrispevekText ul.ctverce{
    list-style-type: square;
}
div.PrispevekText ul.mala{
    list-style-type: lower-alpha;
}
div.PrispevekText ul.kruhy{
    list-style-type: circle;
}
div.PrispevekText a{
    color: var(--Text);

    line-height: 1.3;
    font-weight: 400;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);

    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    opacity: 100%;
}
div.PrispevekText a:hover{
    color: var(--Primary);
}
div.PrispevekText p.prispevekInfo{
    text-align: end;
    color: var(--Text);
    opacity: 75%;
}

@media (orientation: portrait){
    div.PrispevekContainer{
        padding-top: clamp(4vw, 5vh, 5vh);
        padding-bottom: clamp(4vw, 5vh, 5vh);
        min-height: clamp(35vw, 70vh, 70vh);
    }
    div.PrispevekContent{

    }
    div.PrispevekContent{
        width: 80%; 
        padding: clamp(6vw, 6vh, 6vh);
        padding-left: 0;
        padding-right: 0;
    }
    
    div.PrispevekNadpis h1{
        text-align: left;
    }
    
    div.PrispevekText ul{
        padding-left: calc(clamp(1.2vw, 2.4vh, 2.4vh)*1);
    }
}
@media (max-width: 1200px){


    div.PrispevekText a:hover{
        color: var(--Text);
    }
    div.PrispevekText a:active{
        transition-duration: 0.1s;
        color: var(--Primary);
    }
}


   

/*Materialy*/

div.MaterialyNadpis{
    position: relative;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
h1.MaterialyNadpis{
    text-align: center;
    font-size: clamp(4vw, 8vh, 8vh);
    font-weight: 700;
    margin-top: clamp(3vw, 6vh, 6vh);
    /*margin-bottom: clamp(5vw, 10vh, 10vh);*/
}

div.MaterialyUvod{
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
div.MatSeznam{
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-left: clamp(4vw, 6vh, 6vh);
    min-width: clamp(15vw, 30vh, 30vh);
}

a.MatSeznam{
    position: relative;
    text-decoration: none;
    color: var(--Text);
    font-size: clamp(1.05vw, 2.1vh, 2.1vh);
    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    padding: clamp(0.6vw, 1.2vh, 1.2vh);
    padding-top: calc(clamp(0.6vw, 1.2vh, 1.2vh)*1.25);
    margin: clamp(0.4vw, 0.8vh, 0.8vh);
    background-color: var(--Primary);

    border-radius: clamp(2vw, 4vh, 4vh);
}
a.MatSeznam:hover{
    color: var(--Secondary);
}

div.MatUvodText{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin-left: calc(-1*clamp(15vw, 23vh, 28vh));
}
div.MatUvodText p{
    
    color: var(--Text);
    font-size: clamp(1.5vw, 3vh, 3vh);
    width: 55%;
}




div.MaterialyCont{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100vw;
    /*margin-top: clamp(2vw, 4vh, 4vh);*/
}

div.Material{
    background-color: var(--Secondary);
    width: clamp(75vw, 150vh, 80vw); 
    box-shadow: 0 0 clamp(0.4vw, 0.8vh, 0.8vh) #555;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: clamp(6vw, 12vh, 12vh);
    padding-bottom: clamp(6vw, 12vh, 12vh);
    margin-top: clamp(5vw, 10vh, 10vh);/*edit*/
    margin-bottom: clamp(3vw, 6vh, 6vh);/*edit*/
    /*border-bottom: var(--Text) solid clamp(0.15vw, 0.3vh, 0.3vh);*/
}
div.Material.last{
    border-bottom: none;
}

div.MaterialNadpis{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(1vw, 2vh, 2vh);/*edit*/
    padding-bottom: clamp(2vw, 4vh, 4vh);
}
div.MaterialNadpis h2{
    font-size: clamp(2.5vw, 5vh, 5vh);
    font-weight: 700;
    color: var(--Text);
}

div.MaterialContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 60%;
    color: var(--Text);
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    line-height: 1.3;
}
div.MaterialContent ul{
    display: block;
    list-style-type: disc;
    padding-left: calc(clamp(1.2vw, 2.4vh, 2.4vh)*2);
}
div.MaterialContent ul.cisla{
    list-style-type: decimal;
}
div.MaterialContent ul.ctverce{
    list-style-type: square;
}
div.MaterialContent ul.mala{
    list-style-type: lower-alpha;
}
div.MaterialContent ul.kruhy{
    list-style-type: circle;
}

div.MaterialContent a{
    color: var(--Text);

    line-height: 1.3;
    font-weight: 400;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);

    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
div.MaterialContent a:hover{
    color: var(--Primary);
}
div.MaterialContent h5 a:hover{
    color: var(--Primary);
}

div.MaterialContent h5 a{
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    font-weight: 700;
}

div.MaterialContent h5{
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    font-weight: 700;
}
div.MaterialContent b{
    font-weight: 700;
}

div.MatImg{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.MatImg img{
    object-fit: contain;
    width: clamp(34vw, 68vh, 100%);
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) #555);
}

div.galerieMat{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 5;
}
div.galerieMat.show{
    display: flex;
}
div.galerieMat{
    display: none;
}
div.galerieMatContent{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 5vh;
    padding-bottom: 5vh;
}
div.galerieMatImg{
    position: relative;
}

div.galerieMatImg img.galerieImg{
    object-fit: contain;
    width: clamp(15vw, 100vh, 80vw);
    max-height: 73vh !important;
    max-width: 80vw !important;
    vertical-align: top;
}
div.galerieMatImg img.galerieImg{
    object-fit: contain;
    width: clamp(15svw, 100svh, 80svw);
    max-height: 73svh !important;
    max-width: 80svw !important;
    vertical-align: top;
}
a.galerieClose{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    text-decoration: none;
    height: clamp(2vw, 4vh, 4vh);
    transform: translate(135%, -135%);
}
a.galerieClose img{
    object-fit: contain;
    height: 100%;
}

@media (orientation: landscape){
    div.MatSeznam{
        left: calc(clamp(1.5vw, 3vh, 2.5vw)*-1);
        opacity: 0;
        transition-property: color, opacity, left;
        transition-duration: 0.4s, 1s, 1s;
        transition-timing-function: ease-out;
    }
    div.MatSeznam.show{
        opacity: 1;
        left: 0;
    }
}

@media (orientation: portrait){
    a.MatSeznam{
        left: calc(clamp(1.5vw, 3vh, 2.5vw)*-1);
        opacity: 0;
        transition-property: color, opacity, left;
        transition-duration: 0.4s, 1s, 1s;
        transition-timing-function: ease-out;
    }
    a.MatSeznam.show{
        opacity: 1;
        left: 0;
    }

    h1.MaterialyNadpis{
        text-align: center;
        font-size: clamp(5vw, 6.5vh, 7vh);
        margin-top: clamp(3vw, 6vh, 6vh);
        margin-left: clamp(0.5vw, 1vh, 1vh);
        margin-right: clamp(0.5vw, 1vh, 1vh);
    }
    
    div.MaterialyUvod{
        width: 100vw;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: clamp(2vw, 4vh, 4vh);
    }
    div.MatSeznam{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        margin-left: 0;
        min-width: clamp(15vw, 30vh, 30vh);
        margin-left: 10%;
        margin-top: clamp(2vw, 4vh, 4vh);
    }
    a.MatSeznam{
        text-decoration: none;
        color: var(--Text);
        font-size: clamp(1.05vw, 2.1vh, 2.1vh);
        padding: clamp(0.6vw, 1.2vh, 1.2vh);
        padding-top: calc(clamp(0.6vw, 1.2vh, 1.2vh)*1.25);
        margin: clamp(0.4vw, 1vh, 1vh);
        margin-left: 0;
        background-color: var(--Primary);
    
        border-radius: clamp(2vw, 4vh, 4vh);
    }
    
    div.MatUvodText{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        margin-left: 0
    }
    div.MatUvodText p{
        color: var(--Text);
        font-size: clamp(1.5vw, 3vh, 3vh);
        width: 80%;
    }
    
    
    
    
    div.MaterialyCont{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100vw;
    }
    
    div.Material{
        background-color: var(--Secondary);
        width: clamp(75vw, 150vh, 90vw); 
        box-shadow: 0 0 clamp(0.4vw, 0.8vh, 0.8vh) #555;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: clamp(6vw, 12vh, 12vh);
        padding-bottom: clamp(6vw, 12vh, 12vh);
        margin-top: clamp(5vw, 10vh, 10vh);/*edit*/
        margin-bottom: clamp(3vw, 6vh, 6vh);/*edit*/
        /*border-bottom: var(--Text) solid clamp(0.15vw, 0.3vh, 0.3vh);*/
    }
    
    div.MaterialNadpis{/**/
        display: flex;
        justify-content: center;
        align-items: center;
        padding: clamp(1vw, 2vh, 2vh);/*edit*/
        padding-bottom: clamp(2vw, 4vh, 4vh);
        padding-left: 0;
        padding-right: 0;
        width: 85%;
    }
    div.MaterialNadpis h2{/**/
        font-size: clamp(2.5vw, 4vh, 4vh);
    }
    
    div.MaterialContent{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 85%;
        color: var(--Text);
        font-size: clamp(1.2vw, 2.4vh, 2.4vh);
        line-height: 1.3;
        /*overflow: hidden;*/
    }
    div.MaterialContent ul{
        display: block;
        list-style-type: disc;
        padding-left: calc(clamp(1.2vw, 2.4vh, 2.4vh)*1);
    }
    
    div.MaterialContent a{
        line-height: 1.3;
        font-weight: 400;
        font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    }
    div.MaterialContent a:hover{
        color: var(--Primary);
    }
    div.MaterialContent h5 a:hover{
        color: var(--Primary);
    }
    
    div.MaterialContent h5 a{
        font-size: clamp(1.4vw, 2.8vh, 2.8vh);
        font-weight: 700;
    }
    
    div.MaterialContent h5{
        font-size: clamp(1.4vw, 2.8vh, 2.8vh);
        font-weight: 700;
    }

    div.MatImg{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div.MatImg img{
        object-fit: contain;
        width: clamp(34vw, 68vh, 100%);
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) #555);
    }
    
    div.galerieMat{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        z-index: 5;
    }
    div.galerieMat.show{
        display: flex;
    }
    div.galerieMat{
        display: none;
    }
    div.galerieMatContent{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.6);
        width: 100%;
        height: 100%;
        padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 5vh;
        padding-bottom: 5vh;
    }
    div.galerieMatImg{
        position: relative;
    }
    
    div.galerieMatImg img.galerieImg{
        object-fit: contain;
        width: clamp(15vw, 100vh, 80vw);
        max-height: 70vh !important;
        max-width: 73vw !important;
        vertical-align: top;
    }
    div.galerieMatImg img.galerieImg{
        object-fit: contain;
        width: clamp(15svw, 100svh, 80svw);
        max-height: 70svh !important;
        max-width: 73svw !important;
        vertical-align: top;
    }
    a.galerieClose{/**/
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        text-decoration: none;
        height: clamp(2vw, 4vh, 4vh);
        transform: translate(135%, -135%);
    }
    a.galerieClose img{
        object-fit: contain;
        height: 100%;
    }
}

@media (max-width: 1200px){
    h1.MaterialyNadpis{
        font-size: clamp(5vw, 6.5vh, 7vh);
    }
    

    
    a.MatSeznam:hover{
        color: var(--Text);
    }
    a.MatSeznam:active{
        color: var(--Secondary);
        transition-duration: 0.1s;
    }
    div.MaterialContent a:hover{
        color: var(--Text);
    }
    div.MaterialContent a:active{
        color: var(--Primary);
        transition-duration: 0.1s;
    }
    div.MaterialContent h5 a:hover{
        color: var(--Text);
    }
    div.MaterialContent h5 a:active{
        color: var(--Primary);
        transition-duration: 0.1s;
    }
}


/*Pravní texty*/
div.PravniContainer{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: clamp(4vw, 8vh, 8vh);
    padding-bottom: clamp(4vw, 8vh, 8vh);
    min-height: clamp(35vw, 70vh, 70vh);
}
div.PravniContent{
    width: 80%; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: clamp(6vw, 12vh, 12vh);
}

div.PravniNadpis{
    width: 100%;
}
div.PravniNadpis h1{
    text-align: center;
    font-size: clamp(2.5vw, 5vh, 5vh);
    font-weight: 700;
    color: var(--Text);
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
}
div.PravniText{
    width: 100%;
    line-height: 1.3;
    font-weight: 400;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
}
div.PravniText p{
    line-height: 1.3;
    font-weight: 400;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);

    padding-left: calc(clamp(1.2vw, 2.4vh, 2.4vh)*2);
}
div.PravniText h5{
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    font-weight: 700;
}

div.PravniText a{
    color: var(--Text);

    line-height: 1.3;
    font-weight: 400;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);

    transition-property: color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    opacity: 100%;
}
div.PravniText a:hover{
    color: var(--Primary);
}
div.PravniText p.PravniInfo{
    text-align: end;
    color: var(--Text);
    opacity: 75%;
}

@media (orientation: portrait){
    div.PravniContainer{
        padding-top: clamp(4vw, 5vh, 5vh);
        padding-bottom: clamp(4vw, 5vh, 5vh);
        min-height: clamp(35vw, 70vh, 70vh);
    }
    div.PravniContent{
        width: 85%; 
        padding: clamp(6vw, 6vh, 6vh);
        padding-left: 0;
        padding-right: 0;
    }
    
    div.PravniNadpis h1{
        text-align: left;
    }

    div.PravniText p{
        padding-left: calc(clamp(1.2vw, 2.4vh, 2.4vh)*1);
    }
}
@media (max-width: 1200px){
    div.PravniText a:hover{
        color: var(--Text);
    }
    div.PravniText a:active{
        transition-duration: 0.1s;
        color: var(--Primary);
    }
}