:root {
    --ui-color: #5c89d3;
}

body {
    margin: 0;
    padding: 0;
    background: #fafafa;
    min-height: 100vh;
    width: 100%;
    position: relative;
    font-family: titillium_webregular;
    overflow-x: hidden;
    overflow-y: hidden;
}

body * {
    margin: 0;
    padding: 0;
    position: relative;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
    float: left;
    outline: none;
    font-weight: 100;
    user-select: none;
    /* touch-action: pan-x pan-y; */
}

svg {
    pointer-events: none;
    touch-action: none;
}

h1, h2, h3 {
    width: 100%;
    text-align: center;
    color: #444;
    font-family: titillium_weblight;
}

h1 { font-size: 18pt; }
h2 { font-size: 16pt; }
h3 { font-size: 24pt; }





.zoom-in { transform: scale(1.2); }
.zoom-out { transform: scale(.8); }
.uppercase { text-transform: uppercase !important; }
.lock-tr { transition: none !important; }
.off { display: none !important; }
.b { font-family: titillium_webbold; }
.mouse-off { pointer-events: none !important; }
.w100 { width: 100%; }
.disabled {
    pointer-events: none !important;
    filter: grayscale(100)/* blur(2px) */;
    opacity: .25;
}

.tr {
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    /* will-change: transform, opacity;
    transform: translateZ(0); */
}

.hide {
    pointer-events: none;
    opacity: 0 !important;
}

.ratio-height {
    width: 100%;
    padding-top: 100%;
    pointer-events: none;
}





/* --   PRZYCISKI   -- */

.bt {
    background: var(--ui-color);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12pt;
    width: auto;
    text-align: center;
}

.bt.medium {
    font-size: 12pt;
    padding: 12px 20px;
}





/* --   IKONKI   -- */

.icon {
    width: 72px;
    height: 72px;
    cursor: pointer;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: #444;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .025);
}





/* --   OBSZARY DO UTRUDNIANIA NAWIGACJI GESTAMI   -- */

#swipe-preventing-right { right: -24px; }
#swipe-preventing-left { left: -24px; }
.swipe-preventing {
    position: fixed;
    top: 144px;
    width: 48px;
    height: 100%;
    z-index: 12;
}

/* --   LOADER PRZY PRZECHODZENIU MIĘDZY STRONAMI   -- */

#loading-next-page {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 17;
}










/* --   EKRAN Z HASŁEM   -- */

#password-screen {
    width: 100%;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background: #fafafa;
}

#password-screen input::placeholder {
    color: #ccc;
    opacity: 1;
}

#catalog-password {
    width: 240px;
    font-size: 18pt;
    color: var(--ui-color);
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: titillium_webregular;
    height: 48px;
    line-height: 32px;
    padding: 4px 12px;
    left: 50%;
    transform: translate(-50%, 0);
}

#catalog-password:focus {
    background: #f0f5fc;
    border: 1px solid #a9c4ea;
}

#send-password {
    left: 50%;
    transform: translate(-50%, 0);
    width: 56px;
    height: 56px;
    line-height: 56px;
    color: #fff;
    background: var(--ui-color);
    border-radius: 100%;
    margin: 40px 0 0 0;
    font-family: titillium_websemibold;
    font-size: 14pt;
}

#send-password::after {
    content: '';
    position: absolute;
    left: -12px;
    top: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
}

#wrong-password-notice {
    text-align: center;
    color: #f00;
    width: 100%;
}











/* --   NAWIGACJA W PRZYCZEPIONYM NAGŁÓWKU   -- */

nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 72px;
    box-sizing: content-box;
    background: #fff;
    z-index: 8;
}

nav .icon {
    position: absolute;
}

/* --   BURGER   -- */

#burger {
    right: 0;
    top: 0;
}

/* --   CLOSE MOBILE MENU   -- */

#close-mobile-menu {
    right: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
}

/* --   FORM-BACK   -- */

#form-back {
    position: absolute;
    left: 0;
    top: 72px;
    background: #fafafa;
    transform: translate(-100%, 0);
    transition-delay: 0s;
    z-index: 8;
}

