/*
stylesheet for ekspres.biz website
author: Bartosz Baszkiewicz
copyright: Bartosz Baszkiewicz - all rights reserved
*/

/* general settings */

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Dosis', sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
    color: #0F1723;
    background: #f0f0f0;
}
#hid {
    max-width: 100%;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

ul {
    list-style-type: none;
    list-style-position: inside;
}

ol {
    list-style-position: inside;
}

h1 {
    font-size: 42px;
    font-weight: 600;
}

h2 {
    font-size: 28px;
    font-weight: 600;
}

h3, h4, h5, h6 {
    font-size: 20px;
    font-weight: 600;
}

a {
    color: #0F1723;
    text-decoration: none;
}
    p a {
        text-decoration: underline;
        text-decoration-color: #0F1723;
    }

a:hover {
    transition: 0.8s ease;
    color: #7812DB;
}

a:active {
    transition: 0.3s ease;
    color: #1DDFE2;
}
    p a:active {
        transition: 0.3s ease;
        text-decoration-color: #1DDFE2;
    }

.stretch_it { 
    white-space: nowrap;
}
.justify { 
    text-align: justify;
}

/* header */

    #header.scrolled .header-container {
        position: fixed;
        z-index: 999;
        background-color: #f5f5f5;
    }
    #header.toggled #menu {
        transform: translateX(0px);
    }
    #header.toggled #nav-toggle .nav-1 {
        fill: #7812DB;
    }

.header-container {
    background-color: rgba(245, 245, 245, 0.8);
    position: relative;
    position: fixed;
    width: 100%;
    height: 76px;
    z-index: 999;
    border-bottom: 1px solid rgba(15, 23, 35, 0.2);
}

#logo {
    margin: 14px 0px 0px 23px;
    display: inline-block;
}
    .static-logo {
        height: 48px;
        width: auto;
    }
    .scroll-logo {
        height: 48px;
        width: auto;
        display: none;
    }

#nav-toggle {
    width: 40px;
    margin: 18px 23px 0px 0px;
    float: right;
    display: inline-block;
    cursor: pointer;
}
    .nav-1 {
        fill:#0f1723;
    }
    .nav-2 {
        fill:#f0f0f0;
    }
    #nav-toggle .nav-1:hover {
        transition: 0.8s ease;
        fill: #1DDFE2;
    }
    #nav-toggle .nav-1:active {
        transition: 0.3s ease;
        fill: #1DDFE2;
    }

#menu {
    width: 100vw;
    min-height: 100vh;
    background-color: rgba(15, 23, 35, 0.95);
    padding: 14px;
    position: absolute;
    top: 0;
    transform: translateY(-220vh);
    transition: 0.8s ease;
}
    #menu ul {
        display: block;
    }
    #menu ul li {
        display: block;
        text-align: center;
        line-height: 2;
    }
        #menu ul li i {
            width: 56px;
        }
    #menu a {
        color: #f5f5f5;
        position: relative;
        font-size: 20px;
        font-weight: 400;
        text-decoration: none;
        text-transform: uppercase;
        display: inline-block;
        padding: 8px 0;
        text-align: center;
    }
        #menu a:hover {
            transition: 0.8s ease;
            color: #7812DB;
        }
        #menu a:active {
            transition: 0.3s ease;
            color: #1DDFE2;
        }

/* hello */

#hello {
    width: 100%;
    height: 100vh;
}
    #hello .container {
        max-width: 100%;
        height: 100vh;
        margin: 0;
    }

.hello-container {
    width: 100%;
    height: 100vh;
}

.lead {
    display: inline-block;
    width: calc(100vw - 16px);
    height: calc(100vh - 150px);
    margin: 0;
    text-align: left;
    border: 0px solid #0F1723;
    padding: 16px;
    background: rgba(245, 245, 245, 0);
}
    .lead p {
        font-size: 1.5em;
        font-weight: 400;
        margin: 8px 0;
        margin-left: 16px;
        text-transform: uppercase;
        color: white;
        text-shadow: 0px 0px 5px black;
    }
    .lead p.black {
        font-size: 1.5em;
        font-weight: 400;
        margin: 8px 0;
        margin-left: 16px;
        text-transform: uppercase;
        color: black;
        text-shadow: 0px 0px 5px white;
    }
        
.dot {
    cursor: pointer;
    display: inline-block;
    margin: 4px;
    width: 22px;
    height: auto;
    }

