@font-face {
    font-family: 'CustomFont';
    src: url('AgencyFBExtended.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-color: #CC9966;
    --secondary-color: #502916;
    --tertiary-color: #8b4727;
    --background-color: #FFFFFF;
    --white: #FFFFFF;
    --black: #000000;

    --font-primary: 'CustomFont', sans-serif;

    --default-fontsize: clamp(1.2vw, 2.4vh, 2.4vh);
    --borderWidth: clamp(0.17vw, 0.34vh, 0.34vh);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-weight: 400 !important;
}

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 {
    font-family: var(--font-primary);
    line-height: 1.6;
    background-color: var(--background-color);
    margin: 0;
    padding: 0;

    flex-grow: 1;

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

    display: flex;
    flex-direction: column;

    overflow-x: hidden !important;
}

b{
    font-weight: 600 !important
}

header {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    position: fixed;
    z-index: 5;
    width: 100%;
    transition: top 0.3s ease;
    height: calc(8vh + clamp(4vh, 8vh, 8vh));
    overflow-y: hidden;
    transition: height 0.3s ease;
}
#headerP{
    position: absolute;
    z-index: 1;
    top: 0;
    height: 8vh;
    opacity: 0;
}
header.hide{
    height: 0;
}

.header-content {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: center; 
    max-width: 90%;
    margin: 0 auto;
    margin-top: 3vh;
}

.header-content img {
    height: clamp(4vh, 8vh, 8vh);
    max-width: 100%;
    margin-right: 4vw;
}

.header-content .tagline {
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    font-style: italic;
    max-width: 90%;
    font-family: var(--default-fontsize);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    overflow: hidden;
    white-space: normal;
    text-align: left;
    font-family: var(--font-primary);
}

/* Navbar */
nav {
    background-color: var(--primary-color);
    color: var(--white);
    padding-bottom: 1vh;
    text-align: center;
    text-transform: uppercase;
    position: fixed;
    top: calc(8vh + clamp(4vh, 8vh, 8vh));
    z-index: 6;
    width: 100%;
    transition: top 0.3s ease;
    line-height: normal;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    margin-left: 2vw;
    margin-right: 2vw;
}

nav ul li a:hover {
    color: var(--secondary-color);
}

nav ul li a.active {
    color: var(--secondary-color);
}

header.hidden {
    top: -100px; /* Adjust this value to hide the header completely */
}

main {
    background-color: var(--background-color);
    margin-bottom: 0;
    width: 100%;
    margin-top: calc(8vh + clamp(4vh, 8vh, 8vh) + 1vh + 4vh);
}

footer { 
    padding-top: 2vh;
    padding-bottom: 4vh;
    text-align: center;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: clamp(1vw, 1.6vh, 2.4vh);
}