/* --   FORM-NEXT   -- */

#form-next {
    position: absolute;
    right: 0;
    top: 72px;
    background: #fafafa;
    transform: translate(100%, 0);
    transition-delay: 0s;
    z-index: 8;
}

/* --   IKONA PODSUMOWANIA   -- */

#summary-icon {
    left: 0;
    top: 0;
    transform: translate(-100%, 0);
    transition-delay: 0s;
}

/* --   CENA   -- */

#form-price {
    position: absolute;
    top: 16px;
    left: 50%;
    background: #f1f1f1;
    color: #666;
    border-radius: 4px;
    line-height: 40px;
    padding: 0 12px;
    font-family: titillium_webbold;
    font-size: 14pt;
    text-transform: lowercase;
    transform: translate(-50%, -200%);
    transition-delay: 0s;
}

/* --   TYTUŁ PODSUMOWANIA   -- */

#summary-title {
    position: absolute;
    width: auto;
    left: 0;
    top: 0;
    line-height: 72px;
    font-size: 16pt;
    font-family: titillium_websemibold;
    padding: 0 0 0 24px;
    color: #666;
    transform: translate(0, -100%);
    transition-delay: 0s;
}

/* --   TYTUŁ PROJEKTÓW ROZKŁADÓWEK   -- */

#spreads-title {
    position: absolute;
    width: auto;
    left: 0;
    top: 0;
    line-height: 72px;
    font-size: 16pt;
    font-family: titillium_websemibold;
    padding: 0 0 0 24px;
    color: #666;
}

/* --   TYTUŁ ZDJĘĆ Z SESJI   -- */

#photos-title {
    position: absolute;
    width: auto;
    left: 0;
    top: 0;
    line-height: 72px;
    font-size: 16pt;
    font-family: titillium_websemibold;
    padding: 0 0 0 24px;
    color: #666;
}

/* --   IKONKA POWROTU DO EKRANU POWITALNEGO   -- */

#go-home {
    top: 0;
    right: 72px;
    transform: translate(0, -100%);
    transition-delay: 0s;
}

#go-home svg {
    width: 20px;
    height: 20px;
}

#go-home-spreads {
    top: 0;
    right: 72px;
}

#go-home-spreads svg {
    width: 20px;
    height: 20px;
}

#go-home-photos {
    top: 0;
    right: 72px;
}

#go-home-photos svg {
    width: 20px;
    height: 20px;
}

#spreads-all-notices {
    top: 0;
    right: 144px;
}

#spreads-all-notices svg {
    width: 20px;
    height: 20px;
}

/* --   AKCJE UWAG   -- */

#spread-zoom-actions {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 72px;
    overflow: hidden;
    pointer-events: none;
    touch-action: none;
}

/* --   DODAJ UWAGĘ   -- */

#spread-number {
    position: absolute;
    left: 24px;
    top: 20px;
    background: #fff;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 3px;
    text-align: center;
    font-family: titillium_webbold;
    font-size: 14pt;
    color: #444;
    opacity: 0;
}

#close-spread-zoom {
    top: 0;
    right: 0;
    transform: translate(0, 100%);
    pointer-events: all;
    touch-action: auto;
    background: #444;
    color: #fff;
}

#show-photos.hide { transform: translate(0, -100%) !important; }
#show-photos.hide-down { transform: translate(0, 100%) !important; }
#show-photos {
    top: 0;
    right: 72px;
    transform: translate(0, 0);
    pointer-events: all;
    touch-action: auto;
    background: #444;
    color: #fff;
}

#add-comment.hide { transform: translate(0, 100%) !important; }
#add-comment {
    top: 0;
    right: 72px;
    transform: translate(0, 100%);
    pointer-events: all;
    touch-action: auto;
    background: #444;
    color: #fff;
}

#add-comment-notice.hide { transform: translate(0, -100%); }
#add-comment-notice {
    position: absolute;
    left: 0;
    top: 72px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 11pt;
    z-index: 8;
    color: #fff;
    background: var(--ui-color);
    font-family: titillium_websemibold;
}