/* slider start */
    
    .swiper-container {
        width: 100%;
        height: 100vh;
        position: relative;
        margin: auto;
        }
    
    .swiper-slide .slide-img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: bottom center;
    }
        .swiper-slide .slide-img.pos-cent {
            object-position: center;
        }
    .swiper-slide .lead-parent {
        position: absolute;
        display: block;
        margin: 0 auto;
        top: 100px;
        left: 8px;
    }
    
    .swiper-button-prev, .swiper-button-next {
        display: none !important;
        color: #7812DB !important;
    }
       
    .circles {
        position: absolute;
        bottom: 8px;
        right: calc(50% - 67px);
    }

    .dot.current {
        width: 26px;
        border: 1px solid rgba(245, 245, 245, 0.5);
        border-radius: 50%;
        position: relative;
        top: 2px;
    }
        .dot.current.s1 {
            filter: drop-shadow(0 0 8px rgba(15, 23, 35, 0.8));
        }
        .dot.current.s2 {
            filter: drop-shadow(0 0 8px rgba(29, 233, 226, 0.8));
        }
        .dot.current.s3 {
            filter: drop-shadow(0 0 8px rgba(120, 18, 219, 0.8));
        }
        .dot.current.s4 {
            filter: drop-shadow(0 0 8px rgba(232, 78, 139, 0.8));
        }
    .dot.add-border {
        width: 26px;
        border: 1px solid rgba(245, 245, 245, 0.5);
        border-radius: 50%;
        position: relative;
        top: 2px;
    }
    
    .swiper-pagination {
        position: relative;
        bottom: -15px;
        right: 16px;
        left: auto !important;
        width: 258px !important;
        height: 74px !important;
    }
    .swiper-pagination-bullet {
        display: inline-block;
        margin: 0 10px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50%;
        opacity: 0 !important;
        background: rgba(15, 23, 35, 0.8);
    }
        .swiper-pagination-bullet-active {
            background: #7812DB !important;
        }
    
/* slider end */

.scroll {
    display: inline-block;
    margin: 0 auto;
    width: 26px;
    height: auto;
    position: absolute;
    bottom: 8px;
    left: calc(50vw - 13px);
    z-index: 11;
}
    .scroll-img-1 {
        fill:#7812DB;
    }
        .scroll-img-1:hover {
            fill: #1DDFE2;
            transition: 1s ease;
        }
    .scroll-img-2 {
        fill:#f0f0f0;
        stroke:#f0f0f0;
        stroke-linecap:round;
        stroke-linejoin:round;
        stroke-width:2px;
    }

/* about */

.section-container {
    background: #f5f5f5;
    padding-bottom: 60px;
}
.section-container h1 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 32px;
}
    #about .section-container h1 {
        padding-top: 23px;
    }

.cover-img img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 23px;
    margin-top: 76px;
}
    .cover-img.pos-10 img {
        object-position: center 10%;
    }
    .cover-img.pos-20 img {
        object-position: center 20%;
    }
    .cover-img.pos-30 img {
        object-position: center 30%;
    }
    .cover-img.pos-40 img {
        object-position: center 40%;
    }
    .cover-img.pos-60 img {
        object-position: center 60%;
    }
    .cover-img.pos-70 img {
        object-position: center 70%;
    }
    .cover-img.pos-80 img {
        object-position: center 80%;
    }
    .cover-img.pos-90 img {
        object-position: center 90%;
    }

.section-container p {
    display: inline-block;
    margin: 30px;
    line-height: 2;
    text-align: justify;
}

.paragraph-box p {
    display: block;
}
.about .paragraph-box, .technology .paragraph-box {
    background: url(../../images/body/quote-close.svg);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 196px auto;
}
    .about .paragraph-box {
        margin-top: -80px;
    }

.underline {
    stroke: #0F1723;
    stroke-width: 3px;
    display: block;
    margin: 0 auto;
}

.quote-img-1 {
    width: 102px;
    height: auto;
}

.under-text {
    display: none;
}

.section-img {
    display: block;
    width: 100%;
    max-width: 453px;
    max-height: 255px;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
}

.box-img {
    display: none;
}

/* how we work */

.hww-box-container {
    text-align: center;
}
    .hww-box {
        display: inline-block;
        margin: 0 16px;
        margin-top: 20px;
    }
        .hww-box img {
            height: 100px;
            width: auto;
        }

/* products */

.products .paragraph-box {
    margin-top: 40px;
}

.products-gallery {
    margin: 0 auto;
    text-align: center;
}
    .products-gallery img {
        box-shadow: 0 0 8px rgba(15, 23, 35, 0.8);
    }
        .products-gallery img:hover {
            transition: 0.35s ease;
            transform: scale(1.03);
        }
.image-standard, .image-special {
    margin: 8px 0;
    max-width: 100%;
    object-fit: cover;
}

.product-title {
    margin-top: -40px;
}

/* technology */

