:root {
    --color-primary: #00ade1;
    --color-secondary: #8cc689;
    --color-teritary: #f9e0ca;
    --color-quaternary: #e4e094;
}



.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.col {
    flex: 1 0 0%;
}

.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto;
}

.row-cols-1 > * {
    flex: 0 0 auto;
    width: 100%;
}

.row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%;
}

.row-cols-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.row-cols-4 > * {
    flex: 0 0 auto;
    width: 25%;
}

.row-cols-5 > * {
    flex: 0 0 auto;
    width: 20%;
}

.row-cols-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.offset-1 {
    margin-left: 8.33333333%;
}

.offset-2 {
    margin-left: 16.66666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.33333333%;
}

.offset-5 {
    margin-left: 41.66666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.33333333%;
}

.offset-8 {
    margin-left: 66.66666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.33333333%;
}

.offset-11 {
    margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
    --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
    --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
    --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
    --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
    --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
    --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
    --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
    --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
    --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
    --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
    --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
    --bs-gutter-y: 3rem;
}

@media screen and (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }
    .row-cols-sm-auto > * {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-sm-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }
    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    .row-cols-sm-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
    .row-cols-sm-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-sm-0 {
        margin-left: 0;
    }
    .offset-sm-1 {
        margin-left: 8.33333333%;
    }
    .offset-sm-2 {
        margin-left: 16.66666667%;
    }
    .offset-sm-3 {
        margin-left: 25%;
    }
    .offset-sm-4 {
        margin-left: 33.33333333%;
    }
    .offset-sm-5 {
        margin-left: 41.66666667%;
    }
    .offset-sm-6 {
        margin-left: 50%;
    }
    .offset-sm-7 {
        margin-left: 58.33333333%;
    }
    .offset-sm-8 {
        margin-left: 66.66666667%;
    }
    .offset-sm-9 {
        margin-left: 75%;
    }
    .offset-sm-10 {
        margin-left: 83.33333333%;
    }
    .offset-sm-11 {
        margin-left: 91.66666667%;
    }
    .g-sm-0,
    .gx-sm-0 {
        --bs-gutter-x: 0;
    }
    .g-sm-0,
    .gy-sm-0 {
        --bs-gutter-y: 0;
    }
    .g-sm-1,
    .gx-sm-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-sm-1,
    .gy-sm-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-sm-2,
    .gx-sm-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-sm-2,
    .gy-sm-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-sm-3,
    .gx-sm-3 {
        --bs-gutter-x: 1rem;
    }
    .g-sm-3,
    .gy-sm-3 {
        --bs-gutter-y: 1rem;
    }
    .g-sm-4,
    .gx-sm-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-sm-4,
    .gy-sm-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-sm-5,
    .gx-sm-5 {
        --bs-gutter-x: 3rem;
    }
    .g-sm-5,
    .gy-sm-5 {
        --bs-gutter-y: 3rem;
    }
}
@media screen and (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }
    .row-cols-md-auto > * {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-md-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }
    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    .row-cols-md-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
    .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-md-0 {
        margin-left: 0;
    }
    .offset-md-1 {
        margin-left: 8.33333333%;
    }
    .offset-md-2 {
        margin-left: 16.66666667%;
    }
    .offset-md-3 {
        margin-left: 25%;
    }
    .offset-md-4 {
        margin-left: 33.33333333%;
    }
    .offset-md-5 {
        margin-left: 41.66666667%;
    }
    .offset-md-6 {
        margin-left: 50%;
    }
    .offset-md-7 {
        margin-left: 58.33333333%;
    }
    .offset-md-8 {
        margin-left: 66.66666667%;
    }
    .offset-md-9 {
        margin-left: 75%;
    }
    .offset-md-10 {
        margin-left: 83.33333333%;
    }
    .offset-md-11 {
        margin-left: 91.66666667%;
    }
    .g-md-0,
    .gx-md-0 {
        --bs-gutter-x: 0;
    }
    .g-md-0,
    .gy-md-0 {
        --bs-gutter-y: 0;
    }
    .g-md-1,
    .gx-md-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-md-1,
    .gy-md-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-md-2,
    .gx-md-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-md-2,
    .gy-md-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-md-3,
    .gx-md-3 {
        --bs-gutter-x: 1rem;
    }
    .g-md-3,
    .gy-md-3 {
        --bs-gutter-y: 1rem;
    }
    .g-md-4,
    .gx-md-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-md-4,
    .gy-md-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-md-5,
    .gx-md-5 {
        --bs-gutter-x: 3rem;
    }
    .g-md-5,
    .gy-md-5 {
        --bs-gutter-y: 3rem;
    }
}
@media screen and (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
    }
    .row-cols-lg-auto > * {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-lg-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }
    .row-cols-lg-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    .row-cols-lg-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
    .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-lg-0 {
        margin-left: 0;
    }
    .offset-lg-1 {
        margin-left: 8.33333333%;
    }
    .offset-lg-2 {
        margin-left: 16.66666667%;
    }
    .offset-lg-3 {
        margin-left: 25%;
    }
    .offset-lg-4 {
        margin-left: 33.33333333%;
    }
    .offset-lg-5 {
        margin-left: 41.66666667%;
    }
    .offset-lg-6 {
        margin-left: 50%;
    }
    .offset-lg-7 {
        margin-left: 58.33333333%;
    }
    .offset-lg-8 {
        margin-left: 66.66666667%;
    }
    .offset-lg-9 {
        margin-left: 75%;
    }
    .offset-lg-10 {
        margin-left: 83.33333333%;
    }
    .offset-lg-11 {
        margin-left: 91.66666667%;
    }
    .g-lg-0,
    .gx-lg-0 {
        --bs-gutter-x: 0;
    }
    .g-lg-0,
    .gy-lg-0 {
        --bs-gutter-y: 0;
    }
    .g-lg-1,
    .gx-lg-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-lg-1,
    .gy-lg-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-lg-2,
    .gx-lg-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-lg-2,
    .gy-lg-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-lg-3,
    .gx-lg-3 {
        --bs-gutter-x: 1rem;
    }
    .g-lg-3,
    .gy-lg-3 {
        --bs-gutter-y: 1rem;
    }
    .g-lg-4,
    .gx-lg-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-lg-4,
    .gy-lg-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-lg-5,
    .gx-lg-5 {
        --bs-gutter-x: 3rem;
    }
    .g-lg-5,
    .gy-lg-5 {
        --bs-gutter-y: 3rem;
    }
}
@media screen and (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
    }
    .row-cols-xl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-xl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }
    .row-cols-xl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .row-cols-xl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .row-cols-xl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
    .row-cols-xl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xl-0 {
        margin-left: 0;
    }
    .offset-xl-1 {
        margin-left: 8.33333333%;
    }
    .offset-xl-2 {
        margin-left: 16.66666667%;
    }
    .offset-xl-3 {
        margin-left: 25%;
    }
    .offset-xl-4 {
        margin-left: 33.33333333%;
    }
    .offset-xl-5 {
        margin-left: 41.66666667%;
    }
    .offset-xl-6 {
        margin-left: 50%;
    }
    .offset-xl-7 {
        margin-left: 58.33333333%;
    }
    .offset-xl-8 {
        margin-left: 66.66666667%;
    }
    .offset-xl-9 {
        margin-left: 75%;
    }
    .offset-xl-10 {
        margin-left: 83.33333333%;
    }
    .offset-xl-11 {
        margin-left: 91.66666667%;
    }
    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x: 0;
    }
    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y: 0;
    }
    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x: 1rem;
    }
    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y: 1rem;
    }
    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x: 3rem;
    }
    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y: 3rem;
    }
}
@media screen and (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0%;
    }
    .row-cols-xxl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-xxl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }
    .row-cols-xxl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .row-cols-xxl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .row-cols-xxl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    .row-cols-xxl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
    .row-cols-xxl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xxl-0 {
        margin-left: 0;
    }
    .offset-xxl-1 {
        margin-left: 8.33333333%;
    }
    .offset-xxl-2 {
        margin-left: 16.66666667%;
    }
    .offset-xxl-3 {
        margin-left: 25%;
    }
    .offset-xxl-4 {
        margin-left: 33.33333333%;
    }
    .offset-xxl-5 {
        margin-left: 41.66666667%;
    }
    .offset-xxl-6 {
        margin-left: 50%;
    }
    .offset-xxl-7 {
        margin-left: 58.33333333%;
    }
    .offset-xxl-8 {
        margin-left: 66.66666667%;
    }
    .offset-xxl-9 {
        margin-left: 75%;
    }
    .offset-xxl-10 {
        margin-left: 83.33333333%;
    }
    .offset-xxl-11 {
        margin-left: 91.66666667%;
    }
    .g-xxl-0,
    .gx-xxl-0 {
        --bs-gutter-x: 0;
    }
    .g-xxl-0,
    .gy-xxl-0 {
        --bs-gutter-y: 0;
    }
    .g-xxl-1,
    .gx-xxl-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-xxl-1,
    .gy-xxl-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-xxl-2,
    .gx-xxl-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-xxl-2,
    .gy-xxl-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-xxl-3,
    .gx-xxl-3 {
        --bs-gutter-x: 1rem;
    }
    .g-xxl-3,
    .gy-xxl-3 {
        --bs-gutter-y: 1rem;
    }
    .g-xxl-4,
    .gx-xxl-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-xxl-4,
    .gy-xxl-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-xxl-5,
    .gx-xxl-5 {
        --bs-gutter-x: 3rem;
    }
    .g-xxl-5,
    .gy-xxl-5 {
        --bs-gutter-y: 3rem;
    }
}