#dark-bg {
    width: 100%;
    height: 72px;
    background: #444;
    transform: translate(0, 100%);
}

#delete-notice-point.hide { transform: translate(0, -100%) !important; }
#delete-notice-point {
    top: 0;
    right: 144px;
    transform: translate(0, 0);
    pointer-events: all;
    touch-action: auto;
    background: #444;
    color: #fff;
}










/* --   MOBILE MENU   -- */

#mobile-menu {
    position: fixed;
    left: 100%;
    top: 0;
    width: 72px;
    height: 100%;
    background: #222;
    font-family: titillium_websemibold;
    font-size: 11pt;
    text-transform: uppercase;
    z-index: 15;
}

#mobile-menu ul {
    width: 100%;
    list-style: none;
}

#mobile-menu ul li {
    width: 100%;
    height: 72px;
    line-height: 72px;
    color: #ddd;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-family: titillium_weblight;
    font-size: 12pt;
}

#mobile-menu ul li a:hover { background: rgba(0, 0, 0, .05); }
#mobile-menu ul li a {
    color: #ccc;
    padding: 0 24px;
    width: 100%;
}

#mobile-menu ul#langs li {
    width: 72px;
    border-bottom: 0;
    color: #fff;
    padding: 0 24px;
}

#mobile-menu .icon svg { stroke-width: 1px; }
#mobile-menu .icon {
    color: #ddd;
}





/* .logo {
    width: 160px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.logo img {
    width: 160px;
} */










/* --   GŁÓWNY ZBIORNIK   -- */

main p { width: 100%; }
main.dark { background: #eee; }
main {
    width: 100%;
    height: 100vh;
    padding: 72px 0 0 0;
    background: #fafafa;
    font-family: titillium_weblight;
    font-size: 14pt;
    color: #444;
    overflow: auto;
    overflow-x: hidden;
    z-index: 7;
}










/* --   EKRAN POWITALNY   -- */

#home-screen.hide { transform: scale(1.025); }
#home-screen {
 /* display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column; */
    width: 100%;
    height: 100%;
    padding: 0 48px 120px 48px;
    overflow: auto;
}

#home-screen .href {
    width: 100%;
}












/* --   LISTA PROJEKTÓW ROZKŁADÓWEK   -- */

#spreads-projects {
    width: 100%;
    padding: 0 24px;
}

#spreads-projects .spread {
    width: 100%;
    margin: 56px 0 0 0;
    z-index: 4;
}

#spreads-projects .spread .spread-img {
    width: 100%;
    overflow: hidden;
    z-index: 5;
    background: #eee;
}

#spreads-projects .spread.waiting-for-comment-placement .spread-img .waiting-mask { opacity: 1; }
#spreads-projects .spread .spread-img .waiting-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    pointer-events: none;
    touch-action: none;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    opacity: 0;
    background: #0a8fff20;
}

#spreads-projects .spread .spread-img::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(0, 0, 0, .25);
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
}

#spreads-projects .spread .spread-img::after {
    content: '';
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;
    border-right: 1px dashed rgba(0, 0, 0, .25);
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
}

#spreads-projects .spread .spread-img img {
    width: 100%;
    object-fit: cover;
    z-index: 1;
 /* transition: all .2s ease-out; */
}

/* --   NUMER ROZKŁADÓWKI   -- */

#spreads-projects .spread .spread-number {
    position: absolute;
    left: 0;
    top: -32px;
    font-size: 14pt;
    font-family: titillium_webbold;
    width: 32px;
    height: 32px;
    line-height: 32px;
    background: #666;
    color: #eee;
    text-align: center;
    border-radius: 3px 3px 0 0;
    transform-origin: left bottom;
    transition: all .1s ease-out;
    transform: translate(0, 1px);
    z-index: 6;
}

#spreads-projects .spread .notice-counter {
    position: absolute;
    right: 0;
    top: -28px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    font-size: 10pt;
    text-align: center;
    opacity: 1;
    background: var(--ui-color);
    font-family: titillium_websemibold;
    border-radius: 100%;
    transition: all .2s ease-out;
}