.technology .paragraph-box {
    margin-top: -80px;
}
    .technology .paragraph-box p:last-of-type {
        margin-bottom: 0;
    }
    .technology .technology-list p {
        margin-bottom: 0;
    }
    .technology .technology-list ul {
        display: block;
        position: relative;
        list-style-type: circle;
        margin: 0 30px 30px 30px;
    }
.subpage-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* how to */

.paragraph-box ol {
    display: block;
    margin: 0 30px;
    line-height: 2;
    list-style-type: none;
}
.paragraph-box ul {
    list-style-type: circle;
}
    .paragraph-box ul ul {
        margin-left: 30px;
        list-style-type: disc;
    }

.how-to-img {
    display: block;
    margin: 0 auto;
    width: 140px;
    height: auto;
}
.how-to-img img {
    width: 140px;
    height: auto;
}
    .how-to-img.smaller img {
        width: 140px;
        height: auto;
        padding: 0 25px;
    }

/* contact form */

.contact-form {
    background: #fff;
    max-width: 1000px;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: 60px;
    border: 2px solid #fff;
    border-radius: 16px;
    -webkit-box-shadow: 0px 0px 16px 6px rgba(15, 23, 35, 0.2); 
    box-shadow: 0px 0px 16px 6px rgba(15, 23, 35, 0.2);
}
    .contact-form.hide {
        display: none;
    }
form h4 {
    margin: 16px 8px;
}
form input, form textarea {
    display: block;
    width: 90%;
    height: 40px;
    margin: 0 auto;
    margin-bottom: 16px;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    background: #f0f0f0;
    font-family: 'Dosis', sans-serif;
    font-size: 18px;
    padding-left: 23px;
    color: #0F1723;
}
    form input::placeholder, form textarea::placeholder {
        font-size: 14px;
    }
    form input:focus, form textarea:focus {
        outline: 0;
        border: 1px solid #0F1723;
    }
    form textarea {
        height: 200px;
        padding-top: 16px;
    }
    .addFileBox {
        display: block;
        width: 90%;
        margin: 0 auto;
        position: relative;
    }
        .file {
            width:100%;
            height: 60px;
            background: #fff;
            border: 1px dashed #0F1723;
            text-align: center;
            font-size: 14px;
            padding-top: 16px;
            position: relative;
            z-index: 2;
            opacity: 0;
        }
        fieldset {
            position: relative;
            display: block;
            margin: 0 auto;
            border: none;
        }
            .fakefile {
                width: 100%;
                height: 60px;
                position: absolute;
                left: 0;
                bottom: 0;
                background: #fff;
                border: 1px dashed #0F1723;
            }
    .checkboxBox {
        display: block;
        width: 90%;
        margin: 0 auto;
        position: relative;
    }
        .checkboxBox.marketing {
            margin-top: 16px;
        }
        .data-use {
            cursor: pointer;
        }
            .data-use input {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin: 6px 16px 16px 0px;
                position: absolute;
                left: 0;
                opacity: 0;
            }
            .data-use p, .data-use ol {
                text-align: justify;
                display: block;
                font-size: 12px;
                margin: 0;
                margin-left: 40px;
            }
                .data-use ol {
                    margin-left: 50px;
                }
            .checkbox-custom {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin: 6px 16px 16px 0px;
                position: absolute;
                top: 0;
                left: 0;
                border: 1px solid rgba(0, 0, 0, 0.8);
                border-radius: 4px;
            }
                .data-use input:checked ~ .checkbox-custom {
                    border: 1px solid rgba(0, 0, 0, 0.2);
                    border-radius: 50%;
                    background: #7812DB;
                    transition: 0.3s ease-out;
                    opacity: 1;
                }
    .g-recaptcha {
        display: inline-block;
        margin-top: 16px;
    }
    form button {
        display: block;
        margin: 0 auto;
        margin-top: 16px;
        margin-bottom: 16px;
        width: 40%;
        height: 40px;
        background-color: #f0f0f0;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        font-family: 'Dosis', sans-serif;
        font-size: 16px;
        color: #0F1723;
    }
        form button:hover {
            cursor: pointer;
            background-color: #7812DB;
            transition: 0.5s ease-out;
            color: #f0f0f0;
        }
        form button:active {
            opacity: 0;
            transition: 0.1s ease;
        }


/* contact */

.contact-data {
    display: block;
    margin: 0 auto;
}
.contact-data p {
    display: block;
    text-align: center;
    margin: 0 auto;
    line-height: 1.6;  
}
    .contact-data p:first-of-type {
        margin-top: 40px;
        font-weight: 500;
    }
    .contact-data i {
        display: inline-block;
        width: 30px;
        height: 30px;
        color: #0F1723;
    }
