/*@import url('fonts/InkBandits.css');*/
@import url('root.css');

ul,ol,p { font-family: "Open Sans"; line-height: 1.4em; }

h1,h2,h3,h4,nav,
.comic-sans {
    font-family: var(--font-name); font-weight: 700;
}

nav ul { font-family: var(--font-name); }

.sf-menu ul {
    list-style: none; margin: 0; padding: 0; display: flex;
    justify-content: center;
}
.sf-menu ul > li { margin-bottom: 0; }
.sf-menu ul > li > a {
    display: block; padding: 20px; text-decoration: none;
    font-size: 26px; line-height: 1.1em; text-transform: uppercase; color: var(--color-white);
}

.sf-konkurs-menu-container h1 a span,
.sf-konkurs-menu ul > li > a,
.sf-menu ul > li > a {
    transition: all 200ms;
    transition-delay: 50ms;
    transform-origin: bottom center;
}

.sf-konkurs-menu-container h1 a span:hover,
.sf-konkurs-menu ul > li > a:hover,
.sf-menu ul > li > a:hover {
    transition: all 300ms;
    transition-delay: 50ms;
    transform-origin: bottom center;
}


.sf-konkurs-menu ul > li > a,
.sf-menu ul > li > a {
    transform: scale(1);
}

/*
.sf-konkurs-menu ul > li > a:hover,
.sf-menu ul > li > a:hover {
    transform: scale(1.2);
    color: black;
}
*/

.sf-menu-switcher {
    transition: all 200ms;
    transition-delay: 50ms;
    transform-origin: bottom center;
    transform: scale(1);
}

.sf-menu-switcher:hover {
    transition: all 300ms;
    transition-delay: 50ms;
    transform-origin: bottom center;
    transform: scale(1.2);
    color: #fffAbb;
}

.aplikacja-wrapper .nawigacja.next a,
.aplikacja-wrapper .nawigacja.prev a,
.powrot-do-galerii a{
    transition: all 200ms;
    transition-delay: 50ms;
    transform-origin: bottom center;
    transform: scale(1);
}

.aplikacja-wrapper .nawigacja.next a:hover,
.aplikacja-wrapper .nawigacja.prev a:hover,
.powrot-do-galerii a:hover {
    transition: all 300ms;
    transition-delay: 50ms;
    transform-origin: bottom center;
    transform: scale(1.2);
    background-color: #fffAbb;
}

#szukaj {
    transition: all 200ms;
    transition-delay: 50ms;
    transform-origin: bottom center;
    transform: scale(1);
}

#szukaj:hover {
    transition: all 300ms;
    transition-delay: 50ms;
    transform-origin: bottom center;
    transform: scale(1.2);
}
#szukaj:hover svg .cls-1 {
    transition: all 300ms;
    transition-delay: 50ms;
    fill:#000000;
}

.sf-konkurs-menu-container h1 a span:hover {
    color: black;
}

.sf-menu-container {
    background-image: url('../img/menu-wstega.webp'); background-repeat: no-repeat;
    background-position: 50% 50%; background-size: contain;
    padding-top: 30px; padding-bottom: 70px; padding-left: 0; padding-right: 0;
    max-width: 890px; margin-left: auto; margin-right: auto;

}
.logo-container { text-align: center; position: relative; z-index: 30; }
.kay-art-postacie img { width: 100%; }
.kay-art-kwiaty {
    max-width: 1980px; margin: auto; margin-top: -90px;
    position: relative; z-index: 10;
}
.kay-art-kwiaty img { width: 100%; }

.hero.kay-art {
    background-image: url('../img/tlo-przyroda.jpg'); background-position: bottom center;
    background-repeat: no-repeat; background-size: cover;
    position: relative;
}