#spreads-projects .spread .notice-counter-icon {
    position: absolute;
    right: 30px;
    top: -26px;
    width: 20px;
    height: 20px;
    color: #444;
    transition: all .2s ease-out;
}

#spreads-projects .spread .notice-counter-icon svg {
    width: 20px;
    height: 20px;
}





/* --   POWIĘKSZONA ROZKŁADÓWKA   -- */

#spreads-projects .spread.active .notice-counter {
    transform: translate(0, 32px);
    opacity: 0;
}

#spreads-projects .spread.active .notice-counter-icon {
    transform: translate(0, 32px);
    opacity: 0;
}

#spreads-projects .spread.active .spread-img {
    overflow-x: auto;
    width: calc(100% + 46px);
    margin: 0 0 0 -24px;
}

#spreads-projects .spread.active .spread-img .waiting-mask { width: 1200px; }
#spreads-projects .spread.active .spread-img::before { width: 1200px; }
#spreads-projects .spread.active .spread-img::after { width: 600px; }
#spreads-projects .spread.active .spread-img img { width: 1200px; }
#spreads-projects .spread.active .spread-number {
    transform: translate(0, -100%);
    opacity: 0;
 /* transform: scale(1.1);
    background: #444;
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin: -4px 0 0 0; */
}

#spreads-projects .spread.active .spread-img .notice-point {
    pointer-events: all;
    touch-action: auto;
    opacity: 1;
}





/* --   ZNACZNIK UMIEJSCOWIENIA UWAGI NA ROZKŁADÓWCE   -- */

#spreads-projects .spread .spread-img .notice-point {
    position: absolute;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 100%;
    background: var(--ui-color);
    z-index: 10;
    margin: -16px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    color: #fff;
    text-align: center;
    font-size: 12pt;
    font-family: titillium_websemibold;
    transform-origin: left top;
    pointer-events: none;
    touch-action: none;
    opacity: 0;
}

#spreads-projects .spread .spread-img .notice-point::after {
    content: '';
    position: absolute;
    left: -12px;
    top: -12px;
    width: 72px;
    height: 72px;
}

#spreads-projects .spread .spread-img .notice-point svg {
    width: 20px;
    height: 20px;
    margin: 14px;
    color: #fff;
}

#spreads-projects .spread .spread-img .notice-point-pulse {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 100%;
    border: 24px solid #fff;
    z-index: 10;
    margin: -16px 0 0 0;
    transition: all .4s ease-out;
    pointer-events: none;
    touch-action: none;
}

#spreads-projects .spread .spread-img .notice-point-pulse.added {
    border: 1px solid #ffffff90;
    transform: scale(2);
    opacity: 0;
}










/* --   POLE DO WPISYWANIA UWAG   -- */

#notice-textarea-slideup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #444;
    z-index: 7;
    padding: 0;
    box-shadow: 0 0 64px 1px rgba(0, 0, 0, .5);
    transition: all .3s ease-out;
    border-bottom: 4px solid #333;
    transform: translate(0, 72px);
}

#notice-textarea-slideup.hide {
    transform: translate(0, -100%);
    opacity: 1 !important;
}

#notice-textarea-slideup textarea::placeholder { color: rgba(255, 255, 255, .25); }
#notice-textarea-slideup textarea {
    width: 100%;
    height: 100%;
    color: #eee;
    font-size: 12pt;
    padding: 12px 64px 40px 24px;
    background: none;
    border: 0;
    resize: none;
    overflow: hidden;
    font-family: titillium_weblight;
    min-height: 104px;
    margin: 0;
    line-height: 22px;
    z-index: 8;
}

#height-inspector {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    line-height: 22px;
    padding: 12px 64px 40px 24px;
    font-size: 12pt;
    color: #ccc;
    font-family: titillium_weblight;
    margin: 0;
    z-index: 7;
    pointer-events: none;
    touch-action: none;
    opacity: 0;
    white-space: pre-wrap;
}

#change-photo-filename {
    display: none;
}

