﻿.ms-6 {
    margin-left: 8rem !important;
}

/* Heights */
.vh-10 {
    height: 10vh !important;
}

.vh-15 {
    height: 15vh !important;
}

.vh-35 {
    height: 35vh !important;
}

.vh-45 {
    height: 45vh !important;
}

.vh-90 {
    height: 85vh !important;
}

.vh-130 {
    height: 130vh;
}

.vh-160 {
    height: 160vh;
}

.h-10 {
    height: 10% !important;
}

.h-30 {
    height: 30% !important;
}

.h-35 {
    height: 35% !important;
}

.h-40 {
    height: 40% !important;
}


.h-45 {
    height: 45% !important;
}

/* Widths */
.w50px {
    width: 50px;
}

.w-20vw {
    width: 20vw;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-50 {
    width: 50% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-80 {
    width: 80% !important;
}


.mw-60 {
    max-width: 60vw;
}

.mw-65 {
    max-width: 65vw;
}

.mw-70 {
    max-width: 70vw;
}

.mw-80 {
    max-width: 80vw;
}

.mw-90 {
    max-width: 90vw;
}

.mw-100 {
    max-width: 100vw;
}

.mh-100 {
    max-height: 100vw;
}



.h-166 {
    height: 166px
}

.gap-x-12 {
    column-gap: 12px;
}

.pt-60 {
    padding-top: 60px;
}

.lg-h-320 {
    height: 320px;
}

.lg-gap-x-30 {
    column-gap: 30px;
}

.lg-pt-80 {
    padding-top: 80px;
}




/* Line-heights */
.lh-2 {
    line-height: 2rem !important;
}

.none a {
    text-decoration: none;
    color: inherit;
}

.lh-3 {
    line-height: 3rem !important;
}



@media screen and (max-width: 430px) {
    .oneline {
        display: block;
    }
}

@media screen and (max-width: 400px) {
    .fs-m-6 {
        font-size: 0.9rem;
    }
}


@media screen and (min-width: 768px) {
    .w-md-50 {
        width: 50% !important;
    }

    .md-container {
        padding-left: 10%;
        padding-right: 10%;
    }

    .md-tight-container {
        padding-left: 20%;
        padding-right: 20%;
    }

    .w-md-auto {
        width: auto !important;
    }

    .lg-h-320 {
        height: 320px;
    }

    .lg-gap-x-30 {
        column-gap: 30px;
    }

    .lg-pt-80 {
        padding-top: 80px;
    }

    .w-md-20 {
        width: 20% !important;
    }

    .w-md-25 {
        width: 25% !important;
    }

    .w-md-30 {
        width: 30% !important;
    }

    .w-md-40 {
        width: 40% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-60 {
        width: 60% !important;
    }

    .w-md-70 {
        width: 70% !important;
    }

    .w-md-80 {
        width: 80% !important;
    }

    .mt-md-6rem {
        margin-top: 6rem !important;
    }


    .w-325px {
        width: 325px !important;
    }





    .svg-md-container-paddings {
        padding: 2rem 8rem 2rem 1rem;
    }

    .md-grid2x2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 10px;
        width: 90%;
    }

    .sticky-container {
        position: -webkit-sticky;
        position: sticky;
        top: 3rem;
    }

    .grid-site {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 20px;
    }
}



@media screen and (min-width: 992px) {

    .w-lg-50 {
        width: 50%;
    }
}


@media screen and (max-width: 991px) {



    .sticky_parent {
        height: 700vh;
        /*  ustawiamy zaleznie od tego ile chcemy stron  (wartośc musi byc taka sama)*/
    }

    .sticky {
        overflow: hidden;
        position: sticky;
        top: 0;
        height: 100vh;
    }


    .scroll_section {
        position: absolute;
        top: 0;
        height: 100%;
        width: 700vw;
        /*  ustawiamy zaleznie od tego ile chcemy stron  (wartośc musi byc taka sama)*/
        will-change: transform;
        display: flex;
    }
}

@media (max-width: 991px) {
    .hor {
        display: none !important;
    }
}


@media (max-width: 991px) {
    .svg-mobile {
        display: block;
    }

    .svg-desktop {
        display: none;
    }
}

@media (min-width: 992px) {
    .svg-mobile {
        display: none;
    }

    .svg-desktop {
        display: block;
    }
}



.devicewidth {
    height: 200px;
}

@media screen and (min-width: 401px) and (max-width: 700px) {
    .devicewidth {
        height: 300px;
    }
}

@media screen and (min-width: 701px) and (max-width: 1023px) {
    .devicewidth {
        height: 400px;
    }
}

@media screen and (min-width: 1024px) {
    .devicewidth {
        height: 350px;
    }
}


.main-image {
    width: 62%;
    height: auto;
}

.nav-handler {
    padding-top: 32px;
}