@font-face {
    font-family: "OriginalSurfer";
    src: url("/webfonts/OriginalSurfer-Regular.ttf");
}

* {
    box-sizing: border-box;
    margin: 0;
    font-family: "OriginalSurfer";
}



.footer-content .logo img {
    max-width: 300px;
}

@font-face {
    font-family: Fredoka;
    src: url(./FredokaOne-Regular.ttf);
}

.game {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.controls {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

button {
    color: #FFF;
    border-radius: 5px;
    padding: 10px 20px;
    border: 0;
    cursor: pointer;
    font-size: 18pt;
}

.disabled {
    color: #757575;
}

.stats {
    color: #FFF;
    font-size: 14pt;
}

.board-container {
    position: relative;
}

.board,
.win {
    border-radius: 5px;

    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}

.board {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px;
}

.board-container.flipped .board {
    transform: rotateY(180deg) rotateZ(50deg);
}

.board-container.flipped .win {
    transform: rotateY(0) rotateZ(0);
}

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/images/zabava/spomin/tile.png");
    background-size: cover;
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg) rotateZ(50deg);
    font-size: 28pt;
    user-select: none;
    text-align: center;
    line-height: 100px;
}

.card.flipped .card-front {
    transform: rotateY(180deg) rotateZ(50deg);
}

