/*nacteni fontu ze souboru*/
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-Bold.ttf) format(truetype);
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-BoldItalic.ttf) format(truetype);
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-SemiBold.ttf) format(truetype);
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-SemiBoldItalic.ttf) format(truetype);
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-Medium.ttf) format(truetype);
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-MediumItalic.ttf) format(truetype);
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-Regular.ttf) format(truetype);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-Italic.ttf) format(truetype);
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-Light.ttf) format(truetype);
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'ChakraPetch';
    src: url(font/Chakra_Petch/ChakraPetch-LightItalic.ttf) format(truetype);
    font-weight: 300;
    font-style: italic;
}


:root{ /*variables*/
    --Pozadi: #1a1a1a;
    --Pozadi2: #000000;
    --Pozadi3: #4d4d4d;
    --Text: #00cc00;
    --Secondary: #ffffff;
    --Third: #009900;
    --Blue: #00cccc;/*#6c42ff  #00cccc*/
    --Highlight: #20ff20;

    --borderWidth: clamp(0.12vw, 0.2vh, 0.24vh);

    --MenuHeight: clamp(3vw, 6vh, 6vh); /*výška horní lišty (menu)*/
    --UvodFontSize: clamp(3vw, 3vh, 3vh);

    --prispevekTextIndex: 1;
    --prispevekTextColor: var(--Secondary);

    --prispevekFixedBorderIndex: 0;
    --prispevekFixedBorderPosun: 0%;
}
@media (max-aspect-ratio: 4/3){
    :root{ /*variables*/
        --MenuHeight: clamp(4.3vw, 7.5vh, 7.5vh); /*výška horní lišty (menu)*/
    }
}

/*      -----------ZACATEK VLASTNOSTI----------------*/
*{ /*pro cokoli - obecné*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'ChakraPetch', 'Chakra Petch', Helvetica, Arial, sans-serif; /*nejdrive ze souboru, pak z googlu, pak zalozni*/
    max-width: 100vw; /*na cele strance je zamezeno horizontalni scrollovani*/
    -webkit-tap-highlight-color: transparent; /*zmena barvy pozadi pri kliknuti na mobilech - zadna, kvuli estetice*/
    overscroll-behavior: none !important;
    color-scheme: dark;
}

/*Scroll bar*/
/* width */
::-webkit-scrollbar {
    width: clamp(0.6vw, 1.2vh, 1.2vh);
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--Pozadi2); 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--Pozadi3); 
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--Third); 
}
/* Handle on click */
::-webkit-scrollbar-thumb:active {
    background: var(--Text); 
}
/*-----------------------------------------*/


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;
}

div.podMenu{
    display: block;
    flex-grow: 1;
    width: 100vw;
}


/*----------------------------------------------------------------------------------------------------------*/





#topPoint{
    position: absolute;
    top: clamp(5.5vw, 5vh, 11vh);
    left: 2vw;
    height: 1vh;
    width: 1vw;
}



/*   --------------HEADER--------------*/
header.main{ /*cela horni lista*/
    z-index: 2;
    background-color: var(--Pozadi);
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--MenuHeight); 
    transition-property: height;
    transition-duration: 1s;
    max-width: 100%;
}
div.MenuLista{ /* staticky zabira misto horni listy */
    width: 100vw;
    height: var(--MenuHeight); 
}
div.main{ /*navigace na menu liště*/
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--MenuHeight);
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    visibility: visible;
}
div.main ul{ /*seznam s položkami navigace*/
    display: flex;
    width: 70%; /*plati pro nejvetsi na sirku*/
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    transition: width 1s;
    margin-right: 1.6vw;
}
div.main ul li{ /*položka navigace*/
    list-style: none;
    /*margin-left: clamp(2vw, 2vh, 4vh);
    margin-right: clamp(2vw, 2vh, 4vh);*/
    margin-top: clamp(0.29vw, 0.6vh, 0.6vh); /*clamp(min, ideal, max)*/
}
div.main ul li a{ /*odkaz/text v položce navigace*/
    text-decoration: none;
    padding-left: clamp(0.75vw, 1.5vh, 1.5vh);
    padding-right: clamp(0.75vw, 1.5vh, 1.5vh);
    color:var(--Text);
    font-size: clamp(1.5vw, 2.8vh, 3vh); 
    font-weight: 700;
    font-style: normal;
    letter-spacing: clamp(0.1vw, 0.2vh, 0.2vh);
    transition-property: color;
    transition-duration: 0.6s;
}
div.main ul li a.stred{
}
div.main ul li a:hover /*prejeti mysi na danou vec*/
{
    color: var(--Secondary);
    transition-property: color;
    transition-duration: 0.4s;
}
div.main ul li a.active /*odkaz ktery vede na totozne misto, kde se uzivatel nachazi*/
{
    pointer-events: none; /*odkaz prestane reagovat jako odkaz*/
    color: var(--Secondary);
}
div.main ul li a:active /*kliknuti*/
{
    color: var(--Secondary);
    transition-duration: 0s;
}


a.menu{ /*odkaz, ktery rozbali menu*/
    position: absolute;
    right: clamp(1.2vh, 1.3vh, 3.3vw);
    top: clamp(0.65vw, 1.25vh, 1.25vh);
    height: clamp(3.1vw, 5vh, 5vh);
    display: none;
    background-color: var(--Pozadi);
    opacity: 100%;
    padding-top: 0.3vh;
}

img.menu{ /*ikona menu*/
    content:url(ui/menu2.svg);
    object-fit: contain;
    height: 95%;
    padding-left: clamp(0.5vw, 0.75vh, 1vh);
    padding-right: clamp(0.5vw, 0.75vh, 1vh);
}

a.close{ /*odkaz, ktery zabalí menu*/
    position: absolute;
    right: clamp(2vh, 2vh, 2.5vw);
    top: clamp(0.65vw, 1.25vh, 1.25vh);
    height: clamp(3.1vw, 5vh, 5vh);
    display: none;
    background-color: var(--Pozadi);
    padding-top: 0.3vh;
}
img.close{ /*ikona zavřít*/
    content:url(ui/close2.svg);
    object-fit: contain;
    height: 95%;
    padding-left: clamp(0.5vw, 0.75vh, 1vh);
    padding-right: clamp(0.5vw, 0.75vh, 1vh);
}

@media (max-aspect-ratio: 4/3){ /*na vysku*/
    a.menu{
        display: block;
    }
    div.main{
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%);
        visibility: hidden;
    }
    div.main ul{
        flex-direction: column;
        margin-right: 0vw;
    }
    div.main ul li{
        margin-top: 8.5vh;
    }
    div.main ul li a{
        font-size: clamp(3vw, 4.5vh, 5vh); 
    }
    
}

@media (max-width: 1200px){ 
    div.main ul li a:hover
    {
        color: var(--Text);
    }
}





/*----------------------------------------------------------------------*/







/*         ---------------LANDING----------------------*/ /*POZNAMKY DOPSAT!*/
section.Landing{ /*staticky zabira misto v dokumentu, ktere predstavuje landing */
    position: static;
    overflow-x: hidden;
    width: 100vw;
    height: 100vh;
    transition-property: height;
    transition-duration: 0s;/*puvodne: 0.3s*/
    background-color: #000;
}
div.Landing{ /*obsah landingu v defaultu*/
    overflow-x: hidden;
    overflow-y: hidden !important;
    position: absolute;
    top: var(--MenuHeight);
    left: 0;
    width: 100vw;
    min-height: 94vh;
    object-fit: cover;
}
section.Landing img.LandingBG{ /*default bg image*/
    width: 100vw;
    min-height: 94vh;
    object-fit: cover;
    overflow-x: hidden;
}

div.LandingFullCont{ /*obsah landingu ve full*/
    z-index: 0; 
    overflow-x: hidden;
    overflow-y: hidden !important;
    position: absolute;
    top: var(--MenuHeight);
    left: 0;
    width: 100vw;
    min-height: 94vh;
    object-fit: cover;
    clip-path: circle(0%);
    transition-duration: 0.5s;
    transition-property: clip-path;
    transition-timing-function: ease-in;
}
div.StredClicked{ /*class, ktera je pridana/odebrana v js, zajistuji animaci landing backgroundu*/
    clip-path: circle(100%);
    transition-duration: 1s;
    transition-timing-function: ease-out;
}
section.Landing img.LandingBGFull{ /*full bg image*/
    width: 100vw;
    min-height: 94vh;
    object-fit: cover;
    overflow-x: hidden;
}