#RODO {
    font-size: 12px;
}
    #RODO p {
        display: block;
        margin: 0 30px;
        margin-top: 40px;
    }
    #RODO ol {
        margin: 0 30px;
        margin-left: 40px;
    }

.at {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 0 -2px 0;
}

/* footer */

#footer {
    display: block;
    max-width: 1200px;
    min-height: 179px;
    margin: 0 auto;
    background-color: #7812DB;
    color: #f5f5f5;
    text-align: center;
}

.footer-icons {
    text-align: center;
    width: 100%;
    max-height: 179px;
    position: absolute;
    left: 0;
}
    .social-icons {
        display: inline-block;
        margin-top: 37px;
        margin-bottom: 0;

    }
        .social-icons ul li {
            display: inline-block;
            padding: 8px;
            margin: 8px;
            border: 2px solid #f5f5f5;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .social-icons i {
            font-size: 32px;
            color: #f5f5f5;
        }
        .social-icons ul li:hover {
            transform: rotate(360deg);
            transition: 0.5s ease;
        }
    .envelope {
        display: none;
    }

.footer-content {
    padding-top: 103px;
}
    .footer-content h3 {
        text-transform: uppercase;
        margin: 20px 0;
    }
    .footer-content ul {
        margin-bottom: 17px;
    }
        .footer-content ul li {
            font-size: 14px;
        }
    .footer-column a {
        color: #f5f5f5;
    }
        .footer-content a:hover {
            transition: 0.8s ease;
            color: #1DDFE2;
        }
        .footer-content a:active {
            transition: 0.3s ease;
            color: #1DDFE2;
        }
    .copyright {
        display: block;
        padding-bottom: 16px;
        margin-top: 20px;
        font-size: 14px; 
    }
        .copyright a, .copyright a:hover, .copyright a:active {
            text-decoration: none;
            color: #f5f5f5; 
        }
            .copyright a:before {
                content: " 2024 ";
            }
        .copyright p {
            display: inline-block;
        }


/* back to top */

.go-up {
    width: 40px;
    height: auto;
    position: fixed;
    bottom: 42px;
    right: 28px;
    opacity: 0;
    transition: 1s ease;
    visibility: hidden;
    z-index: 998;
}
    .go-up.show {
        opacity: 1;
        visibility: visible;
    }
    .goUp-img-1 {
        fill:#1ddfe2;
    }
        .goUp-img-1:hover {
            fill: #E84E8B;
            transition: 1s ease;
        }
    .goUp-img-2 {
        fill:#f0f0f0;
        stroke:#f0f0f0;
        stroke-linecap:round;
        stroke-linejoin:round;
        stroke-width:2px;
    }

/* cookies */

#cookie-warn {
    text-align: center;
    position: fixed;
    bottom: 16px;
    background: #1DDFE2;
    padding: 16px;
    width: 100%;
    display: none;
    z-index: 9999;
}
    #cookie-warn p {
        font-size: 14px;
        color: #0F1723;
        font-weight: 400;
    }
    #cookie-warn a {
        display: inline-block;
        color: #7812DB;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 700;
        width: auto;
        margin: 10px 14px 0px 14px;
        text-decoration: none;
    }

/* footer subpages */

.footerSub h2 {
    text-align: center;
    margin-top: 60px;
}
.footerSub table {
    width: 100%;
    margin-top: 20px;
}
    .footerSub table tr td {
        font-weight: 300;
        text-align: left;
        padding: 0px;
    }
    .footerSub table tr p {
        text-align: left;
        margin: 16px 0px 0px 0px;
    }
        .footerSub table tr p:first-of-type {
            margin: 0;
        }
        .footerSub table tr td:first-of-type {
            text-align: center;
        }
        .footerSub table tr td ul li {
            list-style-type: circle;
            list-style-position: outside;
            margin: 8px 0;
            margin-left: 30px;
        }
    .footerSub table tr:nth-child(even) {
        background-color: #dddddd;
    }
.footerSub h4 {
    margin: 20px 0px 0px 30px;
}
.footerSub p {
    margin: 16px 30px;
}
.footerSub ol li, .footerSub ul li {
    list-style-position: outside;
    margin: 8px 0;
    margin-left: 60px;
}
    .footerSub ul li {
        list-style-type: circle;
    }
.footerSub ol li a, .footerSub ul li a {
    text-decoration: underline;
}
.certyfikaty {
    text-align: center;
}
    .certyfikat-img {
        width: 100%;
        height: auto;
        max-width: 320px;
        margin: 8px;
        margin-top: 60px;
    }

/* gallery */