.card.flipped .card-back {
    transform: rotateY(0) rotateZ(0);
}

.win {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #FDF8E6;
    transform: rotateY(180deg) rotateZ(50deg);
}

.win-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 21pt;
    color: #282A3A;
}

.highlight {
    color: #6f00fc;
}












/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    color: black;
    cursor: pointer;
    padding: 5px 18px;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--color-primary);
    border-radius: 0;
    background: white;
    outline: none;
    transition: 0.4s;
}

.accordion > i {
    margin-right: 10px;
    color: #f7931e;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}






.orange {
    color: #f7931e;
}









ul {
    margin-bottom: 0;
}

.relative {
    position: relative;
}

.w-100 {
    width: 100%;
}

body {
    font-size: 20px;
}

img {
    max-width: 100%;
}

.gap-5p {
    gap: 5px;
}

.mr-10p {
    margin-right: 10px;
}

.ml-10p {
    margin-left: 10px;
}

.top-menu {
    background: var(--color-primary);
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

.logo-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 30;
}

.main-menu {
    margin-top: -5%;
}

.main-menu .menu-list {
    background: var(--color-primary);
    color: white;
    list-style: none;
    gap: 50px;
    font-size: 23px;
}

.upper-wave {
    margin-bottom: -1px;
}

.lower-wave {
    margin-top: -1px;
}

.varuh-vode {
    position: relative;
    z-index: 6;
}

.varuh-vode .section-title > div {
    background: var(--color-secondary);
    padding-bottom: 20px;
}

.varuh-vode .section-title h2 {
    z-index: 6;
    position: relative;
}

.varuh-vode .section-title .upper-wave path,
.varuh-vode .section-title .lower-wave path {
    fill: var(--color-secondary);
}

.text-center {
    text-align: center;
}

.varuh-vode .rozice-1,
.varuh-vode .rozice-2 {
    position: absolute;
    width: 120px;
}

.varuh-vode .rozice-1 {
    left: 15px;
    top: calc(-100% - 10px);
}

.varuh-vode .rozice-2 {
    right: 15px;
    top: calc(-100% - 10px);
}

.kapko-intro {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
}

.kapko-intro .kapko {
    max-width: 200px;
}

.kapko-intro .kapko-container {
    position: relative;
    z-index: 5;
    padding-right: 30px;
}


/*.top.speech::after {
    border-bottom-color: #a53d38;
    border-top: 0;
    top: -20px; left: 50%;
    margin-left: -20px;
  }
  */
.kapko-intro-bubble::after {
    content: "";
    bottom: 20px;
    left: -35px;
    position: absolute;
    content: "";
    border: 20px solid transparent;
    border-right-color: var(--color-primary);
}

.kapko-intro-bubble {
    font-size: 20px;
    font-weight: 100 !important;
    background-color: var(--color-primary);
    color: white;
    position: relative;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 120px;
    height: max-content;
}

.container {
    max-width: 1000px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.varuhi .single-varuh .single-varuh-title {
    text-align: center;
}

.varuh-vode .section-title {
    margin-bottom: -5%;
}

.intersect-title {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    position: relative;
    border: 2px solid black;
    border-radius: 15px;
    z-index: 5;
    background-color: white;
    min-height: 120px;
    display: flex;
    align-items: center;
}

.intersect-text {
    padding: 10px 0
}

.intersect-title img {
    max-width: 100px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dnevna-kapko {
    position: absolute;
    left: 30%;
    top: 65%;
    transform: translate(-50%, -50%);
    max-width: 25%;
}

.dnevna-tv {
    position: absolute;
    right: 10%;
    top: 58%;
    transform: translate(0, -50%);
    max-width: 40%;
}

.intersect-content {
    position: relative;
}

.spremeni-svet .intersect-title {
    margin-bottom: -60px;
    margin-top: 50px;
}

.raziskuj .intersect-title {
    margin-top: -70px;
    margin-bottom: -65px;
}

.kapko-palcka {
    position: absolute;
    right: 15%;
    top: 35%;
    width: 40%;
}

.raziskuj .ucilnica .kapko-btn {
    position: absolute;
    left: 25%;
    bottom: 20%;
}

.kapko-btn {
    background-color: var(--color-primary);
    color: white;
    padding: 15px 35px;
    border-radius: 15px;
    font-size: 25px;
    text-decoration: none;
    border: none;
}



.intersect-content.klovn {
    min-height: 45vw;
    display: flex;
    align-items: end;
}

.klovn-wave {
    position: absolute;
    top: 1px;
    transform: translateY(-100%);
}

.klovn-wave path {
    fill: white;
}

.kapko-klovn {
    position: absolute;
    left: 10%;
    bottom: 13%;
    width: 30%;
}

.raziskuj .karte,
.raziskuj .rozice-1,
.raziskuj .rozice-2,
.raziskuj .vial {
    position: absolute;
}


.raziskuj .karte {
    bottom: 15%;
    max-width: 13%;
    left: 35%;
}

.raziskuj .rozice-1 {
    bottom: 5%;
    max-width: 13%;
    left: 2%;
}

.raziskuj .rozice-2 {
    bottom: 5%;
    max-width: 13%;
    right: 2%;
}

.raziskuj .vial {
    bottom: 15%;
    max-width: 13%;
    left: 50%;
}

.klovn .kapko-btn {
    top: 25%;
    right: 25%;
    position: absolute;
}

.starsi-in-ucitelji {
    background-color: var(--color-teritary);
    padding: 50px 15px;
}


.starsi-in-ucitelji .section-title {
    text-align: center;
    margin-bottom: 15px;
}

.starsi-in-ucitelji .testimonial-slider {
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.starsi-in-ucitelji .testimonial-slider .testimonial-card-container {
    flex: 0 0 33.33%;
    width: 33.33%;
    padding: 0 15px;
}

.starsi-in-ucitelji .testimonial-slider .testimonial-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: white;
    border-radius: 15px;
    padding: 50px 15px 30px;
    position: relative;
    height: 100%;
}

.starsi-in-ucitelji .quotes {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80px;
}


.testimonial-card .testimonial-content {
    margin-bottom: 20px;
    flex: 1;
}

.najmlajsi {
    background: url("/images/drawings/pobarvanke-bg.png");
    background-size: cover;
    text-align: center;
    padding: 50px 15px 160px;
    margin-bottom: -45px;
}

.najmlajsi .section-title {
    margin-bottom: 40px;
}


.dogodivscine .intersect-title {
    margin-bottom: -45px;
}

.dogodivscine .kapko-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
}


.to-the-top {
    position: fixed;
    bottom: 30px;
    right: 50px;
    max-width: 70px;
    z-index: 9;
}

footer {
    position: relative;
    background: var(--color-primary);
    padding: 30px 0;
}

footer .address,
footer a {
    color: #b9eaf9;
}

.footer-wave {
    position: absolute;
    top: 0;
    transform: translateY(-100%);
}

.footer-wave path,
.main-menu path {
    fill: var(--color-primary);
}

.footer-content {
    color: white;
    display: flex;
    flex-wrap: wrap;
}

footer .logo {
    flex: 0 0 100%;
    width: 100%;
}


footer ul {
    list-style: none;
}

footer ul a {
    text-decoration: none;
}

.footer-content > div {
    padding: 0 15px;
}

.revija {
    background: url(/images/revija-bg.png) center center;
    background-size: auto;
    min-height: 530px;
    background-size: cover;
}

.menu-list > li {
    position: relative;
}

.menu-list > li .submenu {
    list-style-type: none;
    position: absolute;
    left: 0;
    top: calc(100% - 3px);
    padding-top: 15px;
    padding: 10px;
    z-index: 555;
    background: white;
    border: 2px solid var(--color-primary);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: black;
    font-size: 20px;
}

.menu-list > li:not(:hover) .submenu {
    display: none;
}

.menu-list > li .submenu li a {
    text-decoration: none;
    color: black;
    width: max-content;
    display: block;
}

.menu-list > li .submenu li {
    width: 100%;
}

.menu-list > li .submenu li + li {
    border-top: 1px solid var(--color-primary);
    margin-top: 5px;
    padding-top: 5px;
}


.kapkova-nacela {
    padding: 100px 0;
}

.kapkova-nacela img {
    width: 100%;
    max-width: 100%;
}

.kapkova-opozorila {
    display: flex;
    flex-wrap: wrap;
    padding: 80px 0 90px;
}


.nasveti .intersect-title {
    margin-top: 50px;
    margin-bottom: 50px;
    min-height: 80px;
    display: flex;
    align-items: center;
}


.preseneti-starse > div,
.druzina > div {
    flex: 0 0 50%;
    width: 50%;
    padding: 0 15px;
}

.owl-nav {
    position: absolute;
    width: 100%;
}

.owl-prev {
    position: absolute;
    left: -35px;
    top: -50%;
    transform: translateY(calc(-50% - 30px));
    font-size: 75px !important;
}

.owl-next {
    position: absolute;
    right: -35px;
    top: -50%;
    transform: translateY(calc(-50% - 30px));
    font-size: 75px !important;
}

.owl-next:hover,
.owl-prev:hover {
    background: transparent !important;
    color: black !important;
}

.owl-next span,
.owl-prev span {
    color: var(--color-primary);
}


.pb-100p {
    padding-bottom: 100px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--color-primary);
}

.storis-sam img {
    max-width: 300px;
}

.relative {
    position: relative;
}

.z-5 {
    z-index: 5;
}

.mt--10p {
    margin-top: -10px;
}

.spremeni-svet-content {
    position: relative;
    bottom: 25px;
    margin-bottom: -20px;
}

.kako-me-vidijo-najmlajsi .drawing-card img {
    border-radius: 25px;
}

.kapkocasnik h3,
.kapkocasnik a {
    color: black;
    text-decoration: none;
}

.kapkocasnik i {
    color: var(--color-primary);
}

@media screen and (min-width: 575px) {
    .kapkocasnik img {
        max-height: 30vw;
    }
}


.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}