div.StredContainer{ /*obsah ve stredu: nadpis, logo, stred*/
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.MainStred{ /*vycentrovany div s velikosti urcujici rozlozeni stredu*/
    width: clamp(25vw, 48vh, 55vh);
    height: clamp(18vw, 33vh, 36vh);
    margin-top: 3vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    opacity: 100%;
}
h1.MainNadpis{ /*main Nadpis*/
    font-size: clamp(3.3vw, 5.8vh, 6.6vh);
    font-weight: 700;
    font-style: normal;
    letter-spacing: clamp(0.1vw, 0.2vh, 0.2vh);
    color: var(--Text);
    opacity: 100%;
    transition-property: opacity;
    transition-duration: 0.75s;
    transition-delay: 0.5s;
    /*filter: drop-shadow(0 0 0.1vw var(--Text));*/
}
p.StredContainerText{ /*text v landingu*/
    font-size: clamp(1.1vw, 2vh, 2.4vh);
    font-weight: 500;
    font-style: italic;
    letter-spacing: clamp(0.05vw, 0.1vh, 0.1vh);
    color: var(--Secondary);
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0.75s;
    margin-bottom: clamp(1.5vw, 3vh, 3vh);
    opacity: 0.7;
}
section.Landing img.MainLogo{ /*main logo*/
    height: clamp(12vw, 21vh, 24vh);
    object-fit: contain;
    transition-property: transform, scale;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}

@media (max-width: 1200px){
    img.MainLogo{
        transition-duration: 0.75s !important;
    }
    a.stredOdkaz:hover ~ img.MainLogo{ /*hover*/
        transition-duration: 1s !important;
    }
    a.stredOdkaz:hover + h1.MainNadpis{ /*hover*/
        transition-duration: 0.35s !important;
    }
}

a.stredOdkaz{ /*prostor okolo stredu, reagujici na mys, click effect v js*/
    z-index: 1; 
    position:absolute;
    width: clamp(26vw, 47vh, 48vh);
    height: clamp(20.5vw, 40vh, 45vh);
    transform: translateY(-10%);
    cursor: pointer; /*jako na odkazu, protoze odkaz realne nema zadny odkaz, odkaz je vytvoren az v js*/
    animation-name: Skryt;
    background-color: rgba(153, 50, 204, 0);
    -webkit-tap-highlight-color: transparent;
}
a.stredOdkaz:hover + h1.MainNadpis{ /*hover*/
    opacity: 0%;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-delay: 0s;
}
a.stredOdkaz:hover ~ p.StredContainerText{ /*hover*/
    opacity: 0%;
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-delay: 0s;
}
a.stredOdkaz:hover ~ img.MainLogo{ /*hover*/
    transition-property: scale, transform;
    transition-duration: 1.75s;
    transition-timing-function: ease-out;
    scale: 1.5;
    transform: translateY(-25%);
}

/*------------------------------------------------------------------------------------------------*/




/*           -----------------O KALISTENICE----------------------*/ 
div.KalistenikaS{
    width: 100vw;
}
div.VetaCont{
    width: 100vw;
    min-height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Pozadi2);
    border-color: var(--Pozadi2);
}
h2.Veta{ 
    color: var(--Text);
    font-size: clamp(3.8vw, 4.6vh, 5.6vh);
    font-style: italic;
    font-weight: 300;
    margin-left: clamp(1.5vw, 2.5vh, 3vh);
    margin-right: clamp(1.5vw, 2.5vh, 3vh);
    margin-top: clamp(2vw, 3vh, 4vh);
    margin-bottom: clamp(2vw, 3vh, 4vh);
    text-align: center;
    opacity: 0;
    transition-property: opacity, scale;
    transition-duration: 1.5s;
    scale: 0.95;
    transition-timing-function: ease-out;
}
h2.Veta.Show{
    opacity: 100%;
    scale: 1;
}
a.OKalistenice{
    position: absolute;
    left: 50vw;
}
div.UvodTextCont{ 
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 20vh;
    flex-direction: row;
    background-color: var(--Pozadi);
    margin-top: clamp(2.5vw, 3vh, 5vh);
    margin-bottom: 0;
}
div.UvodTextCont2{ 
    margin-top: 0;
    margin-bottom: clamp(2vw, 3vh, 4vh);
}
div.KalistenikaUvod{ 
    width: 40vw;
    margin-left: 6vw;
    border-style: solid;
    border-width: 0;
    border-right-width: 0;
    border-color: var(--Text);
}
div.StrankaUvod{ 
    width: 40vw;
    margin-right: 4vw;
    border-style: solid;
    border-width: 0;
    border-left-width: 0;
    border-color: var(--Text);
}

div.ImgUvod{ 
    width: clamp(40vh, 26vw, 26vw);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(2vw, 3vh, 4vh);
    margin-bottom: clamp(2vw, 3vh, 4vh);
    margin-left: 6vw;
    margin-right: 13vw;
}
div.ImgUvod2{
    margin-left: 11vw;
    margin-right: 9vw;
}

img.PlancheUvod{
    width: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translateX(20%);
    margin-left: 0;
    margin-right: 0;
    transition-property: opacity, margin, transform;
    transition-duration: 0.5s;
    overflow: hidden;
}
img.FLUvod{
    transform: translateX(-20%);
}
img.PlancheUvod.Show{
    opacity: 100%;
    transform: translateX(0);
    margin-left: 0;
    margin-right: 0;
}

div.UvodTextBg{ 
    position: relative;
    padding: 5px;
}
p.UvodText{
    padding-top: clamp(2vw, 3vh, 4vh);
    padding-bottom: clamp(2vw, 3vh, 4vh);
    padding-left: clamp(1.5vw, 2.5vh, 3vh);
    padding-right: clamp(1.25vw, 2vh, 2.5vh);
    text-align: left;
    color: var(--Secondary);
    font-size:clamp(1.45vw, 2.5vh, 2.9vh);
}

@media (max-aspect-ratio: 4/3){ 
    h2.Veta{
        font-size: clamp(4vw, 4.5vh, 9.9vw);
        margin-left: clamp(2vw, 3vh, 4vh);
        margin-right: clamp(2vw, 3vh, 4vh);
        margin-top: clamp(2vw, 3vh, 4vh);
        margin-bottom: clamp(2vw, 3vh, 4vh);
        opacity: 0;
        scale: 0.95;
        transition-property: opacity, scale;
        transition-duration: 1.5s;
        transition-timing-function: ease-out;
    }
    h2.Veta.Show{
        opacity: 100%;
        scale: 1;
    }
    div.UvodTextCont{
        flex-direction: column;
        margin-top: 5vh;
        margin-bottom: clamp(1vw, 2vh, 2vh);
    }
    div.UvodTextCont2{
        flex-direction: column-reverse;
        margin-top: clamp(0.5vw, 1vh, 1vh);
        margin-bottom: clamp(2vw, 3vh, 4vh);
    }
    div.KalistenikaUvod{
        width: 100vw;
        margin-left: 0;
    }
    div.StrankaUvod{
        width: 100vw;
        margin-right: 0;
    }
    div.ImgUvod{
        width: 100vw;
        margin-left: 0;
        margin-right: 0;
        margin-top: 3vh;
        margin-bottom: 1vh;
    }
    div.ImgUvod2{
        margin-bottom: 2.5vh;
    }

    img.PlancheUvod{
        width: clamp(40vw, 40vh, 75vw);
        transform: translateX(0);
        margin-left: 20%;
    }
    img.FLUvod{
        transform: translateX(0);
        margin-right: 20%;
        margin-left: 0;
    }
    img.PlancheUvod.Show{
        opacity: 100%;
        transform: translateX(0);
        margin-left: 0;
        margin-right: 0;
    }

    p.UvodText{
        margin-top: clamp(1vw, 1vh, 2vh);
        margin-bottom: clamp(1vw, 1vh, 2vh);
        margin-left: clamp(2.5vw, 3.5vh, 5vh);
        margin-right: clamp(2.5vw, 3.5vh, 5vh);
        text-align: left;
        padding-top: clamp(0.25vw, 0.5vh, 0.5vh);
        padding-bottom: clamp(0.25vw, 0.5vh, 0.5vh);
        padding-left: clamp(1.5vw, 2.5vh, 3vh);
        padding-right: clamp(0.25vw, 0.5vh, 0.5vh);
        font-size: clamp(2vw, 2.7vh, 4vh);
    }
    p.OKali{
        margin-bottom: clamp(1vw, 1vh, 2vh);
    }
    p.OStrance{
        margin-top: clamp(1vw, 1vh, 2vh);
    }
}