#notice-textarea-slideup .ok {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 12pt;
    color: #fff;
    font-family: titillium_webbold;
    float: right;
    width: 48px;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    border-radius: 100%;
    background: #0b9a00;
    text-transform: uppercase;
    text-align: center;
    z-index: 9;
}

#notice-textarea-slideup .ok::after,
#notice-textarea-slideup .delete-notice-point::after {
    content: '';
    position: absolute;
    left: -12px;
    top: -12px;
    width: 72px;
    height: 72px;
}









/* --   DOLNE PRZYCISKI   -- */

#bottom-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 48px 0 0 0;
}

#confirm-spreads {
    left: 50%;
    transform: translate(-50%, 0);
}





/* --   EKRANY AKCJI   -- */

.fullscreen-action-notice {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all .2s ease-out;
    z-index: 16;
}

.fullscreen-action-notice .icon,
.fullscreen-action-notice .text {
    position: absolute;
    left: 50%;
    top: 50%;
}

.fullscreen-action-notice .icon {
    transform: translate(-50%, -50%);
}

.fullscreen-action-notice .icon svg {
    stroke-width: 4px;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 100%;
    stroke-linecap: square;
    color: #fff;
    background: #0b9a00;
    box-sizing: content-box;
}

.fullscreen-action-notice .text.hide { transform: translate(-50%, 48px); }
.fullscreen-action-notice .text {
    transform: translate(-50%, 32px);
    color: #888;
    font-size: 14pt;
    width: 100%;
    text-align: center;
    font-family: titillium_websemibold;
}

.loader::after {
    border: 3px solid rgba(0, 0, 0, .1);
    border-top: 3px solid var(--ui-color);
}

.loader {
    width: 40px;
    height: 40px;
}










/* --   ZDJĘCIA Z SESJI - SZYBKA LISTA DO KOMENTARZY   -- */

#quick-photos-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 72px);
    background: #444;
    z-index: 7;
    padding: 0;
    box-shadow: 0 0 64px 1px rgba(0, 0, 0, .5);
    transition: all .2s ease-out;
    border-bottom: 4px solid #333;
    transform: translate(0, 72px);
    overflow: auto;
}

#quick-photos-container.hide {
    transform: translate(0, 88px);
    opacity: 1;
}

#quick-photos-container .photo {
    width: 33.33333%;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    z-index: 1;
    transition: all .1s ease-out;
}

#quick-photos-container .photo.zoom {
    transform: scale(2);
    z-index: 2;
}










/* --   ZDJĘCIA Z SESJI - LISTA Z ZOOMEM I PRZEWIJANIEM   -- */

#photos-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 72px);
    background: #444;
    z-index: 7;
    padding: 0;
    transform: translate(0, 72px);
    overflow-y: auto;
    overflow-x: hidden;
}

#photos-container .photo {
    width: 33.33333%;
    height: 120px;
    cursor: pointer;
}

#photos-thumbs {
    width: 100%;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

#photos-horizontal-zoom {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 72px);
    overflow-y: hidden;
    overflow-x: auto;
    z-index: 8;
    transform: translate(0, 72px);
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    scroll-snap-type: x mandatory;
    background: #444;
    cursor: pointer;
}

#photos-horizontal-zoom-content {
    width: 20000px;
    height: 100%;
}

#photos-horizontal-zoom-content .zoom-photo {
    width: auto;
    height: 100%;
    scroll-snap-align: start;
}

#photos-horizontal-zoom-content .zoom-photo .filename {
    position: absolute;
    left: 50%;
    bottom: 32px;
    color: #fff;
    line-height: 28px;
    padding: 0 8px;
    border-radius: 3px;
    background: #222;
    transform: translate(-50%, 0);
    font-size: 10pt;
    pointer-events: none;
    font-family: titillium_websemibold;
}

#photos-horizontal-zoom-content .zoom-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --   LAZY LOAD   -- */

