a, header {
    -moz-transition: .25s;
    -webkit-transition: .25s
}

a, a.button, body {
    color: #fff
}

a.button, header {
    box-sizing: border-box
}

header, header .logo a:before, header:before {
    left: 50%;
    transform: translate(-50%, 0)
}

body, nav.menu ul {
    padding: 0;
    margin: 0
}

header, main {
    max-width: 1200px
}

main > .uvod .image, main > .uvod.obrazek .image {
    padding-top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden
}

a.button, h1, h2, main > .text, main > .uvod .text {
    text-align: center
}

h2 + h3, ol, p, ul {
    margin: 0 0 30px
}

h2 + h3, ol li, ul li {
    line-height: 30px
}

a:hover, main > .formular form p a {
    text-decoration: underline
}

body, form * {
    font-family: Jost, sans-serif
}

form label, form label a, form textarea, h5 {
    color: #010101
}

body {
    background: #000;
    font-weight: 300
}

body > .content, section.katalog .swiper-katalog {
    overflow: hidden
}

a {
    transition: .25s;
    text-decoration: none
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

* {
    scroll-behavior: smooth
}

:focus {
    outline: 0
}

h1 {
    font-size: 50px;
    line-height: 60px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 0 20px;
    letter-spacing: 5px
}

h2, h2 + h3, h3 {
    font-weight: 300;
    text-transform: uppercase
}

h2 {
    font-size: 37px;
    line-height: 47px;
    margin: 0 0 50px;
    letter-spacing: 7.6px
}

h3 {
    font-size: 24px;
    line-height: 34px;
    margin: 0 0 15px;
    letter-spacing: 4.8px
}

b, form label a, strong {
    font-weight: 600
}

h2 + h3 {
    font-size: 18px;
    letter-spacing: 2.8px
}

ol li, p, ul li {
    font-size: 18px;
    letter-spacing: .5px
}

form > div, ol li, ul li {
    margin: 0 0 10px
}

p {
    line-height: 33px
}

header, main {
    margin: 0 auto
}

h2 + h3:last-child, h2:last-child, h3:last-child, nav.menu ul li ul li:last-child, p:last-child {
    margin-bottom: 0
}

a.button {
    display: inline-block;
    text-transform: uppercase;
    width: 300px;
    padding: 18px 10px 18px 12px;
    background: 0 0;
    border-radius: 0;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 3.6px;
    text-decoration: none;
    font-weight: 400;
    border: 1px solid #fff
}

header:before, nav.menu ul li ul {
    background: rgba(0, 0, 0, .78);
    position: absolute
}

a.button:hover, form input[type=submit]:hover, section.katalog p.button a span:hover {
    color: #000;
    background: #fff
}

header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 32px 0;
    position: fixed;
    top: 0;
    z-index: 10;
    border: none;
    width: 100%;
    transition: .25s
}

header:before, header > * {
    -moz-transition: .25s;
    -webkit-transition: .25s
}

header:before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    top: 0;
    z-index: -1;
    opacity: 1;
    transition: .25s
}

body.not-front header:before {
    opacity: 1;
    background: #000
}

header > * {
    transition: .25s
}

header .logo a, header .logo a img {
    -moz-transition: .25s;
    -webkit-transition: .25s;
    position: relative
}

header .logo {
    width: 123px;
    overflow: hidden
}

header .logo a {
    transition: .25s;
    height: 50px;
    display: block
}

header .logo a img {
    width: 62px;
    transition: .25s;
    top: 0
}

body.scrolled header .logo a img {
    top: -51px
}

header .logo a:before {
    content: "Pergolas";
    display: block;
    font-size: 25px;
    line-height: 51px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 52px;
    font-weight: 400;
    -moz-transition: .25s;
    -webkit-transition: .25s;
    transition: .25s
}

body.scrolled header .logo a:before {
    top: 0
}

nav.menu {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%)
}

nav.menu.left {
    right: auto;
    left: 0
}

nav.menu ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 45px;
    align-items: center
}

nav.menu ul li {
    position: relative;
    margin: 0
}

nav.menu ul li a, nav.menu ul li span {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    display: block;
    font-weight: 400
}

nav.menu ul li span {
    cursor: default
}

nav.menu ul li ul {
    display: none;
    left: 0;
    top: 100%;
    padding: 35px 45px;
    border-radius: 0;
    white-space: nowrap
}

.polozka-realizace .galerie a:nth-child(2), .polozka-realizace .galerie a:nth-child(3), main > .uvod.obrazek picture.slide:first-child, nav.menu ul li:hover ul {
    display: block
}

form input[type=submit], section.katalog p.button a span {
    display: inline-block;
    letter-spacing: 3.6px;
    text-decoration: none
}

