@charset "UTF-8";
/*
Theme Name: MG Perfekt
Theme URI: 
Author: Merlo Marketing Studio
Author URI: https://merlo.studio/
Description: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mgperfekt
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


* {margin: 0; padding: 0;}
html {overflow-y: scroll;}


/* Reset styles */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, /* sup, */ tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0;}
body {line-height: 1; color: #000;}
strong {font-weight:700}


/* General styles */
body {width:100%; height:100vh; margin:0; padding:0; background-color: #fff;}
body, p {color:#000; font-family:'Montserrat', arial, tahoma, verdana; font-weight: 300; font-size:16px; line-height:140%;}
p {margin: 10px 0;}
h1, h2, h3, h4, h5, h6 {font-family:'Montserrat', arial, tahoma, verdana;}
input, select, textarea, button {font-family:'Montserrat', arial, tahoma, verdana;}
img {border:0px;}
ul, ol {list-style-position: inside;}


*::before, *::after {box-sizing: border-box;}
:focus-visible, input:focus, select:focus, button:focus {outline: 0px dashed black; outline-offset: 2px; background-color: var(--blue)!important; color: #fff!important;}
a {text-decoration:none; color:var(--blue); font-size:16px; font-weight:700;}
a, a span, a strong, li, a img, button, path, svg, input, .pracaBox {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
a:hover {color:var(--dark);}
h1 {margin: 0px; padding: 0px;}
h2 {font-size: 46px; font-weight: 700; line-height: 110%; margin-bottom: 20px;}
h3 {font-size: 36px; font-weight: 700; line-height: 110%; margin-bottom: 10px;}
h4 {font-size: 30px; font-weight: 700; line-height: 110%; margin-bottom: 10px;}
h5 {font-size: 26px; font-weight: 700; line-height: 110%; margin-bottom: 10px;}
h6 {font-size: 22px; font-weight: 700; line-height: 130%; margin-bottom: 10px;}




/* General classes */
.skip-link {display: none;}
.center {margin: 0 auto; max-width: 1600px; width: 100%; display: block; box-sizing: border-box; padding-left: 60px; padding-right: 60px;}
.mw {max-width: 1600px; margin: 0 auto;}
.flex {display: flex;}
.flexCenter {justify-content: center;}
.column {flex-direction: column;}
.onlyMobile {display: none!important;}
.gap60 {gap: 60px;}
.grayBg {background-color: #F4F4F4!important;}
.mTop50 {margin-top: 50px!important;}
.mTop100 {margin-top: 100px!important;}
.mBottom30 {margin-bottom: 30px!important;}



/* Buttons */
.button {display: inline-block; padding: 13px 30px; border-radius: 8px;}
.button.lightblue {background-color: var(--lightblue); color: var(--white); border: 1px solid var(--lightblue);}
.button.lightblue:hover {background-color: var(--darkblue); color: var(--white); border: 1px solid var(--darkblue);}
.button.blue {background-color: var(--blue); color: var(--white); border: 1px solid var(--blue);}
.button.blue:hover {background-color: var(--darkblue); color: var(--white); border: 1px solid var(--darkblue);}
.borderWhite {border: 1px solid var(--white); color: var(--white); background: transparent;}
.borderWhite:hover {border: 1px solid var(--white); color: var(--lightblue); background-color: var(--white);}




/* Color variables */
.white              {color: var(--white);}
.lightblue          {color: var(--lightblue);}
.blue               {color: var(--blue);}
.darkblue           {color: var(--darkblue);}
.gray               {color: var(--gray);}
.lightgray          {color: var(--lightgray);}
.dark               {color: var(--dark);}


/* Colors */
:root {
    --white:        #ffffff;
    --lightblue:    #21B3B5;
    --blue:         #00475B;
    --darkblue:     #0A2435;
    --gray:         #5C5C5C;
    --lightgray:    #B3B3B3;
    --dark:         #151515;
}




/* Main styles */
header {display: block; width: 100%; background-color: var(--darkblue);}
header.subpageBg {background: #fff url(images/subpageBg.jpg) repeat-x top left; min-height: 85vh;}

    #top {display: flex; justify-content: space-between; align-items:center; width: 100%; padding-top: 20px; z-index: 90001; height: 80px;}
        #top nav {display: flex; align-items: flex-start; padding: 3px; background-color: var(--white); border-radius: 8px;}
        #top nav {-webkit-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.3); -moz-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.3); box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.3);}
            #top nav ul {display: flex; list-style: none; padding: 0px; margin: 0px; align-items: center;}
                #top nav ul li {background-color: #fff;}
                    #top nav ul li a {display: block; color: var(--gray); font-size: 18px; font-weight: 600; line-height: 34px; padding: 8px 18px; border-radius: 8px;}
                    #top nav ul li a {position: relative; overflow: hidden; background: transparent; isolation: isolate;}
                    #top nav ul li a::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(33, 179, 181, 1) 0%, rgba(10, 36, 53, 1) 100%); z-index: -1; opacity: 0; transition: opacity 0.5s ease;}
                    #top nav ul li a:hover::before {opacity: 1;}
                    #top nav ul li a:hover {color: var(--white);}
                    #top nav ul li.current_page_item a::before {opacity: 1;}
                    #top nav ul li.current_page_item a {color: var(--white);}


                #top nav #languagesSwitch {margin: 0 10px;}
                    #top nav #languagesSwitch li.current-lang a {opacity: 1;}
                    #top nav #languagesSwitch li a {opacity: 0.4; padding: 8px 6px;}
                    #top nav #languagesSwitch li a:hover {opacity: 1;}




    #headerText {display: block; position: absolute; top: 50%; transform: translateY(-46%); left: 60px; z-index: 9001;}
        #headerText h2 {display: block; text-align: left; color: #fff; font-size: 46px; line-height: 110%; font-weight: 700; width: 60%}
        #headerText p {display: block; text-align: left; color: #fff; font-size: 18px; line-height: 140%; font-weight: 300; margin: 10px 0 50px 0; width: 60%}
        .subpageBg .center #headerText {position: static; margin-top: 150px; transform: none;}
            .subpageBg #headerText h2 {color: var(--blue);}
            .subpageBg #headerText p {color: var(--dark);}



    .headerSocial {display: flex; position: absolute; /*top: 50%; transform: translateY(-46%);*/ top: 250px; right: 60px; z-index: 9001; flex-direction: column; gap: 3px;}
        .headerSocial > a {display: flex; width: 54px; height: 54px; justify-content: center; align-items: center; border: 1px solid var(--white); border-radius: 54px;}
        .headerSocial > a:hover {background-color: var(--white);}
        .headerSocial > a:hover svg path {fill: var(--blue);}
        .subpageBg .headerSocial > a {border: 1px solid var(--blue);}
        .subpageBg .headerSocial > a svg path {fill: var(--blue);}
        .subpageBg .headerSocial > a:hover svg path {fill: var(--blue);}



    #goDown {display: inline-block; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); z-index: 9002;}
        #goDown img {display: block;}



    .homepage-hero-module {border-right: none; border-left: none; position: relative;}
        .no-video .video-container video, .touch .video-container video {/*display: none;*/}
        .no-video .video-container .poster, .touch .video-container .poster {display: block !important;}
        .video-container {min-height: 85vh; position: relative; bottom: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; display: flex;}
        .video-container .poster img {width: 100%; bottom: 0; position: absolute;}
        .video-container .filter {z-index: 100; position: absolute; background: transparent url(images/headerFilter.png) no-repeat top left; width: 100%; height: 100%; background-size: cover; opacity: 0.8;}
        .video-container video {position: absolute; z-index: 0; /*bottom: 0;*/}
        .video-container video {background-position: center; -o-object-fit: cover; opacity: 1; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; -webkit-filter: blur(0); filter: blur(0); height: 100%; transition: -webkit-filter .35s ease-in-out; transition: filter .35s ease-in-out; transition: filter .35s ease-in-out,-webkit-filter .35s ease-in-out; width: 100%;}
        .video-container video.fillWidth {width: 100%; opacity: 0.3;}
        .video-container .headerBg {position: absolute; z-index: 0; background-position: center; -o-object-fit: cover; opacity: 1; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; -webkit-filter: blur(0); filter: blur(0); height: 100%; transition: -webkit-filter .35s ease-in-out; transition: filter .35s ease-in-out; transition: filter .35s ease-in-out,-webkit-filter .35s ease-in-out; width: 100%; width: 100%; opacity: 1;}

        .subpageBg .video-container {min-height: 85vh; position: relative; bottom: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; display: flex;}








#logotypes {width: 100%; max-width: 1600px; margin: 20px auto 50px auto;}
    .logos-wrapper {overflow: hidden; position: relative;}
        .logos-track {display: flex; flex-wrap: nowrap; width: max-content; animation: scrollLeft 40s linear infinite;}
        .logos-track > a {display: block; flex: 0 0 auto; padding: 0 15px;}
        .logos-track > a img {max-height: 80px; vertical-align: middle;}

        @keyframes scrollLeft {
            0% {transform: translateX(0);}
            100% {transform: translateX(-50%);}
        }









#mainHP {display: block; width: 100%; margin: 100px 0;}
#stoiska {display: block; width: 100%; padding: 100px 0;}
#wyposazenie {display: block; width: 100%; padding: 100px 0;}
#mapka {display: block; width: 100%; padding: 100px 0;}
#galeriaHP {display: block; width: 100%; padding: 100px 0;}
#kontakt {display: block; width: 100%; padding: 100px 0 0 0;}
#realizacjeBox {display: block; width: 100%; padding: 100px 0 0 0;}
#danekontaktowe {display: block; width: 100%; padding: 0 0 100px 0;}
#eventyHP {display: block; width: 100%; padding: 100px 0;}
#eventy {display: block; width: 100%; padding: 0 0 100px 0;}
#eventyLista {display: block; width: 100%; padding: 0 0 100px 0;}
#struktura {display: block; width: 100%; padding: 100px 0;}
#strukturaTabs {display: block; width: 100%; padding: 100px 0;}
#nagrodyOnas {display: block; width: 100%; padding: 100px 0;}
#formularz {display: block; width: 100%; padding: 100px 0;}
#modulowe {display: block; width: 100%; padding: 100px 0;}
#ofertypracy {display: block; width: 100%;}
#uzupelniajace {display: block; width: 100%; padding: 100px 0 0 0;}
#autoSlider {display: block; width: 100%;}
#content {display: block; width: 100%; padding: 100px 0;}
#faq {display: block; width: 100%; padding: 100px 0;}

    .halfpage {width: 50%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;}
    .halfpage .button {display: flex; align-self: flex-start; /* Lub 'center', aby go wyśrodkować w poziomie */ align-items: center; gap:10px; margin-top: 30px;}
    .halfpage ul {list-style: none; padding: 0px; margin: 20px 0 0 0;}
    .halfpage ul li {display: flex; gap: 15px; align-items: center;}
    .halfpage ul li:before {display: block; content: ""; background: transparent url(images/icon-ok-lightblue.svg) no-repeat top left; width: 36px; height: 36px; background-size: 36px 36px; flex-shrink: 0; flex-grow: 0; flex-basis: auto;}



        /* Animowane liczby */
        .numbersHolder {width: 100%; display: flex; margin-top: 50px; border-radius: 8px;}
        .numbersHolder {border: 1px solid #D7D7D7;}
            .numberBox {display: flex; padding: 30px; box-sizing: border-box; flex-direction: column;}
            .numberBox {border-right: 1px solid #D7D7D7;}
            .numberBox:last-child {border-right: none;}
                .number {display: block; color: var(--lightblue); font-size: 46px; line-height: 110%; font-weight: 700;}
                .numberDesc {display: block; color: var(--blue); font-size: 16px; line-height: 110%; font-weight: 300; margin-top: 10px;}



        /* Slider wrapper */
            .slider-track::-webkit-scrollbar {display: none; /* Chrome/Safari */}
            .slider-wrapper {position: relative; margin: 0px; width: 100%;}
            .slider-wrapper[data-items="4"] .slider-track {grid-auto-columns: calc((100% - 60px) / 4);}
            .slider-wrapper[data-items="3"] .slider-track {grid-auto-columns: calc((100% - 40px) / 3);}
            .slider-wrapper[data-items="1"] .slider-track {grid-auto-columns: 100%; gap: 0;}

                /* Slider content styles  */
                .slider-track {display: grid; grid-auto-flow: column; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-bottom: 10px; scrollbar-width: none; border-radius: 8px;}
                    .slider-track a {scroll-snap-align: start; display: flex; flex-direction: column; background: transparent; overflow: hidden; text-decoration: none; color: var(--white); position: relative;}
                    .slider-track > img {scroll-snap-align: start; display: flex; flex-direction: column; background: transparent; overflow: hidden; position: relative; border-radius: 8px;}
                    .slider-track a:hover {opacity: 0.8;}
                        .slider-track a > img {display: block; width: 100%; height: auto; max-height: 225px; overflow: hidden; margin-bottom: 20px; box-sizing: border-box; border-radius: 14px;}
                        .slider-track a .blogDate {display: flex; align-items: center; width: 100%; font-size: 12px; font-weight: 300;}
                        .slider-track a .blogDate img {display: block; margin-right: 10px;}
                        .slider-track a .blogTitle {display: block; width: 100%; font-size: 30px; line-height: 110%; font-weight: 600; font-family: 'Oxanium', arial, tahoma, verdana; margin: 10px 0;}
                        .slider-track a .blogDesc {display: block; width: 100%; font-size: 16px; line-height: 160%; font-weight: 300;}
                        .slider-track a .blogButton {display: flex; width: 100%; font-size: 16px; font-weight: 500; margin-top: 30px;}
                        .slider-track a .blogButton img {display: block; margin-left: 10px; transition: margin-left 0.4s ease;}
                        .slider-track a:hover .blogButton img {margin-left: 30px;}

                /* Slider arrows styles  */
                .slider-controls {display: flex; justify-content: flex-end; gap: 0px; margin-bottom: 20px;}
                    .arrow {padding: 0px; width: 60px; height: 60px; cursor: pointer; background-color: var(--lightblue); border: none; display: flex; align-items: center; justify-content: center;}
                    .arrow.left {-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
                    .arrow.right {-webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
                    .arrow:hover {background-color: #fff;}
                    .arrow:focus {background-color: #fff!important;}
                    .arrow:hover svg path {stroke: var(--blue);}
                    .arrow:focus svg path {stroke: var(--blue);}

                /* Slider counter styles  */
                .slider-counter {position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.6); color: #fff; padding: 4px 10px; font-size: 14px; border-radius: 6px; z-index: 9005; pointer-events: none;}



                /* Slider galllery custom styles */
                .gallery .slider-wrapper .slider-track {border-radius: 8px; padding: 0px;}
                .gallery .slider-wrapper .slider-track > img {display: block; width: 100%;}
                .gallery .slider-controls {position: absolute; margin-bottom: 0px; top: 50%; width: 100%;}
                .gallery .slider-controls .arrow {width: 100px; border-radius: 8px; position: absolute; z-index: 9005; top: 50%; transform: translateY(-50%);}
                .gallery .slider-controls .arrow.left {left: -30px; justify-content: left; padding-left: 30px;}
                .gallery .slider-controls .arrow.right {right: -30px; justify-content: right; padding-right: 30px;}
                .gallery .slider-counter {width: 100px; padding: 0px; height: 100px; bottom: -1px; top: auto; left: -1px; background: transparent url(images/counterBg.svg) no-repeat bottom left;}
                .gallery .slider-counter {display: flex; align-items: flex-end; color: var(--blue); font-size: 14px; line-height: 110%; font-family: 'Montserrat', arial; font-weight: 400;}




                /* Slider custom dla halfpage */
                .halfpage .slider-track {border-radius: 8px; padding-bottom: 0px;}
                .halfpage .slider-track {-webkit-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); -moz-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2);}
                .halfpage .slider-track > img {width: 100%;}
                .halfpage .slider-controls {position: absolute; bottom: 0px; left: 0px; gap:0px; z-index: 9005; margin-bottom: 0px;}
                .halfpage .slider-controls {-webkit-border-top-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomleft: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; overflow: hidden;}
                    .halfpage .arrow {width: 70px; height: 70px; border-radius: 0px; background-color: var(--lightblue); border: none;}
                    .halfpage .arrow:hover {background-color: #fff;}
                    .halfpage .arrow:focus {background-color: #fff!important;}
                    .halfpage .arrow:hover svg path {stroke: var(--blue);}
                    .halfpage .arrow:focus svg path {stroke: var(--blue);}




            @media (max-width: 1280px) {
                .slider-wrapper[data-items="4"] .slider-track {grid-auto-columns: calc((100% - 60px) / 3);}
                .slider-wrapper[data-items="3"] .slider-track {grid-auto-columns: calc((100% - 20px) / 2);}
            }
            @media (max-width: 960px) {
                .slider-wrapper[data-items="4"] .slider-track {grid-auto-columns: calc((100% - 20px) / 2);}
                .slider-wrapper[data-items="3"] .slider-track {grid-auto-columns: calc((100% - 20px) / 2);}
            }
            @media (max-width: 640px) {
                .slider-wrapper[data-items="4"] .slider-track {grid-auto-columns: 100%; gap: 0;}
                .slider-wrapper[data-items="3"] .slider-track {grid-auto-columns: 100%; gap: 0;}
            }





        /* Galeria HP */
        #mapka > div {text-align: center;}
        #mapka > div > h3, #mapka > div > p {width: 70%; display: inline-block;}
            #map {display: flex; justify-content: center; margin-top: 40px;}





        /* Galeria HP */
        #galeriaHP > div {text-align: center;}
        #galeriaHP .button {margin-top: 20px;}





        /* Kontakt HP */ 
        #kontaktButton {display: flex; justify-content: space-between; padding: 70px 40px; align-items: center; background: #072427 url(images/kontaktBg.jpg) no-repeat center center; border-radius: 8px; box-sizing: border-box;}
        #kontaktButton {-webkit-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); -moz-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2);}
        #kontaktButton:hover {background: var(--lightblue) url(images/kontaktBgHover.jpg) no-repeat center center;}
            .kontaktTitle {display: block; color: var(--white); font-size: 36px; font-weight: 700; line-height: 110%;}
            .kontaktDesc {display: block; color: var(--white); font-weight: 300; font-size:16px; line-height:140%; margin-top: 10px;}





        /* Eventy HP */
        .eventyTxt {display: flex; flex-direction: column; width: 40%;}
            .eventyTxt .button {display: flex; align-self: flex-start; align-items: center; gap:10px; margin-top: 30px;}

        .eventyTerminy {display: flex; width: 60%; gap: 10px; flex-direction: row;}
            .eventBox {display: flex; padding: 30px; flex: 1; box-sizing: border-box; flex-direction: column; border: 1px solid #D7D7D7; border-radius: 8px; background-color: var(--white);}
            .eventBox:hover {background-color: var(--lightblue);}
            .eventBox:hover span {color: var(--white);}
                .eventDate {display: block; color: var(--lightblue); font-size: 46px; line-height: 110%; font-weight: 700;}
                .eventMonth {display: block; color: var(--blue); font-size: 20px; line-height: 110%; font-weight: 500; margin-top: 10px;}
                .eventDesc {display: block; color: var(--blue); font-size: 16px; line-height: 140%; font-weight: 300; margin-top: 10px;}





        /* Eventy Lista */
        #eventyLista .eventyTxt {display: flex; flex-direction: column; width: 100%;}
            #eventyLista .eventyTxt .button {display: flex; align-self: flex-start; align-items: center; gap:10px; margin-top: 30px;}

        #eventyLista .eventyTerminy {display: grid; gap:10px; grid-template-columns: repeat(5, 1fr); width: 100%; margin-top: 30px;}
            #eventyLista .eventBox {display: flex; padding: 30px; flex: 1; box-sizing: border-box; flex-direction: column; border: 1px solid #D7D7D7; border-radius: 8px; background-color: var(--white);}
            #eventyLista .eventBox:hover {background-color: var(--lightblue);}
            #eventyLista .eventBox:hover span {color: var(--white);}
                .eventDate {display: block; color: var(--lightblue); font-size: 46px; line-height: 110%; font-weight: 700;}
                .eventMonth {display: block; color: var(--blue); font-size: 20px; line-height: 110%; font-weight: 500; margin-top: 10px;}
                .eventDesc {display: block; color: var(--blue); font-size: 16px; line-height: 140%; font-weight: 300; margin-top: 10px;}






        /* Dlaczego my HP */
        #dlaczegoMy {display: block; background: var(--blue) url(images/map-blue-bg.jpg) no-repeat center center; width: 100%; padding: 100px 0; background-size: cover;}
            .dlaczegoHolder {display: flex; flex-direction: row; gap: 50px;}
                .dlaczegoBox {display: flex; flex: 1; flex-direction: column; box-sizing: border-box; align-items: flex-start;}
                    .dlaczegoBox h5 {display: block; color: #fff; margin-top: 20px}
                    .dlaczegoBox p {display: block; color: #fff;}





        /* Rekomenacje HP */
        #rekomendacje {display: block; background: var(--blue) url(images/referencjeBg.jpg) no-repeat center center; width: 100%; padding: 100px 0; position: relative;}
            #rekomendacje h3 {display: block; width: 70%;}
            #rekomendacje p {display: block; width: 70%; margin-bottom: 0px;}

            .rekomendacjaBox {display: flex; flex-direction: column; padding: 30px; box-sizing: border-box; background: var(--white) url(images/quoteBg.jpg) no-repeat bottom right; border-radius: 8px;}
            /*.rekomendacjaBox {-webkit-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); -moz-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2);}*/
                .quoteLine {width: 100px; height: 3px; border-radius: 5px; background-color: var(--lightblue);}
                .quoteText {width: 100%; margin: 20px 0; color: var(--dark); font-size: 16px; line-height: 140%; font-weight: 300; font-style: italic;}
                .quotePodpis {display: flex; flex-direction: column; padding-left: 20px; border-left: 3px solid var(--lightblue);}
                    .quoteName {color: var(--dark); font-size: 16px; line-height: 140%; font-weight: 600;}
                    .quotePosition {color: var(--dark); font-size: 16px; line-height: 140%; font-weight: 400;}




        /* Bottom buttons HP */
        .stoiskaButton {display: flex; flex-direction: column; background-color: var(--lightblue); border-radius: 8px; padding: 30px; position: relative;}
        .stoiskaButton {-webkit-box-shadow: 0px 40px 60px 0px rgba(33, 179, 181, 0.2); -moz-box-shadow: 0px 40px 60px 0px rgba(33, 179, 181, 0.2); box-shadow: 0px 40px 60px 0px rgba(33, 179, 181, 0.2);}
        .stoiskaButton:hover {background-color: #149A9B;}
            .stoiskaTitle {display: block; color: var(--white); font-size: 30px; line-height: 110%; font-weight: 600;}
            .stoiskaDesc {display: block; color: var(--white); font-size: 16px; line-height: 110%; font-weight: 300; margin-top: 5px;}
            .stoiskaImg {display: block; width: auto; position: absolute; right: 0px; width: 55%; top: 15px;}

        .sklepyButton {display: flex; flex-direction: column; background-color: var(--blue); border-radius: 8px; padding: 30px; position: relative;}
        .sklepyButton {-webkit-box-shadow: 8px 8px 24px 0px rgba(0, 71, 91, 0.2); -moz-box-shadow: 8px 8px 24px 0px rgba(0, 71, 91, 0.2); box-shadow: 8px 8px 24px 0px rgba(0, 71, 91, 0.2);}
        .sklepyButton:hover {background-color: #002C39;}
            .sklepyTitle {display: block; color: var(--white); font-size: 30px; line-height: 110%; font-weight: 600;}
            .sklepyDesc {display: block; color: var(--white); font-size: 16px; line-height: 110%; font-weight: 300; margin-top: 5px;}
            .sklepyImg {display: block; width: auto; position: absolute; right: 0px; width: 55%; top: 15px;}





        /* O nas // Nagrody */
        #nagrodyOnas > div {width: 100%; align-items: center;}
        .nagrodyHolder {margin-top: 30px;}
        .nagrodyHolder > img {margin: 0 20px;}




        /* O nas // Struktura */
        .animated-layer {opacity: 1; transition: opacity 1s ease;}
        .hidden {opacity: 0; pointer-events: none;}
        .halfpage svg {display: block; width: 100%;}




        /* Switcher */
        #strukturaSwitch .flex {align-items: flex-start; justify-content: space-between;}
            #strukturaButtons {display: flex; width: 25%; flex-direction: column;}
                #strukturaButtons > a {color: #868686; font-size: 22px; font-weight: 600; border: 1px solid #DDDFE1; padding: 25px 40px; border-radius: 0px; box-sizing: border-box; text-align: right;}
                #strukturaButtons > a:hover {border: 1px solid #21B3B5;}
                .strukturaActive {border: 2px solid #21B3B5!important; box-sizing: border-box;}
                    .strukturaTitle {color: #868686; font-size: 22px; font-weight: 600; display: block;}
                    .strukturaActive .strukturaTitle {color: var(--lightblue);}

            #strukturaInfo {width: 70%; position: relative;}
                .strukturaContent {display: none; height: auto; display: none; opacity: 0; transition: opacity 0.4s ease;}
                .strukturaContent.visibleOn {opacity: 1; display: block;}
                    .strukturaOpis {display: flex; flex-direction: row; gap: 30px;}
                        .strukturaTxt {width: 50%;}
                            .strukturaTxt h3 {color: var(--lightblue); line-height: 110%; margin-bottom: 20px;}
                            .strukturaTxt p {color: var(--dark); font-weight: 300; margin: 10px 0;}
                        .strukturaImg {display: block;}
                        .strukturaImg img {border-radius: 8px;}








        /* Oferta // corobimy */
        .ofertaHolder {display: flex; flex-direction: row; gap: 50px; margin: 100px 0;}
            .ofertaBox {display: flex; flex: 1; flex-direction: column; box-sizing: border-box; align-items: flex-start;}
                .ofertaBox h5 {display: block; color: var(--blue); margin-top: 20px}
                .ofertaBox p {display: block; color: var(--dark);}




        /* Oferta // slider automatyczny */
        #autoSlider {overflow: hidden; position: relative; width: 100%;}
        #autoSlider .auto-track {display: flex; gap: 5px; animation: auto-scroll-left 60s linear infinite; width: max-content;}
        #autoSlider .auto-track img {height: auto; width: auto; max-height: 300px; border-radius: 4px; flex-shrink: 0;}

        @keyframes auto-scroll-left {
          0% {transform: translateX(0);}
          100% {transform: translateX(-50%);}
        }




        /* Oferta // Uzupelniajace */
        #uzupelniajace .ofertaHolder {margin-top: 50px;}





        /* Kontakt / Realizacje button */ 
        #realizacjeButton {display: flex; justify-content: space-between; padding: 70px 40px; align-items: center; background: #072427 url(images/realizacjeBg.jpg) no-repeat center center; border-radius: 8px; box-sizing: border-box;}
        #realizacjeButton {-webkit-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); -moz-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2);}
        #realizacjeButton:hover {background: var(--lightblue) url(images/realizacjeBgHover.jpg) no-repeat center center;}
            .realizacjeTitle {display: block; color: var(--white); font-size: 36px; font-weight: 700; line-height: 110%;}
            .realizacjeDesc {display: block; color: var(--white); font-weight: 300; font-size:16px; line-height:140%; margin-top: 10px;}





        .contactBoxHolder {display: flex; margin-top: 40px; gap:80px;}
            .contactBox {display: block;}
                .contactBox a {font-weight: 400;}








        /* Kontakt / Formularz */
        #formularz .center {align-items: flex-start;}
        .imgShadow {-webkit-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); -moz-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2); box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.2);}
        .imgShadow {border-radius: 8px; display: block; width: 100%;}
        .wpcf7-form {display: flex; flex-direction: column; margin-top: 20px; width: 90%;}
        .wpcf7-form p {margin: 0px;}
        .wpcf7-form label {display: block; font-size: 16px; color: var(--blue); font-weight: 600;}
        .wpcf7-form input {display: block; background-color: var(--white); border-radius: 8px; border: 1px solid #bcbcbc; opacity: 0.8; margin: 10px 0 20px 0; padding: 15px 25px; font-size: 16px;}
        .wpcf7-form textarea {display: block; background-color: var(--white); border-radius: 8px; border: 1px solid #bcbcbc; opacity: 0.8; margin: 10px 0 20px 0; padding: 15px 25px; height: 100px; font-size: 16px;}
        .wpcf7-form input, .wpcf7-form textarea {width: 100%; box-sizing: border-box;}
        .wpcf7-form input:placeholder-shown, .wpcf7-form textarea:placeholder-shown {font-size: 16px;}
        .wpcf7-form .smallLabel {font-size: 11px; font-weight: 400;}
            .wpcf7-not-valid-tip {font-size: 11px; font-weight: 300;}
            .wpcf7-spinner {display: none;}
            .wpcf7 form .wpcf7-response-output {margin: 0px; padding: 7px 20px; border: 1px solid #ff0000; font-size: 12px; line-height: 130%; border-radius: 8px;}
            .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {border-color: #ff0000;}

        .wpcf7-form .wpcf7-submit {display: inline-block; padding: 13px 30px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 16px;}
        .wpcf7-form .wpcf7-submit {background-color: var(--blue); color: var(--white); border: 1px solid var(--blue);}
        .wpcf7-form .wpcf7-submit:hover {background-color: var(--darkblue); color: var(--white); border: 1px solid var(--darkblue);}

            .checkagree {text-align: left; margin-bottom: 20px;}
                .checkagree p {display: flex!important; align-items: center; gap: 10px; font-size: 12px; line-height: 16px;}
                .checkagree span.wpcf7-list-item {margin: 0px;}
                .checkagree .wpcf7-form-control-wrap {display: inline-block;}
                .checkagree .wpcf7-not-valid-tip {display: none;}
                .checkagree .agree {margin-right: 10px;}
                .checkagree input {width: 20px!important; height: 20px!important; display: block!important; position: static!important; left: auto!important; margin: 0px!important;}
                    .checkagree .wpcf7-not-valid {border: 1px solid #ff0000; padding: 2px; display: block;}
                .checkagree {font-size: 12px; line-height: 16px; font-weight: 500;}
                    .checkagree a {font-size: 12px; line-height: 16px; font-weight: 500;}
                .agreeTxt {font-size: 12px;}






        /* Kariera // lista */
        #pracaHolder {display: flex; flex-direction: column; gap: 5px; width: 100%; box-sizing: border-box; margin-top: 20px;}
            .pracaBox {display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 40px; background-color: var(--lightblue); box-sizing: border-box; border-radius: 8px; border: 2px solid var(--lightblue); flex-wrap: wrap;}
            .pracaBox {-webkit-box-shadow: 0px 40px 60px 0px rgba(33, 179, 181, 0.2); -moz-box-shadow: 0px 40px 60px 0px rgba(33, 179, 181, 0.2); box-shadow: 0px 40px 60px 0px rgba(33, 179, 181, 0.2);}
            /*#pracaHolder div:hover {background-color: var(--darkblue); border: 2px solid var(--darkblue);}*/
                .pracaTxt {display: flex; flex-direction: column;}
                    .pracaTitle {font-size: 30px; font-weight: 700; line-height: 110%; display: block; color: var(--white); margin-bottom: 10px;}
                    .pracaDesc {font-size: 16px; line-height: 140%; font-weight: 300; display: block; color: var(--white);}

                .pracaBox .button {cursor: pointer; border: none; font-weight: 700;}
                .pracaBox .button {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
                .pracaBox .button:hover {background-color: var(--darkblue);}

                .pracaContent {width: 100%; flex-basis: 100%; display: flex; gap: 60px; justify-content: space-between; align-items: flex-start;}
                .pracaContent {overflow: hidden; max-height: 0; transition: max-height 0.7s ease;}
                .pracaContent form {width: 100%;}

                .pracaBox.rozwiniety {background-color: #F4F4F4; border: 2px solid var(--lightblue);}
                .pracaBox.rozwiniety .pracaContent {margin-top: 50px;}
                .pracaBox.rozwiniety .pracaTitle {color: var(--blue);}
                .pracaBox.rozwiniety .pracaDesc {color: var(--dark);}
                .pracaBox.rozwiniety .button {background-color: var(--dark);}





        /* Content standard */
        #headerText.contentText h2 {margin-bottom: 100px;}
        #headerText.contentText h4 {color: var(--darkblue); margin: 40px 0 20px 0;}
        #headerText.contentText p {font-size: 16px; margin: 15px 0;}
        #headerText.contentText ul, #headerText.contentText ol {width: 70%;}






        /* FAQ */
        #faq {background: #1B596B url(images/faqBg.jpg) no-repeat top center;}
            #faq h3 {text-align: center;}



            .accordion {display: block; width: 80%; margin: 40px auto;}
                .accordion-item {margin-bottom: 10px; border-radius: 8px; overflow: hidden;}
                .accordion-header {background-color: transparent; width: 100%; border: none; padding: 15px 20px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: bold; gap: 20px; color: #fff;}
                .accordion-header:hover {}

                .accordion-content {max-height: 0; padding: 0 20px; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out;}
                    .accordion-content p {margin: 0; padding-bottom: 20px; color: #fff; line-height: 160%;}
                    .icon {display: flex; align-items: center;}
                    .icon-minus {display: none;}

                /* Stan aktywny (rozwinięty) */
                .accordion-item .accordion-header[aria-expanded="true"] {}
                .accordion-item .accordion-header[aria-expanded="true"] .icon-plus {display: none;}
                .accordion-item .accordion-header[aria-expanded="true"] .icon-minus {display: block;}












footer {display: block; margin-top: 100px; padding: 50px 0; background: var(--darkblue) url(images/footerBg.jpg) no-repeat top center; background-size: cover;}
footer .halfpage {justify-content: flex-start;}
footer .halfpage ul {margin-top: 0px;}
footer .halfpage ul li:before {display: none;}

#footerNav {display: block; padding: 50px 0;}
    /*.footerLeft {width: 60%;}
    .footerRight {width: 40%; display: flex; align-items: flex-end; flex-direction: column;}*/

        .footerDetails {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
            .footerDetails h6 {margin-top: 20px; width: 70%;}
            .footerDetails .button {margin-top: 50px;}
            .footerContact {margin: 30px 0 50px 0; display: flex; flex-direction: column; gap: 2px;}
            .footerContact > a {display: flex; gap: 10px; color: #fff; font-size: 16px; line-height: 28px; font-weight: 300;}
            .footerContact > a:hover {opacity: 0.6;}


            .footerSocial {display: flex; flex-direction: row; gap: 3px;}
                .footerSocial > a {display: flex; width: 54px; height: 54px; justify-content: center; align-items: center; border: 1px solid var(--white); border-radius: 54px;}
                .footerSocial > a:hover {background-color: var(--white);}
                .footerSocial > a:hover svg path {fill: var(--blue);}



        .footerNav {display: flex; width: 100%; /*flex: 1;*/ justify-content: space-between; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
            .footerNav ul {display: block; padding: 0px; margin: 0px; list-style: none;}
                .footerNav ul li {display: block;}
                    .footerNav ul li a {display: block; color: var(--white); font-size: 16px; line-height: 200%; font-weight: 300;}
                    .footerNav ul li a:hover {opacity: 0.6;}
                    .footerNav ul li:first-child a {font-weight: 700;}


        .footerNagrody {display: flex; width: 100%; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); margin: 30px 0; gap: 30px;}
            .footerNagrody p {color: #fff;}


        .footerNavBottom {display: flex; justify-content: space-between;}
            .footerNavBottom nav ul {display: flex; list-style: none; padding: 0px; margin: 0px; gap: 40px;}
                .footerNavBottom nav ul li {display: block;}
                    .footerNavBottom nav ul li a {display: block; color: var(--white); opacity: 0.7; font-size: 11px; font-weight: 400;}
                    .footerNavBottom nav ul li a:hover {opacity: 1;}

            /*#goTop {display: flex; font-size: 11px; font-weight: 400; color: var(--white); align-items: center; opacity: 0.7;}
            #goTop:hover {opacity: 1;}
            #goTop > img {margin-left: 10px; display: block;}*/

            #goTop {display: flex; align-items: center; color: var(--white); font-size: 11px; font-weight: 400; position: relative; height: 20px; overflow: hidden; padding-right: 20px; cursor: pointer; gap: 6px; text-decoration: none; opacity: 0.7;}
                #goTop:hover {opacity: 1;}
                #goTop svg {fill: var(--white);}
                #goTop svg {position: absolute; bottom: 0; right: 0; top: 2px; transition: transform 500ms ease-in-out; width: 16px; height: 17px;}
                    #goTop:hover svg {animation: fly-in-out 500ms ease-in-out;}

                    @keyframes fly-in-out {
                        0% { transform: translateY(0); }
                        25% { transform: translateY(-100%); visibility: hidden; /* Obrazek niewidoczny */}
                        75% { transform: translateY(100%); visibility: hidden; /* Obrazek niewidoczny */}
                        100% { transform: translateY(0); visibility: visible; /* Obrazek widoczny */}
                    }













/* nav hamburger styles -------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------- */

.button_container {display: none; position: relative; height: 27px; width: 35px; cursor: pointer; -webkit-transition: opacity .25s ease; transition: opacity .25s ease; z-index: 90000;}
/*.button_container {background: #fff; padding: 10px; background-color: var(--white); border-radius: 8px;}}
.button_container {-webkit-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.3); -moz-box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.3); box-shadow: 0px 40px 60px 0px rgba(10, 36, 53, 0.3);}*/
.button_container:hover {opacity: .7;}
.button_container.active .top { -webkit-transform: translateY(11px) translateX(0) rotate(45deg); transform: translateY(11px) translateX(0) rotate(45deg); background: var(--white);}
.button_container.active .middle { opacity: 0; background: var(--white);}
.button_container.active .bottom { -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg); transform: translateY(-11px) translateX(0) rotate(-45deg); background: var(--white);}
.button_container span {background: var(--white); border: none; height: 4px; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition: all .35s ease; transition: all .35s ease; cursor: pointer;}
.subpageBg .button_container span {background: var(--blue);}
.button_container span:nth-of-type(2) {top: 11px; /* width: 60%; */}
.button_container span:nth-of-type(3) {top: 22px; /* width: 90%; */}

.overlay {z-index: 90000; position: fixed; background: var(--blue); top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; -webkit-transition: opacity .35s, visibility .35s, height .35s; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; }
.overlay.open {opacity: .98; visibility: visible; height: 100%; /*max-height:900px;*/ z-index: 90000;}
.overlay .navFlex {display: flex; justify-content: center; align-items: center; height: 100%;}

.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
          animation-delay: .55s;
}

.overlay.open ul#menu-subnav-1 li, .overlay.open ul#menu-subnav_pl li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .65s;
          animation-delay: .65s;
}



.overlay #languagesSwitchFooter {display: flex; flex-direction: row; gap: 20px; justify-content: center;}
.overlay #languagesSwitchFooter li a {opacity: 0.4;}
.overlay #languagesSwitchFooter li a img {transform: scale(120%);}
.overlay #languagesSwitchFooter li.current-lang a {opacity: 1;}


.overlay nav {}
.overlay ul {margin-top: 20px; list-style: none; padding: 0; display: inline-block; position: relative; float: right; clear: both;}
.overlay ul li { display: block; position: relative; opacity: 0; }
.overlay ul li a { display: block; position: relative; color: #FFF; text-decoration: none; font-size: 40px; line-height: 60px; font-weight: 700; text-align: center; font-family: 'Montserrat';}
.overlay ul li.current-menu-item a {color: var(--lightblue);}
.overlay ul li a:hover, .overlay ul#menu-subnav-1 li a:hover, .overlay ul li.current-menu-item a, .overlay ul li.current-page-ancestor a {}

@-webkit-keyframes fadeInRight {
  0% {opacity: 0; left: 20%;}
  100% {opacity: 1; left: 0;}
}

@keyframes fadeInRight {
  0% {opacity: 0; left: 20%;}
  100% {opacity: 1; left: 0;}
}















/* --------------------------- Anikacje pojawiania się na scenie ----------------------------  */
.has-scroll-reveal { opacity: 0; animation-play-state: paused; }

.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; animation-play-state: running;
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2.5rem, 0);
    transform: translate3d(0, 2.5rem, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}









/* Media queries */
@media all and (max-width: 1280px) {
    /*#bottomButtons .flex {flex-direction: column;}
    #bottomButtons .flex .halfpage {width: 100%;}*/
    #bottomButtons .gap60 {gap: 10px;}
    .stoiskaButton, .sklepyButton {overflow: hidden;}
    .stoiskaImg, .sklepyImg {right: -50px; width: 55%; top: 50%; transform: translateY(-50%);}
    .strukturaOpis {flex-direction: column;}
    .strukturaTxt {width: auto;}
}



@media all and (max-width: 1024px) {
    .center {padding-left: 30px; padding-right: 30px;}
    .button_container {display: block;}
    #top nav {display: none;}
    .headerSocial {display: none;}
    #headerText {left: 50%; transform: translate(-50%, -46%); width: 90%; text-align: center;}
    .subpageBg #headerText {width: 100%;}
    #headerText h2, #headerText p, #uzupelniajace h3, #uzupelniajace p {width: 100%; text-align: center;}
    #headerText h2, h2 {font-size: 40px;}
    h3 {font-size: 30px;}
    h3 br {display: none;}
    #headerText p, p {font-size: 16px;}
    .halfpage, .eventyTxt, .eventyTerminy {width: 100%;}
    #mainHP .flex, #stoiska .flex, #wyposazenie .flex, .dlaczegoHolder, #eventyHP .flex, #eventy .flex, #modulowe .flex, #kontaktButton, #realizacjeButton {flex-direction: column; text-align: center;}
    #struktura .flex, #sklepyAutonomiczne .flex, #formularz .flex {flex-direction: column; text-align: center;}
    footer .flex, #bottomButtons .flex {flex-direction: column;}
    #mainHP .flex .halfpage, #stoiska .flex .halfpage, #wyposazenie .flex .halfpage, #sklepyAutonomiczne .flex .halfpage, #modulowe .flex .halfpage, #formularz .flex .halfpage, .dlaczegoBox, .eventyTxt {align-items: center;}
    .halfpage .button, .eventyTxt .button {align-self: center;}
    #bottomButtons .halfpage .button {align-self: flex-start;}
    .video-container {min-height: 95vh;}
    footer .footerDetails {align-items: center;}
    footer .footerDetails .button {margin-top: 20px; align-self: center;}
    .footerDetails h6 {text-align: center; width: 100%;}
    .footerNav {justify-content: space-around;}
    .footerNagrody p {width: 100%;}
    .footerContact {align-items: center;}
    .numberBox {flex: 1;}
    .footerSocial, .kontaktTxt {margin-bottom: 40px;}
    #eventyHP .flex, #eventy .flex {gap: 40px;}
    .gallery .slider-controls .arrow.left {left: -15px;}
    .gallery .slider-controls .arrow.right {right: -15px;}
    .overlay-menu {}
    .overlay ul {float: none; display: block;}
    .ofertaHolder {flex-direction: column; align-items: center;}
    .ofertaBox {align-items: center; text-align: center;}
    #eventyLista .eventyTerminy {grid-template-columns: repeat(4, 1fr);}
}



@media all and (max-width: 960px) {
    .strukturaTitle {font-size: 16px;}
    #strukturaTabs .flex {flex-direction: column;}
    #strukturaButtons {flex-direction: row; width: 100%; flex-grow: 1;}
    #strukturaButtons > a {padding: 15px 20px; flex-grow: 1; text-align: center;}
    #strukturaInfo {width: 100%;}
}



@media all and (max-width: 800px) {
    .nagrodyHolder {display: flex; flex-direction: column;}
    #eventyLista .eventyTerminy {grid-template-columns: repeat(3, 1fr);}
    .accordion {width: 100%;}
    #strukturaButtons {display: grid; gap:10px; grid-template-columns: repeat(2, 1fr);}
}



@media all and (max-width: 600px) {
    #headerText {display: flex; flex-direction: column;}
    #headerText .button {margin: 3px 0;}
    #goDown {display: none;}
    .button {display: block;}
    .halfpage .button, .eventyTxt .button {align-self: stretch; justify-content: center;}
    .numbersHolder {flex-direction: column;}
    .numberBox {border-right: none; border-bottom: 1px solid #D7D7D7;}
    .numberBox:last-child {border-bottom: none;}
    #mapka > div > h3, #mapka > div > p {width: 100%;}
    .eventyTerminy {flex-direction: column;}
    .footerNav {flex-direction: column; text-align: center; gap: 30px;}
    .footerNagrody {flex-direction: column; align-items: center; text-align: center;}
    .footerNavBottom {flex-direction: column; align-items: center;}
    .gallery .slider-controls {top: -40px;}
    .gallery .slider-controls .arrow.left {left: 0px;}
    .gallery .slider-controls .arrow.right {right: 0px;}
    #eventyLista .eventyTerminy {grid-template-columns: repeat(2, 1fr);}
    .strukturaImg img {width: 100%;}
}



@media all and (max-width: 460px) {
    .stoiskaImg, .sklepyImg {display: none;}
    .stoiskaButton, .sklepyButton {display: flex; align-items: center; text-align: center;}
    #bottomButtons .halfpage .button {align-self: center;}
    #rekomendacje h3, #rekomendacje p {width: 100%; text-align: center;}
    #rekomendacje p {margin-bottom: 30px;}
    .slider-controls {justify-content: center;}
    #eventyLista .eventyTerminy {grid-template-columns: repeat(1, 1fr);}
}