.sf-konkurs-menu-container {
    background-image: url('../img/menu-konkurs-wstega.png'); background-repeat: no-repeat;
    background-position: 50% -20px; background-size: contain;
    padding: 170px 0; margin-top: -110px; position: relative;
    padding-top: 70px; z-index: 20;
}
.sf-konkurs-menu-container h1 {
    position: relative; text-align: center;
    font-size: 46px; line-height: 1.1em; text-transform: uppercase;
    -webkit-text-stroke: 12px #e0ebac;
    text-stroke: 12px #e0ebac; margin-bottom: 10px;
    margin-top: -40px;
}
.sf-konkurs-menu-container h1 a {
    text-decoration: none;
}
.sf-konkurs-menu-container h1 .back {


}
.sf-konkurs-menu-container h1 .front {
    display: block; position: absolute; width: 100%; height: 100%;
    top: 0; left: 0; font-size: inherit; line-height: inherit; text-transform: inherit;
    color: var(--color-zielony); z-index: 10;
    -webkit-text-stroke: 1px;
    text-stroke: 1px;
}
.sf-konkurs-menu ul {
    list-style: none; margin: 0; padding: 0; display: flex; justify-content: center;
}
.sf-konkurs-menu ul > li > a {
    display: block; padding: 0 10px; text-decoration: none;
    font-size: 20px; line-height: 1.1em; text-transform: uppercase; color: var(--color-zielony);
}

.sf-konkurs.zasady {
    background-image: url("../img/patern01.jpg?1"); background-position: 50% 50%;
    padding-bottom: 0.2px; position: relative;
}
.sf-konkurs.zasady h2 { font-size: 50px; line-height: 1.1em; color: var(--color-zielony); }

img.hr {
    display: block;  width: 100%; margin: auto; margin-top: var(--global-margin);
    margin-bottom: calc(var(--global-margin) * 2);
}

.sf-sekcja-nagrody {
    padding-top: calc(var(--global-margin) * 2);
    padding-bottom: calc(var(--global-margin) * 2);
    background-color: #ffe5c2;
}

.sf-sekcja-nagrody .opis {
    margin-top: calc(var(--global-margin) * 4);
}
.sf-sekcja-nagrody .opis:nth-child(2) {
    margin-top: calc(var(--global-margin) * 0);
}

.sekcja-regulamin h2,
.sf-sekcja-nagrody h2 {
    font-size: 50px; color: #99562d;
}

.sf-nagroda-img {
    width: 50%; margin-right: calc(var(--global-margin) * 2);
    float: left; position: relative;
}
.sf-nagroda-img .ile {
    position: absolute; bottom: 0; right: 0;
    font-size: 100px; line-height: 1em; font-weight: 900;
}
.sf-nagroda-img .ile .back{
    -webkit-text-stroke: 24px #99562d;
    text-stroke: 24px #99562d;
}
.sf-nagroda-img .ile .front {
    position: absolute; right: 0;
    color: var(--color-white);
}

.sf-footer-plot {
    margin-top: calc(var(--global-margin) * 2);
    width: 100%; height: 310px;
    background-image: url("../img/footer-plot.png"); background-size: contain;
    background-position: 50% 50%; background-repeat: no-repeat;
    background-position: bottom center;
}
.sekcja-regulamin {
    background-color: #ffe5c2; padding-bottom: 0.2px;
}
footer {
    background-color: #ffe5c2; padding-top: 0.2px;
}
footer .legal {
    text-align: center; background-color: #cfe08f; font-size: small; padding: var(--global-margin);
}

.sf-wez-udzial .kay-art-postacie {
    display: none;
}

.sf-wez-udzial .logo-container {
    padding-top: calc(var(--global-margin) * 2);
    margin-bottom: calc(var(--global-margin) * 4);
}
.sf-wez-udzial .sf-menu-container {
    display: none;
}

.sf-wez-udzial  .kay-art-kwiaty {
    margin-top: -160px;
}

.sf-wez-udzial  .sf-konkurs.zasady {
    margin-top: calc(var(--global-margin) * -3);
}

.aplikacja-wrapper { padding-bottom: 56%; margin-bottom: calc(var(--global-margin) * 3); position: relative; }
.aplikacja-wrapper .aplikacja { position: absolute; width: 100%; height: 100%; background-color: transparent; }
.aplikacja-wrapper .aplikacja.praca img {
    width: 100%; height: 100%; object-fit: contain;
}