a.novePrispevkyFloating{
    position: absolute;
    right: clamp(2vw, 2vh, 4vh);
    top: 90vh;
    background-color: var(--Pozadi2);
    color: var(--Secondary);
    padding: clamp(0.75vw, 1.1vh, 1.5vh) clamp(1vw, 1.6vh, 2vh);
    text-decoration: none;
    font-size: clamp(1.5vw, 2.75vh, 3vh);
    border-radius: clamp(0.75vw, 1.5vh, 1.5vh);
    box-shadow: 0 0 clamp(1vw, 1.25vh, 2vh) var(--Pozadi2);
    transition-property: color, box-shadow, opacity;
    transition-duration: 0.6s, 0.6s, 0.5s;
    transition-timing-function: ease-out;
    z-index: 3;
    opacity: 1;
}

a.novePrispevkyFloating.hide{
    opacity: 0;
    transition-duration: 0.6s, 0.6s, 0.3s;
}

@media (min-width: 1200px){
    a.novePrispevkyFloating:hover{
        color: var(--Highlight);
        box-shadow: 0 0 clamp(1.5vw, 2.25vh, 3vh) var(--Pozadi2);
    }
}

a.novePrispevkyFloating:active{
    color: var(--Text);
    transition-duration: 0.1s;
}


/*------------------------------------------------------------------------------------------------*/


div.motText{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(5vw, 8vh, 10vh);
    margin-bottom: clamp(4.5vw, 7vh, 9vh);
}
div.motText p{
    color: var(--Text);
    text-align: center;
    font-size: clamp(3.5vw, 4.5vh, 7vh);
    font-weight: 600;
    margin-left: 3vw;
    margin-right: 3vw;
    letter-spacing: clamp(0.1vw, 0.2vh, 0.2vh);
    opacity: 0;
    line-height: 1.3;
}
div.motText p span{
    color: var(--Secondary);
    font-weight: 500;
    font-style: italic;
}
div.motText p.Show{
    opacity: 100%;
    transition-property: opacity;
    transition-duration: 1s;
    animation-timing-function: ease-out;
}





/*               -----------------------------PRISPEVKY-----------------------       */

div.Prispevky{
    padding-top: clamp(2vw, 4vh, 4vh);
    padding-bottom: clamp(2.2vw, 3.5vh, 4.4vh);
    border-top: none;
    border-width: clamp(0.5vw, 1vh, 1vh);
    border-color: #000;
    width: 100vw;
}
a.linkPrispevky{
    position: absolute;
    width: 10vw;
    height: 10vh;
    transform: translateY(-7.5vh);
}
div.PrispevkyContent{
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: clamp(2.6vw, 5.2vh, 5.2vh);
    padding-bottom: clamp(1.75vw, 3.5vh, 3.5vh);
    overflow-x: auto;
    padding-left: 4.5vw;
    padding-right: 4.5vw;
}
/* width */
.PrispevkyContent::-webkit-scrollbar {
    height: clamp(0.5vw, 1vh, 1vh);
}
/* Track */
.PrispevkyContent::-webkit-scrollbar-track {
    background: #000; 
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    margin-left: 4.5vw;
    margin-right: 4.5vw;
}
/* Handle */
.PrispevkyContent::-webkit-scrollbar-thumb {
    background:  var(--Pozadi3);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
}
  
/* Handle on hover */
.PrispevkyContent::-webkit-scrollbar-thumb:hover {
    background: var(--Text); 
}
/* Handle on click*//*
    .PrispevkyContent::-webkit-scrollbar-thumb:active {
    background: var(--Text); 
}*/

div.PrispevkyContent.Show a.MPO1{
    opacity: 100%;
    transition-duration: 1s;
    transition-delay: 0s;
    animation-timing-function: ease-out;
}
div.PrispevkyContent.Show a.MPO2{
    opacity: 100%;
    transition-duration: 1s;
    transition-delay: 0.3s;
    animation-timing-function: ease-out;
}
div.PrispevkyContent.Show a.MPO3{
    opacity: 100%;
    transition-duration: 1s;
    transition-delay: 0.6s;
    animation-timing-function: ease-out;
}


div.MainPrispevek{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: clamp(25vw, 35vh, 35vh);
    border-style: solid;
    border-color: #000;
    border-width: 0;
    border-radius: clamp(1vw, 2vh, 2vh);
    background-color: #000;
    overflow: hidden;
    transition-property: transform, box-shadow;
    transition-duration: 0.5s;
    box-shadow: 0 0 clamp(1vw, 1.25vh, 2vh) var(--Pozadi2);
}

img.MainPrispevekImg{
    object-fit: cover;
    overflow: hidden;
    width: 100%;
}
h2.PrispevkyNadpis{
    color: var(--Text);
    font-size: clamp(2.5vw, 3.75vh, 5vh);
    font-weight: 500;
    margin-left: 3vw;
    margin-right: 3vw;
    background-color: #000;
    padding-left: clamp(0.6vw, 1.2vh, 1.2vh);
    padding-bottom: clamp(0.4vw, 0.8vh, 0.8vh);
    padding-top: clamp(0.4vw, 0.8vh, 0.8vh);
}
a.MainPrispevekOdkaz{
    color: transparent;
    opacity: 0;
    transition-property: opacity;
}

h4.MainNazevPrispevku{
    text-align: center;
    color:var(--Text);
    width: 100%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    background-color: #000;
    font-size: clamp(1.5vw, 3vh, 3vh);
    font-weight: 500;
    overflow: hidden;
    transition-property: background-color, color;
    transition-duration: 0.5s;
}
h5.ZobrazitVsechny{
    text-align: left;
    color:var(--Secondary);
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-left: 3vw;
    margin-top: clamp(1vw, 2vh, 2vh);
    font-size: clamp(1.5vw, 2.75vh, 3vh);
    font-weight: 500;
    opacity: 0%;
    transform: translateX(2vw);
    transition-property: opacity, transform;
}
h5.ZobrazitVsechny a{
    color: var(--Secondary);
    text-decoration: none;
    background-color: #000;
    padding: clamp(0.6vw, 1.2vh, 1.2vh);
    border-radius: clamp(0.75vw, 1.5vh, 1.5vh);
    transition-property: color;
    transition-timing-function: ease-out;
    transition-duration: 0.6s;
    opacity: 0.9;
}

h5.ZobrazitVsechny.Show{
    opacity: 100%;
    transition-duration: 1s;
    transition-delay: 0.3s;
    animation-timing-function: ease-in-out;
    transform: translateX(0%);
}

div.PrispevkyMezera{
    min-width: clamp(5vw, 6vh, 6vh);
}

a.PomocnyPrispevek{
    opacity: 0 !important;
    pointer-events: none;
}

@media (max-aspect-ratio: 4/3){ 
    a.PomocnyPrispevek.Kat{
        display: none;
    }
    div.PrispevkyContent{
        padding-top: clamp(3vw, 3vh, 3vh);
        padding-bottom: clamp(3vw, 3vh, 3vh);
    }
    div.PrispevkyMezera{
        min-width: clamp(4vw, 4vh, 4vh);
    }
    div.MainPrispevek{
        width: clamp(27vw, 33vh, 33vh);
        border-width: 0;
        border-radius: clamp(2vw, 2vh, 2vh);
    }
    img.MainPrispevekImg{
       
    }
    h2.PrispevkyNadpis{
        margin-left: 3vw;
    }
    h4.MainNazevPrispevku{
        font-size: clamp(2.3vw, 2.7vh, 2.7vh);
    }

    h5.ZobrazitVsechny{
        padding-top: clamp(0.5vw, 1.5vh, 1.5vh);
        padding-bottom: clamp(0.5vw, 1.5vh, 1.5vh);
        margin-left: 3vw;
        margin-top: clamp(0.5vw, 2vh, 2vh);
        font-size: clamp(2vw, 3vh, 3vh);
        text-align: left;
        transform: translateX(3vw);
    }
    h5.ZobrazitVsechny a{
        padding: clamp(0.75vw, 1vh, 1.5vh);
    }
    a.linkPrispevky{
        position: absolute;
        width: 10vw;
        height: 10vh;
        transform: translateY(-10vh);
    }
}