.gallery {
    margin: 0 auto;
    text-align: center;
}
    .gallery img {
        box-shadow: 0 0 8px rgba(15, 23, 35, 0.8);
    }
        .gallery img:hover {
            transition: 0.35s ease;
            transform: scale(1.03);
        }
.gallery-image {
    margin: 8px 0;
    max-width: 100%;
    object-fit: cover;
}

/* iframe */

    .iframe-container {
        width: 100vw;
        height: 100vh;
        position: fixed;
    }
        .iframe-bg {
            width: 100%;
            height: 100vh;
            margin: 0 auto;
            object-fit: cover;
            object-position: center;
        }
        .mail-img {
            width: 200px;
            height: auto;
            position: absolute;
            top: calc(50vh);
            left: calc(50vw - 100px);
        }
        .mail-sent-info {
            display: inline-block;
            max-width: 320px;
            height: auto;
            text-align: center;
            padding: 23px;
            font-size: 1em;
            color: white;
            text-shadow: 0px 0px 5px black;
            position: absolute;
            left: calc(50vw - 160px);
            top: 10vh;
        }

@media screen and (min-width: 568px) and (orientation: landscape) {

    .lead {
        height: calc(100vh - 80px);
        padding: 4px;
    }
        .lead p {
            font-size: 1em;
            font-weight: 400;
            margin: 8px 0;
            margin-left: 16px;
        }
    .swiper-slide .lead-parent {
        top: 80px;
    }
    .circles {
        right: 23px;
    } 
    .swiper-pagination {
        bottom: 4px;
        right: 4px;
        width: 136px !important;
        height: 42px !important;
    }
        .swiper-pagination-bullet {
            margin: 6px !important;
            width: 22px !important;
            height: 22px !important;
        }
    .image-standard, .image-special {
        max-width: 453px;
    }

    .footerSub table tr td {
        padding: 16px;
    }
        .footerSub table tr td:first-of-type {
            width: 30%;
        }
}

@supports (-ms-ime-align:auto) { 
    #logo {
        margin: 14px 0px 0px 23px;
        display: inline-block;
    }
        .static-logo {
            height: 48px;
            width: auto;
            display: none;
        }
        .scroll-logo {
            height: 48px;
            width: auto;
            display: inline-block;
        }
}

@media screen and (min-width: 640px) and (orientation: landscape) {

    .lead p {
        font-size: 1.5em;
    }
}

@media screen and (min-width: 280px) and (min-height: 653px) and (orientation: portrait) {
    
    #logo {
        margin: 14px 0px 0px 23px;
        display: inline-block;
    }
        .static-logo {
            height: 40px;
            width: auto;
        }
    .lead p {
        font-size: 1.5em;
        font-weight: 400;
        margin: 8px 0;
        margin-left: 0px;
    }
}

@media screen and (min-width: 653px) and (min-height: 280px) and (orientation: landscape) {

    .lead {
        height: calc(100vh - 80px);
        padding: 4px;
    }
        .lead p {
            font-size: 1em;
            font-weight: 400;
            margin: 8px 0;
            margin-left: 16px;
        }
}

@media screen and (min-width: 750px) and (orientation: portrait) {

    .lead {
        text-align: center;
    }
        .lead p {
            font-size: 2em;
            font-weight: 400;
            margin: 8px 0;
            margin-left: 0px;
        }
}

@media screen and (min-width: 750px) {

    .quote-img-1 {
        width: 204px;
        height: auto;
        margin-left: -24px;
        margin-top: 16px;
    }
    .about .paragraph-box, .technology .paragraph-box {
        margin-top: -160px;
    }
        .about .paragraph-box, .technology .paragraph-box {
            background-size: 292px auto;
        }
    
    .hww-box {
        margin: 0 30px;
        margin-top: 40px;
    }
        .hww-box img {
            height: 192px;
        }

    .image-standard, .image-special {
        max-width: 600px;
    }

    .how-to-flex {
        display: flex;
    }
        .how-to-img {
            display: inline-block;
            margin: 0 0 0 0;
            align-self: center;
            margin-right: 40px;
        }
        .how-to-content {
            max-width: 960px;
            margin-right: auto;
        }

    .footerSub table tr td {
        padding: 16px;
    }
        .footerSub table tr td:first-of-type {
            width: 30%;
        }

    form input, form textarea {
        width: 80%;
    }
    .addFileBox {
        width: 80%;
    }
    .checkboxBox {
        width: 80%;
    }
    .footer-flex {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
        .footer-column {
            width: 25%;
        }
            .footer-column h3, .footer-column ul li {
                text-align: left;
                position: relative;
                left: 40%;
            }
            .footer-column:nth-child(4) {
                align-self: center;
            }
    #contact-flex {
        display: flex;
        justify-content: center;
    }
        .contactFlex-child {
            width: 33%;
        }
    .contactForm-flex {
        display: flex;
        margin-top: 16px;
    }
        .flex-child{
            width: 50%;
        }
    .certyfikat-img {
        margin: 8px 16px;
        margin-top: 60px;
    }
    .gallery-image {
        max-width: 324px;
        margin: 8px;
    }
    .mail-img {
        width: 400px;
        left: calc(50vw - 200px);
    }
    .mail-sent-info {
        max-width: 600px;
        height: auto;
        font-size: 2em;
        left: calc(50vw - 300px);
    }
}