.telesna-teza {
    background: var(--color-primary);
    padding: 10px 20px 10px 10px;
    border-radius: 50px;
    max-width: max-content;
    color: white;
    font-size: 30px;
    margin-left: auto;
    margin-right: auto;
}


.telesna-teza label {
    display: flex;
}
.telesna-teza input {
    border: 0;
    border-radius: 50px;
    padding: 0 15px;
    outline: none !important;
    width: 90%;
    margin-right: 10px;
}

.kozarec-img {
    width: 50px;
    height: auto;
    font-family: var(--bs-body-font-family);
    font-size: 40px;
    text-align: center;
}

.mr-3 {
    margin-right: 1rem !important
}

.izracun span {
    font-weight: bolder;
}

.clovek-in-voda .section-title > div {
    background: var(--color-quaternary);
    padding-bottom: 30px;
}

.clovek-in-voda .upper-wave path,
.clovek-in-voda .lower-wave path {
    fill: var(--color-quaternary);
}

.clovek-bg {
    background: url(/images/raziskuj/clovek.svg) no-repeat center;
}

.clovek-in-voda .kapko-intro-bubble {
    background: white;
    color: black;
}


.extend-bg {
    background: var(--color-quaternary);
    min-height: 50px;
}

.kviz .no-text.kapko-intro .kapko {
    max-width: 500px;
}