.lazy-load.lazy-on { opacity: 1; }
.lazy-load.lazy-show { display: block !important; }
.lazy-load.lazy-start { display: block !important; }
.lazy-load {
    display: none;
    opacity: 0;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

.lazy-load img {
    opacity: 0;
    display: none;
}

.lazy-load.lazy-on img {
    opacity: 1;
    display: block;
}

@keyframes lazy-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.lazy-load.lazy-on::after { opacity: 0; }
.lazy-load::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    animation: lazy-spin 1s linear infinite;
    border: 1px solid rgba(0, 0, 0, .1);
    border-top: 1px solid #fff; /* var(--ui-color); */
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    border-radius: 100%;
    pointer-events: none;
}

/* --   ZOOM   -- */

#photos-container .photo.zoom {
    width: 100%;
    height: 240px;
}

#photos-container .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --   NAZWA PLIKU   -- */

#photo-filename {
    position: absolute;
    left: 50%;
    top: 8px;
    text-align: center;
    font-size: 11pt;
    color: #fff;
    z-index: 11;
    background: #222;
    border-radius: 3px;
    padding: 4px 8px;
    transform: translate(-50%, 0);
}

/* --   IKONKA POBIERANIA ZDJĘCIA   -- */

#download-photo {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    width: 72px;
    height: 72px;
    cursor: pointer;
    color: #fff;
    background: #087100;
}

#download-photo svg {
    width: 32px;
    height: 32px;
}

/* --   ZOOM ZDJĘĆ W GALERII   -- */

/* #photos-owl {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
}

#photos-owl .photo-owl {
    height: 100% !important;
    left: 50%;
    transform: translate(-50%, 0);
}

#photos-owl .photo-owl img {
    object-fit: contain !important;
    height: 100% !important;
} */

/* #photos-owl.owl-carousel.owl-drag .owl-item {
    left: 50%;
    transform: translate(-50%, 0);
} */










/* --   LISTA KROKÓW   -- */

#steps-list { width: 100%; }
#steps-list.hide { transform: translate(0, -24px); }
#steps-list div:hover { background: #f5f5f5; }
#steps-list div:active { background: #f5f5f5; }
#steps-list div {
    width: 100%;
    border-top: 1px solid #f1f1f1;
    cursor: pointer;
    padding: 0 24px;
    font-size: 12pt;
}

#steps-list div .label {
    width: auto;
    font-size: 12pt;
    line-height: 56px;
}

#steps-list div.big .label {
    font-size: 16pt;
    color: #666;
    font-family: titillium_websemibold;
}

#steps-list div .value .empty { color: #aaa; }
#steps-list div.big .value { font-size: 16pt; }
#steps-list div .value {
    float: right;
    width: auto;
    font-family: titillium_webbold;
    color: var(--ui-color);
    line-height: 56px;
}

#confirm-form {
    left: 50%;
    transform: translate(-50%, 0);
    margin: 40px 0 0 0;
}










/* --   FORMULARZ   -- */

#form {
    width: 100%;
    padding: 0 24px;
}

#form.only-summary {
    padding: 0 16px 96px 16px;
}

#form #steps {
    width: 100%;
    overflow: hidden;
}

#form #steps.hide { transform: translate(0, 24px); }
#form .step-label { text-align: center; }
#form .step { width: 100%; }
#form .step.hide { transform: translate(48px, 0); }
#form .step.hide.reverse { transform: translate(-48px, 0); }

/* --   WYBRANY ELEMENT   -- */

#form .selected-item .ratio-height { padding-top: 75%; }
#form .selected-item { width: 100%; }
#form .selected-item.hide {
    position: absolute;
    left: 0;
    bottom: 100%;
    transform: translate(0, 48px);
}

.selected-item-photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.selected-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#form .selected-item div {
    width: 100%;
    height: 100%;
}

.owl-carousel {
    /* display: block !important; */
}

#form .label {
    width: 100%;
    font-family: titillium_webregular;
    font-size: 16pt;
    color: #666;
    line-height: 72px;
}

#form .group-label {
    width: 100%;
    font-family: titillium_websemibold;
    font-size: 14pt;
    color: #666;
    line-height: 72px;
}