@media screen and (min-width: 861px) and (orientation: portrait) {

    .lead p {
        font-size: 3em;
    }
}

@media screen and (min-width: 861px) {

    .footer-content {
        justify-content: center;
    }
    .footer-column {
        width: 25%;
    }
}

@media screen and (min-width: 1000px) {

    #nav-toggle {
        display: none;
    }

    #menu {
        transform: translateX(0px);
        background-color: rgba(245, 245, 245, 0);
        width: auto; 
        min-height: auto;
        display: inline-block;
        padding: 0;
        position: absolute;
        top: 12px;
        right: 23px;
    }
        #menu ul, #menu ul li {
            display: inline-block;
            padding: 0;
            margin-left: 18px; 
        }
            #menu ul li i {
                display: none;
            }
    #menu a {
        font-size: 16px;
        color: #0F1723;
    }
        #menu a.activeLink {
            color: #7812DB;
        }
            #menu a.activeLink:before {
                content: "-";
            }

    .swiper-button-prev, .swiper-button-next {
        display: inline-block !important;
    }

    .lead p {
        font-size: 2.5em;
        margin-left: 48px;
    }

    .scroll {
        -webkit-animation: scrollMove 1s infinite;
        -webkit-animation-timing-function: ease;
        animation: scrollMove 1s infinite;
        animation-timing-function: ease;
    }
        @-webkit-keyframes scrollMove {
            0% {-webkit-transform: translateY(0px);}
            100% {-webkit-transform: translateY(10px);}
        }
        @-keyframes scrollMove {
            0% {transform: translateY(0px);}
            100% {transform: translateY(10px);}
        }

    .paragraph-box {
        margin-top: 0;
    }
    .paragraph-flex {
        display: flex;
    }
        .paragraph-flex.right img {
            order: -1;
            align-self: center;
            height: 255px;
            width: 382.3px;
        }
            .paragraph-flex.right .paragraph-box {
                max-width: 929.7px;
            }
        .paragraph-flex.left img {
            align-self: center;
            margin-top: -160px;
            height: 226.5px;
            width: 453px;
        }
            .paragraph-flex.left .paragraph-box {
                max-width: 795px;
            }
    .about .quote-img-1 {
        margin-left: 320px;
    }
        .quote-img-1.sub {
            margin-left: -24px;
        }

    .image-standard, .image-special {
        max-width: 324px;
    }
    .products-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto;
    }
    .products-column {
        flex: 33.33%;
        max-width: 33.33%;
        align-self: center;
    }
    .image-special {
        max-width: 324px;
        height: 460px;
    }
    .certyfikat-img {
        max-width: 400px;
    }
    .mail-sent-info {
        max-width: 800px;
        height: auto;
        font-size: 2.5em;
        left: calc(50vw - 400px);
    }
}

@media screen and (min-width: 1100px) {

    .footer-column {
        width: 26%;
    }
}