nav.menu ul li ul li {
    margin-bottom: 10px
}

nav.menu ul li a.button {
    padding: 8px 16px;
    width: auto
}

.swiper .swiper-pagination, a.menu-switcher, main > .uvod.obrazek picture.slide {
    display: none
}

main {
    width: 96%
}

main > .uvod {
    width: 100vw;
    max-width: 1920px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    max-height: 100vh;
    min-height: 100vh;
    overflow: hidden
}

main > .uvod .image {
    position: relative
}

main > .uvod .image video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

main > .uvod.obrazek .image {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center
}

main > .uvod.obrazek .image picture {
    height: 100%;
    width: 100%
}

main > .uvod.obrazek .image img {
    max-width: 10000px;
    min-height: 100%;
    width: auto;
    min-width: 100%;
    height: 100%;
    object-fit: cover
}

main > .uvod .text {
    width: 100%;
    max-width: 865px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

main > .uvod.podkres .text:before {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% + 200px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 300px;
    background: radial-gradient(rgba(0, 0, 0, .9) 0, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%)
}

main > .uvod .text h1 {
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 5px;
    margin: 0;
    padding-top: 20px
}

body.home main > .uvod .text h1 {
    background: url(/build/images/symbol-nekonecno-bez-pozadi.png) center top/55px auto no-repeat;
    padding-top: 50px
}

main > .uvod .text p {
    font-size: 27px;
    line-height: 37px;
    letter-spacing: 4.6px;
    text-transform: uppercase;
    padding-top: 30px
}

.swiper-wrapper > .swiper-slide a, main > .uvod a.continue, section.katalog .gallery {
    font-size: 0px;
    text-indent: -9999px
}

main > .uvod a.continue {
    display: block;
    position: absolute;
    animation: 1.5s infinite jumpInfinite;
    top: calc(100vh - 100px);
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    z-index: 5;
    background: url(/build/images/angle-down-solid.svg) center center/60px 60px no-repeat
}

@keyframes jumpInfinite {
    0%, 100% {
        margin-top: 0
    }
    50% {
        margin-top: 20px
    }
}

main > .text {
    position: relative;
    padding: 125px 0
}

main > .text h2 {
    margin-bottom: 30px
}

main > .text p a.button, main > .white-section p a.button {
    margin-top: 40px
}

main > .text.katalog:before, section.katalog:before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    z-index: -1;
    background: #fff
}

main > .white-section h3 + p {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px
}

body.not-front main > .text {
    color: #000;
    padding-top: 200px;
    text-align: left
}

body.not-front main > .text h1, body.not-front main > .text.dekujeme p, main > .formular form p {
    text-align: center
}

body.not-front main > .text h2 {
    padding-top: 20px;
    margin-bottom: 30px
}

body.not-front main > .text a:hover, main > .formular form p a:hover {
    text-decoration: none
}

body.not-front main > .text a {
    color: #fff;
    text-decoration: none;
    font-weight: 400
}

body.not-front main > .text p:last-child a {
    margin-top: 0
}

ol, ul {
    padding: 0 0 0 20px
}

form input[type=submit], form label, h5, section.katalog p.button a span {
    text-transform: uppercase;
    line-height: 20px
}

ol li::marker, ul li::marker {
    font-weight: 600;
    color: #000
}

main > .formular {
    position: relative;
    padding: 140px 0 50px;
    color: #000
}

main > .formular .form-inner {
    padding: 20px;
    background: rgba(255, 255, 255, .9);
    max-width: 730px;
    margin: 0 auto
}

body.not-front main > .text.lightgray:before, main > .formular:before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    z-index: -1;
    background: #e9e9e9
}

main > .formular:before {
    background: url(/build/obrazky/pozadi-ziskat-nabidku.jpg) center center/cover no-repeat
}

.swiper-button-next, .swiper-button-prev, main .formular .text-inner {
    color: #fff
}

main .formular .text-inner p {
    font-size: 17px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    margin-bottom: 30px
}

main > .formular form p a {
    color: #000
}

form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

form.new > div:first-child, form.new > div:nth-child(4), form.new > div:nth-child(6), form.new > div:nth-child(7), form > *, section.kontakt-sloupce h1 {
    width: 100%
}

form > div:first-child, form > div:nth-child(2), form > div:nth-child(3), form > div:nth-child(4), form > div:nth-child(6), form > div:nth-child(7) {
    width: calc(50% - 10px)
}

form label, h5 {
    display: block;
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 5px;
    letter-spacing: 2.3px
}

h5 {
    padding-top: 25px;
    margin-bottom: 10px
}

form input[type=email], form input[type=text], form select {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    background: #fff;
    border-radius: 0;
    border: 2px solid #b4b4b4;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 400;
    color: #010101
}

