@media all and (max-width: 1920px) {
    .desktop_box .menu-main > li { padding: 15px 5%; padding-bottom: 0; }
}

@media all and (max-width: 1680px) {
    
    .main_box { width: 75%; }
}

@media all and (max-width: 1280px) {
    .main_box { width: 80%; }
    .desktop_box .menu-main > li { padding: 16px 5%; padding-bottom: 0; }
    .header_mode_2 .text_box { padding-top: 85px; }
    
    .text_box p.list { padding-left: 10%; }

    .hexagon_box { margin-top: -178px; }
    .hexagon_box .hexagon_image { width: 700px; height: 350px; }
    .hexagon_box .hexagon_color { width: 704px; height: 356px; }

    .image-left .hexagon_image { left: -247px; }
    .image-right .hexagon_image { right: -247px; }
    .image-left .hexagon_color { left: -249px; }
    .image-right .hexagon_color { right: -249px; }
    .text_box p.image-left { padding-left: 330px; }
    .text_box p.image-right { padding-right: 330px; }
    #contact .image-right .hexagon_image { right: -144px; }
    #contact .image-right .hexagon_color { right: -146px; }
    #contact .text_box p.image-left { padding-left: 425px; }
    #contact .text_box p.image-right { padding-right: 425px; }
    #contact .hexagon_box { top: 228px; margin-top: -228px; }

}

@media all and (max-width: 960px) {
    * { font-size: 12px; }
    .desktop_box .menu-main > li { padding: 16px 3%; padding-bottom: 0; }
    
    .main_box { width: 81%; }
    .header_mode_2 .text_box { padding-top: 100px; }
    .text_box p.list { padding-left: 7%; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
    
    .hexagon_box { margin-top: -128px; }
    .hexagon_box .hexagon_image { width: 500px; height: 250px; }
    .hexagon_box .hexagon_color { width: 504px; height: 256px; }

    .image-left .hexagon_image { left: -175px; }
    .image-right .hexagon_image { right: -175px; }
    .image-left .hexagon_color { left: -177px; }
    .image-right .hexagon_color { right: -177px; }
    .text_box p.image-left { padding-left: 240px; }
    .text_box p.image-right { padding-right: 240px; }
    #contact .image-right .hexagon_image { right: -102px; }
    #contact .image-right .hexagon_color { right: -104px; }
    #contact .text_box p.image-left { padding-left: 315px; }
    #contact .text_box p.image-right { padding-right: 315px; }
    #contact .hexagon_box { top: 228px; margin-top: -228px; }
    
    .text_box .gallery button { margin: 0 5%; margin-bottom: 50px; }
    
    .text_box table td.icon { width: 36%; padding-right: 30px; }
    .text_box table .icon figure { height: 110px; }
}


@media all and (max-width: 700px) {
    * { font-size: 10px; }
    section { padding: 50px 0; }
    section:last-of-type { margin-bottom: 50px; }
    section:first-of-type { margin-bottom: 50px; }
    
    .desktop_box .menu-main, #start .logo { border-width: 2px; }
    .desktop_box .menu-main > li { padding: 17px 2%; padding-bottom: 0; }
    
    .text_box { padding-top: 30px; padding-bottom: 20px; }
    .header_mode_2 .text_box { padding-top: 120px; }
    .text_box p.info { padding-top: 20px; }
    
    .hexagon_box { display: none; }
    .text_box { border-width: 2px; }
    .text_box p.image-left { padding-left: 5%; }
    .text_box p.image-right { padding-right: 5%; }
    #contact .text_box p.image-left { padding-left: 5%; }
    #contact .text_box p.image-right { padding-right: 5%; }
    
    .button_box .button_border button { width: 54px; height: 54px; }
    .po_prawej .button_border { top: 140px; right: -33px; }
    .na_dole .button_border { bottom: 17px; right: -33px; }
    .button_box .button_border { padding: 5px; border-width: 2px; }
    .download_box .button_border { border-width: 2px; height: 70px; }
    .download_box .button_border button { min-width: 60px; }
    .download_box .hatch_box .hatch { background-size: 100px; }
    .download_box { bottom: 57px; }
    
    h2 { top: -38px; }
    .header_mode_3 h2 { top: -73px; }
    .header_mode_1 h2 button, .header_mode_2 h2 button { width: 54px; height: 54px; border-width: 2px; }
    .header_mode_1 h2 button span, .header_mode_2 h2 button span { top: -4px; left: -4px; }
    h2 button span { font-size: 1.0em; }
    h2 .pane { width: 34px; height: 34px; margin-top: -26px; margin-bottom: -5px; border-width: 2px; }
    h2 img { height: 80px; }
    .header_mode_3 h2 img { height: 90px; }
    
    .text_box .gallery { padding: 0 7%; margin-top: -50px; margin-bottom: 120px; }
    .text_box .gallery button { width: 66px; }
    .text_box .gallery .big_pane { width: 66px; height: 66px; }
    .text_box .gallery .small_frame { width: 54px; height: 54px; top: 26px; left: 6px; }
    .text_box .gallery .big_frame, .text_box .gallery .small_frame { border-width: 2px; }
    .text_box .gallery span { top: -23px; }
    .text_box .gallery button:hover span { top: -18px; }
    
    #start .logo { margin-top: 40vh; }
    #gallery .po_prawej .button_border { top: 201px; }
    
    .logo_vertical img {
        left: -48px;
        bottom: 30px;
        width: 70px;
    }
    
    .text_box table td.icon { width: 32%; padding-right: 20px; }
    .text_box table .icon figure { height: 90px; }
    
    #start_popup .popup { width: 400px; }
    #start_popup .popup p { padding: 0 20px; }
    #start_popup .popup p:first-of-type { padding-top: 20px; }
    #start_popup .popup p:last-of-type { padding-bottom: 20px; }
    
    #menu .download_box { top: 24px; }
    
    /* ====== NAV ====== */

    .desktop_box { display: none; }
    .menu-mobile { display: block; }

}


@media all and (max-width: 480px) {
    .text_box .gallery { padding: 0 10%; margin-top: -50px; margin-bottom: 120px; }
    .text_box .gallery button { margin: 0 10%; }

    .text_box table td.icon { width: 32%; padding-right: 7px; }
    .text_box table .icon figure { height: 70px; }
    
    .download_box .button_border { margin-right: 10px; }
    .download_box .button_border button { min-width: 36px; font-size: 0.9em; }
    #menu .download_box .button_border { margin-right: 0; margin-left: 10px; }
    
    #start_popup .popup { width: 300px; }
}

@media all and (max-height: 480px) {
    * { font-size: 10px; }
    #start_popup .popup { width: 300px; }
    #start_popup .popup p { padding: 0 20px; }
    #start_popup .popup p:first-of-type { padding-top: 20px; }
    #start_popup .popup p:last-of-type { padding-bottom: 20px; }
}