.kapko-vprasanje h3 {
    color: #f15a24;
    font-size: 36px;
    text-align: center;
}

.kapko-vprasanje {
    display: flex;
    flex-direction: column;
}

.kapko-vprasanje .answers {
    font-size: 28px;
}

.orange-text {
    color: #f15a24;
    font-size: 40px;
}

.ni-uspelo .kapko-btn {
    max-width: max-content;
}

.uspelo h3,
.ni-uspelo h3 {
    text-align: center;
}

.kapko-btn:hover {
    color: white;
}

.has-error input {
    border-color: darkred;
}

.game-container {
    margin-top: 50px;
    margin-bottom: 100px;
}

.stats {
    background: var(--color-primary);
    padding: 0 15px;
    border-radius: 10px;
    width: 100%;
    text-align: center;
}

.card-back {
    line-height: unset;
}

.top-menu a {
    color: white;
    text-decoration: none;
}

.plr-15p {
    padding-left: 15px;
    padding-right: 15px;
}

.intersect-title-container {
    padding-left: 65px;
    padding-right: 25px;
    width: 100%;
}

.intersect-title {
    padding-right: 15px;
}

@media screen and (max-width: 991px) {
    .main-menu .menu-list {
        gap: 30px;
    }
}

@media screen and (max-width: 767px) {
    .spremeni-svet .intersect-title,
    .raziskuj .intersect-title,
    .dogodivscine .intersect-title {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.najmlajsi {
    padding-bottom: 80px;
}

.menu-item > span i {
    display: none;
}


@media screen and (min-width: 581px) {
    .clovek-in-voda .kapko-intro-bubble:after {
        border-right-color: white;
    }
}

@media screen and (max-width: 580px) {
    .kapko-intro {
        flex-direction: column;
        align-items: center;
    }

    .kapko-container {
        order: 1;
    }

    .kapko-intro-bubble {
        margin-bottom: 30px;
    }

    .kapko-intro-bubble::after {
        bottom: -35px;
        left: 45%;
        border: 20px solid transparent;
        border-top-color: var(--color-primary);
    }

    .white-bubble .kapko-intro-bubble::after {
        border-top-color: white;
    }

    .intersect-title img {
        left: 50%;
        top: 0;
    }

    .intersect-title {
        padding-left: 15px;
        padding-top: 40px;
        text-align: center;
        font-size: 18px;
    }

    .intersect-title-container {
        padding-left: 0;
        padding-right: 0;
        padding-top: 30px;
    }

    .kapko-btn {
        font-size: 20px;
        padding: 0 5px;
        border-radius: 5px;
    }

    .raziskuj .ucilnica .kapko-btn {
        left: 15%;
    }

    .klovn .kapko-btn {
        right: 5%;
    }

    .revija {
        min-height: 200px;
    }

    .to-the-top {
        max-width: 50px;
        z-index: 9;
    }

    body {
        font-size: 18px;
    }

    .top-menu {
        justify-content: center !important;
    }

    .kviz .no-text.kapko-intro .kapko {
        width: 100%;
    }

    .kapko-vprasanje h3 {
        font-size: 24px;
    }

    .kapko-vprasanje .answers {
        font-size: 16px;
    }
    .kapko-vprasanje .answers > *{
        margin-bottom: 15px;
    }


    .text-center-580 {
        text-align: center;
    }

    .uspelo h3, .ni-uspelo h3 {
        font-size: 20px;
    }

    .clovek-bg p {
        text-align: center;
    }

    .menu-list {
        flex-direction: column;
        align-items: center;
        gap: 10px !important;
    }

    .menu-list .menu-item {
        text-align: center;
    }

    .menu-list .menu-item.active ul {
        display: block !important;
        position: relative;

    }

    .menu-item li a {
        text-align: center;
    }

    .menu-item li {
        display: flex;
        justify-content: center;
    }

    .menu-item > span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .menu-item > span i {
        display: block;
    }
}

.top-menu {
    gap: 10px;
}

.footer-wave {
    z-index: 10;
}

@media screen and (max-width: 520px) {
    .game .card {
        width: 60px;
        height: 60px;
    }

    .win-text {
        font-size: 22px;
    }
}


.footer-menu ul,
.order-booklet ul {
    padding-left: 0;
}

.opozorilo span,
.opozorilo a {
    text-align: center;
    color: black;
    text-decoration: none;
}


.footer-content .logo img {
    width: 100%;
}

.text-center {
    text-align: center;
}


.game {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}


.single-varuh a {
    text-decoration: none;
    color: black;
}

.slider-item .desc {
    text-align: center;
    max-width: 500px;
}

.slider-item.item {
    text-align: center;
}

.nazaj a {
    font-size: 30px;
    text-decoration: none;
    color: black;
}

.tehtnica {
    max-width: 500px;
}

.gostota.section-title > div {
    background: #9cd7fa;
}

.gostota .upper-wave path {
    fill: #9cd7fa;
}

.poraba.section-title > div {
    background: #f8deca;
}

.poraba .upper-wave path {
    fill: #f8deca;
}

.pomanjkanje_vode.section-title > div {
    background: #8ac587;
    padding-top: 0 !important;
}

.pomanjkanje_vode .upper-wave path {
    fill: #e3de91;
}

.pomanjkanje_vode .desktop .kapko-intro-bubble {
    display: none;
}



.vsa_voda_na_zemlji.section-title > div {
    background: #8ac587;
}

.vsa_voda_na_zemlji .upper-wave path {
    fill: #8ac587;
}



@media screen and (min-width: 992px){
    .pomanjkanje_vode .kapko-intro-bubble {
        position: absolute;
        left: 38%;
        width: 50%;
        bottom: 38%;
        display: block !important;
    }
    .pomanjkanje_vode_mobile {
        display: none;
    }
}



.onesnazevanje img {
    width: 100%;
}


.menu-item a {
    text-decoration: none;
    color: white;
}