form input[type=submit], form textarea {
    border-radius: 0;
    font-size: 15px;
    box-sizing: border-box
}

form select {
    appearance: none;
    background: url(/build/images/angle-down-solid.svg) right 20px center/20px no-repeat #fff
}

form textarea {
    width: 100%;
    height: 120px;
    background: #fff;
    border: 2px solid #b4b4b4;
    padding: 10px 20px;
    font-weight: 400
}

form .form-actions {
    margin: 0;
    text-align: center;
    padding: 10px 0
}

form input[type=submit] {
    width: 320px;
    padding: 20px 10px;
    text-align: center;
    font-weight: 500;
    background: #000;
    color: #fff;
    cursor: pointer;
    border: 2px solid #000
}

.swiper-wrapper > .swiper-slide {
    overflow: hidden;
    height: 360px;
    position: relative
}

.swiper-wrapper > .swiper-slide img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 10000px;
    min-width: 100%;
    width: 100%
}

.swiper-wrapper > .swiper-slide a:first-child:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2
}

.swiper-wrapper > .swiper-slide p {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    margin: 0;
    text-align: center;
    background: rgba(0, 0, 0, .5)
}

section.uvod + div + section.lists {
    padding-top: 125px
}

section.kontakt-sloupce {
    padding: 140px 0 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 100vh;
    align-content: flex-start
}

section.kontakt-sloupce .left, section.kontakt-sloupce .right {
    width: calc(50% - 20px);
    padding-top: 45px
}

section.kontakt-sloupce .left p:last-child {
    font-size: 11px;
    line-height: 15px;
    padding: 9px 0
}

section.polozky-realizace {
    position: relative;
    color: #000
}

section.polozky-realizace:before {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 150px);
    position: absolute;
    left: 50%;
    top: -50px;
    z-index: -1;
    background: #fff;
    transform: translate(-50%, 0)
}

.polozka-realizace {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 100px;
    text-align: center
}

.polozka-realizace .left, .polozka-realizace .right {
    width: calc(50% - 8px)
}

.polozka-realizace .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.polozka-realizace .right .text {
    padding: 20px 16px 0
}

.polozka-realizace .right .text p {
    margin-bottom: 20px;
    line-height: 25px
}

.polozka-realizace .galerie {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    position: relative
}

.polozka-realizace .galerie a {
    overflow: hidden;
    width: calc(50% - 8px);
    height: 180px;
    display: none;
    position: relative
}

.polozka-realizace .galerie a img {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.polozka-realizace .galerie a:nth-child(3):before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .5)
}

.polozka-realizace .galerie a:nth-child(3):after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    top: calc(50% - 48px);
    right: 0;
    width: 33%;
    height: 96px;
    background: url(/build/images/angle-down-solid.svg) center center/30px 30px no-repeat;
    transform: rotate(-90deg)
}

main > .black-section {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 65px 0 55px
}

main > .text.white-section {
    padding: 140px 0 50px
}

main > .text.white-section.hlavni-nadpis {
    padding: 140px 0 45px
}

main > .text.white-section.hlavni-nadpis h1, section.kontakt-sloupce.hlavni-nadpis h1 {
    margin: 25px 0 0
}

main .formular .text-inner.hlavni-nadpis h1 {
    margin-top: 25px
}

section.katalog {
    padding: 180px 0 100px;
    position: relative
}

section.katalog .gallery > .swiper-slide img {
    max-height: calc(100vh - 150px);
    width: auto
}

section.katalog .swiper-wrapper > .swiper-slide {
    height: auto;
    background: #000
}

section.katalog .swiper-wrapper > .swiper-slide img {
    position: static;
    max-width: 100%;
    transform: none
}

section.katalog p.button {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    font-size: 14px;
    text-indent: 0
}

section.katalog p.button a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-top: 40px;
    width: 100%;
    height: 100%;
    text-decoration: none
}

section.katalog p.button a span {
    width: 162px;
    box-sizing: border-box;
    padding: 10px 10px 10px 12px;
    background: 0 0;
    border-radius: 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border: 1px solid #fff;
    font-weight: 400
}

@media screen and (max-width: 1600px) {
    .swiper-wrapper > .swiper-slide {
        height: 300px
    }
}

@media screen and (max-width: 1400px) {
    .swiper-wrapper > .swiper-slide {
        height: 270px
    }
}

@media screen and (max-width: 1220px) {
    header {
        padding-left: 20px;
        padding-right: 20px
    }

    header nav.menu {
        right: 20px
    }

    nav.menu.left {
        right: auto;
        left: 20px
    }

    main > .uvod .text {
        padding: 80px 20px 0;
        box-sizing: border-box
    }

    nav.social {
        left: 20px
    }

    .swiper-wrapper > .swiper-slide img {
        width: auto;
        height: 100%
    }

    main > .uvod .image {
        height: 101vh
    }
}