#form .info {
    width: 100%;
    margin: 0 0 32px 0;
}

#form .text {
    width: 100%;
    font-size: 11pt;
    line-height: 24px;
}

#form .symbol {
    color: var(--ui-color);
    font-family: titillium_websemibold;
    font-size: 14pt;
    line-height: 64px;
}

#form .photo {
    width: 100%;
    overflow: hidden;
    transition: all .25s cubic-bezier(.785, .135, .15, .86);
}

#form .photo .photos {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#form .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* --   PODGLĄD TEKSTU W PERSONALIZACJI   -- */

#form .text-preview.pt20 {
    padding: 16px 0 0 0;
    margin: 8px 0 0 0;
}

#form .text-preview.pt12 {
    padding: 0 0 16px 0;
    margin: 0 0 8px 0;
}

#form .text-preview {
    width: 100%;
    min-height: 30px;
    background: #eee;
    text-align: center;
    line-height: 30px;
}

pre {
    font-size: 8pt;
    font-family: Arial;
}

/* --   ELEMENT   -- */

#form .item.selected::before {
    content: '★';
    position: absolute;
    right: 8px;
    top: 8px;
    color: var(--ui-color);
    width: 32px;
    height: 32px;
    font-size: 24pt;
    z-index: 9;
    line-height: 30px;
    text-align: center;
}

/* #form .item:hover { filter: brightness(1.05); } */
#form .item { cursor: pointer; }

#form .cols-small,
#form .cols-medium {
    width: 100%;
}

#form .cols-small .item { width: 33.33333%; }
#form .cols-medium .item { width: 50%; }
#form .item img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#form .item .param-label {
    width: 100%;
    font-size: 10pt;
    line-height: 100%;
    padding: 8px 0 0 4px;
    color: #666;
    transform: translate(0, 4px);
}

#form.only-summary .item .item-label {
    line-height: 16px;
    font-family: titillium_websemibold;
    margin: 6px 0 4px 0;
}

#form .item .item-label {
    width: 100%;
    font-size: 11pt;
    line-height: 40px;
    padding: 0 0 8px 4px;
    color: #666;
}

#form .item.selected .item-label {
    color: var(--ui-color);
    font-family: titillium_websemibold;
}

#form .item .item-photo {
    width: 100%;
}

#form .item.format::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 48px);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.025) 0%, rgba(0, 0, 0, 0) 100%);
}

/* --   ZAKŁADKI   -- */

/* #form .tabs {
    position: absolute;
    top: 0;
    right: 0;
}

#form .tabs .tab {
    width: 72px;
    height: 72px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#form .tabs .tab svg {
    width: 20px;
    height: 20px;
} */

/* --   DODATKOWE STYLE DO OWLA   -- */

.owl-carousel.owl-hidden { opacity: 1 !important; }
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item {
    height: 100%;
}










/* --   KONTENER NA POLE NUMBER   -- */

.amount-container {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 72px 0 0 0;
}

.amount-container input,
.amount-container .minus,
.amount-container .plus {
    width: 72px;
    height: 72px;
    line-height: 70px;
    border-radius: 5px;
    font-size: 24pt;
    font-family: Arial;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    text-align: center;
    /* background: #fff; */
    box-shadow: inset 0 0 0 1px #ddd;
}

.amount-container input {
    width: 128px;
    box-shadow: none;
    background: none;
}










/* --   POWRÓT NA GŁÓWNĄ   -- */

#back-home {
    position: fixed;
    left: 0;
    top: 0;
    transition-delay: 0s;
    z-index: 9;
    cursor: pointer;
}

.personalization-sector,
.personalization-title,
#product-name {
    width: 100%;
    text-align: center;
    font-family: titillium_websemibold;
    font-size: 16pt;
    margin: 16px 0;
}

.personalization-title {
    margin: 24px 0;
}

.personalization-sector span {

}

#product-name.show-price {
    text-align: left;
}

#product-name.show-price span { opacity: 1; }
#product-name span {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    color: #666;
}












/* --   BODY CLASS: SHOW-FORM   -- */