@media screen and (min-width: 1200px) {

    #logo {
        margin: 10px 0px 0px 32px;
    }
        .static-logo {
            height: 56px;
            width: auto;
        }
        .scroll-logo {
            height: 56px;
            width: auto;
            display: inline-block;
            opacity: 0;
            visibility: 0;
            margin-left: -247px;
        }

    #menu ul, #menu ul li {
        display: inline-block;
        padding: 0;
        margin-left: 32px; 
    }

    .lead.slide-1 p:first-of-type {
        font-size: 53px;
        letter-spacing: 8px;
    }
    .lead.slide-1 p:nth-of-type(2) {
        font-size: 42px;
        letter-spacing: 6px;
    }
    .lead.slide-1 p:nth-of-type(3) {
        font-size: 53px;
        letter-spacing: 8px;
    }
    .lead.slide-1 p:nth-of-type(4) {
        font-size: 32px;
        letter-spacing: 6px;
    }

    .lead.slide-2 p:first-of-type {
        font-size: 53px;
        letter-spacing: 8px;
    }
    .lead.slide-2 p:nth-of-type(2) {
        font-size: 42px;
        letter-spacing: 6px;
    }
    .lead.slide-2 p:nth-of-type(3) {
        font-size: 53px;
        letter-spacing: 8px;
    }
    .lead.slide-2 p:nth-of-type(4) {
        font-size: 32px;
        letter-spacing: 6px;
    }

    .lead.slide-3 p:first-of-type {
        font-size: 53px;
        letter-spacing: 8px;
    }
    .lead.slide-3 p:nth-of-type(2) {
        font-size: 32px;
        letter-spacing: 6px;
    }
    .lead.slide-3 p:nth-of-type(3) {
        font-size: 53px;
        letter-spacing: 8px;
    }
    .lead.slide-3 p:nth-of-type(4) {
        font-size: 32px;
        letter-spacing: 6px;
    }

    .lead.slide-4 p:first-of-type {
        font-size: 53px;
        letter-spacing: 8px;
    }
    .lead.slide-4 p:nth-of-type(2) {
        font-size: 32px;
        letter-spacing: 6px;
    }
    .lead.slide-4 p:nth-of-type(3) {
        font-size: 53px;
        letter-spacing: 8px;
    }
    .lead.slide-4 p:nth-of-type(4) {
        font-size: 32px;
        letter-spacing: 6px;
    }

    .about .paragraph-box {
        background: none;
    }
        .about .paragraph-box p {
            position: relative;
            z-index: 2;
        }
    .under-text {
        display: inline-block;
        position: relative;
    }
        .quote-img-2 {
            width: 392px;
            height: auto;
            position: absolute;
            top: -60px;
            left: 343px;
            z-index: 1;
        }
            .quote-img-2.sub {
                left: 650px; 
            }
    .box-img {
        display: block;
        width: 426px;
        height: auto;
        margin: 0 auto;
        margin-top: -40px;
        position: relative;
        left: 18%;
        z-index: 901;
    }
        .box-img.sub {
            left: 0;
            margin-top: 0;
        }
    .envelope {
        display: inline-block;
        width: 80px;
        height: 80px;
        position: fixed;
        bottom: 99px;
        right: 8px;
        transition: 1s ease;
        opacity: 0;
        visibility: 0;
    }
        .envelope.show {
            opacity: 1;
            visibility: visible;
        }
        #footer .envelope:hover {
            cursor: pointer;
            transform: rotate(360deg);
            transition: 0.5s ease;
        }
            .contact-form.hide {
                display: inline-block;
                position: fixed;
                z-index: 1003;
                top: 0;
                left: calc(50% - 500px);
                color: #0f1723;
                transform: translateX(200vw);
                transition: 0.8s ease;
            }
            .form-close {
                cursor: pointer;
            }
                .form-close:hover {
                    color: #7812DB;
                }
            .contact-form.hide.toggle {
                transform: translateX(0);
            }
    .certyfikat-img {
        max-width: 500px;
    }
}

@supports (-ms-ime-align:auto) { 
    #logo {
        margin: 10px 0px 0px 32px;
    }
        .scroll-logo {
            height: 56px;
            width: auto;
            opacity: 1;
            visibility: 1;
            margin-left: 0;
        }
}

@media screen and (min-width: 1400px) {

    .paragraph-flex.right img {
        margin-left: -112px;
    }
    .paragraph-flex.left img {
        margin-right: -48px;
    }
        .about .quote-img-1 {
            margin-left: 208px;
        }
            .about .quote-img-1.sub {
                margin-left: -24px;
            }
        .quote-img-2 {
            left: 455px;
        }
    .goUp-img-1:hover {
        fill: #7812DB;
    }
}

