div.logo-name {
    font-family: "Teko", sans-serif;
    margin: 0;
}

div.logo-name p.logo-name-big {
    font-size: 200%;
    margin: 0;
}

div.logo-name p.logo-name-small {
    font-size: 126%;
    margin: 0;
}

.mobile-brand {
    display: none;
}

@media screen {
    .wysokosc-calosci {
        height: 650px;
    }

    .szerokosc-calosci {
        min-width: 800px;
        width: 100%;
    }

    #tlo {
        position: absolute;
        width: 100%;
        z-index: 0;
    }

    #slajdy {
        min-width: 800px;
        position: relative;
        z-index: 100;
    }

    .kontent {
        height: 550px;
    }

    .kontent-tlo {
        width: 500px;
        margin: 10px auto 0 auto;
    }

    .kontent-slajdy {
        width: 700px;
        margin: 20px auto 0 auto;
    }

    .carousel-indicators li {
        border: 1px solid green;
    }

    .carousel-indicators li button {
        width: 10px;
        height: 10px;
        padding: 0;
        border: 0;
        background: transparent;
        display: block;
    }

    .carousel-indicators .active {
        background-color: green;
    }

    .carousel-control {
        color: green;
    }

    .kontent-slajdy .panel {
        background-color: rgba(255, 255, 255, 0.88);
    }

    .kontent-slajdy .panel-heading {
        background-color: rgba(245, 245, 245, 0.72);
    }

    .kontent-slajdy .panel-body {
        background-color: rgba(255, 255, 255, 0.74);
    }

    .logo-stage {
        transform-style: preserve-3d;
        will-change: transform;
    }

    div.logo-name {
        text-align: center;
        margin-top: 20%;
        font-size: 500%;
        width: 100%;
        height: 80%;
    }

    .print-only {
        display: none;
    }
}

.footer-note {
    color: #717171;
}

@media screen and (max-width: 767px) {
    body {
        background: #f4f7f4;
    }

    #tlo {
        display: none;
    }

    #slajdy {
        min-width: 0;
        width: 100%;
    }

    #slajdy,
    #slajdy .item,
    #slajdy .item > div,
    #slajdy .kontent,
    #slajdy .kontent-slajdy,
    #slajdy .container,
    #slajdy .panel {
        min-width: 200px;
    }

    .wysokosc-calosci,
    .kontent {
        height: auto;
    }

    .kontent-tlo,
    .kontent-slajdy {
        width: auto;
        margin: 0;
    }

    #slajdy {
        position: static;
        z-index: auto;
    }

    #slajdy .carousel-inner {
        overflow: visible;
    }

    #slajdy .carousel-indicators,
    #slajdy .carousel-control {
        display: none !important;
    }

    #slajdy .item,
    #slajdy .item.active,
    #slajdy .item.next,
    #slajdy .item.prev {
        display: block !important;
        position: static !important;
        left: auto !important;
        float: none !important;
        transform: none !important;
        width: auto !important;
    }

    #slajdy .item > div {
        box-sizing: border-box;
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 16px;
    }

    #slajdy .item + .item {
        margin-top: 12px;
    }

    #slajdy .kontent,
    #slajdy .kontent-slajdy,
    #slajdy .container {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        height: auto;
        max-width: 100%;
    }

    #slajdy .panel {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }

    #slajdy .panel-heading,
    #slajdy .panel-body {
        box-sizing: border-box;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    #slajdy .panel-heading h2 {
        margin: 0;
        font-size: 1.6rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    #slajdy .desktop-brand {
        display: none;
    }

    #slajdy .mobile-brand {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
    }

    #slajdy .mobile-brand-logo {
        display: block;
        width: 90px;
        height: 90px;
        flex: 0 0 90px;
    }

    #slajdy .mobile-brand-name {
        margin: 0;
        text-align: left;
        font-size: 130%;
    }

    #slajdy .mobile-brand-name p.logo-name-big {
        font-size: 300%;
    }

    #slajdy .mobile-brand-name p.logo-name-small {
        font-size: 150%;
    }

}

@media print {
    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    .logo-sign {
        width: 20%;
        float: left;
        clear: none;
        margin-left: 5%;
    }

    div.logo-name {
        text-align: left;
        font-size: 200%;
        clear: none;
        width: 80%;
    }

    #tlo {
        width: 100%;
        clear: both;
    }

    #slajdy {
        width: 100%;
        clear: both;
    }

    /* Wydruk jako jednolity dokument: pokaż wszystkie slajdy sekwencyjnie. */
    #slajdy .item,
    #slajdy .item.active,
    #slajdy .item.next,
    #slajdy .item.prev {
        display: block !important;
        position: static !important;
        left: auto !important;
        float: none !important;
        transform: none !important;
    }

    #slajdy .item.screen-only {
        display: none !important;
    }

    .carousel-inner,
    .carousel-inner>.item {
        overflow: visible !important;
    }

    .screen-only,
    .carousel-indicators,
    .carousel-control {
        display: none !important;
    }
}