@media (min-width: 1200px){
    a.MainPrispevekOdkaz:hover div.MainPrispevek {
        box-shadow: 0 0 clamp(1.75vw, 2.75vh, 3.5vh) var(--Pozadi2);
        transform: scale(1.05);
        transition-duration: 0.3s;
    }
    h5.ZobrazitVsechny a:hover{
        color: var(--Highlight);
        transition-duration: 0.5s;
    }
}
a.MainPrispevekOdkaz:active div.MainPrispevek {
    box-shadow: 0 0 clamp(1.75vw, 2.75vh, 3.5vh) var(--Pozadi2);
    transform: scale(1.05);
    transition-duration: 0.1s;
}
h5.ZobrazitVsechny a:active{
    color: var(--Highlight);
    transition-duration: 0.1s;
}


/*------------------------------------------------------------------------------------------------------*/







/*         --------------------KATEGORIE-------------------------         */

div.kategorie{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: clamp(0.25vw, 0.5vh, 0.5vh);
    padding-bottom: 0;
}

h2.KategorieNadpis{
    color: var(--Text);
    font-size: clamp(2vw, 3.5vh, 4vh);
    font-weight: 500;
    margin-left: clamp(1vw, 2vh, 2vh);
    margin-top: clamp(2vw, 4vh, 4vh);
    padding-left: clamp(0.3vw, 0.6vh, 0.6vh);
    padding-top: clamp(0.3vw, 0.6vh, 0.6vh);
}
div.kategorieItem{
    overflow: hidden;
    border-radius: clamp(1vw, 2vh, 2vh);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #000;
    box-shadow: 0 0 clamp(1vw, 1.25vh, 2vh) var(--Pozadi2);
    margin: clamp(1.7vw, 2vh, 3.4vh);
    margin-top: clamp(1vw, 1.5vh, 2vh);
}
div.KategorieItemImageCont{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 12.7vw;
    height: calc(12.7vw / 1.5);
    border-radius: clamp(1vw, 2vh, 2vh) clamp(1vw, 2vh, 2vh) 0 0;
}
img.KategorieImg{
    object-fit: contain;
    width: 100%; 
    transition-property: scale;
    transition-duration: 1s;
    z-index: 0;
}
a.KategorieOdkaz{
    color: transparent;
}
@media (min-width: 1200px){
    a.KategorieOdkaz:hover h4.Nazevkategorie{
        color: var(--Secondary);
        transition-duration: 0.5s;
    }
    a.KategorieOdkaz:hover img.KategorieImg {
        scale: 1.15;
    }
}

a.KategorieOdkaz.active h4.Nazevkategorie{
    color: var(--Secondary);
    transition-duration: 0.5s;
}
a.KategorieOdkaz.active img.KategorieImg{
    scale: 1.15;
}
a.KategorieOdkaz:active h4.Nazevkategorie{
    color: var(--Secondary);
    transition-duration: 0.1s;
}
a.KategorieOdkaz:active img.KategorieImg{
    scale: 1.15;
}
h4.Nazevkategorie{
    z-index: 1;
    overflow: hidden;
    text-align: center;
    color:var(--Text);
    width: 100%;
    padding-top: clamp(0.25vw, 0.5vh, 0.5vh);
    padding-bottom: clamp(0.225vw, 0.45vh, 0.45vh);
    background-color: #000;
    font-size: clamp(1vw, 1.9vh, 2vh);
    font-weight: 500;
    transition-property: background-color, color;
    transition-duration: 0.5s;
}




@media (max-aspect-ratio: 4/3){
    div.kategorie{
        padding-top: clamp(0.25vw, 0.5vh, 0.5vh);
        padding-bottom: 0;
        flex-wrap: wrap;
        padding-left: 4vw;
        padding-right: 4vw;
    }
    div.kategorieItem{
        border-radius: clamp(3vw, 3vh, 3vh);
        margin: clamp(1.5vw, 2vh, 3vh);
    }
    div.KategorieItemImageCont{
        width: clamp(20vw, 20vh, 40vh);
        height: calc(clamp(20vw, 20vh, 40vh) / 1.5);
        border-radius: clamp(3vw, 3vh, 3vh) clamp(3vw, 3vh, 3vh) 0 0;
    }
    h4.Nazevkategorie{
        font-size: clamp(1.2vw, 2vh, 2.4vh);
        padding-top: clamp(0.4vw, 0.6vh, 0.5vh);
        padding-bottom: clamp(0.4vw, 0.6vh, 0.5vh);
    }
    h2.KategorieNadpis{
        font-size: clamp(5vw, 4vh, 4vh);
        margin-left: clamp(1vw, 1vh, 1vh);
        margin-top: clamp(4vw, 4vh, 4vh);
    }
}