@media screen and (min-width: 1800px) {

    #logo {
        margin: 10px 0px 0px 42px;
    }
    #menu ul, #menu ul li {
        margin-left: 42px; 
    }
    
    #header.open .header-container{
        background-color: rgba(245, 245, 245, 0);
        border-bottom: none;
        width: 100%;
        height: auto;
        z-index: 999;
        margin: 0 auto;
        top: 0;
    }
    #header.open #logo .static-logo {
        display: inline-block;
        -moz-transform: rotate(-90deg);
        -webkit-transfrom: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -moz-transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
        -ms-transition: 0.5s ease;
        transition: 0.5s ease;
        margin-left: -30px;
        margin-top: 176px;
        opacity: 0;
        -moz-transition: 1s ease;
        -webkit-transition: 1s ease;
        -ms-transition: 1s ease;
        transition: 1s ease;
        visibility: 0;
    }
        #header.close #logo .static-logo {
            display: inline-block;
            -moz-transform: rotate(0deg);
            -webkit-transfrom: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -moz-transition: 0.5s ease;
            -webkit-transition: 0.5s ease;
            -ms-transition: 0.5s ease;
            transition: 0.5s ease;
            margin-left: 0;
            margin-top: 0;
            opacity: 1;
            -moz-transition: 1s ease;
            -webkit-transition: 1s ease;
            -ms-transition: 1s ease;
            transition: 1s ease;
            visibility: 1;
        }
    #header.open #logo .scroll-logo {
        display: inline-block;
        -moz-transform: rotate(-90deg);
        -webkit-transfrom: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -moz-transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
        -ms-transition: 0.5s ease;
        transition: 0.5s ease;
        margin-left: -247px;
        margin-top: 176px;
        opacity: 1;
        -moz-transition: 1s ease;
        -webkit-transition: 1s ease;
        -ms-transition: 1s ease;
        transition: 1s ease;
        visibility: 1;
    }
        #header.close #logo .scroll-logo {
            display: inline-block;
            -moz-transform: rotate(0deg);
            -webkit-transfrom: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -moz-transition: 0.5s ease;
            -webkit-transition: 0.5s ease;
            -ms-transition: 0.5s ease;
            transition: 0.5s ease;
            margin-left: -247px;
            margin-top: 0;
            opacity: 0;
            -moz-transition: 1s ease;
            -webkit-transition: 1s ease;
            -ms-transition: 1s ease;
            transition: 1s ease;
            visibility: 0;
        }
    #header.open #menu {
        width: 184px;
        -moz-transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
        -moz-transition: 1s ease;
        -webkit-transition: 1s ease;
        -ms-transition: 1s ease;
        transition: 1s ease;
    }
    #header.open #menu a {
        text-align: left;
    }
    #header.open #menu ul, #header.open #menu ul li {
        display: block;
        text-align: left;
        margin-left: 0;
    }
        #header.open #menu ul li:last-child, #header.open #menu ul li:nth-child(8) {
            display: none;
        }
        #header.open #menu a {
            font-size: 16px;
            padding: 8px; 
        }
            #header.open #menu a.activeLink {
                -moz-transform: translateX(-23px);
                -webkit-transform: translateX(-23px);
                -ms-transform: translateX(-23px);
                transform: translateX(-23px);
                -moz-transition: 0.5s ease;
                -webkit-transition: 0.5s ease;
                -ms-transition: 0.5s ease;
                transition: 0.5s ease;
            }
    
    .products-gallery {
        position: relative;
        z-index: 1002;
    }

    #footerIcons {
        opacity: 0;
        visibility: hidden;
    }
        #footerIcons.icons-shown {
            opacity: 1;
            -moz-transition: 0.8s ease;
            -webkit-transition: 0.8s ease;
            -ms-transition: 0.8s ease;
            transition: 0.8s ease;
            visibility: visible;
            position: fixed;
            bottom: 0;
            max-width: 100%;
            width: 100%;
            -moz-transform: translateY(0);
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
            background-color: rgba(245, 245, 245, 0);
            z-index: 900;
        }
            #footer .social-icons {
                display: inline-block;
                width: 50px;
                position: absolute;
                left: 100px;
                bottom: 40px;
            }
                .social-icons ul li {
                    border: 2px solid #7812DB;
                }
                .social-icons i {
                    color: #7812DB;
                }
            #footer .envelope {
                right: 100px;
            }          
    .footer-content {
        padding-top: 0;
        position: relative;
        z-index: 999;
    }
    .go-up {
        right: 118px;
        bottom: 20px;
    }

}

@supports (-ms-ime-align:auto) { 

    #header.open #logo .static-logo {
        display: none;
    }
        #header.close #logo .static-logo {
            display: none;
        }
    #header.open #logo .scroll-logo {
        display: inline-block;
        -moz-transform: rotate(-90deg);
        -webkit-transfrom: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -moz-transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
        -ms-transition: 0.5s ease;
        transition: 0.5s ease;
        margin-left: -32px;
        margin-top: 176px;
        opacity: 1;
        -moz-transition: 1s ease;
        -webkit-transition: 1s ease;
        -ms-transition: 1s ease;
        transition: 1s ease;
        visibility: 1;
    }
        #header.close #logo .scroll-logo {
            display: inline-block;
            -moz-transform: rotate(0deg);
            -webkit-transfrom: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            -moz-transition: 0.5s ease;
            -webkit-transition: 0.5s ease;
            -ms-transition: 0.5s ease;
            transition: 0.5s ease;
            margin-left: 0;
            margin-top: 0;
            opacity: 1;
            -moz-transition: 1s ease;
            -webkit-transition: 1s ease;
            -ms-transition: 1s ease;
            transition: 1s ease;
            visibility: 1;
        }
}