html {scroll-behavior: smooth; overflow-x: hidden;}
body { font-family: "century-gothic", sans-serif; font-weight: 400; font-style: normal; background-color: #fbfaf9; overflow-x: hidden;}
.green {color: #3b6516;}
#kv { background-image: url('https://naturalniepomojemu.pl/wp-content/uploads/2025/07/kv2.jpg'); background-size: contain; aspect-ratio: 3840/6227; }
#kvend { background-image: url('https://naturalniepomojemu.pl/wp-content/uploads/2025/10/kv_end-scaled.jpg'); background-size: contain; aspect-ratio: 3800/6127; width: 100%;}
#kvlista { background-image: url('https://naturalniepomojemu.pl/wp-content/uploads/2025/11/kv_lista-1-scaled.jpg'); background-size: contain; aspect-ratio: 3800/8775; width: 100%;}

#logo { position: absolute; left: 50%; transform: translateX(-50%); aspect-ratio: 592/106;}
#konkurs_ribbon {position: absolute; left: 0px; top: 0px; aspect-ratio: 1485/643;}
#menu {position: absolute; display: flex; flex-direction: column;}
#menu a {color: #002857; text-decoration: none; font-weight: 700;}
.menu-item { position: relative; display: inline-block; padding-left: 0px; }
.menu-item .kreska { position: absolute; left: -0.8vw; bottom: -0.70vw; width: 2.057vw; height: auto; pointer-events: none; }

#jak-wziac-udzial {position: absolute; margin: 0 auto; color: #002857; font-weight: bold; text-align: center;}
#jak-wziac-udzial .punkt {display: flex; justify-content: center;}
#jak-wziac-udzial .punkt .numer {position: relative; color: #3b6516}
#jak-wziac-udzial .punkt.punkt1 {align-items: end;}
#jak-wziac-udzial .termin {font-weight: 400;}
#jak-wziac-udzial .nagrody .txt {position: relative; display: inline-block;}

#formularz {background: url('/wp-content/uploads/2025/05/bg_formularz-scaled.jpg'); }
#formularz .title {font-weight: 700; position: relative;}
#formularz .title .kreska {position: absolute;}

#form input[type="text"], #form input[type="email"] {font-weight: 700; width: 100%; background-color: transparent;  color: #002857;}
#form input::placeholder {color: #002857; font-weight: 700;}
.upload_title {font-weight: 700;}
#upload_paragon, #odpowiedzBlock {text-align: center; color: #002857;}
.upload_btn {position: relative; font-weight: 700;}
.upload_desc, .upload_desc2 {font-weight: 700;}
.upload_container {position: relative; margin: 0 auto;}
#paragon_progress_container { display: none; position: absolute; width: 100%; height: 100%; margin: 0 auto;}
#paragon_progress_bar {background-color: #3b6516;}
#upload_paragon.dragover { background-color: #e0e0e0;}
#paragon_file_status {display: none; font-weight: 700;}
#odpowiedzBlock .pytanie {font-weight: 700;}
#odpowiedzBlock textarea {background: none; border: none; color: #002857; font-weight: 700;}
.checkbox-group {color: #002857;}
.custom-checkbox {display: flex; align-items: center; font-weight: 700; cursor: pointer;}
.custom-checkbox input { display: none; }
.custom-checkbox .checkmark {flex-shrink: 0; display: inline-block; position: relative;}
.custom-checkbox input:checked + .checkmark {background-color: #fff;}
.custom-checkbox input:checked + .checkmark::after {content: ""; position: absolute; border: 1vw solid #3b6516; transform: rotate(45deg);}
.custom-checkbox:hover .checkmark { border-color: #3b6516; }
.custom-checkbox a {color: #002857;}
.form_submit {display: flex;}
.form_submit .info {font-weight: 700;}
#formularz #btn_wyslij {position: relative;}
button[type="submit"] {border: none !important; background: none; color: #3b6516; font-weight: 700;}
#formularz .button .kreska {position: absolute;}

#msg_container { display: none; position: fixed; flex-direction: column; text-align: center; top: 0px; left: 0px; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 999; color: #3b6516; }
#ramka { display: none; position: fixed; flex-direction: column; text-align: center; top: 0px; left: 0px; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 999; color: #3b6516; }
#ramka {background-image: url('/ramka.png'); background-repeat: no-repeat; background-position: center center; background-size: contain;}

#logo {width: 15.417vw; top: 4.844vw}
#konkurs_ribbon {width: 38.672vw;}
#menu {top: 4.297vw; right: 8.307vw; font-size: 1.302vw; line-height: 1.432vw; row-gap: 1vw;}
#jak-wziac-udzial {top: 74vw; left: 8vw; width: 85vw; font-size: 1.563vw; line-height: 2vw; padding-top: 2vw;}
#jak-wziac-udzial .punkt .numer {font-size: 4.886vw; line-height: 3.542vw; margin-left: -3.5vw; height: 5vw;}
#jak-wziac-udzial .punkt .numer .kreska {position: absolute; bottom: 0vw; left: 0px; width: 4.792vw;}
#jak-wziac-udzial .punkt.punkt1 .txt {position: relative; top: -1.5vw}
#jak-wziac-udzial .punkt.punkt1 .numer {top: -0.4vw; margin-right: 1.042vw;}
#jak-wziac-udzial .punkt.punkt2 {margin-top: 3.385vw;}
#jak-wziac-udzial .punkt.punkt2 .numer {top: 0.2vw; margin-right: 1.563vw;}
#jak-wziac-udzial .punkt.punkt3 {margin-top: 4.027vw; margin-left: -7vw;}
#jak-wziac-udzial .punkt.punkt3 .numer {top: -1.5vw; margin-right: 2.995vw;}
#jak-wziac-udzial .hashtag {margin-top: 3.218vw; font-size: 3.646vw; line-height: 3.646vw;}
#jak-wziac-udzial .termin {font-size: 1.916vw; line-height: 1.916vw; margin-top: 0.521vw;}
#jak-wziac-udzial .nagrody {font-size: 5.99vw; line-height: 5.99vw; margin-top: 3.052vw;}
#jak-wziac-udzial .nagrody .kreska {position: absolute; bottom: -3.3vw; right: 0px; width: 20.052vw}
#formularz {padding-top: 3.255vw; padding-bottom: 4vw;}
#formularz .title {font-size: 3.646vw; line-height: 3.646vw;}
#formularz .title .kreska {width: 12.578vw; bottom: -1.5vw; right: 6vw;}
#form input[type="text"], #form input[type="email"] {border: 0.156vw solid #3b6516; border-radius: 0.781vw; font-size: 1.563vw; padding: 1.172vw; margin: 0;}
#form #email {margin-top: 2.604vw;}
#form #nick {margin-top: 1vw;}
#upload_paragon, #odpowiedzBlock {padding-top: 1.172vw; padding-bottom: 1.042vw; margin-top: 1vw; border: 0.156vw solid #3b6516; border-radius: 0.781vw; }
#odpowiedzBlock {padding-top: 0.651vw;}
#odpowiedzBlock .pytanie {font-size: 1.042vw; line-height: 1.342vw;}
#odpowiedzBlock textarea {width: 30.729vw; height: 8.984vw; margin-top: 0.781vw; border: 0.156vw dashed #3b6516; border-radius: 1.38vw;}
.upload_title {font-size: 1.563vw; line-height: 1.563vw;}
.upload_desc, .upload_desc2 {font-size: 0.781vw; line-height: 0.781vw; margin-top: 0.911vw;}
.upload_btn {font-size: 1.563vw; line-height: 1.563vw; padding-top: 0.911vw; padding-bottom: 1.042vw;}
.upload_container {border: 0.156vw dashed #3b6516; border-radius: 1.38vw; width: 20.052vw; margin-top: 0.781vw; min-height: 3.383vw;}
#paragon_progress_container {top: -0.8vw; left: 0px;  margin-top: 0.781vw; border-radius: 1.38vw; width: 20.052vw; }
#paragon_progress_bar{ width: 50%; height: 100%; border-radius: 1.38vw;  }
#paragon_file_status {padding-top: 0.7vw}
.custom-checkbox {flex-basis: 2vw; font-size: 1.042vw; line-height: 1.442vw; margin-top: 1.563vw;}
.custom-checkbox .checkmark { width: 1.901vw; height: 1.823vw; border: 0.156vw solid #3b6516; border-radius: 0.417vw;  margin-right: 1.1vw; transition: all 0.2s ease-in-out; }  
.custom-checkbox input:checked + .checkmark {border: 0.156vw solid #3b6516; }
.custom-checkbox input:checked + .checkmark::after {left: 0.5vw; top: 0.25vw; width: 0.35vw; height: 0.75vw; border-width: 0 3px 3px 0; }  
.form_submit {margin-top: 0.911vw;}
.form_submit .info {font-size: 0.781vw; line-height: 0.781vw; width: 25%; padding-top: 1.563vw;}
.form_submit .button {width: 75%;}
button[type="submit"] {font-size: 3.646vw; line-height: 4vw;}
#formularz #btn_wyslij .kreska {width: 12.578vw; bottom: -1.5vw; right: 1.5vw;}

#footer {background-color: #fbfaf9; height: 9.635vw;}
#footer .menu {display: flex; justify-content: flex-end; padding-right: 8.33333333%; width: 100%; padding-top: 2.214vw; column-gap: 3.516vw;}
#footer .menu a {text-decoration: none; color: #002857; font-weight: bold; font-size: 0.911vw;}
#footer .logo_bakoma { position: absolute; top: 2.083vw; left: 8.33333333%; }
#footer .logo_bakoma img { width: 8.411vw; }

#formularz #packshot1_desktop {position: absolute; top: 14vw; left: 8vw; width: 26.146vw; z-index: 999;}
#formularz #packshot2_desktop {position: absolute; top: 25.5vw; right: 14.2vw; width: 26.823vw;}
#packshot1_mobile, #packshot2_mobile {display:none}

#submit_txt.please_wait {padding-left: 2vw; line-height: 4vw;}
#msg_container { font-size: 2.109vw; line-height: 2.109vw;}
#msg_container strong { font-size: 2.925vw; line-height: 2.925vw; }
#msg_container .kreska {position: absolute; width: 12.578vw; bottom: -2.5vw; right: 8.5vw;}
#msg_container .logo {width: 15.417vw; margin-top: 5.99vw;}

#hamburgerBlock {display: none;}

#hamburger .close {display: none;}

#msg_ok {
    cursor: pointer;
    width: 49.766vw;
}

@media screen and (min-width: 1300px) and (max-width: 1700px) { #formularz #packshot1 {top: 14.7vw;} #formularz #packshot2 {top: 26.2vw;} }
@media screen and (min-width: 1100px) and (max-width: 1300px) { #formularz #packshot1 {top: 15.2vw;} #formularz #packshot2 {top: 26.7vw;} }
@media screen and (min-width: 100px) and (max-width: 1100px) { #formularz #packshot1 {top: 16vw;} #formularz #packshot2 {top: 27.5vw;} }
@media screen and (min-width: 768px) and (max-width: 900px) { #formularz #packshot1 {top: 16.4vw;} #formularz #packshot2 {top: 28.3vw;} }

.lista {display: flex; flex-direction: column; width: 55.658vw; margin: 0 auto; font-size: 1.974vw; line-height: 1.974vw;}
.lista .table_title {border-bottom: 1px solid #bcbcbc; padding-bottom: 0.789vw}
.lista .category_title {color: #002857; font-size: 1.974vw; line-height: 1.974vw; margin-top: 1.579vw; padding-bottom: 1.053vw; border-bottom: 1px solid #bcbcbc;}
.lista .lista_row {border-bottom: 1px solid #bcbcbc; color: #3b6516; padding: 0.658vw 0; font-weight: 400;}

@media screen and (max-width: 768px) {
    #ramka {background-image: url('/ramka_mobile.png')};
    .mobile {display: none;}
    #formularz #packshot1_desktop {display: none;}
    #formularz #packshot2_desktop {display: none;}

    #packshot1_mobile {display: block; position: relative; top: 91vw; left: 10vw; width: 69.474vw; z-index: 9999;}
    #packshot2_mobile {display: block; position: relative; width: 78.125vw; z-index: 999;}

    #kv { background-image: url('/wp-content/uploads/2025/07/kv2_mobile-scaled.jpg'); background-size: contain; aspect-ratio: 768/3890; background-repeat: no-repeat; top: -30vw;}
	#kvend { background-image: url('https://naturalniepomojemu.pl/wp-content/uploads/2025/10/kv_end_mobile-scaled.jpg'); background-size: contain; aspect-ratio: 768/3522; width: 100%; top: -30vw;}
    #kvlista { background-image: url('https://naturalniepomojemu.pl/wp-content/uploads/2025/11/kv_lista_mobile-scaled.jpg'); background-size: contain; aspect-ratio: 768/3776; width: 100%; top: -30vw;}
	
    #logo {width: 26.823vw; top: 35.859vw}
    #konkurs_ribbon {width: 86.068vw; top: 41.927vw;}
    #hamburgerBlock {position: absolute; display: none; top: 35vw; right: 5vw; z-index: 999;}
    #hamburger img {width: 7.552vw;}
    #menu {width: 100%; top: 16.229vw; left: 0vw; font-size: 3.906vw; line-height: 3.906vw; row-gap: 5.859vw; align-items: center; display: none;}
    .menu-item .kreska { left: -0.8vw; bottom: -2.50vw; width: 6.641vw; left: 50%; transform: translateX(-50%);}

    #jak-wziac-udzial {top: calc(240vw - 2.214vw); left: 8vw; width: 85vw; font-size: 2.995vw; line-height: 3.5vw; padding-top: 2vw;}
    #jak-wziac-udzial .punkt {flex-direction: column; align-items: center; padding-top: 2.214vw;}
    #jak-wziac-udzial .punkt .numer {font-size: 9.296vw; line-height: 9.296vw; margin-left: 0vw; height: auto; padding-bottom: 2.8vw;}
    #jak-wziac-udzial .punkt .numer .kreska {position: absolute; bottom: 1.5vw; left: 0px; width: 9.115vw;}
    #jak-wziac-udzial .punkt.punkt1 {align-items: center;}
    #jak-wziac-udzial .punkt.punkt1 .txt {position: relative; top: 0vw}
    #jak-wziac-udzial .punkt.punkt1 .numer {top: 0vw; margin-right: 0vw;}
    #jak-wziac-udzial .punkt.punkt2 {margin-top: 0vw;}
    #jak-wziac-udzial .punkt.punkt2 .numer {top: 0vw; margin-right: 0vw;}
    #jak-wziac-udzial .punkt.punkt3 {margin-top: 0vw; margin-left: 0vw;}
    #jak-wziac-udzial .punkt.punkt3 .numer {top: 0vw; margin-right: 0vw;}
    #jak-wziac-udzial .punkt.punkt2 .txt .green {width: 90%; display: inline-block;}
    #jak-wziac-udzial .hashtag {margin-top: 7.813vw; font-size: 6.25vw; line-height: 6.25vw;}
    #jak-wziac-udzial .termin {font-size: 2.995vw; line-height: 2.995vw; margin-top: 1.953vw;}
    #jak-wziac-udzial .nagrody {font-size: 12.5vw; line-height: 12.5vw; margin-top: 5.068vw;}
    #jak-wziac-udzial .nagrody .kreska {position: absolute; bottom: -6vw; right: 0px; width: 41.927vw}

    #formularz {padding-top: calc(3.255vw + 20vw); padding-bottom: 4vw; margin-top: -62vw;}
    #formularz .title {font-size: 7.161vw; line-height: 7.161vw; text-align: center;}
    #formularz .title .txt {position: relative; display: inline-block;}
    #formularz .title .kreska {width: 28.516vw; bottom: -4vw; right: 6vw;}
    #form {width: 74.74vw; margin: 0 auto;}
    #form input[type="text"], #form input[type="email"] {border: 0.391vw solid #3b6516; border-radius: 1.823vw; font-size: 3.516vw; padding: 2.604vw; margin: 0;}
    #form #email {margin-top: 2.604vw;}
    #form #nick {margin-top: 1vw;}

    #upload_paragon, #odpowiedzBlock {padding-top: 2.344vw; padding-bottom: 2.344vw; margin-top: 1vw; border: 0.391vw solid #3b6516; border-radius: 1.823vw; }
    #odpowiedzBlock {padding-top: 1.432vw;}
    #odpowiedzBlock .pytanie {font-size: 2.344vw; line-height: 2.644vw;}
    #odpowiedzBlock textarea {width: 69.531vw; height: 19.922vw; margin-top: 1.953vw; border: 0.391vw dashed #3b6516; border-radius: 1.563vw;}
    .upload_title {font-size: 3.516vw; line-height: 3.516vw;}
    .upload_desc, .upload_desc2 {font-size: 2.344vw; line-height: 2.344vw; margin-top: 0.911vw;}
    .upload_desc {padding-bottom: 2.083vw;}
    .upload_desc2 {margin-top: 2.083vw;}
    .upload_btn {font-size: 3.516vw; line-height: 3.516vw; padding-top: 2.083vw; padding-bottom: 2.344vw;}
    .upload_container {border: 0.391vw dashed #3b6516; border-radius: 1.563vw; width: 44.531vw; margin-top: 0.781vw; min-height: 3.383vw;}
    #paragon_progress_container {top: -0.8vw; left: 0px;  margin-top: 0.781vw; border-radius: 1.38vw; width: 20.052vw; }
    #paragon_progress_bar{ width: 50%; height: 100%; border-radius: 1.38vw;  }
    #paragon_file_status {padding-top: 0.7vw}
    .custom-checkbox {flex-basis: 2vw; font-size: 1.042vw; line-height: 1.442vw; margin-top: 1.563vw;}
    .custom-checkbox .checkmark { width: 1.901vw; height: 1.823vw; border: 0.156vw solid #3b6516; border-radius: 0.417vw;  margin-right: 1.1vw; transition: all 0.2s ease-in-out; }  
    .custom-checkbox input:checked + .checkmark {border: 0.156vw solid #3b6516; }
    .custom-checkbox input:checked + .checkmark::after {left: 0.5vw; top: 0.25vw; width: 0.35vw; height: 0.75vw; border-width: 0 3px 3px 0; }  
    .form_submit {margin-top: 0.911vw;}
    .form_submit .info {font-size: 0.781vw; line-height: 0.781vw; width: 25%; padding-top: 1.563vw;}
    .form_submit .button {width: 75%;}
    button[type="submit"] {font-size: 3.646vw; line-height: 4vw;}
    #formularz #btn_wyslij .kreska {width: 12.578vw; bottom: -1.5vw; right: 1.5vw;}

    .checkbox-group {width: 74.74vw; margin: 0 auto; text-align: left;}
    .custom-checkbox {font-size: 2.344vw; line-height: 2.749vw; margin-top: 2.865vw;}
    .custom-checkbox .checkmark {width: 4.297vw; height: 4.138vw; border: 0.521vw solid #3b6516; border-radius: 1.042vw;}

    .form_submit {display: block; margin-top: 3.906vw;}
    .form_submit .info {font-size: 1.77vw; line-height: 1.77vw; width: 100%;}
    .form_submit .button {margin-top: 0vw; width: 100%; text-align: center;}

    button[type="submit"] {font-size: 7.161vw; line-height: 8vw;}
    #formularz #btn_wyslij .kreska {width: 28.516vw; bottom: -3vw; right: 1.5vw;}

    #footer {height: auto; background-color: #e8e8e8; margin-top: -42vw; padding-top: 25vw; background-image: url('/wp-content/uploads/2025/06/footer_bg.jpg'); background-repeat: no-repeat;}
    #footer .menu {flex-direction: column; align-items: center; padding-bottom: 12.37vw; padding-right: 0px;}
    #footer .menu a {font-size: 3.125vw; margin-top: 2.557vw;}
    #msg_ok { width: 100vw; }
    #footer .logo_bakoma img { width: 22.917vw; }
    #footer .logo_bakoma { position: relative; width: 100%; text-align: center; display: block; left: 0px; top: 5.859vw; margin-bottom: 4.557vw; }

    #msg_container { font-size: 4.898vw; line-height: 6.898vw;}
    #msg_container strong { font-size: 6.783vw; line-height: 8.783vw; }
    #msg_container .kreska {position: absolute; width: 34.167vw; bottom: -6vw; right: 17.5vw;}
    #msg_container .logo {width: 35.807vw; margin-top: 12.813vw;}
}