div.kategorieSettingsCont{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 3.5vw;
    padding-right: 3.5vw;
    width: 100%;
    min-height: clamp(2.25vw, 4vh, 4.5vh);
    position: relative;
    margin-top: clamp(0.75vw, 1.5vh, 1.5vh);
    margin-bottom: clamp(2vw, 3vh, 4vh);
}
div.kategorieSettings{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition-property: opacity, height;
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
    height: 0;
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
    padding-left: clamp(4vw, 4vh, 8vh);
    padding-right: clamp(4vw, 4vh, 8vh);
    overflow: hidden;
}
div.kategorieSettings.open{
    transition-duration: 0.3s;
    opacity: 1;
    height: auto;
}
div.katSettingsGroup{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
div.prispevekSettingsItem.katSetting{
    margin: clamp(1vw, 2vh, 2vh);
    margin-left: clamp(4vw, 4vh, 8vh);
    margin-right: clamp(4vw, 4vh, 8vh);
}
div.prispevekSettingsItem.katSetting div.prispevekSettingsNabidkaItem{
    padding-left: clamp(0.4vw, 0.5vh, 0.8vh);
    padding-right: clamp(0.4vw, 0.5vh, 0.8vh);
}
div.prispevekSettingsItem.katSetting p.prispevekSettingsNabidkaItemText{
    font-size: clamp(1vw, 1.7vh, 2vh);
    margin: clamp(0.35vw, 0.4vh, 0.7vh);
}


div.NadPrispevkyKat{ 
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #000;
    padding-top: clamp(0.5vw, 1vh, 1vh);
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
}
h2.NadPrispevkyNadpis{
    color: var(--Text);
    font-size: clamp(2.2vw, 4.4vh, 4.4vh);
    font-weight: 500;
    margin-left: clamp(1vw, 2vh, 2vh);
    padding-left: clamp(0.3vw, 0.6vh, 0.6vh);

}
div.vyhledavaniContent{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-right: clamp(0.3vw, 0.6vh, 0.6vh);
    margin-right: clamp(2vw, 4vh, 4vh);
}
p.vyhledavaniPopis{
    text-align: left;
    color:var(--Secondary);
    font-weight: 500;
    font-size: clamp(1.3vw, 2vh, 2.6vh);
}
input.vyhledavaniInput{
    padding: clamp(0.2vw, 0.4vh, 0.4vh);
    background-color: var(--Pozadi);
    border-width: 0;
    color:var(--Text);
    font-weight: 400;
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    resize: none;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    width: clamp(25vw, 40vh, 75vw);
}
input.vyhledavaniInput:focus{
    background-color: #404040;
    border-color: var(--Text);
    outline: none !important;
}
input.vyhledavaniInput:focus::-webkit-input-placeholder{
    color:#000;
}
input.vyhledavaniInput:focus::placeholder{
    color:#000;
}





@media (max-aspect-ratio: 4/3){
    div.NadPrispevkyKat{ 
        padding-top: clamp(1vw, 1vh, 1vh);
        padding-bottom: clamp(1vw, 1vh, 1vh);

        flex-direction: column;
        align-items:flex-start;
        justify-content: flex-start;
    }
    h2.NadPrispevkyNadpis{
        font-size: clamp(3vw, 3vh, 6vh);
        margin-left: clamp(1vw, 1vh, 1vh);
    }
    div.vyhledavaniContent{
        margin-right: clamp(1vw, 1vh, 1vh);
        margin-top: clamp(1vw, 1.5vh, 2vh);
    }
    p.vyhledavaniPopis{ 
        padding-left: clamp(1vw, 1vh, 1vh);
        margin-left: clamp(1vw, 1vh, 1vh);
        
    }
    input.vyhledavaniInput{
        padding: clamp(0.6vw, 0.6vh, 0.6vh);
        border-radius: clamp(0.8vw, 0.8vh, 0.8vh);
    }
}


h2.Zadne{
    color: var(--Text);
    font-size: clamp(1.8vw, 3.3vh, 3.3vh);
    font-weight: 500;
    text-align: center;
    width: 100vw;
    display: none;
}
h2.Zadne.Show{
    display: block;
}

div.PrispevkyKat{
    min-height: 50vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: clamp(3vw, 4vh, 6vh);
    padding-bottom: clamp(2vw, 3vh, 4vh);
    overflow-x: hidden;
    padding-left: 3vw;
    padding-right: 3vw;
    opacity: 1;
    transition-property: opacity;
    transition-timing-function: ease-out;
    transition-duration: 1s;
}
a.KatPrispevekOdkaz{
    margin-right: clamp(3.5vw, 2.5vh, 7vh);
    margin-left: clamp(3.5vw, 2.5vh, 7vh);
    margin-bottom: clamp(4vw, 5vh, 8vh);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
a.KatPrispevekOdkaz.HideKat{
    opacity: 0;
    display: none;
}
a.KatPrispevekOdkaz.HideUr{
    opacity: 0;
    display: none;
}
a.KatPrispevekOdkaz.HideS{
    opacity: 0;
    display: none;
}
div.KatPrispevek{
    width: clamp(23vw, 40vh, 80vw);
    border-style: solid;
    border-radius: clamp(1vw, 2vh, 2vh);
    background-color: #000;
    overflow: hidden;
    transition-property: box-shadow, transform;
    transition-duration: 0.5s;
    border-width: 0;
    box-shadow: 0 0 clamp(1vw, 1.25vh, 2vh) var(--Pozadi2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

@media (min-width: 1200px){
    a.KatPrispevekOdkaz:hover div.KatPrispevek{
        box-shadow: 0 0 clamp(1.75vw, 2.75vh, 3.5vh) var(--Pozadi2);
        transform: scale(1.05);
        transition-duration: 0.3s;
    }
}
a.KatPrispevekOdkaz:active div.KatPrispevek{
        box-shadow: 0 0 clamp(1.75vw, 2.75vh, 3.5vh) var(--Pozadi2);
        transform: scale(1.05);
        transition-duration: 0.3s;
    }

img.KatPrispevekImg{
    object-fit: cover;
    overflow: hidden;
    width: 100%;
    border-radius: clamp(1vw, 2vh, 2vh) clamp(1vw, 2vh, 2vh) 0 0;
}
div.KatPrispevekText{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: clamp(1vw, 1.5vh, 2vh);
    padding-right: clamp(0.5vw, 0.75vh, 1vh);
    padding-top: clamp(0.5vw, 0.8vh, 1vh);
    padding-bottom: clamp(0.5vw, 0.8vh, 1vh);
    width: 100%;
}
h4.KatNazevPrispevku{
    text-align: left;
    color:var(--Text);
    width: 100%;
    margin-bottom: clamp(0.5vw, 0.8vh, 1vh);
    margin-top: clamp(0.25vw, 0.3vh, 0.5vh);
    background-color: #000;
    font-size: clamp(1.6vw, 2.9vh, 3.2vh);
    font-weight: 500;
    overflow: hidden;
}
div.InfoPItemKat{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0.5vh;
}
p.infoNadpisKat{
    text-align: left;
    color:var(--Secondary);
    font-weight: 500;
    font-size: clamp(1.2vw, 2vh, 2.4vh);
}
p.infoTextKat{
    text-align: left;
    color:var(--Text);
    font-weight: 500;
    font-size: clamp(1vw, 1.8vh, 2vh);
    padding-left: clamp(0.6vw, 1.2vh, 1.2vh);
    max-width: clamp(12vw, 24vh, 24vh);
}



/*----------------------------------------------------------------------------------------------------------*/






/*                --------------------PRISPEVEK-----------------------       */
div.Cara{ 
    width: 100vw;
    background-color: #000;
    height: clamp(0.5vw, 1vh, 1vh); 
}


div.prispevekSettingsCont{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10vw;
    padding-right: 10vw;
    width: 100%;
    min-height: clamp(2.25vw, 4vh, 4.5vh);
    position: relative;
    margin-top: clamp(2vw, 3vh, 4vh);
    margin-bottom: clamp(2.75vw, 4.25vh, 5.5vh);
}
a.prispevekSettingsToggle{
    position: absolute;
    height: clamp(2.25vw, 4vh, 4.5vh);
    width: clamp(2.25vw, 4vh, 4.5vh);
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    z-index: 1;
}
a.prispevekSettingsToggle img{
    object-fit: contain;
    height: 100%;
    position: absolute;
    opacity: 100%;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
a.prispevekSettingsToggle.open img{
    
}
a.prispevekSettingsToggle img.open{
    opacity: 0%;
}
a.prispevekSettingsToggle.open img.open{
    opacity: 100%;
}
@media(min-width: 1200px){
    a.prispevekSettingsToggle:hover{
        transition-duration: 0.5s;
        transform: rotate(90deg);
    }
}
a.prispevekSettingsToggle:active{
    transition-duration: 0.1s;
    transform: rotate(90deg);
}


div.prispevekSettings{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transition-property: opacity, height;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: clamp(1vw, 1.5vh, 2vh);
    padding-left: clamp(4vw, 6vh, 8vh);
    padding-right: clamp(4vw, 6vh, 8vh);
}
div.prispevekSettings.open{
    transition-duration: 0.3s;
    opacity: 1;
    height: auto;
}
div.prispevekSettingsItem{
    margin: clamp(1vw, 2vh, 2vh);
    margin-left: clamp(4vw, 4vh, 8vh);
    margin-right: clamp(4vw, 4vh, 8vh);
}
div.prispevekSettingsItem h4{
    color: var(--Secondary);
    font-weight: 500;
    text-align: center;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    padding-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
}
div.prispevekSettingsNabidka{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
div.prispevekSettingsNabidkaItem{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Pozadi2);
    border-style: solid;
    border-color: var(--Pozadi2);
    border-width: var(--borderWidth);
    transition-property: border-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    cursor: pointer;
    padding-left: clamp(0.5vw, 0.75vh, 1vh);
    padding-right: clamp(0.5vw, 0.75vh, 1vh);
}
div.prispevekSettingsNabidkaItem.l{
border-radius: clamp(0.5vw, 1vh, 1vh) 0 0 clamp(0.5vw, 1vh, 1vh);
}
div.prispevekSettingsNabidkaItem.r{
border-radius: 0 clamp(0.5vw, 1vh, 1vh) clamp(0.5vw, 1vh, 1vh) 0;
}
div.prispevekSettingsNabidkaItem.selected{
    border-color: var(--Text);
}
@media(min-width: 1200px){
    div.prispevekSettingsNabidkaItem:hover{
        border-color: var(--Text);
    }
}
div.prispevekSettingsNabidkaItem:active{
        border-color: var(--Text);
    }

div.prispevekSettingsNabidkaItemBarva{
    width: clamp(1.2vw, 2vh, 2.4vh);
    height: clamp(1.2vw, 2vh, 2.4vh);
    margin: clamp(0.5vw, 0.75vh, 1vh);
    border-radius: 50%;
}
div.prispevekSettingsNabidkaItemBarva.zelena{
    background-color: var(--Text);
}
div.prispevekSettingsNabidkaItemBarva.bila{
    background-color: var(--Secondary);
}
p.prispevekSettingsNabidkaItemText{
    color: var(--Text);
    font-weight: 500;
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    margin: clamp(0.35vw, 0.5vh, 0.7vh);
}

div.contentOkraj{
    
    display: flex;
    background-color: var(--Pozadi);
    

    border-color: var(--Pozadi2);
    border-width: clamp(0.5vw, 0.75vh, 1vh);
    border-style: none none none solid;
    min-height: 100vh;
    margin-left: 10vw;
    margin-right: 0;
}
div.contentOkraj.full{
    border-color: var(--Text);
}
div#prispevekFixedBorder{
    opacity: 0;
    position: fixed;
    top: 0;
    background-color: var(--Text);
    background: linear-gradient(to bottom, var(--Text) calc(100%*var(--prispevekFixedBorderIndex)), var(--Pozadi2) calc(100%*var(--prispevekFixedBorderIndex) + var(--prispevekFixedBorderPosun)));
    width: clamp(0.5vw, 0.75vh, 1vh);
    height: 100vh;
    z-index: 0;
    left: 10vw;
}
div#prispevekFixedBorder.show{
    opacity: 1;
}
div.content{
    margin-left: clamp(3vw, 2vh, 6vh);
    width: 100%;
}

div.horniContent{
    /*display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap-reverse;
    margin-bottom: 5vh;
    width: min-content;
    overflow: hidden;
    clip-path: polygon(
    0 4%,
    5% 0,
    95% 0,
    100% 4%,
    100% 96%,
    95% 100%,
    5% 100%,
    0% 96%,
    0% 4%
    );
    background-color: var(--Pozadi2);
    max-width: 85vw;
}

div.horniContentLeft{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: clamp(20vw, 30vh, 40vh);
    padding-left: clamp(1.5vw, 2vh, 3vh);
    padding-right: clamp(2vw, 2vh, 4vh);
    padding-top: clamp(1vw, 2vh, 2vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
}

@media (min-aspect-ratio: 4/3){
    div.horniContent{
        /*display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;*/
        clip-path: polygon(
            0 5%,
            2% 0,
            98% 0,
            100% 5%,
            100% 95%,
            98% 100%,
            2% 100%,
            0% 95%,
            0% 5%
        );
        width: fit-content;
    }
    div.horniContentLeft{
        width: clamp(45vw, 68vh, 90vh);
    }
}

div.horniContentSimple{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-right: clamp(2vw, 2vh, 4vh);
    padding-top: clamp(1vw, 2vh, 2vh);
    padding-bottom: clamp(3vw, 4vh, 6vh);
    margin-top: clamp(4vw, 4vh, 8vh);
}

h1.NadpisPrispevku{
    text-align: left;
    color:var(--Text);
    font-weight: 500;
    font-size: clamp(3.3vw, 4.9vh, 6.6vh); 
}

div.InfoPrispevek{
    padding: clamp(0.8vw, 1.4vh, 1.6vh); 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0;
}
div.InfoPItem{

}
p.infoNadpis{
    text-align: left;
    color:var(--Secondary);
    font-weight: 500;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
}
p.infoText{
    text-align: left;
    color:var(--Text);
    font-weight: 500;
    font-size: clamp(1vw, 2vh, 2vh);
    padding-left: clamp(0.6vw, 1.2vh, 1.2vh);
    max-width: clamp(12vw, 24vh, 24vh);
}

div.horniContentRight{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}
img.horniContentPrispevekImg{
    object-fit: cover;
    height: clamp(20vw, 30vh, 40vh);
    /*width: calc(clamp(20vw, 30vh, 40vh)*1.5);*/
}




div.dolniContent{
    width: clamp(80vw, 100vh, 90vw);
    padding-right: clamp(7vw, 5vh, 14vh);
}
div.dolniContent p{
    font-size: calc(clamp(1.3vw, 2.5vh, 2.6vh)*var(--prispevekTextIndex));
    text-align: left;
    color: var(--prispevekTextColor);
    font-weight: 400;
}
p.prispevekText{
    font-size: calc(clamp(1.3vw, 2.5vh, 2.6vh)*var(--prispevekTextIndex));
    text-align: left;
    color: var(--prispevekTextColor);
    font-weight: 400;
}
h3.prispevekPodnadpis{
    font-size: clamp(2.2vw, 4.1vh, 4.4vh);
    text-align: left;
    color:var(--Text);
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.8); 
    padding-left: clamp(0.3vw, 0.6vh, 0.6vh);
    padding-right: clamp(0.3vw, 0.6vh, 0.6vh);
    padding-bottom: clamp(0.3vw, 0.6vh, 0.6vh);
    padding-top: clamp(0.3vw, 0.6vh, 0.6vh);
    /*margin-bottom: calc(2.5vh + 20px);*/
    /*margin-top: calc(4vh + 20px);*/
}
h3.prispevekPodnadpis.smaller{
    font-size: clamp(2vw, 3.2vh, 4vh);
}
strong{
    font-weight: 600;
}
p.prispevekText.date{
    text-align: right;
}
a.textOdkaz{
    text-align: left;
    color:var(--Text);
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.8s;
}

@media (min-width: 1200px){
    a.textOdkaz:hover{
        color: var(--Secondary);
        transition-property: color;
        transition-duration: 0.5s;
    }
}
a.textOdkaz:active{
    color: var(--Secondary);
    transition-property: color;
    transition-duration: 0.5s;
}
a.active /*odkaz ktery vede na totozne misto, kde se uzivatel nachazi*/
{
    pointer-events: none; /*odkaz prestane reagovat jako odkaz*/
}

ul.prispevekList{
    display: block;
    list-style-type: square;
    font-size: calc(clamp(1.3vw, 2.5vh, 2.6vh)*var(--prispevekTextIndex));
    text-align: left;
    color: var(--prispevekTextColor);
    font-weight: 400;
    padding-left: clamp(1.3vw, 2.5vh, 2.6vh);
}


div.prispevekImgCont{
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    margin-top: clamp(1vw, 2vh, 2vh);
    margin-bottom: clamp(1vw, 2vh, 2vh);
}

img.prispevekImg{
    object-fit: contain;
    margin: clamp(1.5vw, 1.5vh, 3vh);
    margin-top: clamp(0.75vw, 1vh, 1.5vh);
    margin-bottom: clamp(0.75vw, 1vh, 1.5vh);
}
img.imgSmallest{
    width: clamp(15vw, 30vh, 35vw);
}
img.imgSmaller{
    width: clamp(17.5vw, 35vh, 35vw);
}
img.imgSmall{
    width: clamp(20vw, 40vh, 35vw);
}
img.imgMed{
    width: clamp(22.5vw, 45vh, 60vw);
}
img.imgBig{
    width: clamp(25vw, 50vh, 72.5vw);
}
img.imgBigger{
    width: clamp(30vw, 60vh, 72.5vw);
}
img.imgBiggest{
    width: clamp(35vw, 70vh, 72.5vw);
}

div.prispevekFinal{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
div.LikeDiv{
    height: clamp(2.5vw, 5vh, 5vh);
    display: flex;
    justify-content: start;
}
a.Like{
    display: block;
    height: clamp(2.5vw, 5vh, 5vh);
    min-width: clamp(3vw, 5vh, 5vh);
}
/*a.Like:hover > img.LikeImg{
    content: url("ui/like2.svg");
}*/
img.LikeImg{
    object-fit: contain;
    max-height: 100%;
    content: url("ui/like.svg");
}
/*a.Like:hover > img.LikeImg.liked{
    content: url("ui/likeFull2.svg");
}*/
img.LikeImg.liked{
    object-fit: contain;
    max-height: 100%;
    content: url("ui/likeFull.svg");
}

@media (min-width: 1200px){
    a.Like:hover > img.LikeImg{
        content: url("ui/like2.svg");
    }
    a.Like:hover > img.LikeImg.liked{
        content: url("ui/likeFull2.svg");
    }
}
a.Like:active > img.LikeImg{
    content: url("ui/like2.svg");
}
a.Like:active > img.LikeImg.liked{
    content: url("ui/likeFull2.svg");
}

div.souvisejici{
    margin-top: clamp(3vw, 5vh, 6vh);
    margin-bottom: clamp(1.75vw, 3.25vh, 3.5vh);
}

div.PrispevekVsechny{
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: clamp(3vw, 5vh, 6vh);
}

h5.PrispevekZobrazitVsechny{
    text-align: center;
    color:var(--Secondary);
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-size: clamp(1.5vw, 2.5vh, 3vh);
    font-weight: 500;
    opacity: 0%;
    transition-property: opacity;

    
    margin-bottom: 8vh;
    margin-left: 10vw;
}
h5.PrispevekZobrazitVsechny a{
    color: var(--Secondary);
    text-decoration: none;
    background-color: #000;
    padding: clamp(0.6vw, 1.2vh, 1.2vh);
    border-radius: clamp(0.75vw, 1.5vh, 1.5vh);
    transition-property: color;
    transition-duration: 0.8s;
}
@media (min-width: 1200px){
    h5.PrispevekZobrazitVsechny a:hover{
        color: var(--Text);
        transition-duration: 0.5s;
    }
}
h5.PrispevekZobrazitVsechny a:active{
        color: var(--Text);
        transition-duration: 0.5s;
    }

h5.PrispevekZobrazitVsechny.Show{
    opacity: 100%;
    transition-duration: 1s;
    animation-timing-function: ease-in-out;
    transform: translateX(0%);
}


@media (max-aspect-ratio: 4/3){
    div.contentOkraj{
        margin-left: 5vw;
    }
    div#prispevekFixedBorder{
        left: 5vw;
    }
    div.prispevekSettingsCont{
        padding-left: 5vw;
        padding-right: 5vw;
    }
    h5.PrispevekZobrazitVsechny{
        margin-left: 5vw;
    }
}






table.prispevekTabulka1{
    display: block;
}
table.prispevekTabulka2{
    display: none;
}
table.prispevekTabulka1 th{
    padding-top: clamp(0.2vw, 0.4vh, 0.4vh);
    padding-bottom: clamp(0.2vw, 0.4vh, 0.4vh);
    text-align: left;
    color:var(--Secondary);
    font-weight: 500;
    font-size: calc(clamp(1.2vw, 2.4vh, 2.4vh));
    border-width: clamp(0.25vw, 0.5vh, 0.5vh);
    border-style: solid;
    border-color: #000;
    margin: 0;
    background-color: #000;
}
table.prispevekTabulka1 td{
    padding-top: clamp(0.1vw, 0.2vh, 0.2vh);
    padding-bottom: clamp(0.1vw, 0.2vh, 0.2vh);
    text-align: left;
    color:var(--Text);
    font-weight: 500;
    font-size: calc(clamp(1vw, 2vh, 2vh));
    padding-left: clamp(0.6vw, 1.2vh, 1.2vh);
    border-width: clamp(0.25vw, 0.5vh, 0.5vh);
    border-style: solid;
    border-color: #000;
    margin: 0;
    background-color: #000;
}

@media (max-aspect-ratio: 4/3){
    table.prispevekTabulka1{
        display: none;
    }
    table.prispevekTabulka2{
        display: block;
    }

    table.prispevekTabulka2 th{ 
        padding-top: clamp(0.4vw, 0.4vh, 0.4vh);
        padding-bottom: clamp(0.4vw, 0.4vh, 0.4vh);
        text-align: left;
        color:var(--Secondary);
        font-weight: 500;
        font-size: clamp(1.15vw, 2vh, 2.3vh);
        border-width: clamp(0.25vw, 0.5vh, 0.5vh);
        border-style: solid;
        border-color: #000;
        margin: 0;
        background-color: #000;
    }
    table.prispevekTabulka2 td{
        padding-top: clamp(0.2vw, 0.2vh, 0.2vh);
        padding-bottom: clamp(0.2vw, 0.2vh, 0.2vh);
        text-align: left;
        color:var(--Text);
        font-weight: 500;
        font-size: clamp(1.05vw, 1.8vh, 2.1vh);
        padding-left: clamp(0.6vw, 1.2vh, 1.2vh);
        border-width: clamp(0.25vw, 0.5vh, 0.5vh);
        border-style: solid;
        border-color: #000;
        margin: 0;
        background-color: #000;
    }
    table.prispevekTabulka2 th.Tab2M{
        background-color:var(--Pozadi);
        border-width: 0;
        padding-left: 0;
    }
    table.prispevekTabulka2 td.Tab2M{
        background-color:var(--Pozadi);
        border-width: 0;
        padding-left: 0;
    }
}

div.prispevekHraniceBackend{
    width: clamp(0.1vw, 0.2vh, 0.2vh);
    height: clamp(0.1vw, 0.2vh, 0.2vh);
}


div.novForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: clamp(0.5vw, 0.75vh, 1vh);
    margin-bottom: clamp(4.5vw, 7.25vh, 9vh);
    width: 100%;
    padding-left: 4vw;
    padding-right: 4vw;
}
div.novForm h2{
    color: var(--Text);
    font-size: clamp(2.5vw, 3.5vh, 5vh);
    font-weight: 600;
    margin-bottom: clamp(0.3vw, 0.6vh, 0.6vh);
    text-align: center;
}
div.novForm h2 span{
    color: var(--Secondary);
}
div.novForm p{
    color: var(--Secondary);
    font-size: clamp(1.3vw, 2.4vh, 2.6vh);
    font-weight: 500;
    text-align: center;
    margin-bottom: clamp(1vw, 1.5vh, 2vh);
}
div.novForm textarea{
    padding: clamp(0.4vw, 0.6vh, 0.8vh);
    background-color: var(--Pozadi2);
    border-width: var(--borderWidth);
    border-color: var(--Pozadi2);
    border-style: solid;
    color:var(--Secondary);
    font-weight: 400;
    font-size: clamp(1.2vw, 2.2vh, 2.4vh);
    resize: none;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    margin-left: clamp(0.75vw, 0.75vh, 1.5vh);
    margin-right: clamp(0.75vw, 0.75vh, 1.5vh);
    margin-top: clamp(0.9vw, 1.5vh, 1.8vh);
    margin-bottom: clamp(0.6vw, 1vh, 1.2vh);
    width: clamp(40vw, 80vh, 85vw);
    height: clamp(9vw, 18vh, 18vh);
}
div.novForm textarea:focus{
    border-color: var(--Text);
    outline: none !important;
}
div.novForm textarea::-webkit-input-placeholder{
    color: var(--Text);
}
div.novForm textarea::placeholder{
    color: var(--Text);
    opacity: 1; /* Firefox */
}
div.novForm div.inputLine{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
div.novForm div.inputLine input{
    padding: clamp(0.4vw, 0.6vh, 0.8vh);
    background-color: var(--Pozadi2);
    border-width: var(--borderWidth);
    border-color: var(--Pozadi2);
    border-style: solid;
    color:var(--Secondary);
    font-weight: 400;
    font-size: clamp(1.3vw, 2.4vh, 2.6vh);
    resize: none;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    margin-left: clamp(0.75vw, 0.75vh, 1.5vh);
    margin-right: clamp(0.75vw, 0.75vh, 1.5vh);
    margin-top: clamp(0.6vw, 1vh, 1.2vh);
    margin-bottom: clamp(0.6vw, 1vh, 1.2vh);
}
div.novForm div.inputLine input:focus{
    border-color: var(--Text);
    outline: none !important;
}
div.novForm div.inputLine input::-webkit-input-placeholder{
    color: var(--Text);
}
div.novForm div.inputLine input::placeholder{
    color: var(--Text);
    opacity: 1; /* Firefox */
}
div.novForm div.inputLine input.inputSmall{
    width: clamp(15vw, 23vh, 42vw);
}
div.novForm div.inputLine input.inputBig{
    width: calc(clamp(30vw, 46vh, 90vw) + clamp(1.5vw, 1.5vh, 3vh));
}
a.sendButton{
    text-align: center;
    color: var(--Secondary);
    text-decoration: none;
    background-color: var(--Pozadi2);
    padding: clamp(0.6vw, 1vh, 1.2vh);
    padding-left: clamp(1.5vw, 3vh, 3vh);
    padding-right: clamp(1.5vw, 3vh, 3vh);
    border-radius: clamp(1vw, 2vh, 2vh);
    transition-property: color, border-color;
    border: solid var(--Secondary) var(--borderWidth);
    transition-duration: 0.8s;
    font-size: clamp(1.4vw, 2.4vh, 2.8vh);
    font-weight: 500;
    margin-top: clamp(1vw, 1.5vh, 2vh);
}

@media (min-width: 1200px){
    a.sendButton:hover{
        color: var(--Text);
        border-color: var(--Text);
        transition-duration: 0.5s;
    }
}
a.sendButton:active{
    color: var(--Text);
    border-color: var(--Text);
    transition-duration: 0.5s;
}


/*---------------------------------------------------------------------------------------------------*/


/*              ---------------AUTOR-----------------------------       */ /*opravit prosvítání backgroundu mezi trojuhelniky a contentem*/

div.Autor{
    padding-top: clamp(2vw, 4vh, 4vh);
    padding-bottom: clamp(4vw, 8vh, 8vh);
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
div.ATHorni{
    width: 0;
	height: 0;
	border-bottom: clamp(4vw, 5vh, 5vh) solid #000; /*clamp*/
	border-left: 110vw solid transparent;
    margin-bottom: -2px;
    overflow-x: hidden;
}
div.ATDolni{
    width: 0;
	height: 0;
	border-top: clamp(4vw, 5vh, 5vh) solid #000; /*clamp*/
	border-right: 110vw solid transparent;
    margin-top: -2px;
    overflow-x: hidden;
}
div.AutorContent{
    background-color: #000;
    width: 100vw;
    /*height: 50vh;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
div.AutorText{
    max-width: 35%;
    margin-left: 5vw;
    margin-top: clamp(1.5vw, 3vh, 3vh);
    margin-bottom: clamp(1.5vw, 3vh, 3vh);
}
h2.AutorNadpis{
    color: var(--Text);
    font-size: clamp(2.4vw, 3vh, 3vh);
    font-weight: 600;
    padding-bottom: clamp(0.3vw, 0.6vh, 0.6vh);
}
p.AutorP{
    font-size:clamp(1.4vw, 2.5vh, 2.8vh);
    color: var(--Secondary);
    font-weight: 400;
}
div.AutorFotka{
    /*width: 20%;*/
    height: clamp(34vw, 55vh, 60vh);
    margin-right: 15vw;
    margin-top: 5.5vh;
    margin-bottom: 9vh;
}
img.AutorImg{
    object-fit: contain;
    height: 100%;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    opacity: 0%;
    transition-property: opacity;
}
img.AutorImg.Show{
    opacity: 100%;
    transition-duration: 1s;
    transition-delay: 0s;
    animation-timing-function: ease-out;
}


@media (max-aspect-ratio: 4/3){ 
    div.AutorContent{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }
    div.AutorText{
        max-width: 90%;
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 4vh;
    }
    h2.AutorNadpis{
        font-size: clamp(4vw, 4vh, 4vh);
        padding-bottom: clamp(0.6vw, 0.7vh, 0.7vh);
    }
    p.AutorP{
        font-size: clamp(2vw, 2.7vh, 4vh);
    }
    div.AutorFotka{
        height: clamp(40vw, 47vh, 47vh);
        margin-right: 0;
        margin-top: clamp(4vw, 4vh, 4vh);
        margin-bottom: clamp(7vw, 7vh, 7vh);
    }
    img.AutorImg{
        border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    }
}



/* ------------------------------------------------------------------------------------------------------- */







/*            ------------------KONTAKT----------------------                  */

div.Kontakt{
    padding-top: clamp(2vw, 2vh, 4vh);
    padding-bottom: clamp(2vw, 4vh, 4vh);
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
div.KontaktContent{
    width: 100vw;
    /*height: 50vh;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: clamp(3vw, 6vh, 6vh);
    margin-bottom: clamp(3vw, 4vh, 6vh);
}
div.KontaktText{
    max-width: clamp(35vw, 70vh, 90vw);
    margin-left: 5vw;
}
h2.KontaktNadpis{
    color: var(--Secondary);
    font-size: clamp(2vw, 3.5vh, 4vh);
    font-weight: 600;
    padding-bottom: clamp(0.3vw, 0.6vh, 0.6vh);
}
p.KontaktP{
    font-size:clamp(1.3vw, 2.4vh, 2.6vh);
    color: var(--Text);
    font-weight: 400;
}
a.KontaktA{
    color: var(--Secondary);
    text-decoration: none;
}









/*------------------------------------------------------------------------------------------------------------------*/











/*        --------------SPODNI CAST-------------------           */

div.spodniCast{
    background-color: #000;
    width: 100vw;
    overflow-x: hidden;
    height: clamp(4vw, 8vh, 8vh);
    display: flex;
    justify-content: center;
    align-items: center;
}
div.spodniCastContent{
    max-width: 90vw;
}
p.spodniCastText{
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    text-align: center;
    color:var(--Text);
    font-weight: 400;
}

@media (max-aspect-ratio: 4/3){
    div.spodniCastContent{
        max-width: 95vw;
    }
}



/*---------------------------------------------------------------------------------------------------------*/


div.windowContainer{
    min-height: calc(100vh - var(--MenuHeight) - clamp(4vw, 8vh, 8vh) - clamp(0.5vw, 1vh, 1vh));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
div.windowContent{
    padding: clamp(3vw, 4vh, 6vh);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
div.windowContent form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
div.windowContent h3{
    color: var(--Secondary);
    font-size: clamp(2.2vw, 4vh, 4.4vh);
    font-weight: 600;
    padding-bottom: clamp(1.5vw, 3vh, 3vh);
    text-align: center;
}
div.windowContent h3.green{
    color: var(--Text);
}



/*                 -----------------------ANIMACE---------------------------*/

/*ANIMATIONS - https://css-tricks.com/a-handy-little-system-for-animated-entrances-in-css/ */

/*Animace Menu 1.5s*/
@media (min-aspect-ratio: 4/3){
    div.main ul li{
        animation-name: animate-drop;
        animation-timing-function: ease-out;
        animation-duration: 0.7s;
    }
    /*opacity fix*/
    .OF-0 {
        animation-name: animate-dropOpacityFix;
        animation-timing-function: ease-out;
        animation-duration: 0.21s;
    }
    .OF-1 {
        animation-name: animate-dropOpacityFix;
        animation-timing-function: ease-out;
        animation-duration: 0.41s;
    }
    .OF-2 {
        animation-name: animate-dropOpacityFix;
        animation-timing-function: ease-out;
        animation-duration: 0.61s;
    }
    .OF-3 {
        animation-name: animate-dropOpacityFix;
        animation-timing-function: ease-out;
        animation-duration: 0.81s;
    }
}

@media (max-aspect-ratio: 4/3){
    div.main{
        animation-name: animate-drop;
        animation-timing-function: ease-out;
        animation-duration: 0.7s;
    }
}


/* Animation Delays pro položky menu */
.delay-0 {
    animation-delay: 0.15s;
}
.delay-1 {
    animation-delay: 0.3s;
}
.delay-2 {
    animation-delay: 0.45s;
}
.delay-3 {
    animation-delay: 0.6s;
}



/*Animace logo + nadpis*/
.MainNadpis{
    animation-name: AnimaceStreduNadpis;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}
.StredContainerText{
    animation-name: AnimaceStreduText;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
}
.MainLogo{
    animation-name: AnimaceStreduLogo;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}
a.stredOdkaz{
    animation-duration: 2.1s;
}
@media (max-aspect-ratio: 4/3){
    .MainLogo{
        animation-name: AnimaceStreduLogo;
        animation-duration: 1.6s;
        animation-timing-function: ease-in-out;
    }
    a.stredOdkaz{
        animation-duration: 1.7s;
    }
}


/*Animace prispevek*/
div.InfoPrispevek{
        animation-name: PrispevekInfo;
        animation-duration: 1s;
        animation-timing-function: ease-out;
    }


/*KEYFRAMES ~~~~~~~~~~~~~~~~~~~~~~~~*/
@keyframes PrispevekInfo{
    0%{
        opacity: 0;
        transform: translate(25%, 0);
    }
    25%{
        opacity: 0;
    }
    95%{
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes PrispevekInfoWW{
    0%{
        opacity: 0;
        transform: translate(10%, 0);
    }
    95%{
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Skryt{ /*dana vec je téměř po celou dobu animace skryta*/
    0% { visibility: hidden;}
    99% {visibility: hidden;}
    100% { visibility: visible;}
}

@keyframes AnimaceStreduNadpis{
    0% { opacity: 0.3; }
  100% { opacity: 1; }
}
@keyframes AnimaceStreduText{
    0% { opacity: 0; }
    50% { opacity: 0; }
  100% { opacity: 0.7; }
}
@keyframes AnimaceStreduLogo{
    0% { opacity: 0; }
    30% { opacity: 0; transform: scale(0.95, 0.95); }
  100% { opacity: 1; transform: scale(1, 1);}
}

@keyframes animate-drop { /*drop položek menu*/
0% {
    opacity: 0;
    transform: translate(0,-2vh);
    }
95%{
    opacity: 1;
}
100% {
    opacity: 1;
    transform: translate(0, 0);
    }
}
@keyframes animate-dropOpacityFix { /*aby byla na začátku u položek menu opacity 0 a vzrostla az s animaci*/
from {
    opacity: 0;
    }
to {
    opacity: 0;
    }
}







/*DODATEK ANIMACÍ ~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (prefers-reduced-motion: reduce) { /*pokud uživatel má nastaveno, že nechce animace, tak jsou zmírněny*/
    *{
      animation: none !important;
    }
}