@media screen and (max-width: 1023px) {
    a.menu-switcher span, a.menu-switcher span:after, a.menu-switcher span:before {
        background: #fff;
        width: 30px;
        border-radius: 0
    }

    h1, main > .uvod .text h1 {
        font-size: 44px;
        line-height: 54px
    }

    h1 {
        letter-spacing: 4.8px
    }

    .polozka-realizace .left, header nav.menu, header nav.menu ul li span {
        display: none
    }

    a.menu-switcher {
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%)
    }

    a.menu-switcher span {
        display: block;
        margin: 10px 20px;
        font-size: 0px;
        text-indent: -9999px;
        height: 4px;
        position: relative;
        transition-duration: .3s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }

    a.menu-switcher span:before {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: -10px;
        right: 0;
        transition: top .1s ease-in .34s, opacity .1s ease-in, background-color .15s
    }

    a.menu-switcher span:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        bottom: -10px;
        right: 0;
        transition: bottom .1s ease-in .34s, transform .3s cubic-bezier(.55, .055, .675, .19), background-color .15s
    }

    body.mobile-menu-expanded a.menu-switcher span {
        transform: rotate(225deg);
        transition-delay: 0.14s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        width: 30px
    }

    body.mobile-menu-expanded a.menu-switcher span:before {
        top: 0;
        opacity: 0;
        transition: top .1s ease-out, opacity .1s ease-out .14s, background-color .15s;
        width: 30px
    }

    body.mobile-menu-expanded a.menu-switcher span:after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom .1s ease-out, transform .3s cubic-bezier(.215, .61, .355, 1) .14s, background-color .15s;
        width: 30px
    }

    body.mobile-menu-expanded header nav.menu {
        display: block;
        top: calc(100% + 176px);
        left: auto;
        right: 0;
        width: 270px;
        padding: 0 0 10px;
        transform: none;
        background: rgba(0, 0, 0, .78)
    }

    body.mobile-menu-expanded header nav.menu.left {
        top: 100%;
        padding: 0
    }

    header nav.menu ul {
        gap: 0;
        flex-direction: column
    }

    header nav.menu ul li a, header nav.menu ul li span {
        padding: 10px 20px;
        text-align: center
    }

    nav.menu ul li ul {
        display: block;
        position: static;
        padding: 0;
        border-radius: 0;
        background: 0 0
    }

    nav.menu ul li ul li {
        margin-bottom: 0
    }

    h2, main > .nadpis h2 {
        font-size: 30px;
        line-height: 40px
    }

    main {
        width: 100%;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px
    }

    .polozka-realizace .right {
        width: 100%;
        flex-direction: column-reverse
    }

    main > .uvod .text h1 {
        letter-spacing: 3px
    }
}

@media screen and (max-width: 767px) {
    main > .uvod {
        max-height: 450px;
        min-height: 450px
    }

    main > .uvod.obrazek .image {
        height: 460px
    }

    main > .uvod .image {
        min-height: 460px;
        height: 460px
    }

    main > .uvod .text p {
        padding-top: 15px;
        margin: 0
    }

    main > .uvod.obrazek .image img {
        position: relative;
        left: 50%;
        transform: translate(-50%, 0)
    }

    .polozka-realizace .galerie a {
        height: 155px
    }

    section.kontakt-sloupce .left, section.kontakt-sloupce .right {
        width: 100%
    }

    h2 {
        margin: 0 0 15px
    }
}

@media screen and (max-width: 479px) {
    body.poptavka h1, h1, h3, p {
        letter-spacing: 0
    }

    h1 {
        font-size: 28px;
        line-height: 44px
    }

    body.not-front h1 {
        font-size: 32px
    }

    h2, main > .nadpis h2 {
        font-size: 24px;
        line-height: 34px;
        letter-spacing: 0
    }

    h3, main > .uvod .text p {
        font-size: 20px;
        line-height: 30px
    }

    a.button {
        width: 280px;
        letter-spacing: 1.6px
    }

    main > .uvod .text p {
        letter-spacing: 1px
    }

    main > .nadpis, main > .text, main > .white-section {
        padding: 50px 0
    }

    form > div:first-child, form > div:nth-child(2), form > div:nth-child(3), form > div:nth-child(4), form > div:nth-child(6), form > div:nth-child(7) {
        width: 100%
    }

    form input[type=submit] {
        width: 240px
    }

    body.poptavka h1 {
        font-size: 26px
    }

    main > .uvod .text h1 {
        font-size: 28px;
        line-height: 44px
    }

    .polozka-realizace .galerie a {
        height: 180px;
        width: 100%
    }

    .polozka-realizace .galerie {
        gap: 10px
    }
}