.logo img {
    height: clamp(3vw, 6vh, 6vh);
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.box {
    width: 15vw; /* Set width as needed */
    height: 10vh; /* Set height as needed */
    background-color: var(--primary-color); /* Example background color */
    display: inline-block;
    margin-left: 2vw;
    margin-right: 2vw; 
}

.box-media{
    margin-top: 2vh;
    font-size: clamp(1.6vw, 3.2vh, 3.2vh);
}
  
.container {
    text-align: center; /* Optional: Center align the boxes */
}

a {
    color: inherit; /* Inherit color from parent, or set a specific color */
    text-decoration: none; /* Remove underline if desired */
}

a:active {
    color: var(--secondary-color); /* Keep the same color when the link is clicked */
}
@media (min-width: 1200px){
    a:hover {
        color: var(--secondary-color) /* Optional: Change color on hover */
    }
}


.header-disappear {
    display: none;
}

.navbar-move{
    top: 0;

    padding-top: 1vh;
    padding-bottom: 1vh;
}

.portfolio-item{
    display: flex;
    flex-direction: row; 
    margin: 1vh auto;
    width: clamp(60vw, 120vh, 70vw);
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 3vh rgba(0,0,0,0.1);
    transition: transform 0.3s ease, filter 0.3s ease; /* Plynulý přechod pro rozmazání a zvětšení */
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
}

.portfolio-item:hover {
    transform: scale(1.05); /* Zvětšení na hover */
    z-index: 1; /* Změna úrovně prvku */
    box-shadow: 0 0 clamp(2vw, 4vh, 4vh) rgba(0, 0, 0, 0.1);
}

.portfolio-image {
    width: 100%;
    height: 100%;
    height: auto;
    display: block;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
}

.portfolio-image img {
    width: 100%; /* Ensure image takes full width of its container */
    height: auto; /* Maintain aspect ratio */
    display: block;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    object-fit: cover;
}

.portfolio-text {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    margin-right: 5vw;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.portfolio-text.norm{
    background: linear-gradient(to right top, rgba(0,0,0,1), rgba(0,0,0,0) 70%);
}
.portfolio-text.rev{
    background: linear-gradient(to left top, rgba(0,0,0,1), rgba(0,0,0,0) 70%);
}

a.portfolio-item:hover div.portfolio-text.norm{
    opacity: 0.75;
}
a.portfolio-item:hover div.portfolio-text.rev{
    opacity: 0.75;
}

.portfolio-text h3 {
    position: absolute;
    font-size: clamp(2.5vw, 5vh, 5vh);
    color: var(--background-color);
    margin: clamp(1vw, 1vh, 2vh);
    text-transform: uppercase;
    bottom: 0;
    
}
.portfolio-text.norm h3{
    left: 2vw;
}
.portfolio-text.rev h3{
    right: 2vw;
}

.portfolio-text p {
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    text-align: justify; /* Zarovnání do bloku */
}

.textbox {
    background-color: var(--background-color);
    padding: 1vh;
    margin: 1vh 0;
    max-width: 90%;
    margin: 2vh auto;
    border-radius: 0.6vh;
    box-shadow: 0 0 3vh rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.textbox h2 {
    font-size: clamp(2vw, 2.4vh, 2.4vh);
    color: var(--black);
    margin-bottom: 1.5vh;
}

.textbox p {
    font-size: clamp(0.8vw, 2.0vh, 2.4vh);
    line-height: 1.6;
    color: var(--black);
    text-align: justify;
}

.textbox ul {
    font-size: clamp(0.8vw, 2.0vh, 2.4vh);
    line-height: 1.6;
    color: var(--black);
    padding-left: 3vh; 
}


a:link, a:visited, a:hover, a:active { 
    text-decoration: none; 
}

.container {
    display: flex;
    flex-wrap: wrap; 
    gap: 2vh;
    justify-content: center; 
    margin-top: 4vh;
    margin-bottom: 4vh;
}

.textbox_2 {
    background-color: var(--background-color);
    border-radius: 0.6vh;
    box-shadow: 0 0 3vh rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 calc(50% - 10vh);
    max-width: calc(50% - 10vh); 
    box-sizing: border-box; 
}

.textbox_2 h2 {
    font-size: clamp(2.4vw, 3vh, 3vh);
    color: var(--black);
    margin-bottom: 0vh;
    margin-left: 2vh;
    margin-top: 1vh;
}

.textbox_2 h3 {
    font-size: clamp(1.8vw, 2.4vh, 2.4vh);
    color: var(--black);
    margin-bottom: 0vh;
    margin-top: 2vh ;
    margin-left: 2vh;
}

.textbox_2 h4 {
    font-size: clamp(1.4vw, 2vh, 2vh);
    color: var(--black);
    margin-bottom: 2vh;
    margin-left: 2vh;
    margin-right: 2vh;
    font-weight: normal;
    text-align: left;
}

.textbox_2 h6 {
    font-size: clamp(0.9vw, 1.8vh, 1.8vh);
    font-style: italic; 
    font-weight: normal;
    margin-bottom: 1vh;
    margin-left: 2vh;
    margin-right: 2vh;
}

.textbox_2 ul {
    list-style-type: none; 
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

.price {
    font-size: clamp(1.4vw, 2vh, 2vh);
    color: var(--secondary-color);     
    margin-left: 2vh;
}

div.galerieContent{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: clamp(20vh, 30vh, 40vh);
    padding-bottom: clamp(3vw, 6vh, 6vh);
  }
  div.galerieUvod{
    width: clamp(90vw, 180vh, 90vw);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  div.galerieUvod h3{
    font-size: clamp(4.2vw, 6.5vh, 8.4vh);
    color: var(--black);
    padding-right: clamp(6vw, 3vh, 12vh);
    padding-left: clamp(6vw, 3vh, 12vh);
    font-weight: 400;
    width: clamp(40vw, 45vh, 90vw);
    text-align: right;
    line-height: 1.2;
  }
  div.galerieUvod p{
    font-size: clamp(1.3vw, 2.4vh, 2.6vh);
    text-align: left;
    color: var(--black);
    width: clamp(40vw, 45vh, 90vw);
    font-weight: 400;
    padding-right: clamp(6vw, 3vh, 12vh);
    padding-left: clamp(6vw, 3vh, 12vh);
  }
  div.galerieUvod div{
    width: calc(var(--borderWidth)*0.5);
    height: clamp(8vw, 16vh, 16vh);
    background-color: var(--black);
  }

  div.galerieFotky{
    padding-top: clamp(3.5vw, 3.5vh, 7vh);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 95vw;
    padding-bottom: clamp(3.5vw, 7vh, 7vh);
  }
  div.galerieFotky div.uvodni{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  div.galerieFotky div.uvodni a{
    width: clamp(44.5vw, 59vh, 95vw);
    height: calc(clamp(44.5vw, 59vh, 95vw)*0.66);
    margin: clamp(0.25vw, 0.5vh, 0.5vh);
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: 0;
    overflow: hidden;
  }
  div.galerieFotky div.uvodni a img.uvodni{
    width:100%;
    min-height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  div.galerieFotky div.uvodni a:hover img.uvodni{
    transform: scale(1.1);
  }


  div.galerieFotky div.velkaFotkaSkupina{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    overflow: hidden;
  }
  div.galerieFotky div.velkaFotkaSkupina a.velkaFotkaSkupina{
    width: clamp(67vw, 89vh, 95vw);
    height: calc(clamp(67vw, 89vh, 95vw)*0.66);
    margin: clamp(0.25vw, 0.5vh, 0.5vh);
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.galerieFotky div.velkaFotkaSkupina a.velkaFotkaSkupina img.velkaFotkaSkupina{
    width:100%;
    min-height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    line-height: 0%;
  }
  div.galerieFotky div.velkaFotkaSkupina a.velkaFotkaSkupina:hover img.velkaFotkaSkupina{
    transform: scale(1.1);
  }

  div.galerieFotky div.velkaFotkaSkupina div.maleFotky{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    width: clamp(22.5vw, 30vh, 95vw);
    max-height: calc(clamp(67vw, 89vh, 95vw)*0.66 + clamp(0.5vw, 1vh, 1vh));
  }
  div.galerieFotky div.velkaFotkaSkupina div.maleFotky a.malaFotkaSkupina{
    width: calc(calc(clamp(45vw, 60vh, 95vw)*0.5));
    margin: clamp(0.25vw, 0.5vh, 0.5vh);
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.galerieFotky div.velkaFotkaSkupina div.maleFotky a.malaFotkaSkupina img.malaFotkaSkupina{
    width:100%;
    object-fit: cover;
    line-height: 0%;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  div.galerieFotky div.velkaFotkaSkupina div.maleFotky a.malaFotkaSkupina:hover img.malaFotkaSkupina{
    transform: scale(1.1);
  }



  div.galerieFotky div.sloupce{
    width: clamp(45vw, 60vh, 95vw);
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  div.galerieFotky div.sloupec{
    width: calc(50% - clamp(0.5vw, 1vh, 1vh));
    margin-left: clamp(0.25vw, 0.5vh, 0.5vh);
    margin-right: clamp(0.25vw, 0.5vh, 0.5vh);
    overflow: hidden;
    /*display: flex;
    flex-direction: column;*/
  }
  div.galerieFotky div.sloupec a{
    margin-top: clamp(0.5vw, 1vh, 1vh);
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  div.galerieFotky div.sloupec a img{
    object-fit: cover;
    width: 100%;
    line-height: 0%;


    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    
  }
  div.galerieFotky div.sloupec a:hover img{
    transform: scale(1.1);
  }

@media (max-aspect-ratio: 101/80){
    div.galerieFotky div.velkaFotkaSkupina{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
      }
    div.galerieFotky div.velkaFotkaSkupina a.velkaFotkaSkupina{
        width: calc(clamp(45vw, 60vh, 95vw) - clamp(0.5vw, 1vh, 1vh));
        height: calc(calc(calc(clamp(45vw, 60vh, 95vw) - clamp(0.5vw, 1vh, 1vh)))*0.66);
    }
    div.galerieFotky div.velkaFotkaSkupina div.maleFotky{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: calc(clamp(45vw, 60vh, 95vw));
        max-height: none;
    }
    div.galerieFotky div.velkaFotkaSkupina div.maleFotky a.malaFotkaSkupina{
        width: calc(clamp(45vw, 60vh, 95vw) - clamp(0.5vw, 1vh, 1vh));
    }
}


div.zoomedImgContainer{
    display: none;
}
div.zoomedImgContainer.show{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 7;
    padding-top: 4svh;
}
div.zoomedImgContainer.v2{
    padding-top: 0svh;
}
div.zoomedImgContent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(50vw, 70vh, 90vh);
    max-width: 95vw;
    max-height: 90svh;
    position: relative;
}
div.zoomedImgContent img.zoomedImg{
    object-fit: contain;
    height: 100%;
    max-width: 95vw;
    max-height: 100%;
}

div.zoomedImgContent.v2{
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(50vw, 70vh, 80vh);
    max-width: 95vw;
    max-height: 85svh;
    position: relative;
    margin-bottom: 10svh;
}
div.zoomedImgContent.v2 img.zoomedImg{
    object-fit: contain;
    height: 100%;
    max-width: 95vw;
    max-height: 100%;
}
div.zoomedImgContent.v2 p{
    font-size: clamp(1.4vw, 2.6vh, 2.8vh);;
    font-weight: 400;
    color: var(--white);
    position: absolute;
    bottom: calc(-1*clamp(0.5vw, 1vh, 1vh));
    left: 0;
    transform: translateY(100%);
}


div.zoomedImgContent a.close{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: clamp(0.5vw, 1vh, 1vh);
    right: clamp(0.5vw, 1vh, 1vh);
    height: clamp(1.5vw, 3vh, 3vh);
    transform: translate(0, 0);
}
div.zoomedImgContent img.close{
    object-fit: contain;
    height: 100%;
}
div.zoomedImgContent img.sipka{
    object-fit: contain;
    height: 100%;
}

div.zoomedImgContent a.sipkaL{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: clamp(0.5vw, 1vh, 1vh);
    position: absolute;
    bottom: 50%;
    left: calc(-1*clamp(2vw, 3vh, 4vh));
    height: clamp(2vw, 4vh, 4vh);
    transform: translate(-100%, -50%);
}
div.zoomedImgContent a.sipkaR{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: clamp(0.5vw, 1vh, 1vh);
    position: absolute;
    bottom: 50%;
    right: calc(-1*clamp(2vw, 3vh, 4vh));
    height: clamp(2vw, 4vh, 4vh);
    transform: translate(100%, -50%);
}


a.sipkaUp{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(0.75vw, 1.5vh, 1.5vh);
    border-radius: 50%;
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
    transition-property: opacity, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
a.sipkaUp.show{
    pointer-events: auto;
    opacity: 1;
}
a.sipkaUp img{
    height: clamp(1.4vw, 2.8vh, 2.8vh);
    object-fit: contain;
}

a.sipkaUp:hover{
    background-color: rgba(0, 0, 0, 0.7);
}

@media (orientation: portrait){
    div.zoomedImgContent a.sipkaL{
        margin-right: 0;
        bottom: 0;
        left: calc(1*clamp(2vw, 3vh, 4vh));
        transform: translate(0, 130%);
    }
    div.zoomedImgContent a.sipkaR{
        margin-left: 0;
        bottom: 0;
        right: calc(1*clamp(2vw, 3vh, 4vh));
        height: clamp(2vw, 4vh, 4vh);
        transform: translate(0, 130%);
    }
}



@media (max-aspect-ratio: 1200/800) {
    .textbox_2 {
        flex: 1 1 calc(50% - 2vh); 
        max-width: calc(50% - 2vh);
    }


}

@media (max-aspect-ratio: 768/800) {
    .textbox_2 {
        flex: 1 1 100%; 
        max-width: 100%; 
    }
}

@media (max-aspect-ratio: 26/19) {
    .portfolio-item{
        max-width: clamp(70vw, 140vh, 90vw);
    }
    /*.portfolio-item.rev{
        flex-direction: column-reverse;
    }*/
}
@media (max-width: 1200px){
    nav ul li a:hover {
        color: var(--white);
    }
    nav ul li a:active {
        color: var(--secondary-color);
    }

    div.galerieFotky div.uvodni a:hover img.uvodni{
        transform: scale(1);
    }
    div.galerieFotky div.uvodni a:active img.uvodni{
        transform: scale(1.1);
    }

    div.galerieFotky div.velkaFotkaSkupina a.velkaFotkaSkupina:hover img.velkaFotkaSkupina{
        transform: scale(1);
    }
    div.galerieFotky div.velkaFotkaSkupina a.velkaFotkaSkupina:active img.velkaFotkaSkupina{
        transform: scale(1.1);
    }

    div.galerieFotky div.velkaFotkaSkupina div.maleFotky a.malaFotkaSkupina:hover img.malaFotkaSkupina{
        transform: scale(1);
    }
    div.galerieFotky div.velkaFotkaSkupina div.maleFotky a.malaFotkaSkupina:active img.malaFotkaSkupina{
        transform: scale(1.1);
    }

    div.galerieFotky div.sloupec a:hover img{
        transform: scale(1);
    }
    div.galerieFotky div.sloupec a:active img{
        transform: scale(1.1);
    }  

    a.sipkaUp:hover{
        background-color: rgba(0, 0, 0, 0.4);
    }
    a.sipkaUp:active{
        background-color: rgba(0, 0, 0, 0.7);
    }
}
/* Header width adjustement */


@media (max-width: 1200px){
    .portfolio-item:hover {
        transform: none; 
        z-index: auto; 
        box-shadow: 0 0 3vh rgba(0,0,0,0.1);
    }
    .portfolio-item:active {
        transform: scale(1.05); /* Zvětšení na hover */
        z-index: 1; /* Změna úrovně prvku */
        box-shadow: 0 0 clamp(2vw, 4vh, 4vh) rgba(0, 0, 0, 0.1);
    }
}



@media (orientation: portrait){
    div.galerieUvod{
        flex-direction: column;
        align-items: flex-start;
    }
    div.galerieUvod h3{
        padding-right: 0;
        text-align: left;
        margin-bottom: 1.5vh;
    }
    div.galerieUvod p{
        padding-left: clamp(6vw, 3vh, 12vh);
        padding-right: 0;
        text-align: left;
    }
    div.galerieUvod div{
        display: none;
    }
}

@media (max-aspect-ratio: 12/19){
    div.galerieUvod{
        justify-content: flex-start;
    }
}

@media (orientation: landscape){
    #menuOmne{
        display: inline;
    }
    #menuKontaktPC{
        display: inline;
    }
    #menuKontaktMobil{
        display: none;
    }
}

@media (orientation: portrait) {
    header {
        background-color: var(--primary-color);
        color: var(--white);
        text-align: center;
        position: fixed;
        width: 100%;
        transition: top 0.3s ease;
        height: calc(8vh + clamp(4vh, 8vh, 8vh));
        overflow-y: hidden;
        transition: height 0.3s ease;
    }
    .header-content {
        flex-direction: column; 
        align-items: center;
    }
    
    .header-content img {
        margin-right: 0;
    }
    .header-content .tagline {
        display: none;
    }

    nav {
        top: calc(8vh + clamp(4vh, 8vh, 8vh)); 
    }

    main{
        margin-top: calc(16vh + clamp(4vh, 8vh, 8vh) + 4vh); 
    }

    .portfolio-item{
        display: flex;
        flex-direction: row; 
        margin: 1vh auto;
        width: clamp(80vw, 160vh, 90vw);
        align-items: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 3vh rgba(0,0,0,0.1);
        transition: transform 0.3s ease, filter 0.3s ease; /* Plynulý přechod pro rozmazání a zvětšení */
        border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    }

    #menuOmne{
        display: none;
    }
    #menuKontaktPC{
        display: none;
    }
    #menuKontaktMobil{
        display: inline;
    }
    
    .video-container{
        top: 0vh;
        overflow: hidden;
        object-fit: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        max-height: 80vh;
        position: relative;
    }

    /*main{
        margin-top: 23vh;
    }

    nav ul li a {
        font-size: clamp(0.7vw, 1.4vh, 1.4vh);
        margin-left: 2vw;
        margin-right: 2vw;
    } */
}


@media (max-width: 850px){
    footer { 
        padding-top: 2vh;
        padding-bottom: 2vh;
        text-align: center;
        background-color: var(--primary-color);
        color: var(--white);
        font-size: clamp(1vw, 1.6vh, 2.4vh);
    }
    
    .box {
        width: 25vw; 
        height: 10vh; 
        background-color: var(--primary-color); 
        display: inline-block;
        margin-left: 2vw;
        margin-right: 2vw; 
    }
    
    .box-media{
        font-size: clamp(1.6vw, 3.2vh, 3.2vh);
    }
      
    .container {
        text-align: center; 
    }
    .portfolio-text h3{
        font-size: clamp(2vw, 2.4vh, 2.4vh);
    }
}

@media (max-width: 630px){
    footer { 
        padding-top: 2vh;
        padding-bottom: 2vh;
        text-align: center;
        background-color: var(--primary-color);
        color: var(--white);
        font-size: clamp(1vw, 1.6vh, 2.4vh);
    }
    
    .box {
        width: 27vw; 
        height: 10vh; 
        background-color: var(--primary-color); 
        display: inline-block;
        margin-left: 2vw;
        margin-right: 2vw; 
    }
    
    .box-media{
        font-size: clamp(1.6vw, 3.2vh, 3.2vh);
    }
      
    .container {
        text-align: center; 
    }
}

@media (max-width: 590px) {
    footer { 
        padding-top: 2vh;
        padding-bottom: 2vh;
        text-align: center;
        background-color: var(--primary-color);
        color: var(--white);
        font-size: clamp(1vw, 1.6vh, 2.4vh);
    }
    
    .box {
        width: 80vw; 
        height: auto; 
        background-color: var(--primary-color); 
        margin-top: 2vw;
        margin-bottom: 0; 
    }
    
    .box-media{
        font-size: clamp(1.6vw, 3.2vh, 3.2vh);
    }
      
    .container {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }

    .box:nth-child(1) {
        order: 1; 
    }

    .box:nth-child(2) {
        order: 3; 
    }
    .box:nth-child(3) {
        order: 2; 
    }
}

@media (max-width: 450px){
    .portfolio-text h3{
        font-size: clamp(2vw, 2vh, 2vh);
    }
}




div.blogContainer{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: clamp(4vw, 6vh, 8vh);
}
a.blogItem{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: clamp(25vw, 50vh, 80vw);
    box-shadow: 0 0 3vh rgba(0,0,0,0.35);
    border-radius: 0.6vh;
    margin-bottom: clamp(2.5vw, 5vh, 5vh);
    margin-left: clamp(1.5vw, 3vh, 3vh);
    margin-right: clamp(1.5vw, 3vh, 3vh);
    margin-top: 0;
    overflow: hidden;
}

a.blogItem div.uvodniFotka{
    width: 100%;
    max-height: calc(clamp(25vw, 50vh, 80vw)/1.5);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
a.blogItem div.uvodniFotka img{
    object-fit: cover;
    width: 100%;
    transform: scale(1);
    transition: transform 0.3s ease;
}

a.blogItem div.info{
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    font-weight: 400;
    padding: clamp(1.8vw, 3.6vh, 3.6vh);
    height: clamp(17vw, 35vh, 35vh);
    color: #000000;
}
a.blogItem div.info p.datum{
    font-size: clamp(1.1vw, 1.8vh, 2.2vh);
    line-height: 1.6;
    color: #323232;
    margin-bottom: clamp(0.5vw, 0.9vh, 1vh);
}
a.blogItem div.info h3{
    font-size: clamp(2.5vw, 3vh, 5vh);
    line-height: 1.3;
    margin-bottom: clamp(0.9vw, 1vh, 1.8vh);
    font-weight: 400;
}
a.blogItem div.info p.uvodniText{
    font-size: clamp(1.1vw, 1.9vh, 2.2vh);
    line-height: 1.3;
}
a.blogItem div.info p.cistVice{
    font-size: clamp(1.3vw, 2.2vh, 2.6vh);
    line-height: 1.6;
    color: #323232;
    margin-top: clamp(1.5vw, 2.5vh, 3vh);
    transition: color 0.3s ease;
}

@media (min-width: 1200px){
    a.blogItem:hover div.info p.cistVice{
        color: var(--primary-color);
    }
    a.blogItem:hover div.uvodniFotka img{
        transform: scale(1.12);
    }
}



div.prispevekContainer{
    width: 90vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: clamp(2.5vw, 5vh, 5vh);

    color: #000000;
    font-size: clamp(1.2vw, 2.2vh, 2.4vh);
    font-weight: 400;
}
div.prispevekContainer div.mainContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: clamp(45vw, 90vh, 90vw);
}


div.prispevekContainer p{
    font-size: clamp(1.4vw, 2.6vh, 2.8vh);
    line-height: 1.3;
    color: #000000;
    display: block;
}
div.prispevekContainer p span{
    font-size: clamp(2.5vw, 4vh, 5vh);
    margin-bottom: clamp(0.3vw, 0.6vh, 0.6vh);
    line-height: 1.3;
    color: #000000;
    display: block;
}
div.prispevekContainer ul{
    display: block;
    list-style-type: decimal;
    margin-left: calc(clamp(0.5vw, 1vh, 1vh)*3);
    font-size: clamp(1.2vw, 2.3vh, 2.4vh);
}
div.prispevekContainer img{
    height: clamp(25vw, 50vh, 50vw);
    max-width: 80vw;
    object-fit: contain;
    margin-top: clamp(2vw, 4vh, 4vh);
    margin-bottom: clamp(2vw, 4vh, 4vh);
    filter: drop-shadow(0 0 1vh rgba(0,0,0,0.35));
    cursor: pointer;
}

div.prispevekContainer p.prispevekDatum{
    font-size: clamp(1.25vw, 2.5vh, 2.5vh);
    line-height: 1.3;
    color: #323232;
    text-align: center;
    margin-bottom: 0;
}
div.prispevekContainer h1{
    text-align: center;
    font-size: clamp(3.2vw, 5.5vh, 6.4vh);
    line-height: 1.1;
    font-weight: 400;
    margin-top: clamp(1.1vw, 2.2vh, 2.2vh);
    margin-bottom: clamp(1.1vw, 2.2vh, 2.2vh);
    max-width: 85vw;
}
div.prispevekContainer div.uvodniImg{
    height: clamp(26vw, 52vh, 55vw);
    margin-bottom: clamp(1.1vw, 2.2vh, 2.2vh);
    margin-top: clamp(2vw, 4vh, 4vh);
}
div.prispevekContainer div.uvodniImg img{
    height: 100%;
    max-width: 90vw;
    object-fit: contain;
    filter: none;
    margin-top: 0;
    margin-bottom: 0;
}




div.omneContainer{
    background-color: var(--background-color);
    padding: clamp(1vw, 2vh, 2vh);
    padding-top: clamp(3vw, 5vh, 6vh);
    padding-bottom: clamp(4vw, 6vh, 8vh);
    margin: 1vh 0;
    max-width: 90%;
    margin: 2vh auto;
    border-radius: 0.6vh;
    box-shadow: 0 0 3vh rgba(0,0,0,0.1);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
div.omneHorni{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: clamp(70vw, 130vh, 80vw);
}
div.omneHorni img{
    object-fit: cover;
    width: clamp(22vw, 40vh, 80vw);
    height: calc(clamp(22vw, 40vh, 80vw)/0.666);
}
div.omneHorni div{
    font-size: clamp(1.55vw, 2.7vh, 3.1vh);
    line-height: 1.3;
    text-align: left;
    color: var(--black);
    display: block;
    width: clamp(42vw, 70vh, 84vw);
    margin-left: clamp(1.25vw, 2vh, 2.5vh);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: clamp(1vw, 3.5vh, 3.5vh);
}
div.omneHorni div h2{
    font-size: clamp(3.75vw, 6.5vh, 7.5vh);
    color: var(--black);
    font-weight: 400;
    margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
    line-height: 1.2;
}
div.omneHorni div p{
    font-size: clamp(1.45vw, 2.4vh, 2.9vh);
    line-height: 1.3;
    text-align: left;
    color: var(--black);
    display: block;
    width: 100%;
}
div.omneHorni div br{
    line-height: 0.5;
}
div.omneHorni div p.velke{
    font-size: clamp(1.8vw, 3.8vh, 3.6vh);
    margin-bottom: clamp(1.2vw, 2.4vh, 2.4vh);
}
div.omneHorni div div.kontakt{
    font-size: clamp(1vw, 2vh, 2vh);
    line-height: 1.3;
    text-align: left;
    color: var(--black);
    width: clamp(40vw, 70vh, 80vw);
    margin-left: 0;
    display: flex;
    /*flex-direction: column;*/
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: clamp(2vw, 3.6vh, 3.6vh);
}
div.omneHorni div div.kontakt p{
    display: block;
    width: auto;
    font-size: clamp(1.3vw, 2.45vh, 2.6vh);
}

div.omneDolni{
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(70vw, 130vh, 80vw);
    font-family: var(--font-primary);
    padding-top: clamp(4.5vw, 8vh, 9vh);
}
div.omneDolni form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
div.omneDolni form h4{
    font-size: clamp(3.5vw, 7vh, 7vh);
    color: var(--black);
    margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
}
div.omneDolni form div.UdajeInput{
    position: relative;
    width: clamp(25vw, 50vh, 70vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    margin-bottom: clamp(1.5vw, 3vh, 3vh);
}
div.omneDolni form div.UdajeInput p{
    text-align: left;
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    color: var(--Text);
    line-height: 1.8;
}
div.omneDolni form div.UdajeInput input{
    text-align: left;
    padding: clamp(0.4vw, 0.8vh, 0.8vh);
    color: var(--Text);
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    resize: none;
    background-color: var(--background-color);
    border-style: solid;
    border-width: calc(var(--borderWidth)*0.7);
    border-color: var(--black);
    position: relative;
    width: 100%;
    font-family: var(--font-primary);
    font-weight: 400;
}


div.omneDolni form div.UdajeArea{
    position: relative;
    width: clamp(25vw, 50vh, 70vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    margin-bottom: clamp(1.5vw, 3vh, 3vh);
}
div.omneDolni form div.UdajeArea p{
    text-align: left;
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    color: var(--Text);
    line-height: 1.8;
}
div.omneDolni form div.UdajeArea textarea{
    padding: clamp(0.5vw, 1vh, 1vh);
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    font-weight: 400;
    width: 100%;
    max-width: 100%;
    font-family: var(--font-primary);
    background-color: var(--background-color);
    border-style: solid;
    border-width: calc(var(--borderWidth)*0.7);
    border-color: var(--Secondary);
}

div.omneDolni form a{
    margin-top: clamp(0.75vw, 1.5vh, 1.5vh);
    margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
    text-decoration: none;
    font-size: clamp(1.5vw, 3vh, 3vh);
    color: var(--Text);
    background-color: var(--background-color);
    border-style: solid;
    border-width: var(--borderWidth);
    border-color: var(--black);
    width: clamp(12vw, 24vh, 24vh);
    text-align: center;
    line-height: 1.8;
    transition-property: border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

a.Tlacitko{
    display: block;
    margin-top: clamp(3vw, 6vh, 6vh);
    margin-bottom: clamp(4vw, 8vh, 8vh);
    text-decoration: none;
    font-size: clamp(1.5vw, 3vh, 3vh);
    color: var(--Text);
    background-color: var(--background-color);
    border-style: solid;
    border-width: var(--borderWidth);
    border-color: var(--black);
    width: clamp(20vw, 40vh, 80vw);
    text-align: center;
    line-height: 1.8;
    transition-property: border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

@media (max-aspect-ratio: 7/5){
    div.omneHorni div p{
        font-size: clamp(1.5vw, 3vh, 3vh);
        line-height: 1.3;
        text-align: left;
        color: var(--black);
        display: block;
        width: 100%;
    }
    div.omneHorni div div.kontakt p{
        display: block;
        width: auto;
        font-size: clamp(1.5vw, 3vh, 3vh);
    }
}

@media (min-width: 1200px){
    div.omneDolni form a:hover{
        border-color: var(--tertiary-color);
        color: var(--tertiary-color);
    }
    a.Tlacitko:hover{
        border-color: var(--tertiary-color);
        color: var(--tertiary-color);
    }
}



.video{
    background-color: var(--primary-color);
}

.video-container{
    top: 0vh;
    overflow: hidden;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(40vw, 60vh, 80vh);
    position: relative;
}

#myVideo {
    top: 0;
    min-width: 100vw;
    height: 100%;
    object-fit: cover;
}

.video-text {
    position: absolute;
    left: 50vw;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20vh;
    color: #FFFFFF;
}

.video-text h1{
    font-size: clamp(2.8vh, 5.6vw, 5.6vw);
    letter-spacing: clamp(0.25vw, 0.5vh, 0.5vh);
    line-height: 1.3;
}

.video-text h5 {
    font-size: clamp(1vh, 2vw, 2vw);
    color: #FFFFFF;
    letter-spacing: clamp(0.15vw, 0.3vh, 0.3vh);
}

.video-text a {
    font-size: clamp(1vh, 2vw, 2vw);
    color: #FFFFFF;
    margin: 0; /* Remove default margin */
    border: 0.2vh solid #FFFFFF; /* Define the border width, style, and color */
    margin-top: 3vh;
    padding: 0;
    display: block;
    width: clamp(7vh, 14vw, 14vw);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: 2;
}

#videoprodukce-menu {
    background-color: var(--primary-color);
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    height: clamp(3.5vw, 4vh, 7vh);
    position: relative; /* Important for positioning the triangles */
    overflow: hidden; /* Ensures the triangles are clipped */
    clip-path: polygon(0 0, 35vw 0, 40vw 100%, 60vw 100%, 65vw 0, 100% 0, 100% 100%, 60vw 100%, 0 100%);
    background: linear-gradient(to right, var(--primary-color) 49%, var(--secondary-color)51%);
    top: calc(-0.95*clamp(3.5vw, 4vh, 7vh));
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(1.7vw, 2.2vh, 3.4vh);
    color: var(--background-color);
}

.videoprodukce-menu-left{
    width: 38vw;
    text-align: center;
    height: 100%;
    padding-top: clamp(0.5vw, 0.5vh, 0.5vh);
}

.videoprodukce-menu-right{
    width: 38vw;
    text-align: center;
    height: 100%;
    padding-top: clamp(0.5vw, 0.5vh, 0.5vh);
}

.videoprodukce-menu-right:hover{
    color: var(--primary-color);
}

#nase-prace{
    position: absolute;
    top: -12vh;
}

.videoprodukce-prace-pozadi {
    background-color: var(--primary-color);
    padding-bottom: 2vh;
    margin-top: calc(-1*clamp(3.5vw, 4vh, 7vh));
    padding-top: 4vh;
    z-index: 4;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.videoprodukce-prace-item {
    display: flex;
    flex-direction: row;  /* Flex container with horizontal layout */
    margin: auto;
    width: 80%;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 3vh rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    background-color: var(--white);
    justify-content: center;
    height: auto;
    gap: 1rem;
    margin-bottom: 2vh;
}

.videoprodukce-prace-video {
    flex: 1; /* Allow video to take up available space */
    max-width: 60%; /* Adjust the width ratio as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    object-fit: cover;
    margin-left: 1vw;
    margin-top: 1vh;
    margin-bottom: 1vh;

}

.videoprodukce-prace-text {
    flex: 1; /* Allow text block to take up available space */
    max-width: 40%; /* Adjust the width ratio as needed */
    text-align: justify; /* Ensure text is justified */
    opacity: 1;
    margin-right: 5vw;
    transition: opacity 0.3s ease; /* Combine transition properties */
    text-align: left; /* Center-align text within its block */
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    background-image: url("uvozovky_final.svg"); /* Path to your background image */
    background-size: clamp(12vw, 24vh, 24vh); /* Ensure the image covers the entire element */
    background-position: 10% 45% ; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    font-style: italic;
}

.videoprodukce-prace-text h2{
    font-size: clamp(1.8vw, 3.6vh, 3.6vh);
    margin-bottom: 1vh;
    font-style: normal;
    text-align: left ;
}

@media (max-aspect-ratio: 119/95) { /* Adjust breakpoint as needed */
    .videoprodukce-prace-item {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center-align elements horizontally */
    }

    .videoprodukce-prace-video,
    .videoprodukce-prace-text {
        max-width: 100%; /* Ensure they don’t exceed container width */
        margin: 1vh ; /* Adjust margins for vertical spacing */
        margin-bottom: 0;
    }

    .videoprodukce-prace-text {
        margin: 1vh; /* Remove right margin in vertical layout */
        margin-top: 0;
    }
}

.pozadi-obrazek{
    background-image: url('../uvozovky.svg');
}

iframe {
    height: clamp(20vw, 40vh, 53vw);
    width: clamp(30vw, 60vh, 80vw);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
}

.onas-background{
    background-color: var(--secondary-color);
    padding-bottom: 2vh;
    margin-top: calc(-1*clamp(3.5vw, 4vh, 7vh));
    padding-top: 4vh;
    z-index: 4;
    position: relative;
}

.videoprodukce-onas-container {
    margin: auto;
    width: clamp(80vw, 160vh, 90vw);
    padding-top: 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 3vh rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    background-color: var(--white);
    justify-content: center;
    height: auto;
}

.videoprodukce-onas-text{
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    text-align: center;
    width: clamp(45vw, 100vh, 80vw);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.videoprodukce-onas-text h2{
    text-align: center;
    font-size: clamp(3.2vw, 5.5vh, 6.4vh);
    line-height: 1.1;
    margin-bottom: clamp(1.1vw, 2.2vh, 2.2vh);
    max-width: 85vw;
    margin-top: 10vh;
}

.onas-ikony {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4vw; /* Space between each icon-container */
    color: var(--secondary-color);
    margin-right: 0;
    flex-wrap: wrap;
}

.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6vh;
}
    
.icon-container i {
    font-size: clamp(3.5vw, 7vh, 7vh);
    margin-bottom: 1vh; 
}

.icon-container h6 {
    font-size: clamp(1.5vw, 3vh, 3vh);
    text-align: center;
    margin-bottom: 3vh;
}

@media (orientation: portrait) { /* Adjust this value based on your needs */
    .onas-ikony {
        justify-content: space-evenly; /* Ensure icons are evenly spaced in the new column layout */
        gap: 0;
    }
    .icon-container {
        flex: 1 1 45%; /* Adjust flex-basis to approximately half width */
        margin-top: 0; /* Removes top margin when icons are wrapped */
    }
    .icon-container i {
        margin-bottom: 0; /* Removes bottom margin when icons are wrapped */
    }
    .videoprodukce-onas-text{
        margin-bottom: 2vh;
    }
    .icon-sipka{
        display: none;
    }
}

@media (max-width: 1200px){
    .videoprodukce-menu-right:hover{
        color: var(--white);
    }
    #mainvideo a:hover {
        color: var(--white);
    }
}


.icon-sipka i{
    font-size: clamp(2vw, 4vh, 4vh);
    margin-right: -2vw;
    margin-left: -2vw;
}

div.dotaz{
    position: fixed;
    bottom: 0;
    left: 0;
    
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: clamp(5vw, 10vh, 10vh);
    background-color: var(--background-color);
    z-index: 9;
    display: none;
    border-top: var(--black) calc(var(--borderWidth)*0.75) solid;
}
div.dotaz.show{
    display: flex;
}
div.dotaz div{
    max-width: calc(100% - clamp(6vw, 12vh, 12vh));
    display: flex;
    align-items: center;
}
div.dotaz div p{
    text-align: left;
    font-weight: 500;
    color: var(--black);
    font-size: clamp(1.5vw, 3vh, 3vh);
    margin-left: clamp(2.5vw, 5vh, 5vh);
    margin-right: clamp(1.5vw, 3vh, 3vh);
}
div.dotaz div a{
    text-align: left;
    font-weight: 400;
    color: var(--black);
    font-size: clamp(1.5vw, 3vh, 3vh);
    text-decoration: underline;
    margin-left: clamp(1vw, 2vh, 2vh);
    margin-right: clamp(1vw, 2vh, 2vh);
    transition: color 0.3s ease;
}
div.dotaz a.close{
    height: clamp(1.5vw, 3vh, 3vh);
    margin-right: clamp(2.5vw, 5vh, 5vh);
}
div.dotaz a.close img{
    object-fit: contain;
    height: 100%;
    filter: invert(100%);
}

@media (max-aspect-ratio: 43/50){
    div.dotaz a.close{
        position: absolute;
        right: 0;
        top: 0;
        margin-top: clamp(0.75vw, 1.5vh, 1.5vh);
        margin-right: clamp(0.75vw, 1.5vh, 1.5vh);
    }
    div.dotaz{
        height: auto;
        padding-top: clamp(2.5vw, 5vh, 5vh);
        justify-content: center;
    }
    div.dotaz div{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 90vw;
    }
    div.dotaz div p{
        font-size: clamp(1.4vw, 2.8vh, 2.8vh);
        margin-left: 0;
        margin-right: 0;
        margin-top: clamp(0.75vw, 1.5vh, 1.5vh);
        margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
    }
    div.dotaz div a{
        font-size: clamp(1.4vw, 2.8vh, 2.8vh);
        margin: clamp(0.75vw, 1.5vh, 1.5vh);
    }
}

@media (min-width: 1200px){
    div.dotaz div a:hover{
        color: var(--tertiary-color);
    }
}