body.show-form #form-back { transform: translate(0, 0); transition-delay: .2s; }
body.show-form #form-next { transform: translate(0, 0); transition-delay: .2s; }
body.show-form #summary-icon { transform: translate(0, 0); transition-delay: .2s; }
body.show-form #form-price { transform: translate(-50%, 0); transition-delay: .2s; }





/* --   BODY CLASS: SHOW-SUMMARY   -- */

body.show-summary #form-back { transform: translate(-100%, 0); transition-delay: 0s; }
body.show-summary #form-next { transform: translate(100%, 0); transition-delay: 0s; }
body.show-summary #summary-icon { transform: translate(-100%, 0); transition-delay: 0s; }
body.show-summary #form-price { transform: translate(-50%, -200%); transition-delay: 0s; }
body.show-summary #summary-title { transform: translate(0, 0); transition-delay: .2s; }
body.show-summary #go-home { transform: translate(0, 0); transition-delay: .2s; }





/* --   BODY CLASS: SHOW-MOBILE-MENU   -- */

body.show-mobile-menu main { transform: translate(-72px, 0); }
body.show-mobile-menu nav { transform: translate(-72px, 0); }
body.show-mobile-menu #mobile-menu { transform: translate(-72px, 0); }
body.show-mobile-menu #burger { opacity: 0; pointer-events: none; }
body.show-mobile-menu #close-mobile-menu { opacity: 1; pointer-events: all; }





/* --   BODY CLASS: SPREAD-ZOOM   -- */

body.spread-zoom #spreads-title { transform: translate(0, -100%); }
body.spread-zoom #go-home-spreads { transform: translate(0, -100%); }
body.spread-zoom #burger { transform: translate(0, -100%); }
body.spread-zoom #add-comment { transform: translate(0, 0); }
body.spread-zoom #dark-bg { transform: translate(0, 0); }
body.spread-zoom #close-spread-zoom { transform: translate(0, 0); }
body.spread-zoom #spread-number { opacity: 1; }
body.spread-zoom .spread.active { margin: 0 !important; }




















/* ==   MEDIA QUERIES   == */

/* --   SZEROKOŚĆ 480 PX   -- */

@media (min-width: 480px)
{
    #form .cols-medium .item { width: 33.33333%; }
}





/* --   SZEROKOŚĆ 640 PX   -- */

@media (min-width: 640px)
{
    #photos-container .photo { width: 20%; height: 160px; }
    #home-screen .href { width: 200px; margin: 8px; }
    #home-screen {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

    #form .selected-item {
        width: calc(66.666666% - 48px);
        margin: 0 48px 0 0;
    }
}





/* --   SZEROKOŚĆ 800 PX   -- */

@media (min-width: 800px)
{
    #form .cols-small .item { width: 20%; }
    #form .cols-medium .item { width: 20%; }
    #form .selected-item { width: calc(60% - 48px); }
    #form .group-label { width: 40%; }
}





/* --   SZEROKOŚĆ 1024 PX   -- */

@media (min-width: 1024px)
{
    #form .cols-small .item { width: 16.66666%; }
    #form .cols-medium .item { width: 16.66666%; }
    #form .selected-item { width: calc(66.66666% - 48px); }
    #form .group-label { width: 33.33333%; }
    #photos-container .photo { width: 16.66666%; height: 140px; }
}





/* --   SZEROKOŚĆ 1280 PX   -- */

@media (min-width: 1280px)
{
    #form .cols-small .item { width: 12.5%; }
    #form .cols-medium .item { width: 12.5%; }
    #form .selected-item { width: calc(50% - 48px); }
    #form .group-label { width: 50%; }
}





/* --   SZEROKOŚĆ 1600 PX   -- */

@media (min-width: 1600px)
{
    #form .cols-small .item { width: 10%; }
    #form .cols-medium .item { width: 16.66666%; }
}





/* --   SZEROKOŚĆ 1920 PX   -- */

@media (min-width: 1920px)
{
    #form .cols-small .item { width: 10%; }
    #form .cols-medium .item { width: 12.5%; }
}