.praca-uczestnika .aplikacja-wrapper {
    margin-bottom: 0;
}

.praca-uczestnika .label {

    text-transform: capitalize;
    margin-top: -1em;
    padding: 0.8em 1em;
    padding-right: 1em;
    background-image: url("../img/prace-label.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    float: right;
    width: 70%;
    max-width: 400px;
    color: white;
    text-align: right;
    font-size: 26px;
    padding-right: 32px;
    margin-right: -30px;

}

.praca-uczestnika .label span {text-transform: none}
.aplikacja-wrapper .nawigacja {
    position: absolute; width: 70px; height: 70px;
}

.aplikacja-wrapper .nawigacja.prev { left: -90px; top: calc(50% - 35px); }
.aplikacja-wrapper .nawigacja.next { right: -90px; top: calc(50% - 35px); }
.aplikacja-wrapper .nawigacja.next a,
.aplikacja-wrapper .nawigacja.prev a {
    display: block; width: 70px; height: 70px; border-radius: 35px;
    background-color: #DA455C; font-size: 2px; text-align: center; color: transparent;
    background-repeat: no-repeat; background-position: 50% 50%; background-size: 38px;
}

.aplikacja-wrapper .nawigacja.next a {
    background-image: url("../img/nav/strzalka.svg");
}

.aplikacja-wrapper .nawigacja.prev a {
    background-image: url("../img/nav/strzalka-prev.svg");
}

.praca-uczestnika  .sf-konkurs.zasady.rysunek-wrapper {
    padding-bottom: calc(var(--global-margin) * 5);
}

.powrot-do-galerii {
    position: absolute;
    z-index: 30;
    width: 70px;
    height: 70px;
    left: -90px; top: -90px;
}

.powrot-do-galerii a {
    display: block; width: 70px; height: 70px;
    border-radius: 35px; background-color: #DA455C;
    font-size: 2px; text-align: center; color: transparent;
    background-image: url("../img/ico-galeria.svg"); background-repeat: no-repeat;
    background-position: 50% 50%; background-size: 38px;
}

.sf-mobile-menu {
    position: absolute;
    top: var(--global-margin);
    right: var(--global-margin);
    width: 70px; height: 70px; font-size: 38px;
    display: none;
}

.sf-wez-udzial .sf-mobile-menu {
    display: block;
}

.sf-menu-switcher {
    height: 70px; width: 70px; text-align: center; color: var(--color-white);
    line-height: 70px; border-radius: 35px; background-color: #DA455C;
    cursor: pointer;
}

.sf-off-canvas {
    height: 100%;
    width: 100vw;
    position: fixed;
    z-index: 100;
    top: 0;
    right: -100vw;
    background-color: rgba(0,0,0,0.4);
    overflow-x: hidden;
    transition: 0.5s;
}

.sf-off-canvas .sf-menu-mobile {
    padding: calc(var(--global-margin) * 1);
    height: 100%;
    width: 50%;
    background-color: #DA455C; float: right;
    max-width: 400px;
}
.sf-close {
    text-align: right;
    font-size: 100px; line-height: 0.1em;
}
.sf-close a {
    color: black;
    text-decoration: none;
}
.sf-close a:hover {
    color: #fffAbb;
}

.sf-navbar-mobile ul { list-style: none; margin: 0; padding: 0; }
.sf-navbar-mobile ul a { text-decoration: none; color: var(--color-white); text-transform: uppercase; }
.sf-navbar-mobile ul a:hover { color: #fffAbb; }

.sf-konkurs.wasze-prace {
    background-image: url("../img/patern01.jpg?1"); background-position: 50% 10%;
    padding-bottom: 0.2px;
}

.sf-konkurs.wasze-prace h2 {
    font-size: 50px; color: var(--color-zielony);
}

.sf-zestawienie-prac {
    background-color: #ffe5c2; padding-top: calc(var(--global-margin) * 2);
    padding-bottom: 0.2px;
}


@media only screen and (max-width: 320px) {
    .prace-wrapper > ul > li.item .label { max-width: 250px; }
}

.sf-wez-udzial .sf-konkurs-menu-container {
    margin-top: -120px;
}

/* galeria */

.sf-galeria .prace-wrapper { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.sf-galeria .prace-wrapper > li { display: block; width: 50%; box-sizing: border-box; padding: 3em; margin-bottom: 0; }
.sf-galeria .prace-wrapper > li > a { display: block; position: relative; }
.sf-galeria .prace-wrapper > li > a .img { min-height: 340px; background-position: 50% 50%; background-size: cover;
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.sf-galeria .prace-wrapper > li > a .img .zobacz {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}



.sf-galeria .prace-wrapper > li > a .img .zobacz {
    background-image: url("../img/nav/strzalka.svg");
    width: 50px; height: 80px; position: relative; z-index: 10; background-repeat: no-repeat;
    background-position: 50% 50%; background-size: contain;
    opacity: 0;
    filter: drop-shadow(3px 3px 1px rgba(0,0,0,0.7));
}
.sf-galeria .prace-wrapper > li > a:hover .img .zobacz {
    opacity: 1;
}

.sf-galeria .prace-wrapper > li > a .img::after,
.sf-galeria .prace-wrapper > li > a:hover .img::after{
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;

    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.sf-galeria .prace-wrapper > li > a .img::after {
    display: block; background-color: #facd93;
    position: absolute; content: ""; width: 10px; height: 10px; border-radius: 100%;
    left: 0px; top: 0px; opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.sf-galeria .prace-wrapper > li > a:hover .img::after {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(125);
}

.sf-galeria .prace-wrapper > li > a .label {
    margin-top: -1em; padding: 0.8em 1em; background-image: url("../img/prace-label.svg");
    background-repeat: no-repeat; background-size: 100% 100%; position: relative;
    float: right; width: 70%; max-width: 400px; color: white; text-align: right; font-size: 26px;
    padding-right: 32px; margin-right: -30px;
}



.sf-galeria .prace-wrapper > li > a .label > span { font-size: 22px; }

.praca-wrapper .praca .logo-princess-adventures-wrapper { position: absolute; top: -60px; left: -50px; }
.praca-wrapper .praca .logo-princess-adventures-wrapper > img { width: 200px; }

#wiek {
    background-color: #f9d0c8;
    padding: 7px 20px;
    border: 3px solid #cf0037;
    border-radius: 7px; height: 100%;
}
#imie {
    height: 100%; border-radius: 7px;
    border: solid 3px #cf0037;
    background-color: #f9d0c8;
}
#szukaj {
    padding: 7px 5px; display: flex; height: 100%; border: none;
    background-color: transparent; border-radius: 7px; cursor: pointer;
}
#szukaj svg { height: 100%; }
#szukaj svg .cls-1 { fill: #cf0037; }

.formularz-szukaj .row { justify-content: center; }

.formularz-szukaj .row div[class^="col-"] {
    margin: 0 calc(var(--global-margin) * 0.3);
}
.pager {
    margin-top: var(--global-margin);
    display: flex; justify-content: center; align-items: center;
}
.pager span {
    margin: 0 calc(var(--global-margin) * 0.3);
}
.pager select {
    padding: 7px 20px; border-radius: 7px; border: solid 3px #cf0037; background-color: #f9d0c8;
}

/* galeria */

/* responsywnosc */

@media (max-width: 1400px) {
    .sf-konkurs-menu-container { margin-top: -90px; }
}

@media (max-width: 1220px) {
    .sf-konkurs-menu-container { margin-top: -70px; padding-top: 20px;  }
    .kay-art-kwiaty { margin-top: -60px; }
    .sf-konkurs-menu-container h1 { margin-top: 0; }

}

@media (max-width: 1180px) {
    .sf-menu ul > li > a { padding: 15px; font-size: 23px; }
    .sf-konkurs-menu ul > li > a:hover, .sf-menu ul > li > a:hover { transform: scale(1.15); }
}

@media (max-width: 1020px) {
    .logo-container > img { max-width: 340px; }
    .sf-menu-container { padding-bottom: 90px; }
}

@media (max-width: 990px) {
    .sf-menu ul > li > a { padding: 12px; font-size: 20px; }
}

@media (max-width: 900px) {
    .sf-mobile-menu { display: block; z-index: 100; }
    .hero.kay-art { padding-top: 0.2px; }
    .logo-container { margin-top: 30px; }
    .sf-konkurs-menu-container h1 { font-size: 36px; }
    .sf-konkurs.zasady h2 { font-size: 40px; }
    .sekcja-regulamin h2, .sf-sekcja-nagrody h2 { font-size: 40px; }
    .sf-nagroda-img .ile { font-size: 70px; }
    .sf-nagroda-img .ile .back { -webkit-text-stroke: 20px #99562d; }
    .sf-konkurs-menu-container { margin-top: -50px; padding-top: 0; background-position: 50% -40px; }
    .sf-footer-plot { height: 230px; }
}

@media (max-width: 760px) {
    .sf-konkurs-menu-container {
        margin-left: -100px;
        margin-right: -100px;
        width: calc(100% + 200px); max-width: unset;
        padding-bottom: 180px;
        margin-top: -40px;
    }
    .sf-konkurs-menu ul > li > a {
        font-size: 17px;
    }
    .sf-konkurs-menu-container h1 {
        font-size: 26px;
    }
    .kay-art-kwiaty { margin-top: -30px; }

}

@media (max-width: 620px) {
    .logo-container > img { max-width: 280px; }
    .sekcja-zasady { margin-top: -60px; }
    .sf-konkurs.zasady h2 { font-size: 32px; }
    .sekcja-regulamin h2, .sf-sekcja-nagrody h2 { font-size: 32px; }
    .sf-footer-plot { height: 190px; }
    .sf-nagroda-img .ile { font-size: 50px; }
    .sf-nagroda-img .ile .back { -webkit-text-stroke: 16px #99562d; }
}

@media (max-width: 540px) {
    .sf-konkurs-menu-container {
        padding-bottom: 150px;
    }
}

@media (max-width: 500px) {
    .sf-konkurs-menu-container {
        padding-bottom: 140px;
    }
    .kay-art-kwiaty {
        margin-top: -20px;
    }
    .sf-konkurs-menu-container {
        margin-top: -20px;
    }

    .sf-nagroda-img {
        width: 100%; float: none; margin: auto; max-width: 340px;
    }

    .sf-sekcja-nagrody .opis {
        margin-top: calc(var(--global-margin) * 3);
    }
    .sf-footer-plot { height: 170px; }

    .sf-mobile-menu { width: 50px; height: 50px; font-size: 28px; }
    .sf-menu-switcher { width: 50px; height: 50px; line-height: 50px; }
    .logo-container > img { max-width: 230px; }
}

@media (max-width: 460px) {
    .sf-konkurs-menu-container {
        padding-bottom: 120px;
        background-position: 50% -30px;
    }
    .sf-konkurs-menu-container h1 { margin-bottom: 5px; }
    .sf-konkurs-menu ul > li > a { font-size: 15px; }
    .sf-konkurs-menu-container h1 { font-size: 21px; }

}

@media (max-width: 420px) {
    .sf-nagroda-img { max-width: 240px; }
    .sf-footer-plot { height: 120px; }
}

@media (max-width: 400px) {
    .logo-container > img { max-width: 200px; }
    .sekcja-regulamin h2, .sf-sekcja-nagrody h2,
    .sf-konkurs.zasady h2 { font-size: 26px; }
}

@media (max-width: 360px) {
    .sf-mobile-menu { top: 15px; right: 15px; }
    .sf-sekcja-nagrody {
        padding-top: calc(var(--global-margin) * 1);
        padding-bottom: calc(var(--global-margin) * 1);
    }
}


.tmp { border: solid 1px #00FF00; box-sizing: border-box; }
.clr { clear: both; width: 100%; height: 0; }