/* Style boxów - właściwości boxów itd. */

/* KLASY OGÓLNE */

    /* SZEROKOŚĆ*/
    .w5{width:5%;}
    .w10{width:10%;}
    .w15{width:15%;}
    .w20{width:20%;}
    .w25{width:25%;}
    .w30{width:30%;}
    .w35{width:35%;}
    .w40{width:40%;}
    .w45{width:45%;}
    .w50{width:50%;}
    .w55{width:55%;}
    .w60{width:60%;}
    .w65{width:65%;}
    .w70{width:70%;}
    .w75{width:75%;}
    .w80{width:80%;}
    .w85{width:85%;}
    .w90{width:90%;}
    .w95{width:95%;}
    .w100{width:100%;}

    /* WYSOKOŚĆ */
    .h5{height:5%;}
    .h10{height:10%;}
    .h15{height:15%;}
    .h20{height:20%;}
    .h25{height:25%;}
    .h30{height:30%;}
    .h35{height:35%;}
    .h40{height:40%;}
    .h45{height:45%;}
    .h50{height:50%;}
    .h55{height:55%;}
    .h60{height:60%;}
    .h65{height:65%;}
    .h70{height:70%;}
    .h75{height:75%;}
    .h80{height:80%;}
    .h85{height:85%;}
    .h90{height:90%;}
    .h95{height:95%;}
    .h100{height:100%;}

    .min-h100{min-height:100vh;}

    /* DIV w układzie WIERSZA: FLEX-X  */
    .flex-x{
        display: flex;
        flex-direction: row;
    }

    /* Wyrównanie poziome FLEX X */
    .flex-x.x-left{
        justify-content: flex-start;
        text-align: left;
    }
    .flex-x.x-center{
        justify-content: center;
        text-align: center;
    }
    .flex-x.x-right{
        justify-content: flex-end;
        text-align: right;
    }


    /* Wyrównanie pionowe FLEX X */
    .flex-x.y-top{
        align-items: flex-start;
    }
    .flex-x.y-center{
        align-items: center;
    }
    .flex-x.y-bottom{
        align-items: flex-end;
    }


    /* DIV w układzie KOLUMNY: FLEX-Y */
    .flex-y{
        display: flex;
        flex-direction: column;
    }

    /* Wyrównanie poziome FLEX Y */
    .flex-y.x-left{
        align-items: flex-start;
        text-align: left;
    }
    .flex-y.x-center{
        align-items: center;
        text-align: center;
    }
    .flex-y.x-right{
        align-items: flex-end;
        text-align: right;
    }

    /* Wyrównanie pionowe FLEX Y */
    .flex-y.y-top{
        justify-content: flex-start;
    }
    .flex-y.y-center{
        justify-content: center;
    }
    .flex-y.y-bottom{
        justify-content: flex-end;
    }

    /* Odwrócenie kierunku elementów - dodajemy do głównego DIVa */
    .flex-x.reverse{
        flex-direction:row-reverse;
    }
    .flex-y.reverse{
        flex-direction:column-reverse;
    }

    /* UKRYWANIE ELEMENTOW - GLOBALNIE */
    .hide{
        display: none;
    }
    .show{
        display: flex;
    }

    /* OPCJA UCINANIA TEKSTU GDY SIĘ NIE MIEŚCI */
    .txtcut {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/*KONIEC KLASY OGÓLNE */


/* KLASY DESKTOP */
    @media (min-width: 1300px) {

        /* SZEROKOŚĆ*/
        .d-w5{width:5%;}
        .d-w10{width:10%;}
        .d-w15{width:15%;}
        .d-w20{width:20%;}
        .d-w25{width:25%;}
        .d-w30{width:30%;}
        .d-w35{width:35%;}
        .d-w40{width:40%;}
        .d-w45{width:45%;}
        .d-w50{width:50%;}
        .d-w55{width:55%;}
        .d-w60{width:60%;}
        .d-w65{width:65%;}
        .d-w70{width:70%;}
        .d-w75{width:75%;}
        .d-w80{width:80%;}
        .d-w85{width:85%;}
        .d-w90{width:90%;}
        .d-w95{width:95%;}
        .d-w100{width:100%;}

        /* WYSOKOŚĆ */
        .d-h5{height:5%;}
        .d-h10{height:10%;}
        .d-h15{height:15%;}
        .d-h20{height:20%;}
        .d-h25{height:25%;}
        .d-h30{height:30%;}
        .d-h35{height:35%;}
        .d-h40{height:40%;}
        .d-h45{height:45%;}
        .d-h50{height:50%;}
        .d-h55{height:55%;}
        .d-h60{height:60%;}
        .d-h65{height:65%;}
        .d-h70{height:70%;}
        .d-h75{height:75%;}
        .d-h80{height:80%;}
        .d-h85{height:85%;}
        .d-h90{height:90%;}
        .d-h95{height:95%;}
        .d-h100{height:100%;}


        /* DIV w układzie WIERSZA: FLEX-X  */
        .d-flex-x{
            display: flex;
            flex-direction: row;
        }

        /* Wyrównanie poziome FLEX X */
        /* Flex ogólny - wyrównanie poziom desktop */
        .flex-x.d-x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .flex-x.d-x-center{
            justify-content: center;
            text-align: center;
        }
        .flex-x.d-x-right{
            justify-content: flex-end;
            text-align: right;
        }

        /* Flex desktop - wyrównanie poziom ogólne */
        .d-flex-x.x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .d-flex-x.x-center{
            justify-content: center;
            text-align: center;
        }
        .d-flex-x.x-right{
            justify-content: flex-end;
            text-align: right;
        }

        /* Flex desktop - wyrównanie poziom desktop */
        .d-flex-x.d-x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .d-flex-x.d-x-center{
            justify-content: center;
            text-align: center;
        }
        .d-flex-x.d-x-right{
            justify-content: flex-end;
            text-align: right;
        }


        /* Wyrównanie pionowe FLEX X */
        /* Flex ogólny - wyrównanie pion desktop */
        .flex-x.d-y-top{
            align-items: flex-start;
        }
        .flex-x.d-y-center{
            align-items: center;
        }
        .flex-x.d-y-bottom{
            align-items: flex-end;
        }

        /* Flex desktop - wyrównanie pion ogólne */
        .d-flex-x.y-top{
            align-items: flex-start;
        }
        .d-flex-x.y-center{
            align-items: center;
        }
        .d-flex-x.y-bottom{
            align-items: flex-end;
        }

        /* Flex desktop - wyrównanie pion desktop */
        .d-flex-x.d-y-top{
            align-items: flex-start;
        }
        .d-flex-x.d-y-center{
            align-items: center;
        }
        .d-flex-x.d-y-bottom{
            align-items: flex-end;
        }
        

        /* DIV w układzie KOLUMNY: FLEX-Y */
        .d-flex-y{
            display: flex;
            flex-direction: column;
        }

        /* Wyrównanie poziome FLEX Y */
        /* Flex ogólny - wyrównanie poziom desktop */
        .flex-y.d-x-left{
            align-items: flex-start;
            text-align: left;
        }
        .flex-y.d-x-center{
            align-items: center;
            text-align: center;
        }
        .flex-y.d-x-right{
            align-items: flex-end;
            text-align: right;
        }

        /* Flex desktop - wyrównanie poziom ogólne */
        .d-flex-y.x-left{
            align-items: flex-start;
            text-align: left;
        }
        .d-flex-y.x-center{
            align-items: center;
            text-align: center;
        }
        .d-flex-y.x-right{
            align-items: flex-end;
            text-align: right;
        }

        /* Flex desktop - wyrównanie poziom desktop */
        .d-flex-y.d-x-left{
            align-items: flex-start;
            text-align: left;
        }
        .d-flex-y.d-x-center{
            align-items: center;
            text-align: center;
        }
        .d-flex-y.d-x-right{
            align-items: flex-end;
            text-align: right;
        }


        /* Wyrównanie pionowe FLEX Y */
        /* Flex ogólny - wyrównanie pion desktop */
        .flex-y.d-y-top{
            justify-content: flex-start;
        }
        .flex-y.d-y-center{
            justify-content: center;
        }
        .flex-y.d-y-bottom{
            justify-content: flex-end;
        }

        /* Flex desktop - wyrównanie pion ogólne */
        .d-flex-y.y-top{
            justify-content: flex-start;
        }
        .d-flex-y.y-center{
            justify-content: center;
        }
        .d-flex-y.y-bottom{
            justify-content: flex-end;
        }

        /* Flex desktop - wyrównanie pion desktop */
        .d-flex-y.d-y-top{
            justify-content: flex-start;
        }
        .d-flex-y.d-y-center{
            justify-content: center;
        }
        .d-flex-y.d-y-bottom{
            justify-content: flex-end;
        }


        /* Odwrócenie kierunku elementów - dodajemy do głównego DIVa */
        .flex-x.d-reverse{
            flex-direction:row-reverse;
        }
        .flex-y.d-reverse{
            flex-direction:column-reverse;
        }
        .d-flex-x.d-reverse{
            flex-direction:row-reverse;
        }
        .d-flex-y.d-reverse{
            flex-direction:column-reverse;
        }

        /* UKRYWANIE ELEMENTOW */
        .d-hide{
            display: none;
        }
        .d-show{
            display: flex;
        }

        /* OPCJA UCINANIA TEKSTU GDY SIĘ NIE MIEŚCI */
        .d-txtcut {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    }
/* KONIEC KLASY DESKTOP */


/* KLASY TABLET */
    @media (min-width: 768px) and (max-width: 1299px) {
        /* SZEROKOŚĆ*/
        .t-w5{width:5%;}
        .t-w10{width:10%;}
        .t-w15{width:15%;}
        .t-w20{width:20%;}
        .t-w25{width:25%;}
        .t-w30{width:30%;}
        .t-w35{width:35%;}
        .t-w40{width:40%;}
        .t-w45{width:45%;}
        .t-w50{width:50%;}
        .t-w55{width:55%;}
        .t-w60{width:60%;}
        .t-w65{width:65%;}
        .t-w70{width:70%;}
        .t-w75{width:75%;}
        .t-w80{width:80%;}
        .t-w85{width:85%;}
        .t-w90{width:90%;}
        .t-w95{width:95%;}
        .t-w100{width:100%;}

        /* WYSOKOŚĆ */
        .t-h5{height:5%;}
        .t-h10{height:10%;}
        .t-h15{height:15%;}
        .t-h20{height:20%;}
        .t-h25{height:25%;}
        .t-h30{height:30%;}
        .t-h35{height:35%;}
        .t-h40{height:40%;}
        .t-h45{height:45%;}
        .t-h50{height:50%;}
        .t-h55{height:55%;}
        .t-h60{height:60%;}
        .t-h65{height:65%;}
        .t-h70{height:70%;}
        .t-h75{height:75%;}
        .t-h80{height:80%;}
        .t-h85{height:85%;}
        .t-h90{height:90%;}
        .t-h95{height:95%;}
        .t-h100{height:100%;}


        /* DIV w układzie WIERSZA: FLEX-X  */
        .t-flex-x{
            display: flex;
            flex-direction: row;
        }

        /* Wyrównanie poziome FLEX X */
        /* Flex ogólny - wyrównanie poziom tablet */
        .flex-x.t-x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .flex-x.t-x-center{
            justify-content: center;
            text-align: center;
        }
        .flex-x.t-x-right{
            justify-content: flex-end;
            text-align: right;
        }

        /* Flex tablet - wyrównanie poziom ogólne */
        .t-flex-x.x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .t-flex-x.x-center{
            justify-content: center;
            text-align: center;
        }
        .t-flex-x.x-right{
            justify-content: flex-end;
            text-align: right;
        }

        /* Flex tablet - wyrównanie poziom tablet */
        .t-flex-x.t-x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .t-flex-x.t-x-center{
            justify-content: center;
            text-align: center;
        }
        .t-flex-x.t-x-right{
            justify-content: flex-end;
            text-align: right;
        }


        /* Wyrównanie pionowe FLEX X */
        /* Flex ogólny - wyrównanie pion tablet */
        .flex-x.t-y-top{
            align-items: flex-start;
        }
        .flex-x.t-y-center{
            align-items: center;
        }
        .flex-x.t-y-bottom{
            align-items: flex-end;
        }

        /* Flex tablet - wyrównanie pion ogólne */
        .t-flex-x.y-top{
            align-items: flex-start;
        }
        .t-flex-x.y-center{
            align-items: center;
        }
        .t-flex-x.y-bottom{
            align-items: flex-end;
        }

        /* Flex tablet - wyrównanie pion tablet */
        .t-flex-x.t-y-top{
            align-items: flex-start;
        }
        .t-flex-x.t-y-center{
            align-items: center;
        }
        .t-flex-x.t-y-bottom{
            align-items: flex-end;
        }
        

        /* DIV w układzie KOLUMNY: FLEX-Y */
        .t-flex-y{
            display: flex;
            flex-direction: column;
        }

        /* Wyrównanie poziome FLEX Y */
        /* Flex ogólny - wyrównanie poziom tablet */
        .flex-y.t-x-left{
            align-items: flex-start;
            text-align: left;
        }
        .flex-y.t-x-center{
            align-items: center;
            text-align: center;
        }
        .flex-y.t-x-right{
            align-items: flex-end;
            text-align: right;
        }

        /* Flex tablet - wyrównanie poziom ogólne */
        .t-flex-y.x-left{
            align-items: flex-start;
            text-align: left;
        }
        .t-flex-y.x-center{
            align-items: center;
            text-align: center;
        }
        .t-flex-y.x-right{
            align-items: flex-end;
            text-align: right;
        }

        /* Flex tablet - wyrównanie poziom tablet */
        .t-flex-y.t-x-left{
            align-items: flex-start;
            text-align: left;
        }
        .t-flex-y.t-x-center{
            align-items: center;
            text-align: center;
        }
        .t-flex-y.t-x-right{
            align-items: flex-end;
            text-align: right;
        }


        /* Wyrównanie pionowe FLEX Y */
        /* Flex ogólny - wyrównanie pion tablet */
        .flex-y.t-y-top{
            justify-content: flex-start;
        }
        .flex-y.t-y-center{
            justify-content: center;
        }
        .flex-y.t-y-bottom{
            justify-content: flex-end;
        }

        /* Flex tablet - wyrównanie pion ogólne */
        .t-flex-y.y-top{
            justify-content: flex-start;
        }
        .t-flex-y.y-center{
            justify-content: center;
        }
        .t-flex-y.y-bottom{
            justify-content: flex-end;
        }

        /* Flex tablet - wyrównanie pion tablet */
        .t-flex-y.t-y-top{
            justify-content: flex-start;
        }
        .t-flex-y.t-y-center{
            justify-content: center;
        }
        .t-flex-y.t-y-bottom{
            justify-content: flex-end;
        }


        /* Odwrócenie kierunku elementów - dodajemy do głównego DIVa */
        .flex-x.t-reverse{
            flex-direction:row-reverse;
        }
        .flex-y.t-reverse{
            flex-direction:column-reverse;
        }
        .t-flex-x.t-reverse{
            flex-direction:row-reverse;
        }
        .t-flex-y.t-reverse{
            flex-direction:column-reverse;
        }

        /* UKRYWANIE ELEMENTOW */
        .t-hide{
            display: none;
        }
        .t-show{
            display: flex;
        }

        /* OPCJA UCINANIA TEKSTU GDY SIĘ NIE MIEŚCI */
        .t-txtcut {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    }
/* KONIEC KLASY TABLET */


/* KLASY MOBILE */
    @media (max-width: 767px) {
        /* SZEROKOŚĆ*/
        .m-w5{width:5%;}
        .m-w10{width:10%;}
        .m-w15{width:15%;}
        .m-w20{width:20%;}
        .m-w25{width:25%;}
        .m-w30{width:30%;}
        .m-w35{width:35%;}
        .m-w40{width:40%;}
        .m-w45{width:45%;}
        .m-w50{width:50%;}
        .m-w55{width:55%;}
        .m-w60{width:60%;}
        .m-w65{width:65%;}
        .m-w70{width:70%;}
        .m-w75{width:75%;}
        .m-w80{width:80%;}
        .m-w85{width:85%;}
        .m-w90{width:90%;}
        .m-w95{width:95%;}
        .m-w100{width:100%;}

        /* WYSOKOŚĆ */
        .m-h5{height:5%;}
        .m-h10{height:10%;}
        .m-h15{height:15%;}
        .m-h20{height:20%;}
        .m-h25{height:25%;}
        .m-h30{height:30%;}
        .m-h35{height:35%;}
        .m-h40{height:40%;}
        .m-h45{height:45%;}
        .m-h50{height:50%;}
        .m-h55{height:55%;}
        .m-h60{height:60%;}
        .m-h65{height:65%;}
        .m-h70{height:70%;}
        .m-h75{height:75%;}
        .m-h80{height:80%;}
        .m-h85{height:85%;}
        .m-h90{height:90%;}
        .m-h95{height:95%;}
        .m-h100{height:100%;}
        

        /* DIV w układzie WIERSZA: FLEX-X  */
        .m-flex-x{
            display: flex;
            flex-direction: row;
        }

        /* Wyrównanie poziome FLEX X */
        /* Flex ogólny - wyrównanie poziom mobile */
        .flex-x.m-x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .flex-x.m-x-center{
            justify-content: center;
            text-align: center;
        }
        .flex-x.m-x-right{
            justify-content: flex-end;
            text-align: right;
        }

        /* Flex mobile - wyrównanie poziom ogólne */
        .m-flex-x.x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .m-flex-x.x-center{
            justify-content: center;
            text-align: center;
        }
        .m-flex-x.x-right{
            justify-content: flex-end;
            text-align: right;
        }

        /* Flex mobile - wyrównanie poziom mobile */
        .m-flex-x.m-x-left{
            justify-content: flex-start;
            text-align: left;
        }
        .m-flex-x.m-x-center{
            justify-content: center;
            text-align: center;
        }
        .m-flex-x.m-x-right{
            justify-content: flex-end;
            text-align: right;
        }


        /* Wyrównanie pionowe FLEX X */
        /* Flex ogólny - wyrównanie pion mobile */
        .flex-x.m-y-top{
            align-items: flex-start;
        }
        .flex-x.m-y-center{
            align-items: center;
        }
        .flex-x.m-y-bottom{
            align-items: flex-end;
        }

        /* Flex mobile - wyrównanie pion ogólne */
        .m-flex-x.y-top{
            align-items: flex-start;
        }
        .m-flex-x.y-center{
            align-items: center;
        }
        .m-flex-x.y-bottom{
            align-items: flex-end;
        }

        /* Flex mobile - wyrównanie pion mobile */
        .m-flex-x.m-y-top{
            align-items: flex-start;
        }
        .m-flex-x.m-y-center{
            align-items: center;
        }
        .m-flex-x.m-y-bottom{
            align-items: flex-end;
        }
        

        /* DIV w układzie KOLUMNY: FLEX-Y */
        .m-flex-y{
            display: flex;
            flex-direction: column;
        }

        /* Wyrównanie poziome FLEX Y */
        /* Flex ogólny - wyrównanie poziom mobile */
        .flex-y.m-x-left{
            align-items: flex-start;
            text-align: left;
        }
        .flex-y.m-x-center{
            align-items: center;
            text-align: center;
        }
        .flex-y.m-x-right{
            align-items: flex-end;
            text-align: right;
        }

        /* Flex mobile - wyrównanie poziom ogólne */
        .m-flex-y.x-left{
            align-items: flex-start;
            text-align: left;
        }
        .m-flex-y.x-center{
            align-items: center;
            text-align: center;
        }
        .m-flex-y.x-right{
            align-items: flex-end;
            text-align: right;
        }

        /* Flex mobile - wyrównanie poziom mobile */
        .m-flex-y.m-x-left{
            align-items: flex-start;
            text-align: left;
        }
        .m-flex-y.m-x-center{
            align-items: center;
            text-align: center;
        }
        .m-flex-y.m-x-right{
            align-items: flex-end;
            text-align: right;
        }


        /* Wyrównanie pionowe FLEX Y */
        /* Flex ogólny - wyrównanie pion mobile */
        .flex-y.m-y-top{
            justify-content: flex-start;
        }
        .flex-y.m-y-center{
            justify-content: center;
        }
        .flex-y.m-y-bottom{
            justify-content: flex-end;
        }

        /* Flex mobile - wyrównanie pion ogólne */
        .m-flex-y.y-top{
            justify-content: flex-start;
        }
        .m-flex-y.y-center{
            justify-content: center;
        }
        .m-flex-y.y-bottom{
            justify-content: flex-end;
        }

        /* Flex mobile - wyrównanie pion mobile */
        .m-flex-y.m-y-top{
            justify-content: flex-start;
        }
        .m-flex-y.m-y-center{
            justify-content: center;
        }
        .m-flex-y.m-y-bottom{
            justify-content: flex-end;
        }


        /* Odwrócenie kierunku elementów - dodajemy do głównego DIVa */
        .flex-x.m-reverse{
            flex-direction:row-reverse;
        }
        .flex-y.m-reverse{
            flex-direction:column-reverse;
        }
        .m-flex-x.m-reverse{
            flex-direction:row-reverse;
        }
        .m-flex-y.m-reverse{
            flex-direction:column-reverse;
        }

        /* UKRYWANIE ELEMENTOW */
        .m-hide{
            display: none;
        }
        .m-show{
            display: flex;
        }

        /* OPCJA UCINANIA TEKSTU GDY SIĘ NIE MIEŚCI */
        .m-txtcut {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    }
/* KONIEC KLASY MOBILE */