/* --   KARTA PRODUKTU - STANDARDOWA   -- */

.flex-card {
    width: 340px;
    min-height: 480px;
    border-radius: 16px;
    background: rgb(245, 245, 245);
    background: -moz-linear-gradient(top, rgba(245, 245, 245, 1) 0%, rgba(220, 220, 220, 1) 80%, rgba(235, 235, 235, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(245, 245, 245, 1) 0%, rgba(220, 220, 220, 1) 80%, rgba(235, 235, 235, 1) 100%);
    background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%, rgba(220, 220, 220, 1) 80%, rgba(235, 235, 235, 1) 100%);
    box-shadow: 0 24px 64px 8px rgba(0, 0, 0, .1);
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    margin: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    color: #666;
    user-select: none;
}

/* --   OBRAMOWANIE KARTY   -- */

.flex-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border-left: 1px solid rgba(255, 255, 255, .2);
    border-top: 1px solid rgba(255, 255, 255, .2);
    border-right: 1px solid rgba(0, 0, 0, .075);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-sizing: border-box;
    pointer-events: none;
}

.flex-card.light { filter: brightness(1.05); }





/* --   POZIOMA LINIA   -- */

.flex-card .hr {
    width: 100%;
    height: 1px;
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, 0) 100%);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

.flex-card .hr::after {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}

.flex-card .hr.half { width: 50%; }
.flex-card .hr.top {
    position: absolute;
    left: 0;
    top: 96px;
}

.flex-card .hr.bottom {
    position: absolute;
    left: 0;
    bottom: 96px;
}





/* --   NAGŁÓWEK   -- */

.flex-card header {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14pt;
    font-family: titillium_websemibold;
    text-transform: uppercase;
    width: 100%;
    height: 96px;
    line-height: 125%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

/* --   NUMER ID PRODUKTU W KOSZYKU NA KARCIE EDYCJI   -- */

.flex-card header .shopping-cart-id {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #888;
    height: 24px;
    line-height: 24px;
    font-size: 12pt;
    font-family: titillium_websemibold;
}

/* --   STOPKA   -- */

.flex-card footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    overflow: hidden;
}





/* --   DUŻY TYTUŁ KARTY   -- */

.flex-card .big-title {
    font-size: 32pt;
    font-family: titillium_webregular;
    line-height: 110%;
    width: 100%;
    padding: 32px;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

.flex-card.preset-card header { display: none; }
.flex-card.preset-card .title { transform: translate(0, -16px); }
.flex-card.preset-card .big-title { transform: translate(0, -32px); }
.flex-card .title.big { font-size: 32pt; }
.flex-card .title.medium { font-size: 24pt; }
.flex-card .title {
    font-family: titillium_webregular;
    line-height: 110%;
    width: 100%;
    padding: 32px;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    text-align: left;
}

.flex-card .preset-price {
    font-family: titillium_websemibold;
    font-size: 12pt;
    color: #;
    line-height: 16px;
    transform: translate(0, -24px);
    width: 100%;
    text-transform: uppercase;
}

/* --   OPIS KARTY   -- */

.flex-card .card-info {
    width: 340px;
    font-size: 10pt;
    line-height: 150%;
    padding: 32px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

/* --   UMIEJSCOWIENIE ZA ŚRODKIEM KARTY   -- */

.flex-card .after-center {
    position: absolute;
    top: 50%;
}

/* --   UMIEJSCOWIENIE PRZED ŚRODKIEM KARTY   -- */

.flex-card .before-center {
    position: absolute;
    bottom: 50%;
}










/* --   PHOTO CARD   -- */

.flex-card.photo-card {
    width: 480px;
    height: 480px;
    min-height: auto;
    pointer-events: none;
}

.flex-card.photo-card .main-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}










/* --   MEDIUM CARD   -- */

.flex-card.medium {
    width: 260px;
    height: 380px;
    min-height: auto;
    margin: 8px;
}

.flex-card.medium .product-icon {
    width: 260px;
    height: 380px;
    margin: 0;
}

.flex-card.medium .product-icon .css-3d-model { transform: translate(0, -80px); }
/* .flex-card.medium .product-icon .info { transform: translate(0, -80px); } */
.flex-card.medium .price {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 12pt;
    font-family: titillium_websemibold;
    text-transform: uppercase;
    color: #;
    margin: 16px 0 0 0;
    line-height: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.flex-card.medium .price span {
    height: 28px;
    line-height: 28px;
    background: #444;
    padding: 0 8px;
    border-radius: 4px;
    color: #fff;
}





/* --   SKOMPRESOWANA KARTA   -- */

.flex-card.compress { width: 216px; }
.flex-card.compress.light { filter: brightness(1); }
.flex-card.compress .hr { opacity: .5; }
.flex-card.compress header { transform: translate(0, 140px); }
.flex-card.compress footer { transform: translate(0, -140px); }
.flex-card.compress .hr.top { transform: translate(0, 144px); }
.flex-card.compress .hr.bottom { transform: translate(0, -143px); }
.flex-card.compress .card-info.centered {
    transform: scale(.75);
    opacity: 0;
}





/* --   ZOOM IN WYBRANEJ KARTY I ZOOM OUT NIE WYBRANYCH   -- */

.flex-card.zoom-in {
    transform: scale(1.05) !important;
    opacity: 0;
    transition: all .6s cubic-bezier(.785, .135, .15, .86);
}

.flex-card.zoom-out {
    transform: scale(.95) !important;
    opacity: 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) .1s;
}





/* --   PRZYCISKI   -- */

.goto-form-v2,
.goto-form {
    transition: transform .3s cubic-bezier(.785, .135, .15, .86), opacity .3s cubic-bezier(.785, .135, .15, .86);
}

.bt-compress {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: transform .3s cubic-bezier(.785, .135, .15, .86), opacity .3s cubic-bezier(.785, .135, .15, .86);
    transform: translate(-50%, -50%);
    opacity: 1;
}

.flex-card.compress .bt-compress {
    transform: translate(-50%, -100px);
    opacity: 0;
}



.bt-uncompress {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: transform .3s cubic-bezier(.785, .135, .15, .86), opacity .3s cubic-bezier(.785, .135, .15, .86);
    transform: translate(-50%, 100px);
    opacity: 0;
}

.flex-card.compress .bt-uncompress {
    transform: translate(-50%, -50%);
    opacity: 1;
}










/* --   TREŚĆ KARTY   -- */

.flex-card .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* --   ZDJĘCIE   -- */

.flex-card .photo {
    width: 100%;
    background-image: url(../../.media/.images/no-photo-bg.png);
    overflow: hidden;
    z-index: 12;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-card .photo.gray-icon {
    background-image: none;
    background: #fff;
}

.flex-card .photo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
    z-index: 9;
}

.flex-card:not(.hover-off):hover { filter: brightness(1.05); }
.flex-card:hover .photo img { transform: scale(1.1); }

/* --   WYSOKOŚĆ RÓWNA SZEROKOŚCI   -- */

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

/* --   SYMBOL   -- */

.flex-card .symbol {
    font-size: 12pt;
    padding: 12px 16px 0 16px;
    font-family: titillium_webbold;
    color: #666;
    width: 100%;
    text-align: left
}

/* --   PREVIOUS-SYMBOL   -- */

.flex-card .previous-symbol {
    font-size: 10pt;
    padding: 8px 16px 0 16px;
    font-family: titillium_websemibold;
    color: #aaa;
    width: 100%;
    text-align: left
}

/* --   DESCRIPTION   -- */

.flex-card .description {
    font-size: 10pt;
    padding: 12px 16px 0 16px;
    font-family: titillium_webregular;
    color: #666;
    width: 100%;
    text-align: left;
}

/* --   IKONKA ADNOTACJI   -- */

.flex-card .info-notice {
    position: absolute;
    left: 0;
    bottom: 100px;
    width: 100%;
    line-height: 16px;
    background: #c51c00;
    color: #fff;
    opacity: 1;
    z-index: 100;
    padding: 8px 16px;
    text-align: center;
 /* display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; */
}

.flex-card .icon-notice {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    background: #c51c00;
    border-radius: 100%;
    color: #fff;
    opacity: 1;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.flex-card .icon-notice svg {
    width: 18px;
    height: 18px;
    opacity: 1 !important;
}

.flex-card .new-label {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    z-index: 15;
}

.flex-card .new-label svg {
    width: 40px;
    height: 40px;
}










/* --   KARTA - OKŁADKA   -- */

.flex-card.cover {
    width: 256px;
    min-height: 416px;
    border-radius: 8px;
    margin: 0 8px 16px 8px;
    cursor: pointer;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
}





/* --   KARTA - KOLOR   -- */

.flex-card.cover::after { border-radius: 8px; }
.flex-card.color {
    width: 200px;
    min-height: 300px;
    border-radius: 8px;
    margin: 0 8px 16px 8px;
    cursor: pointer;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    background: #fff;
}

.flex-card.color .photo img { transition: none; }
/* .flex-card.color:hover .photo img { filter: brightness(1.05); } */
.flex-card.color::after { border-radius: 8px; }
.flex-card.color .symbol { transition: none; }
.flex-card.color:hover .symbol { color: #; }
.flex-card.color:hover .title { color: #; }
.flex-card.color .title {
    padding: 8px 16px;
    line-height: 150%;
    transition: none;
}






/* --   KARTA - PUDEŁKO   -- */

.flex-card.box::after { border-radius: 8px; }
.flex-card.box {
    width: 256px;
    min-height: 416px;
    border-radius: 8px;
    margin: 0 8px 16px 8px;
    cursor: pointer;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
}










/* --   SUMMARY DATA CARD   -- */

.flex-card.summary {
    width: 520px !important;
    min-height: 480px;
    height: auto;
    margin: 8px;
    justify-content: flex-start;
    padding: 0 32px 32px 32px;
    overflow: visible;
}

.flex-card.summary .product-name {
    transform: translate(-32px, 0);
    text-align: center !important;
}

.flex-card.summary .product-name,
.flex-card.summary > header {
    position: relative;
    text-transform: none;
    color: #666;
    height: auto;
    font-size: 24pt;
    background: rgba(0, 0, 0, .015);
    font-family: titillium_webregular;
    width: calc(100% + 64px);
    line-height: 125%;
    text-align: left;
    flex-direction: column;
    align-items: center;
    padding: 24px 40px;
    border-bottom: 1px solid #ddd;
    justify-content: flex-start;
    margin: 0 0 16px 0;
}

.flex-card.summary .title.comments-title {
    border: 0;
    margin: 16px 0 0 0;
}

.lh150 {
    line-height: 150% !important;
}

.flex-card.summary .title {
    padding: 0;
    line-height: 48px;
    font-size: 12pt;
    font-family: titillium_websemibold;
    text-transform: uppercase;
    border-bottom: 1px solid #bbb;
    margin: 16px 0 8px 0;
}

.flex-card.summary .line span { color: #666; }
.flex-card.summary .line b { color: #; }
.flex-card.summary .line {
    width: 100%;
    font-size: 12pt;
    font-family: titillium_websemibold;
    text-align: left;
    text-transform: uppercase;
    padding: 0;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-card.summary .line > u { color: #aaa; }
.flex-card.summary .line.small {
    font-size: 10pt;
    font-family: titillium_webregular;
    text-transform: none;
    line-height: 32px;
}





.flex-card.summary ul.base {
    border: 0;
    padding: 0;
}

.flex-card.summary ul.base li.price b { font-size: 18pt; }
.flex-card.summary ul.base li {
    line-height: 40px;
    font-family: titillium_websemibold;
    font-size: 12pt;
    text-transform: uppercase;
}

.flex-card.summary #product-summary-pdf .comments { display:none; }
.flex-card.summary #product-summary-pdf ul {
    border: 0;
    margin: 0;
    padding: 0;
}

.flex-card.summary #product-summary-pdf ul.promo li b { color: #00a820 !important; }
.flex-card.summary #product-summary-pdf ul.promo {
    font-size: 12pt !important;
    font-family: titillium_websemibold !important;
    color: #00a820 !important;
}

/* --   PODGLĄD WYBRANEGO STEMPLA FIRMOWEGO W PODSUMOWANIU   -- */

.flex-card.summary #product-summary-pdf .stamp-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    height: 28px;
}

.flex-card.summary #product-summary-pdf .stamp-thumb .bg {
    position: absolute;
    top: -64px;
    left: calc(100% + 31px);
    width: 120px;
    height: 120px;
    background: #cbcbcb;
    border-radius: 0 6px 6px 0;
    z-index: 1;
}

.flex-card.summary #product-summary-pdf .stamp-thumb img {
    position: absolute;
    top: -64px;
    left: calc(100% + 31px);
    width: 120px;
    height: 120px;
    object-fit: contain;
    background: #fff;
    padding: 12px;
    border-radius: 0 6px 6px 0;
    border: 1px solid #ddd;
    mix-blend-mode: multiply;
    z-index: 2;
}

.flex-card.summary ul {
    list-style: none;
    width: 100%;
    font-size: 10pt;
    border-top: 1px solid rgba(0, 0, 0, .1);
    margin: 4px 0 16px 0;
    padding: 8px 0 0 0;
}

.flex-card.summary ul > li:first-child > ul {
    margin: 0 0 16px 0;
    padding: 0;
    border: 0;
}

.flex-card.summary ul li b.none { color: #aaa; }
.flex-card.summary ul li b {
    color: #;
    max-width: 400px;
    overflow-wrap: break-word;
    text-align: right;
}

.flex-card.summary ul li {
    width: 100%;
    display: flex;
    line-height: 28px;
    justify-content: space-between;
}

.flex-card.summary ul li.big {
    font-size: 12pt;
    font-family: titillium_websemibold;
    text-transform: uppercase;
}

.flex-card.summary .price { font-size: 18pt; }

#personalization_summary .big {
    padding: 8px 0 6px 0;
}

















/* --   BIG CARD   -- */

.flex-card.big {
    width: 720px;
    height: auto;
    min-height: auto;
    margin: 8px;
    padding: 56px 0;
}

.flex-card.big header {
    justify-content: left;
    padding: 0;
    margin: 8px 32px 0 32px;
    border-bottom: 1px solid #ddd;
    height: 64px;
    width: calc(100% - 64px);
}










/* --   SKOMPRESOWANY FORMULARZ   -- */

#compressed_form #order_form { width: auto; }
#compressed_form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -16px 0 0 0;
}

#compressed_form .price {
    position: absolute;
    top: 20px;
    right: 32px;
    font-size: 20pt;
    color: #;
    font-family: titillium_websemibold;
}

#compressed_form .price.bottom {
    top: auto;
    bottom: 28px;
}

.price-unknown {
    position: absolute;
    top: 24px;
    right: 32px;
    font-size: 13pt;
    font-family: titillium_websemibold;
    color: #;
    text-transform: uppercase;
}

.price-unknown.bottom {
    top: auto;
    bottom: 36px;
}

#compressed_form .price span:nth-child(2) {
    font-size: 14pt;
    font-family: titillium_websemibold;
    transform: translate(0, 8px);
    margin: 0 0 0 6px;
}

#compressed_form .amount-container {
    min-height: auto !important;
    margin: 0 0 0 2px;
}

#compressed_form .amount-container .amount {
    width: 48px;
    height: 32px;
    line-height: 32px;
    font-size: 14pt;
    font-family: titillium_websemibold;
    margin: 0 8px;
}

#compressed_form .amount-container .minus,
#compressed_form .amount-container .plus {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 17pt;
    font-weight: 400;
    box-shadow: none;
}

#compressed_form .amount-container .minus {
    line-height: 28px;
    font-size: 23pt;
}

#compressed_form #ftp_folder_name,
#compressed_form #wetransfer_link {
    width: 350px;
    border: 0;
    background: #fff;
    padding: 0 12px;
}

#compressed_form #product_comments {
    width: 400px;
    background: #fff;
    border-radius: 5px;
    font-size: 10pt;
    font-family: titillium_webregular;
    padding: 8px 12px;
    color: #666;
    border: 0;
    margin: 8px 0 0 2px;
    left: auto;
}

#save-product-compressed-form .loader,
#to-cart-compressed-form .loader {
    position: relative;
    left: auto;
    top: auto;
    transform: translate(16px, 0);
}






.grid {
    width: 100%;
    font-family: titillium_webregular;
    user-select: none;
}

.grid .cell {
    width: 100%;
    height: auto;
    padding: 32px;
}

.grid .cell .cell-title {
    font-size: 18pt;
    color: #008aff;
    width: 100%;
    text-align: left;
    line-height: 24px;
    margin: 0 0 16px 0;
}

.grid .cell .cell-description {
    font-size: 10pt;
    color: #666;
    width: 100%;
    text-align: left;
    line-height: 150%;
    margin: 0 0 32px 0;
}

.grid .cell .field-title {
    font-size: 14pt;
    color: #008aff;
    width: 100%;
    text-align: left;
    line-height: 24px;
    margin: 0 0 16px 0;
}

.grid .cell .inputs-field {
    width: 100%;
}

.grid .cell .inputs-field > .label {
    position: absolute;
    left: 8px;
    top: -16px;
    padding: 0;
    height: 32px;
    line-height: 32px;
    color: #fff;
    background: #444;
    font-size: 10pt;
 /* text-transform: uppercase; */
    font-family: titillium_websemibold;
    border-radius: 3px;
    display: none;
}

.grid .cell .inputs-field .line {
    width: 100%;
    min-height: 48px;
    line-height: 48px;
    /* padding: 0 24px; */
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
}

.grid .cell .inputs-field .line:first-child {
    margin: 16px 0 0 0;
}

.grid .cell .inputs-field .line:last-child {
    border-bottom: 0;
    margin: 0 0 16px 0;
}

.grid .cell .inputs-field .line > .label {
    width: 180px;
    font-size: 10pt;
    color: #666;
    /* text-transform: uppercase; */
    text-align: right;
    margin: 0 8px 0 0;
    line-height: 20px;
}

.grid .cell .inputs-field .line .tab-select {
    min-height: 32px;
    line-height: 32px;
    margin: 8px 0;
    transition: all 0.25s cubic-bezier(0.86, 0, 0.07, 1);
    z-index: 10;
    width: 460px;
}

.grid .cell .inputs-field .line .tab-select.move-top {
    z-index: 11;
}

.grid .cell .inputs-field .line .tab-select .option {
    height: 32px;
    line-height: 30px;
    padding: 0 16px;
    background: #fff;
    font-size: 10pt;
    color: #666;
    cursor: pointer;
    text-transform: uppercase;
    box-sizing: border-box;
    margin: 2px;
    border-radius: 6px;
    border: 1px solid #fff;
}

.grid .cell .inputs-field .line .tab-select .option .move-up {
    z-index: 2001;
}

.grid .cell .inputs-field .line .tab-select .option:hover {
    /* background: #fff;
    border: 1px solid #fff; */
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .075);
    color: #;
}

.grid .cell .inputs-field .line .tab-select .option.active {
    background: #;
    color: #fff;
    border: 1px solid #;
}

.grid .cell .inputs-field .line .tab-select .option .long {
    display: none;
    font-size: 8pt;
}

.grid .cell .inputs-field .line .tab-select .option:hover .long { display: block; }
.grid .cell .inputs-field .line .tab-select .option:hover .short { display: none; }
.grid .cell .inputs-field .line .mask {
    float: right;
    overflow: hidden;
}

.grid .cell .inputs-field .line .mask .masked-field {
    float: left;
    transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

.grid .cell .inputs-field .line .mask .masked-field.uncut {
    transform: translate(0,0) !important;
}





.grid .cell .inputs-field .line .calendar {
    border: 1px solid #ddd;
    height: 32px;
    line-height: 30px;
    padding: 0 8px;
    background: #fff;
    font-size: 9pt;
    color: #444;
    cursor: pointer;
    text-transform: uppercase;
    box-sizing: border-box;
    text-align: center;
    width: 96px;
    border-radius: 3px;
    margin: 8px 0 8px 8px;
    overflow: hidden;
}

.grid .cell .inputs-field .line .calendar:hover {
    background: #f1f1f1;
}

.grid .cell .inputs-field .line .calendar svg {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 7px;
    top: 7px;
    color: #aaa;
    stroke-width: 1px !important;
    transition: all 0.15s ease-out;
    opacity: 0.75;
}

.grid .cell .inputs-field .line .calendar:hover svg {
    opacity: 1;
}

.grid .cell .inputs-field .line .calendar.filled {
    color: #008aff !important;
    font-family: titillium_webregular;
    font-size: 10pt;
}

.grid .cell .inputs-field .line .calendar.filled svg {
    opacity: 0;
}

.grid .cell .inputs-field .line .calendar.move-above-mask {
    position: relative;
    z-index: 2008;
    color: rgba(0,0,0,0) !important;
    border: 0 !important;
}

.grid .cell .inputs-field .line .calendar.move-above-mask svg {
    transform: translate(32px,0);
    transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}

.grid .cell .inputs-field .line .calendar::after {
    content: attr(data-hover);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.15s ease-out;
    color: #ccc;
    font-family: titillium_webregular;
    font-size: 10pt;
    text-align: center;
    opacity: 0;
    pointer-events: none;
}

.grid .cell .inputs-field .line .calendar.hover::after {
    opacity: 1;
}

.grid .cell .inputs-field .line .text {
    height: 32px;
    line-height: 32px;
    float: right;
    margin: 2px;
    border-radius: 6px;
    width: 300px;
    padding: 0 12px;
    color: #666;
    font-family: titillium_webregular;
    font-size: 10pt;
}/*
 *   BODY.CLASS
 */





/* --   BODY.HIDE   -- */

body.hide { transform: translate(0, 0); }

/* --   BODY.LOGGED   -- */

body.logged #header-menu .languages-mask,
body.logged #header-menu .current-lang {
    display: none;
}

/* --   BODY:NOT(.LOGGED)   -- */

body:not(.logged) > main { margin: 72px 0 0 0; }
body:not(.logged) #header-menu { top: 0; }
body:not(.logged) #header-menu ul.level-2 { top: 72px; }
body:not(.logged) > header {
    height: 72px;
    transform: translate(0, 0) !important;
}










/* --   BODY.CONTENT-EDITOR-MODE   -- */

body.content-editor-mode main {
    transition: none !important;
    cursor: pointer;
    padding: 128px 16px 0 16px;
    margin: 0;
}

body.content-editor-mode main.gaps0px { padding: 128px 0 0 0; }
body.content-editor-mode main.gaps16px { padding: 128px 8px 0 8px; }
body.content-editor-mode main.gaps32px { padding: 128px 16px 0 16px; }
body.content-editor-mode main.gaps48px { padding: 128px 24px 0 24px; }

body.content-editor-mode .lazy-load {
    transition: none !important;
}

body.content-editor-mode header {
    transform: translate(0, -16px);
    opacity: 0;
    pointer-events: none;
}

body.content-editor-mode #header-menu ul.level-1 {
    transform: translate(0, -16px);
    opacity: 0;
    pointer-events: none;
}

body.content-editor-mode #editor-toolbar-mask {
 /* pointer-events: all; */
    overflow: visible;
    pointer-events: none;
}

body.content-editor-mode #editor-toolbar {
    opacity: 1;
    transform: translate(0, 0);
    pointer-events: none;
}

body.content-editor-mode #content-editor-toolbar-v2 {
    opacity: 1;
    pointer-events: all;
    transform: translate(0, 0);
}

body.content-editor-mode .slider .nav {
    display: none !important;
}

body.content-editor-mode .banner {
    transition: none !important;
}

body.content-editor-mode .banner:not(.V2) .convert-banner {
    display: block;
    z-index: 999999;
}

body.content-editor-mode .banner.V2 .text_field.editable:focus {
    cursor: text;
}

body.content-editor-mode .banner.V2 .text_field.editable {
    cursor: pointer;
 /* min-height: 100%; */
}

body.content-editor-mode .current-editor-obj::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-sizing: border-box;
    border: 2px dashed #;
    background: rgba(0, 0, 0, .025);
    pointer-events: none;
    z-index: 12;
}

body.content-editor-mode .banner.V2:not(.current-editor-obj) .banner-select-area:hover::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
 /* background: rgba(0, 0, 0, .025); */
    background: linear-gradient(135deg, #000 0%, #000 5%,transparent 5%, transparent 10%, #000 10%, #000 15%,transparent 15%,transparent 20%, #000 20%, #000 25%,transparent 25%,transparent 30%, #000 30%, #000 35%,transparent 35%,transparent 40%, #000 40%, #000 45%,transparent 45%,transparent 50%, #000 50%, #000 55%,transparent 55%,transparent 60%, #000 60%, #000 65%,transparent 65%,transparent 70%, #000 70%, #000 75%,transparent 70%,transparent 80%, #000 80%, #000 85%,transparent 85%,transparent 90%, #000 90%, #000 95%,transparent 95%);
    background-size: 3em 3em;
    opacity: .05;
}

body.content-editor-mode .banner.current-editor-obj .banner-select-area { cursor: default }
body.content-editor-mode .banner .banner-select-area {
    pointer-events: all;
    opacity: 1;
    cursor: pointer;
}

body.content-editor-mode .text-field-container:not(.current-editor-obj):hover::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-sizing: border-box;
    pointer-events: none;
    background: linear-gradient(135deg, #000 0%, #000 5%,transparent 5%, transparent 10%, #000 10%, #000 15%,transparent 15%,transparent 20%, #000 20%, #000 25%,transparent 25%,transparent 30%, #000 30%, #000 35%,transparent 35%,transparent 40%, #000 40%, #000 45%,transparent 45%,transparent 50%, #000 50%, #000 55%,transparent 55%,transparent 60%, #000 60%, #000 65%,transparent 65%,transparent 70%, #000 70%, #000 75%,transparent 70%,transparent 80%, #000 80%, #000 85%,transparent 85%,transparent 90%, #000 90%, #000 95%,transparent 95%);
    background-size: 3em 3em;
    opacity: .05;
}

body.content-editor-mode .text-field-container:not(.current-editor-obj) {
    cursor: pointer;
}

body.content-editor-mode main.current-editor-obj::after {
    border: 2px dashed #;
    top: 56px;
    height: calc(100% - 56px);
}

body.content-editor-mode main.current-editor-obj .main-select-area {
    cursor: default;
}

body.content-editor-mode main .main-select-area {
    pointer-events: all;
    opacity: 1;
    cursor: pointer;
}

body.content-editor-mode main:not(.current-editor-obj) .main-select-area:hover {
    background: linear-gradient(135deg, #000 0%, #000 5%,transparent 5%, transparent 10%, #000 10%, #000 15%,transparent 15%,transparent 20%, #000 20%, #000 25%,transparent 25%,transparent 30%, #000 30%, #000 35%,transparent 35%,transparent 40%, #000 40%, #000 45%,transparent 45%,transparent 50%, #000 50%, #000 55%,transparent 55%,transparent 60%, #000 60%, #000 65%,transparent 65%,transparent 70%, #000 70%, #000 75%,transparent 70%,transparent 80%, #000 80%, #000 85%,transparent 85%,transparent 90%, #000 90%, #000 95%,transparent 95%);
    background-size: 3em 3em;
    opacity: .05;
}










/* --   BODY.LANG-LIST   -- */

body.logged.lang-list #user-icons {
    transform: translate(0, -16px);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    opacity: 0;
    pointer-events: none;
}

body:not(.logged).lang-list #header-menu ul.level-1 {
    transform: translate(0, -16px);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    opacity: 0;
    pointer-events: none;
}

body.lang-list .languages-mask { pointer-events: all; }
body.lang-list .languages-list {
    transform: translate(0, 0);
    transition: all .3s cubic-bezier(.785, .135, .15, .86) .15s;
    opacity: 1;
}










/* --   BODY.FORM   -- */

/* body.form.personalization-hide #steps-list { transform: rotateX(0deg) translate(0, -200%) !important; }
body.form.personalization-hide #steps-list .highlight { opacity: 0 !important; }
body.form.personalization-hide header { height: 56px !important; }
body.form.personalization-hide main { transform: translate(0, -148px) !important; }
body.form.personalization-hide .step-back-v2,
body.form.personalization-hide .next-step-v2 {
    top: 232px !important;
} */

/* --   BODY.FORM   -- */

body.form.scrolldown-hide #steps-list { transform: rotateX(0deg) translate(0, -100%); }
body.form.scrolldown-hide #steps-list > ul .highlight { opacity: 0 !important; }
body.form.scrolldown-hide .step-back-v2,
body.form.scrolldown-hide .next-step-v2 { top: 160px; }

/* --   BODY.FORM.PERSONALIZATION-ACTIVE   -- */

body.form.personalization-active .personalization-list li:not(.selected) {
    opacity: .5;
    pointer-events: none !important;
}

body.form.personalization-active #steps-list ul li:not(.force-active) {
    color: #ccc;
    pointer-events: none !important;
}

body.form.personalization-active .personalization-title { opacity: 1 !important; }
body.form.personalization-active #steps-list { transform: rotateX(0deg) translate(0, -100%) !important; }
body.form.personalization-active #steps-list > ul {
    opacity: 0;
    transition: all .6s cubic-bezier(.785, .135, .15, .86) 0s !important;
}




body.form #steps-list {
    transform: rotateX(0deg);
    opacity: 1;
    pointer-events: all;
    transition: all .6s cubic-bezier(.785, .135, .15, .86) 0s !important;
}

body.form #user-panel {
    transform: rotateX(-60deg);
    opacity: 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s !important;
    pointer-events: none;
}

body.form #header-menu {
    transform: rotateX(-60deg);
    opacity: 0;
    pointer-events: none;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s !important;
}

body.form #header-menu ul.level-1 {
    transform: translate(0, 0) !important;
    opacity: 1 !important;
}

body.form #shopping-cart-toolbar-mask {
    transform: rotateX(0deg);
    opacity: 1;
    pointer-events: all;
    overflow: visible;
    transition: all .6s cubic-bezier(.785, .135, .15, .86) 0s !important;
}

body.form #product-name p {
    transform: translate(0, 0);
    opacity: 1;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) .6s, color .1s cubic-bezier(.785, .135, .15, .86) 0s !important;
}

body.form #parameters-list {
    opacity: 1;
    transform: translate(0, 0);
    transition: all .3s cubic-bezier(.785, .135, .15, .86) .6s !important;
}










body.lock-form #parameters-list ul li:not(.force-active).hide,
body.lock-form .thumb.selected .thumb-next-step,
body.lock-form .next-step-v2,
body.lock-form .step-back-v2,
body.lock-form #steps-list li:not(.force-active) {
    pointer-events: none !important;
    opacity: .5;
}

body.lock-form .next-step-v2,
body.lock-form .step-back-v2 {
    opacity: .25;
}

body.lock-form .thumb.selected .thumb-next-step {
    filter: grayscale(100%);
}












/* --   MOBILE MENU - WYSUWANE Z PRAWEJ   -- */

/* body.mobile-menu main { transform: translate(-320px, 0); }
body.mobile-menu > header { transform: translate(-320px, 0); }
body.mobile-menu > header.scroll-hide { transform: translate(-320px, -56px); }
body.mobile-menu > header.scroll-hide-locked { transform: translate(-320px, -56px) !important; }
body.mobile-menu > header.scroll-hide-more { transform: translate(-320px, -128px); }
body.mobile-menu #toolbar-switch:hover .burger { transform: rotate(0deg) scale(.85) !important; }
body.mobile-menu #toolbar-switch .burger { transform: rotate(0deg) scale(.75) !important; }
body.mobile-menu #toolbar-switch .burger span:nth-child(1) {
    transform: rotate(45deg);
    background: #;
    width: 24px;
    top: 16px;
}

body.mobile-menu #toolbar-switch .burger span:nth-child(2) { opacity: 0; }
body.mobile-menu #toolbar-switch .burger span:nth-child(3) {
    transform: rotate(-45deg);
    background: #;
    width: 24px;
    top: 16px;
}

#toolbar-switch.turn-left:hover .burger { transform: rotate(-180deg) scale(.8); } */











/*
 *   BODY CLASS: SEASONAL FORM
 *   ----------------------------
 *   KOLOROWANIE CAŁEGO FORMULARZA NA INNY KOLOR
 *   NIŻ "WEBCOLOR". ZAMIENIANY MARKER KOLORU: "#dd0000"
 */


body.seasonal-product #steps-list ul li::after { color: #dd0000; }
body.seasonal-product #steps-list ul li u { color: #dd0000; }
body.seasonal-product #steps-list ul li.highlight::before {
    border-bottom: 2px solid #dd0000;
    border-right: 2px solid #dd0000;
}

body.seasonal-product #cancel-product:hover,
body.seasonal-product #step-product-summary:hover {
    color: #dd0000 !important;
}

body.seasonal-product #product-summary h1 {
    color: #dd0000 !important;
}

body.seasonal-product .highlight b {
    background: #dd0000;
    background: -moz-linear-gradient(90deg, #dd000000 0%, #dd0000ff 50%, #dd000000 100%);
    background: -webkit-linear-gradient(90deg, #dd000000 0%, #dd0000ff 50%, #dd000000 100%);
    background: linear-gradient(90deg, #dd000000 0%, #dd0000ff 50%, #dd000000 100%);
}

body.seasonal-product main .webcolor { color: #dd0000 !important; }
body.seasonal-product main .option-title-v2.web { color: #dd0000; }
body.seasonal-product main .other-shipping-line > svg { color: #dd0000; }
body.seasonal-product main .flex-card.summary ul li b { color: #dd0000; }
body.seasonal-product main .bt:not(.light-gray) { background: #dd0000; }
body.seasonal-product main .span-loader { border-top: 2px solid #dd0000; }
body.seasonal-product #project_names2,
body.seasonal-product #project_names {
    border: 2px solid #dd0000;
}

body.seasonal-product .form_block .icon-added,
body.seasonal-product .thumb .icon-added {
    background: #dd0000;
}

body.seasonal-product .thumb.v2.selected .thumb-photo .img svg,
body.seasonal-product .thumb.v2.selected .thumb-photo:hover .img svg {
    color: #dd0000;
}

body.seasonal-product .thumb.v2.selected .thumb-symbol,
body.seasonal-product .thumb.v2.selected:hover .thumb-symbol {
    color: #dd0000;
}

body.seasonal-product .thumb.v2.selected .thumb-title,
body.seasonal-product .thumb.v2.selected:hover .thumb-title {
    color: #dd0000;
}

body.seasonal-product .amount-container .amount { color: #dd0000; }
body.seasonal-product .filter-tabs li::after { color: #dd0000; }
body.seasonal-product .personalization-list li.selected .symbol { background: #dd0000; }
body.seasonal-product .target-field b.saved.selected::after { background: #dd0000; }
body.seasonal-product .personalization-step .field-subtitle > .empty { color: #dd0000; }
body.seasonal-product .personalization-step .field-subtitle { color: #dd0000; }
body.seasonal-product .switch-tabs .switch-tab.selected {
    background: #dd0000;
    border: 1px solid #dd0000;
}

body.seasonal-product #product-amount span { background: #dd0000; }
body.seasonal-product #show-projects-list { color: #dd0000; }
body.seasonal-product #projects-list { border: 2px solid #dd0000; }











/*
 *   BODY CLASS: MOBILE
 *   ---------------------
 *   UKRYWANIE NIEKTÓRYCH ELEMENTÓW NA STRONIE
 *   NA POTRZEBY MOBILE
 */

body.mobile header,
body.mobile footer { display: none; }
body.mobile:not(.logged) > main { margin: 72px 0 0 0; }
body.mobile main h1 { margin: 0; }











/*
 *   BODY CLASS: IFRAME
 *   ---------------------
 *   UKRYWANIE NIEKTÓRYCH ELEMENTÓW NA STRONIE
 *   W PRZYPADKU OSADZENIA SYSTEMU W RAMCE PŁYWAJĄCEJ IFRAME
 */

body.iframe > footer { display: none !important; }
body.iframe #header-menu .logo { display: none !important; }
body.iframe > header .logo { display: none !important; }
/* --   SCENA   -- */

.scene-3D {
    width: 100%;
    height: auto;
    perspective: 1200px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 5px 5px;
    padding: 180px 0 104px 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

/* --   MODEL PRODUKTU   -- */

.model {
    transform-style: preserve-3d;
    backface-visibility: visible;
    transform-origin: center center;
    transition: all .6s cubic-bezier(.39, .58, .57, 1);
    z-index: 100;
}

.model * {
    position: absolute;
    transform-style: preserve-3d;
    backface-visibility: visible;
    pointer-events: none;
}

/* --   PODŁOŻE   -- */

.model .ground {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1200px;
    height: 1200px;
    background: rgba(0, 0, 0, 0);
    transform-origin: center bottom;
    transform: rotateX(90deg) translateX(-35%) translateY(50%) translateZ(-1px);
    z-index: 98;
    border-radius: 100%;
    background: #eee;
    box-shadow: 0 0 220px 250px #eee;
    opacity: .5;
}

/* --   SHADOW   -- */

.model .shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: #ddd;
    box-shadow: 0 0 10px 4px #ddd;
}

.model .ff {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddd;
    display: flex;
    font-size: 24pt;
    justify-content: center;
    align-items: center;
    font-family: titillium_websemibold;
    transition: all .3s cubic-bezier(.39, .58, .57, 1);
}

.model .bf {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #aaa;
    transform: translateZ(-2px) rotateY(180deg);
    display: flex;
    font-size: 24pt;
    justify-content: center;
    align-items: center;
    font-family: titillium_websemibold;
    transition: all .3s cubic-bezier(.39, .58, .57, 1);
}

/* --   GEOMETRY FACES   -- */

.model .ff::after,
.model .ff::before,
.model .bf::after,
.model .bf::before {
    content: '';
    position: absolute;
    transform-style: preserve-3d;
    backface-visibility: visible;
    pointer-events: none;
}

/* --   LEFT FACE   -- */

.model .ff::after {
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    transform-origin: left center;
    background: #ddd;
    transform: rotateY(90deg);
}

/* --   RIGHT FACE   -- */

.model .ff::before {
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    transform-origin: right center;
    background: #ddd;
    transform: rotateY(-90deg);
}

/* --   TOP FACE   -- */

.model .bf::after {
    left: 0;
    top: 0;
    height: 2px;
    width: 100%;
    transform-origin: top center;
    background: #ddd;
    transform: rotateX(-90deg);
}

/* --   BOTTOM FACE   -- */

.model .bf::before {
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: bottom center;
    background: #ddd;
    transform: rotateX(90deg);
}










/* --   POLA DO WSKAZYWANIA UMIEJSCOWIENIA PERSONALIZACJI   -- */

.target-field {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
}

.scene-3D.lock-fields .target-field b { pointer-events: none !important; }
.target-field b {
    cursor: pointer;
    border-right: 1px solid rgba(0, 0, 0, .075);
    border-bottom: 1px solid rgba(0, 0, 0, .075);
    transition: all .3s cubic-bezier(.39, .58, .57, 1);
    color: rgba(0, 0, 0, .3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12pt;
    font-family: titillium_websemibold;
    position: relative !important;
}

.target-field b.selected:hover { background: rgba(255, 255, 255, 0); }
.target-field b:hover {
    background: rgba(255, 255, 255, .5);
    color: rgba(0, 0, 0, .4);
}

.target-field b.technique-symbol::after { content: attr(data-technique-symbol); }
.target-field b::after {
    content: attr(data-field);
    background: #666;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-radius: 100%;
    font-size: 14pt;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s cubic-bezier(.39, .58, .57, 1);
    pointer-events: none;
    opacity: 0;
}

.target-field b.saved.selected::after {
    animation-duration: .3s;
    animation-name: bounceIn;
    animation-fill-mode: both;
    background: #;
    opacity: 1;
}

.target-field b.saved::after { opacity: 1; }
.target-field b.saved { pointer-events: none !important; }
.target-field b.lock::after { pointer-events: none !important; }
.target-field b.lock {
    pointer-events: none !important;
    background: #ccc;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, .25) 10px, rgba(255, 255, 255, .25) 20px);
}

.target-field._1x3 b::after {
    font-size: 10pt;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -56px;
    line-height: 40px;
}

.target-field._1x3 b {
    width: 100%;
    height: 33.33333%;
    font-size: 10pt;
}

.target-field._3x3 b {
    width: 33.33333%;
    height: 33.33333%;
}




















/* --   FOLIO-2 WINGS - FOLIO GIFT Z 2 SKRZYDEŁKAMI   -- */

.folio-2-wings .front {
    width: 100%;
    height: 100%;
}

.folio-2-wings .right {
    height: 100%;
    left: 50%;
    transform-origin: left center !important;
    width: 100%;
    transform: rotateY(40deg);
}

.folio-2-wings .left {
    height: 100%;
    right: 50%;
    transform-origin: right center !important;
    width: 100%;
    transform: rotateY(-40deg);
}

.folio-2-wings.front-view { transform: translate(0, 0) rotateX(-20deg) rotateZ(0deg) scale3d(1, 1, 1); }
.folio-2-wings.front-view .target-field > b,
.folio-2-wings.front-view .target-field {
    pointer-events: all;
}




















/* --   FOLIO-3 WINGS - FOLIO GIFT Z 3 SKRZYDEŁKAMI   -- */

.folio-3-wings .front {
    width: 100%;
    height: 100%;
}

.folio-3-wings .right {
    height: 100%;
    left: 100%;
    transform-origin: left center !important;
    width: 100%;
    transform: rotateY(40deg);
}

.folio-3-wings .left {
    height: 100%;
    right: 100%;
    transform-origin: right center !important;
    width: 100%;
    transform: rotateY(-40deg);
}

.folio-3-wings.front-view { transform: translate(0, 0) rotateX(-20deg) rotateZ(0deg) scale3d(1, 1, 1); }
.folio-3-wings.front-view .target-field > b,
.folio-3-wings.front-view .target-field {
    pointer-events: all;
}




















/* --   SLIP-BOX - WSUWANE PUDEŁKO   -- */

.slip-box .front {
    width: 100%;
    height: 100%;
    transform: translateZ(18px);
}

.slip-box .back {
    width: 100%;
    height: 100%;
    transform: translateZ(-16px) rotateY(180deg);
}

.slip-box .top .ff { background: #d4d4d4; }
.slip-box .top {
    width: 100%;
    transform-origin: center top !important;
    height: 32px !important;
    transform: rotateX(90deg) translateY(-16px);
}

.slip-box .right {
    height: 100%;
    right: 0;
    transform-origin: right center !important;
    width: 32px !important;
    transform: rotateY(90deg) translateX(16px);
}

.slip-box .bottom {
    width: 100%;
    bottom: 0;
    transform-origin: bottom center !important;
    height: 32px !important;
    transform: rotateX(-90deg) translateY(16px);
}

.slip-box .bottom .bf {
    background: #999;
}

/* --   RODZAJE WIDOKÓW WSUWANEGO PUDEŁKA   -- */

.slip-box.front-view { transform: translate(0, 0) rotateX(-20deg) rotateY(26deg) rotateZ(0deg) scale3d(1, 1, 1); }
.slip-box.front-view > .front > .ff > .target-field > b,
.slip-box.front-view > .front > .ff > .target-field {
    pointer-events: all;
}

.slip-box.back-view { transform: translate(0, 0) rotateX(-20deg) rotateY(156deg) rotateZ(0deg) scale3d(1, 1, 1); }
.slip-box.back-view > .back > .ff > .target-field > b,
.slip-box.back-view > .back > .ff > .target-field {
    pointer-events: all;
}




















/* --   STANDARD-BOX - PUDEŁKO OTWIERANE OD GÓRY   -- */

.standard-box .back > .bf > .target-field { transform: rotateX(180deg) rotateY(180deg); }
.standard-box .back > .ff { background: #bbb; }
.standard-box .back {
    width: 100%;
    height: 100%;
    transform: rotateX(90deg);
    transition: all .6s cubic-bezier(.39, .58, .57, 1);
}

.standard-box .left {
    height: 100%;
    left: 0;
    transform-origin: left center !important;
    width: 40px !important;
    transform: rotateY(-90deg);
}

.standard-box .right {
    height: 100%;
    right: 0;
    transform-origin: right center !important;
    width: 40px !important;
    transform: rotateY(90deg);
}

.standard-box .bottom .ff { background: #e7e7e7; }
.standard-box .bottom {
    width: 100%;
    left: 0;
    bottom: 0;
    transform-origin: bottom right !important;
    height: 40px !important;
    transform: rotateX(-90deg);
}

.standard-box .top .bf { background: #a1a1a1; }
.standard-box .top {
    width: 100%;
    left: 0;
    top: 0;
    transform-origin: top right !important;
    height: 40px !important;
    transform: rotateX(90deg);
}

.standard-box .lid .bf { background: #ddd; }
.standard-box .lid {
    width: 100%;
    height: 100%;
    transform-origin: left top;
    transform: translateZ(40px) rotateY(-10deg);
    transition: all .6s cubic-bezier(.39, .58, .57, 1);
}

/* --   RODZAJE WIDOKÓW PUDEŁKA OTWIERANEGO OD GÓRY   -- */

/* --   GÓRA PUDEŁKA   -- */

.standard-box.top-view { transform: translate(0, 0) rotateX(-50deg) rotateY(-20deg) rotateZ(0deg) scale3d(1, 1, 1); }
.standard-box.top-view .lid > .ff > .target-field > b,
.standard-box.top-view .lid > .ff > .target-field {
    pointer-events: all;
}

/* --   OTWARTE PUDEŁKO   -- */

.standard-box.opened-view { transform: translateX(130px) rotateX(-50deg) rotateY(12deg) rotateZ(0deg) scale3d(1, 1, 1); }
.standard-box.opened-view .lid { transform: translateZ(40px) rotateY(-160deg); }
.standard-box.opened-view .lid > .bf > .target-field > b,
.standard-box.opened-view .lid > .bf > .target-field {
    pointer-events: all;
}

.standard-box.opened-view .back > .ff { background: #ccc; }
.standard-box.opened-view .back > .ff > .target-field > b,
.standard-box.opened-view .back > .ff > .target-field {
    pointer-events: all;
}

/* --   DÓŁ PUDEŁKA   -- */

.standard-box.bottom-view { transform: translate(0, 0) rotateX(60deg) rotateY(10deg) rotateZ(-155deg) scale3d(1, 1, 1); }
.standard-box.bottom-view .lid > .bf { background: #ccc; }
.standard-box.bottom-view .back { transform: rotateX(215deg) rotateY(14deg); }
.standard-box.bottom-view .back > .bf { background: #ccc; }
.standard-box.bottom-view .back > .bf > .target-field > b { transform: rotate(180deg); }
.standard-box.bottom-view .back > .bf > .target-field > b,
.standard-box.bottom-view .back > .bf > .target-field {
    pointer-events: all;
}




















/* --   ENVELOPE - KOPERTA / WOREK   -- */

.envelope .front {
    width: 100%;
    height: 100%;
    transform: translateZ(18px);
}

.envelope .back {
    width: 100%;
    height: 100%;
    transform: translateZ(10px) rotateY(180deg);
}

.envelope .top .ff { background: #d4d4d4; }
.envelope .top {
    width: 100%;
    transform-origin: center top !important;
    height: 6px !important;
    transform: rotateX(90deg) translateY(10px);
}

.envelope .right {
    height: 100%;
    right: 0;
    transform-origin: right center !important;
    width: 6px !important;
    transform: rotateY(90deg) translateX(-10px);
}

.envelope .bottom {
    width: 100%;
    bottom: 0;
    transform-origin: bottom center !important;
    height: 6px !important;
    transform: rotateX(-90deg) translateY(-10px);
}

.envelope .bottom .bf {
    background: #999;
}

/* --   RODZAJE WIDOKÓW WSUWANEGO PUDEŁKA   -- */

.envelope.front-view { transform: translate(0, 0) rotateX(-20deg) rotateY(26deg) rotateZ(0deg) scale3d(1, 1, 1); }
.envelope.front-view > .front > .ff > .target-field > b,
.envelope.front-view > .front > .ff > .target-field {
    pointer-events: all;
}

.envelope.back-view { transform: translate(0, 0) rotateX(-20deg) rotateY(156deg) rotateZ(0deg) scale3d(1, 1, 1); }
.envelope.back-view > .back > .ff > .target-field > b,
.envelope.back-view > .back > .ff > .target-field {
    pointer-events: all;
}




















/* --   ALBUMY   -- */

.album-3D {
    transform-style: preserve-3d;
    backface-visibility: visible;
    transform-origin: center center;
    transition: all .6s cubic-bezier(.39, .58, .57, 1);
    z-index: 100;
}

.album-3D * {
    transform-style: preserve-3d;
    backface-visibility: visible;
    pointer-events: none;
}

/* --   BOKI   -- */

.album-3D .side-left {
    position: absolute;
    left: -2px;
    top: 0;
    z-index: 100;
    background: #d9d9d9;
    width: 2px;
    height: 100%;
    transform-origin: right center;
    transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
}

.album-3D .side-top {
    position: absolute;
    left: 0;
    top: -2px;
    z-index: 100;
    background: -moz-linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    width: 100%;
    height: 2px;
    transform-origin: center bottom;
    transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}

.album-3D .side-right {
    position: absolute;
    right: -2px;
    top: 0;
    z-index: 100;
    background: -moz-linear-gradient(0deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: linear-gradient(0deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    width: 2px;
    height: 100%;
    transform-origin: left center;
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

.album-3D .side-bottom {
    position: absolute;
    left: 0;
    bottom: -2px;
    z-index: 100;
    background: #aaa;
    width: 100%;
    height: 2px;
    transform-origin: center top;
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

.album-3D .side-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: -moz-linear-gradient(-45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: linear-gradient(-45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    transform: translateZ(-2px) rotateY(-180deg);
}

.album-3D .side-left.bl { left: -20px; width: 20px; background: #fafafa; }
.album-3D .side-top.bl { top: -20px; height: 20px; background: #fafafa; }
.album-3D .side-right.bl { right: -20px; width: 20px; background: #fafafa; }
.album-3D .side-bottom.bl { bottom: -20px; height: 20px; background: #fafafa; }
.album-3D .side-back.bl {
    transform: translateZ(-20px) rotateY(-180deg);
    background: -moz-linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
}





/* --   PRZEDNIA OKŁADKA   -- */

.album-3D .front-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: -moz-linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    transform-origin: left center;
    transform: translateZ(12px) rotateY(0deg);
    transition: all .6s cubic-bezier(.39, .58, .57, 1);
}

/* --   TYLNA OKŁADKA   -- */

.album-3D .back-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: -moz-linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238,238,238,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: linear-gradient(45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    transform-origin: left center;
    transform: translateZ(-10px) rotateY(0deg);
    transition: all .6s cubic-bezier(.39, .58, .57, 1);
}

/* --   BLOK ALBUMU   -- */

.album-3D .album-block {
    position: absolute;
    left: 0;
    top: 2px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    z-index: 100;
    background: -moz-linear-gradient(-45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: linear-gradient(-45deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    transform-origin: left center;
    transform: translateZ(10px);
}

/* --   GRZBIET OKŁADKI   -- */

.album-3D .spine {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 100%;
    z-index: 100;
    background: -moz-linear-gradient(0deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    background: linear-gradient(0deg, rgba(204, 204, 204, 1) 0%, rgba(238, 238, 238, 1) 100%);
    transform-origin: left center;
    transform: translateX(-1px) translateZ(-12px) rotateY(-90deg);
}

/* --   PODSTAWA   -- */

.album-3D .ground {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1200px;
    height: 1200px;
    background: rgba(0, 0, 0, 0);
    transform-origin: center bottom;
    transform: rotateX(90deg) translateX(-35%) translateY(50%) translateZ(-1px);
    z-index: 98;
    border-radius: 100%;
    background: #eee;
    box-shadow: 0 0 220px 250px #eee;
    opacity: .5;
}

/* --   CIEŃ   -- */

.album-3D .shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: #ddd;
    box-shadow: 0 0 10px 4px #ddd;
}

.album-3D .front-cover .side-bottom .shadow,
.album-3D .back-cover .side-bottom .shadow,
.album-3D .spine .side-bottom .shadow {
    box-shadow: 0 0 4px 2px #e2e2e2;
}










/* ==   STANY WIDOKU ALBUMU   == */

/* --   PRZEDNIA OKŁADKA   -- */

.album-3D.front-cover-view { transform: translate(0, 0) rotateX(-20deg) rotateY(-24deg) rotateZ(0deg) scale3d(1, 1, 1); }
.album-3D.front-cover-view .front-cover > .target-field > b,
.album-3D.front-cover-view .front-cover > .target-field {
    pointer-events: all;
}

/* --   TYLNA OKŁADKA   -- */

.album-3D.back-cover-view { transform: translate(0, 0) rotateX(-20deg) rotateY(-150deg) rotateZ(0deg) scale3d(1, 1, 1); }
.album-3D.back-cover-view .back-cover > .side-back > .target-field > b,
.album-3D.back-cover-view .back-cover > .side-back > .target-field {
    pointer-events: all;
}

/* --   GRZBIET   -- */

.album-3D.spine-view { transform: translate(0, 0) rotateX(0deg) rotateY(86deg) rotateZ(0deg) scale3d(1, 1, 1); }
.album-3D.spine-view .spine > .target-field b,
.album-3D.spine-view .spine > .target-field {
    pointer-events: all;
}

/* --   PRZEDNIA OKŁADKA WEWNĘTRZNA   -- */

.album-3D.inside-cover-front-view { transform: translate(45%, 0) rotateX(0deg) rotateY(-20deg) rotateZ(0deg) scale3d(1, 1, 1); }
.album-3D.inside-cover-front-view .front-cover { transform: translateZ(12px) rotateY(-145deg); }
.album-3D.inside-cover-front-view .album-block > .target-field b,
.album-3D.inside-cover-front-view .album-block > .target-field,
.album-3D.inside-cover-front-view .front-cover .side-back > .target-field b,
.album-3D.inside-cover-front-view .front-cover .side-back > .target-field {
    pointer-events: all;
}

/* --   TYLNA OKŁADKA WEWNĘTRZNA   -- */

.album-3D.inside-cover-back-view { transform: translate(-45%, 0) rotateX(0deg) rotateY(-160deg) rotateZ(0deg) scale3d(1, 1, 1); }
.album-3D.inside-cover-back-view .back-cover { transform: translateZ(-10px) rotateY(145deg); }
.album-3D.inside-cover-back-view .album-block .side-back > .target-field b,
.album-3D.inside-cover-back-view .album-block .side-back > .target-field,
.album-3D.inside-cover-back-view .back-cover > .target-field b,
.album-3D.inside-cover-back-view .back-cover > .target-field {
    pointer-events: all;
}










/* --   FORMATY ALBUMÓW I PUDEŁEK   -- */

._10x10 { width: 105px; height: 103px; }
._10x15 { width: 155px; height: 103px; }
._13x19 { width: 194px; height: 132px; }
._15x10 { width: 114px; height: 152px; }
._15x15 { width: 155px; height: 153px; }
._15x20 { width: 205px; height: 153px; }
._15x23 { width: 234px; height: 153px; }
._20x15 { width: 145px; height: 203px; }
._20x20 { width: 205px; height: 203px; }
._23x23 { width: 235px; height: 235px; }
._20x30 { width: 305px; height: 203px; }
._25x25 { width: 245px; height: 255px; }
._25x35 { width: 356px; height: 255px; }
._25x38 { width: 381px; height: 255px; }
._28x35 { width: 352px; height: 281px; }
._30x22 { width: 230px; height: 304px; }
._30x30 { width: 305px; height: 304px; }
._30x40 { width: 403px; height: 304px; }
._30x45 { width: 452px; height: 304px; }
._35x25 { width: 255px; height: 356px; }
._35x28 { width: 284px; height: 356px; }
._35x35 { width: 356px; height: 356px; }
._38x25 { width: 255px; height: 381px; }
._40x30 { width: 305px; height: 404px; }
._40x40 { width: 406px; height: 404px; }
._40x50 { width: 506px; height: 404px; }
._50x40 { width: 406px; height: 504px; }
._42x42 { width: 420px; height: 420px; }
._38x38 { width: 380px; height: 380px; }
._42x35 { width: 350px; height: 420px; }
._35x42 { width: 420px; height: 350px; }
._24x35 { width: 350px; height: 240px; }
._25x30 { width: 300px; height: 250px; }
._20x25 { width: 250px; height: 200px; }





/* --   SKALOWANIE WIDOKU DLA DUŻYCH ALBUMÓW POZIOMYCH   -- */

._30x40.show-inside-cover-front { transform: scale3d(.8, .8, .8) translate(48%, 0) rotateX(0deg) rotateY(-20deg) rotateZ(0deg) }
._30x45.show-inside-cover-front { transform: scale3d(.8, .8, .8) translate(48%, 0) rotateX(0deg) rotateY(-20deg) rotateZ(0deg) }
._40x50.show-inside-cover-front { transform: scale3d(.8, .8, .8) translate(48%, 0) rotateX(0deg) rotateY(-20deg) rotateZ(0deg) }

._30x40.show-inside-cover-back { transform: scale3d(.8, .8, .8) translate(-48%, 0) rotateX(0deg) rotateY(-160deg) rotateZ(0deg); }
._30x45.show-inside-cover-back { transform: scale3d(.8, .8, .8) translate(-48%, 0) rotateX(0deg) rotateY(-160deg) rotateZ(0deg); }
._40x50.show-inside-cover-back { transform: scale3d(.8, .8, .8) translate(-48%, 0) rotateX(0deg) rotateY(-160deg) rotateZ(0deg); }
html {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
    padding: 0;
    margin: 0;
    background: #f8f8f8;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    font-family: titillium_webregular;
    font-size: 10pt;
    float: left;
    /* transition: all .25s cubic-bezier(.785, .135, .15, .86); */
}

body.scroll-off {
    position: fixed;
    overflow-y: scroll;
}

body * {
    margin: 0;
    padding: 0;
    position: relative;
 /* border: 0; */
    text-decoration: none;
    box-sizing: border-box;
    float: left;
    outline: none;
    font-weight: 100;
}

img {
    border: 0;
    outline: 0;
}

svg {
    pointer-events: none;
}

b { font-family: titillium_websemibold; }
a { color: #; }
a:hover { text-decoration: none; }





.pres { width: 100%; }
.pres pre {
    width: 50%;
    padding: 32px;
    display: none;
}










/* --   NAGŁÓWEK   -- */

body > header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 128px;
    padding: 0 32px;
    z-index: 20001;
    background: #eeeded;
    transition: all .25s cubic-bezier(.785, .135, .15, .86);
    user-select: none;
    will-change: transform;
    perspective: 1600px;
}

body > header.scroll-hide { transform: translate(0, -56px); }
body > header.scroll-hide-locked { transform: translate(0, -56px) !important; }
body > header.scroll-hide-more { transform: translate(0, -128px); }
body > header.shadow #header-menu { box-shadow: 0 1px 32px 0 rgba(0, 0, 0, .05); }

@media only screen and (max-width: 800px) {
    header {
        display: none;
    }
}











/* --   LOGO   -- */

.logo img { height: 20px; }
.logo {
    height: 20px;
    position: absolute;
    left: 32px;
    top: 26px;
    z-index: 99999;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) .15s;
}



/* --   DIGITALALBUM.PL -    -- */

.logo.digitalalbum:hover { filter: brightness(1.05); }
.logo.digitalalbum {
    width: 225px;
    height: 20px;
    position: absolute;
    left: 32px;
    top: 26px;
    z-index: 99999;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
}

.logo.digitalalbum svg {
    width: 225px;
    height: 20px;
}

/* .catchword:hover { color: #; }
.catchword {
    position: absolute;
    width: 225px;
    height: 25px;
    left: 290px;
    top: 24px;
    color: #444;
}

.catchword svg {
    width: 225px;
    height: 25px;
} */

.catchword {
    position: absolute;
    left: 290px;
    top: 24px;
    color: #666;
    font-size: 13pt;
    font-family: titillium_weblight;
}

@media only screen and (max-width: 1440px)
{
    .catchword { display: none; }
}

/* .catchword:hover {
    color: #;
    font-family: titillium_webregular;
} */



/* --   EFOTOKSIAZKA.PL   -- */

.logo.efotoksiazka {
    width: 240px;
    height: 40px;
    top: 16px;
    margin: 0 0 0 16px;
}

.logo.efotoksiazka img {
    width: 240px;
    height: 40px;
}



/* --   JIGGYALBUMS.EU   -- */

.logo.jiggyalbums {
    height: 48px;
    bottom: 10px;
    top: auto;
}

.logo.jiggyalbums img {
    height: 48px;
}



/* --   JIGGYALBUMS.DE   -- */

.logo.jiggyalbumsde {
    height: 48px;
    bottom: 10px;
    top: auto;
}

.logo.jiggyalbumsde img {
    height: 48px;
}



/* --   EFOTO   -- */

.logo.efoto {
    width: auto;
    height: 44px;
    top: 14px;
    margin: 0;
}

.logo.efoto img {
    width: auto;
    height: 44px;
}

#coming-soon-logo {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
}

#coming-soon-logo img {
    width: 400px;
    height: 400px;
}



/* --   CARDINALALBUMS   -- */

.logo.cardinalalbums {
    height: 30px;
    bottom: 10px;
    top: 24px;
}

.logo.cardinalalbums img {
    height: 30px;
}



/* --   PCP DRUK   -- */

.logo.pcpdruk {
    height: 24px;
    bottom: 10px;
    top: 24px;
}

.logo.pcpdruk img {
    height: 24px;
}



/* --   ZEBRA ONLINE   -- */

.logo.zebraonline {
    width: 140px;
    height: 140px;
    bottom: auto;
    top: 0;
    left: 0;
    background: #fff;
}

.logo.zebraonline img {
    width: 100px;
    height: 100px;
    margin: 20px;
}










/* --   PANEL KLIENTA   -- */

#user-panel {
    width: 100%;
    position: absolute;
    height: 56px;
    top: 0;
    left: 0;
    z-index: 14;
    padding: 0 32px;
    background: #fafafa;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    transition: all .6s cubic-bezier(.785, .135, .15, .86) .3s;
}

#user-info {
    height: 56px;
    line-height: 56px;
    color: #888;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    margin: 0 8px 0 0;
    text-transform: uppercase;
}

#user-icons {
    transition: all .3s cubic-bezier(.785, .135, .15, .86) .15s;
}

#user-panel .back-to-old-version {
    position: absolute;
    left: 32px;
    top: 12px;
}











/* --   IKONKI UŻYTKOWNIKA PO ZALOGOWANIU   -- */

.icons {
    float: right;
    height: 56px;
    z-index: 000;
}

.icons .icon {
    width: 56px;
    height: 56px;
    cursor: pointer;
    margin: 0 8px 0 0;
    color: #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icons .icon span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icons .icon:hover,
.icons .icon.active {
    color: #;
}

.icons .icon.active-bg svg { transform: translate(0, -2px); }
.icons .icon.active-bg {
    pointer-events: none;
    border-top: 2px solid #f00;
}

.icons .icon.invert-active { pointer-events: none; }
.icons .icon.invert-active svg,
.icons .icon.invert-active:hover {
    color: #fff !important;
}

.icons .icon.invert-active::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    background: #0066ff;
    border-radius: 3px;
    z-index: 9;
    pointer-events: none;
}

.icons .icon.fr { margin: 0 0 0 8px; }
.icons .icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2px;
    z-index: 10;
}

.icons .icon:hover svg {
    transform: scale(1.2);
    stroke-width: 1px;
}

.icons .icon.invert-active:hover svg { color: #fff; }
.icons .icon.switch-off svg { color: #ccc; }
.icons .icon.webcolor { color: #; }
.icons .icon.blue { color: rgba(19, 126, 255, 1); }
.icons .icon.red { color: #fe4d62; }
.icons .icon.blue.invert {
    background: rgba(19, 126, 255, 1);
    color: #fff;
    border-radius: 100%;
}

.icons .icon.green-fill svg {
    color: #0b9d00;
    fill: #0b9d00;
}

.icons .separator {
    height: 20px;
    width: 1px;
    background: #ddd;
    transform: translate(0, -50%);
    top: 50%;
    margin: 0 32px;
}

@media only screen and (max-width: 1360px)
{
    #user-icons.icons .icon { width: 48px; }
}

@media only screen and (max-width: 1280px)
{
    #user-icons.icons .icon {
        margin: 0;
    }

    .icons .separator {
        margin: 0 16px;
    }
}





/* --   GWIAZDKA DO USTAWIANIA STRONY STARTOWEJ   -- */

#set-as-home.filled svg {
    fill: #;
    color: #;
}





/* --   LICZNIK PRODUKTÓW Z KOSZYKA PRZY IKONCE   -- */

#mobile-cart-amount,
#cart-amount,
#cart-amount-clone {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #;
    color: #fff;
    font-size: 7pt;
    font-family: AriaL;
    text-align: center;
    top: 4px;
    line-height: 17px;
    left: 38px;
}

#mobile-cart-amount,
#cart-amount {
    transition: all .2s ease-out;
}

#mobile-cart-amount-clone,
#cart-amount-clone {
    background: #e70000;
}

#mobile-cart-amount-clone.added,
#cart-amount-clone.added {
    transform: scale(1.5);
    opacity: 0;
    transition: all .25s ease-in;
}










/* --   IKONKA CRMA   -- */

.crm-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    z-index: 11;
}

/* #user-panel .crm-icon {
    width: 56px;
    height: 56px;
} */

.crm-icon:hover svg { transform: scale(1.1); }
.crm-icon:hover { filter: brightness(1.2); }
.crm-icon svg {
    width: 24px;
    height: 24px;
 /* transition: all .1s cubic-bezier(.785, .135, .15, .86); */
}










/* --   WYBÓR JĘZYKA   -- */

.lang:hover {
    color: #fff;
    transform: scale(1.1);
}

#user-panel .lang { width: 56px; }
.lang {
    float: right;
    width: 72px;
    height: 100%;
    line-height: 32px;
    text-align: center;
    z-index: 11;
    color: rgba(255, 255, 255, .85);
    text-transform: uppercase;
    cursor: pointer;
    font-family: titillium_weblight;
    font-size: 9pt;
    user-select: none;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lang b {
    width: 32px;
    height: 32px;
    z-index: 2;
}

/* .lang:hover b::after { transform: scale(1.025); } */
.lang:hover b::after { filter: brightness(1.2); }
.lang b::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #;
    border-radius: 100%;
    pointer-events: none;
    z-index: -1;
    transform: scale(.9);
}

.languages-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 32px;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}

#user-panel .languages-list { padding: 0 56px 0 0; }
.languages-list {
    float: right;
    height: 100%;
    z-index: 3000;
    padding: 0 72px 0 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    opacity: 0;
}










/* --   INFO Z WALIDACJĄ FORMULARZY   -- */

#input_validation_info {
          position: absolute;
              left: 0;
               top: 0;
             width: auto;
            height: 40px;
           padding: 0 16px;
       line-height: 40px;
        background: #c30000;
             color: #fff;
     border-radius: 5px;
           z-index: 300000;
        text-align: center;
    text-transform: uppercase;
         transform: translate(-16px, 0);
}

#input_validation_info p::after {
          content: '';
         position: absolute;
             left: 8px;
              top: -10px;
            width: 10px;
           height: 10px;
    border-bottom: 5px solid #c30000;
      border-left: 5px solid transparent;
     border-right: 5px solid transparent;
}










/* --   STOPKA   -- */

body > footer.z-up { z-index: 99999; }
body > footer {
    box-shadow: none;
    width: 100%;
    height: auto;
    background: #222;
    padding: 56px 40px 128px 40px;
    transition: all .25s cubic-bezier(0, .65, .34, .99);
    z-index: 101;
    display: flex;
    flex-wrap: nowrap;
}

body > footer.full {
    width: calc(100% + 256px);
    margin: 0 0 0 -128px;
    background: #111;
    padding: 40px 88px;
}

body > footer.full::after {
    content: '';
    width: 100%;
    height: 128px;
    left: 0;
    top: 100%;
    position: absolute;
    background: #0a0a0a;
}

body > footer .col {
    width: 25%;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, .15);
    padding: 0 40px;
    text-align: left;
    margin: 0 0 40px 0;
}

body > footer .col .title {
    font-size: 1.17em;
    font-family: titillium_webbold;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    text-align: left;
    margin: 0 0 24px 0;
}

body > footer .col .title::after {
    content: '';
    width: 2px;
    height: 100%;
    left: -42px;
    top: 0;
    position: absolute;
    background: #aaa;
}

body > footer .col .content {
    font-family: titillium_weblight;
    color: rgba(255, 255, 255, .5);
    line-height: 24px;
    width: 100%;
    margin: 0 0 24px 0;
}

body > footer .col .content b {
    color: rgba(255, 255, 255, .8);
}

body > footer .col .content a {
    clear: both;
    width: auto;
    text-align: left;
    color: rgba(255, 255, 255, .5);
    line-height: 24px;
}

body > footer .col .content .infoline {
    width: 100%;
    text-align: left;
    color: rgba(255, 255, 255, .9);
    line-height: 24px;
    font-size: 18pt;
    font-family: titillium_webbold;
}

body > footer .col .content .infoline-legend {
    width: 100%;
    text-align: left;
    margin: 8px 0 0 0;
}

body > footer .col .content a:hover {
    color: rgba(255, 255, 255, .75);
}

body > footer .col .content .footer-follow-icon {
    width: 32px;
    height: 32px;
    clear: none;
    margin: 0 16px 0 0;
    transition: all .1s ease-out;
}

body > footer .col .content .footer-follow-icon:hover {
    transform: scale(1.1);
}

body > footer .col .content .footer-follow-icon img {
    width: 32px;
    height: 32px;
}

body > footer .copyrights {
    width: calc(100% + 80px);
    text-align: center;
    height: 64px;
    line-height: 64px;
    color: #999;
    font-size: 9pt;
    text-transform: uppercase;
    background: #1a1a1a;
    margin: 64px 0 0 0;
    border-bottom: 6px solid #;
    left: -40px;
    position: absolute;
    bottom: 0;
}

body > footer .copyrights i {
    font-style: normal;
    font-family: Arial;
    float: none;
    display: inline-block;
}

body > footer.full .copyrights {
    color: #aaa;
}

body > footer .gopc-logo {
    width: 100px;
    margin: 80px 0 0 0;
}

@media only screen and (max-width: 1440px)
{
    body > footer .col {
        padding: 0 20px;
    }

    body > footer .col .title::after {
        left: -22px;
    }
}

@media only screen and (max-width: 1280px)
{
    body > footer {
        display: block;
    }
}

@media only screen and (max-width: 1024px)
{
    body > footer .col {
        width: 33.33333%;
    }
}

@media only screen and (max-width: 800px)
{
    body > footer .col {
        width: 50%;
    }
}

@media only screen and (max-width: 667px)
{
    body > footer .col {
        width: 100%;
    }
}







/* --   INFO O FUNDUSZACH UNIJNYCH   -- */

#european_union_info {
    background: rgba(252, 252, 252, 1);
    background: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 1) 100%, rgba(252, 252, 252, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 1) 100%, rgba(252, 252, 252, 1) 100%);
    background: linear-gradient(to bottom, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 1) 100%, rgba(252, 252, 252, 1) 100%);
    box-shadow: none;
    width: calc(100% + 256px);
    margin: 0 0 0 -128px;
    overflow: hidden;
    display: none;
}




















/* --   ZMODYFIKOWANE STYLE STAREGO ŚRODKA   -- */

#link-content {
         width: 100%;
    text-align: center;
       padding: 0 0 64px 0;
      overflow: hidden;
}





/* --   PODTYTUŁ PODSTRONY   -- */

#link-content h2 {
    width: 100%;
    font-size: 14pt;
    height: 96px;
    line-height: 96px;
    color: #666;
    font-weight: 100;
    font-family: titillium_webbold;
    margin: 16px 0 16px 0;
    text-transform: uppercase;
}

#link-content h2::after {
    content: '';
    width: 320px;
    height: 1px;
    left: 50%;
    bottom: 16px;
    z-index: 1000;
    position: absolute;
    background: #ccc;
    transform: translate(-50%,0);
}





/* --   KRÓTKI OPIS PODSTRONY POD TYTUŁEM   -- */

#link-content .description * { float: none; }
#link-content .description {
    font-family: titillium_webregular;
    font-size: 10pt;
    line-height: 150%;
    color: #666;
    width: 1152px;
    margin: 0 0 24px 0;
}





/* --   TYTUŁ KOLUMNY   -- */

#link-content h3 {
    width: 100%;
    font-size: 18pt;
    line-height: 150%;
    color: #666;
    font-weight: 100;
    font-family: titillium_webregular;
    margin: 0 0 32px 0;
}





/* --   TYTUŁ BOXA   -- */

#link-content h4 {
    width: 100%;
    float: left;
    font-size: 14pt;
    line-height: 150%;
    color: #666;
    font-weight: 100;
    font-family: titillium_webregular;
    margin: 0 0 32px 0;
}





/* --   TYTUŁ H5   -- */

#link-content h5 {
    width: 100%;
    float: left;
    font-size: 12pt;
    line-height: 150%;
    color: #666;
    font-weight: 100;
    font-family: titillium_webbold;
    margin: 0 0 16px 0;
    text-align: left;
}










/* --   KOLUMNY Z FORMULARZAMI   -- */

.f-cols {
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.f-cols .f-col {
    width: 560px;
    margin: 0 16px;
}

.f-cols .f-col.wide { width: 720px; }
.f-cols .f-col.medium { width: 400px; }
.f-cols .f-col.small { width: 360px; }

/* --   PHONE   -- */

@media only screen and (max-width: 667px)
{
    .f-cols .f-col {
        width: 100%;
        margin: 0;
    }

    .f-cols .f-col.wide,
    .f-cols .f-col.medium,
    .f-cols .f-col.small {
        width: 100%;
    }
}











/* --   ZACZEPIONE POLA FULLSCREEN   -- */

/* .full-fixed-form-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    transition: transform .5s cubic-bezier(.165, .84, .44, 1);
    background: #f6f6f6;
    padding: 72px 16px 0 16px;
    overflow: auto;
    overflow-x: hidden;
    will-change: transform;
}

.full-fixed-form-box.hide {
    transform: translate(0, 64px);
}

.full-fixed-form-box .close {
    position: absolute;
    right: 24px;
    top: 72px;
    width: 72px;
    height: 72px;
    cursor: pointer;
    color: #f00;
    z-index: 1000;
    transition: all .25s ease-out;
}

.full-fixed-form-box .close:hover svg {
    stroke-width: 3px;
} */










.form-box {
    width: 100%;
    min-height: 56px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    background: #fbfbfb;
    padding: 0 0 8px 0;
    border-radius: 5px;
    margin: 0 0 32px 0;
    font-family: titillium_webregular;
    transition: all .15s ease-out;
    z-index: 1;
 /* user-select: none; */
    text-align: left;
}

.form-box.dark {
    box-shadow: none;
    background: #222;
}

.form-box.no-header { padding: 16px 0 16px 0; }
.form-box.no-radius { border-radius: 0; }
.form-box.clip { overflow:hidden; }
.form-box h6 {
    font-size: 12pt;
    width: 100%;
    height: 56px;
    line-height: 20px;
    box-sizing: border-box;
    padding: 0 56px 0 24px;
    color: #666;
    text-align: left;
    margin: 0 0 8px 0;
    font-weight: 100;
    font-family: titillium_webbold;
    text-transform: uppercase;
    background: #f8f8f8;
    border-radius: 5px 5px 0 0;
    z-index: 10;
    display: flex;
    align-items: center;
}

.form-box h6::after {
    content: '';
    position: absolute;
    top: 100%;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

.form-box.dark h6 {
    color: #aaa;
}

.form-box h6.inside {
    border-radius: 0;
    border-top: 1px solid #eee;
    margin: 8px 0;
    line-height: 54px;
}

.form-box.dark a:hover { text-decoration: underline; }
.form-box.dark a,
.form-box.dark b {
    color: #fff;
    font-family: titillium_websemibold;
}

.form-box h6 > svg {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    padding: 18px 24px;
    color: #;
    stroke-width: 2px;
    z-index: 99999;
    box-sizing: content-box;
    opacity: 1;
}

/* .form-box h6 svg * {
    box-sizing: content-box;
    float: none;
} */

.form-box h6.icon-left {
    padding: 0 24px 0 0;
    display: flex;
    align-items: center;
}

.form-box h6.icon-left > svg {
    position: relative;
    right: auto;
    top: auto;
    padding: 0 20px;
    color: #666;
}

.form-box .text-block {
    font-size: 10pt;
    width: 100%;
    line-height: 150%;
    padding: 8px 24px;
    color: #666;
}

.form-box .text-block p * { float: none; }
.form-box .text-block p { margin: 0 0 16px 0; }
.form-box .text-block .big {
    font-size: 13pt;
    margin: 0 0 16px 0;
}

.form-box .text-block .bold { font-family: titillium_websemibold; }
.form-box .line {
    font-size:10pt;
    width:100%;
    float:left;
    min-height:48px;
    line-height:48px;
    box-sizing:border-box;
    padding:0 24px;
    color:#666;
    text-align:left;
    box-shadow:0 1px 0 rgba(0,0,0,.05);
    margin:0;
}

.form-box .line.no-border {
    box-shadow:none;
}

.form-box .line.legend {
    min-height:32px;
    line-height:150%;
    font-size:9pt;
    color:#bbb;
    padding:2px 160px 8px 52px;
}

.form-box .line.legend::after {
    content:'?';
    position:absolute;
    left:24px;
    top:0;
    color:#fff;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    font-size:8pt;
    font-family:Arial;
    font-weight:600;
    background-color:#ccc;
    border-radius:3px;
}

.form-box .line.legend * {
    float:none;
}

.form-box .line:last-child {
    box-shadow:none;
}

/*
.form-box .line p,
.form-box .line .label {
    float:left;
}
*/

.form-box .line p *,
.form-box .line .label * {
    float:none;
}

.form-box .line .section-label {
    font-size:11pt;
    font-family:titillium_webbold;
    color:#666;
    text-transform:uppercase;
}

.form-box .line p.big {
    font-size:14pt;
    font-family:titillium_websemibold;
    color:#;
    line-height:40px;
}

.form-box .required p::after {
    content:'*';
    position:absolute;
    right:-8px;
    top:0;
    line-height:40px;
    font-family:titillium_websemibold;
    color:#f00;
    font-size:11pt;
}

.form-box .required.before p::after {
    right:auto;
    left:0;
}

.form-box .required.before p {
    margin:0 0 0 8px;
}

.required.info {
    font-size:10pt;
    font-family:titillium_websemibold;
    text-transform:uppercase;
    border-bottom:0;
    box-shadow:none;
    color:#666;
    margin:8px 0 0 0;
    padding:0 0 0 24px;
    line-height:40px;
}

.required.info p::after {
    right:auto;
    left:-12px;
}

.form-box .line input {
    float:right;
    height:32px;
    line-height:32px;
    padding:0 8px;
    border:1px solid #ddd;
    border-radius:3px;
    margin:8px 0 0 0;
    width:240px;
    font-family:titillium_webregular;
    font-size:10pt;
    color:#666;
}

.form-box .line input.short { width: 128px; }
.form-box .line input.long { width: 280px; }
.form-box .line input:focus {
    background: #fdfdfd;
    border: 1px solid #ccc;
    color: #444;
}

.form-box .line input.fill {
    border:1px solid #f00;
}

.form-box .line input.n {
    float:left;
    border:0;
    background-color:#222;
}

.form-box .line textarea {
    float:right;
    height:96px;
    line-height:24px;
    padding:2px 8px;
    border:1px solid #ddd;
    border-radius:3px;
    margin:16px 0 8px 0;
    width:100%;
    font-family:titillium_webregular;
    font-size:10pt;
    color:#666;
    box-sizing:border-box;
}

.form-box .line textarea:focus {
    background-color:#fdfdfd;
    border:1px solid #ccc;
    color:#444;
}

.form-box .line textarea.fill {
    border:1px solid #f00;
}

.form-box .line textarea.low {
    height:52px;
    line-height:24px;
    resize:none;
}

.form-box .line .note {
    width:100%;
    height:16px;
    float:left;
    line-height:16px;
    color:#888;
    text-align:right;
    padding:0 2px 0 0;
    margin:2px 0 8px 0;
    font-size:9pt;
    box-sizing:border-box;
}

.form-box .line .fill-info {
    width:100%;
    height:16px;
    float:left;
    line-height:16px;
    color:#888;
    text-align:right;
    padding:0 2px 0 0;
    margin:2px 0 8px 0;
    font-size:9pt;
    box-sizing:border-box;
}

/* .form-box .submit {
    margin:24px 24px 8px 0 !important;
}

.form-box .new-loader {
    margin:28px 16px 0 0;
} */





/* --   SUCCESS INFO   -- */

.form-box .success-info {
    position: absolute;
    left: 24px;
    bottom: 34px;
    height: 32px;
    line-height: 32px;
    background: #25c300;
    font-size: 10pt;
    font-family: titillium_webregular;
    white-space: nowrap;
    border-radius: 3px;
    padding: 0 16px 0 32px;
    color: #fff;
    pointer-events: none;
    transition: all .3s ease-out;
}

.form-box .success-info.hide { transform: translate(0, 80px); }
.form-box .success-info .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    padding: 6px;
    color: #fff;
}

.form-box .success-info .icon svg {
    width: 20px;
    height: 20px;
}





/* --   ERROR INFO   -- */

.form-box .error-info {
    position: absolute;
    left: 24px;
    bottom: 34px;
    height: 32px;
    line-height: 32px;
    background: #a50000;
    font-size: 10pt;
    font-family: titillium_webregular;
    white-space: nowrap;
    border-radius: 3px;
    padding: 0 16px 0 32px;
    color: #fff;
    pointer-events: none;
    transition: all .3s ease-out;
}

.form-box .error-info.hide { transform: translate(0, 80px); }
.form-box .error-info .icon {
    position:absolute;
    left:0;
    top:0;
    width:32px;
    height:32px;
    box-sizing:border-box;
    padding:6px;
    color:#fff;
}

.form-box .error-info .icon svg {
    width:20px;
    height:20px;
}





.form-box .infoline-number {
    font-size:28pt;
    font-family:titillium_webbold;
    width:100%;
    text-align:left;
    margin:16px 0 0 0;
    float:left;
    color:#888;
    padding:0 24px;
    letter-spacing:-1px;
}

.form-box .infoline-hours {
    font-size:10pt;
    font-family:titillium_webregular;
    width:100%;
    text-align:left;
    margin:0 0 32px 0;
    float:left;
    color:#888;
    text-transform:uppercase;
    padding:0 24px;
}

.form-box .infoline-hours b {
    float:none;
}





.form-box .inside-number {
    float:left;
    width:100%;
    border-top:1px solid #eee;
    padding:16px 0;
}

.form-box .inside-number .text {
    font-size:10pt;
    font-family:titillium_webregular;
    width:100%;
    text-align:left;
    box-sizing:border-box;
    padding:0 24px;
    float:left;
    color:#666;
    margin:2px 0;
}

.form-box .inside-number .btt.fr {
    position:absolute;
    right:24px;
    top:50%;
    transform:translate(0,-50%);
    z-index: 10;
}

.form-box .inside-number .email {
    font-size:10pt;
    font-family:titillium_webregular;
    width:100%;
    text-align:left;
    box-sizing:border-box;
    float:left;
    padding:0 24px;
    margin:2px 0;
    z-index: 9;
}

.form-box .inside-number .number {
    position:absolute;
    font-size:10pt;
    font-family:titillium_websemibold;
    width:auto;
    box-sizing:border-box;
    color:#888;
    right:24px;
    padding:0 32px 0 0;
    top:50%;
    transform:translate(0,-50%);
}

.form-box .inside-number .number i {
    font-style:normal;
    font-size:14pt;
    float:none;
}

.form-box .inside-number .number svg {
    position:absolute;
    right:0;
    top:6px;
    width:16px;
    height:16px;
    color:#888;
    stroke-width:1px;
}

.form-box .inside-number .number b {
    font-family: titillium_webregular;
}










.form-box .n-line {
    width: 100%;
    min-height: 48px;
    padding: 0 24px;
    font-size: 10pt;
    margin: 0 0 4px 0;
    text-align: left;
    line-height: 175%;
}

.form-box .n-line.mt {
    margin: 24px 0 4px 0;
}

.form-box .n-line input {
    height: auto;
    line-height: 48px;
    border: 0;
    width: 100%;
    font-family: titillium_websemibold;
    font-size: 15pt;
    color: #666 !important;
    border-bottom: 1px solid #eee;
    z-index: 9;
    padding: 16px 0 0 0;
    outline: none;
    background: none;
    margin: 0;
}

.form-box .n-line input:-webkit-autofill,
.form-box .n-line input:-webkit-autofill:hover,
.form-box .n-line input:-webkit-autofill:focus,
.form-box .n-line input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px white inset !important;
}

.form-box .n-line .label {
    position: absolute;
    left: 24px;
    top: 0;
    height: 48px;
    line-height: 48px;
    color: #ccc;
    font-size: 15pt;
    font-family: titillium_websemibold;
    pointer-events: none;
    z-index: 10;
    transform-origin: 0 50%;
    transition: all .15s ease-out .1s;
    padding: 16px 0 0 0;
}

.form-box .n-line.filled .label {
    transform: translate(0, -24px) scale(.75);
    color: #ddd;
}










.form-box .address {
    font-size: 10pt;
    font-family: titillium_webregular;
    width: 100%;
    text-align: left;
    padding: 0 24px;
    color: #666;
    margin: 16px 0;
    line-height: 150%;
}

.form-box .address b { float: none; }










/* --   POLE SELECT   -- */

.form-box select {
    color: #555;
    font-size: 10pt;
    margin: 10px 0 0 4px !important;
    padding: 2px;
    border-radius: 3px;
    border: 1px solid #ccc;
    height: 28px;
    line-height: 24px;
    background: #f8f8f8;
    font-family: titillium_webregular;
    max-width: calc(50% - 16px);
    float: right;
}

.form-box select:hover {
    border: 1px solid #aaa;
    color: #333;
}

.form-box select.lock {
    border: 0;
    background: none;
    font-family: titillium_websemibold;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.form-box select.white { background: #fff; }
.form-box select.white:hover { background: #fdfdfd; }





/* --   POLE INPUT TEXT   -- */

.form-box input {
    color: #555;
    font-size: 10pt;
    padding: 2px 4px;
    margin: 0 0 0 4px;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    height: 28px;
    line-height: 24px;
    font-family: titillium_webregular;
}

/* .form-box input:hover {
    border: 1px solid #aaa;
    color: #333;
} */

.form-box input.white { background: #fff; }
.form-box input.white:hover { background: #fdfdfd; }
.form-box input.wide { width: calc(50% - 16px); }





/* --   POLE INPUT CHECKBOX   -- */

.form-box .line input[type="checkbox"] {
    margin: 16px 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    transform: translate(0, 1px);
}

.form-box .line input[type="checkbox"].align-left { margin: 4px 8px 0 12px; }
.form-box .line input[type="checkbox"]:hover { filter: brightness(1.05); }

.form-box .line .order:first-child { border: 0; }
.form-box .line .order {
    margin: 0px 0;
    border-bottom: 1px solid #eee;
    padding: 8px;
}

.form-box .line .order * {
    line-height: 24px;
}




/* --   POLE TEXTAREA   -- */

.form-box textarea {
    margin: 0 0 0 4px;
    font-size: 10pt;
    width: calc(50% - 16px);
    height: 56px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: titillium_webregular;
    background: #f8f8f8;
    border-radius: 3px;
    padding: 4px;
    color: #555;
}

.form-box textarea:hover {
    border: 1px solid #aaa;
    color: #333;
}

.form-box textarea.full-line {
    width: calc(100% - 32px);
    height: 128px;
    margin: 8px 16px;
}

.form-box textarea.white {
    background: #fff;
}

.form-box textarea.white:hover {
    background: #fdfdfd;
}





/* --   UWAGI DO ZAMÓWIENIA   -- */

textarea#order_comments {
    margin: 0;
    width: 100%;
    height: 96px;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 12px 24px !important;
    resize: none;
    background: rgba(0, 0, 0, 0);
}

.input-placeholder {
    position: absolute;
    left: 24px;
    top: 76px;
    margin: 0;
    padding: 0;
    color: #ccc;
    pointer-events: none;
    transition: all .15s ease-out;
}





#preview-box {
    padding: 8px;
    background: #fff;
}

#preview-box .cell span {
    background: #444;
    padding: 6px 12px;
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: titillium_webregular;
    font-size: 10pt;
    color: #fff;
}

.form-box .cell {
    width: calc(33.33333% - 16px);
    padding-top: calc(33.33333% - 16px);
    position: relative;
    margin: 8px;
}

.form-box .cell img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-box .cell.wzor-photo,
.form-box .cell.cover-photo,
.form-box .cell.wzor_etui-photo,
.form-box .cell.wzor_etui_dvd-photo {
    width: calc(100% - 16px);
    padding-top: calc(60% - 16px);
}










.form-box-content {
 /* padding: 24px 40px 16px 40px; */
    padding: 40px;
    font-size: 10pt;
    color: #666;
    line-height: 175%;
    text-align: left;
}

.form-box.dark .form-box-content {
    color:#aaa;
}

.form-box-content .box-title {
    font-size:16pt;
    font-family:titillium_weblight !important;
    color:#;
    margin:0 0 24px 0;
}

.form-box.dark .form-box-content .box-title {
    color:#fff !important;
}

.form-box-content .box-title.first {
    font-size:24pt;
    font-family:titillium_weblight !important;
    margin:24px 0;
}

.form-box-content p.caption {
    margin:0 0 16px 0;
}

.form-box-content p.caption a {
    float:none;
}

.form-box-content p.caption b {
    float:none;
}










#validate-info {
    position: absolute;
    left: -324px;
    top: 24px;
    height: 32px;
    line-height: 32px;
    background: #c31700;
    font-size: 10pt;
    font-family: titillium_webregular;
    white-space: nowrap;
    border-radius: 3px;
    padding: 0 16px;
    color: #fff;
    pointer-events: none;
    z-index: 100000;
    transition: opacity .15s ease-out;
}

/* #validate-info::after {
    background-color: #c31700;
    content: '';
    width: 7px;
    height: 7px;
    left: 50%;
    top: -3px;
    position: absolute;
    transform: translate(-50% ,0) rotate(45deg);
} */










#company-stamp-box img {
    width:200px;
    height:auto;
    margin:32px 0;
    left:50%;
    transform:translate(-50%,0);
}

#company-stamp-box.in-progress img {
    margin:16px 0 40px 0;
}

#company-stamp-box span {
    background-color:#;
    color:#fff;
    position:absolute;
    left:50%;
    bottom:16px;
    padding:0 8px;
    line-height:24px;
    border-radius:3px;
    transform:translate(-50%,0);
    text-transform:uppercase;
    display:none;
}

#company-stamp-box.in-progress span {
    display:block;
}













/* --   GALERIA   -- */

.gallery-fresh-container {
    width:50%;
    float:left;
    box-sizing:border-box;
    background-color:#fff;
    padding:16px;
    border-radius:0 5px 5px 0;
    margin:40px 0 0 0;
}

.gallery-fresh-container * {
    position:relative;
}

.gallery-fresh {
    width:calc(100% + 8px);
    float:left;
    margin:0 0 0 -8px;
}

.gallery-fresh .thumb {
    float:left;
    cursor:pointer;
    overflow:hidden;
}

.gallery-fresh.col-4 .thumb {
    width:25%;
    padding-top:25%;
}

.gallery-fresh.col-5 .thumb {
    width:20%;
    padding-top:20%;
}

.gallery-fresh .thumb a {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    padding:4px;
    overflow:hidden;
    z-index:1;
}

.gallery-fresh .thumb a img {
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(1.05);
    position:absolute;
    z-index:2;
}

.gallery-fresh .thumb a img.h { max-height:100%; }
.gallery-fresh .thumb a img.w { max-width:100%; }

.gallery-fresh .thumb:hover a img {
    opacity:.8;
}































/* --   FORMULARZE   -- */

/*
#ajax_form {
    float:left;
    width:100%;
    height:auto;
    position:relative;
    left:50%;
    transform:translate(-50%,0);
}

#ajax_form.n-standard {
    width:780px;
    margin:240px 0 0 0;
}

#sub_columns {
    margin:0;
}

#sub_columns.n-centered {
    left:50%;
    margin:0 0 0 -390px;
}

#left_wide {
    float:left;
    width:100%;
    margin:0;
    padding:0;
}
*/










/* --   RODO W PROFILU   -- */

/* .rodo {
    float:left;
    width:100%;
    height:auto;
    box-sizing:border-box;
    margin:0;
    font-family:titillium_webregular;
    padding:24px 24px 8px 24px;
}

.rodo.profile .new-bt {
    float:right;
    margin:0;
}

.rodo .title,
.rodo p.big {
    font-size:16pt;
    color:#;
    width:100%;
    text-align:left;
    line-height:150%;
    float:left;
    margin:0 0 24px 0;
}

.rodo .content,
.rodo p.content {
    font-size:10pt;
    color:#666;
    width:100%;
    text-align:left;
    line-height:175%;
    float:left;
    margin:0 0 24px 0;
}

.rodo .content b {
    font-weight:100;
    font-family:titillium_websemibold;
    float:none;
}

.rodo .content a {
    float:none;
} */










/* --   RODO NA GŁÓWNEJ   -- */

#rodo_mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .9);
    transition: all .5s ease-out;
    z-index: 200000;
    opacity: 0;
    pointer-events: none;
}

#rodo_mask.show {
    pointer-events: all;
    opacity: 1;
}

#rodo_confirm_field {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 80%;
    background: rgba(255, 255, 255, 1);
    transition: all .25s ease-out;
    z-index: 200001;
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .2);
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(.9);
    box-sizing: border-box;
    border: 1px solid #eee;
    opacity: 0;
    pointer-events: none;
    overflow: auto;
    font-family: titillium_webregular;
    font-size: 10pt;
    padding: 32px;
    text-align: justify;
}

#rodo_confirm_field.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: all;
}

#rodo_confirm_field .title {
    font-size: 20pt;
    color: #e75400;
    font-family: titillium_webregular;
    font-weight: 100;
    margin: 0 0 32px 0;
}

#rodo_confirm_field .big {
    font-size: 12pt;
}

#rodo_confirm_field .bold {
    font-family: titillium_websemibold;
}

#rodo_confirm_field p {
    width: 100%;
    margin: 0 0 16px 0;
}

#rodo_confirm_field a {
    float: none;
}

#rodo_confirm_field ol {
    margin: 8px 0 0 14px;
    padding: 0;
}

#rodo_confirm_field ol li ol {
    padding: 0 0 0 14px;
}

#rodo_confirm_field li {
    margin: 0 0 8px 0;
    width: 100%;
}

#rodo_confirm_field ol.letters {
    list-style: lower-latin;
}





#rodo_content {
    position: relative;
    width: 100%;
}





#rodo_confirm_button {
    left: 50%;
    transform: translate(-50%, 0);
    margin: 32px 0 32px 0;
}










/* --   KOMPONENTY Z KARTAMI FLEX-CARDS   -- */

.component.flex-cards {
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.component.flex-cards .filter-tabs {
    background: none !important;
    overflow-x: auto;
    overflow-y: hidden;
}

.component.flex-cards .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.component.flex-cards .container .thumbs-group {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.component.flex-cards .collection-description {
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.component.flex-cards .collection-description p {
    width: 800px;
    text-align: center;
    font-size: 10pt;
}




















/* --   POLA SELECT   -- */

.select {
    min-width:100px;
    height:32px;
    line-height:32px;
    background-color:rgba(255,255,255,1);
    border:1px solid #ccc;
    cursor:pointer;
    margin:0;
    padding:0;
    font-size:10pt;
    box-sizing:border-box;
    transition:background .2s linear;
    float:left;
    border-radius:3px;
    z-index:1000;
    position:relative;
}

.select.fill {
    background-color:#ffe7e7;
}

.select:hover::before {
    border:1px solid rgba(0,0,0,.2);
}

.select::after {
    content:'';
    position:absolute;
    right:16px;
    width:6px;
    height:6px;
    border-right:1px solid #666;
    border-bottom:1px solid #666;
    top:10px;
    transform:rotate(45deg);
    transition:all .1s linear;
    pointer-events:none;
}

.select:hover::after {
    transform:rotate(45deg) scale(1.1);
}

.select.on_top {
    z-index:21;
}

.select .values {
    opacity:0;
    margin:0;
    position:absolute;
    top:32px;
    right:0;
    width:auto;
    background-color:#fff;
    overflow-y:auto;
    max-height:240px;
    max-width:400px;
    font-size:10pt;
    overflow-x:hidden;
    box-sizing:border-box;
    padding:8px 0 8px 0;
    transition:all .1s linear;
    transform:translate(0,-32px);
    pointer-events:none;
    border-radius:3px;
    border:1px solid rgba(0,0,0,.2);
}

.select .values.show {
    transform:translate(0,4px);
    opacity:1;
    pointer-events:all;
}

.select .values .value {
    height:32px;
    line-height:32px;
    padding:0 16px 0 16px;
    width:100%;
    color:#666;
    white-space:nowrap;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

.select .values .value:hover {
    background-color:#666;
    color:#fff;
}

.select .selected_value {
    color:#bbb;
    white-space:nowrap;
    overflow:hidden;
    padding:0 40px 0 8px;
    height:100%;
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

.select .selected_value.selected {
    color:#000;
}

/* --   DUŻE SELECTY   -- */

.select.big {
    height:40px;
    line-height:40px;
    margin:0 8px 0 0;
    border-radius:3px;
}

.select.big::after {
    top:14px;
}

.select.big .values {
    top:40px;
}

.select.big .values.show {
    transform:translate(0,1px);
}

/* --   SELECTY WYPEŁNIAJĄCE RODZICA   -- */

.select.fill-parent {
    border-radius:0;
    width:100% !important;
    margin:0 !important;
}























/*
@media only screen and (max-width:1680px)
{

}

@media only screen and (max-width:1366px)
{

}
*/


















/* --   KOMUNIKATY   -- */

.note {
    top: 128px;
    left: 32px;
    width: calc(100% - 64px);
    min-height: 40px;
    z-index: 102;
    padding: 12px 64px 12px 16px;
    margin: 0 0 16px 0;
    border-radius: 3px;
    transition: all .25s cubic-bezier(.785, .135, .15, .86);
    background: #bb0000;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

body:not(.logged) .note {
    top: 72px;
}

.note .icon {
    margin: 0 12px 0 0;
}

.note .close {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.note .close svg {
    width: 20px;
    height: 20px;
}

.note .title {
    margin: 0 24px 0 0;
    padding: 0 24px 0 0;
    border-right: 1px solid rgba(255, 255, 255, .2);
    font-size: 12pt;
    font-family: titillium_websemibold;
    text-transform: uppercase;
    line-height: 32px;
    white-space: nowrap;
}



















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

main {
    width: 100%;
    height: auto;
    z-index: 102;
    padding: 0 16px;
    margin: 128px 0 0 0;
    transition: all .25s cubic-bezier(.785, .135, .15, .86);
    min-height: 440px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

main.gaps0px { padding: 0; }
main.gaps16px { padding: 0 8px; }
main.gaps32px { padding: 0 16px; }
main.gaps48px { padding: 0 24px; }

main .main-select-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

main .main-content {
    max-width: 800px;
    margin: 80px 0;
}

main > * {
    z-index: 2;
}

/* --   TŁO PODSTRONY   -- */

main .main-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1 !important;
}

main .main-bg.lightgray { background: #f8f8f8; }
main .main-bg.ultralightgray { background: #fafafa; }

/* --   TYTUŁ PODSTRONY   -- */

main h1 {
    height: 80px;
    line-height: 80px;
    margin: 32px 0;
    top: 0;
    width: 100%;
    font-size: 16pt;
    color: #666;
    font-weight: 100;
    font-family: titillium_websemibold;
    z-index: 2;
    text-align: center;
}










/* --   HOME ICON   -- */

#home {
    position: absolute;
    right: 72px;
    top: 0;
    width: 56px;
    height: 72px;
    transition: transform .15s cubic-bezier(.645, .045, .355, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

#home svg {
    width: 20px;
    height: 20px;
    color: #666;
}










/* --   BURGER MENU   -- */

#burger {
    position: absolute;
    right: 0;
    top: 0;
    width: 72px;
    height: 72px;
    transition: transform .15s cubic-bezier(.645, .045, .355, 1);
    cursor: pointer;
    transform: scale(1.1);
}

#burger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    background: #666;
    transition: transform .15s cubic-bezier(.645, .045, .355, 1);
}

#burger span:nth-child(1) { transform: translate(0, -5px); }
#burger span:nth-child(2) { transition-delay: .15s; }
#burger span:nth-child(3) { transform: translate(0, 5px); }
#burger:hover span { background: #; }

#burger.show-menu span:nth-child(1) { transform: translate(0, 0) rotate(45deg); }
#burger.show-menu span:nth-child(2) { transition-delay: 0s; opacity: 0; }
#burger.show-menu span:nth-child(3) { transform: translate(0, 0) rotate(-45deg); }










/* --   IKONKI UŻYTKOWNIKA DLA URZĄDZEŃ MOBILNYCH    -- */

#mobile-user-icons {
    width: 100%;
    height: 56px;
    background: #fafafa;
    z-index: 104;
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    display: flex;
    justify-content: center;
}

#mobile-user-icons .icon {
    border-right: 1px solid rgba(0, 0, 0, .05);
    margin: 0;
}

#mobile-user-icons .icon:last-child {
    border-right: 0;
}










/* --   MENU DLA URZĄDZEŃ MOBILNYCH    -- */

#mobile-menu {
    position: fixed;
    left: 0;
    top: 72px;
    width: 100%;
    height: calc(100% - 72px);
    background: #fafafa;
    z-index: 104;
    user-select: none;
    overflow: auto;
    transition: all .35s cubic-bezier(.645, .045, .355, 1);
}

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

#mobile-menu ul {
    width: 100%;
    height: 100%;
}

#mobile-menu ul li {
    width: 100%;
    line-height: 72px;
    font-family: titillium_websemibold;
    font-size: 12pt;
 /* border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .5); */
    list-style: none;
}

#mobile-menu ul li:last-child {
    border-bottom: 0;
}

#mobile-menu ul.level-1 > li {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

#mobile-menu ul.level-3 > li {
    border-top: 1px solid rgba(0, 0, 0, .05);
}

#mobile-menu ul li svg {
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
    margin: 24px;
}

#mobile-menu ul li span,
#mobile-menu ul li a {
    width: 100%;
    padding: 0 24px;
    color: #666;
    cursor: pointer;
}

#mobile-menu ul.level-2 {
    display: none;
}

#mobile-menu ul.level-2 li {
    line-height: 56px;
    background: #f1f1f1;
    font-family: titillium_webregular;
    font-size: 10pt;
}

#mobile-menu ul.level-2 > li > a {
    font-family: titillium_websemibold;
    pointer-events: none;
    font-size: 12pt;
    color: #999;
    display: none;
}

#mobile-menu .active ul.level-2 {
    display: block;
}

#mobile-menu ul li.active {
    height: auto;
}






/* --   STRZAŁKA W DÓŁ   -- */

#mobile-menu li.expand > .link::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translate(0, -50%) rotate(45deg);
    transition: all .15s ease-out;
    border-right: 2px solid #444;
    border-bottom: 2px solid #444;
    margin: -1px 0 0 0;
}

#mobile-menu li.webcolor > .link::after {
    border-right-color: #;
    border-bottom-color: #;
}

#mobile-menu li.active > .link::after {
    transform: translate(0, 50px) rotate(45deg);
    opacity: 0;
}





/* --   STRZAŁKA W GÓRĘ   -- */

#mobile-menu li.expand > .link::before {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translate(0, -50px) rotate(45deg);
    transition: all .15s ease-out;
    border-left: 2px solid #444;
    border-top: 2px solid #444;
    margin: 2px 0 0 0;
    opacity: 0;
}

#mobile-menu li.webcolor > .link::before {
    border-left: 2px solid #;
    border-top: 2px solid #;
}

#mobile-menu li.active > .link::before {
    transform: translate(0, -50%) rotate(45deg);
    opacity: 1;
}





#mobile-user-icons #cart-amount,
#mobile-user-icons #cart-amount-clone {
    left: 35px;
}








/* --   NAGŁÓWEK DLA URZĄDZEŃ MOBILNYCH    -- */

#mobile-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 72px;
    background: #fff;
    z-index: 105;
    display: none;
}

#mobile-header .logo {
    transform: scale(.8);
    transform-origin: left center;
    z-index: 104;
}

#mobile-header .catchword {
    display: none !important;
}

@media only screen and (max-width: 800px) {
    #mobile-header {
        display: block;
    }
}










/* --   GÓRNE MENU GŁÓWNE   -- */

#header-menu {
    position: absolute;
    left: 0;
    top: 56px;
    z-index: 10;
    width: 100%;
    height: 72px;
    padding: 0 32px;
    background: #fff;
    transition: all .6s cubic-bezier(.785, .135, .15, .86) .3s;
    transform-origin: 50% 0;
}

#header-menu.expanded { background: #fafafa; }
#header-menu ul { list-style: none; }
#header-menu li .link { color: #000; }
#header-menu li .link:hover,
#header-menu li.active > .link,
#header-menu li .link.active {
    color: #;
}

#header-menu li a.bolded {
    background: #ff0000 !important;
    font-family: titillium_websemibold;
    width: auto !important;
    color: #fff;
    padding: 0 8px;
    transform: translate(-8px, 0);
    border-radius: 3px;
}

#header-menu li a.bolded:hover {
    background: #d50000 !important;
    color: #fff;
}





/* --   IKONKI W MENU   -- */

#header-menu li .link svg {
    width: 20px;
    height: 20px;
    color: #444;
    float: right;
    top: 50%;
    margin: -10px 0 0 8px;
    stroke-width: 1px;
    transform: translate(4px, 0);
}

#header-menu li .link:hover svg,
#header-menu li .link.active svg {
    color: #;
}





/* --   STRZAŁKA W DÓŁ   -- */

#header-menu li.expand > .link::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 5px;
    height: 5px;
    transform: translate(0, -50%) rotate(45deg);
    transition: all .15s ease-out;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
    margin: -1px 0 0 0;
}

#header-menu li.webcolor > .link::after {
    border-right-color: #;
    border-bottom-color: #;
}

#header-menu li.active > .link::after {
    transform: translate(0, 50px) rotate(45deg);
    opacity: 0;
}





/* --   STRZAŁKA W GÓRĘ   -- */

#header-menu li.expand > .link::before {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 5px;
    height: 5px;
    transform: translate(0, -50px) rotate(45deg);
    transition: all .15s ease-out;
    border-left: 1px solid #444;
    border-top: 1px solid #444;
    margin: 2px 0 0 0;
    opacity: 0;
}

#header-menu li.webcolor > .link::before {
    border-left: 1px solid #;
    border-top: 1px solid #;
}

#header-menu li.active > .link::before {
    transform: translate(0, -50%) rotate(45deg);
    opacity: 1;
}





/*
 *   MENU - LEVEL 1
 *   -----------------
 *   POWIĄZANE Z: TRIGGER-1
 */

#header-menu ul.level-1 {
    height: 100%;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    z-index: 11;
    float: right;
}

#header-menu ul.level-1 > li {
    height: 100%;
    line-height: 72px;
    z-index: 1;
    cursor: pointer;
}

#header-menu ul.level-1 > li.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    z-index: 15;
    pointer-events: none;
}

#header-menu ul.level-1 > li.active,
#header-menu ul.level-1 > li.to-top {
    z-index: 0;
}

#header-menu ul.level-1 > li > .link {
    height: 100%;
    padding: 0 32px;
    cursor: pointer;
    text-transform: uppercase;
    z-index: 13;
    box-sizing: border-box;
}

#header-menu ul.level-1 > li.expand > .link { padding: 0 48px 0 32px; }
#header-menu ul.level-1 > li.selected > .link,
#header-menu ul.level-1 > li:hover > .link {
    color: #;
}

#header-menu ul.level-1 > li::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #;
    transition: transform .15s cubic-bezier(0, .8, .2, 1);
    pointer-events: none;
    z-index: 16;
    opacity: 0;
}

#header-menu ul.level-1 > li.selected::before,
#header-menu ul.level-1 > li:hover::before {
    opacity: 1;
}

#header-menu ul.level-1 > li.active > .link { background: #fff !important; }
#header-menu ul.level-1 > li.active::before {
    transform: translate(0, -70px);
    opacity: 1;
}





/*
 *   MENU - LEVEL 2
 *   -----------------
 *   ROZWIJANE W DÓŁ NA CAŁĄ
 *   SZEROKOŚĆ OKNA
 */

#header-menu ul.level-2 {
    position: fixed;
    left: 0;
    width: 100%;
    top: 128px;
    z-index: 12;
    list-style: none;
    opacity: 1;
    pointer-events: none;
    transition: all .2s cubic-bezier(0, .8, .2, 1);
    padding: 48px 32px;
    background: #fff;
    transform: scale(1, 0);
    transform-origin: 50% 0;
    will-change: transform;
}

#header-menu .active > ul.level-2 {
    opacity: 1;
    pointer-events: all;
    transform: scale(1);
    cursor: default;
    box-shadow: 0 20px 100px rgba(0, 0, 0, .025);
    border-bottom: 1px solid #eee;
}

#header-menu .active > ul.level-2::after {
    content: '';
    left: 0;
    background: #eee;
    width: 100%;
    top: -1px;
    height: 1px;
    position: absolute;
}

#header-menu ul.level-2 > li {
    opacity: 0;
    z-index: 2;
    min-width: 240px;
    line-height: 28px;
    border-left: 1px solid #eee;
    margin: 0 0 24px 0;
    text-align: left;
    transition: all .1s cubic-bezier(0, .8, .2, 1);
    transform: translate(0, -40px);
}

#header-menu .active > ul.level-2 > li {
    opacity: 1;
    transform: translate(0, 0);
    transition: all .4s cubic-bezier(0, .8, .2, 1) .2s;
}

#header-menu ul.level-2 > li.clearb { clear: both; }
#header-menu ul.level-2 > li > .link:hover { color: #; }
#header-menu ul.level-2 > li > .link {
    color: #222;
    width: 240px;
    height: auto;
    line-height: 24px;
    padding: 0 0 0 24px;
    border-left: 2px solid #aaa;
    z-index: 9;
    transform: translate(-2px, 0);
    font-family: titillium_websemibold;
    font-size: 12pt;
    text-transform: uppercase;
    clear: both;
}





/* --   MENU - LEVEL 3   -- */

#header-menu ul.level-3 {
    padding: 12px 0 0 24px;
    min-width: 240px;
    clear: both;
}

#header-menu ul.level-3 > li { width: 240px; }
#header-menu ul.level-3 > li::before {
    content: '';
    left: -25px;
    background: #eee;
    width: 1px;
    top: 0;
    height: 100%;
    position: absolute;
}

#header-menu ul.level-3 > li.clearb { clear: both; }
#header-menu ul.level-3 > li > .link {
    width: 240px;
    clear: both;
    text-transform: uppercase;
}





/* --   MENU - LEVEL 4   -- */

#header-menu ul.level-4 {
    padding: 0;
    min-width: 240px;
    clear: both;
}

#header-menu ul.level-4::before {
    content: '';
    left: -25px;
    background: #eee;
    width: 1px;
    top: 0;
    height: 100%;
    position: absolute;
}

#header-menu ul.level-4 > li { width: 240px; }
#header-menu ul.level-4 > li.clearb { clear: both; }
#header-menu ul.level-4 > li > .link:hover { color: #; }
#header-menu ul.level-4 > li > .link {
    width: 240px;
    clear: both;
    color: #888;
}

@media only screen and (max-width: 1360px)
{
    #header-menu ul.level-1 > li > .link { padding: 0 24px; }
    #header-menu ul.level-1 > li.expand > .link { padding: 0 40px 0 24px; }
    #header-menu li.expand > .link::after { right: 18px; }
    #header-menu li.expand > .link::before { right: 18px; }
}

@media only screen and (max-width: 1280px)
{
    #header-menu ul.level-1 > li > .link {
        padding: 0 16px;
        text-transform: lowercase;
    }

    #header-menu ul.level-1 > li.expand > .link { padding: 0 36px 0 20px; }
    #header-menu li.expand > .link::after { right: 16px; }
    #header-menu li.expand > .link::before { right: 16px; }
}










/* --   BANERY   -- */

.convert-banner {
    position: absolute !important;
    right: 16px;
    top: 16px;
    z-index: 108;
    display: none;
}

.banner {
    background-image: url(../../.images/blank_photo_light.png);
    margin: 0 16px 32px 16px;
    transition: all .25s ease-out;
    z-index: 100;
}

main.gaps0px .banner { margin: 0; }
main.gaps16px .banner { margin: 0 8px 16px 8px; }
main.gaps32px .banner { margin: 0 16px 32px 16px; }
main.gaps48px .banner { margin: 0 24px 48px 24px; }

main.gaps0px .slider .banner { margin: 0; }
main.gaps16px .slider .banner { margin: 0; }
main.gaps32px .slider .banner { margin: 0; }
main.gaps48px .slider .banner { margin: 0; }

/* - STARE SZEROKOŚCI - */

.banner.w100p { width: calc(100% - 32px); }
main.gaps0px .banner.w100p { width: 100%; }
main.gaps16px .banner.w100p { width: calc(100% - 16px); }
main.gaps32px .banner.w100p { width: calc(100% - 32px); }
main.gaps48px .banner.w100p { width: calc(100% - 48px); }

.banner.w50p  { width: calc(50% - 32px); }
main.gaps0px .banner.w50p { width: 50%; }
main.gaps16px .banner.w50p { width: calc(50% - 16px); }
main.gaps32px .banner.w50p { width: calc(50% - 32px); }
main.gaps48px .banner.w50p { width: calc(50% - 48px); }

.banner.w33p  { width: calc(33.33333% - 32px); }
main.gaps0px .banner.w33p { width: 33.33333%; }
main.gaps16px .banner.w33p { width: calc(33.33333% - 16px); }
main.gaps32px .banner.w33p { width: calc(33.33333% - 32px); }
main.gaps48px .banner.w33p { width: calc(33.33333% - 48px); }

/* - STARE WYSOKOŚCI - */

.banner.h1 { height: 656px; }
.banner.h2 { height: 736px; }
.banner.h3 { height: 848px; }
.banner.h4 { height: 536px; }
.banner.h5 { height: 456px; }
.banner.h6 { height: calc(100vh - 232px); }





/* --   POLE TEKSTOWE - BANER V2   -- */

.banner .text-field-container-limits {
    position: absolute;
    left: 32px;
    top: 32px;
    width: calc(100% - 64px);
    height: calc(100% - 64px);
    pointer-events: none;
    z-index: 15;
}

.banner .banner-select-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 13;
    pointer-events: none;
    opacity: 0;
}

.banner .text-field-container {
    position: absolute;
    margin: 0;
    overflow: visible;
    pointer-events: all;
}

.banner .text-field-container.lock-select {
    user-select: none;
}

.banner .text-field-container .move-text-field {
    position: absolute;
    left: -32px;
    top: -32px;
    width: 32px;
    height: 32px;
    background: #;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: move;
    opacity: 0;
    pointer-events: none;
    border-radius: 100%;
}

.banner .text-field-container .move-text-field svg {
    width: 20px;
    height: 20px;
    color: #fff;
    pointer-events: none;
}

.banner .text-field-container.current-editor-obj .move-text-field {
    opacity: 1;
    pointer-events: all;
}

.banner .text-field-container .scale-text-field {
    position: absolute;
    right: -32px;
    bottom: -32px;
    width: 32px;
    height: 32px;
    background: #;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: nwse-resize;
    opacity: 0;
    pointer-events: none;
    border-radius: 100%;
}

.banner .text-field-container .scale-text-field svg {
    width: 20px;
    height: 20px;
    color: #fff;
    transform: scaleX(-1);
    pointer-events: none;
}

.banner .text-field-container.current-editor-obj .scale-text-field {
    opacity: 1;
    pointer-events: all;
}





/* --   PRZYCISKI   -- */

.banner .buttons {
    margin: 40px 0 0 0;
}










/* --   TŁO BANERA   -- */

.banner .background-uploaded {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: scroll;
    transition: opacity .4s ease-out;
    pointer-events: none;
    z-index: 11;
}

.banner .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: scroll;
    transition: opacity .15s ease-out;
    pointer-events: none;
    z-index: 10;
}

.banner .background.turn_off {
    filter: grayscale(100%);
}

.banner .image_loader {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}










/* --   OBSZARY UMIEJSCOWIENIA POLA TEKSTOWEGO NA BANERZE   -- */

.banner .cell {
    position: absolute;
     z-index: 104;
}





/* --   SIATKA 5x5   -- */

.banner.grid_5x5 .cell {
     width: 20%;
    height: 20%;
}

.banner.grid_5x5 .A1 { left: 0; top: 0; }
.banner.grid_5x5 .A2 { left: 0; top: 20%; }
.banner.grid_5x5 .A3 { left: 0; top: 40%; }
.banner.grid_5x5 .A4 { left: 0; top: 60%; }
.banner.grid_5x5 .A5 { left: 0; top: 80%; }

.banner.grid_5x5 .B1 { left: 20%; top: 0; }
.banner.grid_5x5 .B2 { left: 20%; top: 20%; }
.banner.grid_5x5 .B3 { left: 20%; top: 40%; }
.banner.grid_5x5 .B4 { left: 20%; top: 60%; }
.banner.grid_5x5 .B5 { left: 20%; top: 80%; }

.banner.grid_5x5 .C1 { left: 40%; top: 0; }
.banner.grid_5x5 .C2 { left: 40%; top: 20%; }
.banner.grid_5x5 .C3 { left: 40%; top: 40%; }
.banner.grid_5x5 .C4 { left: 40%; top: 60%; }
.banner.grid_5x5 .C5 { left: 40%; top: 80%; }

.banner.grid_5x5 .D1 { left: 60%; top: 0; }
.banner.grid_5x5 .D2 { left: 60%; top: 20%; }
.banner.grid_5x5 .D3 { left: 60%; top: 40%; }
.banner.grid_5x5 .D4 { left: 60%; top: 60%; }
.banner.grid_5x5 .D5 { left: 60%; top: 80%; }

.banner.grid_5x5 .E1 { left: 80%; top: 0; }
.banner.grid_5x5 .E2 { left: 80%; top: 20%; }
.banner.grid_5x5 .E3 { left: 80%; top: 40%; }
.banner.grid_5x5 .E4 { left: 80%; top: 60%; }
.banner.grid_5x5 .E5 { left: 80%; top: 80%; }





/* --   SIATKA 10x5   -- */

.banner.grid-10x5 .cell {
     width: 10%;
    height: 20%;
}

/* --   OBSZARY POLA TEKSTOWEGO   -- */

.banner.grid-10x5 .cell-1x1  { width: 10%;  height: 20%; }
.banner.grid-10x5 .cell-2x1  { width: 20%;  height: 20%; }
.banner.grid-10x5 .cell-3x1  { width: 30%;  height: 20%; }
.banner.grid-10x5 .cell-4x1  { width: 40%;  height: 20%; }
.banner.grid-10x5 .cell-5x1  { width: 50%;  height: 20%; }
.banner.grid-10x5 .cell-6x1  { width: 60%;  height: 20%; }
.banner.grid-10x5 .cell-7x1  { width: 70%;  height: 20%; }
.banner.grid-10x5 .cell-8x1  { width: 80%;  height: 20%; }
.banner.grid-10x5 .cell-9x1  { width: 90%;  height: 20%; }
.banner.grid-10x5 .cell-10x1 { width: 100%; height: 20%; }

.banner.grid-10x5 .cell-1x2  { width: 10%;  height: 40%; }
.banner.grid-10x5 .cell-2x2  { width: 20%;  height: 40%; }
.banner.grid-10x5 .cell-3x2  { width: 30%;  height: 40%; }
.banner.grid-10x5 .cell-4x2  { width: 40%;  height: 40%; }
.banner.grid-10x5 .cell-5x2  { width: 50%;  height: 40%; }
.banner.grid-10x5 .cell-6x2  { width: 60%;  height: 40%; }
.banner.grid-10x5 .cell-7x2  { width: 70%;  height: 40%; }
.banner.grid-10x5 .cell-8x2  { width: 80%;  height: 40%; }
.banner.grid-10x5 .cell-9x2  { width: 90%;  height: 40%; }
.banner.grid-10x5 .cell-10x2 { width: 100%; height: 40%; }

.banner.grid-10x5 .cell-1x3  { width: 10%;  height: 60%; }
.banner.grid-10x5 .cell-2x3  { width: 20%;  height: 60%; }
.banner.grid-10x5 .cell-3x3  { width: 30%;  height: 60%; }
.banner.grid-10x5 .cell-4x3  { width: 40%;  height: 60%; }
.banner.grid-10x5 .cell-5x3  { width: 50%;  height: 60%; }
.banner.grid-10x5 .cell-6x3  { width: 60%;  height: 60%; }
.banner.grid-10x5 .cell-7x3  { width: 70%;  height: 60%; }
.banner.grid-10x5 .cell-8x3  { width: 80%;  height: 60%; }
.banner.grid-10x5 .cell-9x3  { width: 90%;  height: 60%; }
.banner.grid-10x5 .cell-10x3 { width: 100%; height: 60%; }

.banner.grid-10x5 .cell-1x4  { width: 10%;  height: 80%; }
.banner.grid-10x5 .cell-2x4  { width: 20%;  height: 80%; }
.banner.grid-10x5 .cell-3x4  { width: 30%;  height: 80%; }
.banner.grid-10x5 .cell-4x4  { width: 40%;  height: 80%; }
.banner.grid-10x5 .cell-5x4  { width: 50%;  height: 80%; }
.banner.grid-10x5 .cell-6x4  { width: 60%;  height: 80%; }
.banner.grid-10x5 .cell-7x4  { width: 70%;  height: 80%; }
.banner.grid-10x5 .cell-8x4  { width: 80%;  height: 80%; }
.banner.grid-10x5 .cell-9x4  { width: 90%;  height: 80%; }
.banner.grid-10x5 .cell-10x4 { width: 100%; height: 80%; }

.banner.grid-10x5 .cell-1x5  { width: 10%;  height: 100%; }
.banner.grid-10x5 .cell-2x5  { width: 20%;  height: 100%; }
.banner.grid-10x5 .cell-3x5  { width: 30%;  height: 100%; }
.banner.grid-10x5 .cell-4x5  { width: 40%;  height: 100%; }
.banner.grid-10x5 .cell-5x5  { width: 50%;  height: 100%; }
.banner.grid-10x5 .cell-6x5  { width: 60%;  height: 100%; }
.banner.grid-10x5 .cell-7x5  { width: 70%;  height: 100%; }
.banner.grid-10x5 .cell-8x5  { width: 80%;  height: 100%; }
.banner.grid-10x5 .cell-9x5  { width: 90%;  height: 100%; }
.banner.grid-10x5 .cell-10x5 { width: 100%; height: 100%; }





.banner.grid-10x5 .A1 { left: 0; top: 0; }
.banner.grid-10x5 .A2 { left: 0; top: 20%; }
.banner.grid-10x5 .A3 { left: 0; top: 40%; }
.banner.grid-10x5 .A4 { left: 0; top: 60%; }
.banner.grid-10x5 .A5 { left: 0; top: 80%; }

.banner.grid-10x5 .B1 { left: 10%; top: 0; }
.banner.grid-10x5 .B2 { left: 10%; top: 20%; }
.banner.grid-10x5 .B3 { left: 10%; top: 40%; }
.banner.grid-10x5 .B4 { left: 10%; top: 60%; }
.banner.grid-10x5 .B5 { left: 10%; top: 80%; }

.banner.grid-10x5 .C1 { left: 20%; top: 0; }
.banner.grid-10x5 .C2 { left: 20%; top: 20%; }
.banner.grid-10x5 .C3 { left: 20%; top: 40%; }
.banner.grid-10x5 .C4 { left: 20%; top: 60%; }
.banner.grid-10x5 .C5 { left: 20%; top: 80%; }

.banner.grid-10x5 .D1 { left: 30%; top: 0; }
.banner.grid-10x5 .D2 { left: 30%; top: 20%; }
.banner.grid-10x5 .D3 { left: 30%; top: 40%; }
.banner.grid-10x5 .D4 { left: 30%; top: 60%; }
.banner.grid-10x5 .D5 { left: 30%; top: 80%; }

.banner.grid-10x5 .E1 { left: 40%; top: 0; }
.banner.grid-10x5 .E2 { left: 40%; top: 20%; }
.banner.grid-10x5 .E3 { left: 40%; top: 40%; }
.banner.grid-10x5 .E4 { left: 40%; top: 60%; }
.banner.grid-10x5 .E5 { left: 40%; top: 80%; }

.banner.grid-10x5 .F1 { left: 50%; top: 0; }
.banner.grid-10x5 .F2 { left: 50%; top: 20%; }
.banner.grid-10x5 .F3 { left: 50%; top: 40%; }
.banner.grid-10x5 .F4 { left: 50%; top: 60%; }
.banner.grid-10x5 .F5 { left: 50%; top: 80%; }

.banner.grid-10x5 .G1 { left: 60%; top: 0; }
.banner.grid-10x5 .G2 { left: 60%; top: 20%; }
.banner.grid-10x5 .G3 { left: 60%; top: 40%; }
.banner.grid-10x5 .G4 { left: 60%; top: 60%; }
.banner.grid-10x5 .G5 { left: 60%; top: 80%; }

.banner.grid-10x5 .H1 { left: 70%; top: 0; }
.banner.grid-10x5 .H2 { left: 70%; top: 20%; }
.banner.grid-10x5 .H3 { left: 70%; top: 40%; }
.banner.grid-10x5 .H4 { left: 70%; top: 60%; }
.banner.grid-10x5 .H5 { left: 70%; top: 80%; }

.banner.grid-10x5 .I1 { left: 80%; top: 0; }
.banner.grid-10x5 .I2 { left: 80%; top: 20%; }
.banner.grid-10x5 .I3 { left: 80%; top: 40%; }
.banner.grid-10x5 .I4 { left: 80%; top: 60%; }
.banner.grid-10x5 .I5 { left: 80%; top: 80%; }

.banner.grid-10x5 .J1 { left: 90%; top: 0; }
.banner.grid-10x5 .J2 { left: 90%; top: 20%; }
.banner.grid-10x5 .J3 { left: 90%; top: 40%; }
.banner.grid-10x5 .J4 { left: 90%; top: 60%; }
.banner.grid-10x5 .J5 { left: 90%; top: 80%; }





/* --   MARGINESY WEWNĘTEZNE BANERA   -- */

.banner.padding_64x64   { padding: 64px; }
.banner.padding_64x128  { padding: 64px 128px; }
.banner.padding_128x128 { padding: 128px; }










/* --   POLE TEKSTOWE NA BANERZE   -- */

.banner .text_field_limits {
     width: 100%;
    height: 100%;
}

.banner .text_field {
    text-align: left;
    transition: transform .75s cubic-bezier(0, .95, .34, .99);
       z-index: 108;
}

.banner .text_field.moving,
.banner .text_field.moving .hover-marker {
           opacity: .5;
    pointer-events: none;
         transform: scale(1.025);
}

.banner .text_field .text_field_content {
     width: 100%;
    height: 100%;
}

.banner .text_field .title {
          width: auto;
          clear: both;
    font-weight: 100;
    line-height: 125%;
        z-index: 109;
        outline: none;
         margin: 0 0 32px 0;
}

.banner .text_field .description {
        width: 100%;
        clear: both;
    font-size: 11pt;
      z-index: 109;
      outline: none;
}





/* --   ROZMIAR CZCIONKI   -- */

.pt8  { font-size: 8pt  !important; line-height: 175%; }
.pt9  { font-size: 9pt  !important; line-height: 175%; }
.pt10 { font-size: 10pt !important; line-height: 175%; }
.pt11 { font-size: 11pt !important; line-height: 175%; }
.pt12 { font-size: 12pt !important; line-height: 150%; }
.pt14 { font-size: 14pt !important; line-height: 150%; }
.pt16 { font-size: 16pt !important; line-height: 150%; }
.pt18 { font-size: 18pt !important; line-height: 150%; }
.pt20 { font-size: 20pt !important; line-height: 140%; }
.pt24 { font-size: 24pt !important; line-height: 125%; }
.pt30 { font-size: 30pt !important; line-height: 125%; }
.pt32 { font-size: 32pt !important; line-height: 125%; }
.pt36 { font-size: 36pt !important; line-height: 120%; }
.pt48 { font-size: 48pt !important; line-height: 110%; }





/* --   KRÓJ CZCIONKI   -- */

.tit-black    { font-family: titillium_webblack; }
.tit-bold     { font-family: titillium_webbold; }
.tit-semibold { font-family: titillium_websemibold; }
.tit-regular  { font-family: titillium_webregular; }
.tit-light    { font-family: titillium_weblight; }
.tit-thin     { font-family: titillium_webthin; }





/* --   IMPORTOWANIE LISTY KOLORÓW Z PLIKU COLORS.TXT   -- */

.t-web { color: #000001; !important; }
.bg-web { background: #000001; !important; }
.t-amber { color: #ffc107 !important; }
.bg-amber { background: #ffc107 !important; }
.t-aqua { color: #00ffff !important; }
.bg-aqua { background: #00ffff !important; }
.t-blue { color: #2196F3 !important; }
.bg-blue { background: #2196F3 !important; }
.t-light-blue { color: #87CEEB !important; }
.bg-light-blue { background: #87CEEB !important; }
.t-brown { color: #795548 !important; }
.bg-brown { background: #795548 !important; }
.t-cyan { color: #00bcd4 !important; }
.bg-cyan { background: #00bcd4 !important; }
.t-blue-grey { color: #607d8b !important; }
.bg-blue-grey { background: #607d8b !important; }
.t-green { color: #4CAF50 !important; }
.bg-green { background: #4CAF50 !important; }
.t-light-green { color: #8bc34a !important; }
.bg-light-green { background: #8bc34a !important; }
.t-indigo { color: #3f51b5 !important; }
.bg-indigo { background: #3f51b5 !important; }
.t-khaki { color: #f0e68c !important; }
.bg-khaki { background: #f0e68c !important; }
.t-lime { color: #cddc39 !important; }
.bg-lime { background: #cddc39 !important; }
.t-orange { color: #ff9800 !important; }
.bg-orange { background: #ff9800 !important; }
.t-deep-orange { color: #ff5722 !important; }
.bg-deep-orange { background: #ff5722 !important; }
.t-pink { color: #e91e63 !important; }
.bg-pink { background: #e91e63 !important; }
.t-purple { color: #9c27b0 !important; }
.bg-purple { background: #9c27b0 !important; }
.t-deep-purple { color: #673ab7 !important; }
.bg-deep-purple { background: #673ab7 !important; }
.t-red { color: #f44336 !important; }
.bg-red { background: #f44336 !important; }
.t-sand { color: #fdf5e6 !important; }
.bg-sand { background: #fdf5e6 !important; }
.t-teal { color: #009688 !important; }
.bg-teal { background: #009688 !important; }
.t-yellow { color: #ffeb3b !important; }
.bg-yellow { background: #ffeb3b !important; }
.t-white { color: #fff !important; }
.bg-white { background: #fff !important; }
.t-black { color: #000 !important; }
.bg-black { background: #000 !important; }
.t-grey { color: #9e9e9e !important; }
.bg-grey { background: #9e9e9e !important; }
.t-light-grey { color: #f1f1f1 !important; }
.bg-light-grey { background: #f1f1f1 !important; }
.t-dark-grey { color: #616161 !important; }
.bg-dark-grey { background: #616161 !important; }
.t-pale-red { color: #ffdddd !important; }
.bg-pale-red { background: #ffdddd !important; }
.t-pale-green { color: #ddffdd !important; }
.bg-pale-green { background: #ddffdd !important; }
.t-pale-yellow { color: #ffffcc !important; }
.bg-pale-yellow { background: #ffffcc !important; }
.t-pale-blue { color: #ddffff !important; }
.bg-pale-blue { background: #ddffff !important; }
.t-web-digital { color: #e85222 !important; }
.bg-web-digital { background: #e85222 !important; }
.t-web-jiggy { color: #53868b !important; }
.bg-web-jiggy { background: #53868b !important; }
.t-web-extrema { color: #8b8b00 !important; }
.bg-web-extrema { background: #8b8b00 !important; }
.t-web-digital24 { color: #228b22 !important; }
.bg-web-digital24 { background: #228b22 !important; }
.t-web-studioewa { color: #8b0000 !important; }
.bg-web-studioewa { background: #8b0000 !important; }






/* --   WYRÓWNANIE TEKSTU   -- */

.left    { text-align: left; }
.center  { text-align: center; }
.right   { text-align: right; }
.justify { text-align: justify; }










/* --   SLIDERY   -- */

.slider {
    background-image: url(../../.images/blank_photo_light.png);
    margin: 0 16px 32px 16px;
    transition: all .25s ease-in-out;
    overflow: hidden;
    z-index: 104;
}

/* - SZEROKOŚCI - */

.slider.w100p { width: calc(100% - 32px); }
.slider.w50p  { width: calc(50% - 32px); }
.slider.w33p  { width: calc(33.33333% - 32px); }

/* - WYSOKOŚCI - */

.slider.h1 { height: 656px; }
.slider.h2 { height: 736px; }
.slider.h3 { height: 848px; }
.slider.h4 { height: 536px; }
.slider.h5 { height: 456px; }
.slider.h6 { height: calc(100vh - 232px); }

.slider.h1 .banner { height: 656px !important; }
.slider.h2 .banner { height: 736px !important; }
.slider.h3 .banner { height: 848px !important; }
.slider.h4 .banner { height: 536px !important; }
.slider.h5 .banner { height: 456px !important; }
.slider.h6 .banner { height: calc(100vh - 232px) !important; }





/* --   STRZAŁKI DO PRZEWIJANIA SLAJDÓW   -- */

.slider .nav {
    position: absolute;
    top: 0;
    width: 12%;
    height: 100%;
    cursor: pointer;
    transition: all .15s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 120;
}

.slider .nav.next {
    right: 0;
}

.slider .nav.prev {
         left: 0;
    transform: rotate(180deg);
}

.slider .nav .arrow {
        width: 40px;
       height: 40px;
    transform: rotate(45deg);
}

.slider .nav .arrow.white {
      border-top: 4px solid #fff;
    border-right: 4px solid #fff;
}

.slider .nav .arrow.black {
      border-top: 4px solid #111;
    border-right: 4px solid #111;
}

@keyframes move-f {
    0%   { transform: translate(0, 0) rotate(45deg) scale(1); opacity: 1; }
    100% { transform: translate(80px, 0) rotate(45deg) scale(.5); opacity: 0; }
}

@keyframes move-s {
    0%   { transform: translate(-40px, 0) rotate(45deg) scale(.5); opacity: 0; }
    100% { transform: translate(40px, 0) rotate(45deg) scale(1); opacity: 1; }
}

.slider .nav:hover .arrow.f { animation: move-f .75s cubic-bezier(.785, .135, .15, .86) infinite; }
.slider .nav:hover .arrow.s { animation: move-s .75s cubic-bezier(.785, .135, .15, .86) infinite; }





/* --   PAGER SLIDERA   -- */

.slider .slider-pager {
    position: absolute;
    bottom: 24px;
    left: 50%;
    width: auto;
    height: 24px;
    transform: translate(-50%, 0);
    z-index: 120;
}

.slider .slider-pager p.active::after {
    background: # !important;
    transform: scale(1.15);
}

.slider .slider-pager p.active::after,
.slider .slider-pager p:hover::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #44;
    border-radius: 100%;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) !important;
}

.slider .slider-pager p:hover { background: #fff; }
.slider .slider-pager p.active { background: #fff; }
.slider .slider-pager p {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #fff;
    margin: 0 16px;
    cursor: pointer;
    transition: all .2s ease-out;
}





/* --   BANERY W SLIDERACH   -- */

.slider .slider-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .6s cubic-bezier(1, 0, 0, 1);
    z-index: 119;
}

.slider .banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    margin: 0;
}

.slider .banner.slide-1 { left: 0; }
.slider .banner.slide-2 { left: 100%; }
.slider .banner.slide-3 { left: 200%; }
.slider .banner.slide-4 { left: 300%; }
.slider .banner.slide-5 { left: 400%; }
.slider .banner.slide-6 { left: 500%; }
.slider .banner.slide-7 { left: 600%; }
.slider .banner.slide-8 { left: 700%; }
.slider .banner.slide-9 { left: 800%; }
.slider .banner.slide-10 { left: 900%; }










/* --   MENU   -- */

.menu ul {
    list-style: none;
    width: auto;
    height: 72px;
    line-height: 72px;
    transform: translate(-50%, 0);
    left: 50%;
    transition: all .15s cubic-bezier(0, 1, 0, 1);
}

.menu ul li {
    color: #666;
    height: 100%;
    cursor: pointer;
    padding: 0 32px;
    text-transform: uppercase;
    transition: all .1s ease-out .2s, color .1s ease-out .0s;
}

.menu ul li:hover {
    color: #;
}

.menu ul li.active {
    color: #;
    border-bottom: 2px solid #;
    pointer-events: none;
    /* line-height: 88px; */
}










/* --   BLOK   -- */

.block.w100p { width: 100%; }
.block.h1 { height: auto; }

.block.cols-1 .col { width: 100% !important; }
.block.cols-2 .col { width: 50% !important; }
.block.cols-3 .col { width: 33.33333% !important; }
.block.cols-4 .col { width: 25% !important; }
.block.cols-5 .col { width: 20% !important; }
.block.cols-6 .col { width: 16.66666% !important; }










/* --   SUB-MENU   -- */

#sub-menu {
    width: 100%;
    height: 72px;
    color: #666;
    text-transform: uppercase;
    z-index: 20002;
    transition: all .25s cubic-bezier(.165, .84, .44, 1);
}










/* --   KONTENER NA TREŚĆ W SUBMENU   -- */

#sub-menu-content { width: 100%; }
#sub-menu-content.top-margin { margin: 72px 0 0 0; }
.sub-menu-content { width: 100%; }










/* --   LAZY LOAD   -- */

.lazy-load {
       opacity: 0;
     transform: translate(0, 100px);
    transition: all 1s cubic-bezier(0, .8, .2, 1) .25s;
}

.lazy-load.lazy-show {
      opacity: 1;
    transform: translate(0, 0);
}

.lazy-load.lazy-hide-when-bg-loading {
      opacity: 0 !important;
    transform: translate(0, 100px) !important;
}










/* --   MASKI   --- */

#dark_mask {
          position: fixed;
              left: 0;
               top: 0;
             width: 100%;
            height: 100%;
        background: rgba(0, 0, 0, .15);
           z-index: 18000;
    pointer-events: none;
        transition: all .2s ease-out;
       will-change: transform;
}










/* --   WIADOMOŚCI Z POTWIERDZENIEM AKCJI SYSTEMU   -- */

.fullscreen_confirm {
           position: fixed;
               left: 0;
                top: 0;
              width: 100%;
             height: 100%;
         background: rgba(250, 250, 250, 1);
            z-index: 19001;
         transition: all .25s ease-out;
            display: flex;
     flex-direction: column;
    justify-content: center;
        align-items: center;
}

.fullscreen_confirm.hide {
    transform: translate(0, 32px);
}

.fullscreen_confirm h4 {
      font-size: 20pt;
          width: 100%;
     text-align: center;
          color: #;
    font-weight: 100;
    font-family: titillium_websemibold;
         margin: 24px 0;
}

.fullscreen_confirm h4.error {
    color: #df2000;
}

.fullscreen_confirm p {
         margin: 24px 0;
      font-size: 12pt;
          width: 40%;
     text-align: center;
          color: #666;
    line-height: 150%;
}





/* --   IKONKA   -- */

.notice-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice-icon svg {
    width: 40px;
    height: 40px;
    stroke-width: 1px;
    color: #;
}

.notice-icon.success { background: #; }
.notice-icon.error { background: #df2000; }
.notice-icon.success svg,
.notice-icon.error svg {
    color: #fff;
    width: 28px;
    height: 28px;
    stroke-width: 3px;
}










/* --   COOKIES INFO   -- */

#cookies-info-perspective {
    position: fixed;
    right: 64px;
    bottom: 64px;
    width: 360px;
    height: 400px;
    perspective: 800px;
    z-index: 2000;
}

#cookies-info {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 360px;
    background: #fff;
    z-index: 2000;
    color: #888;
    text-align: center;
    font-size: 10pt;
    font-family: titillium_webregular;
    line-height: 150%;
    border-radius: 5px;
    box-shadow: 0 8px 64px rgba(0, 0, 0, .3);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

#cookies-info.hide {
    transform-origin: 50% 80%;
    transform: translate(0, 32px) scale(.95) rotateX(15deg);
}

#cookies-info a {
    float: none;
    color: #888;
}

#cookies-info b {
    float: none;
}

#cookies-info a:hover {
    color: #;
}

#cookies-info .h {
    width: 100%;
    margin: 32px 0 16px 0;
    color: #444;
    font-size: 14pt;
    font-family: titillium_webbold;
    text-transform: uppercase;
    padding: 0 32px;
}

#cookies-info .text {
    width: 100%;
    margin: 0 0 16px 0;
    padding: 0 32px;
}

#cookies-info .bottom {
    background: #eee;
    width: 100%;
    padding: 24px 32px;
    border-radius: 0 0 5px 5px;
}

#close-cookies-info {
    width: 100%;
}










/* --   PRZEŁĄCZANE IKONKI   -- */

.icon-switch {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.icon-switch .icon {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(0, 0, 0, .5);
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.icon-switch .switch-mask {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.icon-switch .icon svg {
    width: 24px;
    height: 24px;
}

.icon-switch:hover .icon svg {
    transform: scale(1);
    stroke-width: 1px;
    color: #;
}

.icon-switch .second {
    transform: translate(0, -100%);
    color: #f00;
    background: rgba(0, 0, 0, .1);
}

/* --   IKONKA PRZEŁĄCZONA   -- */

.icon-switch.switch .first {
    transform: translate(0, 100%);
    background: rgba(0, 0, 0, .1);
}

.icon-switch.switch .second {
    transform: translate(0, 0);
    background: rgba(0, 0, 0, 0);
}

.icon-switch .icon.filled {
    fill: # !important;
    color: # !important;
    stroke-width: 0 !important;
    stroke: none !important;
}










/* --   IKONKA PRESETÓW W TOOLBARZE W NAGŁÓWKU   -- */

#preset-save-panel-icon {
    width: 56px;
    height: 56px;
    margin: 0 12px 0 0;
}

#preset-save-panel-icon .first svg {
    color: #444;
    stroke-width: 2px !important;
}

/* #preset-save-panel-icon.switch .line { transform: scale(1, 1); }
#preset-save-panel-icon .line {
    position: absolute;
    right: -320px;
    top: 100%;
    width: 360px;
    height: 4px;
    background: #;
    transition: all .4s cubic-bezier(.785, .135, .15, .86);
    transform-origin: 100% 50%;
    transform: scale(0, 1);
} */





/* --   PANEL ZAPISYWANIA PRESETÓW PRODUKTÓW   -- */

#preset-save-panel {
    position: absolute;
    top: 60px;
    right: 32px;
    width: 360px;
    background: #eee;
    box-shadow: 0 0 128px 128px rgba(255, 255, 255, 1);
    border-radius: 0 0 5px 5px;
    z-index: 16;
    border-top: 4px # solid;
}

#preset-save-panel.hide {
    transform: translate(0, -150%);
    opacity: 1 !important;
    box-shadow: 0 0 128px 128px rgba(255, 255, 255, 0);
}

#preset-save-panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, .025);
    box-sizing: border-box;
    border-radius: 0 0 5px 5px;
}

#preset-save-form {
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 0 0 24px 0;
}

#preset-save-panel .small-title {
    width: 100%;
    font-size: 12pt;
    text-transform: uppercase;
    font-family: titillium_webbold;
    color: #666;
    padding: 8px 24px;
    line-height: 24px;
}

#preset-save-panel .title {
    width: 100%;
    font-size: 12pt;
    text-transform: uppercase;
    font-family: titillium_webbold;
    color: #666;
    padding: 24px;
    background: #e7e7e7;
    margin: 0 0 8px 0;
    line-height: 24px;
}

#preset-save-panel .title::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

#preset_name {
    padding: 8px 12px;
    font-size: 12pt;
    margin: 0 0 8px 0;
    border: 0;
    border-radius: 3px;
    background: #fff;
    width: 100%;
    color: #666;
    height: 40px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
    font-family: titillium_websemibold;
}

#preset_name:hover {
    box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
}

#preset_name:focus {
    background: #fafafa;
}

#preset-save-panel .description {
    padding: 8px 24px;
    color: #666;
}

#preset-save-panel .goto-presets {
    position: absolute;
    right: 32px;
    top: 40px;
    width: 24px;
    height: 24px;
}

#preset-save-panel .goto-presets:hover svg { color: #; }
#preset-save-panel .goto-presets svg {
    width: 24px;
    height: 24px;
    color: #666;
}





/*
#preset-save-panel .line .n-checkbox {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
    top: 0;
    margin: 6px 0 0 0;
    border: 0;
    z-index: 2;
}

#preset-save-panel .line .n-checkbox:hover {
    box-shadow: 0 2px 1px rgba(0, 0, 0, .2);
}

#preset-save-panel .line .n-checkbox::after {
    opacity: 0;
}

#preset-save-panel .line .n-checkbox.checked {
    box-shadow: 0 2px 1px rgba(0, 0, 0, .2);
}

#preset-save-panel .line .n-checkbox.checked svg {
    color: #f00;
}
*/





/* --   PRZYCISK: ZAPISZ PRESET   -- */

#preset-save-bt {
    transition: all .2s ease-out;
    z-index: 1000;
}

#preset-save-bt::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #;
    border-radius: 100%;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    width: 1500px;
    height: 1500px;
}

#preset-save-bt b {
    transition: all .2s ease-out;
}

#preset-save-bt i.span-loader {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    opacity: 0;
    transition: all .2s ease-out;
}

/* --   Z LOADEREM   -- */

#preset-save-bt.loading {
    width: 32px !important;
    border-radius: 100%;
}

#preset-save-bt.loading b {
    opacity: 0;
}

#preset-save-bt.loading i {
    opacity: 1;
}

/* --   ROZSZERZONY NA CAŁOŚĆ   -- */

#preset-save-bt.expand::after {
    transform: translate(-50%, -50%) scale(1);
}

#preset-save-bt.expand i {
    opacity: 0 !important;
}





#preset-save-confirm {
    position: absolute;
    left: 0;
    top: 50%;
    line-height: 24px;
    color: #fff;
    transition: all .2s ease-out;
    transform: translate(0, -50%);
    padding: 0 24px;
    font-size: 12pt;
    width: 100%;
    text-align: center;
    font-family: titillium_websemibold;
    pointer-events: none;
    z-index: 1001;
    text-transform: uppercase;
}

#preset-save-confirm svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    color: #fff;
    transform: translate(-50%, -50%);
    margin: -32px 0 0 0;
}




















/* --   PRZEŁĄCZNIK TOOLBARÓW W NAGŁÓWKU   -- */

#toolbar-switch {
    position: absolute;
    top: 0;
    right: 32px;
    width: 56px;
    height: 80px;
    cursor: pointer;
    overflow: hidden;
    pointer-events: none;
    z-index: 15;
    margin: 0;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* #toolbar-switch .toggle {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    background: rgba(0, 0, 0, 0);
}

#toolbar-switch .tg1 {
    opacity: .5;
    pointer-events: none;
}

#toolbar-switch .tg2 {
    transform: translate(0, -100%);
    background: rgba(0, 0, 0, .1);
} */



/* --   IKONKA KOSZYKA   -- */

/* #toolbar-switch .cart {
    width: 32px;
    height: 32px;
    padding: 5px;
}

#toolbar-switch .cart > svg {
    width: 22px;
    height: 22px;
    color: rgba(0, 0, 0, .5);
    transform: scaleX(-1) translate(-1px, 0);
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

#toolbar-switch:hover .cart > svg {
    transform: scaleX(1) translate(-2px, 0) scale(1.1);
    stroke-width: 1px;
} */



/* --   IKONKA BURGERA   -- */

#toolbar-switch .burger {
    width: 32px;
    height: 32px;
}

#toolbar-switch .burger span {
    position: absolute;
    left: 8px;
    width: 16px;
    height: 2px;
    background: rgba(0, 0, 0, .5);
    transition: all .15s ease-out;
}

#toolbar-switch .burger span:nth-child(1) { top: 10px; }
#toolbar-switch .burger span:nth-child(2) { top: 15px; }
#toolbar-switch .burger span:nth-child(3) { top: 20px; }

#toolbar-switch:hover .burger span:nth-child(1),
#toolbar-switch.invert-rotate .burger span:nth-child(1),
#toolbar-switch.clicked .burger span:nth-child(1) {
    transform: rotate(45deg);
    background: #;
}

#toolbar-switch:hover .burger span:nth-child(2),
#toolbar-switch.invert-rotate .burger span:nth-child(2),
#toolbar-switch.clicked .burger span:nth-child(2) {
    opacity: 0;
}

#toolbar-switch:hover .burger span:nth-child(3),
#toolbar-switch.invert-rotate .burger span:nth-child(3),
#toolbar-switch.clicked .burger span:nth-child(3) {
    transform: rotate(-45deg);
    background: #;
}

#toolbar-switch:hover .burger,
#toolbar-switch.clicked .burger {
    transform: rotate(90deg) scale(.8);
    transition: all .15s ease-out;
}

#toolbar-switch.invert-rotate .burger {
    transform: rotate(-90deg) scale(.8);
}










/*
 *   BODYCLASS: ".SHOW-MENU"
 *   --------------------------
 *   KLASA WYŚWIETLAJĄCA GÓRNE MENU
 */

body.show-header-menu #header-menu {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

/* body.show-header-menu #dark_mask { } */










/*
 *   BODYCLASS: ".SHOW-ORDER-FORM"
 *   --------------------------------
 *   PRZEŁĄCZNIK MIĘDZY EKRANEM STARTOWYM A FORMULARZEM
 *   MIĘDZY MENU GÓRNYM A TOOLBAREM KOSZYKA
 */

/* --   PRZYCIEMNIENIE NAGŁÓWKA Z LOGIEM   -- * /

body.show-order-form #header-menu {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

/* --   SCHOWANIE MENU   -- * /

body.show-order-form #header-menu ul.level-1 {
    transform: translate(0, -16px);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    opacity: 0;
    pointer-events: none;
}

/* --   WYSUNIĘCIE TOOLBARA Z OPCJAMI KOSZYKA   -- * /

body.show-order-form #shopping-cart-toolbar {
    transform: translate(0, 0);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    opacity: 1;
}

body.show-order-form #shopping-cart-toolbar-mask {
    pointer-events: all;
    overflow: visible;
}

/* --   ZMIANA PRZEŁĄCZNIKA MENU / TOOLBAR   -- * /

body.show-order-form #toolbar-switch { pointer-events: all; }
body.show-order-form #toolbar-switch .tg1 {
    transform: translate(0, 100%);
    background: rgba(0, 0, 0, .1);
    opacity: 1;
}

body.show-order-form #toolbar-switch .tg2 {
    transform: translate(0, 0);
    background: rgba(0, 0, 0, 0);
}

body.show-order-form .highlight { opacity: 1; }
body.show-order-form #product_steps_container { transform: translate(0, 0); }
body.show-order-form #product_steps { height: 80px; }
body.show-order-form #product_steps li { height: 80px; }
body.show-order-form #product_steps li.step::after { line-height: 80px; }
body.show-order-form #product_steps li b { line-height: 80px; }





/* body.hide-start-screen #step1_container { opacity: 0; } * /





/* --   PRZYWRÓCENIE / SCHOWANIE MENU   -- * /

body.show-order-form.switch-to-menu #header-menu ul.level-1 {
    transform: none;
    opacity: 1;
    pointer-events: all;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

/* --   SCHOWNIE TOLLBARA Z OPCJAMI KOSZYKA DLA MENU   -- * /

body.show-order-form.switch-to-menu #shopping-cart-toolbar {
    transform: translate(0, 16px);
    opacity: 0;
}

body.show-order-form.switch-to-menu #shopping-cart-toolbar-mask {
    pointer-events: none;
    overflow: hidden;
}

/* --   ZMIANA PRZEŁĄCZNIKA MENU / TOOLBAR   -- * /

body.show-order-form.switch-to-menu #toolbar-switch .tg2 {
    transform: translate(0, -100%);
    background: rgba(0, 0, 0, .1);
}

body.show-order-form.switch-to-menu #toolbar-switch .tg1 {
    transform: translate(0, 0);
    background: rgba(0, 0, 0, 0);
}

/* --   SCHOWNIE TOLLBARA Z OPCJAMI KOSZYKA DLA EDYTORA TREŚCI    -- * /

body.show-order-form.switch-to-content-editor #shopping-cart-toolbar,
body.show-order-form-V2.switch-to-content-editor #shopping-cart-toolbar {
    transform: translate(0, 16px) !important;
    opacity: 0 !important;
}

body.show-order-form.switch-to-content-editor #shopping-cart-toolbar-mask,
body.show-order-form-V2.switch-to-content-editor #shopping-cart-toolbar-mask {
    pointer-events: none !important;
    overflow: hidden !important;
} */










/* --   NAJWYŻSZA WARSTWA   -- */

#top-layer-mask:not(.off) { pointer-events: all; }
#top-layer-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999998;
    background: rgba(255, 255, 255, .8);
    pointer-events: none;
    transition: all .25s ease-out;
}

#top-layer {
    position: fixed;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    z-index: 999999;
    pointer-events: all;
}

#top-layer.on-top {
    z-index: 999999;
}





.notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    background: #;
    color: #fff;
    transform: translate(-50%, 0);
    padding: 12px 16px 12px 16px;
    border-radius: 4px;
    transition: all .25s ease-out;
}

.notification.loading {
    padding: 12px 16px 12px 48px;
}

.notification .info {
    text-transform: uppercase;
    font-family: titillium_websemibold;
}

.notification .span-loader {
    left: 24px;
    transform: translate(0, -50%);
}

.notification.hide {
    transform: translate(-50%, 16px);
}










/* --   WYŚRODKOWANE POLA FLEX   -- */

.flex-field-perspective {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 800px;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    background: #f0f0f0dd;
}

.flex-field {
    width: 680px;
    height: calc(100% - 200px);
    text-align: left;
    font-weight: 100;
    font-size: 10pt;
    line-height: 150%;
    font-family: titillium_webregular;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    background: #f8f7f2;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.flex-field.hide {
    transform-origin: 50% 80%;
    transform: translate(0, 32px) scale(.95) rotateX(20deg);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

.flex-field::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    box-shadow: 0 16px 256px rgba(0, 0, 0, .1);
    border-radius: 6px;
}



/* --   NAGŁÓWEK   -- */

.flex-field .field-header {
    width: 100%;
    height: 80px;
    z-index: 10;
    padding: 0;
    border-radius: 6px 6px 0 0;
    border-top: 2px solid #;
}

.flex-field .field-title {
    font-size: 16pt;
    max-width: calc(100% - 80px);
    line-height: 150%;
    height: auto;
    color: #666;
    font-family: titillium_webbold;
    text-transform: uppercase;
    margin: 0 0 0 40px;
}

.flex-field .field-title p {
    width: 100%;
}

.flex-field .field-title b {
    color: #;
    font-size: 11pt;
    font-family: titillium_webbold;
    line-height: 150%;
}

.flex-field .field-title span {
    color: #aaa;
    font-size: 11pt;
    font-family: titillium_webbold;
    margin: 0 0 0 8px;
    line-height: 150%;
}

.flex-field .header-icons {
    position: absolute;
    right: 0;
    top: 0;
    height: 80px;
}

.flex-field .header-icon {
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 100;
}

.flex-field .header-icon svg {
    padding: 0;
    width: 20px;
    height: 20px;
    color: #666;
}

.flex-field .header-icon:hover svg {
    color: #;
}

.flex-field .center-title {
    width: 100%;
    margin: 40px 0 0 0;
    color: #666;
}

.flex-field .center-title .big {
    font-size: 22pt;
    font-family: titillium_websemibold;
    width: 100%;
    text-align: center;
    line-height: 150%;
    border-bottom: 1px solid #ddd;
    padding: 0 0 32px 0;
}

.flex-field .center-title .medium {
    font-size: 17pt;
    font-family: titillium_websemibold;
    width: 100%;
    text-align: center;
    line-height: 150%;
}

.flex-field .center-title .small {
    font-size: 11pt;
    font-family: titillium_webregular;
    width: 100%;
    text-align: center;
    line-height: 150%;
}

.flex-field .center-title b {
    float: none;
    font-family: titillium_webbold;
    color: #;
}





.flex-field .tabs {
    height: 56px;
    line-height: 56px;
    z-index: 9;
    width: 100%;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, .25);
}

.flex-field .tabs::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

.flex-field .tabs::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .75);
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.flex-field .tabs .tab {
    color: #999;
    text-align: left;
    padding: 0 40px;
}

.flex-field .tabs .tab:nth-child(2) { text-align: center; }
.flex-field .tabs .tab:nth-child(3) { text-align: right; }

.flex-field .tabs .tab.active {
    color: #;
    border-bottom: 2px solid #;
    transform: translate(0, 0);
    height: 55px;
    z-index: 10;
}

.flex-field .tabs .tab:hover {
    color: #222;
}

.flex-field .tabs .tab.active:hover {
    color: #;
}

.flex-field .tabs-content {
    position: absolute;
    left: 0;
    top: 135px;
    padding: 40px;
    overflow: auto;
    z-index: 12;
    width: 100%;
    height: calc(100% - 200px);
    background: #f0efea;
    color: #666;
    line-height: 175%;
}





.flex-field .cols {
    width: 100%;
    min-height: 200px;
    margin: 40px 0;
    z-index: 10;
}

.flex-field .cols .col {
    width: 50%;
    height: 100%;
    border-left: 1px solid rgba(0, 0, 0, .1);
    padding: 16px 40px;
    z-index: 10;
}

.flex-field .cols .col:first-child {
    border: 0;
}

.flex-field .cols .col .title {
    color: #666;
    font-size: 15pt;
    font-family: titillium_websemibold;
    margin: 0 0 24px 0;
    width: 100%;
}

.flex-field .cols .col .title.small {
    font-size: 11pt;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    font-family: titillium_webbold;
}

.flex-field .cols .col .content {
    color: #666;
    font-size: 10pt;
    font-family: titillium_webregular;
    margin: 0 0 24px 0;
    width: 100%;
}










/* --   OGÓLNE STYLE UWAG DO PRODUKTÓW I ZAMÓWIEŃ   -- */

.comments-list-container {
    position: absolute;
    left: 0;
    top: 80px;
    height: calc(100% - 140px);
    width: 100%;
    z-index: 10;
    background: #f0efea;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

.comments-list-container::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

.comments-list-container::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

.comments-list {
    padding: 24px 40px;
    overflow: auto;
    max-height: calc(100% - 4px);
    margin: 2px 0 0 0;
    width: 100%;
    height: 100%;
}

.comments-list .list {
    width: 100%;
    z-index: 15;
}

.comments-list .comment {
    width: 90%;
    padding: 16px 20px;
    border-radius: 8px
}

.comments-list .comment .date {
    width: 100%;
    color: #bbb;
    font-size: 9pt;
    font-family: titillium_webregular;
    margin: 16px 0 0 0;
    text-transform: uppercase;
}

.comments-list .comment .digitalalbum-logo {
    width: 113px;
    height: 10px;
    color: #fff;
    margin: 0 0 24px 0;
    float: right;
}



/* --   OKIENKO KLIENTA   -- */

.comments-list .comment-c {
    background: #fff;
    color: #666;
    margin: 0 0 24px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.comments-list .comment-c::before {
    content: '';
    position: absolute;
    right: calc(100% - 7px);
    bottom: 23px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    z-index: 10;
    box-sizing: border-box;
    border-left: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.comments-list .comment-c::after {
    content: '';
    position: absolute;
    right: calc(100% - 6px);
    bottom: 24px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    z-index: 10;
}



/* --   OKIENKO DIGITALALBUM   -- */

.comments-list .comment-a {
    margin: 0 0 24px 10%;
    background: #e75400;
    color: #fff;
}

.comments-list .comment-a .date {
    color: rgba(255, 255, 255, .75);
    text-align: right;
}

.comments-list .comment-a::after {
    content: '';
    position: absolute;
    left: calc(100% - 6px);
    bottom: 32px;
    width: 12px;
    height: 12px;
    background: #e75400;
    transform: rotate(45deg);
}



/* --   OKIENKO DYSTRYBUTORA   -- */

.comments-list .comment-d {
    margin: 0 0 24px 10%;
    background: #;
    color: #fff;
}

.comments-list .comment-d .date {
    color: rgba(255, 255, 255, .75);
    text-align: right;
}

.comments-list .comment-a::after {
    content: '';
    position: absolute;
    left: calc(100% - 6px);
    bottom: 32px;
    width: 12px;
    height: 12px;
    background: #;
    transform: rotate(45deg);
}



.comments-list .no-comments-info {
    margin: 32px 0 0 0;
}

#last-comment.hide {
    transform: translate(-150%, 0);
}









.new-comment-field {
    width: 100%;
    height: 140px;
    background: #e7e5de;
    padding: 0;
    z-index: 9;
}

.new-comment-field::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

.new-comment-field textarea {
    border: 0;
    background: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 24px 40px;
    font-family: titillium_webregular;
    font-size: 11pt;
    color: #666;
    z-index: 9;
}

.new-comment-field textarea:hover,
.new-comment-field textarea:focus {
    background: rgba(255, 255, 255, .15);
}

.new-comment-field textarea.adding {
    opacity: .25;
}










/* --   UWAGI DO ZAMÓWIENIA   -- */

#order-comments {
    width: 520px;
    height: 640px;
    z-index: 10;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

#order-comments.show-new-comment {
    height: 780px;
}

#order-comments .comments-list-container {
    height: 520px;
}

#order-comments.show-new-comment .comments-list-container {
    transform: translate(0, 140px);
}

#add-order-comment {
    z-index: 20;
}

#cancel-add-order-comment.hide {
    transform: translate(0, -56px);
}

#add-order-comment-loader {
    z-index: 10;
    transition-delay: .15s;
}

#add-order-comment-loader.hide {
    left: calc(100% - 32px);
    transition-delay: 0s;
}










/* --   UWAGI DO PRODUKTU   -- */

#product-details .comments-list-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#product-details .comments-list-container {
    top: 0;
    height: 100%;
}

#product-details.show-new-comment .comments-list-container {
    transform: translate(0, 140px);
}

#product-details .comments-list-container::before,
#product-details .comments-list-container::after {
    display: none;
}

#product-details .new-comment-field::after {
    top: auto;
    bottom: 0;
}

#add-product-comment {
    z-index: 20;
}

#cancel-add-product-comment.hide {
    transform: translate(0, -56px);
}

#add-product-comment-loader {
    z-index: 10;
    transition-delay: .15s;
}

#add-product-comment-loader.hide {
    left: calc(100% - 32px);
    transition-delay: 0s;
}










/* --   GÓRNA MASKA ZACIEMNIAJĄCA   -- */

#product-details .top-mask {
    position: absolute;
    left: 0;
    top: 135px;
    width: calc(100% - 8px);
    height: 40px;
    z-index: 20;
    pointer-events: none;
    background: rgb(240, 239, 234);
    background: -moz-linear-gradient(180deg, rgba(240, 239, 234, 1) 0%, rgba(240, 239, 234, 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(240, 239, 234, 1) 0%, rgba(240, 239, 234, 0) 100%);
    background: linear-gradient(180deg, rgba(240, 239, 234, 1) 0%, rgba(240, 239, 234, 0) 100%);
}

/* --   DOLNA MASKA ZACIEMNIAJĄCA   -- */

#product-details .bottom-mask {
    content: '';
    position: absolute;
    left: 0;
    bottom: 65px;
    width: calc(100% - 8px);
    height: 40px;
    z-index: 20;
    background: rgb(240, 239, 234);
    background: -moz-linear-gradient(180deg, rgba(240, 239, 234, 0) 0%, rgba(240, 239, 234, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(240, 239, 234, 0) 0%, rgba(240, 239, 234, 1) 100%);
    background: linear-gradient(180deg, rgba(240, 239, 234, 0) 0%, rgba(240, 239, 234, 1) 100%);
}






#product-details .product-parameters p {
    width: 100%;
}

#product-details .title {
    font-family: titillium_webbold;
    text-transform: uppercase;
    margin: 8px 0 8px 0;
    font-size: 11pt;
}

#product-details .promo {
    font-family: titillium_webbold;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    color: #0b9a00;
}

#product-details .parent {
    font-size: 12pt;
    margin: 0 0 16px 0;
}

#product-details li.none { margin: 0 0 0 -17px; }
#product-details .none {
    color: #aaa;
    list-style-type: none;
}

#product-details .product-parameters b.gray {
    color: #aaa;
}

#product-details .product-parameters b {
    float: none;
    font-family: titillium_websemibold;
    color: #;
}

#product-details .product-parameters b:nth-child(2) { text-transform: uppercase; }
#product-details .product-parameters b:nth-child(2)::before {
    content: ' - ';
}

#product-details .gray {
    color: #aaa;
}

#product-details .product-name {
    font-size: 16pt;
    font-family: titillium_webbold;
    color: #;
    text-transform: uppercase;
    margin: 0 0 16px 0;
    line-height: 125%;
}

#product-details .product-name span {
    color: #0b9a00;
}

#product-details .product-id,
#product-details .product-price {
    font-size: 12pt;
    color: #888;
    text-transform: uppercase;
    font-family: titillium_websemibold;
}

#product-details .product-id b,
#product-details .product-price b {
    color: #444;
}

#product-details .product-price {
    margin: 0 0 16px 0;
}

#product-details ul {
    padding: 0 16px 16px 17px;
    list-style-type: square;
    width: 100%;
}

#product-details ul.promo {
    margin: 0;
}

#product-details ul.promo li {
    font-family: titillium_webregular;
}

#product-details ul.comments {
    list-style-type: none;
    padding: 0;
}

#product-details ul li {
    width: 100%;
}

#product-details ul li.no-list-style-options,
#product-details ul li.no-list-style {
    list-style-type: none;
}

#product-details ul li.no-list-style-options ul,
#product-details ul li.no-list-style ul {
    padding: 0 16px;
    list-style-type: none;
}

#product-details ul li.no-list-style-options ul li::before,
#product-details ul li.no-list-style ul li::before {
    content: '-';
    position: absolute;
    left: -16px;
    top: 0;
    line-height: 175%;
}

#product-details ul li.main-style {
    list-style-type: square;
}

#product-details ul li.main-style ul {
    padding: 0;
}





/* --   PODGLĄD STEMPLA FIRMOWEGO   -- */

#product-details .stamp-thumb {
    list-style: none;
}

#product-details .stamp-thumb img {
    position: absolute;
    right: 0;
    top: -72px;
    width: 80px;
    height: 80px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 5px;
}










/* --   OPCJE PŁATNOŚCI ZA ZAMÓWIENIE   -- */

#order-payments {
    width: 800px;
    height: auto;
    z-index: 10;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}





/* --   PAYU   -- */

#payform {
    width: auto;
    height: auto;
}

#payu-button {
    width: 100px;
    height: 50px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    background-image: url(../../.images/logo_payu.svg);
    background-size: 100px 50px;
    border: 0;
}

#payu-button:hover {
    transform: scale(1.1);
}










/* --   STYLE ZMIENIAJĄCE WYGLĄD CKEDITORA   -- */

.ck.ck-editor__editable_inline {
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ck.ck-icon {
    width: 18px !important;
    height: 18px !important;
}

.ck.ck-dropdown .ck-dropdown__arrow {
    width: 8px !important;
    height: 8px !important;
}

.ck.ck-editor__editable_inline>:first-child { margin-top: 0 !important; }
.ck.ck-editor__editable_inline>:last-child { margin: 0 !important; }
.ck.ck-heading-dropdown { width: 64px !important; }
.ck.ck-heading-dropdown .ck-dropdown__arrow {
    width: 24px !important;
    height: 24px !important;
}

/* --   WYMUSZENIE ZMIANY SPOSOBU POJAWIANIA SIĘ TOOLBARA CK EDITORA   -- */

/* .ck.ck-balloon-panel { filter: invert(1); } */

/* --   OD GÓRY   -- */

.ck.ck-balloon-panel.ck-balloon-panel_arrow_s {
    display: block !important;
    opacity: 0 !important;
    transform: translate(0, -8px);
    transition: opacity .3s cubic-bezier(.785, .135, .15, .86);
}

.ck.ck-balloon-panel.ck-balloon-panel_arrow_s.ck-balloon-panel_visible {
    opacity: 1 !important;
    transform: translate(0, -8px);
    transition: opacity .3s cubic-bezier(.785, .135, .15, .86);
}

/* --   OD DOŁU   -- */

.ck.ck-balloon-panel.ck-balloon-panel_arrow_n {
    display: block !important;
    opacity: 0 !important;
    transform: translate(0, 8px);
    transition: opacity .3s cubic-bezier(.785, .135, .15, .86);
}

.ck.ck-balloon-panel.ck-balloon-panel_arrow_n.ck-balloon-panel_visible {
    opacity: 1 !important;
    transform: translate(0, 8px);
    transition: opacity .3s cubic-bezier(.785, .135, .15, .86);
}










/* --   POLE EDYTORA   -- */

.text_field.editor.ck { line-height: 200%; }
.text_field.editor {
    width: 100%;
    color: #666;
    margin: 0;
    font-size: 10pt;
    overflow: visible !important;
    min-height: 80px;
    border: 1px solid rgba(0, 0, 0, 0) !important;
}

.text_field.editor * {
    float: none;
}

.text_field.editor h1 {
    font-weight: 100;
    font-family: titillium_websemibold;
    font-size: 24pt;
 /* line-height: 140%; */
    text-transform: none;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    height: auto;
    width: 100%;
}

.text_field.editor h1 {
    font-weight: 100;
    font-family: titillium_websemibold;
    font-size: 24pt;
 /* line-height: 140%; */
    text-transform: none;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    height: auto;
    width: 100%;
}

.text_field.editor h1::before,
.text_field.editor h1::after {
    display: none;
}

.text_field.editor h2 {
    font-weight: 100;
    font-family: titillium_websemibold;
    font-size: 20pt;
 /* line-height: 140%; */
    text-transform: none;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    height: auto;
    width: 100%;
    color: #;
}

.text_field.editor h2::before,
.text_field.editor h2::after {
    display: none;
}

.text_field.editor h3 {
    font-weight: 100;
    font-family: titillium_websemibold;
    font-size: 18pt;
 /* line-height: 140%; */
    text-transform: none;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    height: auto;
    width: 100%;
}

.text_field.editor h3::before,
.text_field.editor h3::after {
    display: none;
}

.text_field.editor h4 {
    font-weight: 100;
    font-family: titillium_websemibold;
    font-size: 16pt;
 /* line-height: 130%; */
    text-transform: none;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    height: auto;
    width: 100%;
}

.text_field.editor h4::before,
.text_field.editor h4::after {
    display: none;
}

.text_field.editor h5 {
    font-weight: 100;
    font-family: titillium_webbold;
    font-size: 12pt;
 /* line-height: 120%; */
    text-transform: none;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    height: auto;
    width: 100%;
}

.text_field.editor h5::before,
.text_field.editor h5::after {
    display: none;
}

.text_field.editor ol {
    padding: 0 14px;
    width: 100%;
    box-sizing: border-box;
}

.text_field.editor ol li {
    /* line-height: 200% !important; */
    width: 100%;
    padding: 0 0 0 8px;
}

.text_field.editor ul {
    padding: 0 16px;
    list-style: square;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.text_field.editor ul li {
    /* line-height: 200% !important; */
    width: 100%;
    padding: 0 0 0 8px;
}

.text_field.editor p {
    width: 100%;
}

.text_field.editor strong,
.text_field.editor b {
    font-weight: 100;
    font-family: titillium_websemibold;
}

.text_field.editor i,
.text_field.editor u,
.text_field.editor b,
.text_field.editor strong,
.text_field.editor span,
.text_field.editor a {
    float: none !important;
}

.text_field.editor td {
    padding: 0.4rem;
}










/* --   POLE EDYTORA - KOPIA ZAPASOWA   -- */

/* .text_field.editor {
    width: 100%;
    color: #666;
    margin: 0;
    line-height: 200%;
    font-size: 10pt;
    overflow: visible !important;
    min-height: 80px;
    border: 1px solid rgba(0, 0, 0, 0) !important;
}

.text_field.editor * {
    float: none;
}

.text_field.editor h1 {
    font-weight: 100 !important;
    font-family: titillium_websemibold !important;
    font-size: 24pt !important;
    line-height: 140% !important;
    text-transform: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    width: 100% !important;
}

.text_field.editor h1 {
    font-weight: 100 !important;
    font-family: titillium_websemibold !important;
    font-size: 24pt !important;
    line-height: 140% !important;
    text-transform: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    width: 100% !important;
}

.text_field.editor h1::before,
.text_field.editor h1::after {
    display: none;
}

.text_field.editor h2 {
    font-weight: 100 !important;
    font-family: titillium_websemibold !important;
    font-size: 20pt !important;
    line-height: 140% !important;
    text-transform: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    width: 100% !important;
    color: # !important;
}

.text_field.editor h2::before,
.text_field.editor h2::after {
    display: none;
}

.text_field.editor h3 {
    font-weight: 100 !important;
    font-family: titillium_websemibold !important;
    font-size: 18pt !important;
    line-height: 140% !important;
    text-transform: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    width: 100% !important;
}

.text_field.editor h3::before,
.text_field.editor h3::after {
    display: none;
}

.text_field.editor h4 {
    font-weight: 100 !important;
    font-family: titillium_websemibold !important;
    font-size: 16pt !important;
    line-height: 130% !important;
    text-transform: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    width: 100% !important;
}

.text_field.editor h4::before,
.text_field.editor h4::after {
    display: none;
}

.text_field.editor h5 {
    font-weight: 100 !important;
    font-family: titillium_webbold !important;
    font-size: 12pt !important;
    line-height: 120% !important;
    text-transform: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    width: 100% !important;
}

.text_field.editor h5::before,
.text_field.editor h5::after {
    display: none;
}

.text_field.editor ol {
    padding: 0 14px;
    width: 100%;
    box-sizing: border-box;
}

.text_field.editor ol li {
    line-height: 200% !important;
    width: 100%;
    padding: 0 0 0 8px;
}

.text_field.editor ul {
    padding: 0 16px;
    list-style: square;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.text_field.editor ul li {
    line-height: 200% !important;
    width: 100%;
    padding: 0 0 0 8px;
}

.text_field.editor p {
    width: 100%;
}

.text_field.editor strong,
.text_field.editor b {
    font-weight: 100;
    font-family: titillium_websemibold;
}

.text_field.editor i,
.text_field.editor u,
.text_field.editor b,
.text_field.editor strong,
.text_field.editor span,
.text_field.editor a {
    float: none !important;
}

.text_field.editor td {
    padding: 0.4rem;
}
*/









/* --   BODYCLASS: .SWITCH-TO-CONTENT-EDITOR   -- */

/* body.switch-to-content-editor .slider .nav { display: none !important; }
body.switch-to-content-editor.wide .text_field.editor::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    border-radius: 6px !important;
    width: calc(100% + 64px) !important;
    height: calc(100% + 64px) !important;
    padding: 32px !important;
    transform: translate(-32px, -32px);
    cursor: pointer;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-out;
}

body.switch-to-content-editor.wide .text_field.editor:hover::after { opacity: .5; }
body.switch-to-content-editor.wide .text_field.editor:hover { cursor: pointer; }
body.switch-to-content-editor.wide .text_field.editor > * { z-index: 2; }
body.switch-to-content-editor.wide .text-field-container.editing .text_field.editor { cursor: text; }
body.switch-to-content-editor.wide .text-field-container.editing .text_field.editor::after {
    opacity: 1;
    border: 0 !important;
    box-shadow: 0 4px 128px 1px rgba(0, 0, 0, .1);
} */





/* --   HOVER NA EDYTORZE - FIT   -- */

/* body.switch-to-content-editor.fit .text_field.editor::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 4px !important;
    width: calc(100% + 32px) !important;
    height: calc(100% + 32px) !important;
    padding: 16px !important;
    transform: translate(-16px, -16px);
    cursor: pointer;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-out;
}

body.switch-to-content-editor.fit .text_field.editor:hover::after { opacity: .25; }
body.switch-to-content-editor.fit .text_field.editor:hover { cursor: pointer; }
body.switch-to-content-editor.fit .text_field.editor > * { z-index: 2; }
body.switch-to-content-editor.fit .text-field-container.editing .text_field.editor { cursor: text; }
body.switch-to-content-editor.fit .text-field-container.editing .text_field.editor::after {
    opacity: 1;
    border: 0 !important;
    box-shadow: 0 4px 128px 1px rgba(0, 0, 0, .1);
} */











/* --   DETALE PERSONALIZACJI   -- */

.personalization-block.details .personalization-list { pointer-events: all; }
.personalization-block.details .personalization-list ul { transform: translate(0, 0); }















/* --   POLA TEXT-FIELD Z EDYTOREM TINYMCE   -- */

main .text-field-container {
    margin: 0 16px 32px 16px;
    overflow: visible;
}

main.gaps0px .text-field-container:not(.free-transform) { margin: 0; }
main.gaps16px .text-field-container:not(.free-transform) { margin: 0 8px 16px 8px; }
main.gaps32px .text-field-container:not(.free-transform) { margin: 0 16px 32px 16px; }
main.gaps48px .text-field-container:not(.free-transform) { margin: 0 24px 48px 24px; }

.text-field-container.fit { width: 100%; }
.text-field-container.wide { width: 960px; }
.text-field-container.narrow { width: 720px; }

.text-field-container.w100p { width: calc(100% - 32px); }
main.gaps0px .text-field-container.w100p { width: 100%; }
main.gaps16px .text-field-container.w100p { width: calc(100% - 16px); }
main.gaps32px .text-field-container.w100p { width: calc(100% - 32px); }
main.gaps48px .text-field-container.w100p { width: calc(100% - 48px); }

.text-field-container.w75p { width: calc(75% - 32px); }
main.gaps0px .text-field-container.w75p { width: 75%; }
main.gaps16px .text-field-container.w75p { width: calc(75% - 16px); }
main.gaps32px .text-field-container.w75p { width: calc(75% - 32px); }
main.gaps48px .text-field-container.w75p { width: calc(75% - 48px); }

.text-field-container.w66p { width: calc(66.66666% - 32px); }
main.gaps0px .text-field-container.w66p { width: 66.66666%; }
main.gaps16px .text-field-container.w66p { width: calc(66.66666% - 16px); }
main.gaps32px .text-field-container.w66p { width: calc(66.66666% - 32px); }
main.gaps48px .text-field-container.w66p { width: calc(66.66666% - 48px); }

.text-field-container.w50p { width: calc(50% - 32px); }
main.gaps0px .text-field-container.w50p { width: 50%; }
main.gaps16px .text-field-container.w50p { width: calc(50% - 16px); }
main.gaps32px .text-field-container.w50p { width: calc(50% - 32px); }
main.gaps48px .text-field-container.w50p { width: calc(50% - 48px); }

.text-field-container.w33p { width: calc(33.33333% - 32px); }
main.gaps0px .text-field-container.w33p { width: 33.33333%; }
main.gaps16px .text-field-container.w33p { width: calc(33.33333% - 16px); }
main.gaps32px .text-field-container.w33p { width: calc(33.33333% - 32px); }
main.gaps48px .text-field-container.w33p { width: calc(33.33333% - 48px); }

.text-field-container.w25p { width: calc(25% - 32px); }
main.gaps0px .text-field-container.w25p { width: 25%; }
main.gaps16px .text-field-container.w25p { width: calc(25% - 16px); }
main.gaps32px .text-field-container.w25p { width: calc(25% - 32px); }
main.gaps48px .text-field-container.w25p { width: calc(25% - 48px); }

.text-field-container.w20p { width: calc(20% - 32px); }
main.gaps0px .text-field-container.w20p { width: 20%; }
main.gaps16px .text-field-container.w20p { width: calc(20% - 16px); }
main.gaps32px .text-field-container.w20p { width: calc(20% - 32px); }
main.gaps48px .text-field-container.w20p { width: calc(20% - 48px); }

.text-field-container.h1 { height: 656px; }
.text-field-container.h2 { height: 736px; }
.text-field-container.h3 { height: 848px; }
.text-field-container.h4 { height: 536px; }
.text-field-container.h5 { height: 456px; }

.text-field-container.pd1 .text_field { padding: 0; }
.text-field-container.pd2 .text_field { padding: 8px; }
.text-field-container.pd3 .text_field { padding: 16px; }
.text-field-container.pd4 .text_field { padding: 24px; }
.text-field-container.pd5 .text_field { padding: 32px; }
.text-field-container.pd6 .text_field { padding: 40px; }
.text-field-container.pd7 .text_field { padding: 48px; }

.text-field-container:not(.fit) { z-index: 2; }










/* --   INFO O BRAKU ELEMENTÓW   -- */

.no-elements-info {
    width: 100%;
    margin: 40px 0;
}

.no-elements-info span {
    padding: 16px 24px;
    border-radius: 5px;
    border: 1px solid #bbb;
    font-size: 12pt;
    color: #888;
    text-transform: uppercase;
    font-family: titillium_websemibold;
}











#notice-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    background: rgba(248, 248, 248, .75);
    transition: all .5s cubic-bezier(.785, .135, .15, .86);
}

#preset-notice-icon {
    position: absolute;
    right: 200px;
    top: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

#notice-mask svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
    color: #;
}

#notice-mask .notice-field {
    position: absolute;
    right: -18px;
    top: 100%;
    width: 320px;
    background: #fff;
    min-height: 120px;
    border-radius: 0 0 8px 8px;
    border-top: 4px solid #;
    padding: 24px;
    box-shadow: 0 16px 48px 1px rgba(0, 0, 0, .09);
}

#notice-mask .notice-field::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: -18px;
    right: 38px;
    border: 8px solid rgba(0, 0, 0, 0);
    border-bottom: 8px solid #;
}

#notice-mask .notice-field .title {
    font-family: titillium_webbold;
    font-size: 12pt;
    text-transform: uppercase;
    color: #666;
}










/* --   ZOOM OKŁADKI W ZAKŁADCE KOLEKCJE   -- */

#cover-zoom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background: #fff;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

#cover-zoom-close:hover { transform: scale(1.1); }
#cover-zoom-close {
    position: fixed;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 100%;
    background: #;
}

#cover-zoom-close:hover svg { transform: scale(.8); }
#cover-zoom-close svg {
    width: 24px;
    height: 24px;
    color: #fff;
    margin: 4px;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

#cover-zoom-loader {
    position: fixed;
}





















/* --   ZOOM KOLORU   -- */

#zoom-img {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    cursor:pointer;
    will-change: transform;
    border: 5px solid #fafafa;
    box-sizing: content-box;
    box-shadow: 0 0 128px 0 rgba(0, 0, 0, .15);
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

#zoom-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .85);
    z-index: 999998;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    will-change: transform;
}




















#technical-break-notice {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 400px;
    min-height: 200px;
    transform: translate(-50%, -50%);
    color: #fff;
    background: #;
    z-index: 999999;
    font-family: titillium_webregular;
    font-size: 12pt;
    padding: 32px 32px 40px 32px;
    border-radius: 8px;
}

/* #technical-break-notice::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1200px;
    height: 1200px;
    border-radius: 100%;
    background: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 100%);
    transform: translate(-50%, -50%);
    z-index: -1;
} */

#technical-break-notice .title {
    width: 100%;
    font-size: 20pt;
    margin: 0 0 32px 0;
}

#technical-break-notice #close-notice:hover { transform: scale(1.1); }
#technical-break-notice #close-notice {
    position: absolute;
    right: 0;
    top: 0;
    width: 72px;
    height: 72px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}










#vars-monitor {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 200px;
    height: auto;
    padding: 12px;
    background: #eee;
    color: #444;
    pointer-events: none;
    border-radius: 5px;
    z-index: 10000;
    transform: translate(0, 0);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

#vars-monitor p {
    width: 100%;
    line-height: 16px;
    font-size: 9pt;
    font-family: titillium_webregular;
}

#vars-monitor p b {
    font-weight: 100;
    font-family: titillium_websemibold;
    float: none;
}





/* --   CZAS GENEROWANIA STRONY   -- */

#render-timer {
    position: fixed;
    right: 16px;
    bottom: 16px;
    color: #ddd;
    font-size: 9pt;
    background: #444;
    padding: 0 8px;
    border-radius: 3px;
    z-index: 99999;
    height: 24px;
    line-height: 24px;
    pointer-events: none;
}

#session-size {
    position: fixed;
    right: 16px;
    bottom: 44px;
    color: #ddd;
    font-size: 9pt;
    background: #444;
    padding: 0 8px;
    border-radius: 3px;
    z-index: 99999;
    height: 24px;
    line-height: 24px;
    pointer-events: none;
}





















/* --   DROPZONE SPINNER LOADER   -- */

#dropzone-loader.hide { transform: translate(-50%, -50%) scale(.95); }
#dropzone-loader {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 420px;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    z-index: 8;
    background: #fcfcfc;
    box-shadow: 0 24px 64px 8px rgba(0, 0, 0, .1);
    transform: translate(-50%, -50%);
    user-select: none;
    transition: all .15s ease-in-out;
}

.progress-radial-container.upload-successful #close-dropzone-loader {
    opacity: 1;
    pointer-events: all;
}

#close-dropzone-loader {
    opacity: 0;
    pointer-events: none;
}

.dropzone-loader-container {
    width: 150px;
    height: 150px;
}

.progress-radial-container.hide {
    transform: translate(0, 32px);
    transition: all .2s ease-out 0s;
}

.progress-radial-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-out .2s;
}

@keyframes spin-progress {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* .progress-radial-container.upload-successful .progress-radial .svg { transform: scale(.9); }
.progress-radial-container.upload-successful .progress-radial .svg .progress-bar { stroke: #0db900; } */
.progress-radial-container.upload-successful .progress-radial .svg .progress-bar { opacity: 0; }
.progress-radial {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    /* left: 50%;
       top: 30%;
       transform: translate(-50%, -50%) rotate(0deg); */
    animation: spin-progress 2.5s linear infinite;
    transition: all .2s ease-out;
}

.progress-radial .svg { transition: all .15s ease-out; }
.progress-radial .svg circle { stroke: rgba(0, 0, 0, .05); }
.progress-radial .svg .progress-bar { stroke: #; }
.progress-text {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    /* left: 50%;
       top: 30%;
       transform: translate(-50%, -50%); */
}

.progress-radial-container.upload-successful .progress-percent { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
.progress-text .progress-percent {
    font-size: 35pt;
    font-family: "Lexend";
    color: #131314;
    position: absolute;
    width: auto;
    line-height: 40px;
    top: 50%;
    left: 50%;
    transition: all .2s ease-out;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.progress-text .progress-percent i {
    font-style: normal;
    font-size: 11pt;
    float: none;
    position: absolute;
    top: 0;
    left: calc(100% - 2px);
    line-height: 22px;
    color: #bbb;
}

.progress-radial-container.upload-successful .icon-success-upload { transform: scale(1); opacity: 1; }
.progress-text .icon-success-upload {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-out;
    opacity: 0;
    transform: scale(1.3);
}

.progress-text .icon-success-upload svg {
    width: 72px;
    height: 72px;
    color: #0db900;
    stroke-width: 3px;
    stroke-linecap: square;
}

.sending-label {
    /* position: absolute;
       left: 50%;
       top: calc(30% + 100px);
       transform: translate(-50%, 0); */
    text-align: center;
    white-space: nowrap;
    color: #131314;
    font-family: "Lexend";
    font-size: 15pt;
    font-weight: 400;
    width: 100%;
    line-height: 24px;
    height: 24px;
}

.sending-label p i { font-style: normal; }
.sending-label p {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: all .2s ease-out;
    line-height: 24px;
    text-align: center;
}

.sending-label p:last-child {
    transform: translate(0, 8px);
    opacity: 0;
    color: #0db900;
}

.progress-radial-container.upload-successful .sending-label p:first-child {
    transform: translate(0, -8px);
    opacity: 0;
}

.progress-radial-container.upload-successful .sending-label p:last-child {
    transform: translate(0, 0);
    opacity: 1;
}





.stats {
    text-align: center;
    white-space: nowrap;
    color: #131314;
    font-family: "Lexend";
    font-size: 10pt;
    font-weight: 300;
    transition: all .2s ease-out;
}

.stats.hide { transform: translate(0, 32px); }
.stats i { font-style: normal; }
.stats p {
    width: 100%;
    line-height: 20px;
}

.sended-stats { display: none; }
.progress-radial-container.upload-successful .sending-stats { display: none; }
.progress-radial-container.upload-successful .sended-stats { display: block; }





#dropzone-loader .close:hover { filter: brightness(.8); }
#dropzone-loader .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 72px;
    height: 72px;
    color: #;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}





#send-in-background {
    margin: 24px 0 0 0;
}

#dropzone-loader.send-in-background:hover { background: #fefefe; }
#dropzone-loader.send-in-background {
    left: 16px;
    bottom: 16px;
    top: auto;
    width: 200px;
    height: 200px;
    transform: none;
 /* cursor: pointer; */
}

#dropzone-loader.send-in-background .dropzone-loader-container {
    margin: 0 !important;
}

#dropzone-loader.send-in-background .close {
    width: 56px;
    height: 56px;
}




















/* =====   MEDIA QUERIES   ===== */

/* --   1024   -- */

@media only screen and (max-width: 1024px) {
    .banner .text-field-container {
        position: relative !important;
        left: 20% !important;
        top: 50% !important;
        width: 60% !important;
        text-align: center !important;
        transform: translate(0, -50%) !important;
    }

    .banner .text_field.editor p {
        text-align: center !important;
    }

    .banner .buttons {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .banner .buttons a {
        margin: 0 8px 8px 8px !important;
    }
}





/* --   800   -- */

@media only screen and (max-width: 800px)
{
    main {
        width: 100%;
        margin: 72px 0 0 0;
    }

    .lazy-load {
        opacity: 1;
        transform: translate(0, 0);
    }

    .component.flex-cards .filter-tabs {
        justify-content: flex-start;
        padding: 0 8px;
    }

    .highlight {
        display: none;
    }

    .collection-title {
        flex-wrap: wrap;
        margin: 32px 0 0 0 !important;
    }

    .collection-title p {
        width: 100%;
        text-align: center;
        font-size: 18pt !important;
        font-family: titillium_webregular !important;
    }

    .collection-title span b,
    .collection-title span {
        width: 100%;
        text-align: center;
    }

    .component.flex-cards .collection-description {
        padding: 24px;
    }

    .component.flex-cards .collection-description p {
        font-size: 11pt;
        text-align: left;
    }

    .component.flex-cards .collection-description.mbxxl {
        margin-bottom: 8px !important;
    }

    .flex-card.cover {
        width: 95%;
        min-height: auto;
        height: auto;
    }

    .flex-card.cover .content {
        position: relative;
        padding: 0 0 24px 0;
    }

    .flex-card.cover .symbol {
        font-size: 16pt;
    }

    .flex-card.color {
        width: 45%;
    }
}





/* --   667 PX   -- */

@media only screen and (max-width: 667px)
{
    body, html {
        overflow-x: hidden;
    }

    main {
        padding: 0 !important;
        overflow: hidden;
    }

    main h1 {
        height: 40px;
        line-height: 40px;
        margin: 16px 0 24px 0;
    }

    .slider {
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        overflow-y: hidden;
        background: #333;
    }

    .slider .banner {
        position: relative !important;
        width: 375px !important;
    }

    .slider.h1 .banner { height: auto !important; }
    .slider.h2 .banner { height: auto !important; }
    .slider.h3 .banner { height: auto !important; }
    .slider.h4 .banner { height: auto !important; }
    .slider.h5 .banner { height: auto !important; }
    .slider.h6 .banner { height: auto !important; }

    .slider .banner.slide-1 { left: 0; }
    .slider .banner.slide-2 { left: 0; }
    .slider .banner.slide-3 { left: 0 }
    .slider .banner.slide-4 { left: 0 }
    .slider .banner.slide-5 { left: 0; }
    .slider .banner.slide-6 { left: 0; }
    .slider .banner.slide-7 { left: 0; }
    .slider .banner.slide-8 { left: 0; }
    .slider .banner.slide-9 { left: 0; }
    .slider .banner.slide-10 { left: 0; }

    .slider .nav {
        width: 48px;
        height: 48px;
        background: #444;
        overflow: hidden;
        display: none;
    }

    .slider .slider-pager {
        display: none;
    }

    /* .slider .nav .arrow.s { display:none; }
    .slider .nav:hover .arrow.f { animation: none; }
    .slider .nav:hover .arrow.s { animation: none; } */

    .slider .nav .arrow {
        width: 16px;
        height: 16px;
    }

    .slider .slider-container {
        position: relative;
        /* overflow-y: hidden;
        overflow-x: auto; */
        width: 1125px;
        /* scroll-snap-type: x mandatory; */
    }

    .banner {
     /* margin: 0 0 8px 0 !important; */
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        scroll-snap-align: start;
    }

    .banner .background {
        position: relative;
        height: 240px;
    }

    .banner.hide-on-mobile .background {
        display: none !important;
    }

    .banner .text-field-container-limits {
        position: relative;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        background: #333;
        padding: 0;
    }

    .banner .text-field-container-limits p {
        color: #eee !important;
    }

    .banner .text-field-container {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        transform: translate(0, 0) !important;
        padding: 32px !important;
    }

    .banner .text_field.editor p span,
    .banner .text_field.editor p {
        font-size: 12pt !important;
    }

    .banner .text_field.editor p:first-child span,
    .banner .text_field.editor p:first-child {
        font-size: 18pt !important;
    }

    main .text-field-container {
        margin: 0 !important;
        padding: 32px !important;
        width: 100% !important;
        height: auto !important;
    }

    main .text-field-container img {
        width: 100%;
        height: auto;
    }

    main .text-field-container.hide-on-mobile {
        display: none !important;
    }

    #link-content .description {
        width: auto;
        padding: 0 24px;
        margin: 16px 0 32px 0 !important;
        text-align: left;
    }

    .form-box {
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        /* padding: 8px 32px 32px 32px !important; */
    }

    .form-box h6 {
        border-radius: 0;
    }

    .form-box h6.inside {
        border: 0;
    }

    .form-box h6::before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 1px;
        left: 0;
        background-color: rgba(0, 0, 0, .07);
        border-bottom: 1px solid rgba(255, 255, 255, .95);
    }

    .form-box .line {
        /* line-height: 16px; */
        font-size: 11pt;
    }

    .form-box .line .label {
        line-height: 24px;
        width: 100%;
        margin: 8px 0 0 0;
        color: #999;
    }

    .form-box .line input {
        width: 100%;
        float: left;
        margin: 4px 0 8px 0;
        height: 40px;
        line-height: 40px;
        font-size: 12pt;
        font-family: titillium_websemibold;
    }

    .form-box .line input.long {
        width: 100%;
    }

    .form-box .line .fill-info {
        height: auto;
        text-align: left;
        margin: 0 0 8px 0;
    }

    .form-box .required p::after {
        position: relative;
        line-height: 100%;
    }

    .required.info {
        display: none;
    }

    #register_user_submit {
        float: left !important;
        left: 50%;
        transform: translate(-50%, 0);
        margin: 56px 0 0 0;
    }

    #validate-info {
        position: fixed;
        left: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100%;
        border-radius: 0;
        text-align: center;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: pre-wrap;
    }

    #show_password {
        display: none !important;
    }

    .form-box .n-checkbox {
        width: 24px !important;
        height: 24px !important;
    }

    main > .text-field-container {
        width: 100% !important;
        padding: 0 32px !important;
    }

    .note {
        top: 72px;
        left: 8px;
        width: calc(100% - 16px);
        padding: 12px 16px;
        margin: 0 0 16px 0;
        flex-wrap: wrap;
    }

    .note .title {
        border: 0;
    }

    .note .info {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, .2);
        margin: 8px 0 0 0;
        padding: 8px 0 0 0;
    }

    #sub-menu {
        overflow-x: scroll;
    }

    #sub-menu ul {
        left: auto;
        height: 72px;
        transform: none;
        white-space: nowrap;
    }

    #sub-menu ul li {
        float: none;
        display: inline-block;
        padding: 0 24px;
    }




    #cookies-info-perspective {
        left: 0;
        right: auto;
        bottom: 0;
        width: 100%;
    }

    #cookies-info {
        width: 100%;
    }
}





/* --   320   -- */

@media only screen and (max-width: 320px)
{
    #mobile-header .logo {
        transform: scale(.7);
        transform-origin: left;
        left: 24px;
    }

    #burger {
        width: 64px;
        transform: scale(1);
    }

    #home {
        right: 64px;
    }
}

/* --   MARGINS AND PADDINGS   -- */

.pan { padding: 0 !important; }
.man { margin: 0 !important; }
.pvn { padding-top: 0 !important; padding-bottom: 0 !important; }
.mvn { margin-top: 0 !important; margin-bottom: 0 !important; }
.phn { padding-left: 0 !important; padding-right: 0 !important; }
.mhn { margin-left: 0 !important; margin-right: 0 !important; }
.ptn { padding-top: 0 !important; }
.mtn { margin-top: 0 !important; }
.prn { padding-right: 0 !important; }
.mrn { margin-right: 0 !important; }
.pbn { padding-bottom: 0 !important; }
.mbn { margin-bottom: 0 !important; }
.pln { padding-left: 0 !important; }
.mln { margin-left: 0 !important; }

.pas { padding: 4px !important; }
.mas { margin: 4px !important; }
.pvs { padding-top: 4px !important; padding-bottom: 4px !important; }
.mvs { margin-top: 4px !important; margin-bottom: 4px !important; }
.phs { padding-left: 4px !important; padding-right: 4px !important; }
.mhs { margin-left: 4px !important; margin-right: 4px !important; }
.pts { padding-top: 4px !important; }
.mts { margin-top: 4px !important; }
.prs { padding-right: 4px !important; }
.mrs { margin-right: 4px !important; }
.pbs { padding-bottom: 4px !important; }
.mbs { margin-bottom: 4px !important; }
.pls { padding-left: 4px !important; }
.mls { margin-left: 4px !important; }

.pam { padding: 8px !important; }
.mam { margin: 8px !important; }
.pvm { padding-top: 8px !important; padding-bottom: 8px !important; }
.mvm { margin-top: 8px !important; margin-bottom: 8px !important; }
.phm { padding-left: 8px !important; padding-right: 8px !important; }
.mhm { margin-left: 8px !important; margin-right: 8px !important; }
.ptm { padding-top: 8px !important; }
.mtm { margin-top: 8px !important; }
.prm { padding-right: 8px !important; }
.mrm { margin-right: 8px !important; }
.pbm { padding-bottom: 8px !important; }
.mbm { margin-bottom: 8px !important; }
.plm { padding-left: 8px !important; }
.mlm { margin-left: 8px !important; }

.pal { padding: 16px !important; }
.mal { margin: 16px !important; }
.pvl { padding-top: 16px !important; padding-bottom: 16px !important; }
.mvl { margin-top: 16px !important; margin-bottom: 16px !important; }
.phl { padding-left: 16px !important; padding-right: 16px !important; }
.mhl { margin-left: 16px !important; margin-right: 16px !important; }
.ptl { padding-top: 16px !important; }
.mtl { margin-top: 16px !important; }
.prl { padding-right: 16px !important; }
.mrl { margin-right: 16px !important; }
.pbl { padding-bottom: 16px !important; }
.mbl { margin-bottom: 16px !important; }
.pll { padding-left: 16px !important; }
.mll { margin-left: 16px !important; }

.paxl { padding: 24px !important; }
.maxl { margin: 24px !important; }
.pvxl { padding-top: 24px !important; padding-bottom: 24px !important; }
.mvxl { margin-top: 24px !important; margin-bottom: 24px !important; }
.phxl { padding-left: 24px !important; padding-right: 24px !important; }
.mhxl { margin-left: 24px !important; margin-right: 24px !important; }
.ptxl { padding-top: 24px !important; }
.mtxl { margin-top: 24px !important; }
.prxl { padding-right: 24px !important; }
.mrxl { margin-right: 24px !important; }
.pbxl { padding-bottom: 24px !important; }
.mbxl { margin-bottom: 24px !important; }
.plxl { padding-left: 24px !important; }
.mlxl { margin-left: 24px !important; }

.paxxl { padding: 32px !important; }
.maxxl { margin: 32px !important; }
.pvxxl { padding-top: 32px !important; padding-bottom: 32px !important; }
.mvxxl { margin-top: 32px !important; margin-bottom: 32px !important; }
.phxxl { padding-left: 32px !important; padding-right: 32px !important; }
.mhxxl { margin-left: 32px !important; margin-right: 32px !important; }
.ptxxl { padding-top: 32px !important; }
.mtxxl { margin-top: 32px !important; }
.prxxl { padding-right: 32px !important; }
.mrxxl { margin-right: 32px !important; }
.pbxxl { padding-bottom: 32px !important; }
.mbxxl { margin-bottom: 32px !important; }
.plxxl { padding-left: 32px !important; }
.mlxxl { margin-left: 32px !important; }

.paxxxl { padding: 64px !important; }
.maxxxl { margin: 64px !important; }
.pvxxxl { padding-top: 64px !important; padding-bottom: 64px !important; }
.mvxxxl { margin-top: 64px !important; margin-bottom: 64px !important; }
.phxxxl { padding-left: 64px !important; padding-right: 64px !important; }
.mhxxxl { margin-left: 64px !important; margin-right: 64px !important; }
.ptxxxl { padding-top: 64px !important; }
.mtxxxl { margin-top: 64px !important; }
.prxxxl { padding-right: 64px !important; }
.mrxxxl { margin-right: 64px !important; }
.pbxxxl { padding-bottom: 64px !important; }
.mbxxxl { margin-bottom: 64px !important; }
.plxxxl { padding-left: 64px !important; }
.mlxxxl { margin-left: 64px !important; }

.paxxxxl { padding: 96px !important; }
.maxxxxl { margin: 96px !important; }
.pvxxxxl { padding-top: 96px !important; padding-bottom: 96px !important; }
.mvxxxxl { margin-top: 96px !important; margin-bottom: 96px !important; }
.phxxxxl { padding-left: 96px !important; padding-right: 96px !important; }
.mhxxxxl { margin-left: 96px !important; margin-right: 96px !important; }
.ptxxxxl { padding-top: 96px !important; }
.mtxxxxl { margin-top: 96px !important; }
.prxxxxl { padding-right: 96px !important; }
.mrxxxxl { margin-right: 96px !important; }
.pbxxxxl { padding-bottom: 96px !important; }
.mbxxxxl { margin-bottom: 96px !important; }
.plxxxxl { padding-left: 96px !important; }
.mlxxxxl { margin-left: 96px !important; }

/* --   UJEMNE MARGINESY   -- */

.mtxl- { margin-top: -24px !important; }
.mtxxl- { margin-top: -32px !important; }/*
 *   BASICS CLASSES
 *   =================
 *   WWW.DIGITALALBUM.PL
 *   COPYRIGHT © 2006 - 2019
 *   DESIGNED AND CREATED BY FOX
 */





.bezier-1 {
    transition-timing-function: cubic-bezier(.36,1.74,.82,.93) !important;
    transition-duration: .3s !important;
}

.all-animations-off { transition: none !important; }
.all-animations-off * { transition: none !important; }
.all-animations-off *::after { transition: none !important; }
.all-animations-off *::before { transition: none !important; }





/* --   SCROLLBARY   -- */

body::-webkit-scrollbar {
    width: 6px;
    background: #1a1a1a;
    border-left: 1px solid rgba(255, 255, 255, .05);
}

body::-webkit-scrollbar-button { display: none; }
body::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-left: 1px solid rgba(255, 255, 255, .05);
}

body::-webkit-scrollbar-track-piece {
    background: #1a1a1a;
    border-left: 1px solid rgba(255, 255, 255, .05);
}

body::-webkit-scrollbar-thumb { background: #; }
body::-webkit-scrollbar-corner { background: #1a1a1a; }
body::-webkit-resizer { }





.light-scrollbars::-webkit-scrollbar {
    width: 6px;
    background: #ddd;
    border-left: 1px solid rgba(255, 255, 255, .05);
}

.light-scrollbars::-webkit-scrollbar-button { display: none; }
.light-scrollbars::-webkit-scrollbar-track {
    background: #ddd;
    border-left: 1px solid rgba(255, 255, 255, .05);
}

.light-scrollbars::-webkit-scrollbar-track-piece {
    background: #ddd;
    border-left: 1px solid rgba(255, 255, 255, .05);
}

.light-scrollbars::-webkit-scrollbar-thumb { background: #; }
.light-scrollbars::-webkit-scrollbar-corner { background: #ddd; }
.light-scrollbars::-webkit-resizer { }









.webcolor { color: # !important; }
.bg-webcolor { background: # !important; }

/*
 *   ----------------
 *   PODSTAWOWE KLASY
 *   SYSTEMU
 *   -------
 */

.fl { float: left !important; }
.fr { float: right !important; }
.cb,
.cl { clear: both !important; }
.fln { float: none !important; }
.b { font-family: titillium_websemibold !important; }
.m {
    top: 50%;
    transform: translate(0, -50%);
}

.mc {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}





/* --   STARE FLEXY   -- */

.flex-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.flex-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.flex-end {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.flex-start {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.flex-center-top {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-align-top {
    align-self: flex-start;
}

.flex-to-left {
    align-self: baseline;
}





/* --   NOWE FLEXY   -- */

.flex { display: flex; }
.flex.to-left { align-items: flex-start; }
.flex.in-center { align-items: center; }
.flex.center { justify-content: center; }
.flex.to-right { align-items: flex-end; }
.flex.stretch { align-items: stretch; }
.flex.to-top { justify-content: flex-start; }
.flex.in-middle { justify-content: center; }
.flex.middle { align-items: center; }
.flex.to-bottom { justify-content: flex-end; }
.flex.column { flex-direction: column; }
.flex.row { flex-direction: row !important; }
.flex.wrap { flex-wrap: wrap; }
.flex.nowrap { flex-wrap: nowrap; }
.flex.between { justify-content: space-between !important; }





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

.hide.zoom-out { transform: scale(.975); }
.hide.zoom-in { transform: scale(1.1) !important; }

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

.hide-zoom-out {
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
}

.down { transform: translate(0, 40px); }
.up { transform: translate(0, -40px); }
.absolute { position: absolute !important; }





.off { display: none !important; }
.force-off { display: none !important; }
.force-on { display: block !important; }
.childrens-off * { display: none; }

.force-disabled,
.force-disable,
.disabled,
.disable {
    filter: grayscale(100%);
    opacity: .25 !important;
    pointer-events: none;
}

.disable-tab {
    filter: grayscale(100%);
    opacity: .25 !important;
    pointer-events: none;
}

.disabled-info {
    display: none;
}

.disable-thumb {
    pointer-events: none;
}

.disable-thumb .disabled-info {
    display: block;
    position: absolute;
    left: 50%;
    top: 56px;
    padding: 8px;
    border-radius: 4px;
    background: #8b0000;
    color: #fff;
    transform: translate(-50%, 0);
    z-index: 106;
}

.disable-thumb .thumb-content {
    filter: grayscale(100%);
    opacity: .25 !important;
    pointer-events: none;
}

.disabled-inside {
    pointer-events: none;
}

.disabled-inside * {
    filter: grayscale(100%);
    opacity: .25 !important;
    pointer-events: none;
}

.disabled-half,
.disable-half {
    filter: grayscale(100%);
    opacity: .5 !important;
    pointer-events: none;
}

.disabled-ch u,
.disable-ch u,
.disabled-ch input,
.disable-ch input {
    filter: grayscale(100%);
    opacity: .5 !important;
    pointer-events: none;
}

.disable-scroll { overflow: hidden !important; }
.mouse-off { pointer-events: none !important; }
.select-off { user-select: none !important; }

.trans-off *,
.trans-off {
    transition: none !important;
}

.tr { transition: all .15s ease-in-out; }
.tr-f { transition: all .1s ease-in-out; }
.n_trs { transition: all .25s ease-in-out; }
.tr-delay { transition-delay: .3s; }

.animate { transition: all .3s cubic-bezier(.785, .135, .15, .86) !important; }
.animate-transform { transition: all .3s cubic-bezier(.785, .135, .15, .86) !important; }
.animate-opacity-and-transform { transition: transform .3s cubic-bezier(.785, .135, .15, .86), opacity .3s cubic-bezier(.785, .135, .15, .86) !important; }
.slow { transition-duration: .6s !important; }
.fast { transition-duration: .2s !important; }

/* --   EASE BEZIER QUINT   -- */

.ease_io_quint {
    transition-timing-function: cubic-bezier(.785, .135, .15, .86);
}





/* --   NO BORDER   -- */

.no-border {
    border: 0 !important;
}

.no-border::after {
    display: none !important;
}

/* --   NO CLIP BY OVERFLOW   -- */

.clip { overflow: hidden !important; }
.no-clip { overflow: visible !important; }
.no-bg { background: none !important; }





/* --   NO PADDINGS   -- */

.no-padding { padding: 0 !important; }

/* --   MARGINS 4px   -- */

.ml4px { margin-left: 4px !important; }
.mr4px { margin-right: 4px !important; }
.mt4px { margin-top: 4px !important; }
.mb4px { margin-bottom: 4px !important; }

/* --   MARGINS 8px   -- */

.ml { margin-left: 8px !important; }
.mr { margin-right: 8px !important; }
.mt { margin-top: 8px !important; }
.mb { margin-bottom: 8px !important; }

/* --   MARGINS 12px   -- */

.mlx15 { margin-left: 12px !important; }
.mrx15 { margin-right :12px !important; }
.mtx15 { margin-top: 12px !important; }
.mbx15 { margin-bottom: 12px !important; }

/* --   MARGINS 16px   -- */

.mlx2 { margin-left: 16px !important; }
.mrx2 { margin-right :16px !important; }
.mtx2 { margin-top: 16px !important; }
.mbx2 { margin-bottom: 16px !important; }

/* --   MARGINS 24px   -- */

.mlx3 { margin-left: 24px !important; }
.mrx3 { margin-right: 24px !important; }
.mtx3 { margin-top: 24px !important; }
.mbx3 { margin-bottom: 24px !important; }

/* --   MARGINS 32px   -- */

.mlx4 { margin-left: 32px !important; }
.mrx4 { margin-right: 32px !important; }
.mtx4 { margin-top: 32px !important; }
.mbx4 { margin-bottom: 32px !important; }





/* --   MARGINS -4px   -- */

.mls- { margin-left: -4px !important; }
.mrs- { margin-right: -4px !important; }
.mts- { margin-top: -4px !important; }
.mbs- { margin-bottom: -4px !important; }

/* --   MARGINS -8px   -- */

.ml- { margin-left: -8px !important; }
.mr- { margin-right: -8px !important; }
.mt- { margin-top: -8px !important; }
.mb- { margin-bottom: -8px !important; }

/* --   MARGINS -16px   -- */

.mlx2- { margin-left: -16px !important; }
.mrx2- { margin-right: -16px !important; }
.mtx2- { margin-top: -16px !important; }
.mbx2- { margin-bottom: -16px !important; }

/* --   MARGINS -24px   -- */

.mlx3- { margin-left: -24px !important; }
.mrx3- { margin-right: -24px !important; }
.mtx3- { margin-top: -24px !important; }
.mbx3- { margin-bottom: -24px !important; }





/* --   PADDINGS 8px   -- */

.pl { padding-left: 8px !important; }
.pr { padding-right: 8px !important; }
.pt { padding-top: 8px !important; }
.pb { padding-bottom: 8px !important; }

/* --   PADDINGS 16px   -- */

.plx2 { padding-left: 16px !important; }
.prx2 { padding-right :16px !important; }
.ptx2 { padding-top: 16px !important; }
.pbx2 { padding-bottom: 16px !important; }

/* --   PADDINGS 24px   -- */

.plx3 { padding-left: 24px !important; }
.prx3 { padding-right: 24px !important; }
.ptx3 { padding-top: 24px !important; }
.pbx3 { padding-bottom: 24px !important; }

/* --   PADDINGS 32px   -- */

.plx4 { padding-left: 32px !important; }
.prx4 { padding-right: 32px !important; }
.ptx4 { padding-top: 32px !important; }
.pbx4 { padding-bottom: 32px !important; }





/* --   DUŻE LITERY   -- */

.uppercase {
    text-transform: uppercase !important;
}





/* --   WYŚRODKOWANY TEKST   -- */

.ta-c { text-align: center !important; }
.ta-r { text-align: right !important; }





/* --   FIXED PRE   -- */

pre.fixed {
    position: fixed;
    z-index: 100000;
    bottom: 32px;
    right: 32px;
    background: #222;
    padding: 24px 48px;
    color: #ddd;
    text-align: left;
    font-family: titillium_webregular;
    font-size: 9pt;
    max-height: calc(100% - 192px);
    overflow-y: scroll;
}





/* --   FRAZY DO TŁUMACZEŃ W TRYBIE TŁUMACZA   -- */

i.trn {
    font-style: normal;
    display: inline-block;
    float: none;
}

/* --   SZEROKOŚĆ 100%   -- */

.w100 {
    width: 100% !important;
}

.red {
    color: #c00;
}





/* .editor-mode-empty {
    opacity: 0;
    pointer-events: none;
}

.switch-to-content-editor .editor-mode-empty {
    opacity: 1;
    pointer-events: all;
} */





.space-alert {
    display: inline-block;
    float: none;
    background: #f00;
    color: #fff;
    padding: 0 8px;
    margin: 0 2px;
}/*
 *   PRZYCISKI
 *   =========
 *   WWW.DIGITALALBUM.PL
 *   COPYRIGHT © 2006 - 2019
 *   DESIGNED AND CREATED BY FOX
 */










/* --   STANDARDOWE W KOLORZE SERWISU   -- */

.bt {
    height: 40px;
    line-height: 40px;
    font-size: 10pt;
    color: #fff;
    text-transform: uppercase;
    padding: 0 16px;
    font-family: titillium_websemibold;
    border-radius: 4px;
    cursor: pointer;
    background: #;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, .2);
    border-top: 1px solid rgba(255, 255, 255, .2);
    border-right: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    user-select: none;
    white-space: nowrap;
}

.bt:hover { filter: brightness(1.05); }
.bt:active {
    filter: brightness(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

.bt u {
    text-decoration: none;
    pointer-events: none;
}

.bt svg {
    width: 20px;
    height: 20px;
    stroke-width: 2px;
    margin: 0 0 0 12px;
    pointer-events: none;
}

.bt.lowercase { text-transform: none; }
.bt.green { background: #00a820; }
.bt.red { background: #c00; color: #fff !important; }
.bt.red svg { color: #fff !important; }

/* --   GRAY   -- */

.bt.gray {
    background: #666;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    border: 0;
}

/* --   DARK GRAY   -- */

.bt.darkgray,
.bt.dark-gray {
    background: #333;
    color: #aaa;
}

/* --   LIGHT GRAY   -- */

.bt.lightgray,
.bt.light-gray {
    background: #f1f1f1;
    color: #666;
}

.bt.lightgray:hover,
.bt.light-gray:hover {
    filter: brightness(1);
    background: #ebebeb;
}

.bt.lightgray.active,
.bt.light-gray.active {
    background: #;
    color: #fff;
}

.bt.lightgray.active:hover,
.bt.light-gray.active:hover {
    filter: brightness(1.1);
}

/* --   WHITE   -- */

.bt.white {
    background: #fff;
    color: #666;
    border: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    filter: none;
}

.bt.white:hover { background: #f8f8f8; }
.bt.white.active:hover { filter: brightness(1.1); }
.bt.white.active {
    background: #;
    color: #fff;
}





.bt.full { width: 100%; }
.bt.rounded { border-radius: 40px; }





/* --   ROZMIARY PRZYCISKÓW   -- */

/* --   MEDIUM BUTTONS   -- */

.bt.medium {
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
 /* padding: 0 12px 0 16px; */
}

.bt.medium svg {
    width: 18px;
    height: 19px;
    margin: 0 0 0 8px;
    transform: translate(2px, 0);
}

/* --   LEFT ICON   -- */

.bt.medium.left-icon {
    padding: 0 16px 0 12px;
}

.bt.medium.left-icon svg {
    transform: translate(-2px, 0);
    margin: 0 8px 0 0;
}

/* --   SMALL BUTTONS   -- */

.bt.small {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    font-family: titillium_websemibold;
}

.bt.small.rounded { padding: 0 20px; }
.bt.small svg {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
    margin: 0 0 0 4px;
    transform: translate(4px, 0);
    transition: opacity .15s ease-out;
}





/* --   TINY BUTTONS   -- */

.bt.tiny {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    font-family: titillium_websemibold;
    font-size: 9pt;
}

.bt.tiny svg {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
    margin: 0 0 0 4px;
    transform: translate(4px, 0);
    transition: opacity .15s ease-out;
}

.bt.tiny:hover svg { transform: translate(4px, 0) scale(1.2); }
.bt.tiny.left-icon { padding: 0 12px 0 6px; }
.bt.tiny.left-icon svg {
    margin: 0;
    transform: translate(0, 0);
}




/* --   TOGGLE ICON   -- */

.bt.tiny.toggle-icon .icon {
    background: #ff000000;
    width: 30px;
    height: 30px;
    margin: 0;
    transform: translate(-2px, 0);
    overflow: hidden;
    pointer-events: none;
}

.bt.tiny.toggle-icon.toggle .icon svg:first-child { transform: translate(0, -100%); }
.bt.tiny.toggle-icon .icon svg {
    position: absolute;
    left: 0;
    top: 0;
    padding: 6px;
    box-sizing: content-box;
    transition: transform .15s ease-out;
}

.bt.tiny.toggle-icon.toggle .icon svg:last-child { transform: translate(0, 0); }
.bt.tiny.toggle-icon .icon svg:last-child { transform: translate(0, 100%); }





/* --   FLAT   -- */

.bt.flat {
    border: 0;
    box-shadow: none;
}

/* --   GHOST   -- */

.bt.ghost {
    border: 1px solid #fff;
    box-shadow: none;
    background: none;
}





/*
 *   KLASA: .BT.TOGGLE
 *   --------------------
 *   PRZYCISKI Z RÓZNĄ TREŚCIĄ W ZALEŻNOŚCI OD STANU
 */

.bt.toggle.active u:last-child { display: block; }
.bt.toggle u:last-child,
.bt.toggle.active u:first-child {
    display: none;
}

.bt.select-toggle { transform: translate(-2px, 0); }








/* --   LOADER W PRZYCISKU   -- */

.bt .span-loader {
    position: absolute;
    right: -3px;
    left: auto;
    transform: translate(0, 0);
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
}



















/*
 *   KLASA: BTT
 *   ----------
 *   PRZYCISKI UŻYWANE W SERWISIE
 *   I W PANELU ADMINA
 */

.btt {
             height: 32px;
        line-height: 32px;
          font-size: 10pt;
              color: #fff;
     text-transform: uppercase;
            padding: 0 16px;
             margin: 0 8px 0 0;
        font-family: titillium_websemibold;
      border-radius: 5px;
             cursor: pointer;
              float: left;
           position: relative;
}

.btt:hover {
          /* filter: hue-rotate(-10deg); */
             filter: brightness(.95);
              color: #fff;
}

.btt.regular
{
        font-family: titillium_webregular;
}

.btt.fr
{
             margin: 0 0 0 8px;
}

.btt u,
.btt b
{
        font-weight: 100;
            z-index: 2;
              float: left;
    text-decoration: none;
     pointer-events: none;
}

.btt svg
{
              width: 16px;
             height: 16px;
            padding: 8px 4px;
              float: left;
          transform: translate(-5px, 0);
       stroke-width: 2px;
         box-sizing: content-box;
     pointer-events: none;
}

.btt.icon-r svg
{
            padding: 8px 0 8px 2px;
          transform: translate(4px, 0);
         box-sizing: content-box !important;
}

.btt.in-progress
{
              width: 32px !important;
           overflow: hidden;
         transition: all .3s ease-in-out;
}





/* --   MAŁE PRZYCISKI   -- */

.btt.sm
{
             height: 26px;
        line-height: 26px;
            padding: 0 8px;
        font-family: titillium_webregular;
     /* text-shadow: 1px 1px 1px rgba(0, 0, 0, .25); */
          font-size: 10pt;
     text-transform: none;
}

.btt.sm svg
{
              width: 12px;
             height: 12px;
            padding: 6px 2px;
}





/* --   MEDIUM BUTTONS   -- */

.btt.md
{
    height: 36px;
    line-height: 36px;
}

.btt.md svg
{
    width: 16px;
    height: 16px;
    padding: 10px;
    margin: 0 -8px 0 0;
}

.btt.md:hover svg
{
    width: 20px;
    height: 20px;
    padding: 8px;
    margin: 0 -8px 0 0;
}





/* --   MEDIUM BUTTONS V.2   -- */

.btt.medium {
    height: 40px;
    line-height: 40px;
}

.btt.medium svg {
    width: 20px;
    height: 20px;
    padding: 10px 0 0 4px;
}





/* --   DUŻE PRZYCISKI   -- */

.btt.big
{
             height: 40px;
        line-height: 40px;
            padding: 0 16px;
        font-family: titillium_webbold;
          font-size: 11pt;
      border-radius: 4px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}

.btt.big svg
{
              width: 18px;
             height: 18px;
            padding: 10px 8px 12px 6px;
       stroke-width: 2;
}

.btt.big b,
.btt.big u
{
    font-family: titillium_webbold;
}





/* --   Z MAŁĄ CZCIONKĄ   -- */

.btt.smf b,
.btt.smf u
{
        font-family: titillium_websemibold;
          font-size: 10pt;
}





/* --   PRZYCISK NA CAŁĄ SZEROKOŚĆ RODZICA   -- */

.btt.full {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0;
    font-family: titillium_websemibold;
    font-size: 10pt;
    border-radius: 4px;
    text-align: center;
    color: #fff !important;
    text-transform: none;
}

.btt.full b {
    font-family: titillium_websemibold;
    width: 100%;
    line-height: 40px;
}




/* --   PRZYCISK NA PÓŁ SZEROKOŚCI RODZICA   -- */

/* .btt.half {
    width: calc(100% - 6px);
    height: 40px;
    line-height: 40px;
    padding: 0;
    font-family: titillium_websemibold;
    font-size: 10pt;
    border-radius: 4px;
    text-align: center;
    color: #fff !important;
    text-transform: none;
}

.btt.half b {
    font-family: titillium_webregular;
    width: 100%;
    line-height: 40px;
} */





/* ==   KOLORY PRZYCISKÓW   == */

/* --   NIEBIESKI   -- */

.btt.blue { background: #008aff; }

/* --   CZERWONY   -- */

.btt.red { background: #c51c00; }
.btt.light-red { background: #fc2400; }

/* --   SELEDYNOWY   -- */

.btt.aquamarine {
    background: #03b894;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}

.btt.aquamarine svg {
    color: #fff;
    width: 20px;
    height: 20px;
    padding: 6px 2px;
}

.btt.aquamarine.zalamo svg {
    color: #fff;
    stroke-width: 20px;
    width: 22px;
    height: 22px;
    padding: 5px 2px;
}



/* --   BARDZO JASNY SZARY   -- */

.btt.ultra-lightgray {
    background: #eee;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}

.btt.ultra-lightgray b {
    font-family: titillium_webregular;
}

.btt.ultra-lightgray svg {
    stroke-width: 1px;
    width: 18px;
    height: 18px;
    padding: 7px 4px;
    color: #444;
}

.btt.ultra-lightgray:hover {
    background: #f2f2f2;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
    color: #666;
}



/* --   JASNY SZARY   -- */

.btt.lightgray {
    background: #bbb;
    color: #111;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .25);
}

.btt.lightgray:hover {
    background: #ccc;
}



/* --   CIEMNY SZARY   -- */

.btt.darkgray { background: #444; color: #ddd; }
.btt.darkgray:hover { background: #333; }
.btt.darkgray.active { background: #; }


/* --   POMARAŃCZOWY   -- */

.btt.orange { background: #e85222; }

/* --   BRĄZOWY   -- */

.btt.brown
{
         background: #705316;
              color: #f4eed9;
}

/* --   BIAŁY   -- */

.btt.white
{
         background: #fff;
              color: #222;
}

.btt.white:hover
{
              color: #000;
}

.btt.white:hover::after
{
         background: rgba(0, 0, 0, .1);
}



/* --   ZIELONY   -- */

.btt.green
{
    background: #0b9a00;
    color: #fff;
}

.btt.green:hover {
    background: #0cac00;
}



/* --   PASTELOWY RÓŻ   -- */

.btt.pastel-pink
{
    background: #fe4d62;
    color: #fff;
}

.btt.pastel-pink:hover {
    filter: saturate(90%);
}



/* --   PASTELOWY RÓŻ   -- */

.btt.pastel-blue
{
    background: rgba(19, 126, 255, 1);
    color: #fff;
}

.btt.pastel-blue:hover {
    filter: saturate(90%);
}



/* --   KOLOR GŁÓWNY SERWISU   -- */

.btt.web {
         background: #;
              color: #fff !important;
}



/* --   GHOST BUTTON   -- */

.btt.ghost
{
         background: none;
              color: #888;
}

.btt.ghost::before
{
            content: '';
           position: absolute;
               left: 0;
                top: 0;
              width: 100%;
             height: 100%;
             border: 1px solid #aaa;
      border-radius: 2px;
         box-sizing: border-box;
     pointer-events: none;
}

.btt.ghost:hover
{
              color: #444 !important;
}

.btt.ghost:hover::before
{
             border: 1px solid #444;
}



/* --   ZANIKAJĄCY PO WYKONANIU AKCJI   -- */

.btt.shrink
{
          transform: scale(0, 1);
     pointer-events: none;
}

.btt.mc.shrink
{
          transform: translate(-50%, -50%) scale(0, 1);
}



/* --   Z LOADEREM   -- */

.btt .span-loader.small {
    transform: translate(0, -50%);
    left: -32px;
}

.btt .span-loader.big {
    transform: translate(0, -50%);
    left: -48px;
}

/* --   LOADER PO PRAWEJ   -- */

.btt .span-loader.small.reverse {
    left: calc(100% + 16px);
    margin-top: -12px;
}










/* --   PRZYCISKI Z PRZEŁĄCZANYM LABELEM I TŁEM   -- */

.btt.toggle-label {
    overflow: hidden;
    transition: all .15s cubic-bezier(.785, .135, .15, .86) !important;
}

.btt.toggle-label b {
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    z-index: 10;
}

.btt.toggle-label.toggle b {
    transform: translate(0, -100%);
}

/* --   PRZEŁĄCZANE KOLORY   -- */

.btt.toggle-label.toggle.toggle-bg-red { background: #c00; }
.btt.toggle-label.toggle.toggle-bg-green { background: #00a820; }/*
 *   ANIMOWANE LOADERY CSS
 *   =====================
 *   WWW.DIGITALALBUM.PL
 *   COPYRIGHT © 2006 - 2019
 *   DESIGNED AND CREATED BY FOX
 */





@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --   LOADER   -- */

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    box-sizing: content-box;
    transform: translate(-50%, -50%);
    z-index: 100;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

.loader::after {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: spin 1s linear infinite;
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #;
    border-radius: 100%;
    box-sizing: border-box;
}

.loader.white::after {
    border: 2px solid rgba(255, 255, 255, .1);
    border-top: 2px solid #fff;
}

.loader.tiny {
    width: 20px;
    height: 20px;
}

.loader.small {
    width: 24px;
    height: 24px;
}

.loader.medium {
    width: 28px;
    height: 28px;
}

.loader.big {
    width: 56px;
    height: 56px;
}

.loader[flow^="right"] {
    left: auto;
    right: 8px;
    transform: translate(0, -50%);
}



.loader.left {
    left: 16px;
    transform: translateX(0);
}

.loader.right {
    left: auto;
    right: 16px;
    transform: translateX(0);
}

.loader.top {
    top: 16px;
    transform: translateY(0);
}

.loader.bottom {
    top: auto;
    bottom: 16px;
    transform: translateY(0);
}



.loader.left-outside {
    left: auto;
    right: calc(100% + 8px);
    transform: translate(0, -50%);
}

.loader.relative {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
}

.loader.label::before {
    content: attr(data-label);
    display: block;
    position: absolute;
    width: auto;
    pointer-events: none;
    white-space: nowrap;
    color: #666;
    font-family: titillium_webregular;
    text-transform: uppercase;
    font-size: 9pt;
    left: 50%;
    top: 48px;
    transform: translate(-50%, 0);
}










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

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





/* --   LOADER JAKO OBIEKT ::AFTER   -- */

.after-loader::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 101;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    animation: spin .8s ease-in-out infinite;
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #;
    border-radius: 100%;
    margin: -16px 0 0 -16px;
    opacity: 0;
    box-sizing: border-box;
}

/* --   LABEL LOADERA   -- */

.after-loader::before {
    content: attr(data-loading-label);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    pointer-events: none;
    z-index: 101;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    margin: 72px 0 0 -120px;
    text-align: center;
    color: #aaa;
    font-family: titillium_webregular;
    font-size: 10pt;
    opacity: 0;
}

/* --   STAN: ŁADOWANIE   -- */

.after-loader.processing::after,
.after-loader.loading::after,
.after-loader.processing::before,
.after-loader.loading::before {
    opacity: 1;
}

.after-loader.processing .header,
.after-loader.loading .header,
.after-loader.processing .content,
.after-loader.loading .content,
.after-loader.processing .objects ,
.after-loader.loading .objects {
    opacity: 0;
}





/* --   DUŻY   -- */

.big-loader::after {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
}

/* --   MAŁY   -- */

.small-loader::after {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
}





















/*
 *   KLASA: SPINNER-LOADER
 *   ---------------------
 *   LOADER Z ANIMACJĄ KRĘCĄCEGO SIĘ
 *   KÓŁKA, OPARTY WYŁĄCZNIE NA CSS-IE
 */

.spinner_loader,
.spinner-loader
{
              width: 64px;
             height: 64px;
            z-index: 100000;
         transition: all .15s ease-out;
           position: absolute;
               left: 50%;
                top: 50%;
          transform: translate(-50%, -50%);
}



/* --   WIELKOŚCI LOADERÓW   -- */

.spinner_loader.medium,
.spinner-loader.medium
{
              width: 40px;
             height: 40px;
}

.spinner_loader.small,
.spinner-loader.small
{
              width: 32px;
             height: 32px;
}

.spinner_loader.very-small,
.spinner-loader.very-small
{
              width: 24px;
             height: 24px;
}



/* --   OBRACAJĄCY SIĘ ELEMENT   -- */

.spinner_loader .spinner,
.spinner-loader .spinner
{
             border: 2px solid rgba(0, 0, 0, .1);
         border-top: 2px solid #;
      border-radius: 100%;
              width: 100%;
             height: 100%;
          animation: spinner 1s cubic-bezier(.785, .135, .15, .86) infinite;
           position: absolute;
         box-sizing: border-box;
               left: 0;
                top: 0;
}



/* --   KOLORYSTYKA LOADERA   -- */

.spinner_loader.blue .spinner,
.spinner-loader.blue .spinner
{
         border-top: 2px solid #0066ff;
}

.spinner_loader.white .spinner,
.spinner-loader.white .spinner
{
         border-top: 2px solid #fff;
}

.spinner_loader.red-bg::after,
.spinner-loader.red-bg::after
{
            content: '';
           position: absolute;
               left: -8px;
                top: -8px;
              width: 40px;
             height: 40px;
         background: #c51c00;
      border-radius: 2px;
            z-index: -1;
}



/* --   OPIS LOADERA   -- */

.spinner_loader .label,
.spinner-loader .label
{
           position: absolute;
         text-align: center;
               left: 50%;
             bottom: -40px;
             height: 24px;
        line-height: 24px;
          font-size: 10pt;
     text-transform: uppercase;
              color: #666;
          transform: translate(-50%, 0);
        font-family: titillium_webregular;
        white-space: nowrap;
         transition: all .25s ease-out;
}



/* --   ANIMACJA OBROTU   -- */

@keyframes spinner
{
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* --   RÓŻNE PRĘDKOŚCI ANIMACJI OBRACAJĄCEGO SIĘ ELEMENTU   -- */

.animation-01 { animation: spinner 1s cubic-bezier(.785, .135, .15, .86) infinite !important; }
.animation-02 { animation: spinner 1.5s ease infinite !important; }
.animation-03 { animation: spinner 2s ease-in infinite !important; }
.animation-04 { animation: spinner 1.3s ease-out infinite !important; }










/* --   SPAN-LOADER   -- */

.span-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 100000;
    transition: all .15s ease-out;
    animation: center-spin 1s ease-out infinite;
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #;
    border-radius: 100%;
    margin: 0;
}

.span-loader.normal-spin {
    animation: spin 1s cubic-bezier(.785, .135, .15, .86) infinite;
}

.span-loader.right-outside {
    animation: v-spin 1s cubic-bezier(.785, .135, .15, .86) infinite;
    left: calc(100% + 12px);
}

.span-loader.left-outside {
    animation: v-spin 1s cubic-bezier(.785, .135, .15, .86) infinite;
    right: calc(100% + 12px);
    left: auto;
}





.span-loader.big {
    width: 40px;
    height: 40px;
    border-width: 2px;
}

.span-loader.small {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

.span-loader.tiny {
    width: 20px;
    height: 20px;
    border-width: 1px !important;
}

.span-loader.green {
    border-top: 2px solid #0b9a00;
}

.span-loader.aquamarine {
    border-top: 2px solid #03b894;
}

.span-loader.gray {
    border-top: 2px solid #aaa;
}

.span-loader.white {
    border: 2px solid rgba(255, 255, 255, .2);
    border-top: 2px solid #fff;
}

.span-loader.pastel-pink {
    border-top: 2px solid #fe4d62;
}

.span-loader.blue {
    border-top: 2px solid rgba(19, 126, 255, 1) !important;
}

.span-loader.pastel-pink:hover {
    filter: saturate(90%);
}

/* .span-loader.for-dark {
    border: 2px solid rgba(255, 255, 255, .2);
    border-top: 2px solid #fff;
}

.span-loader.for-light {
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #fe4d62;
} */





.span-loader.from-left {
    left: auto;
    /* top: 4px; */
    right: calc(100% + 8px);
    transform: translate(0, 50%);
}

.span-loader.thin {
    border-width: 1px;
}





















/* --   STARY LOADER   -- */

.new-loader {
    width:24px;
    height:24px;
    pointer-events:none;
    z-index:100000;
    transition:all 0.15s ease-out;
}

.new-loader p {
    width:100% !important;
    height:100% !important;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0 !important;
}

.new-loader p span{
    border:2px solid rgba(0,0,0,0.05);
    border-top:2px solid #;
    border-radius:100%;
    width:100%;
    height:100%;
    animation:spin 1s ease-out infinite;
    position:absolute;
    left:-2px;
    top:-2px;
    padding:0 !important;
}

@keyframes spin {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}/*
 *   ELEMENTY FORMULARZY
 *   ===================
 *   WWW.DIGITALALBUM.PL
 *   COPYRIGHT © 2006 - 2019
 *   DESIGNED AND CREATED BY FOX
 */










/*
 *   KLASA: UL-SELECT
 *   -------------------
 *   ROZWIJANE POLA SELECT OPARTE
 *   NA LIŚCIE UL, ZAMIENNIK ELEMENTU
 *   <SELECT><OPTION>...</OPTION><SELECT>
 */

.ul-select:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.ul-select {
    position: relative;
    list-style: none;
    min-height: 32px;
    line-height: 32px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 3px;
    transition: all .15s ease-out;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.ul-select * {
    position: relative;
}



/* --   ROZWINIĘTA LISTA   -- */

.ul-select.slide-down {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    z-index: 100000;
    opacity: 1 !important;
}



/* --   LISTA ELEMENTÓW   -- */

.ul-select li {
    left: 0;
    width: 100%;
    float: left;
    clear: both;
    font-size: 10pt;
    color: #444;
    min-height: 32px;
    line-height: 32px;
    padding: 0 24px 0 16px;
    font-family: titillium_webregular;
    box-sizing: border-box;
    text-transform: uppercase;
    text-align: right;
    background: #f1f1f1;
}

.ul-select li:last-child { border-radius: 0 0 3px 3px; }
.ul-select.white li { background: #fff; }
.ul-select.white li:hover { background: #fafafa; }



/* --   OPCJE DO WYBORU   -- */

.ul-select .option {
    display: none;
}

.ul-select.slide-down .option {
    display: block;
    background: #f7f7f7;
}

.ul-select.slide-down .option:hover {
    background: #;
    color: #fff;
}



/* --   WYBRANA WARTOŚĆ   -- */

.ul-select .value {
    border-radius: 3px;
    z-index: 10;
}

.ul-select:hover .value {
    background: #f4f4f4;
}

.ul-select.slide-down .value {
    border-radius: 3px 3px 0 0;
    background: #f7f7f7;
    border-bottom: 1px solid rgba(0, 0, 0, .075);
}



/* --   STRZAŁKA   -- */

.ul-select .value::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 5px;
    height: 5px;
    box-sizing: border-box;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    transform: translate(0, -50%) rotate(45deg);
    transition: all .15s ease-out;
    z-index: 11;
}

.ul-select:hover .value::after {
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
}

.ul-select.slide-down .value::after {
    transform: translate(0, 100%) rotate(45deg);
    opacity: 0;
}



/* --   TINY-SKIN - SKÓRKA SELECTÓW DOPASOWANA DO SELECTÓW TINYMCE   -- */

.ul-select.tiny-skin {
    min-height: 28px;
    line-height: 28px;
    border-radius: 3px;
    box-shadow: none;
    width: 80px;
}

.ul-select.tiny-skin li:hover { background: #e5e5e5; }
.ul-select.tiny-skin li {
    background: #eee;
    min-height: 28px;
    line-height: 28px;
    text-transform: none;
    text-align: left;
    padding: 0 24px 0 8px;
}

.ul-select.tiny-skin .value::after {
    display: none;
}

.ul-select.tiny-skin.slide-down .value { background: #e5e5e5; }
.ul-select.tiny-skin.slide-down .option:hover { background: #; }
.ul-select.tiny-skin.slide-down .option { background: #e5e5e5; }
.ul-select.tiny-skin.slide-down svg { transform: rotate(180deg); }
.ul-select.tiny-skin:hover svg { color: #444; }
.ul-select.tiny-skin svg {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 16px;
    height: 16px;
    color: #888;
    stroke-width: 2px;
    z-index: 11;
    transition: all .15s ease-out;
    pointer-events: none;
}










/* --   NOWE POLA CHECKBOX   -- */

.n-checkbox:hover { border: 1px solid rgba(0, 0, 0, .4); }
.n-checkbox.checked { border: 1px solid rgba(0, 0, 0, .3); }
.n-checkbox {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .2);
    background: #fff;
    transition: all .1s ease-out;
}

.n-checkbox.checked svg { opacity: 1; }
.n-checkbox svg {
    width: 16px;
    height: 16px;
    opacity: 0;
    stroke-width: 3px;
    color: #;
    transition: all .1s ease-out;
}










/* --   KOLEJNA WERSJA LINI FORMULARZA   -- */

.nn-line {
    width: 100%;
    line-height: 20px;
    padding: 12px 24px;
    color: #666;
    border-bottom: 1px solid #eee;
}

.nn-line .nn-label { max-width: calc(100% - 40px); }
.nn-line .nn-label * { float: none; }
.nn-line.required-line .nn-label { text-indent: 10px; }
.nn-line.required-line .nn-label::after {
    content: '*';
    position: absolute;
    left: -12px;
    top: 0;
    line-height: 20px;
    font-family: titillium_websemibold;
    color: #f00;
    font-size: 11pt;
}










/* --   POLA CHECKBOX   -- */

.checkbox {
    width: 100%;
    float: left;
}

.checkbox.floated { width: auto; }
.checkbox .check {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, .2);
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    margin: 8px 0 0 0;
    float: left;
    border-radius: 3px;
}

.checkbox.svg-icon .check svg {
    width: 16px;
    height: 16px;
    color: #;
}

.checkbox .check.fill { border: 1px solid #f00; }
.checkbox:not(.svg-icon) .check::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../../.images/icon_checked_green.svg);
    background-size: 24px 24px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: all .2s ease-out;
}

.checkbox.right .check { float: right; }
.checkbox .check:hover {
    border: 1px solid rgba(0, 0, 0, .3);
    background-color: #fefefe;
}

.checkbox .check.fill:hover { border: 1px solid #f00; }
.checkbox:not(.svg-icon) .check.checked::after { opacity: 1; }

/* --   LABEL CHECKBOXA   -- */

.checkbox .label {
    margin: 0 12px 0 0;
    width: calc(100% - 56px);
    font-size: 10pt;
    line-height: 150%;
    float: left;
    padding: 10px 0 8px 12px;
}

.checkbox.right .label { float: right; }
.checkbox .label * { float: none; }
.checkbox .label.expand:hover::after { opacity: 1; }
.checkbox .label.expand::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: translate(-18px, 12px) rotate(-45deg);
    opacity: .2;
}

.checkbox.ch.svg-icon .label { font-family: titillium_websemibold; }
.checkbox.svg-icon .label {
    left: calc(100% + 8px);
    top: 0;
    position: absolute;
    line-height: 24px;
}










/* --   CHOWANIE KONTROLEK ZE STRZAŁKAMI W POLACH INPUT NUMBER   -- */

input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/*
 *   FORMULARZ ZAMÓWIENIOWY
 *   -------------------------
 *   POWIĄZANY Z PRZEŁĄCZNIKIEM: TRIGGER-1
 */

#order_form {
    will-change: transform;
    transform-origin: 50% 0%;
}

#order_form.hide {
    transform: scale(.95);
}





/* --   PRZYCISKI WYBORU OKŁADKI I KOLORU Z GALERII, ZAMIAST SELECTA   -- */

#show-colors-gallery,
#show-models-gallery {
    position: absolute;
    left: calc(50% + 1px);
    top: 6px;
    overflow: hidden;
}

#show-colors-gallery b,
#show-models-gallery b {
    max-width: 160px;
    white-space: nowrap;
}

#show-colors-gallery::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 100%;
    /* border: 1px solid #aaa;
    border-radius: 2px; */
    box-sizing: border-box;
    pointer-events: none;
    z-index: 3;
    background: rgba(238,238,238,0);
    background: -moz-linear-gradient(left, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(238,238,238,0)), color-stop(100%, rgba(238,238,238,1)));
    background: -webkit-linear-gradient(left, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%);
    background: -o-linear-gradient(left, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%);
    background: -ms-linear-gradient(left, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%);
    background: linear-gradient(to right, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=1 );
}










/* --   STYLE STARYCH FORMULARZY ZAMÓWIENIOWYCH   -- */

/* --   POLA FORMULARZY   -- */

.form_field {
    float: left;
    width: 100%;
    height: auto;
    box-shadow: 0 5px 32px rgba(0, 0, 0, .05);
    background: #fff;
    padding: 0 0 16px 0;
    border-radius: 5px;
    margin: 0 0 32px 0;
    font-family: titillium_webregular;
    position: relative;
    transition: all .15s ease-out;
    z-index: 1;
}

.form_field:hover {
    /* box-shadow: 0 10px 64px rgba(0, 0, 0, .1); */
    z-index: 2;
}

.form_field.force-to-top,
.form_field.force-to-top:hover {
    z-index: 3;
}




.form_field .field-content {
    width: 100%;
    height: 100%;
}





.popup_field {
    background:#fbfbf3;
    background-image:url(../../images/bg_form_field2.gif);
    background-repeat:repeat-x;
    display:none;
}

.popup_line {
    display:none;
}










/* --   ZAKŁADKI W POLU FORMULARZA   -- */

.form_field .tabs {
    font-size: 11pt;
    width: 100%;
    float: left;
    height: 56px;
    line-height: 56px;
    box-sizing: border-box;
    color: #555;
    text-align: left;
    margin: 0;
    font-weight: 100;
    font-family: titillium_webbold;
    text-transform: uppercase;
    background: #eee;
    border-radius: 5px 5px 0 0;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
}

.form_field .tabs .tab {
    padding: 0 24px;
    color: #999;
    cursor: pointer;
    width: 50%;
    height: 56px;
    border-bottom: 2px solid #aaa;
    transition: all .1s ease-out;
    background: #f1f1f1;
}

.form_field .tabs .tab.left {
    /*
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 100%);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 100%);
    */
}

.form_field .tabs .tab.right {
    /*
    background: -moz-linear-gradient(left, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 50%);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 50%);
    background: linear-gradient(to right, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 50%);
    */
}

.form_field .tabs .tab:hover {
    color: #666;
}

.form_field .tabs .tab.active,
.form_field .tabs .tab.active:hover {
    color: #555;
    background: #fff !important;
    border: 0;
    transform: none;
    height: 60px;
    margin: -4px 0 0 0;
    border-top: 2px solid #;
    border-radius: 5px 5px 0 0;
    text-shadow: none;
    cursor: default;
}

.form_field .tab-content {
    width: 100%;
    padding: 16px 0 0 0;
}

.selected-addons-amount {
    float: none;
    display: inline-block;
    margin: 0 0 0 8px;
    color: #aaa;
    font-family: titillium_webbold;
}










/* --   TYTUŁ POLA   -- */

.form_field h6 {
    font-size: 11pt;
    width: 100%;
    float: left;
    height: 56px;
    line-height: 58px;
    box-sizing: border-box;
    padding: 0 24px;
    color: #555;
    text-align: left;
    border-bottom: 2px solid #aaa;
    margin: 0 0 8px 0;
    font-weight: 100;
    font-family: titillium_webbold;
    text-transform: uppercase;
    background: #eee;
    border-radius: 5px 5px 0 0;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
}

.form_field.promo h6 {
    color: #0b9a00;
    border-bottom: 2px solid #0b9a00;
}

.form_field h6 > svg {
    width: 24px;
    height: 24px;
    margin: 16px 16px 0 -8px;
    color: #666;
    transform: scale(.75);
}

.form_field h6.small {
    font-size: 10pt;
    background: #fafafa;
    border-radius: 0;
    height: 50px;
    line-height: 48px;
    border-bottom: 1px solid #eee;
    margin: 0;
}

.form_field .line .order {
    padding: 0 24px;
    color: #444;
}

.form_field .line .order b {
    margin: 0 4px 0 0;
}

.form_field .field-description {
    color: #333;
    border-bottom: 1px solid #eee;
    padding: 8px 24px 16px 24px;
    text-align: left;
}





/* --   LINIA FORMULARZA   -- */

.form_field .line {
    color: #888;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    min-height: 24px;
    line-height: 24px;
    float: left;
    width: 100%;
    box-sizing: content-box;
    z-index: 100;
}

.form_field .line:hover {
    z-index: 10000;
}

.form_field .line.force-to-top,
.form_field .line.force-to-top:hover {
    z-index: 10001;
}

.form_field .line.additional-info {
    text-align: center;
    background-color: #fff;
    color: #03b894;
    font-family: titillium_websemibold;
    font-size: 11pt;
    padding: 16px;
    box-sizing: border-box;
}

.form_field .line p b {
    float: none;
}

.form_field .line:hover p {
    z-index: 10000;
}

.form_field .inside {
    border-bottom: 0;
    border-top: 1px solid #eee;
    padding: 8px 0 0 0;
    margin: 8px 0 0 0;
}





/* --   ZABLOKOWANA LINIA   -- */

/*
.form_field .line.disable-line {
    display: none;
}
*/

/* --   ZABLOKOWANE ELEMENTY LINI   -- */

/*
.form_field .line.disable-elements p,
.form_field .line.disable-elements input {
    pointer-events: none;
    opacity: .25;
}
*/





/* --   PUSTE POLE FORMULARZA   -- */

.form_field .empty {
    width: 100%;
    height: 100px;
    line-height: 100px;
    color: #d00;
}

/*
.form_field .line.disable-line p,
.form_field .line.disable-line input {
    pointer-events: none;
    opacity: .35;
    filter: grayscale(100%);
    display: none;
}
*/





/* --   LINIA Z LOADEREM   -- */

.form_field .line.loading::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 24px;
    height: 24px;
    background: none;
    z-index: 100;
    border-radius: 100%;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #;
    animation: spin .75s ease-out infinite;
    margin: -12px 0 0 0;
}





.form_field .line .required_inp {
    color:#;
    font-weight:bold;
}

.form_field .line p {
    width: calc(50% - 4px);
    text-align: right;
    float: left;
    color: #333;
    font-weight: normal;
    box-sizing: border-box;
    padding: 4px 4px 4px 12px;
    line-height: 20px;
    z-index: 100;
}

.form_field .line p u {
    text-decoration: none;
    float: right;
}





/*
.form_field .line .wing {
    width:280px;
    height:50px;
    background-image:url(../../images/wing.png);
    margin-left:105px;
    display:none;
}

.form_field .line .wing .left_wing {
    float:left;
    margin-top:18px;
    margin-left:37px;
}

.form_field .line .wing .right_wing {
    float:right;
    margin-top:18px;
    margin-right:36px;
}

.form_field .line_pager {
    color:#888;
    border-bottom:1px solid #eee;
    padding:0 8px 0 10px;
}
*/





.form_field .block {
    float: left;
    width: 100%;
    box-sizing: content-box;
    background: #f8f8f8;
}

.form_field .block .text {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    text-align: left;
}

.form_field .block .text .d {
    margin:0 0 24px 0;
}

.form_field .block .text .t {
    margin:0 0 16px 0;
    font-size: 12pt;
    font-family: titillium_websemibold;
    text-transform: uppercase;
}





/* --   POLE SELECT   -- */

.form-box select,
.form_field select {
    color: #555;
    font-size: 10pt;
    margin: 0 0 0 4px;
    padding: 2px;
    border-radius: 3px;
    border: 1px solid #ccc;
    height: 28px;
    line-height: 24px;
    background: #f8f8f8;
    font-family: titillium_webregular;
    max-width: calc(50% - 16px);
}

.form-box select:hover,
.form_field select:hover {
    border: 1px solid #aaa;
    color: #333;
}

.form-box select.lock,
.form_field select.lock {
    border: 0;
    background: none;
    font-family: titillium_websemibold;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.form-box select.white,
.form_field select.white {
    background: #fff;
}

.form-box select.white:hover,
.form_field select.white:hover {
    background: #fdfdfd;
}





/* --   POLE INPUT TEXT   -- */

.form_field input {
    color: #555;
    font-size: 10pt;
    padding: 2px 4px;
    margin: 0 0 0 4px;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    height: 28px;
    line-height: 24px;
    font-family: titillium_webregular;
}

.form_field input:hover {
    border: 1px solid #aaa;
    color: #333;
}

.form_field input.white {
    background: #fff;
}

.form_field input.white:hover {
    background: #fdfdfd;
}

.form_field input.wide {
    width: calc(50% - 16px);
}





/* --   POLE INPUT CHECKBOX   -- */

.form_field .line input[type="checkbox"] {
    margin: 5px 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    transform: translate(0, 1px);
}

.form_field .line input[type="checkbox"].align-left {
    margin: 4px 8px 0 12px;
}

.form_field .line input[type="checkbox"]:hover {
    filter: brightness(1.05);
}





/* --   POLE TEXTAREA   -- */

.form_field textarea {
    margin: 0 0 0 4px;
    font-size: 10pt;
    width: calc(50% - 16px);
    height: 56px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: titillium_webregular;
    background: #f8f8f8;
    border-radius: 3px;
    padding: 4px;
    color: #555;
}

.form_field textarea:hover {
    border: 1px solid #aaa;
    color: #333;
}

.form_field textarea.full-line {
    width: calc(100% - 32px);
    height: 128px;
    margin: 8px 16px;
}

.form_field textarea.white {
    background: #fff;
}

.form_field textarea.white:hover {
    background: #fdfdfd;
}




/*
.form_field .line img {
    float: none;
}

.form_field .infoline {
    background-color: #444;
    padding: 8px;
    color: #ddd;
    box-sizing: border-box;
}

.form_field .infoline a {
    color:#f0e9c0;
}

.form_field .infoline a:hover {
    color:#f9e680;
}
*/




/*
#font_size {
    width: 40px;
}

#engraver_font_preview {
    font-size: 16pt;
    color: #444;
    text-align: center;
    width: 100%;
    line-height: 100%;
    padding: 16px 0;
}

#engraver_font_preview div {
    width: 100%;
    text-align: center;
}

#engraver_font_preview div {

}

#engraver_font_preview.trajan {
    font-family: trajan;
    font-weight: 600;
}

#engraver_font_preview.amazone {
    font-family: amazone_bt;
    font-weight: 600;
    font-size: 32pt;
}

#engraver_font_preview.century_gothic {
    font-family: century_gothic;
    font-weight: 600;
}
*/





/*
#ilosc {
    width:25px;
}

.form_field #wzor {
    width:150px;
}

.form_field #wzor_zestaw {
    width:150px;
}

.form_field #format {
    width:100px;
}

.form_field #parent {
    max-width:230px;
}

.form_field #tekst_graweru {
    width:220px;
}

.form_field #uwagi {
    width: calc(100% - 32px);
    height: 120px;
    line-height: 150%;
    margin: 8px 16px 0 16px;
    padding: 8px;
    font-family: titillium_webregular;
    font-size: 10pt;
    background: #f8f8f8;
    border: 1px solid #ccc;
}

.form_field #nazwa {
    width:230px;
}

.form_field #kod {
    width:60px;
}

.form_field #ulica {
    width:180px;
}
*/





.form_field .line .fill {
    border: 1px solid #f00 !important;
}





.form_field .line.required u::after {
    content: '*';
    position: absolute;
    left: -12px;
    top: 0;
    line-height: 24px;
    font-family: titillium_websemibold;
    color: #f00;
    font-size: 11pt;
}





/* --   WYRÓWNANIE OBIEKTÓW W LINI FORMULARZA DO LEWEGO BOKU POLA   -- */

.form_field.to-left .line input[type="checkbox"] {
    position: absolute;
    left: 24px;
    top: 12px;
    margin: 0;
}

.form_field.to-left .line p {
    margin: 0 0 0 48px;
    width: 100%;
    text-align: left;
}

.form_field.to-left .line p u {
    float: left;
}

.form_field.to-left .line p .description-icon {
    float: left;
    margin: 0 0 0 16px;
}










/* --   IKONKI Z INFORMACJAMI I ALERTAMI PRZY POLACH W FORMULARZACH   -- */

.description-icon,
.alert-icon {
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    padding: 0 !important;
    z-index: 100;
    float: right;
    margin: 0 12px 0 0;
    border-radius: 100%;
    color: #fff;
    transition: all .15s cubic-bezier(0, .65, .5, 1.49);
    text-align: center;
}

.description-icon:hover,
.alert-icon:hover {
    z-index: 10001;
    transform: scale(1.1);
}

.description-icon svg,
.alert-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    position: absolute;
    left: 0;
    top: 0;
}

.description-icon:hover svg,
.alert-icon:hover svg {
    stroke-width: 3;
}

.description-icon.hide,
 .alert-icon.hide {
     transform: scale(.25);
     transition: all .15s ease-out;
}



/* --   ZIELONA IKONKA OPISU   -- */

.description-icon {
    background: #03b894;
}



/* --   CZERWONA IKONKA ALERTU   -- */

.alert-icon.red {
    background: #d00;
}

.alert-icon.red svg {
    transform: scale(1.3);
}



/* --   ŻÓŁTA IKONKA ALERTU   -- */

.alert-icon.yellow {
    background: #ffa800;
    color: #fff;
}









/*
.tag-info {
    position:absolute;
    left:100%;
    top:50%;
    background-color:#666;
    color:#fff;
    border-radius:2px;
    font-weight:100;
    min-height:24px;
    line-height:20px;
    padding:10px 16px;
    font-size:10pt;
    transform:translate(-80px, -50%);
    font-family:titillium_webregular;
    width: 240px;
    display: none;
}

.tag-info::after {
    content:'';
    position:absolute;
    box-sizing: border-box;
    left:-16px;
    top:50%;
    width:16px;
    height:16px;
    transform: translate(0, -8px);
    border-top: 8px solid rgba(0, 0, 0, 0);
    border-bottom: 8px solid rgba(0, 0, 0, 0);
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid #666;
}
*/









.form_field .line p .bg_red {
    background-color:#e80000;
}

.form_field .line p .bg_green {
    background-color:#0e9a00;
}

/*
.form_field .line p .tooltip:hover {
    background-color:#555;
}

.form_field .line p .tooltip:hover,
.form_field tr.naglowek .tooltip:hover {
    background-color:#555;
}

.right_form_field .line p .tooltip,
.right_form_field .long_text .tooltip {
    background-color:#;
    color:#fff;
    padding:2px 6px;
    font-weight:bold;
    border-radius:3px;
    cursor:pointer;
}

.right_form_field .line p .tooltip:hover,.right_form_field .long_text .tooltip:hover {
    background-color:#555;
}

.bt_up,.bt_down {
    width:20px;
    height:20px;
    float:right;
    cursor:pointer;
}
*/









/* --   ROZWIJANE OPCJE LINI FORMULARZA   -- */

.line.light {
    background: #fff;
    min-height: 40px;
    line-height: 40px;
    padding: 0;
}

.line.light p {
    font-size: 9pt;
    font-weight: 600;
    line-height: 40px;
    /* font-family: titillium_webregular; */
    /* text-transform: uppercase; */
}

.line.light div {
    width: 100%;
    float: left;
}

.line.light input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 14px 0 0 0;
    float: left;
}





/* --   ROZWIJANA LISTA Z OPCJAMI   -- */

.line-options {
    width: 100%;
    height: auto;
    float: left;
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 8px;
    overflow: hidden;
}

.line-options .box {
    float: left;
    width: calc(50% - 16px) !important;
    height: auto;
    cursor: pointer;
    box-sizing: border-box;
    margin: 8px;
    z-index: 10;
}

.line-options .box.selected {
    z-index: 11;
}

.line-options .box div {
    width: 100%;
    padding-top: calc(100% + 48px);
    float: left;
}

.line-options .box div img {
    width: 160px;
    height: 160px;
    position: absolute;
    left: 50%;
    top:0;
    transform: translate(-50%, 16px) scale(.95);
    border-radius: 100%;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    z-index: 12;
    box-sizing: border-box;
}

.line-options .box div img:hover {
    transform: translate(-50%, 16px) scale(1);
}

.line-options .box.selected div img {
    transform: translate(-50%, 16px) scale(1);
    border: 3px solid #;
}

.line-options .box.half-hide div img {
    filter: grayscale(100%);
    opacity: .75;
}


/*
.line-options .box.selected div img {
    transform: translate(-50%, 16px) scale(5);
    border-radius: 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}
*/

.line-options .box .box-symbol,
.line-options .box .box-info {
    position: absolute;
    left: 0;
    top: 184px;
    width: 100%;
    text-align: center;
    font-family: titillium_webbold;
    font-size: 14pt;
    padding: 0;
    z-index: 9;
    color: #888;
    font-weight: 100;
    line-height: 120%;
}

.line-options .box:hover .box-symbol {
    color: #000;
}

.line-options .box .box-info {
    font-size: 10pt;
    font-family: titillium_webregular;
    top: 216px;
    padding: 0 20px;
    box-sizing: border-box;
}





.line-options .options-title,
.line-options .options-info {
    width: 100% !important;
    float: left;
    font-weight: 100;
    line-height: 150%;
    padding: 16px;
    color: #888;
    font-family: titillium_webregular;
    font-size: 10pt;
    box-sizing: border-box;
    z-index: 9;
}

.line-options .options-title {
    font-size: 14pt;
    text-transform: uppercase;
    font-family: titillium_websemibold;
    color: #666;
    padding: 16px 16px 0 16px;
}

.line-options .options-info {
    border-bottom: 1px solid #eee;
}









/* .loader {
    float:right;
    margin-top:1px;
    margin-right:10px;
    display:none;
}

.loader_price {
    position:absolute;
    top:12px;
    right:12px;
    display:none;
} */

/*
#rabat,
#rabat_floating,
#starter_rabat_floating,
#promo_30p_info {
    position:absolute;
    top:7px;
    left:7px;
    font-size:12pt;
    font-weight:bold;
    border-radius:4px;
    background-color:#169c00;
    line-height:25px;
    height:25px;
    width:55px;
    text-align:center;
    letter-spacing:-1px;
    display:none;
}
*/










/* --   ROZKŁADÓWKI (MIESZANE PAPIERY, ROZKŁADÓWKI 3D I SKRZYDEŁKA)   -- */

.spreads {
    width: 100%;
    height: 100%;
    padding: 4px;
}

.spread_details {
    width: calc(33.33333% - 8px);
    margin: 4px;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .2);
}

.spread_details:hover {
    background: #f8f8f8;
}

.spread_details div {
    text-align: center;
}

.spread_details div span {
    width: 100%;
    height: 24px;
    line-height: 24px;
}

.spread_details input[type="checkbox"],
.spread_details select {
    float: none;
}

.spread_details select {
    max-width: 120px;
}

.spread_details input[type="checkbox"] {
    cursor: pointer;
}

.spread_details input[type="checkbox"]:hover {
    filter: brightness(1.1);
}

.spread_details .number {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    font-size: 9pt;
    background-color: #;
}

.paper {
    width: 100%;
    margin:10px 0 10px 0;
}

/*
.spread3d {
    width: 100%;
    margin:10px 0 10px 0;
}

.spread3d input[type="checkbox"] {
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.wing {
    width: 100%;
    margin:10px 0 10px 0;
}

.wing-preview {
    width: calc(100% - 16px);
    margin: 0 8px;
    height: 40px;
}

.wing-checkbox {
    width: 25%;
    height: 40px;
    border: 1px dashed rgba(0, 0, 0, .5);
}

.wing-checkbox input[type="checkbox"] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
}

.wing-checkbox.a { border-right: 0; }
.wing-checkbox.b { border-left: 0; }

.side {
    text-align: center;
    line-height: 40px;
    height: 40px;
    font-size: 16pt;
    font-family: titillium_websemibold;
    color: rgba(0, 0, 0, .25);
    width: 25%;
    background: #f7f7ee;
    border: 1px solid rgba(0, 0, 0, .25);
    cursor: default;
}

.side.a { border-right: 0; }
.side.b { border-left: 0; }
*/


















#mask {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background-image:url(../../images/bg_mask_white.png);
    z-index:2001;
    text-align:center;
    color:#fff;
    display:none;
}

#mask table,#mask td {
    width:100%;
    height:100%;
}

#mask div {
    -moz-border-radius:6px;
    -khtml-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #111;
    padding:40px;
    background-image:url(../../images/bg_mask.png);
}

#mask div h6 {
    color:#fff;
    font-size:12pt;
    font-weight:bold;
    letter-spacing:0;
    margin:0 0 20px 0;
}

#mask div p {
    margin-bottom:30px;
}

#mask img {
    width:25px;
    height:25px;
    margin-bottom:15px;
    display:none;
}

#mask .info {
    font-size:10pt;
    color:#fff6cd;
}

#delete_alert,#clear_cart_alert,#validate_alert,#change_profile_alert,#delete_stamp_alert,#programs_email_alert {
    width:300px;
    display:none;
    box-shadow: 5px 5px 10px #222;
    -moz-box-shadow: 5px 5px 10px #222;
    -webkit-box-shadow: 5px 5px 10px #222;
}

#register_user_alert {
    width:400px;
    display:none;
}

#confirm_user_alert {
    width:400px;
    display:none;
    background-color:#006683;
}

#add_to_cart_alert,#save_changed_form_alert,#save_dafaults_alert,#send_order_alert {
    width:400px;
    display:none;
    box-shadow: 5px 5px 10px #222;
    -moz-box-shadow: 5px 5px 10px #222;
    -webkit-box-shadow: 5px 5px 10px #222;
    background-color:#333;
}










/* --   ALERTY   -- */

.new_alert {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #222;
    /* display:none; */
    border-top: 5px solid #666;
    z-index: 999999;
    padding: 0 0 80px 0;
    transition: all .5s cubic-bezier(.075, .82, .165, 1);
    transform: translate(0, 100%);
}

.new_alert.go-up {
    transform: translate(0, 0);
}

.new_alert div {
    width: 1184px;
    text-align: right;
    left: 50%;
    margin: 24px 0 0 -592px;
    /* margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:100px; */
}

.new_alert .top_white_shadow {
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 100%;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    height: 320px;
    opacity: 0;
    pointer-events: none;
    transition: all .5s cubic-bezier(.075, .82, .165, 1);
    margin: 0;
    display: none;
}

.new_alert.go-up .top_white_shadow {
    opacity: 1;
}

.new_alert h2 {
    width: 100%;
    font-size: 16pt;
    font-family: titillium_websemibold;
    color: #eee;
    margin: 0 0 16px 0;
    font-weight: 100;

}

.new_alert p {
    padding: 0 0 0 592px;
    line-height: 175%;
    margin: 0 0 16px 0;
    color: #ddd;
    width: 100%;
}

.new_alert div .green {	background-color:#00990b; }
.new_alert div .green:hover { background-color:#00b20d; }
.new_alert div .red { background-color:#da0000; }
.new_alert div .red:hover { background-color:#ff0000; }
.new_alert div .blue { background-color:#01a0e9; }
.new_alert div .blue:hover { background-color:#0082bd; }

.new_alert div p.see_also {
    margin-bottom:50px;
}

.new_alert div .loader {
    width:16px;
    height:16px;
    float:right;
    margin-left:13px;
    margin-top:4px;
    display:block;
    margin-right:0;
}

.new_alert div ul {
    color:#fff;
    padding-left:400px;
}

.new_alert div ul li {
    padding-bottom:10px;
}

.new_alert div p a {
    color:#ffefc8;
}

.new_alert div #price_info {
    position:absolute;
    left:0;
    top:-5px;
    margin-top:-20px;
    padding-left:0;
    float:left;
    text-align:left;
    line-height:220%;
    background-color:#666;
    padding-top:0;
    -webkit-border-radius:0 0 5px 5px;
    -khtml-border-radius:0 0 5px 5px;
    -moz-border-radius:0 0 5px 5px;
    border-radius:0 0 5px 5px;
    width:175px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:15px;
    display:none;
}




















/* --   POWIĘKSZANE ZDJĘCIA W FORMULARZACH   -- */

.line-photo {
    width:calc(100% - 48px);
    height:auto;
    margin:24px;
    box-sizing:border-box;
    cursor:pointer;
    transition:all .15s ease-out;
    float:left;
    z-index:100000;
}

.line-photo:hover {

}

.line-photo::after {
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:2000px;
    height:2000px;
    background:radial-gradient(ellipse at center, rgba(252,252,252,1) 0%, rgba(252,252,252,0) 100%);
    z-index:9999;
    pointer-events:none;
    opacity:0;
    transition:all .3s ease-out;
    transform:translate(-50%,-50%) scale(.5);
}

.line-photo .img {
    float:left;
    width:100%;
    height:auto;
    overflow:hidden;
    z-index:10000;
}

.line-photo img {
    max-width:100%;
    height:auto;
    float:left;
    opacity:1;
    pointer-events:none;
    transition:all 1s cubic-bezier(0,.65,.34,.99);
    z-index:10000;
}

.line-photo:hover img {
    filter: brightness(1.1);
}





/* --   LEKKIE POWIĘKSZENIE ZDJĘCIA   -- */

.line-photo.zoom {
    transform:scale(1.6);
    transition:all .15s ease-out;
}

.line-photo.zoom::after {
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
    pointer-events:all;
}

.line-photo.zoom .img {
    box-shadow:0 8px 16px rgba(0,0,0,.2);
}










/* --   POLE "KOD PROMOCYJNY"   -- */

#coupon_code {
    width: 200px;
    font-size: 12pt;
    margin: 16px 0 0 24px;
    padding: 4px 8px;
    height: auto;
    font-family: titillium_websemibold;
    color: #0b9a00;
    line-height: 22px;
    text-transform: uppercase;
    background: #f8f8f8;
}

#validate_code {
    position: absolute;
    left: 240px;
    bottom: 16px;
    transition: all .2s ease-out;
}

#validate_info {
    position: absolute;
    left: 240px;
    bottom: 16px;
    font-family: titillium_websemibold;
    line-height: 32px;
    transition: all .2s ease-out;
    text-align: left;
    white-space: nowrap;
}

#validate_info span {
    font-family: titillium_webregular;
    color: #aaa;
    position: absolute;
    left: 0;
    top: 18px;
}

#validate_info.green { color: #0b9a00; }
#validate_info.red { color: #f00; }

#coupon_value_info {
    cursor: default;
    position: absolute;
    right: 24px;
    bottom: 16px;
    font-size: 15pt;
    padding: 0 12px;
    font-family: titillium_webbold;
    border-radius: 3px;
    background-color: #0b9a00;
    color: #fff;
    height: 32px;
    line-height: 32px;
    transition: all .2s cubic-bezier(0,.65,.4,1.46);
}

#coupon_value_info.hide {
    transform: scale(.5);
}

#loader_coupon_code {
    left: 256px;
    top: auto;
    bottom: 0;
}












/* --   DODATKI   -- */

.cover-addon-container,
.block-addon-container {
    width: 100%;
}




/* --   ZAKŁADKI   -- */

.tabs {
    width: 100%;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #aaa;
    margin: 56px 0 0 0;
    user-select: none;
}

.tabs .tab {
    color: rgba(255, 255, 255, .25);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.tabs .tab:hover {
    color: rgba(255, 255, 255, .5);
}

.tabs .tab.active {
    color: #eee;
    border-bottom: 2px solid rgba(255, 255, 255, .5);
}

.tabs .tab.active:hover {
    color: #eee;
}

.tabs .separator {
    width: 40px;
    height: 100%;
}

.tabs .separator svg {
    width: 14px;
    height: 14px;
    color: #000;
    stroke-width: 1px;
    opacity: .75;
}





/* --   WIELKOŚCI ZAKŁADEK   -- */

/* --   STANDARDOWE   -- */

.tabs.medium {
    height: 56px;
    line-height: 56px;
    font-size: 12pt;
    font-family: titillium_websemibold;
}





/* --   MAŁE   -- */

.tabs.small {
    height: 48px;
    line-height: 48px;
    font-size: 10pt;
}





/* --   TREŚĆ ZAKŁADEK   -- */

.tabs-content {
    width: 100%;
    z-index: 63;
}

.tab-content {
    width: 100%;
}

.tab-description {
    width: 100%;
    padding: 16px 8px 32px 8px;
    text-align: left;
    color: #888;
    font-size: 10pt;
    line-height: 150%;
    z-index: 100;
}





/* --   2 ZAKŁADKI   -- */

.tabs.two-tabs .tab {
    width: 50%;
}

/* --   3 ZAKŁADKI   -- */

.tabs.three-tabs .tab {
    width: 33.33333%;
}

/* --   4 ZAKŁADKI   -- */

.tabs.four-tabs .tab {
    width: 25%;
}





#step2-steps { z-index: 64; }
#step3-steps { z-index: 64; }
#step4-steps { z-index: 64; }
#step5-steps { z-index: 64; }











/* --   MOTYW KOLORYSTYCZNY NA JASNYM TLE   -- */

.light .tabs {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    color: #666;
}

.light .tabs .tab {
    color: rgba(0, 0, 0, .25);
}

.light .tabs .tab:hover {
    color: rgba(0, 0, 0, .5);
}

.light .tabs .tab.active {
    color: #444;
    border-bottom: 2px solid rgba(0, 0, 0, .25);
}

.light .tabs .tab.active:hover {
    color: #444;
}/*
 *   TOOLTIPS
 *   ========
 *   WWW.DIGITALALBUM.PL
 *   COPYRIGHT © 2006 - 2020
 *   DESIGNED AND CREATED BY FOX
 */





@keyframes tooltips-vert {
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}





[tooltip].hide-tooltip::before,
[tooltip].hide-tooltip::after {
    display: none !important;
}

[tooltip-clicked] { position: relative; }
[tooltip] { position: relative; }
[tooltip]::before,
[tooltip]::after {
    text-transform: none;
    font-size: .9em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}

[tooltip]::before {
    content: '';
    border: 5px solid transparent;
    z-index: 1001;
}

[tooltip]::after {
    content: attr(tooltip);
    font-family: Helvetica, sans-serif;
    text-align: center;
    min-width: 3em;
    max-width: 32em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, .35);
    background: #;
    color: #fff;
    z-index: 1000;
    font-weight: 400;
}

[tooltip].switch::after { content: attr(data-switch-tooltip); }
[tooltip].clicked::after { content: attr(tooltip-clicked); }
[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}

[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #;
}

[tooltip][flow^="down"]::after { top: calc(100% + 5px); }
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
    padding-top: 0;
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

[tooltip]:not([flow]):hover::before,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="down"]:hover::before {
    animation: tooltips-vert 250ms cubic-bezier(.785, .135, .15, .86) .15s forwards;
}

[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 200ms cubic-bezier(.785, .135, .15, .86) .15s forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 200ms cubic-bezier(.785, .135, .15, .86) .15s forwards;
}





/* --   KOLORY TOOLTIPÓW   -- */

/* --   NIEBIESKI   -- */

[tooltip][color="blue"]::after { background: #137eff; }
[tooltip][color="blue"]:not([flow])::before { border-top-color: #137eff; }
[tooltip][flow^="up"][color="blue"]::before { border-top-color: #137eff; }
[tooltip][flow^="left"][color="blue"]::before { border-left-color: #137eff; }
[tooltip][flow^="down"][color="blue"]::before { border-bottom-color: #137eff; }
[tooltip][flow^="right"][color="blue"]::before { border-right-color: #137eff; }

/* --   BIAŁY   -- */

[tooltip][color="white"]::after { background: #fff; color: #444; }
[tooltip][color="white"]:not([flow])::before { border-top-color: #fff; }
[tooltip][flow^="up"][color="white"]::before { border-top-color: #fff; }
[tooltip][flow^="left"][color="white"]::before { border-left-color: #fff; }
[tooltip][flow^="down"][color="white"]::before { border-bottom-color: #fff; }
[tooltip][flow^="right"][color="white"]::before { border-right-color: #fff; }

/* --   KOLOR SERWISU   -- */

[tooltip][color="webcolor"]::after { background: #; }
[tooltip][color="webcolor"]:not([flow])::before { border-top-color: #; }
[tooltip][flow^="up"][color="webcolor"]::before { border-top-color: #; }
[tooltip][flow^="down"][color="webcolor"]::before { border-bottom-color: #; }
[tooltip][flow^="left"][color="webcolor"]::before { border-left-color: #; }
[tooltip][flow^="right"][color="webcolor"]::before { border-right-color: #; }

/* --   CIEMNY SZARY   -- */

[tooltip][color="darkgray"]::after { background: #282828; }
[tooltip][color="darkgray"]:not([flow])::before { border-top-color: #282828; }
[tooltip][flow^="up"][color="darkgray"]::before { border-top-color: #282828; }
[tooltip][flow^="down"][color="darkgray"]::before { border-bottom-color: #282828; }
[tooltip][flow^="left"][color="darkgray"]::before { border-left-color: #282828; }
[tooltip][flow^="right"][color="darkgray"]::before { border-right-color: #282828; }

/* --   ZIELONY   -- */

[tooltip][color="green"]::after { background: #00a820; }
[tooltip][color="green"]:not([flow])::before { border-top-color: #00a820; }
[tooltip][flow^="up"][color="green"]::before { border-top-color: #00a820; }
[tooltip][flow^="down"][color="green"]::before { border-bottom-color: #00a820; }
[tooltip][flow^="left"][color="green"]::before { border-left-color: #00a820; }
[tooltip][flow^="right"][color="green"]::before { border-right-color: #00a820; }

/* --   CZERWONY   -- */

[tooltip][color="red"]::after { background: #f00; }
[tooltip][color="red"]:not([flow])::before { border-top-color: #f00; }
[tooltip][flow^="up"][color="red"]::before { border-top-color: #f00; }
[tooltip][flow^="down"][color="red"]::before { border-bottom-color: #f00; }
[tooltip][flow^="left"][color="red"]::before { border-left-color: #f00; }
[tooltip][flow^="right"][color="red"]::before { border-right-color: #f00; }

/* --   ŻÓŁTY   -- */

[tooltip][color="yellow"]::after { background: #ffc700; color: #666; }
[tooltip][color="yellow"]:not([flow])::before { border-top-color: #ffc700; }
[tooltip][flow^="up"][color="yellow"]::before { border-top-color: #ffc700; }
[tooltip][flow^="down"][color="yellow"]::before { border-bottom-color: #ffc700; }
[tooltip][flow^="left"][color="yellow"]::before { border-left-color: #ffc700; }
[tooltip][flow^="right"][color="yellow"]::before { border-right-color: #ffc700; }

/* --   KOLORY SERWISÓW   -- */

/* --   DIGITALALBUM   -- */

[tooltip][color="digitalalbum"]::after { background: #e75400; color: #fff; }
[tooltip][color="digitalalbum"]:not([flow])::before { border-top-color: #e75400; }
[tooltip][flow^="up"][color="digitalalbum"]::before { border-top-color: #e75400; }
[tooltip][flow^="down"][color="digitalalbum"]::before { border-bottom-color: #e75400; }
[tooltip][flow^="left"][color="digitalalbum"]::before { border-left-color: #e75400; }
[tooltip][flow^="right"][color="digitalalbum"]::before { border-right-color: #e75400; }

/* --   EFOTO   -- */

[tooltip][color="efoto"]::after { background: #137eff; color: #fff; }
[tooltip][color="efoto"]:not([flow])::before { border-top-color: #137eff; }
[tooltip][flow^="up"][color="efoto"]::before { border-top-color: #137eff; }
[tooltip][flow^="down"][color="efoto"]::before { border-bottom-color: #137eff; }
[tooltip][flow^="left"][color="efoto"]::before { border-left-color: #137eff; }
[tooltip][flow^="right"][color="efoto"]::before { border-right-color: #137eff; }

/* --   JIGGYALBUMS   -- */

[tooltip][color="jiggyalbums"]::after { background: #609b96; color: #fff; }
[tooltip][color="jiggyalbums"]:not([flow])::before { border-top-color: #609b96; }
[tooltip][flow^="up"][color="jiggyalbums"]::before { border-top-color: #609b96; }
[tooltip][flow^="down"][color="jiggyalbums"]::before { border-bottom-color: #609b96; }
[tooltip][flow^="left"][color="jiggyalbums"]::before { border-left-color: #609b96; }
[tooltip][flow^="right"][color="jiggyalbums"]::before { border-right-color: #609b96; }

/* --   EXTREMAALBUM   -- */

[tooltip][color="extremaalbum"]::after { background: #8b8b00; color: #fff; }
[tooltip][color="extremaalbum"]:not([flow])::before { border-top-color: #8b8b00; }
[tooltip][flow^="up"][color="extremaalbum"]::before { border-top-color: #8b8b00; }
[tooltip][flow^="down"][color="extremaalbum"]::before { border-bottom-color: #8b8b00; }
[tooltip][flow^="left"][color="extremaalbum"]::before { border-left-color: #8b8b00; }
[tooltip][flow^="right"][color="extremaalbum"]::before { border-right-color: #8b8b00; }

/* --   DIGITALALBEN24   -- */

[tooltip][color="digitalalben24"]::after { background: #228b22; color: #fff; }
[tooltip][color="digitalalben24"]:not([flow])::before { border-top-color: #228b22; }
[tooltip][flow^="up"][color="digitalalben24"]::before { border-top-color: #228b22; }
[tooltip][flow^="down"][color="digitalalben24"]::before { border-bottom-color: #228b22; }
[tooltip][flow^="left"][color="digitalalben24"]::before { border-left-color: #228b22; }
[tooltip][flow^="right"][color="digitalalben24"]::before { border-right-color: #228b22; }

/* --   STUDIOEWA   -- */

[tooltip][color="studioewa"]::after { background: #8b0000; color: #fff; }
[tooltip][color="studioewa"]:not([flow])::before { border-top-color: #8b0000; }
[tooltip][flow^="up"][color="studioewa"]::before { border-top-color: #8b0000; }
[tooltip][flow^="down"][color="studioewa"]::before { border-bottom-color: #8b0000; }
[tooltip][flow^="left"][color="studioewa"]::before { border-left-color: #8b0000; }
[tooltip][flow^="right"][color="studioewa"]::before { border-right-color: #8b0000; }

/* --   EFOTOKSIAZKA   -- */

[tooltip][color="efotoksiazka"]::after { background: #75a0c3; color: #fff; }
[tooltip][color="efotoksiazka"]:not([flow])::before { border-top-color: #75a0c3; }
[tooltip][flow^="up"][color="efotoksiazka"]::before { border-top-color: #75a0c3; }
[tooltip][flow^="down"][color="efotoksiazka"]::before { border-bottom-color: #75a0c3; }
[tooltip][flow^="left"][color="efotoksiazka"]::before { border-left-color: #75a0c3; }
[tooltip][flow^="right"][color="efotoksiazka"]::before { border-right-color: #75a0c3; }

/* --   CARDINALALBUMS   -- */

[tooltip][color="cardinalalbums"]::after { background: #c83c3c; color: #fff; }
[tooltip][color="cardinalalbums"]:not([flow])::before { border-top-color: #c83c3c; }
[tooltip][flow^="up"][color="cardinalalbums"]::before { border-top-color: #c83c3c; }
[tooltip][flow^="down"][color="cardinalalbums"]::before { border-bottom-color: #c83c3c; }
[tooltip][flow^="left"][color="cardinalalbums"]::before { border-left-color: #c83c3c; }
[tooltip][flow^="right"][color="cardinalalbums"]::before { border-right-color: #c83c3c; }

/* --   PCPDRUK   -- */

[tooltip][color="pcpdruk"]::after { background: #ff7f2a; color: #fff; }
[tooltip][color="pcpdruk"]:not([flow])::before { border-top-color: #ff7f2a; }
[tooltip][flow^="up"][color="pcpdruk"]::before { border-top-color: #ff7f2a; }
[tooltip][flow^="down"][color="pcpdruk"]::before { border-bottom-color: #ff7f2a; }
[tooltip][flow^="left"][color="pcpdruk"]::before { border-left-color: #ff7f2a; }
[tooltip][flow^="right"][color="pcpdruk"]::before { border-right-color: #ff7f2a; }





/* --   WYŁĄCZONY   -- */

[tooltip].-tip-off::before,
[tooltip].-tip-off::after {
    display: none !important;
}

/* --   UKRYTY Z KLASĄ ".EXPAND"   -- */

[tooltip].expand::before,
[tooltip].expand::after {
    display: none !important;
}

/* --   WYŁĄCZONY PO MOUSEDOWNIE NA OBIEKCIE   -- */

[tooltip].mousedown-tooltip-off._off::before,
[tooltip].mousedown-tooltip-off._off:after {
    display: none !important;
}

/* --   ODSUNIĘTE BARDZIEJ OD OBIEKTU   -- */

[tooltip][flow^="right"].distance::before { right: calc(0em - 10px); }
[tooltip][flow^="right"].distance::after { left: calc(100% + 10px); }




















/* --   TOOLTIPY NA WIĘKSZĄ ILOŚĆ INFORMACJI   -- */

.extended-tooltip {
    position: absolute;
    width: 200px;
    height: 80px;
    background: #;
    font-family: Helvetica, sans-serif;
    text-align: center;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .35);
    background: #;
    color: #fff;
    z-index: 1000;
    left: 50%;
    margin: 0 0 0 -100px;
    top: calc(100% + 4px);
}

.extended-tooltip .arrow {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 12px;
    height: 12px;
    border: 6px solid rgba(0, 0, 0, 0);
    border-bottom-color: #;
}
/* --   IKONKI FORMATÓW 3D W CSS   -- */

.formats-icons {
    width:100%;
    min-height:480px;
    display:inline-block;
}

.formats-icons .line {
    float:left;
    width:100%;
    height:1px;
    clear:both;
    background:rgba(255,255,255,0.5);
    margin:25px 0;
}

.formats-icons .separator {
    margin:0;
}

.formats-icons .format {
    width:25%;
    height:280px;
    margin:0;
    cursor:pointer;
    perspective: 1200px;
}

.formats-icons .format:hover {
    filter: brightness(1.2);
}

.formats-icons.cols-3 .format {
    width: 33.33333%;
}

.formats-icons.cols-2 .format {
    width: 50%;
}

.formats-icons .format.disabled {
    opacity:.5;
    cursor:default;
    filter:grayscale(0%)
}

.formats-icons .format .disabled-info {
    position:absolute;
    font-size:9pt;
    left:50%;
    transform:translate(-50%, 0);
    bottom:12px;
    width:100%;
    text-align:center;
    text-transform:uppercase;
    opacity:0;
    color:#3fa7a5;
}

.formats-icons .format.disabled .disabled-info {
    opacity:1;
}

.formats-icons .format .f-title {
    position:absolute;
    font-size:11pt;
    color:#aaa;
    left:0;
    bottom:0;
    height:28px;
    line-height:28px;
    width:100%;
    text-align:center;
}

.formats-icons .format .f-title b {
    display: inline-block;
    font-family: titillium_weblight;
    float: none;

}

.formats-icons .format:hover .f-title b {
    color: #fff;
    background: #;
    padding:0 8px;
    border-radius: 3px;
}










/* --   MINIATURY OKŁADEK 3D W CSS   -- */

.format .cover-3d {
    transform-style: preserve-3d;
    backface-visibility: visible;
    transform: translate(-50%, -96px) rotateX(-30deg) rotateY(30deg) scale(.32);
    width: auto;
    height: auto;
    left: 50%;
    bottom: 0;
    position:absolute;
    z-index: 7;
    transform-origin: bottom center;
}





.format .cover-3d.org {
    left: 50% !important;
    bottom: 25% !important;
    transform-origin: bottom center;
    transition:all 0.25s ease-out;
}





.photoalbum.format .cover-3d.first  { transform: translate(-50%, -45px) rotateX(-30deg) rotateY(30deg) scale(.25); }

.package.format .cover-3d.first  { transform: translate(-55%, -63px) rotateX(-30deg) rotateY(30deg) scale(.25); }
.package.format .cover-3d.second { transform: translate(-50%, -50px) rotateX(-30deg) rotateY(30deg) scale(.25); }
.package.format .cover-3d.third  { transform: translate(-40%, -40px) rotateX(-30deg) rotateY(30deg) scale(.25); }

.promo-package.format .cover-3d.first  { transform: translate(-57%, -64px) rotateX(-30deg) rotateY(30deg) scale(.25); }
.promo-package.format .cover-3d.second { transform: translate(-50%, -50px) rotateX(-30deg) rotateY(30deg) scale(.25); }
.promo-package.format .cover-3d.third  { transform: translate(-43%, -40px) rotateX(-30deg) rotateY(30deg) scale(.25); }

.promo-30p.format .cover-3d.first  { transform: translate(-57%, -64px) rotateX(-30deg) rotateY(30deg) scale(.25); }
.promo-30p.format .cover-3d.second { transform: translate(-50%, -50px) rotateX(-30deg) rotateY(30deg) scale(.25); }
.promo-30p.format .cover-3d.third  { transform: translate(-43%, -35px) rotateX(-30deg) rotateY(30deg) scale(.25); }










/* --   FRONT OKŁADKI   -- */

.format .cover-3d span {
    transform-origin: 50% 50%;
    z-index: 5;
    background: #444;
    background: -moz-linear-gradient(-45deg, #444 0%, #333 100%);
    background: -webkit-linear-gradient(-45deg, #444 0%, #333 100%);
    background: linear-gradient(135deg, #444 0%, #333 100%);
}





/* --   GRZBIET NA FRONCIE OKŁADKI   -- */

.format .cover-3d::before {
    width:15px;
    height:100%;
    background: #333;
    position:absolute;
    left:0;
    top:0;
    transform-origin:0 0;
    content:'';
    z-index: 7;
    border-right: 1px solid rgba(255, 255, 255, .1);
}





/* --   OBIEKTY NA OKŁADCE   -- */

.format .cover-3d .objects {
    left:15px;
    top:0;
    width:calc(100% - 15px);
    height:100%;
    position:absolute;
    z-index: 7;
}

.format .cover-3d .objects .obj {
    position:absolute;
    background: rgba(0, 0, 0, .3);
}

/* --   ZDJĘCIE NA METALU   -- */

.format .cover-3d .objects .obj.mt {
    margin: 0;
}

/* --   OBSZYCIE   -- */

.format .cover-3d .objects .obj.bd2 {
    background: none;
    border: 3px dashed rgba(0, 0, 0, .15);
    border-left: 0;
}

/* --   PHOTO   -- */

.format .cover-3d .objects .obj.ph {
    background-image: url(../../.media/.textures/foto-3d-css.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .25;
}





/* --   DÓŁ ALBUMU   -- */

.format .cover-3d span i {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:8px;
    background: rgba(0, 0, 0, 0);
    transform-origin:0 0;
    transform:rotateX(90deg) translateY(-100%) translateZ(-8px);
    z-index: 4;
    box-shadow: 0 0 24px 1px rgba(0, 0, 0, .4);
    border: 1px solid rgba(0, 0, 0, .2);
}





/* --   GÓRA ALBUMU   -- */

.format .cover-3d span::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:8px;
    background: #777;
    transform-origin:0 0;
    transform:rotateX(90deg) translateY(-100%);
    z-index: 5;
}





/* --   GRZBIET   -- */

.format .cover-3d span::after {
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:8px;
    height:100%;
    background: #1a1a1a;
    transform-origin:0 0;
    transform:rotateY(90deg);
    z-index: 5;
}










/* --   FORMATY   -- */

.cover-3d.format_10x10 span { width:105px; height:103px; }
.cover-3d.format_10x10 span::before { height:8px; }
.cover-3d.format_10x10 span::after { width:8px; }

.cover-3d.format_10x15 span { width:155px; height:103px; }
.cover-3d.format_10x15 span::before { height:8px; }
.cover-3d.format_10x15 span::after { width:8px; }

.cover-3d.format_13x19 span { width:194px; height:132px; }
.cover-3d.format_13x19 span::before { height:9px; }
.cover-3d.format_13x19 span::after { width:9px; }

.cover-3d.format_15x10 span { width:114px; height:152px; }
.cover-3d.format_15x10 span::before { height:8px; }
.cover-3d.format_15x10 span::after { width:8px; }

.cover-3d.format_15x15 span { width:155px; height:153px; }
.cover-3d.format_15x15 span::before { height:9px; }
.cover-3d.format_15x15 span::after { width:9px; }

.cover-3d.format_15x20 span { width:205px; height:153px; }
.cover-3d.format_15x20 span::before { height:9px; }
.cover-3d.format_15x20 span::after { width:9px; }

.cover-3d.format_15x23 span { width:234px; height:153px; }
.cover-3d.format_15x23 span::before { height:10px; }
.cover-3d.format_15x23 span::after { width:10px; }

.cover-3d.format_20x15 span { width:145px; height:203px; }
.cover-3d.format_20x15 span::before { height:11px; }
.cover-3d.format_20x15 span::after { width:11px; }

.cover-3d.format_20x20 span { width:205px; height:203px; }
.cover-3d.format_20x20 span::before { height:10px; }
.cover-3d.format_20x20 span::after { width:10px; }

.cover-3d.format_20x30 span { width:305px; height:203px; }
.cover-3d.format_20x30 span::before { height:10px; }
.cover-3d.format_20x30 span::after { width:10px; }

.cover-3d.format_25x25 span { width:245px; height:255px; }
.cover-3d.format_25x25 span::before { height:11px; }
.cover-3d.format_25x25 span::after { width:11px; }

.cover-3d.format_25x35 span { width:356px; height:255px; }
.cover-3d.format_25x35 span::before { height:10px; }
.cover-3d.format_25x35 span::after { width:10px; }

.cover-3d.format_25x38 span { width:381px; height:255px; }
.cover-3d.format_25x38 span::before { height:13px; }
.cover-3d.format_25x38 span::after { width:13px; }

.cover-3d.format_28x35 span { width:352px; height:281px; }
.cover-3d.format_28x35 span::before { height:13px; }
.cover-3d.format_28x35 span::after { width:13px; }

.cover-3d.format_30x22 span { width:230px; height:304px; }
.cover-3d.format_30x22 span::before { height:12px; }
.cover-3d.format_30x22 span::after { width:12px; }

.cover-3d.format_30x30 span { width:305px; height:304px; }
.cover-3d.format_30x30 span::before { height:13px; }
.cover-3d.format_30x30 span::after { width:13px; }

.cover-3d.format_30x40 span { width:403px; height:304px; }
.cover-3d.format_30x40 span::before { height:14px; }
.cover-3d.format_30x40 span::after { width:14px; }

.cover-3d.format_30x45 span { width:452px; height:304px; }
.cover-3d.format_30x45 span::before { height:14px; }
.cover-3d.format_30x45 span::after { width:14px; }

.cover-3d.format_35x25 span { width:255px; height:356px; }
.cover-3d.format_35x25 span::before { height:13px; }
.cover-3d.format_35x25 span::after { width:13px; }

.cover-3d.format_35x28 span { width:284px; height:356px; }
.cover-3d.format_35x28 span::before { height:13px; }
.cover-3d.format_35x28 span::after { width:13px; }

.cover-3d.format_35x35 span { width:356px; height:356px; }
.cover-3d.format_35x35 span::before { height:13px; }
.cover-3d.format_35x35 span::after { width:13px; }

.cover-3d.format_38x25 span { width:255px; height:381px; }
.cover-3d.format_38x25 span::before { height:14px; }
.cover-3d.format_38x25 span::after { width:14px; }

.cover-3d.format_40x30 span { width:305px; height:404px; }
.cover-3d.format_40x30 span::before { height:15px; }
.cover-3d.format_40x30 span::after { width:15px; }

.cover-3d.format_40x40 span { width:406px; height:404px; }
.cover-3d.format_40x40 span::before { height:15px; }
.cover-3d.format_40x40 span::after { width:15px; }

.cover-3d.format_40x50 span { width:506px; height:404px; }
.cover-3d.format_40x50 span::before { height:16px; }
.cover-3d.format_40x50 span::after { width:16px; }

.cover-3d.format_50x40 span { width:406px; height:504px; }
.cover-3d.format_50x40 span::before { height:16px; }
.cover-3d.format_50x40 span::after { width:16px; }










/* --   MOTYW KOLORYSTYCZNY NA JASNYM TLE   -- */

/* --   FRONT   -- */

.light .format .cover-3d span {
    background: #ddd;
    background: -moz-linear-gradient(-45deg, #ddd 0%, #b9b9b9 100%);
    background: -webkit-linear-gradient(-45deg, #ddd 0%, #b9b9b9 100%);
    background: linear-gradient(135deg, #ddd 0%, #b9b9b9 100%);
}

/* --   GRZBIET NA FRONCIE   -- */

.light .format .cover-3d::before {
    background: rgba(0, 0, 0, .075);
    border-right: 1px solid rgba(255, 255, 255, .5);
}

.light .format .cover-3d span::before { background: #eee; }              /* --   GÓRA   -- */
.light .format .cover-3d span::after { background: #a6a6a6; }            /* --   GRZBIET   -- */

.light .formats-icons .format .f-title {
    color: #444;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .5);
}

.light .formats-icons .format:hover .f-title {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0);
}

.light .formats-icons .format:hover { filter: brightness(1.05); }










/* --   MOTYW ZIELONY   -- */

/* --   FRONT   -- */

.light .format .cover-3d span {
    background: #03b894;
    background: -moz-linear-gradient(-45deg, #ddd 0%, #b9b9b9 100%);
    background: -webkit-linear-gradient(-45deg, #ddd 0%, #b9b9b9 100%);
    background: linear-gradient(135deg, #ddd 0%, #b9b9b9 100%);
}

/* --   GRZBIET NA FRONCIE   -- */

.light .format .cover-3d::before {
    background: rgba(0, 0, 0, .075);
    border-right: 1px solid rgba(255, 255, 255, .5);
}

.light .format .cover-3d span::before { background: #eee; }              /* --   GÓRA   -- */
.light .format .cover-3d span::after { background: #a6a6a6; }            /* --   GRZBIET   -- */

.light .formats-icons .format .f-title {
    color: #444;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .5);
}

.light .formats-icons .format:hover .f-title {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0);
}

.light .formats-icons .format:hover { filter: brightness(1.05); }/*
 *   IKONKI PRODUKTÓW
 *   -------------------
 */

.product-icon {
    width: 320px;
    height: 320px;
    cursor: pointer;
    color: #666;
    transition: all .3s ease-out;
    margin: 0 0 40px 0;
}

.product-icon.removing { opacity: .5; }
.product-icon.hide {
    transform: scale(.9);
    opacity: 0;
}

.product-icon::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    background: linear-gradient(0deg, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 100%);
    opacity: 0;
    transform: scale(.9);
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
    pointer-events: none;
    z-index: 1;
}

.product-icon .info {
    position: absolute;
    left: 0;
    bottom: 80px;
 /* top: calc(100% - 80px); */
    width: 100%;
    line-height: 24px;
    z-index: 3;
    text-align: center;
    pointer-events: none;
    transition: all .2s ease-out;
    padding: 0 16px;
}

.product-icon .label {
    width: 100%;
    font-size: 12pt;
    font-family: titillium_websemibold;
    text-transform: uppercase;
}

.product-icon .label b { float: none; }
.product-icon .parameters {
    width: 100%;
    font-size: 10pt;
    font-family: titillium_weblight;
}

.product-icon .amount {
    width: 100%;
    font-size: 11pt;
    font-family: titillium_websemibold;
    margin: 8px 0 0 0;
}

.product-icon .parameters span { width: 100%; }
.product-icon.promo { color: #00a820; }
.product-icon .promo-tag {
    position: absolute;
    left: 50%;
    top: 16px;
    width: auto;
    height: 28px;
    line-height: 28px;
    color: #fff;
    transform: translate(-50%, 0);
    font-size: 12pt;
    font-family: titillium_webbold;
    text-transform: uppercase;
    background: #00a820;
    padding: 0 12px;
    border-radius: 3px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    z-index: 4;
    white-space: nowrap;
}





/* --   IKONKI Z OPCJAMI PRESETÓW   -- */

.product-icon .preset-options {
    position: absolute;
    width: 48px;
    height: 96px;
    top: 16px;
    right: 16px;
    transition: all .2s ease-out;
 /* opacity: 0; */
    z-index: 2;
}

/* .product-icon:hover .preset-options {
    opacity: 1;
} */

.product-icon .delete-preset,
.product-icon .preset-settings {
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.product-icon svg {
    width: 20px;
    height: 20px;
    color: #666;
    stroke-width: 2px;
 /* opacity: .5; */
}

.product-icon .delete-preset:hover svg {
    transform: scale(1.2);
    opacity: 1;
    color: #f00;
}

.product-icon .preset-settings:hover svg {
    transform: scale(1.2);
    opacity: 1;
    color: #444;
}










/* --   OBIEKTY 3D W CSS   -- */

.css-3d-model {
    width: 100%;
    height: 100%;
    perspective: 800px;
    z-index: 2;
    transition: all .2s ease-out;
    pointer-events: none;
}

.css-3d-model.hide {
    transform: scale(.9);
}










/* --   WYDRUKI   -- */

.thumb.v2.selected .product-icon.prints-icon .css-3d-model { transform: scale(1) !important; }
.product-icon.prints-icon {
    left: 50% !important;
    transform: scale(.5) translate(-50%, -80px) !important;
    transform-origin: center center;
    pointer-events: none;
}

.model.prints {
    transform: translate(-50%, -50%) scale3d(.3, .3, .3);
    transform-origin: center center;
}

.model.prints .front {
    width: 100%;
    height: 100%;
    transition: all .6s cubic-bezier(.39, .58, .57, 1);
}











/* --   PASSE-PARTOUT   -- */

.thumb.v2.selected .product-icon.passepartout-icon .css-3d-model {
    transform: scale(1) !important;
}

.product-icon.passepartout-icon {
    left: 50% !important;
    transform: scale(1) !important;
    pointer-events: none;
}

.model.passepartout {
    transform: translate(-50%, -50%) scale3d(.3, .3, .3);
    transform-origin: center center;
}

.model.passepartout .passe {
    width: 100%;
    height: 100%;
 /* transform: rotateY(-20deg); */
    transition: all .6s cubic-bezier(.39, .58, .57, 1);
}

.model.passepartout .passe .ff .inside-format {
    background: #eee;
}










/* --   ALBUMY   -- */

.album {
    transform-style: preserve-3d;
    backface-visibility: visible;
    width: auto;
    height: auto;
    left: 50%;
    bottom: 128px;
    position: absolute;
    transform-origin: bottom center;
    transition: all .3s cubic-bezier(.785, .135, .15, .86), border .15s cubic-bezier(.785, .135, .15, .86);
    border: 4px solid rgba(0, 0, 0, 0);
    border-radius: 0 12px 12px 0;
}

.album.first  { transform: translate(-53%, -15px) rotateX(-20deg) rotateY(30deg) scale3d(.25, .25, .25); z-index:10; }
.album.second { transform: translate(-48%, -5px) rotateX(-20deg) rotateY(30deg) scale3d(.25, .25, .25); z-index:11; }
.album.third  { transform: translate(-42%, 10px) rotateX(-20deg) rotateY(30deg) scale3d(.25, .25, .25); z-index:12; }





/* .package .css-3d-model {
    perspective: none;
    z-index: 300;
}

.package .album.first  { left: 0; transform: translate(0, 0) rotateX(-20deg) rotateY(30deg) scale3d(.25, .25, .25); z-index:10; }
.package .album.second { left: 0; transform: translate(0, 0) rotateX(-20deg) rotateY(30deg) scale3d(.25, .25, .25); z-index:11; }
.package .album.third  { left: 0; transform: translate(0, 0) rotateX(-20deg) rotateY(30deg) scale3d(.25, .25, .25); z-index:12; } */





/* --   PODŚWIETLONA IKONKI FORMATÓW I ZESTAWÓW   -- */

.thumb.format.selected .album { transition: all .3s cubic-bezier(.785, .135, .15, .86); }
.thumb.format.selected .album.second { transform: translate(-50%, 0) rotateX(-8deg) rotateY(0) scale3d(.25, .25, .25); }
.thumb.package.selected .album.first  { transform: translate(-53%, -15px) rotateX(-20deg) rotateY(10deg) scale3d(.225, .225, .225); }
.thumb.package.selected .album.second { transform: translate(-48%, -5px) rotateX(-20deg) rotateY(10deg) scale3d(.225, .225, .225); }
.thumb.package.selected .album.third  { transform: translate(-42%, 10px) rotateX(-20deg) rotateY(10deg) scale3d(.225, .225, .225); }






/* --   CIEŃ   -- */

.album .shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0);
    transform-origin: 100% 100%;
    transform: rotateX(90deg);
    z-index: 4;
    box-shadow: 0 0 64px 1px rgba(0, 0, 0, .4);
}

/* --   FRONT   -- */

.album .front {
    z-index: 7;
    background: #eee;
    background: linear-gradient(45deg, #eee 0%, #ddd 100%);
    backface-visibility: visible;
    transform-style: preserve-3d;
    border-radius: 0 12px 12px 0;
}

/* --   GRZBIET NA FRONCIE   -- */

.album .front-spine {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 100%;
    background: rgba(0, 0, 0, .025);
    z-index: 8;
}

/* --   GÓRA   -- */

.album .top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    background: #f1f1f1;
    transform-origin: 0 0;
    transform: rotateX(90deg) translateY(-100%) translateZ(-10px);
    z-index: 6;
}

/* --   GRZBIET   -- */

.album .spine {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background: #bbb;
    transform-origin: 0 0;
    transform: rotateY(-90deg) translateX(-100%);
    z-index: 10;
    backface-visibility: visible;
}

/* --   TYŁ   -- */

.album .back {
    position: absolute;
    left: 0;
    top: 0;
    background: #c5c5c5;
    transform-origin: 0 0;
    transform: translateZ(-40px);
    z-index: 10;
    backface-visibility: visible;
    border-radius: 0 12px 12px 0;
}





/* --   FORMATY ALBUMÓW   -- */

._10x10 .f { width: 105px; height: 103px; }
._10x10 .spine { width: 20px; }
._10x10 .back { transform: translateZ(-20px); }
._10x10 .top { height: 20px; }
._10x10 .front-spine { width: 10px; }
._10x10 .shadow { height: 20px; }

._10x15 .f { width: 155px; height: 103px; }
._10x15 .spine { width: 20px; }
._10x15 .back { transform: translateZ(-20px); }
._10x15 .top { height: 20px; }
._10x15 .front-spine { width: 10px; }
._10x15 .shadow { height: 20px; }

._13x19 .f { width: 194px; height: 132px; }
._13x19 .spine { width: 22px; }
._13x19 .back { transform: translateZ(-22px); }
._13x19 .top { height: 22px; }
._13x19 .front-spine { width: 12px; }
._13x19 .shadow { height: 22px; }

._15x10 .f { width: 114px; height: 152px; }
._15x10 .spine { width: 22px; }
._15x10 .back { transform: translateZ(-22px); }
._15x10 .top { height: 22px; }
._15x10 .front-spine { width: 12px; }
._15x10 .shadow { height: 22px; }

._15x15 .f { width: 155px; height: 153px; }
._15x15 .spine { width: 22px; }
._15x15 .back { transform: translateZ(-22px); }
._15x15 .top { height: 22px; }
._15x15 .front-spine { width: 12px; }
._15x15 .shadow { height: 22px; }

._15x20 .f { width: 205px; height: 153px; }
._15x20 .spine { width: 22px; }
._15x20 .back { transform: translateZ(-22px); }
._15x20 .top { height: 22px; }
._15x20 .front-spine { width: 12px; }
._15x20 .shadow { height: 22px; }

._15x23 .f { width: 234px; height: 153px; }
._15x23 .spine { width: 22px; }
._15x23 .back { transform: translateZ(-22px); }
._15x23 .top { height: 22px; }
._15x23 .front-spine { width: 12px; }
._15x23 .shadow { height: 22px; }

._20x15 .f { width: 145px; height: 203px; }
._20x15 .spine { width: 22px; }
._20x15 .back { transform: translateZ(-22px); }
._20x15 .top { height: 22px; }
._20x15 .front-spine { width: 12px; }
._20x15 .shadow { height: 22px; }

._20x20 .f { width: 205px; height: 203px; }
._23x23 .f { width: 235px; height: 235px; }
._20x30 .f { width: 305px; height: 203px; }
._25x25 .f { width: 245px; height: 255px; }
._25x35 .f { width: 356px; height: 255px; }
._25x38 .f { width: 381px; height: 255px; }
._28x35 .f { width: 352px; height: 281px; }
._30x22 .f { width: 230px; height: 304px; }
._30x30 .f { width: 305px; height: 304px; }
._30x40 .f { width: 403px; height: 304px; }
._30x45 .f { width: 452px; height: 304px; }
._35x25 .f { width: 255px; height: 356px; }
._35x28 .f { width: 284px; height: 356px; }
._35x35 .f { width: 356px; height: 356px; }
._38x25 .f { width: 255px; height: 381px; }
._40x30 .f { width: 305px; height: 404px; }
._40x40 .f { width: 406px; height: 404px; }
._40x50 .f { width: 506px; height: 404px; }
._50x40 .f { width: 406px; height: 504px; }
._42x42 .f { width: 420px; height: 420px; }
._38x38 .f { width: 380px; height: 380px; }
._42x35 .f { width: 350px; height: 420px; }
._35x42 .f { width: 420px; height: 350px; }
._24x35 .f { width: 350px; height: 240px; }
._25x30 .f { width: 300px; height: 250px; }
._20x25 .f { width: 250px; height: 200px; }




















/* --   WYSOKOŚĆ PUDEŁKA   -- */

.box-height-icon {
    transform-style: preserve-3d;
    backface-visibility: visible;
    width: auto;
    height: auto;
    left: 50%;
    bottom: 128px;
    position: absolute;
    transform-origin: bottom center;
    transform: translate(-50%, 0) rotateX(-20deg) rotateY(50deg) scale3d(.25, .25, .25);
    transition: all .5s ease-out;
    z-index:11;
}

/* --   CIEŃ   -- */

/* .box-height-icon .shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #ccc;
    transform-origin: 100% 100%;
    transform: rotateX(90deg);
    z-index: 4;
    box-shadow: 0 0 64px 1px rgba(0, 0, 0, .4);
} */

/* --   FRONT   -- */

.box-height-icon .front {
    z-index: 7;
    background: #eee;
    background: linear-gradient(45deg, #eee 0%, #ddd 100%);
    backface-visibility: visible;
    transform-style: preserve-3d;
    width: 305px;
    height: 304px;
}

/* --   GÓRA   -- */

.box-height-icon .top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    background: #f1f1f1;
    transform-origin: 0 0;
    transform: rotateX(90deg) translateY(-100%);
    z-index: 6;
}

/* --   TYŁ   -- */

.box-height-icon .back {
    position: absolute;
    left: 0;
    top: 0;
    background: #bbb;
    transform-origin: 0 0;
    transform: translateZ(-60px);
    z-index: 10;
    backface-visibility: visible;
    width: 305px;
    height: 304px;
}




















/* --   PUDEŁKA NA ALBUMY   -- */

.case {
    transform-style: preserve-3d;
    backface-visibility: visible;
    width: auto;
    height: auto;
    left: 50%;
    bottom: 128px;
    position: absolute;
    transform-origin: bottom center;
    transform: translate(-50%, 0) rotateX(-20deg) rotateY(50deg) scale3d(.25, .25, .25);
    transition: all .5s ease-out;
    z-index:11;
}

.product-icon:hover .case {
    transform: translate(-50%, 0) rotateX(-20deg) rotateY(40deg) scale3d(.25, .25, .25);
}

/* --   CIEŃ   -- */

.case .shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #ccc;
    transform-origin: 100% 100%;
    transform: rotateX(90deg);
    z-index: 4;
    box-shadow: 0 0 64px 1px rgba(0, 0, 0, .4);
}

/* --   FRONT   -- */

.case .front {
    z-index: 7;
    background: #eee;
    background: linear-gradient(45deg, #eee 0%, #ddd 100%);
    backface-visibility: visible;
    transform-style: preserve-3d;
}

/* --   GÓRA   -- */

.case .top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    background: #f1f1f1;
    transform-origin: 0 0;
    transform: rotateX(90deg) translateY(-100%);
    z-index: 6;
}

/* --   TYŁ   -- */

.case .back {
    position: absolute;
    left: 0;
    top: 0;
    background: #bbb;
    transform-origin: 0 0;
    transform: translateZ(-60px);
    z-index: 10;
    backface-visibility: visible;
}



/* --   FORMATY PUDEŁEK NA ALBUMY   -- */

._10x10 .f { width: 105px; height: 103px; }
._10x15 .f { width: 155px; height: 103px; }
._13x18 .f { width: 194px; height: 132px; }
._13x19 .f { width: 194px; height: 132px; }
._15x10 .f { width: 114px; height: 152px; }
._15x15 .f { width: 155px; height: 153px; }
._15x20 .f { width: 205px; height: 153px; }
._15x22 .f { width: 234px; height: 153px; }
._15x23 .f { width: 234px; height: 153px; }
._20x15 .f { width: 145px; height: 203px; }
._20x20 .f { width: 205px; height: 203px; }
._23x23 .f { width: 235px; height: 235px; }
._20x30 .f { width: 305px; height: 203px; }
._25x25 .f { width: 245px; height: 255px; }
._25x35 .f { width: 356px; height: 255px; }
._25x38 .f { width: 381px; height: 255px; }
._28x35 .f { width: 352px; height: 281px; }
._30x22 .f { width: 230px; height: 304px; }
._30x30 .f { width: 305px; height: 304px; }
._30x40 .f { width: 403px; height: 304px; }
._30x45 .f { width: 452px; height: 304px; }
._35x25 .f { width: 255px; height: 356px; }
._35x28 .f { width: 284px; height: 356px; }
._35x35 .f { width: 356px; height: 356px; }
._38x25 .f { width: 255px; height: 381px; }
._40x30 .f { width: 305px; height: 404px; }
._40x40 .f { width: 406px; height: 404px; }
._40x50 .f { width: 506px; height: 404px; }
._50x40 .f { width: 406px; height: 504px; }










/* --   PUDEŁKO NA ZDJĘCIA   -- */

.print_box {
    transform-style: preserve-3d;
    backface-visibility: visible;
    width: auto;
    height: auto;
    left: 50%;
    top: calc(50% + 8px);
    position: absolute;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotateX(60deg) rotateZ(40deg) scale3d(.4, .4, .4);
    transition: all .5s ease-out;
    z-index: 11;
}

.height-zoom .print_box {
    transform: translate(-100%, -35%) rotateX(60deg) rotateZ(40deg) scale3d(1, 1, 1);
}

.print_box div {
    backface-visibility: visible;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.print_box .bottom {
    position: relative;
    z-index: 7;
    background: #a8c4de;
    box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    border-radius: 0 5px 5px 0;
    border: 2px solid rgba(0, 0, 0, .1);
}

.print_box .bottom::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: calc(100% - 12px);
    height: calc(100% - 24px);
    background: #f1f1f1;
}

.print_box .top {
    z-index: 8;
    background: #a8c4de;
    transition: all .3s ease-in-out;
    border-radius: 0 5px 5px 0;
    border: 2px solid rgba(0, 0, 0, .1);
}

.print_box .back {
    height: 100%;
    z-index: 8;
    background: #96b2cb;
    transform: rotateY(-90deg);
    transition: all .3s ease-in-out;
}

.print_box .right-side-outside,
.print_box .right-side-inside {
    top: auto;
    bottom: 0;
    width: calc(100% - 8px);
    z-index: 9;
    background: #fff;
    transform-origin: 0 100%;
    transform: rotateX(-90deg) translateZ(-8px);
    transition: all .3s ease-in-out;
}

.print_box .right-side-inside {
    background: #f1f1f1;
    transform: rotateX(-90deg) translateZ(-16px);
}

.print_box .left-side-outside,
.print_box .left-side-inside {
    top: auto;
    bottom: calc(100% - 16px);
    width: calc(100% - 8px);
    z-index: 9;
    background: #fff;
    transform-origin: 0 100%;
    transform: rotateX(-90deg) translateZ(-8px);
    transition: all .3s ease-in-out;
}

.print_box .left-side-inside {
    background: #fff;
    transform: rotateX(-90deg) translateZ(0);
}

.print_box .side-top {
    height: 8px;
    width: 100%;
    z-index: 9;
    background: #e9e9e9;
    transform: rotateX(-90deg);
}

.print_box .front-outside,
.print_box .front-inside {
    left: auto;
    right: 8px;
    top: 8px;
    height: calc(100% - 16px);
    z-index: 10;
    background: #f6f6f6;
    transform-origin: 100% 0;
    transform: rotateY(-90deg) translateX(100%);
    transition: all .3s ease-in-out;
}

.print_box .front-inside {
    background: #f1f1f1;
    transform: rotateY(-90deg) translateX(100%) translateZ(8px);
}

.print_box .front-top {
    left: 100%;
    height: 100%;
    width: 8px;
    z-index: 9;
    background: #e9e9e9;
    transform: rotateY(-90deg);
}



/* --   FORMATY PUDEŁEK NA ZDJĘCIA   -- */

.print_box._10x15 .f { width: 150px; height: 100px; }
.print_box._13x18 .f { width: 180px; height: 130px; }
.print_box._13x19 .f { width: 190px; height: 130px; }
.print_box._15x21 .f { width: 210px; height: 150px; }
.print_box._15x23 .f { width: 230px; height: 150px; }
.print_box._18x24 .f { width: 240px; height: 180px; }
.print_box._20x20 .f { width: 200px; height: 200px; }
.print_box._20x30 .f { width: 300px; height: 200px; }



/* --   WYSOKOŚCI PUDEŁEK NA ZDJĘCIA   -- */

.print_box._h15mm .top { transform: translateZ(15px) rotateY(-12deg); }
.print_box._h24mm .top { transform: translateZ(24px) rotateY(-12deg); }
.print_box._h30mm .top { transform: translateZ(30px) rotateY(-12deg); }
.print_box._h48mm .top { transform: translateZ(48px) rotateY(-12deg); }
.print_box._h60mm .top { transform: translateZ(60px) rotateY(-12deg); }
.print_box._h86mm .top { transform: translateZ(86px) rotateY(-12deg); }

/* --   ZAMKNIĘTE PUDEŁKO   -- */

.closed .print_box._h15mm .top { transform: translateZ(15px) rotateY(-1deg); }
.closed .print_box._h24mm .top { transform: translateZ(24px) rotateY(-1deg); }
.closed .print_box._h30mm .top { transform: translateZ(30px) rotateY(-1deg); }
.closed .print_box._h48mm .top { transform: translateZ(48px) rotateY(-1deg); }
.closed .print_box._h60mm .top { transform: translateZ(60px) rotateY(-1deg); }
.closed .print_box._h86mm .top { transform: translateZ(86px) rotateY(-1deg); }

.print_box._h15mm .w { width: 15px; }
.print_box._h24mm .w { width: 24px; }
.print_box._h30mm .w { width: 30px; }
.print_box._h48mm .w { width: 48px; }
.print_box._h60mm .w { width: 60px; }
.print_box._h86mm .w { width: 86px; }

.print_box._h15mm .h { height: 15px; }
.print_box._h24mm .h { height: 24px; }
.print_box._h30mm .h { height: 30px; }
.print_box._h48mm .h { height: 48px; }
.print_box._h60mm .h { height: 60px; }
.print_box._h86mm .h { height: 86px; }










/* --   PUDEŁKO NA PENDRIVE   -- */

.pendrive_case {
    transform-style: preserve-3d;
    backface-visibility: visible;
    width: auto;
    height: auto;
    left: 50%;
    top: calc(50% + 8px);
    position: absolute;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotateX(60deg) rotateZ(40deg) scale3d(.4, .4, .4);
    transition: all .5s ease-out;
    z-index: 11;
}

.height-zoom .pendrive_case {
    transform: translate(-100%, -35%) rotateX(60deg) rotateZ(40deg) scale3d(1, 1, 1);
}

.pendrive_case div {
    backface-visibility: visible;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.pendrive_case .bottom {
    position: relative;
    z-index: 7;
    background: #a8c4de;
    box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    border-radius: 0 5px 5px 0;
    border: 2px solid rgba(0, 0, 0, .1);
}

.pendrive_case .bottom::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: calc(100% - 12px);
    height: calc(100% - 24px);
    background: #f1f1f1;
}

.pendrive_case .top {
    z-index: 8;
    background: #a8c4de;
    transition: all .3s ease-in-out;
    border-radius: 0 5px 5px 0;
    border: 2px solid rgba(0, 0, 0, .1);
    transform: translateZ(24px) rotateY(-12deg);
}

.closed .pendrive_case .top {
    transform: translateZ(24px) rotateY(-1deg);
}

.pendrive_case .back {
    height: 100%;
    width: 24px;
    z-index: 8;
    background: #96b2cb;
    transform: rotateY(-90deg);
    transition: all .3s ease-in-out;
}

.pendrive_case .right-side-outside,
.pendrive_case .right-side-inside {
    top: auto;
    bottom: 0;
    width: calc(100% - 8px);
    height: 24px;
    z-index: 9;
    background: #fff;
    transform-origin: 0 100%;
    transform: rotateX(-90deg) translateZ(-8px);
    transition: all .3s ease-in-out;
}

.pendrive_case .right-side-inside {
    background: #f1f1f1;
    transform: rotateX(-90deg) translateZ(-16px);
}

.pendrive_case .left-side-outside,
.pendrive_case .left-side-inside {
    top: auto;
    bottom: calc(100% - 16px);
    width: calc(100% - 8px);
    height: 24px;
    z-index: 9;
    background: #fff;
    transform-origin: 0 100%;
    transform: rotateX(-90deg) translateZ(-8px);
    transition: all .3s ease-in-out;
}

.pendrive_case .left-side-inside {
    background: #fff;
    transform: rotateX(-90deg) translateZ(0);
}

.pendrive_case .side-top {
    height: 8px;
    width: 100%;
    z-index: 9;
    background: #e9e9e9;
    transform: rotateX(-90deg);
}

.pendrive_case .front-outside,
.pendrive_case .front-inside {
    left: auto;
    right: 8px;
    top: 8px;
    height: calc(100% - 16px);
    width: 24px;
    z-index: 10;
    background: #f6f6f6;
    transform-origin: 100% 0;
    transform: rotateY(-90deg) translateX(100%);
    transition: all .3s ease-in-out;
}

.pendrive_case .front-inside {
    background: #f1f1f1;
    transform: rotateY(-90deg) translateX(100%) translateZ(8px);
}

.pendrive_case .front-top {
    left: 100%;
    height: 100%;
    width: 8px;
    z-index: 9;
    background: #e9e9e9;
    transform: rotateY(-90deg);
}



/* --   FORMATY PUDEŁEK NA ZDJĘCIA   -- */

.pendrive_case._7x10 .f  { width: 70px;  height: 100px; }
.pendrive_case._14x14 .f { width: 140px; height: 140px; }
.pendrive_case._3x8 .f   { width: 30px;  height: 80px; }
.pendrive_case._5x10 .f  { width: 50px;  height: 100px; }
.pendrive_case._12x12 .f { width: 120px; height: 120px; }










/* --   ETUI NA DVD   -- */

.case_dvd {
    transform-style: preserve-3d;
    backface-visibility: visible;
    left: 50%;
    top: calc(50% + 8px);
    position: absolute;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotateX(50deg) rotateZ(50deg) scale3d(.4, .4, .4);
    transition: all .5s ease-out;
    z-index: 11;
}

.case_dvd div {
    backface-visibility: visible;
    transform-style: preserve-3d;
    position: absolute;
    transform-origin: 0 0;
}

.case_dvd .shadow {
    width: 200%;
    height: 200%;
    background: rgba(0, 0, 0, .2);
    background: -moz-radial-gradient(circle, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 60%);
    background: -webkit-radial-gradient(circle, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 60%);
    background: radial-gradient(circle, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 60%);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    z-index: 1;
    opacity: .75;
}

.case_dvd .dvd-wing {
    z-index: 1;
    width: 100%;
    height: 100%;
}

.case_dvd .bottom {
    z-index: 1;
    background: #8b8883;
    width: 100%;
    height: 100%;
}

.case_dvd .side-t {
    left: 0;
    top: 0;
    width: 100%;
    height: 8px;
    z-index: 2;
    background: #dbd8d2;
    transform-origin: 0 0;
    transform: rotateX(90deg);
}

.case_dvd .side-r {
    top: 0;
    right: 0;
    height: 100%;
    width: 8px;
    z-index: 2;
    background: #dbd8d2;
    transform-origin: 100% 0;
    transform: rotateY(90deg);
}

.case_dvd .side-b {
    width: 100%;
    height: 8px;
    left: 0;
    bottom: 0;
    z-index: 2;
    background: #e7e4dc;
    transform-origin: 0 100%;
    transform: rotateX(-90deg);
}

.case_dvd .side-l {
    height: 100%;
    width: 8px;
    left: 0;
    top: 0;
    z-index: 2;
    background: #e7e4dc;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
}

.case_dvd .top {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    background: #d0cfcd;
    transform-origin: 0 0;
    transform: translateZ(8px);
}

.case_dvd .dvd-disc {
    width: 110px;
    height: 110px;
    left: 50%;
    top: 50%;
    margin: -55px 0 0 -55px;
    z-index: 4;
    background: rgba(0, 0, 0, .1);
    border-radius: 100%;
    box-shadow: inset 2px 2px 2px 0 rgba(0, 0, 0, .1);
    transition: opacity .15s ease-out;
}

.case_dvd .dvd-disc::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    background: #989693;
    z-index: 5;
    border-radius: 100%;
    transform: translate(-50%, -50%);
}



/* --   CIEMNIEJSZE ODCIENIE SKRZYDEŁEK   -- */

.case_dvd .dark {
    filter: brightness(.95);
}

.case_dvd .darker {
    filter: brightness(.9);
}



/* --   2 SKRZYDEŁKA   -- */

.case_dvd.two-wings .dvd-wing.W1 {
    right: 50%;
    transform-origin: 100% 0;
    transform: rotateY(20deg);
}

.case_dvd.two-wings .dvd-wing.W2 {
    left: 50%;
    transform-origin: 0 0;
    transform: rotateY(-10deg);
}

.case_dvd.two-wings .dvd-wing.W3 {
    opacity: 0;
}

.case_dvd.two-wings .dvd-wing.W4 {
    opacity: 0;
}

/* --   3 SKRZYDEŁKA   -- */

.case_dvd.three-wings {
    top: calc(50% + 20px);
}

.case_dvd.three-wings .dvd-wing.W1 {
    right: 25%;
    transform-origin: 100% 0;
    transform: rotateY(0deg);
}

.case_dvd.three-wings .dvd-wing.W2 {
    left: 75%;
    transform-origin: 0 0;
    transform: rotateY(-25deg);
}

.case_dvd.three-wings .dvd-wing.W3 {
    right: 100%;
    transform-origin: 100% 0;
    transform: rotateY(90deg);
}

.case_dvd.three-wings .dvd-wing.W4 {
    opacity: 0;
}

/* --   4 SKRZYDEŁKA   -- */

.case_dvd.four-wings {
    top: calc(50% + 20px);
}

.case_dvd.four-wings .dvd-wing.W1 {
    right: 50%;
    transform-origin: 100% 0;
    transform: rotateY(0deg);
}

.case_dvd.four-wings .dvd-wing.W2 {
    left: 50%;
    transform-origin: 0 0;
    transform: rotateY(-10deg);
}

.case_dvd.four-wings .dvd-wing.W3 {
    right: 100%;
    transform-origin: 100% 0;
    transform: rotateY(50deg);
}

.case_dvd.four-wings .dvd-wing.W4 {
    left: 100%;
    transform-origin: 0 0;
    transform: rotateY(-20deg);
}



/* --   FORMATY ETUI DVD   -- */

.case_dvd._20x14 { width: 140px; height: 200px; }
.case_dvd._14x14 { width: 140px; height: 140px; }
.case_dvd._15x15 { width: 150px; height: 150px; }
.case_dvd._24x15 { width: 150px; height: 240px; }










/* --   ZDJĘCIA I WYDRUKI   -- */

/* .prints {
    transform-style: preserve-3d;
    backface-visibility: visible;
    left: 50%;
    top: 50%;
    position: absolute;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotateX(30deg) rotateZ(20deg) scale3d(.2, .2, .2);
    transition: all .5s ease-out;
    z-index: 11;
}

.prints div {
    backface-visibility: visible;
    transform-style: preserve-3d;
    position: absolute;
    transform-origin: 80% 80%;
    background-color: #fff;
    background-image: url(../../.images/prints_css_model_bg.jpg);
    background-position: 50% 50%;
    background-size: cover;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
}

.prints div::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 8px solid #fff;
}

.prints .first {
    z-index: 1;
}

.prints .second {
    z-index: 2;
    transform: rotate(15deg);
    display: none;
}

.prints .third {
    z-index: 3;
    transform: rotate(30deg);
    display: none;
} */



/* --   FORMATY WYDRUKÓW   -- */

/* .prints._9x13    { width: 130px;  height: 90px; }
.prints._10x15   { width: 150px;  height: 100px; }
.prints._13x18   { width: 180px;  height: 130px; }
.prints._15x21   { width: 210px;  height: 150px; }
.prints._18x24   { width: 240px;  height: 180px; }
.prints._20x30   { width: 300px;  height: 200px; }
.prints._24x30   { width: 300px;  height: 240px; }
.prints._25x38   { width: 380px;  height: 250px; }
.prints._30x40   { width: 400px;  height: 300px; }
.prints._30x45   { width: 450px;  height: 300px; }
.prints._40x50   { width: 500px;  height: 400px; }
.prints._40x60   { width: 600px;  height: 400px; }
.prints._50x60   { width: 600px;  height: 500px; }
.prints._50x70   { width: 700px;  height: 500px; }
.prints._50x75   { width: 750px;  height: 500px; }
.prints._60x80   { width: 800px;  height: 600px; }
.prints._60x90   { width: 900px;  height: 600px; }
.prints._70x100  { width: 1000px; height: 700px; }
.prints._76x76   { width: 760px;  height: 760px; }
.prints._76x115  { width: 1150px; height: 760px; }
.prints._80x120  { width: 1200px; height: 800px; }
.prints._100x150 { width: 1500px; height: 1000px; } */










/* --   CANVAS   -- */

.canvas {
    transform-style: preserve-3d;
    backface-visibility: visible;
    left: 50%;
    top: 50%;
    position: absolute;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotateX(-30deg) rotateY(40deg) rotateZ(0deg) scale3d(.15, .15, .15);
    transition: all .5s ease-out;
    z-index: 11;
}

.canvas div {
    backface-visibility: visible;
    transform-style: preserve-3d;
    position: absolute;
    transform-origin: 0 0;
}

.canvas .bottom {
    z-index: 1;
    background: #8b8883;
    width: 100%;
    height: 100%;
}

.canvas .side-t {
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    background: #dbd8d2;
    transform-origin: 0 0;
    transform: rotateX(90deg);
}

.canvas .side-r {
    top: 0;
    right: 0;
    height: 100%;
    z-index: 2;
    background: #dbd8d2;
    transform-origin: 100% 0;
    transform: rotateY(90deg);
}

.canvas .side-b {
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 2;
    background: #e7e4dc;
    transform-origin: 0 100%;
    transform: rotateX(-90deg);
    box-shadow: 0 0 16px rgba(0, 0, 0, .2);
}

.canvas .side-l {
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: #e7e4dc;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
}

.canvas .top {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    background: #d0cfcd;
    transform-origin: 0 0;
}



/* --   FORMATY CANVAS   -- */

.canvas._20x20  { width: 200px;  height: 200px; }
.canvas._20x30  { width: 300px;  height: 200px; }
.canvas._24x30  { width: 300px;  height: 240px; }
.canvas._30x30  { width: 300px;  height: 300px; }
.canvas._30x40  { width: 400px;  height: 300px; }
.canvas._40x40  { width: 400px;  height: 400px; }
.canvas._40x50  { width: 500px;  height: 400px; }
.canvas._40x60  { width: 600px;  height: 400px; }
.canvas._50x50  { width: 500px;  height: 500px; }
.canvas._50x60  { width: 600px;  height: 500px; }
.canvas._50x70  { width: 700px;  height: 500px; }
.canvas._60x60  { width: 600px;  height: 600px; }
.canvas._60x80  { width: 800px;  height: 600px; }
.canvas._60x90  { width: 900px;  height: 600px; }
.canvas._70x70  { width: 700px;  height: 700px; }
.canvas._70x70  { width: 700px;  height: 700px; }
.canvas._70x100 { width: 1000px; height: 700px; }

/* --   GRUBOŚCI BLEJTRAMU   -- */

.canvas._h2cm .side-t { height: 32px; }
.canvas._h2cm .side-r { width: 32px; }
.canvas._h2cm .side-b { height: 32px; }
.canvas._h2cm .side-l { width: 32px; }
.canvas._h2cm .top    { transform: translateZ(32px); }

.canvas._h4cm .side-t { height: 64px; }
.canvas._h4cm .side-r { width: 64px; }
.canvas._h4cm .side-b { height: 64px; }
.canvas._h4cm .side-l { width: 64px; }
.canvas._h4cm .top    { transform: translateZ(64px); }










/* --   WALLART   -- */

.wallart {
    transform-style: preserve-3d;
    backface-visibility: visible;
    left: 50%;
    top: 50%;
    position: absolute;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotateX(-30deg) rotateY(40deg) rotateZ(0deg) scale3d(.15, .15, .15);
    transition: all .5s ease-out;
    z-index: 11;
}

.wallart div {
    backface-visibility: visible;
    transform-style: preserve-3d;
    position: absolute;
    transform-origin: 0 0;
}

.wallart .bottom {
    z-index: 1;
    background: #fff;
    width: 100%;
    height: 100%;
}

.wallart .side-t {
    left: 0;
    top: 0;
    width: 100%;
    height: 32px;
    z-index: 2;
    transform: rotateX(90deg);
}

.wallart .side-r {
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    z-index: 2;
    transform-origin: 100% 0;
    transform: rotateY(90deg);
}

.wallart .side-b {
    width: 100%;
    height: 32px;
    left: 0;
    bottom: 0;
    z-index: 2;
    transform-origin: 0 100%;
    transform: rotateX(-90deg);
    box-shadow: 0 0 16px rgba(0, 0, 0, .2);
}

.wallart .side-l {
    width: 32px;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    transform: rotateY(-90deg);
}

.wallart .top {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    transform: translateZ(32px);
}



/* --   FORMATY WALLART   -- */

.wallart._10x10  { width: 100px;  height: 100px; }
.wallart._15x15  { width: 150px;  height: 150px; }
.wallart._15x21  { width: 210px;  height: 150px; }
.wallart._20x20  { width: 200px;  height: 200px; }
.wallart._20x30  { width: 300px;  height: 200px; }
.wallart._30x30  { width: 300px;  height: 300px; }
.wallart._30x40  { width: 400px;  height: 300px; }
.wallart._30x42  { width: 420px;  height: 300px; }
.wallart._30x62  { width: 620px;  height: 300px; }
.wallart._40x50  { width: 500px;  height: 400px; }
.wallart._50x70  { width: 700px;  height: 500px; }
.wallart._60x90  { width: 900px;  height: 600px; }
.wallart._70x100 { width: 1000px; height: 700px; }



/* --   MODUŁY   -- */

/* --   MODUŁ A   -- */

.wallart._modul-A {
    width: 660px;
    height: 530px;
}

.wallart._modul-A .module-1 {
    width: 660px;
    height: 300px;
}

.wallart._modul-A .module-2 {
    left: 0;
    top: 330px;
    width: 200px;
    height: 200px;
}

.wallart._modul-A .module-3 {
    left: 230px;
    top: 330px;
    width: 200px;
    height: 200px;
}

.wallart._modul-A .module-4 {
    left: 460px;
    top: 330px;
    width: 200px;
    height: 200px;
}

/* --   MODUŁ B   -- */

.wallart._modul-B {
    width: 630px;
    height: 620px;
}

.wallart._modul-B .module-1 {
    width: 630px;
    height: 300px;
}

.wallart._modul-B .module-2 {
    left: 0;
    top: 330px;
    width: 300px;
    height: 300px;
}

.wallart._modul-B .module-3 {
    left: 330px;
    top: 330px;
    width: 300px;
    height: 300px;
}

/* --   MODUŁ C   -- */

.wallart._modul-C {
    width: 730px;
    height: 630px;
}

.wallart._modul-C .module-1 {
    width: 400px;
    height: 300px;
}

.wallart._modul-C .module-2 {
    left: 430px;
    top: 0;
    width: 300px;
    height: 300px;
}

.wallart._modul-C .module-3 {
    left: 0;
    top: 330px;
    width: 300px;
    height: 300px;
}

.wallart._modul-C .module-4 {
    left: 330px;
    top: 330px;
    width: 400px;
    height: 300px;
}

/* --   MODUŁ D   -- */

.wallart._modul-D {
    width: 950px;
    height: 630px;
}

.wallart._modul-D .module-1 {
    width: 620px;
    height: 300px;
}

.wallart._modul-D .module-2 {
    left: 650px;
    top: 0;
    width: 300px;
    height: 300px;
}

.wallart._modul-D .module-3 {
    left: 0;
    top: 330px;
    width: 300px;
    height: 300px;
}

.wallart._modul-D .module-4 {
    left: 330px;
    top: 330px;
    width: 620px;
    height: 300px;
}



/* --   KOLORY BOKU   -- */

.wallart.white .side-t { background: #eee; }
.wallart.white .side-r {  }
.wallart.white .side-b {  }
.wallart.white .side-l { background: #fff; }
.wallart.white .top    { background: #e1e1e1; }

.wallart.black .bottom { background: #444; }
.wallart.black .side-t { background: #444; }
.wallart.black .side-r {  }
.wallart.black .side-b {  }
.wallart.black .side-l { background: #555; }
.wallart.black .top    { background: #bbb; }
/* --   POJEMNIK FIXED NA BŁĘDY FTPA   -- */

.ftp-error {
    position: fixed;
    left: 32px;
    bottom: 32px;
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    background: #fe4d62;
    color: #fff;
    border-radius: 4px;
    opacity: 0;
}

.ftp-error b { float: none; }










/* --   PLACEHOLDERY   -- */

/* ::-webkit-input-placeholder { color: #bbb; }
     :-ms-input-placeholder { color: #bbb; }
         ::-moz-placeholder { color: #bbb; }
          :-moz-placeholder { color: #bbb; } */










/* --   POLA TEXTAREA   -- */

#new_container textarea.new {
    padding: 8px;
    font-family: titillium_webregular;
    font-size: 10pt;
    color: #666;
    border: 1px solid #ddd;
    margin: 16px 24px;
    width: calc(100% - 48px);
}

#new_container textarea.new.small {
    height: 70px;
}

#new_container textarea.new.medium {
    height: 90px;
}

#new_container textarea.new.no_top_space {
    margin: 0 5px 10px 5px;
}










/* --   NOWY FORMULARZ KAFELKOWY   -- */

#new_container {
    width: 100%;
    transition: all .6s cubic-bezier(.165, .84, .44, 1);
}

#order_form {
    width: 100%;
    pointer-events: all;
    opacity: 1;
    transform: translate(0, 0);
}

#mobile-unavailable-info {
    width: 100%;
    height: 200px;
    font-size: 12pt;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 16px;
    color: #666;
    display: none;
}

#mobile-unavailable-info svg {
    color: #aaa;
    width: 40px;
    height: 40px;
    margin: 0 0 24px 0;
}

@media only screen and (max-width: 800px)
{
    #new_container {
        display: none;
    }

    #mobile-unavailable-info {
        display: flex;
    }
}










/* --   KONTENER GÓRNY Z TYTUŁEM H1 FORMULARZA   -- */

#top_container {
    width: calc(100% + 32px);
    height: 104px;
    z-index: 11;
    left: -16px;
    transition: all .25s cubic-bezier(.165, .84, .44, 1);
}

#top_container h1 {
    width: 100%;
    font-size: 16pt;
    height: 56px;
    line-height: 56px;
    color: #666;
    font-weight: 100;
    font-family: titillium_webbold;
    z-index: 2;
    padding: 24px 0 24px 0;
    text-transform: uppercase;
    text-align: center;
    box-sizing: content-box;
}

#top_container h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    float: left;
    height: 1px;
    width: 100%;
    left: 0;
    background: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}





#new_container h1 {
    width: 100%;
    font-size: 16pt;
    height: 56px;
    line-height: 56px;
    color: #666;
    font-weight: 100;
    font-family: titillium_webbold;
    z-index: 2;
 /* padding: 24px 0 24px 0; */
    text-transform: uppercase;
    text-align: center;
    box-sizing: content-box;
}

#new_container h2 {
    width: 100%;
    font-size: 17pt;
    /* height: 48px;
    line-height: 48px; */
    color: #666;
    font-weight: 100;
    font-family: titillium_webbold;
    z-index: 2;
    margin: 16px 0 0 0;
    padding: 16px 0 24px 0;
    text-transform: uppercase;
    text-align: center;
    display: none;
}










/* --   KROK WSTECZ   -- */

#new_step_back,
#step_back {
    margin: 0 80px 0 0;
    height: 30px;
    line-height: 30px;
    padding: 0 16px;
    cursor: pointer;
    background: #;
    color: #fff;
    font-size: 9pt;
    transition: all .1s ease-in-out;
 /* transition: all .1s ease-in-out .5s; */
    text-transform: uppercase;
}

#new_step_back.hide,
#step_back.hide {
    opacity: 0 !important;
    pointer-events: none !important;
}

#new_step_back span,
#step_back span {
    color: rgba(255, 255, 255, 0);
    background-color: #;
    width: 16px;
    height: 16px;
    position: absolute;
    left: -7px;
    top: 7px;
    transform: rotate(45deg);
    transition: all .1s ease-in-out;
 /* transition: all .1s ease-in-out .5s; */
}

#new_step_back:hover,
#step_back:hover {
    background-color: #;
    transition: all .1s ease-in-out;
}

#new_step_back:hover span,
#step_back:hover span {
    background-color: #;
    transition: all .1s ease-in-out;
}





/* --   KROK W PRZÓD   -- */

#new_next_step,
#next_step {
    height: 30px;
    line-height: 30px;
    padding: 0 16px;
    cursor: pointer;
    background: #;
    color: #fff;
    font-size: 9pt;
 /* transition: all .1s ease-in-out .5s; */
    transition: all .1s ease-in-out;
    text-transform: uppercase;
    margin: 0 0 0 80px;
}

#new_next_step.hide,
#next_step.hide {
    opacity: 0 !important;
    pointer-events: none !important;
}

#new_next_step span,
#next_step span {
    color: rgba(255, 255, 255, 0);
    background-color: #;
    width: 16px;
    height: 16px;
    position: absolute;
    right: -7px;
    top: 7px;
    transform: rotate(45deg);
    transition: all .1s ease-in-out;
}

#new_next_step:hover,
#next_step:hover {
    filter: brightness(.9);
    transition: all .1s ease-in-out;
}

#new_next_step:hover span,
#next_step:hover span {
    transition: all .1s ease-in-out;
}










/* --   KROKI FORMULARZA   -- */

#product_steps_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    line-height: 80px;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(0, -100%);
    background: -moz-linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(235, 235, 235, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(235, 235, 235, 1) 100%);
    background: linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(235, 235, 235, 1) 100%);
    transition: all .3s cubic-bezier(.165, .84, .44, 1);
}

#product_steps_container::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
    left: 0;
    background: rgba(0, 0, 0, .1);
    z-index: 10;
}

#product_steps_container ul,
#product_steps {
    display: inline-block;
    list-style: none;
    height: 80px;
    z-index: 11;
}

#product_steps_container ul li,
#product_steps li {
    height: 80px;
    line-height: 80px;
    text-align: center;
}

#product_steps_container ul li.step,
#product_steps li.step {
    text-transform: uppercase;
    color: #999;
    font-size: 10pt;
    padding: 0 24px;
    cursor: pointer;
}

#product_steps_container ul li b,
#product_steps li b {
    font-weight: 100;
    font-family: titillium_webregular;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    line-height: 78px;
}

#product_steps_container ul li.step.disabled,
#product_steps li.step.disabled {
    opacity: 0.2 !important;
}

#product_steps_container ul li.arrow,
#product_steps li.arrow {
    width: 30px;
    color: #aaa;
    cursor: default;
}

#product_steps_container ul li.arrow svg,
#product_steps li.arrow svg {
    width: 14px;
    height: 14px;
    color: #000;
    stroke-width: 1px;
    opacity: .75;
}

#product_steps_container ul li.step:hover,
#product_steps li.step:hover {
    color: #222;
}

#product_steps_container ul li.step.active,
#product_steps li.step.active {
    pointer-events: none;
}

#product_steps_container ul li.step.active b,
#product_steps li.step.active b {
    pointer-events: none;
    opacity: 0;
    transform: translate(0, -8px);
    line-height: 64px;
}

#product_steps_container ul li.step::after,
#product_steps li.step::after {
    content: attr(data-hover);
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    color: #;
    z-index: 12;
    pointer-events: none;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    font-family: titillium_websemibold;
    font-size: 12pt;
    line-height: 78px;
    text-align: center;
    opacity: 0;
    transform: translate(0, 16px);
}

#product_steps_container ul li.step.active::after,
#product_steps li.step.active::after {
    opacity: 1;
    transform: translate(0, 0);
}

#product_steps_container ul li.summary_step.step.active::after,
#product_steps li.summary_step.step.active::after {
    color: #0b9a00;
}

#product_steps_container ul li.highlight,
#product_steps li.highlight {
    opacity: 0;
}





/* --   NOWE KROKI   -- */

#product_steps_container ul.new li.step,
#product_steps.new li.step {
    padding: 0 32px;
}

#product_steps_container ul.new li:last-child::before,
#product_steps.new li:last-child::before {
    display:none;
}

#product_steps_container ul.new li::before,
#product_steps.new li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    height: 5px;
    width: 5px;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
    box-sizing: border-box;
    transform: translate(2px, -3px) rotate(45deg);
}

#product_substeps {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 80px;
    line-height: 80px;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    background: -moz-linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(235, 235, 235, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(235, 235, 235, 1) 100%);
    background: linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(235, 235, 235, 1) 100%);
    transition: all .3s cubic-bezier(.165, .84, .44, 1);
}












/* --   ANIMOWANE PODŚWIETLENIE LATAJĄCE ZA KLASĄ ".ACTIVE"   -- */

.highlight::after { content: none; }
.highlight {
    position: absolute;
    left: 0;
    top: 100%;
    width: 0;
    height: 1px !important;
    z-index: 200 !important;
    pointer-events: none;
    opacity: 0;
    transition: all .4s cubic-bezier(.785, .135, .15, .86)/* , opacity .4s cubic-bezier(.785, .135, .15, .86) .4s */;
}

.highlight.hide {
    opacity: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.highlight b {
    position: absolute;
    left: 50%;
    height: 1px;
    transform: translate(-50%, 0);
    background: #;
    background: -moz-linear-gradient(90deg, #00 0%, #ff 50%, #00 100%);
    background: -webkit-linear-gradient(90deg, #00 0%, #ff 50%, #00 100%);
    background: linear-gradient(90deg, #00 0%, #ff 50%, #00 100%);
    z-index: 12;
    opacity: 1;
    transition: all .5s cubic-bezier(.785, .135, .15, .86);
}

.highlight.summary_step b {
    background: #0b9a00;
    background: -moz-linear-gradient(90deg, #0b9a0000 0%, #0b9a00ff 50%, #0b9a0000 100%);
    background: -webkit-linear-gradient(90deg, #0b9a0000 0%, #0b9a00ff 50%, #0b9a0000 100%);
    background: linear-gradient(90deg, #0b9a0000 0%, #0b9a00ff 50%, #0b9a0000 100%);
}

.step_summary .highlight b {
    background: #aaaaaa;
    background: -moz-linear-gradient(90deg, #aaaaaa00 0%, #aaaaaaff 50%, #aaaaaa00 100%);
    background: -webkit-linear-gradient(90deg, #aaaaaa00 0%, #aaaaaaff 50%, #aaaaaa00 100%);
    background: linear-gradient(90deg, #aaaaaa00 0%, #aaaaaaff 50%, #aaaaaa00 100%);
}

.highlight b:nth-child(1) { top: -1px; width: 200%; }
.highlight b:nth-child(2) { top: 0; width: 125%; }
.highlight b:nth-child(3) { display: none; }

.highlight.dark b {
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}

.highlight.dark b:nth-child(1) { top: -1px; width: 200%; opacity: .5; }
.highlight.dark b:nth-child(2) { top: 0; width: 100%; opacity: .25; }
.highlight.dark b:nth-child(3) { top: 1px; width: 100%; display: none; }
.highlight.bg {
    height: 100% !important;
    top: 0 !important;
    opacity: .5 !important;
}

.highlight.bg b {
    height: 88px;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}










/* --   POJEMNIK NA FORMULARZ   -- */

#form_container {
    width: 100%;
    min-height: 800px;
    margin: 32px 0 0 0;
}

/* --   WYŁĄCZENIE ANIMACJI WSZYSTKIM ELEMENTOM W FORMULARZU   -- */

/* #form_container.animations-off * {
    transition: none !important;
} */





/* --   KONTENER NA KROKI FORMULARZA   -- */

.step_container {
    position: absolute;
    width: 100%;
    min-height: 600px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
}

.step_container section {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

#step1_container { left: 0; }
#step2_container { left: 100%; }
#step3_container { left: 200%; }
#step4_container { left: 300%; }
#step5_container { left: 400%; }
#step6_container { left: 500%; }
#step7_container { left: 600%; }
#step8_container { left: 700%; }





/* --   KONTENER Z KROKAMI FORMULARZA PRZESUWANY NA BOKI   -- */

#all_steps {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 600px;
    height: 100%;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    z-index: 9;
}

#all_steps.step-1 { transform: translate(0, 0); }
#all_steps.step-2 { transform: translate(-100%, 0); }
#all_steps.step-3 { transform: translate(-200%, 0); }
#all_steps.step-4 { transform: translate(-300%, 0); }
#all_steps.step-5 { transform: translate(-400%, 0); }
#all_steps.step-6 { transform: translate(-500%, 0); }
#all_steps.step-7 { transform: translate(-600%, 0); }
#all_steps.step-8 { transform: translate(-700%, 0); }










/* --   ZACZEPIONE U GÓRY PRZYCISKI KROK W PRZÓD, WSTECZ, PODSUMOWANIE, DODAJ DO KOSZYKA I ZAPISZ ZMIANY W PRODUKCIE   -- */

.sticky {
    position: sticky;
    top: 184px;
    transition: all .25s cubic-bezier(.785, .135, .15, .86);
}

.step-back-container {
    position: absolute;
    right: calc(100% + 32px);
    top: 0;
    height: 100%;
}

.next-step-container {
    position: absolute;
    left: calc(100% + 32px);
    top: 0;
    height: 100%;
}

.next-step-container .to-cart,
.next-step-container .save-product-parameters,
.next-step-container .goto-step-product-summary,
.step-back-v2,
.next-step-v2,
.step-back,
.next-step {
    position: sticky;
    top: 232px;
    width: 72px;
    height: 72px;
    text-align: center;
    z-index: 65;
    cursor: pointer;
    background: #fff;
    color: #666;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-back.help-page {
    top: 0 !important;
    width: 48px;
    height: 48px;
    margin: 0 0 40px 0;
}

.step-back-v2.disabled,
.next-step-v2.disabled {
    filter: none !important;
    opacity: 1 !important;
    background: #f1f1f1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    color: #ccc;
}

.next-step-container .goto-step-product-summary::before { display: none; }
.next-step-container .to-cart {
    background: #00a820;
    color: #fff;
}

.next-step-container .to-cart:hover,
.next-step-container .goto-step-product-summary:hover {
    filter: brightness(1.05);
}

body.sticky-scroll .sticky,
body.sticky-scroll .step-back-v2,
body.sticky-scroll .next-step-v2,
body.sticky-scroll .goto-step-product-summary,
body.sticky-scroll .step-back,
body.sticky-scroll .next-step {
    top: 240px;
}

.step-back-v2:hover,
.next-step-v2:hover,
.step-back:hover,
.next-step:hover {
    color: #;
}

.step-back-v2 svg,
.next-step-v2 svg,
.step-back svg,
.next-step svg {
    width: 24px;
    height: 24px;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    pointer-events: none;
}

.next-step-container .to-cart svg,
.next-step-container .goto-step-product-summary svg {
    width: 24px;
    height: 24px;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    pointer-events: none;
}

.next-step-container .to-cart:hover svg,
.next-step-container .goto-step-product-summary:hover svg {
    transform: scale(1.2);
}

.step-back-v2:hover svg,
.step-back:hover svg {
    animation-timing-function: ease-in-out;
    animation-name: shake_arrow_left;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.next-step-v2:hover svg,
.next-step:hover svg {
    animation-timing-function: ease-in-out;
    animation-name: shake_arrow_right;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@keyframes shake_arrow_right {
    0% { transform: translateX(0); }
    6.5% { transform: translateX(6px) rotateY(-9deg); }
    18.5% { transform: translateX(-5px) rotateY(7deg); }
    31.5% { transform: translateX(3px) rotateY(-5deg); }
    43.5% { transform: translateX(-2px) rotateY(3deg); }
    50% { transform: translateX(0); }
}

@keyframes shake_arrow_left {
    0% { transform: translateX(0); }
    6.5% { transform: translateX(-6px) rotateY(-9deg); }
    18.5% { transform: translateX(5px) rotateY(7deg); }
    31.5% { transform: translateX(-3px) rotateY(-5deg); }
    43.5% { transform: translateX(2px) rotateY(3deg); }
    50% { transform: translateX(0); }
}

.next-step-v2.disabled .go-next-notice { opacity: 1 !important; }
.step-back-v2.disabled .go-back-notice { opacity: 1 !important; }

/* --   INFO PRZY PERSONALIZACJI O PRZEJŚCIU DALEJ   -- */

.go-next-notice {
    position: absolute;
    top: 130%;
    left: 4px;
    width: 160px;
    color: #d00;
    font-size: 10pt;
    text-align: left;
    opacity: 0;
    transition: all .6s cubic-bezier(.785, .135, .15, .86);
}

.go-next-notice svg {
    position: absolute;
    left: 0;
    top: 0;
}

.go-next-notice b {
    position: absolute;
    left: 32px;
    top: 3px;
}

/* --   INFO PRZY PERSONALIZACJI O PRZEJŚCIU WSTECZ   -- */

.go-back-notice {
    position: absolute;
    top: 130%;
    right: 4px;
    width: 160px;
    color: #d00;
    font-size: 10pt;
    text-align: right;
    opacity: 0;
    transition: all .6s cubic-bezier(.785, .135, .15, .86);
}

.go-back-notice svg {
    position: absolute;
    right: 0;
    top: 0;
}

.go-back-notice b {
    position: absolute;
    right: 32px;
    top: 3px;
}







.step_container .product_description {
    font-size: 10pt;
    line-height: 150%;
    color: rgba(0, 0, 0, .9);
    width: 520px;
    text-align: center;
}

.step_container .start-screen-photo {
    width: 980px;
    height: 460px;
}














.step_container .step_subtitle {
    font-size: 17pt;
    width: 100%;
    line-height: 40px;
    color: #666;
    padding: 16px 24px;
    font-family: titillium_websemibold;
    white-space: nowrap;
    text-align: left;
    background: rgba(255, 255, 255, 0);
    border-radius: 5px 5px 0 0;
}

.step_container .step_subtitle.no_line::after { display: none; }
.step_container .step_subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, .09);
    border-bottom: 1px solid rgba(255,255,255,0.95);
}

.step_container .step_subtitle.small {
    font-size: 15pt;
    padding: 0 0 15px 0;
    margin: 15px 5px 0 5px;
    clear: both;
    height: 30px;
    line-height: 30px;
    font-family: titillium_webregular;
    color: #777;
}

.step_container .step_subtitle.small2 {
    font-size: 15pt;
    padding: 0 0 15px 0;
    margin: 34px 5px 15px 5px;
    clear: both;
    height: 30px;
    line-height: 26px;
}

.step_container .step_subtitle.very_small {
    font-size: 12pt;
    padding: 8px 24px;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    line-height: 56px;
    font-family: titillium_websemibold;
    color: #666;
    box-sizing: content-box;
    background: rgba(255, 255, 255, 0);
    width: calc(100% - 48px);
    white-space: normal;
}

.step_container .step_subtitle.very_small.no_margin {
    margin: 0 5px 0 5px;
}

.step_container .step_subtitle.no_visible {
    opacity: 0 !important;
}





/* --   SEPARATOR   -- */

.summary .separator {
    width: 100%;
    height: 1px;
}

.summary .separator::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0,0,0,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.95);
}





/* --   NAZWA PRODUKTU   -- */

.product-comments,
.product-info {
    height: 224px;
}

.step_container .product-name {
    font-size: 14pt;
    width: 100%;
    line-height: 40px;
    color: #666;
    padding: 0 20px;
    font-family: titillium_websemibold;
    white-space: nowrap;
    text-align: left;
 /* text-transform: uppercase; */
}

.step_container .product-name.main-product { margin: 8px 0 0 0; }
.step_container .product-name .price { color: #0b9a00; }
/* .step_container .product-name.additional-product { font-size: 14pt; } */
.step_container .product-name span { float: none; }





/*
.step_container .step_subtitle.col3 {
    width: 440px;
}

.step_container .step_subtitle.col1 {
    width: 140px;
}
*/

/* --   PRZYCISK ANULUJĄCY WYBRANĄ OPCJĘ   -- */

.step_container .close_option {
    color: #f00;
    font-size: 10pt;
    cursor: pointer;
    width: 72px;
    height: 72px;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .2s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step_container .step_text {
    width: 100%;
    padding: 16px 24px;
    text-align: left;
    color: #888;
    font-size: 10pt;
    line-height: 150%;
    z-index: 100;
    opacity: 1;
}

.step_container .step_text.move_top {
    top: -10px;
    margin: 0 5px 30px 5px;
}

.step_container .step_text.move_top span {
    font-family: titillium_webbold;
    color: #0b9d00;
}

.step_container .step_text.margins {
    margin: 10px 5px 10px 5px;
}

.step_container .step_text.attention {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding: 24px;
    margin: 16px 0 0 0;
}

.step_container .step_text b {
    background-color: #d90000;
    color: #fff;
    padding: 4px 8px;
    font-weight: 100;
    border-radius: 2px;
    font-size: 10pt;
    text-transform: uppercase;
}

.step_container .step_text span {
    font-weight: 100;
    margin: 16px 0 0 0;
    color: #d90000;
}










/* --   BLOKI Z POZYCJAMI WYBORU W FORMULARZU   -- */

.form_block.selecting-on { user-select: text !important; }
.form_block {
    max-width: 1152px;
    margin: 16px;
    text-align: center;
    z-index: 70;
    background: #fbfbfb;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    user-select: none;
}

.form_block.transparent {
    box-shadow: none;
    background: none !important;
}





/* --   TYTUŁ BLOKU   -- */

.form-block-group h4,
#new_container h4 {
    font-size: 15pt;
    width: 100%;
    line-height: 40px;
    color: #666;
    z-index: 10;
    padding: 16px 24px;
    font-family: titillium_websemibold;
    white-space: nowrap;
    text-align: left;
    background: #fff;
    border-radius: 5px 5px 0 0;
    font-weight: 100;
    text-transform: uppercase;
}

#new_container h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}





/* --   WYBRANY PARAMETR W NAGÓWKU   -- */

#new_container .form-parameters-breadcrumbs {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16pt;
    line-height: 40px;
    color: #aaa;
    z-index: 10;
    padding: 16px 24px;
    font-family: titillium_webbold;
    white-space: nowrap;
    text-align: left;
    font-weight: 100;
    text-transform: uppercase;
    display: none;
}





/* --   TYTUŁ WYBRANEJ WARTOŚCI   -- */

#new_container h5 {
    font-size: 13pt;
    width: 100%;
    line-height: 40px;
    color: #666;
    z-index: 10;
    padding: 0;
    margin: 0 0 8px;
    font-family: titillium_websemibold;
    white-space: nowrap;
    text-align: left;
    border-radius: 5px 5px 0 0;
    font-weight: 100;
    display: inline-block;
    text-transform: uppercase;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    box-sizing: border-box;
}

#new_container h5.underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

#new_container h5.overline::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

.form_block h5.small {
    font-size: 12pt;
    color: #666;
}





/* --   OPIS   -- */

.form_block .description {
    width: 100%;
    padding: 24px;
    text-align: left;
    color: #888;
    font-size: 10pt;
    line-height: 150%;
    z-index: 100;
    font-family: titillium_webregular;
}





/* --   FILTR   -- */

.filter-tabs.album-block-tabs { background: none !important; }
.filter-tabs {
    list-style: none;
    height: 72px;
    line-height: 72px;
    width: 100%;
    margin: 0;
    background: -moz-linear-gradient(90deg, rgba(241, 238, 232, 0) 0%, rgba(241, 238, 232, 1) 50%, rgba(241, 238, 232, 0) 100%) !important;
    background: -webkit-linear-gradient(90deg, rgba(241, 238, 232, 0) 0%, rgba(241, 238, 232, 1) 50%, rgba(241, 238, 232, 0) 100%) !important;
    background: linear-gradient(90deg, rgba(241, 238, 232, 0) 0%, rgba(241, 238, 232, 1) 50%, rgba(241, 238, 232, 0) 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    z-index: 2001;
    background: #fafafa;
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.filter-tabs li {
    height: 72px;
    line-height: 72px;
    font-family: titillium_webregular;
    padding: 0 24px;
    font-size: 10pt;
    cursor: pointer;
    color: #999;
    z-index: 105;
    text-transform: uppercase;
}

.filter-tabs.condensed li { padding: 0 16px; }
.filter-tabs.condensed li.nl { padding: 0 12px; }
.filter-tabs li:hover { color: #444; }
.filter-tabs li.active {
    color: #;
    text-rendering: optimizeLegibility;
    font-family: titillium_websemibold;
    font-size: 10pt;
    box-sizing: content-box;
    pointer-events: none;
}

.filter-tabs li b {
    font-family: titillium_webregular;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    white-space: nowrap;
}

.filter-tabs li.active b {
    pointer-events: none;
    opacity: 0;
    transform: translate(0, -16px);
}

.filter-tabs li::after {
    content: attr(data-hover);
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    color: #;
    z-index: 12;
    pointer-events: none;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    font-family: titillium_websemibold;
    font-size: 12pt;
    line-height: 72px;
    text-align: center;
    opacity: 0;
    transform: translate(0, 16px);
}

.filter-tabs li.active::after {
    opacity: 1;
    transform: translate(0, 0);
}





/* --   ZNACZKI INFO O PERSONALIZACJI   -- */

.filter-tabs li i {
    position: absolute;
    left: 50%;
    top: calc(100% - 12px);
    width: 24px;
    height: 24px;
    transform: translate(-50%, 0);
    background: #;
    color: #fff;
    line-height: 24px;
    font-style: normal;
    border-radius: 100%;
}





/* --   BIG FILTER-TABS   -- */

.filter-tabs.big {
    border: 0 !important;
    height: 80px !important;
    line-height: 80px !important;
    border-top: 1px solid rgba(0, 0, 0, .1);
    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%) !important;
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%) !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%) !important;
}

.filter-tabs.big li {
    font-size: 12pt !important;
    font-family: titillium_websemibold !important;
    height: 80px !important;
    line-height: 80px !important;
    padding: 0 40px;
}

.filter-tabs.big::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, 0) 100%);
}





/* --   SMALL FILTER-TABS   -- */

.filter-tabs.small {
    position: relative !important;
    height: 48px;
    line-height: 48px;
    background: #f4f4f4 !important;
    transform: translate(0, 0);
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

.filter-tabs.small li {
    font-size: 9pt !important;
    height: 48px !important;
    line-height: 48px !important;
}

.filter-tabs.small li::after {
    line-height: 46px;
    font-size: 10pt;
}

.filter-tabs.small::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, 0) 100%);
}










/* --   KONTENER NA BOXY   -- */

.form_block .container.colors { padding: 24px; }
.form_block .container {
    width: 100%;
    padding: 16px;
    z-index: 2000;
}

.col1 { width: 208px; }
.col2 { width: 384px; }
.col2-5 { width: 296px; }
.col5-2 { width: 608px; }
.col3 { width: 560px; }
.col4 { width: 736px; }
.col5 {
    width: 912px;
 /* min-height: 480px; */
    margin: 0 0 80px 0;
}

/* .col5-small {
    height: 144px;
    min-height: auto;
} */

.col6 { width: 1088px; }
.col-auto { width: 100%; }

.max-col1 { max-width: 208px; }
.max-col2 { max-width: 384px; }
.max-col2-5 { max-width: 296px; }
.max-col3 { max-width: 560px; }
.max-col4 { max-width: 736px; }
.max-col5 { max-width: 912px; }






.form-block-group {
    width: 100%;
    margin: 0 16px;
    display: flex;
    flex-direction: column;
}

.form-block-group.no-flex { display: block !important; }
.form-block-group .form_block { margin: 16px 0; }












/* --   WEWNĘTRZNE BLOKI Z POZYCJAMI WYBORU W FORMULARZU   -- */

.form_inside_block {
    width: 100%;
    height: auto;
    text-align: center;
    z-index: 60;
    background: rgba(255, 255, 255, .7);
    transition: all .2s ease-in;
}

.form_inside_block::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

.form_inside_block.hide_slide {
    height: 0 !important;
    opacity: 0;
    padding: 0 10px !important;
}










/* --   ZAKŁADKI   -- */

#new_container .tabs {
    list-style: none;
    height: 56px;
    line-height: 56px;
    width: 100%;
    margin: 0;
    background: rgba(0, 0, 0, .025);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

#new_container .tabs .tab {
    height: 56px;
    line-height: 56px;
    font-family: titillium_webregular;
    padding: 0 24px;
    font-size: 10pt;
    cursor: pointer;
    color: #777;
    z-index: 21;
}

#new_container .tabs .tab:hover {
    color: #222;
}

#new_container .tabs .tab.active {
    color: #;
    border-bottom: 2px solid #;
    box-sizing: content-box;
    pointer-events: none;
}

#new_container .step_summary .tabs .tab.active {
    color: #666;
}










/* --   POLA OPCJI WYBORU   -- */

/* --   STANDARDOWE   -- */

.thumb.selected { z-index: 102; }
.thumb:hover { z-index: 101; }
.thumb {
    width: 160px;
    height: 216px;
    font-family: titillium_webregular;
    margin: 8px;
    cursor: pointer;
    z-index: 100;
}

/* --   BARDZO MAŁE   -- */

/* .thumb.v-small {
    width: 72px;
    height: 72px;
} */





/* --   GRUPA PARAMETRÓW   -- */

.thumbs-group {
    width: 100%;
}










/* --   OKŁADKI   -- */

.collection-title {
    margin: 32px 0 0 0;
    color: #666;
    font-size: 18pt;
    font-family: titillium_webbold;
    text-transform: uppercase;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.collection-title p {
    font-family: titillium_weblight;
    font-size: 23pt;
    text-transform: uppercase;
    color: #ccc;
    margin: 0 4px;
}

.collection-title span {
    font-family: titillium_websemibold;
    font-size: 24pt;
    margin: 0 4px;
}

/* --   OPIS KOLEKCJI   -- */

.collection-description {
    width: 75%;
    padding: 24px 40px;
    text-align: left;
    color: #888;
    font-size: 11pt;
    line-height: 150%;
    z-index: 100;
    font-family: titillium_webregular;
    clear: both;
}




















/* --   KOLORY   -- */

#colors-collection-title {
    margin: 64px 0 0 32px;
    color: #666;
    font-size: 18pt;
    font-family: titillium_webbold;
    text-transform: uppercase;
}

#colors-collection-title p {
    font-family: titillium_webregular;
    font-size: 12pt;
    text-transform: none;
    width: 100%;
    text-align: left;
}

#colors-collection-title span {
    font-family: titillium_websemibold;
    font-size: 24pt;
    width: 100%;
    text-align: left;
}

.thumb.color {
    margin: 0;
    width: 148px;
    height: 216px;
}

.thumb.color.selected {
    transform: scale(1.1);
}

.thumb.color .thumb_img {
    width: 148px;
    height: 148px;
    border-radius: 0;
    transition: filter .15s cubic-bezier(.785, .135, .15, .86);
}

.thumb.color:hover .thumb_img {
    filter: brightness(110%);
}

.thumb.color.selected .thumb_img {
    border-radius: 5px !important;
    border: 3px solid #fff;
}

.thumb.color::after {
    width: 154px !important;
    height: 154px !important;
    left: -9px !important;
    top: -9px !important;
    border: 6px solid #fff !important;
    background: #34495c !important;
    box-sizing: content-box !important;
    border-radius: 12px !important;
}

.thumb.color:hover::after {
    display: none;
}

.thumb.color.selected:hover::after {
    display: block;
    border: 6px solid #fff !important;
    background: #34495c !important;
}

/* --   SYMBOL KOLORU   -- */

.thumb.color .symbol {
    font-family: titillium_webregular !important;
    font-size: 10pt !important;
    margin: 8px 0 0 0 !important;
}

.thumb.color:hover .symbol,
.thumb.color.selected .symbol {
    font-family: titillium_websemibold !important;
    font-size: 12pt !important;
    color: #666 !important;
}

.thumb.color.selected .symbol {
    color: #34495c !important;
}

/* --   LUPA   -- */

.thumb.color.new-zoom-marker .thumb-photo svg {
    color: #fff;
    opacity: 0;
    pointer-events: none;
}

.thumb.color.new-zoom-marker.selected:hover .thumb-photo svg {
    opacity: .5;
}




















/* --   MINIATURA OPCJI WYBORU   -- */

.thumb .thumb_img {
    border-radius: 3px;
    width: 160px;
    height: 160px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 50% 50%;
    overflow: hidden;
    z-index: 20;
}

.thumb.gray_scene .thumb_img {
    background: rgb(245, 245, 245);
    background: -moz-linear-gradient(45deg, rgba(245, 245, 245, 1) 0%, rgba(230, 230, 230, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(245, 245, 245, 1) 0%,rgba(230, 230, 230, 1) 100%);
    background: linear-gradient(45deg, rgba(245, 245, 245, 1) 0%, rgba(230, 230, 230, 1) 100%);
}

.thumb .thumb_img.zoom .product-icon { background: #eee; }
.thumb .thumb_img.zoom {
    transform: scale(4);
    overflow: visible;
}










.thumb.selected .thumb_title { color: #fff; }
.thumb .thumb_title {
    text-align: center;
    font-size: 9pt;
    color: #666;
    width: 100%;
    line-height: 16px;
    z-index: 1;
    margin: 10px 0 0 0;
    text-transform: uppercase;
}

/* .thumb.v-small .thumb_title {
    font-family: titillium_webbold;
    font-size: 12pt;
    top: 0;
    line-height: 72px;
    height: 72px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 3px;
    margin: 0;
} */

.thumb .thumb_title .symbol {
    text-align: center;
    width: 100%;
    font-size: 12pt;
    font-family: titillium_webbold;
    margin: 3px 0 0 0;
}

.thumb.selected .thumb_title .previous_symbol { opacity: 1; }
.thumb .thumb_title .previous_symbol {
    text-align: right;
    width: auto;
    font-size: 12pt;
    font-family: titillium_webbold;
    margin: 3px 0 0 0;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: all .15s ease-out;
}

.thumb .thumb_title .name {
    text-align:center;
    width:100%;
    font-size:9pt;
    line-height:150%;
    font-family:titillium_webregular;
}

.thumb .thumb_description {
    text-align: center;
    font-size: 8pt;
    color: #666;
    width: 100%;
    line-height: 16px;
    z-index: 1;
    margin: 4px 0 0 0;
    text-transform: uppercase;
}





/* --   ZNACZEK NOWOŚĆ   -- */

.thumb .new-tag {
    height: 22px;
    line-height: 22px;
    border-radius: 2px;
    padding: 0 8px;
    color: #fff;
    background-color: #068800;
    font-size: 9pt;
    text-transform: uppercase;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 4px 0 0 0;
    font-family: titillium_websemibold;
    z-index: 1;
}





/* --   ZAZNACZENIE   -- */

.thumb::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    background: rgba(255, 255, 255, 1);
    z-index: 0;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    transition: all .15s ease-out;
    transform: translate(-6px, -6px);
}

.thumb:hover::after {
    opacity: 1;
    background: #fff;
 /* border: 1px solid #ddd; */
}

/* .thumb.v-small::after {
    height: calc(100% + 12px);
} */

.thumb.selected::after {
    opacity: 1;
    background: rgba(50, 50, 50, 1);
 /* border: 2px solid #; */
}

.thumb.selected:hover::after {
    opacity: 1;
}





/* --   PRZYCISK "USUŃ WYBRANĄ OPCJĘ"   -- */

/* .thumb .delete_option {
    position: absolute;
    left: 50%;
    bottom: -16px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    text-transform: uppercase;
    transition: transform .1s ease-in-out .1s, opacity .1s ease-in-out .1s;
    transform: translate(-50%, 15px);
    z-index: 10;
}

.thumb .delete_option::before {
    position: absolute;
    left: -4px;
    top: -4px;
    background: #fff;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border-radius: 3px;
    z-index: 0;
    content: '';
}

.thumb .delete_option span {
    background:#bb0000;
    color:#fff;
    border-radius:2px;
    height:30px;
    line-height:30px;
    text-align:center;
    padding:0 10px 0 25px;
    display:inline-block;
    z-index:1;
    position:relative;
    box-shadow:0 1px 2px rgba(0,0,0,0.25);
}

.thumb .delete_option span::after {
    content:'×';
    position:absolute;
    z-index:1;
    left:0;
    top:0;
    height:24px;
    line-height:24px;
    width:24px;
    text-align:center;
    font-size:15pt;
    color:#fff;
}

.thumb .delete_option:hover span {
    background-color:#d80000;
}

.thumb.selected .delete_option {
    pointer-events:all;
    opacity:1;
    transform:translate(-50%,0);
    transition:transform 0.2s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s;
} */





/* --   OPCJA WYBORU - MAŁE   -- */

.thumb.small {
    width: 102px;
    height: 128px;
    margin: 0 0 8px 0;
}

.form_block.col5 .thumb.small {
    width: 108px;
    height: 136px;
}

.thumb.small::after {
    opacity: 0;
    height: calc(100% + 8px);
}

.thumb.small .thumb_img {
    left: 0;
    top: 0;
    width: 102px;
    height: 102px;
    background-size: 80px 80px;
    border-radius: 0;
}

.form_block.col5 .thumb.small .thumb_img {
    width: 108px;
    height: 108px;
}

.thumb.small:hover .thumb_img {
    filter: brightness(1.1);
}

.thumb.small .thumb_title {
    font-size: 9pt;
    width: 100%;
    line-height: 30px;
    padding: 0;
    margin: 0;
}

.thumb.small .thumb_title .name {
    opacity: 0;
    pointer-events: none;
}

.thumb.small.selected::after {
    opacity: 1;
}






/* --   OPCJA WYBORU - ŚREDNIE   -- */

.thumb.medium {
    width: 160px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    color: #888;
    font-size: 10pt;
    border-radius: 3px;
    margin: 8px;
}

.thumb.medium .thumb_img {
    width: 160px;
    height: 64px;
}

.thumb.medium:hover::after { opacity: 1; }
.thumb.medium.selected::after { opacity: 1; }
.thumb.medium.selected .thumb_img { background: #fff; }
.thumb.medium::after {
    height: calc(100% + 12px);
    opacity: .25;
}





/* --   OPCJA WYBORU - ŚREDNIE POD CZCIONKI   -- */

.thumb.font {
    width: 116px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #888;
    font-size: 10pt;
    border-radius: 3px;
    margin: 8px;
}

.thumb.font .thumb_img {
    width: 116px;
    height: 48px;
    background-size: 90% 90%;
}

.thumb.font .thumb_img.century_gothic { background-size: 110% 110%; }
.thumb.font .thumb_img.amazone { background-size: 110% 110%; }
.thumb.font:hover::after { opacity: 1; }
.thumb.font.selected::after { opacity: 1; }
.thumb.font.selected .thumb_img { background: #fff; }
.thumb.font::after {
    height: calc(100% + 12px);
    opacity: .25;
}





/* --   KLASA ZOOM - STANDARDOWE   -- */

.thumb.zoom .zoom_marker {
    position:absolute;
    right:0;
    top:0;
    width:40px;
    height:40px;
    background:#fff;
    cursor:pointer;
    z-index:10000;
    opacity:0;
    border-radius:0 0 0 5px;
}

.thumb.zoom:hover .zoom_marker { opacity:1; }
.thumb.zoom .zoom_marker::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-image:url(../../.images/icon_zoom_black2.svg);
    background-size:16px 16px;
    background-repeat:no-repeat;
    background-position:14px 10px;
    opacity:.5;
}

.thumb.zoom .zoom_marker:hover::before {
    background-size:20px 20px;
    background-position:12px 8px;
    opacity:.8;
}

.thumb.selected.zoom .zoom_marker {
    background: rgba(50, 50, 50, 1);
    border:0;
}

.thumb.selected.zoom .zoom_marker:hover::before { opacity: 1; }
.thumb.selected.zoom .zoom_marker::before {
    background-image:url(../../.images/icon_zoom_white.svg);
    opacity:.6;
}





/* --   TYMCZASOWE CHOWANIE NIEKTÓRYCH OPCJI WYBORU U DYSTRYBUTORÓW
        W PRZYPADKU KIEDY NA ZDJĘCIACH SĄ POLSKIE IMIONA   -- */

/* .thumb.hide_in_distributors {
    display:none;
} */





/* --   OPCJA WYBORU NIEDOSTĘPNA DLA WYBRANEGO KOLORU LUB OKŁADKI   -- */

.thumb.disabled-by-box .icon-quality,
.thumb.disabled-by-color .icon-quality,
.thumb.disabled-by-cover .icon-quality {
    display: none !important;
}

.thumb.disabled-by-box,
.thumb.disabled-by-color,
.thumb.disabled-by-cover {
    pointer-events: none;
}

.thumb.disabled-by-box .thumb-title,
.thumb.disabled-by-color .thumb-title,
.thumb.disabled-by-cover .thumb-title {
    color: #aaa !important;
}

.thumb.disabled-by-box .thumb-photo,
.thumb.disabled-by-color .thumb-photo,
.thumb.disabled-by-cover .thumb-photo {
    filter: grayscale(100%);
    opacity: .1;
}

.thumb .disabled-by-box-info,
.thumb .disabled-by-color-info,
.thumb .disabled-by-cover-info {
    display: none;
    position: absolute;
    top: 100%;
    color: #f00;
    text-align: center;
    z-index: 210;
    font-size: 10pt;
}

.thumb.disabled-by-box .disabled-by-color-info,
.thumb.disabled-by-cover .disabled-by-color-info {
    display: none !important;
}

.thumb.disabled-by-box .disabled-by-box-info,
.thumb.disabled-by-color .disabled-by-color-info,
.thumb.disabled-by-cover .disabled-by-cover-info {
    display: block;
}

.thumb .disabled-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
}

.thumb .disabled-icon svg {
    width: 40px;
    height: 40px;
    color: #f00;
}

.thumb.disabled-by-box .disabled-icon,
.thumb.disabled-by-color .disabled-icon,
.thumb.disabled-by-cover .disabled-icon {
    opacity: 1;
}

/* .thumb .quality-info {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    color: #fff;
    text-align: center;
    z-index: 210;
    font-size: 10pt;
    border-radius: 4px;
    line-height: 24px;
    padding: 0 12px;
    transform: translate(-50%, 0);
}

.thumb .quality-info.q1-info { background: #c1000b; }
.thumb .quality-info.q2-info { background: #ffc700; }
.thumb .quality-info.q3-info { background: #00a820; }

.thumb.q1 .quality-info.q1-info,
.thumb.q2 .quality-info.q2-info,
.thumb.q3 .quality-info.q3-info {
    display: block;
} */









/* --   PODGLĄD WYBRANEGO KOLORU BOKU ETUI / PUDEŁKA   -- */

.color_preview {
    position:absolute;
    right:5px;
    bottom:5px;
    width:40px;
    height:40px;
    border-radius:3px;
    box-sizing:border-box;
    border:1px solid #aaa;
    z-index:21;
}

.cover_color_preview {
    position:absolute;
    right:0;
    top:0;
    width:40px;
    height:40px;
    border-radius:0 3px 0 3px;
    z-index:21;
}





/* --   PRZYCISK DO ŚCIĄGANAI SZABLONÓW   -- */

#case_foto_template {

}





/*
.form_block .download-template {
    float:left;
    width:140px;
    background-color:rgba(255,255,255,0.4);
    height:140px;
    position:relative;
    margin:25px 0 0 5px;
    border:2px dashed #ddd;
    box-sizing:border-box;
    transition:all 0.1s linear;
}

.form_block .download-template:hover {
    border:2px dashed #bcbcbc;
    background-color:rgba(255,255,255,0.8);

}

.form_block .download-template img {
    width:30px;
    height:30px;
    position:absolute;
    left:50%;
    top:42px;
    transform:translate(-50%,0);
}

.form_block .download-template:hover img {
    width:34px;
    height:34px;
    top:40px;
}

.form_block .download-template span {
    width:100%;
    height:30px;
    line-height:30px;
    position:absolute;
    left:0;
    bottom:30px;
    color:#157efb;
    font-size:10pt;
}

.form_block .download-template .blocked_info {
    display:none;
}

.form_block .download-template.blocked {
    pointer-events:none;
}

.form_block .download-template.blocked img {
    opacity:0.3;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%);
}

.form_block .download-template.blocked span {
    opacity:0.3;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%);
}

.form_block .download-template.blocked .blocked_info {
    background-color:#ea0000;
    color:#fff;
    display:inline-block;
    padding:5px;
    position:relative;
    top:102px;
    border-radius:3px;
}
*/










/* --   POLE DO WYSYŁANIA PLIKÓW    -- */

@keyframes pulse {
    0% { transform: scale(1); }
    10% { transform: scale(1.2); }
    20% { transform: scale(1); }
}

@keyframes passing-through {
    0% { opacity: 0; transform: translateY(50px); }
    30%, 70% { opacity: 1; transform: translateY(0px); }
    100% { opacity: 0; transform: translateY(-50px); }
}

@keyframes slide-in {
    0% { opacity: 0; transform: translateY(50px); }
    30% { opacity: 1; transform: translateY(0px); }
}

@keyframes bounce {
    0% { bottom: -10px; }
    50% { bottom: -5px; }
    100% { bottom: 5px; }
}





.ftp-file-sended {
    line-height: 48px;
    padding: 0 24px;
    color: #;
    width: 100%;
    text-align: center;
    background: #fff;
}

.ftp-file-sended::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    left: 0;
    background: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}





.send_files {
    /* height: 128px;
    width: 100%; */
    margin: 0;
    cursor: pointer;
}

/* .send_files:hover::before { background: #f8f8f8; }
.send_files::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% + 196px);
    background: #f4f4f4;
} */

.send_files .sended-actions { pointer-events: all !important; }
.send_files .sended-actions,
.send_files .sending-info,
.send_files .start_info,
.send_files .dz-default {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

.send_files .sending-info.hide { transform: translate(0, 8px); }
.send_files .start_info.hide { transform: translate(0, -8px); }
.send_files .label {
    background: #;
    margin: 16px 0 0 0;
    text-transform: uppercase;
    font-family: titillium_websemibold;
    color: #fff;
    padding: 0 12px;
    line-height: 28px;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .025);
}

.send_files .label.invert {
    color: #;
    background: #fff;
}

.send_files .sending-info .span-loader {
    position: relative;
    left: auto;
    top: auto;
    margin: -32px 0 0 0;
}

.send_files:hover .start_info svg { transform: scale(1.2); }
.send_files .start_info svg {
    width: 40px;
    height: 40px;
    stroke-width: 1px;
    color: #;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    margin: -32px 0 0 0;
}

.send_files .dz-preview {
    display: none;
}

.send_files .sending-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
}

.send_files .sending-progress p {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #;
    transition: all .1s linear;
}





/* .send_files .start_info span,
.send_files .dz-default span {
    line-height: 110px;
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    height: 90px;
    font-size: 12pt;
    pointer-events: none;
    color: #;
    display: none;
}

.send_files:hover .start_info svg,
.send_files:hover .dz-default svg {
    color: #;
}

.send_files .dz-preview {
    width: 100%;
    height: 100%;
    z-index: 10;
    transition: all .1s linear;
    overflow: hidden;
    background: rgba(255, 255, 255, .3);
    display: block;
}

.send_files .dz-preview .dz-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 96px;
    height: 96px;
    background-image: url(../../.images/icon_file.svg);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: .2;
}

.send_files .dz-preview:hover .dz-image,
.send_files .dz-preview.hover .dz-image {
    opacity: .4;
}

.send_files .dz-preview .dz-image img {
    display: none;
}

.send_files .dz-preview .dz-details {
    position: absolute;
    left: 96px;
    top: 0;
    width: 265px;
    height: 96px;
    opacity: 1;
}

.send_files .dz-preview .dz-error-message {
    text-align: left;
    position: absolute;
    left: 96px;
    top: 0;
    width: auto;
    height: 40px;
    line-height: 40px;
    opacity: 1;
    color: #d80000;
}

.send_files .dz-preview .dz-details .dz-filename {
    position: absolute;
    left: 0;
    top: 50%;
    width: 265px;
    height: auto;
    line-height: 20px;
    opacity: 1;
    color: #aaa;
    font-size: 9pt;
    transform: translate(0, -50%);
    transition: opacity .1s ease-in;
    text-align: left;
}

.send_files .dz-preview:hover .dz-details .dz-filename,
.send_files .dz-preview.hover .dz-details .dz-filename {
    color: #333;
}

.send_files .dz-preview .dz-details .dz-size {
    position: absolute;
    left: -96px;
    top: 70px;
    width: 96px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    opacity: 1;
    color: #aaa;
    font-size: 8pt;
    white-space: nowrap;
    transition: opacity .1s ease-in;
    display: none;
}

.send_files .dz-preview:hover .dz-details .dz-size,
.send_files .dz-preview.hover .dz-details .dz-size {
    color: #333 !important;
}

.send_files .dz-preview .dz-details .dz-size span strong {
    font-weight: 100;
}

.send_files .dz-preview .dz-success-mark {
    position: absolute;
    right: 0;
    top: 0;
    width: 66px;
    height: 96px;
    background-image: url(../../.images/icon_check.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0;
}

.send_files .dz-preview.dz-success .dz-success-mark {
    animation: passing-through 1.5s cubic-bezier(.77, 0, .175, 1);
}

.send_files .dz-preview .dz-error-mark {
    position: absolute;
    right: 0;
    top: 0;
    width: 66px;
    height: 96px;
    background-image: url(../../.images/icon_x.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0;
}

.send_files .dz-preview.dz-error .dz-error-mark {
    animation: slide-in 3s cubic-bezier(.77, 0, .175, 1);
}

.send_files .dz-preview .dz-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
}

.send_files .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    transition: all .1s linear;
}

.send_files .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    transition: opacity .4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    animation: pulse 6s ease infinite;
}

.send_files .dz-preview .dz-progress .dz-upload {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 4px;
    opacity: 1;
    background: #;
    transition: all .1s ease-in;
}

.send_files .dz-preview .dz-success-mark svg,
.send_files .dz-preview .dz-error-mark svg {
    display: none;
} */





.delete_file {
    position: absolute;
    right: 24px;
    top: 50%;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 20pt;
    font-family: Arial;
    text-align: center;
    cursor: pointer;
    color: #aaa;
    opacity: 0;
    z-index: 11;
    border-radius: 3px;
    margin: -16px 0 0 0;
}

.send_files .dz-preview:hover .delete_file {
    opacity: 1;
}

.delete_file:hover {
    color: #d60000;
    transform: scale(1.4);
}

.delete_file.show {
    opacity:1;
}





.prints_amount {
    position: absolute;
    left: 50%;
    top: calc(100% + 20px);
    width: 120px;
    margin: 0 0 0 -60px;
}

.prints_amount span {
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-family: Arial;
    font-size: 12pt;
    font-weight: 600;
    color: #666;
    line-height: 40px;
}

.prints_amount span.minus,
.prints_amount span.plus {
    font-size: 20pt;
}

.prints_amount span.minus:hover,
.prints_amount span.plus:hover {
    transform: scale(1.3);
}





/* --   DUŻE POLE Z MINIATURAMI PRZESŁANYCH PLIKÓW   -- */

.col6 .send_files .start_info,
.col6 .send_files .dz-default {
    height: 256px;
}

.col6 .send_files .dz-preview {
    width: 20%;
    height: auto;
    margin: 0 0 80px 0;
    overflow: visible;
    border: 0;
}

.col6 .send_files .dz-preview:hover::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 16px;
    width: calc(100% - 32px);
    height: calc(100% + 46px);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    pointer-events: none;
}

.col6 .send_files .dz-preview .dz-image {
    position: relative;
    width: 100%;
    padding-top: 100%;
    opacity: 1;
    background: none;
}

.col6 .send_files .dz-preview .dz-image img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(.7);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    border-radius: 5px;
}

.col6 .send_files .dz-preview:hover .dz-image img {
    transform: scale(.72);
}

.col6 .send_files .dz-preview .dz-details {
    left: 0;
    top: calc(100% - 16px);
    width: 100%;
    height: 80px;
}

.col6 .send_files .dz-preview .dz-details .dz-filename {
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    line-height: 20px;
    height: 20px;
    transform: translate(0, 0);
}

.col6 .send_files .dz-preview .dz-details .dz-filename span {
    width: 100%;
    padding: 0 8px;
    color: #666;
}

.col6 .send_files .dz-preview:hover .dz-details .dz-filename span {
    color: #333;
}

.col6 .send_files .dz-preview .dz-details .dz-size {
    left: 0;
    top: 20px;
    width: 100%;
    text-align: center;
    display: block;
    height: 16px;
    line-height: 16px;
}

.col6 .send_files .dz-preview .dz-details .dz-size span {
    width: 100%;
    padding: 0 8px;
    font-size: 9pt;
    color: #666;
}

.col6 .send_files .dz-preview .dz-details .dz-size span strong {
    float: none;
}

.col6 .send_files .dz-preview:hover .dz-details .dz-size span {
    color: #333;
}

.col6 .send_files .dz-preview .delete_file {
    opacity: 0;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: #d60000;
    color: #fff;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 20pt;
    margin: 0;
}

.col6 .send_files .dz-preview:hover .delete_file {
    opacity: 1;
}

.col6 .send_files .dz-preview .delete_file:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.col6 .send_files .dz-preview .dz-progress {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 4px;
    transform: scale(.7, 1);
}

.col6 .send_files .dz-preview .dz-progress .dz-upload {
    height: 4px;
}

.col6 .send_files .dz-preview .dz-success-mark {
    right: auto;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    background-image: url(../../.images/icon_check_white.svg);
    opacity: 0;
    border-radius: 100%;
    background-color: #;
    margin: -16px 0 0 -16px;
}




















/* --   PODSUMOWANIE   -- */

.summary {
    width: 100%;
    height: 100%;
}

.summary .column {
    width: 400px;
    background: #fbfbfb;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    margin: 16px;
    padding: 0 0 24px 0;
}

/*
.summary .column .bottom_mask {
    position: absolute;
    right: -15px;
    bottom: -70px;
    height: 70px;
    width: 300px;
    overflow: hidden;
}

.summary .title {
    font-size: 17pt;
    width: 100%;
    line-height: 40px;
    color: #666;
    z-index: 10;
    padding: 16px 24px;
    font-family: titillium_webregular;
    white-space: nowrap;
    text-align: left;
    background: #fff;
    border-radius: 5px 5px 0 0;
    margin: 0 0 16px 0;
}

.summary .title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .95);
}

.summary .title.small {
    font-size: 14pt;
    background: none;
    line-height: 32px;
    padding: 8px 24px;
}

.summary .title.very-small {
    font-size: 12pt;
    background: none;
    line-height: 32px;
    padding: 8px 24px;
    margin: 0;
}

.summary .title.very-small::after {
    border: 0;
    background: none;
}

.summary .step_subtitle.very_small { padding: 8px 20px !important; }
.summary .title .discount_info { display:none; }





.summary .main-title {
    font-size: 12pt;
    padding: 0 20px;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    height: 64px;
    line-height: 64px;
    font-family: titillium_websemibold;
    color: #666;
    width: 100%;
    text-align: left;
}

.summary .main-title.header {
    background: #fff;
    border-radius: 5px 5px 0 0;
    z-index: 10;
}

.summary .main-title::after {
    content: '';
    position: absolute;
    top: 100%;
    width: 100%;
    height: 1px;
    left: 0;
    background-color: rgba(0, 0, 0, .09);
    border-bottom: 1px solid rgba(255,255,255,0.95);
}

.summary .sub-title {
    font-size: 12pt;
    padding: 0 20px;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    line-height: 32px;
    font-family: titillium_websemibold;
    color: #888;
    width: 100%;
    text-align: left;
}





.summary .none {
    color: #aaa;
    pointer-events: none;
}

.summary .none.invert {
    background: #ccc;
    color: #fff;
    padding: 0 12px;
    border-radius: 3px;
    text-transform: uppercase;
    height: 28px;
    line-height: 28px;
    width: auto;
    margin: 0 0 16px 20px;
    font-family: titillium_websemibold;
}

.summary .line {
    font-size: 10pt;
    color: #444;
    font-family: titillium_webregular;
    min-height: 24px;
    line-height: 24px;
    width: 100%;
    padding: 0 20px;
}

.summary .line span {
    color: #999;
    margin: 0 4px 0 0;
}

.summary .line .value {
    font-family: titillium_websemibold;
    color: #00a820;
    margin: 0;
    text-align: left;
}

.summary .line .value.red { color: #d30000 }
.summary .line .value.selected_option { color: #00a820; }
.summary .line .value.discount_color { color: #00a820; }

.summary .line .info {
    font-size: 9pt !important;
    line-height: 20px !important;
    margin: 0 0 15px 0;
}

.summary .line .discount_info {
    position: absolute;
    color: #fff !important;
    font-family: Tahoma;
    background-color: #00a820;
    padding: 0 7px;
    border-radius: 3px;
    font-size: 8pt;
    line-height: 24px !important;
    margin: 1px 0 0 0;
    width: auto;
    left: calc(100% + 21px);
    white-space: nowrap;
    font-weight: 100;
    letter-spacing: 1px;
    display: none;
}

.summary .line .discount_info.inside {
    left: auto;
    right: 0;
}

.summary .line .discount_info.show {
    display: block;
}

.summary .line .no_discount_info {
    position: absolute;
    color: #fff !important;
    font-family: Tahoma;
    background-color: #444;
    text-align: center;
    border-radius: 3px;
    font-size: 8pt;
    line-height: 24px !important;
    margin: 1px 0 0 0;
    width: 24px;
    left: calc(100% + 21px);
    font-weight: 100;
    letter-spacing: 1px;
    cursor: help;
    display: none;
}

.summary .summary_block {
    float: left;
    clear: both;
    margin: 0 0 16px 0;
}

.summary .line.comments span {
    color: #c38080;
    font-family: titillium_websemibold;
    margin: 8px 0 0 0;
}

.summary .line.comments .value {
    font-size: 10pt;
    font-family: titillium_webregular;
    line-height: 20px;
    color: #c38080;
    width: calc(100% + 24px);
    margin: 4px 0 0 -12px;
    background: #fff;
    padding: 8px 12px;
    border-radius: 5px;
}

.summary .line.comments.empty span {
    color: #999;
    font-family: titillium_webregular;
    text-transform: none;
    margin: 0 4px 0 0;
}

.summary .line.comments.empty .value {
    font-family: titillium_websemibold;
    color: #00a820;
    background: none;
    width: auto;
    margin: 0;
    padding: 0;
    line-height: 24px;
} */










/* --   CENA CAŁKOWITA   -- */

#price_summary {
    font-family:titillium_webbold !important;
}

#price_summary.discount_color {
    color:#14b300;
}










/* --   ILOŚ PRODUKTÓW   -- */

/*
#amount_container {
    font-family:titillium_webbold !important;
    width:100px;
    height:50px;
    text-align:right;
    cursor:pointer;
    position:relative;
}

#amount_container p {
    width:30px;
    height:50px;
    position:absolute;
    right:0;
    top:0;
    z-index:1;
}

#amount_container p.hide_op {
    opacity:0;
}

#amount_container span {
    position:absolute;
    top:10px;
}

#amount_container span.minus {
    right:65px;
    line-height:26px;
    font-size:17pt;
    font-family:Arial;
    width:30px;
    padding:0;
}

#amount_container span.plus {
    right:30px;
    font-size:15pt;
    font-family:Arial;
    width:30px;
    padding:0;
}

#amount {
    width:30px;
    height:50px;
    position:absolute;
    right:0;
    top:0;
    font-family:titillium_webbold;
    font-size:14pt;
    color:#444;
    border:0;
    text-align:right;
    padding:0;
    display:none;
    z-index:2;
    background:none;
}

#amount.show {
    display: block;
}
*/










/* --   UWAGI DO PRODUKTU   -- */

/* #product_comments {
    margin: 0 !important;
    width: 100% !important;
    height: 104px;
} */










/* --   KOD PROMOCYJNY   -- */

#promotional_code_field {
    display:none;
}

#promotional_code_field.show {
    display:block;
}

#new_coupon_code {
    border: 1px solid #ccc;
    background: #f1f1f1 !important;
    padding: 0 8px;
    color: #666;
    font-family: Arial;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    font-size: 12pt !important;
    z-index: 100;
 /* box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .03); */
}

#new_coupon_code.red {
 /* border: 2px solid #f00000; */
    color: #f00000;
}

#new_coupon_code.green {
 /* border: 2px solid #00b711; */
    color: #00b711;
}

#coupon_code_loader {
    display: block;
    top: auto;
    bottom: 0;
    transform: translate(-8px, -8px);
}

#coupon_code_ok,
#coupon_code_error {
    position: absolute;
    top: 50%;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transform: translate(0, -50%);
    z-index: 101;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

#coupon_code_ok svg,
#coupon_code_error svg {
    width: 24px;
    height: 24px;
}

#coupon_code_ok svg { color: #00b711; }
#coupon_code_error svg { color: #f00000; }
#coupon_code_notice { z-index: 11; }
#coupon_code_notice.red { color: #f00000; }
#coupon_code_notice.green { color: #00b711; }







#new_validate_code_loader {
    position: relative;
    left: auto;
    top: auto;
    margin: 4px 0 0 0;
    width: 24px;
    height: 24px;
    transition: opacity .2s linear;
    z-index: 99;
    animation: spin 1s ease-out infinite;
}

#code_info {
    font-family: titillium_webregular;
    line-height: 32px;
    min-height: 32px;
    transition: opacity .2s linear;
    z-index: 98;
}

#code_info svg {
    position: absolute;
    left: -32px;
    top: 4px;
}

#code_info.red {
    color: #f00000;
}

#code_info.green {
    color: #00b711;
}









#add_to_cart_new,
.add_to_cart_bottom {
    height:40px;
    line-height:40px;
    position:absolute;
    top:0;
    right:0;
    background-color:#;
    color:#fff;
    font-size:10pt;
    font-family:titillium_webregular;
    border-radius:3px;
    padding:0 50px 0 15px;
    margin:25px 15px 0 0;
    z-index:11;
    cursor:pointer;
}

.add_to_cart_bottom {
    top:auto;
    bottom:70px;
    right:0;
    z-index:1;
    opacity:0;
    transition:bottom 0.3s ease 0s, opacity 0.4s ease;
}

.add_to_cart_bottom.show {
    bottom:0;
    opacity:1;
}

#add_to_cart_new:after,
.add_to_cart_bottom:after {
    background-image:url(../../.images/icon_cart.svg);
    background-repeat:no-repeat;
    background-size:36px 36px;
    background-position:50% 50%;
    width:40px;
    height:40px;
    position:absolute;
    right:5px;
    top:0;
    content:'';
}

#add_to_cart_new:before,
.add_to_cart_bottom:before {
    background-image:url(../../.images/loader_dark.svg);
    background-repeat:no-repeat;
    background-size:30px 30px;
    background-position:50% 50%;
    width:40px;
    height:40px;
    position:absolute;
    left:-50px;
    top:0;
    content:'';
    transition:all 0.3s ease;
    opacity:0;
}

#add_to_cart_new.show_loader:before,
.add_to_cart_bottom.show_loader:before {
    opacity:1;
}

#add_to_cart_new:hover,
.add_to_cart_bottom:hover {
    background-color:#f9764c;
}




.step_summary .highlight-tab {
    color: #aaa;
}

.highlight-tab svg {
    width: 20px;
    height: 20px;
    margin: 0 0 0 12px;
    display: none;
}












/* --   POLE Z INFO O RABACIE KLIENTA   -- */

.discount_line {
    padding:0 0 15px 0;
    margin:0 0 15px 0;
    display:none;
}

.discount_line::after {
    content:'';
    position:absolute;
    left:-15px;
    bottom:0;
    width:calc(100% + 30px);
    height:1px;
    background-color:rgba(0,0,0,0.07);
    border-bottom:1px solid rgba(255,255,255,0.95);
    z-index:1;
}

.discount_line::before {
    content:'';
    position:absolute;
    left:-15px;
    top:-15px;
    width:calc(100% + 30px);
    height:calc(100% + 15px);
    background-color:rgba(255,255,255,0.7);
    z-index:0;
}

.discount_line.show {
    display:block;
}

.discount_line span.fl {
    color:#444 !important;
    font-family:titillium_webbold;
    position:relative;
    z-index:1;
}

.discount_line span.fr {
    color:#fff !important;
    font-family:Tahoma;
    background-color:#108c00;
    font-weight:100;
    padding:0 7px;
    border-radius:3px;
    font-size:10pt;
    letter-spacing:1px;
    position:relative;
    z-index:1;
}










/* --   KLASA ZOOM - POWIĘKSZNIE   -- */

#zoom_click_mask {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:19999;
    transition:all 0.8s ease 0.1s;
}

#zoom_click_mask.fadeBG {
    background-color:rgba(0,0,0,0.4);
}

#zoom_click_mask.hide_bg {
    pointer-events:none;
    background-color:rgba(0,0,0,0);
}

#zoom {
    position:absolute;
    background-color:rgba(255,255,255,1);
    border:2px solid #fff;
    z-index:20000;
    transition:all 0.2s ease;
    opacity:0;
    border-radius:1px;
    box-shadow:0 1px 1px rgba(0,0,0,0.1);
    background-image:url(../../.images/loader_dark.svg);
    background-size:10px 10px;
    background-repeat:no-repeat;
    background-position:50% 50%;
}

#zoom.small_zoom_in {
    border:1px solid #fff;
}

#zoom.zoom_in {
    transform:scale(3);
    opacity:1;
}

#zoom.zoom_in.hide_op_sc {
    opacity:0;
    transform:scale(2.8);
    pointer-events:none;
    transition:all 0.4s ease;
}

#zoom.big_zoom_in {
    transform:scale(4);
    opacity:1;
}

#zoom.big_zoom_in.hide_op_sc {
    opacity:0;
    transform:scale(3.8);
    pointer-events:none;
    transition:all 0.4s ease;
}

#zoom.small_zoom_in {
    transform:scale(3);
    opacity:1;
}

#zoom.small_zoom_in.hide_op_sc {
    opacity:0;
    transform:scale(4.8);
    pointer-events:none;
    transition:all 0.4s ease;
}

#zoom img {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    cursor:pointer;
    z-index:1;
    opacity:0;
    transition:all 0.5s ease 0.2s;
}

#zoom img.show {
    opacity:1;
}

.close_zoom {
    z-index:2;
    position:absolute;
    right:0;
    top:0;
    width:10px;
    height:10px;
    text-align:center;
    line-height:10px;
    font-size:5pt;
    font-family:Arial;
    color:#aaa;
    cursor:pointer;
    transition:all 0.1s ease;
    background-color:#fff;
}

.close_zoom:hover {
    color:#000;
}










/*
    -----------
    DOLNY ALERT
    -----------
*/

#bottom_alert_mask {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.5);
    transition:all 0.3s ease-in-out;
    z-index:199999;
    opacity:0;
    pointer-events:none;
}

#bottom_alert_mask.show {
    opacity:1;
    pointer-events:all;
}

#bottom_alert {
    position:fixed;
    left:0;
    bottom:-320px;
    width:100%;
    height:320px;
    background-color:#222;
    box-sizing:border-box;
    text-align:center;
    transition:all 0.2s ease-in-out;
    z-index:200000;
    border-top:5px solid #fff;
}

#bottom_alert.show {
    bottom:0;
}

#bottom_alert .alert_container {
    width:940px;
    height:250px;
    display:inline-block;
    text-align:right;
    margin:50px;
}

#bottom_alert .alert_title {
    font-family:titillium_webregular;
    font-size:18pt;
    color:#fff;
    float:right;
    clear:both;
    margin:0 0 25px 0;
    width:100%;
}

#bottom_alert .alert_info {
    font-family:titillium_webregular;
    font-size:10pt;
    color:#bbb;
    float:right;
    clear:both;
    margin:0 0 45px 0;
    width:100%;
    box-sizing:border-box;
    line-height:170%;
    padding:0 0 0 50%;
}










/* --   PRZESYŁANIE PROJEKTU OKŁADKI ETUI / PUDEŁKA   -- */

/*
#send_case_cover_project {
    display:none;
}

#send_case_cover_project.show {
    display:block;
}
*/




/* --   KOLORY OPRAW   -- */

/*
#cover_color_container {
    display:none;
}

#cover_color_container.show {
    display:block;
}
*/










/* --   WSPÓLNE STYLE PERSONALIZACJI   -- */

#pendrive_personalize_summary_container { width: 100%; }

/* --   KONTENERY Z DETALAMI OPCJI PERSONALIZACJI   -- */

/*
.options_details {
    position:absolute;
    opacity:0;
    pointer-events:none;
    transform:translate(0,-50px) scale(1.05,0.8);
    transform-origin:50% 0;
    transition:transform 0.1s ease-out 0s, opacity 0.05s ease-out;
    z-index:50;
}

.options_details.show {
    opacity:1;
    pointer-events:all;
    transform:translate(0,0) scale(1);
    transition:transform 0.25s cubic-bezier(0,.65,.27,1.48) 0s, opacity 0.25s cubic-bezier(0,.65,.27,1.48);
}
*/





/* --   OPCJE PENDRIVÓW   -- */

/*
#pendrive_capacity_container {
    display:none;
}

#pendrive_capacity_container.show {
    display:block;
}
*/



/* --   OPCJE NADRUKU UV NA ETUI / PUDEŁKU   -- */

/*
#case_uv_print_options {
    position:absolute;
    left:10px;
    top:349px;
}
*/



/* --   OPCJE GRAWERU NA ETUI / PUDEŁKU   -- */

/*
#case_engraver_options {
    position:absolute;
    left:10px;
    top:349px;
}

#case_engraver_font_info {
    margin:10px 0 0 0;
}

#case_engraver_font_info.show {
    display:block;
}
*/



/* --   OPCJE STEMPLA OKOLICZNOŚCIOWEGO NA ETUI   -- */

/*
#case_occasional_stamp_options {
    position:absolute;
    left:160px;
    top:349px;
}

#case_occasional_stamp_names_container {
    height:145px;
}

#case_occasional_stamp_names_summary {
    display:none;
}

#case_occasional_stamp_names_summary.show {
    display:block;
}
*/




/* --   OPCJE STEMPLA FIRMOWEGO NA ETUI   -- */

/*
#case_company_stamp_options {
    position:absolute;
    left:355px;
    top:349px;
}
*/



/* --   OPCJE NADRUKU UV NA PENDRIVIE   -- */

/*
#pendrive_uv_print_options {
    position:absolute;
    right:10px;
    top:354px;
}
*/



/* --   OPCJE GRAWERU NA PENDRIVIE   -- */

/*
#pendrive_engraver_options {
    position:absolute;
    right:10px;
    top:349px;
}

#pendrive_engraver_font_info {
    margin:10px 0 0 0;
    float:left;
}

#pendrive_engraver_font_info.show {
    display:block;
}
*/









/* --   OPCJE NADRUKU UV NA PUDEŁKU   -- */

#case_uv_print_options {
    position:relative;
    left:0;
    top:0;
}

/* --   OPCJE GRAWERU NA PUDEŁKU   -- */

#case_engraver_options {
    position:relative;
    left:0;
    top:0;
}

/* --   OPCJE STEMPLA OKOLICZNOŚCIOWEGO NA PUDEŁKU   -- */

#case_occasional_stamp_options {
    position:relative;
    /* left:160px; */
    top:0;
}

/* --   OPCJE STEMPLA FIRMOWEGO NA PUDEŁKU   -- */

#case_company_stamp_options {
    position:relative;
    /* left:240px; */
    top:0;
}

/* --   OPCJE NADRUKU UV NA PENDRIVIE   -- */

#pendrive_uv_print_options {
    position:relative;
    left:540px;
    top:0;
}

/* --   OPCJE GRAWERU NA PENDRIVIE   -- */

#pendrive_engraver_options {
    position:relative;
    left:540px;
    top:0;
}










/* --   CZCIONKI GRAWERU I NADRUKU UV   -- */

.text-lines-amount {
    position: absolute;
    right: 24px;
    top: 50%;
    margin: -16px 0 0 0;
}

.text-line-preview {
    color: #888;
    padding: 8px 0;
    min-height: 24px;
    line-height: 24px;
    float: left;
    width: 100%;
    box-sizing: content-box;
    z-index: 100;
}





/* --   LINIA TEKSTU W PERSONALIZACJI   -- */

input.text_line {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 0;
    z-index: 1;
    padding: 0;
    font-size: 16pt;
    font-weight: 600;
    background: none;
    cursor: pointer;
    font-family: titillium_websemibold;
    color: #;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
}

input.text_line:focus,
input.text_line:hover {
    background: rgba(0, 0, 0, .015);
}

input.text_line.trajan { font-family: trajan; }
input.text_line.amazone { font-family: amazone_bt; }
input.text_line.century_gothic { font-family: century_gothic; }
input.text_line.alexbrush { font-family: alex_brushregular; }
input.text_line.allura { font-family: alluraregular; }
input.text_line.birthstone { font-family: birthstoneregular; }
input.text_line.lt_afficher { font-family: lt_afficher_neuecaption; }
input.text_line.montserrat { font-family: montserrat_alternateslight; }
input.text_line.postscriptum { font-family: postscriptumlight; }
input.text_line.pupcat { font-family: pupcatregular; }
input.text_line.rachella { font-family: rachella_scriptregular; }





/* --   ROZMIARY CZCIONEK   -- */

.form_block input.text_line.pt8  { font-size: 8pt; }
.form_block input.text_line.pt9  { font-size: 9pt; }
.form_block input.text_line.pt10 { font-size: 10pt; }
.form_block input.text_line.pt11 { font-size: 11pt; }
.form_block input.text_line.pt12 { font-size: 12pt; }
.form_block input.text_line.pt14 { font-size: 14pt; }
.form_block input.text_line.pt16 { font-size: 16pt; }
.form_block input.text_line.pt18 { font-size: 18pt; }
.form_block input.text_line.pt20 { font-size: 20pt; }
.form_block input.text_line.pt24 { font-size: 24pt; }
.form_block input.text_line.pt30 { font-size: 30pt; }
.form_block input.text_line.pt36 { font-size: 36pt; }
.form_block input.text_line.pt48 { font-size: 48pt; }





/* --   PLACEHOLDER LINI TEKSTU, ZNIKA PO FOKUSIE NA LINI   -- */

.form_block .placeholder {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    transition: all .2s ease-out;
    color: rgba(0, 0, 0, .3);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12pt;
    font-family: titillium_websemibold;
    text-transform: uppercase;
    color: #;
}





/* --   KONTROLKI DO ZMIANY WIELKOŚCI TEKSTÓW W GRAWERZE I NADRUKU UV   -- */

.text-line-preview .ul-select {
    position: absolute;
    right: 24px;
    top: 50%;
    margin: -16px 0 0 0;
}

/* .engraver_text .ul-select {
    opacity: .5;
}

.engraver_text:hover .ul-select {
    opacity: 1;
} */










.personalize-options { display:none !important; }
.form-block-group.personalize-options.show-options { display:flex !important; }
.form_block.personalize-options.show-options { display:block !important; }





.options_details {
    position:relative;
    opacity:1;
    pointer-events:all;
    transform:none;
    transform-origin:50% 50%;
    transition:none;
    z-index:50;
}





#download_template {
    margin:16px 8px 0 0;
}

#download_instruction {
    margin:16px 0 0 0;
}


#form_container .summary .column .summary_block {
    display:block;
}

/*
#form_container.print_box .summary .column .summary_block {
    display:block;
}
*/










/* --   POLE LOGOWANIA SIĘ NA FTPA   -- */

.ftp-password-login {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, .9);
    border-radius: 5px;
    z-index: 200;
    transition: all .2s ease-out;
    opacity: 0;
}

.ftp-password-login:hover,
.ftp-password-login.verifying {
    opacity: 1;
}

.ftp-password-login * {
    transition: opacity .2s ease-out;
}

.ftp-password-login p {
    color: #eee;
    width: 75%;
    line-height: 150%;
}

.ftp-password-login .error {
    background: #a00;
    color: #fff;
    padding: 8px 12px;
    border-radius: 3px;
    position: absolute;
    width: auto;
}

.ftp-password-login .success {
    background: #0a0;
    color: #fff;
    padding: 8px;
    border-radius: 100%;
    position: absolute;
    width: auto;
}

.ftp-password-login input {
    border: 1px solid #777;
    color: #eee;
    padding: 8px;
    width: 200px;
    background: #555;
    margin: 16px 0;
    border-radius: 4px;
}

.ftp-password-login input:hover {
    border: 1px solid #888;
}

.ftp-password-login input:focus {
    background: #5a5a5a;
    border: 1px solid #999;
}










#prints_on_dvd_container {
    padding: 16px;
}

.dvd {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background: #eee;
    cursor: pointer;
    margin: 4px;
    display: none;
    transition: all .2s ease-out;
}

.dvd:hover {
    background: #e4e4e4;
    transition: none;
}

.dvd::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.dvd::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    border: 1px solid #fff;
    transform: translate(-50%, -50%);
}

.dvd.selected {
    /* background-image: url(../../.images/dvd_selected.jpg);
    background-size: 76px 76px; */
    background: #;
}





#prints_on_dvd_container.dvd1 .dvd:nth-child(1) { display: block; }

#prints_on_dvd_container.dvd2 .dvd:nth-child(1) { display: block; }
#prints_on_dvd_container.dvd2 .dvd:nth-child(2) { display: block; }

#prints_on_dvd_container.dvd3 .dvd:nth-child(1) { display: block; }
#prints_on_dvd_container.dvd3 .dvd:nth-child(2) { display: block; }
#prints_on_dvd_container.dvd3 .dvd:nth-child(3) { display: block; }

#prints_on_dvd_container.dvd4 .dvd { display: block; }










/* --   MAŁY TYTUŁ POLA FORMULARZA   -- */

.step_subtitle { background: #fafafa !important; }
.step_subtitle.no-line::after { display: none; }
.step_subtitle.no_visible { display: none; }
.step_subtitle.very_small.no-line {
    margin: 0 !important;
    background: none !important;
}

.field-subtitle {
    font-size: 12pt;
    padding: 0 24px;
    margin: 0;
    text-transform: uppercase;
    height: 40px;
    line-height: 40px;
    font-family: titillium_websemibold;
    color: #666;
    box-sizing: content-box;
    background: none !important;
    width: calc(100% - 48px);
    white-space: normal;
    text-align: left;
    z-index: 99999;
}

.field-subtitle.web { color: #e75400; }
.field-subtitle.underline { border-bottom: 1px solid #e1e1e1; }
.field-subtitle.overline { border-top: 1px solid #e1e1e1; }










/* --   PRZEŁĄCZNIKI   -- */

.switch-tabs {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.switch-tabs .switch-tab.outside-tab {
    position: absolute;
    top: 0 !important;
    border-right: 1px solid #ddd;
    border-radius: 5px !important;
}

.personalization-step-76.expand { height: 260px !important; }
.personalization-step-76.expand .switch-tabs { height: 160px !important; }

.switch-tabs .switch-tab {
    height: 40px;
    line-height: 38px;
    border: 1px solid #ddd;
    border-right: 0;
    cursor: pointer;
    background: #fff;
    padding: 0 24px;
    text-transform: uppercase;
    font-size: 10pt;
    font-family: titillium_webregular;
}

.switch-tabs .switch-tab:first-child { border-radius: 5px 0 0 5px; }
.switch-tabs .switch-tab:last-child {
    border-radius: 0 5px 5px 0;
    border-right: 1px solid #ddd;
}

.switch-tabs .switch-tab:hover { background: #f6f6f6; }
.switch-tabs .switch-tab.selected {
    background: #;
    border: 1px solid #;
    border-right: 0;
    color: #fff;
}

.switch-tabs .switch-tab.selected:last-child { border-right: 1px solid #; }
.switch-tab-container.underline { border-bottom: 1px solid #ddd; }
.switch-tab-container {
    width: 100%;
    background: #f4f4f4 !important;
}

.switch-tab-container .send_files:hover,
.switch-tab-container .send_files:hover .start_info {
    background: none !important;
}




















/* --   STYLE PRZENIESIONE Z PLIKU "ORDER.CSS"   -- */

.thumb-options {
    position: absolute;
    left: -24px;
    top: -10px;
    width: calc(100% + 48px);
    height: calc(100% + 20px);
    opacity: 0;
    pointer-events: none;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
    z-index: 9;
}

.options .thumb-options {
    opacity: 1;
    pointer-events: all;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
}

.thumb-options .options-wing {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 8px);
    min-height: 100%;
    background: #eeeded;
    opacity: 1;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    z-index: 104;
    border-radius: 6px;
}

.thumb-options .options-wing::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 6px;
    pointer-events: none;
}

.thumb-options .options-wing.left  { padding: 24px 32px 24px 24px; }
.thumb-options .options-wing.right { padding: 24px 24px 24px 32px; }

/* --   WYSUNIĘTE SKRZYDEŁKA Z OPCJAMI   -- */

.options .thumb-options .options-wing.left:not(:empty) {
    transform: translate(calc(-100% + 8px), 0);
    box-shadow: 0 8px 64px 1px rgba(0, 0, 0, .15);
}

.options .thumb-options .options-wing.right:not(:empty) {
    transform: translate(calc(100% - 16px), 0);
    box-shadow: 0 8px 64px 1px rgba(0, 0, 0, .15);
}

/* --   TYTUŁ SEKCJI W OPCJACH   -- */

.thumb-options .option-title {
    text-align: left;
    font-size: 11pt;
    font-family: titillium_webbold;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    width: 100%;
    color: #444;
}

.thumb-options .option-title:not(:first-child) {
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding: 16px 0 0 0;
    margin: 8px 0;
}

/* --   OPIS SEKCJI W OPCJACH OKŁADKI   -- */

.thumb-options .option-description {
    text-align: left;
    font-size: 10pt;
    font-family: titillium_webregular;
    margin: 0 0 16px 0;
    width: 100%;
    color: #444;
}

/* --   ELEMENTY INFO O PERSONALIZACJI   -- */

.thumb-options-v2 .parameter-details {
    width: 100%;
}

.thumb-options-v2 .quality-line {
    text-align: left;
    font-size: 10pt;
    width: 100%;
    height: 24px;
    line-height: 24px;
    color: #666;
    padding: 0 0 0 2px;
}

.thumb-options-v2 .quality-line.impossible { color: #c1000b; }
.thumb-options-v2 .quality-circle {
    width: 16px;
    height: 16px;
    border: 1px solid #fff;
    border-radius: 3px;
    margin: 4px 1px 0 0;
    cursor: pointer;
    font-size: 10pt;
}

.thumb-options-v2 .quality-circle:hover {
    width: 18px;
    height: 18px;
    margin: 3px 0 0 0;
}

.thumb-options-v2 .quality-circle.q1 { background: #c1000b; }
.thumb-options-v2 .quality-circle.q2 { background: #ffc700; }
.thumb-options-v2 .quality-circle.q3 { background: #00a820; }
.thumb-options-v2 .quality-circle.q0 { border: 0; }
.thumb-options-v2 .quality-circle.q0:hover {
    margin: 4px 1px 0 0;
    width: 16px;
    height: 16px;
}

.thumb-options-v2 .quality-circle.q0 svg {
    color: #c1000b !important;
    opacity: 1 !important;
    width: 16px;
    height: 16px;
    stroke-width: 3px;
}

.thumb-options-v2 .line { width: 100% !important; }
.thumb-options-v2 .n-checkbox {
    margin: 10px 0 0 0 !important;
    float: right !important;
}

.comunion-amount {
    position: absolute;
    border: 1px solid #ddd;
    right: 0;
    top: -4px;
    width: 48px;
    border-radius: 3px;
    padding: 6px;
}

.bambus-date {
    position: absolute;
    border: 1px solid #ddd;
    right: 0;
    top: -4px;
    width: 128px;
    border-radius: 3px;
    padding: 6px;
}









/* --   SELECT NA TABSACH   -- */

.tabs-select {
    width: 100%;
    min-height: 40px;
    list-style: none;
    font-size: 10pt;
    font-family: titillium_webregular;
    margin: 0 0 8px 0;
    background: #f1f1f1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

.tabs-select:last-child { margin: 0; }
.tabs-select li {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    padding: 0 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f1f1;
}

.tabs-select li.disabled {
    background: #ddd;
    color: #000;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .7);
    font-family: titillium_websemibold;
    opacity: .15 !important;
}

.tabs-select.tabs-1 li:nth-last-child(1) { border-bottom: 0; }
.tabs-select.tabs-1 li:last-child { border-radius: 0 0 4px 4px; }
.tabs-select.tabs-2 li:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .05); }
.tabs-select li:hover {
    background: #f8f8f8;
    color: #444;
}

.tabs-select li.selected {
    background: #444;
    color: #fff;
}

.tabs-select li.selected:hover { background: #555; }
.tabs-select li.selected.alone { border-radius: 5px; }
.tabs-select.tabs-2 li {
    width: 50%;
    line-height: 115%;
}

.tabs-select.tabs-3 li { width: 33.33333%; }
.tabs-select.tabs-4 li {
    width: 50%;
    line-height: 115%;
}





/* --   KOLORY NICI   -- */

.tabs-select.thread-colors {
    width: 100%;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.tabs-select.thread-colors li {
    width: 25%;
    height: auto;
    background: none;
    padding: 0;
    border: 0;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    z-index: 9;
}

.tabs-select.thread-colors li:nth-child(even) { border: 0; }
.tabs-select.thread-colors li::before {
    content: '';
    float: left;
    width: 100%;
    padding-top: 100%;
}

.tabs-select.thread-colors li.selected {
    background: none;
    cursor: default;
    z-index: 10;
    pointer-events: none;
}

.tabs-select.thread-colors li:hover {
    filter: brightness(1.1);
}

.tabs-select.thread-colors li img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 3px;
    box-sizing: content-box;
    z-index: 10;
    transition: all .05s cubic-bezier(.785, .135, .15, .86);
}

.tabs-select.thread-colors li.selected img {
    border-radius: 100%;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    transform: translate(-50%, -50%) scale(1.24);
}

.tabs-select.thread-colors li::after {
    opacity: 0;
    content: '';
    position: absolute;
    left: -10px;
    top: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 100%;
    box-sizing: border-box;
    background: #fafafa;
    z-index: 9;
    transition: all .05s cubic-bezier(.785, .135, .15, .86);
}

.tabs-select.thread-colors li.selected::after {
    opacity: 1;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}










/* --   TABSY Z PARAMETRAMI OKŁADKI   -- */

.big-tabs {
    border: 0 !important;
    height: 80px !important;
    line-height: 80px !important;
    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%) !important;
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%) !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%) !important;
}

.big-tabs .tab {
    padding: 0 24px !important;
    font-size: 12pt !important;
    font-family: titillium_websemibold !important;
    border: 0 !important;
    height: 80px !important;
    line-height: 80px !important
}

.big-tabs::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, 0) 100%);
}










/* --   ".THUMB.V2" - KLASA AKTUALIZUJĄCA STYLE   -- */

.thumb.v2::after { display: none; }
.thumb.v2.selected { cursor: default; }
.thumb.v2 {
    width: 204px;
    height: 264px;
/*  transition: all .3s cubic-bezier(.785, .135, .15, .86); */
}










/* --   MEDIUM   -- */

.thumb.v2.medium {
    width: 116px;
    height: 200px;
}

.thumb.v2.medium .thumb-content {
    text-align: center !important;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
    text-transform: uppercase;
}

.thumb.v2.medium .thumb-content .icon-added {
    width: 24px;
    height: 24px;
    right: 6px;
    top: 6px;
}

.thumb.v2.medium .thumb-content .icon-added svg {
    width: 16px;
    height: 16px;
}

.thumb.v2.medium.selected .thumb-content .icon-added { opacity: 1; }
.thumb.v2.medium.selected .thumb-content::after { padding: 8px !important; }
.thumb.v2.medium.selected .thumb-title,
.thumb.v2.medium.selected:hover .thumb-title {
    color: #;
    font-size: 10pt !important;
    font-family: titillium_websemibold !important;
}










/* --   STANDARD   -- */

.thumb.v2.standard {
    width: 160px;
    height: 240px;
}

.thumb.v2.standard .thumb-content {
    text-align: center !important;
 /* transition: all .1s cubic-bezier(.785, .135, .15, .86);
    text-transform: uppercase; */
}

.thumb.v2.standard .thumb-content .icon-added {
    width: 28px;
    height: 28px;
    right: 6px;
    top: 6px;
}

.thumb.v2.standard .thumb-content .icon-added svg {
    width: 18px;
    height: 18px;
}

.thumb.v2.standard.selected .thumb-content .icon-added { opacity: 1; }
.thumb.v2.standard.selected .thumb-content::after { padding: 8px !important; }
.thumb.v2.standard.selected .thumb-title,
.thumb.v2.standard.selected:hover .thumb-title {
    color: #;
    font-size: 10pt !important;
    font-family: titillium_websemibold !important;
}

.thumb.v2.standard.selected .thumb-content {
    width: calc(100% + 24px);
    transform: translate(-50%, -12px);
}










/* --   EXPANDY   -- */

.thumb.v2.expand { height: 340px; }



/* --   WYGASZONE MINIATURY DLA DETALI ZAZNACZONEGO ELEMENTU (MOCNE WYGASZENIE)   -- */

.thumb.v2:not(.selected).back-off-for-options {
    opacity: .75;
    filter: grayscale(50%);
}

.thumb.v2:not(.selected).back-off-for-options:hover {
    opacity: .85;
}

/* --   WYSOKOŚĆ RÓWNA SZEROKOŚCI   -- */

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





/* --   BLOKADA NIEDOSTĘPNEGO PARAMETRU   -- */

.thumb.v2 .thumb-content .disabled-notice { display: none; }
.thumb.v2.disabled-thumb { pointer-events: none; }
.thumb.v2.disabled-thumb .thumb-content .disabled-notice {
    display: block;
    color: #d00;
    z-index: 106;
    font-family: titillium_websemibold;
    opacity: 1;
    filter: grayscale(0);
    padding: 0 8px;
    margin: 8px 0 0 0;
    text-transform: uppercase;
    font-size: 9pt;
}

.thumb.v2.disabled-thumb .thumb-content .thumb-photo {
    filter: grayscale(100%);
    opacity: .25 !important;
    pointer-events: none;
}

.thumb.v2.disabled-thumb .thumb-content .icon-added,
.thumb.v2.disabled-thumb .thumb-content .thumb-description,
.thumb.v2.disabled-thumb .thumb-content .thumb-description-v2 { display: none; }
.thumb.v2.disabled-thumb .thumb-content .thumb-symbol { color: #bbb !important; }










/* --   ".THUMB-CONTENT"   -- */

.NUGEN .thumb.v2 .thumb-content {
    width: 100% !important;
    transform: translate(-50%, 0) !important;
    padding: 0 !important;
    transition: none !important;
}

.NUGEN .thumb.v2 .thumb-content .horizontal-mask {
    display: none !important;
}










.thumb.v2 .thumb-content.centered { text-align: center; }
.thumb.v2 .thumb-content.coupon-code-content { padding: 0 0 24px 0 !important; }
.thumb.v2 .thumb-content {
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    width: 100%;
 /* transition: all .3s cubic-bezier(.785, .135, .15, .86); */
    z-index: 105;
    text-align: left;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* --   SELECTED   -- */

.thumb.v2.expand.selected .thumb-content {
    width: calc(100% + 40px);
    transform: translate(-50%, -20px);
    padding: 0 0 56px 0;
}

.thumb.v2.expand.fixed-expand.selected.added.coupon-code-ok .thumb-content,
.thumb.v2.expand.fixed-expand.selected.added.coupon-code-error .thumb-content {
    padding: 0 0 24px 0 !important;
}

.thumb.v2.expand.fixed-expand.selected.added .thumb-content { padding: 0 0 56px 0 !important; }
.thumb.v2 .thumb-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    box-sizing: content-box;
    padding: 0;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    background: #fff;
 /* transition: all .15s cubic-bezier(.785, .135, .15, .86); */
}

.thumb.v2:hover .thumb-content::after {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
    background: #fff;
}

.thumb.v2.selected .thumb-content::after,
.thumb.v2.selected:hover .thumb-content::after {
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    opacity: 1;
    padding: 12px;
}

/* --   ZMIANY STYLI DLA IKONEK Z FORMATAMI   -- */

.thumb.format .thumb-content,
.thumb.package .thumb-content {
    padding: 0 0 32px 0;
}

.thumb.format.selected .thumb-content,
.thumb.package.selected .thumb-content {
    padding: 0 0 56px 0;
}

.thumb.format.added .thumb-content,
.thumb.package.added .thumb-content {
    background: rgba(0, 0, 0, .025);
}

.thumb.format:hover .thumb-content,
.thumb.format:hover .thumb-content {
    background: rgba(0, 0, 0, .015);
}

.thumb.format.selected.added .thumb-content,
.thumb.format.selected.added .thumb-content {
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

/* #new_container .album-format .thumb .thumb-content { padding: 0 0 32px 0; }
#new_container .album-format .thumb.selected .thumb-content { padding: 0 0 56px 0; }
#new_container .album-format .thumb.added .thumb-content { background: rgba(0, 0, 0, .025); }
#new_container .album-format .thumb:hover .thumb-content { background: rgba(0, 0, 0, .015); }
#new_container .album-format .thumb.selected.added .thumb-content { transition: all .3s cubic-bezier(.785, .135, .15, .86); } */

/* --   IKONKI Z ZESTAWAMI   -- */

/* .thumb.package .thumb-css-3d {
    background: #edeef1;
    border-radius: 4px;
}

.thumb.package .product-icon {
    left: 16px !important;
    top: 72px !important;
}

.thumb.package.added .thumb-content {
    padding: 0 0 56px 0 !important;
} */










/* --   ".THUMB-SYMBOL"   -- */

.thumb.v2 .thumb-symbol {
    width: 100%;
    font-size: 12pt;
    color: #666;
    line-height: 130%;
    z-index: 12;
    padding: 16px 8px 8px 8px;
    font-family: titillium_websemibold;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

/* --   ".THUMB-PREVIOUS-SYMBOL"   -- */

.thumb.v2 .thumb-previous-symbol {
    position: absolute;
    right: 8px;
    top: 16px;
    font-size: 12pt;
    color: #bbb;
    line-height: 24px;
    z-index: 12;
    font-family: titillium_websemibold;
    opacity: 0;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
}

/* --   NOT SELECTED   -- */

.thumb.v2:not(.selected):hover .thumb-symbol { color: #444; }

/* --   SELECTED   -- */

.thumb.v2.selected .thumb-previous-symbol { opacity: 1; }
.thumb.v2.selected .thumb-symbol,
.thumb.v2.selected:hover .thumb-symbol {
    color: #;
    width: 100%;
}










/* --   ".THUMB-TITLE"   -- */

.thumb.v2 .thumb-title {
    font-size: 12pt;
    color: #666;
    width: 100%;
    line-height: 20px;
    z-index: 12;
    padding: 16px 2px 8px 2px;
    font-family: titillium_websemibold;
}

.thumb.v2 .thumb-title p {
    width: 188px;
}

/* --   ".THUMB-TITLE" - SMALL   -- */

.thumb.v2 .thumb-title.small {
    font-family: titillium_webregular;
    font-size: 10pt;
}

/* --   NOT SELECTED   -- */

.thumb.v2:not(.selected):hover .thumb-title { color: #444; }

/* --   SELECTED   -- */

.thumb.v2.selected .thumb-title,
.thumb.v2.selected:hover .thumb-title {
    color: #;
    font-size: 12pt !important;
    font-family: titillium_websemibold !important;
    padding: 16px 2px 8px 2px;
}

/* #new_container .album-block-addons .thumb.v2.added .thumb-title,
#new_container .album-block-addons .thumb.v2.selected .thumb-title,
#new_container .album-block-addons .thumb.v2.selected:hover .thumb-title {
    color: #000006;
    font-size: 10pt !important;
    font-family: titillium_websemibold;
} */









/* --   ".THUMB-PRICE"   -- */

/* .thumb.v2 .thumb-price {
    width: auto !important;
    height: 32px;
    line-height: 28px;
    background: #fff;
    color: #;
    border: 2px solid #;
    padding: 0 12px;
    border-radius: 4px;
    font-family: titillium_websemibold;
    font-size: 12pt;
    left: 50%;
    transform: translate(-50%, 0);
    text-transform: uppercase;
}

.thumb.v2 .thumb-price b {
    width: auto !important;
    font-family: Arial;
    font-weight: 600;
    font-size: 11pt;
    line-height: 35px;
    margin: 0 4px 0 0;
} */










/* --   ".THUMB-DESCRIPTION"   -- */

.thumb.v2 .thumb-description {
    font-size: 10pt;
    color: #666;
    width: 100%;
    line-height: 150%;
    z-index: 11;
    margin: 8px 0 0 0;
    font-family: titillium_webregular;
 /* transition: all .3s cubic-bezier(.785, .135, .15, .86), opacity .1s cubic-bezier(.785, .135, .15, .86); */
}

.thumb.v2 .thumb-description span,
.thumb.v2 .thumb-description b {
    width: 100%;
    padding: 0 8px;
}

.thumb.v2 .thumb-description.hide { margin: -80px 0 0 0; }
.thumb.v2 .thumb-description .short {
    position: absolute;
 /* transition: all .3s cubic-bezier(.785, .135, .15, .86) .3s; */
    padding: 0 8px;
}

.thumb.v2 .thumb-description > .full {
    width: 100%;
    opacity: 0;
    margin: -100% 0 0 0;
 /* transition: opacity .3s cubic-bezier(.785, .135, .15, .86), margin .2s cubic-bezier(.785, .135, .15, .86) .4s; */
}

/* --   SELECTED   -- */

.thumb.v2.selected .thumb-description.hide {
    opacity: 1 !important;
    margin: 8px 0 0 0;
 /* transition: all .3s cubic-bezier(.785, .135, .15, .86), opacity .2s cubic-bezier(.785, .135, .15, .86) .2s; */
}

.thumb.v2.selected .thumb-description .short {
    opacity: 0;
 /* transition: all .3s cubic-bezier(.785, .135, .15, .86); */
}

.thumb.v2.selected .thumb-description > .full span { padding: 0 8px; }
.thumb.v2.selected .thumb-description > .full {
    opacity: 1;
    margin: 0;
    padding: 0 8px;
 /* transition: opacity .3s cubic-bezier(.785, .135, .15, .86) .4s, margin .3s cubic-bezier(.785, .135, .15, .86); */
}





/* --   ".THUMB-DESCRIPTION-V2"   -- */

.thumb.v2 .thumb-description-v2 {
    font-size: 10pt;
    color: #666;
    line-height: 135%;
    width: 100%;
    font-family: titillium_webregular;
    padding: 8px;
    z-index: 200;
}

.thumb.v2 .thumb-description-v2 b,
.thumb.v2 .thumb-description-v2 span {
    width: 100%;
    line-height: 150%;
}

.thumb.v2 .thumb-description-v2.fix-204 { width: 204px; }
.thumb.v2 .thumb-description-v2 div { width: 100%; }
.thumb.v2 .thumb-description-v2 .inline {
    display: inline;
    width: auto;
    float: none;
}










/* --   ".THUMB-PHOTO"   -- */

.thumb.v2 .thumb-photo.gray-icon { background: #fff; }
.thumb.v2 .thumb-photo {
    width: 100%;
    background-image: url(../../.media/.images/no-photo-bg.png);
    overflow: hidden;
    z-index: 12;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumb.v2:hover .thumb-photo img { transform: scale(1.1); }
.thumb.v2 .thumb-photo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
 /* transition: all .1s cubic-bezier(.785, .135, .15, .86); */
    z-index: 9;
}

.thumb.v2.stamp .thumb-photo {
    background-image: none;
    background: #fff;
}

.thumb.v2.stamp.selected .thumb-photo img { transform: scale(.85); }
.thumb.v2.stamp .thumb-photo:hover img { transform: scale(.85); }
.thumb.v2.stamp .thumb-photo img {
    object-fit: contain;
    transform: scale(.75);
}

.thumb.v2:hover .thumb-photo .thumb-option-src { transform: scale(1.1); }
.thumb.v2 .thumb-photo .thumb-option-src {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .1s cubic-bezier(.785, .135, .15, .86), opacity .3s cubic-bezier(.785, .135, .15, .86);
    pointer-events: none;
    z-index: 10;
}

.thumb.v2 .thumb-photo > svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 128px;
    height: 128px;
    padding: 48px;
    margin: -64px 0 0 -64px;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
    color: #fff;
    opacity: 0;
    transform: scale(.75);
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
}

/* --   SVG JAKO OBRAZEK MINIATURY   -- */

.thumb.v2 .thumb-photo .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #eee;
    font-size: 12pt;
    font-family: titillium_websemibold;
    color: #666;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumb.v2 .thumb-photo .img.border {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
}

.thumb.v2 .thumb-photo .img svg {
    width: 80px;
    height: 80px;
    padding: 0;
    margin: 0;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
    color: #666;
    opacity: 1;
    transform: scale(1);
    cursor: pointer;
    stroke-width: 1px;
}

.thumb.v2:hover .thumb-photo .img svg {
    transform: scale(1.1);
}

.thumb.v2 .thumb-photo .fadeout {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(235, 235, 235, .25) 8px, rgba(235, 235, 235, .25) 16px);
    /* background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(235, 235, 235, .25) 8px, rgba(235, 235, 235, .25) 16px); */
}

/* --   SELECTED   -- */

.thumb.v2.selected .thumb-photo { cursor: pointer; }
.thumb.v2.selected .thumb-photo img { transform: scale(1.2); }
.thumb.v2.selected .thumb-photo > svg { opacity: .25; }
.thumb.v2.selected .thumb-photo:hover > svg { transform: scale(1); opacity: .5; }
.thumb.v2.selected .thumb-photo .img svg,
.thumb.v2.selected .thumb-photo:hover .img svg {
    color: #;
    transform: scale(1.1);
}










/* --   ".THUMB-CSS-3D"   -- */

.thumb.v2 .thumb-css-3d {
    width: 100%;
    height: 100%;
    z-index: 12;
}

.thumb.v2 .product-icon {
    position: absolute;
    left: 0;
    top: 112px;
    width: 100%;
    height: 100%;
    z-index: 12;
    transform: scale(1.1);
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

.thumb.v2 .product-icon::after { display: none; }

/* --   SELECTED   -- */

.thumb.v2.selected .product-icon { z-index: 111; }
.thumb.v2.selected .product-icon .css-3d-model .album .shadow { box-shadow: 0 0 80px 1px rgba(0, 0, 0, .6); }
.thumb.v2.selected .product-icon .css-3d-model { transform: scale(1.2); filter: brightness(1.05); }
.thumb.v2:hover .product-icon .css-3d-model { filter: brightness(1.05); }










/* --   ".THUMBS-v2.TINY-V2" - MAŁE MINAITURY DLA KOLORÓW   -- */

.thumb.v2.tiny-v2 {
    width: 144px;
    height: 208px;
    margin: 0;
}

.thumb.v2.tiny-v2:hover::before { display: none; }
.thumb.v2.tiny-v2 .thumb-symbol {
    width: 100%;
    padding: 12px 8px 8px 8px;
    font-size: 10pt;
    font-family: titillium_webregular;
    z-index: 15;
}

.thumb.v2.tiny-v2 .color-title {
    width: 100%;
    /* transform: translate(0, -4px); */
    font-size: 10pt;
}

.thumb.v2.tiny-v2 .thumb-photo { border-radius: 0; }
/* .thumb.v2.tiny-v2:nth-child(6n+1) .thumb-photo { border-radius: 4px 0 0 4px; }
.thumb.v2.tiny-v2:last-child .thumb-photo { border-radius: 0 4px 4px 0; }
.thumb.v2.tiny-v2:nth-child(6n) .thumb-photo { border-radius: 0 4px 4px 0; } */
.thumb.v2.tiny-v2 .thumb-photo img {
    left: 50%;
    top: 50%;
    width: 264px;
    height: 264px;
    transform: translate(-50%, -50%);
    object-fit: fill;
}

/* --   SELECTED   -- */

.thumb.v2.tiny-v2.selected .thumb-content {
    width: calc(100% + 120px);
    transform: translate(-50%, -32px);
    padding: 0 0 56px 0;
}

.thumb.v2.tiny-v2.selected .thumb-symbol,
.thumb.v2.tiny-v2.selected:hover .thumb-symbol {
    font-size: 16pt;
    font-family: titillium_webbold;
    transform: translate(0, 8px);
    padding: 12px 8px 8px 8px;
    width: 100%;
}

.thumb.v2.tiny-v2.selected .thumb-photo { border-radius: 4px; }
.thumb.v2.tiny-v2.selected .thumb-content::after {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    padding: 12px;
}

.thumb.color.selected:hover::after { display: none !important; }
.thumb.color.selected { transform: scale(1) !important; }





/* .inner-tabs-mask {
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: 100;
    transition: all .15s ease-out;
}

.inner-tabs-mask .inner-tabs {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    margin: 16px 0;
    background: #f1f1f1;
}

.thumb.v2.added .inner-tabs-mask {
    height: 72px;
} */











/* --   PRZYCISK "DODAJ" W DODATKACH DO BLOKU ALBUMU   -- */

.thumb.v2 .add-package,
.thumb.v2 .add-album-block-addon {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    z-index: 100;
    transition: all .15s ease-out;
}

.thumb.v2.selected .add-package,
.thumb.v2.selected .add-album-block-addon {
    opacity: 1;
    margin: 0;
}

.thumb.v2.added .add-package {
    pointer-events: none;
}

.thumb.v2.added .add-album-block-addon {
    opacity: 0;
    pointer-events: none;
}

/* --   REMOVE   -- */

.thumb.v2 .remove-package,
.thumb.v2 .remove-album-block-addon {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    z-index: 101;
    transition: all .15s ease-out;
    pointer-events: none;
    margin: 0;
}

.thumb.v2.added.selected .remove-package {
    opacity: 0;
}

.thumb.v2.added.selected .remove-album-block-addon {
    opacity: 1;
}

.thumb.v2.added .remove-package,
.thumb.v2.added .remove-album-block-addon {
    pointer-events: all;
}










/* --   PRZYCISK DODAJ / WYBIERZ / USUŃ   -- */

.thumb .btt-set,
.thumb .btt-set-go-next,
.thumb .btt-set-unset {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    z-index: 100;
    margin: 0;
    text-transform: uppercase;
    pointer-events: none;
}

.thumb .btt-set.relative,
.thumb .btt-set-go-next.relative,
.thumb .btt-set-unset.relative {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 24px 0 0 0;
}

.thumb.selected .btt-set,
.thumb.selected .btt-set-go-next,
.thumb.selected .btt-set-unset {
    opacity: 1;
    transition: all .15s cubic-bezier(.785, .135, .15, .86) !important;
    pointer-events: all;
}

.thumb.added .btt-set {
    opacity: 1;
    pointer-events: all;
}

/* --   ILOŚĆ WYBRANYCH SZTUK   -- */

.thumb.added .icon-amount { opacity: 1; }
.thumb .icon-amount {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 100%;
    color: #666;
    opacity: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, .1);
}










/* --   OZNACZENIE WYBRANEGO PARAMETRU   -- */

.form_block .icon-added,
.thumb .icon-added {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    background: #;
    border-radius: 100%;
    color: #fff;
    opacity: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumb .icon-added svg.feather-x { opacity: 0 !important; }

/* --   CENA - DOPŁATA DO STEMPLA FIRMOWEGO   -- */

.thumb.stamp .price {
    position: absolute;
    left: 4px;
    bottom: 4px;
    background: #;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 12;
}

.thumb.stamp .counter {
    position: absolute;
    left: 4px;
    top: 4px;
    background: #eee;
    color: #888;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    z-index: 12;
}

/* --   BŁĘDNY KOD   -- */

.thumb.coupon-code-error .thumb-photo .img svg,
.thumb.coupon-code-error .thumb-photo:hover .img svg {
    color: #f00000 !important;
}

.thumb.coupon-code-error .thumb-symbol { color: #f00000 !important; }
.thumb.coupon-code-error .icon-added svg.feather-x { opacity: 1 !important; }
.thumb.coupon-code-error .icon-added svg.feather-check { opacity: 0 !important; }
.thumb.coupon-code-error .icon-added {
    background: #f00000 !important;
    opacity: 1 !important;
}

/* --   KOD PRAWIDŁOWY   -- */

.thumb.coupon-code-ok .thumb-photo .img svg,
.thumb.coupon-code-ok .thumb-photo:hover .img svg {
    color: #00b711 !important;
}

.thumb.coupon-code-ok .thumb-symbol { color: #00b711 !important; }
.thumb.coupon-code-ok .icon-added {
    background: #00b711 !important;
    opacity: 1 !important;
}

.form_block .icon-added svg,
.thumb .icon-added svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    opacity: 1 !important;
}

.form_block.added .icon-added,
.thumb.added .icon-added {
    opacity: 1;
    animation-duration: .3s;
    animation-name: bounceIn;
    animation-fill-mode: both;
    pointer-events: all;
}





/* --   IKONKA ADNOTACJI   -- */

.thumb .icon-notice {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    background: #c51c00;
    border-radius: 100%;
    color: #fff;
    opacity: 1;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.thumb .icon-notice svg {
    width: 18px;
    height: 18px;
    opacity: 1 !important;
}

.thumb .new-label {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    z-index: 15;
}

.thumb .new-label svg {
    width: 40px;
    height: 40px;
}





/* --   IKONKI JAKOŚCI PERSONALIZACJI   -- */

.thumb .icon-quality {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    color: #fff;
    opacity: 1;
    z-index: 100;
    justify-content: center;
    align-items: center;
    display: none;
}

.thumb.selected .icon-quality { opacity: 0; }
.thumb.q1 .icon-quality.q1 { display: flex; }
.thumb.q2 .icon-quality.q2 { display: flex; }
.thumb.q3 .icon-quality.q3 { display: flex; }
.thumb .icon-quality.q1 { background: #c1000b; }
.thumb .icon-quality.q2 { background: #ffc700; color: #666; }
.thumb .icon-quality.q3 { background: #00a820; }
.thumb .icon-quality svg {
    width: 24px;
    height: 24px;
}

.thumb .unavailable {
    width: 100%;
    color: #c1000b;
    line-height: 125%;
    text-transform: none;
    transform: translate(0, -4px);
    display: none;
}

.thumb.disabled .unavailable { display: block; }





/* --   IKONKA DOSTĘPNOŚCI PROMOCJI NA MNIEJSZE ALBUMY   -- */

.thumb .icon-promo-available {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 16px;
    top: 16px;
    z-index: 13;
    cursor: pointer;
}

.thumb .icon-promo-available svg {
    width: 24px;
    height: 24px;
    color: #aaa;
    pointer-events: none;
}





/* --   PRZEJDŹ DO NASTĘPNEGO KROKU   -- */

.thumb .thumb-next-personalization-step,
.thumb .thumb-next-step {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    z-index: 100;
    margin: 0;
    text-transform: uppercase;
    pointer-events: none;
 /* transition: all .3s cubic-bezier(.785, .135, .15, .86); */
}

.thumb .thumb-next-personalization-step b,
.thumb .thumb-next-step b {
    line-height: 40px;
    text-transform: uppercase;
}

.thumb.added.selected .thumb-next-personalization-step,
.thumb.added.selected .thumb-next-step {
    opacity: 1;
    pointer-events: all;
 /* transition: all .1s cubic-bezier(.785, .135, .15, .86) !important; */
}










/* --   POBIERANIE SZABLONU ZDJĘCIA NA OKŁADKĘ   -- */

.options-wing-v2 .download_template {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin: 0 0 8px 0;
    background: #f1f1f1;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    text-align: center;
    /* border: 1px solid rgba(0, 0, 0, .025); */
}

.options-wing-v2 .download_template.no-dimension {
    color: #aaa;
    pointer-events: none;
}

.options-wing-v2 .download_template.lock-download {
    pointer-events: none;
    opacity: .5;
}

.options-wing-v2 .download_template .no-template {
    position: absolute;
    color: #888;
    right: 2px;
    top: -48px;
    font-size: 10pt;
    font-family: titillium_webregular;
}

.options-wing-v2 .download_template .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.options-wing-v2 .download_template:hover {
    background: #f6f6f6;
    color: #666;
}

.options-wing-v2 .download_template .download-template-label {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #666;
    transition: transform .3s cubic-bezier(.785, .135, .15, .86);
    transform: translate(0, -40px);
    font-size: 10pt;
    font-family: titillium_webregular;
    display: flex;
    justify-content: center;
    align-items: center;
}

.options-wing-v2 .download_template .download-template-label b {
    font-weight: 100;
    margin: 0 12px 0 0;
    font-family: titillium_webregular;
}

.options-wing-v2 .download_template .download-template-label svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
}

.options-wing-v2 .download_template span.dimensions {
    font-size: 12pt;
    font-family: titillium_websemibold;
    color: #666;
    transition: transform .3s cubic-bezier(.785, .135, .15, .86);
}

.options-wing-v2 .download_template span.download-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
}

.options-wing-v2 .download_template span.download-icon svg {
    width: 24px;
    height: 24px;
}

/* .options-wing-v2 .download_template:hover::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #88;
} */

.options-wing-v2 .download_template:hover .download-template-label {
    transform: translate(0, 0);
    color: #;
}

.options-wing-v2 .download_template:hover span { transform: translate(0, 40px); }










/* --   POLE DO WYSYŁANIA PLIKÓW W LEWYM SKRZYDLE   -- */

.options-wing-v2 .send_files {
    width: 100%;
    height: 40px;
    list-style: none;
    font-size: 10pt;
    font-family: titillium_webregular;
    margin: 0 0 8px 0;
    background: #f1f1f1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}

.options-wing-v2 .send_files::before { display: none; }

.options-wing-v2 .start_info.off { display: block !important; }
.options-wing-v2 .start_info.hide {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

.options-wing-v2 .start_info {
    height: 40px !important;
    border-radius: 6px 0 0 6px;
}

.options-wing-v2 .send_files .start_info .icon-send,
.options-wing-v2 .send_files .start_info .icon-sending,
.options-wing-v2 .send_files .start_info .icon-sended {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
    display: flex;
    justify-content: center;
    align-items: center;
}

.options-wing-v2 .send_files .start_info svg { margin: 0 !important; }
.options-wing-v2 .send_files .start_info .icon-send svg {
    width: 24px;
    height: 24px;
    color: #666;
    stroke-width: 2px;
}

.options-wing-v2 .send_files .start_info .icon-sended svg {
    background: #;
    color: #fff;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    padding: 4px;
    box-sizing: content-box;
    stroke-width: 2px;
}

.options-wing-v2 .send_files .start_info .icon-sending .span-loader {
    width: 24px;
    height: 24px;
}

.options-wing-v2 .send_files .dz-preview .dz-image { display: none; }
.options-wing-v2 .send_files .dz-preview .dz-details { display: none; }
.options-wing-v2 .send_files:hover .start_info svg {
    color: #;
    transform: scale(1);
}

.options-wing-v2 .send_files:hover .start_info .icon-sended svg {
    color: #fff !important;
}

.options-wing-v2 .send_files .dz-preview {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    border: 0;
    background: none;
    display: block;
}

.options-wing-v2 .send_files .dz-preview .dz-progress {
    left: 0;
    top: 0;
    height: 40px;
    width: 100%;
}

.options-wing-v2 .send_files .dz-preview .dz-progress .dz-upload {
    left: 0;
    top: 0;
    height: 40px;
    width: 10px;
    background: rgba(0, 0, 0, .1);
}










/* --   POLE ILOŚĆ Z PRZYCISKAMI PLUS I MINUS   -- */

.amount-container { min-height: 104px !important; }
.amount-container .container { padding: 0 !important; }
.amount-container .amount:focus { border: 1px solid rgba(0, 0, 0, .1); }
.amount-container .amount {
    width: 80px;
    height: 80px;
    line-height: 80px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 5px;
    font-size: 24pt;
    font-family: Arial;
    font-weight: 600;
    color: #;
    margin: 0 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0);
}

.amount-container .minus,
.amount-container .plus {
    width: 48px;
    height: 48px;
    line-height: 46px;
    border-radius: 5px;
    font-size: 24pt;
    font-family: Arial;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

.amount-container .minus {
    line-height: 38px;
    font-size: 32pt;
}

.amount-container .minus:hover,
.amount-container .plus:hover {
    background: #fafafa;
    color: #444;
}










/* --   POLE Z INFORMACJĄ O METODACH PRZESŁANIA PLIKÓW   -- */

#other_files_sending {
    min-height: 160px !important;
}

.form_block .col.w50p {
    width: 50%;
    height: 100%;
}

.step-instructions {
    width: 800px;
    text-align: center;
    color: #666;
    line-height: 150%;
    font-size: 11pt;
    font-family: titillium_weblight;
}

.step-instructions b { float: none; }
.step-instructions .editor { width: 100%; }
.collection-description-form {
    width: 600px;
    margin: 0 140px 32px 140px;
}

#send_album_project_files_container { min-height: 320px !important; }
#send_album_project_files { height: 320px; }
#send_album_project_files .start_info { height: 320px !important; }
.form-block-group { margin: 0; }
#new_container .col-half { width: 472px; }
#new_container .col-half.auto-h { height: auto; }

#later_clients_names,
#other_clients_names,
#we_clients_names,
#ftp_clients_names,
#ftp_folder_name,
#other_link,
#zalamo_link,
#wetransfer_link {
    width: calc(100% - 48px);
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    padding: 0 8px;
}

#projects-container {
    width: 320px;
    z-index: 10;
}

#projects-container.expanded #show-projects-list svg { transform: rotate(180deg); }
#show-projects-list:hover { transform: scale(1.2); }
#show-projects-list {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    color: #;
    cursor: pointer;
}

#projects-container.expanded #projects-list {
 /* opacity: 1; */
    transform: scale(1);
    pointer-events: all;
}

#projects-list {
    position: absolute;
    left: 0;
    top: calc(100% - 4px);
    width: 100%;
    min-height: 40px;
    background: #f1f1f1;
    border: 2px solid #;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    pointer-events: none;
 /* opacity: 0; */
    transform: scale(1, 0);
    transform-origin: top;
    transition-duration: .05s;
}

#projects-list .project:first-child { padding-top: 2px; }
#projects-list .project:last-child { padding-bottom: 2px; }
#projects-list .project:hover { font-family: titillium_websemibold; background: rgba(0, 0, 0, .025); }
#projects-list .project {
    width: 100%;
    font-family: titillium_webregular;
    font-size: 10pt;
    padding: 0 12px;
    line-height: 36px;
    color: #666;
    cursor: pointer;
    text-align: left;
}

#project_names2,
#project_names {
    width: 320px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    background: #f1f1f1;
    border: 2px solid #;
    padding: 0 12px;
    font-size: 12pt;
    font-family: titillium_websemibold;
    color: #666;
}

#digitalalbum_creator_order_id {
    width: 80px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    padding: 0 8px;
}

.send_files::after {
    display: none;
}










/* --   LISTA UPLOADOWANYCH PLIKÓW Z PROJEKTEM KLIENTA   -- */

#send_project_files {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

#send_project_files .dz-preview {
    display: none !important;
}

#uploaded_files_list {
    width: calc(100% - 16px);
    min-height: 88px;
    border-radius: 4px;
    background: #eee;
    text-align: center;
    color: #666;
    line-height: 150%;
    font-size: 10pt;
    font-family: titillium_webregular;
    z-index: 100;
    margin: -24px 8px 0 8px;
}

#uploaded_files_list .files { width: 100%; }
#uploaded_files_list .files .file {
    width: 100%;
    border-top: 1px solid #e1e1e1;
    height: 40px;
    line-height: 40px;
    color: #888;
    font-family: titillium_weblight;
    font-size: 10pt;
    cursor: pointer;
}

#uploaded_files_list .files .file:hover {
    background: #f1f1f1;
}

#delete-temporary-files {
    position: absolute;
    right: 12px;
    top: 9px;
}








/* --   MASKA UCINAJĄCA TREŚĆ W POZIOMIE   -- */

.horizontal-mask {
    width: calc(100% + 16px);
    margin: 0 0 0 -8px;
    padding: 0 8px 8px 8px;
    height: auto;
    overflow: hidden;
    z-index: 11;
}

.horizontal-mask.full {
    width: calc(100% + 24px);
    left: -12px;
    margin: 0;
    padding: 0;
}

.horizontal-mask.package-option { display: none !important; }
.show-package-options .horizontal-mask.package-option { display: block !important; }

.mask-content {
    width: 100%;
    margin: -100% 0 0 0;
    padding: 0 0 8px 0;
}

.selected .mask-content.when-selected { margin: 0 !important; }
.selected.added .mask-content.when-added { margin: 0; }

.mask-content .line2 {
    padding: 0 8px;
}

.mask-content .line2 p {
    width: 190px;
    color: #666;
    margin: 4px 0 0 0;
}





/* --   WYSUWANE OPCJE BOXÓW   -- */

.thumb-options-v2 {
    position: absolute;
    left: -12px;
    top: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    opacity: 0;
    pointer-events: none;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
    z-index: 9;
}

.added.selected .thumb-options-v2 {
    opacity: 1;
    pointer-events: all;
}

.options-wing-v2 {
    position: absolute;
    left: -8px;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) .2s;
    z-index: 104;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0);
    padding: 8px 16px 8px 24px;
    text-align: left;
}

.added.selected .appended .options-wing-v2.right {
    transform: translate(0, 0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
}

.added.selected .options-wing-v2.right {
    transform: translate(100%, 0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    opacity: 1;
    pointer-events: all;
}

.options-wing-v2.left {
    left: auto;
    right: -8px;
    padding: 8px 24px 8px 16px;
    border-radius: 6px 0 0 6px;
}

.added.selected .appended .options-wing-v2.left {
    transform: translate(0, 0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
}

.added.selected .options-wing-v2.left {
    transform: translate(-100%, 0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    opacity: 1;
    pointer-events: all;
}





.options-wing-v2 .option {
    width: 100%;
}





.option-title-v2 {
    font-family: titillium_webbold;
    font-size: 11pt;
    color: #666;
    text-transform: uppercase;
    z-index: 11;
    width: 100%;
    margin: 12px 0 0 0;
}

.personalization-table .option-title-v2 { margin: 6px 0; }
.option-title-v2.web { color: #; }

.option-description-v2.green { color: #0a7900; }
.option-description-v2 {
    font-family: titillium_webregular;
    font-size: 10pt;
    color: #666;
    line-height: 135%;
}

.options-wing-v2 .option-title-v2 { padding: 0 0 0 2px; }
.options-wing-v2 .option-description-v2 { padding: 0 0 0 2px; }

.mask-content .option-title-v2 { padding: 0 8px; }
.mask-content .option-description-v2 { padding: 0 8px; }

.options-wing-v2 textarea {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f6f6f6;
    color: #666;
    padding: 12px;
    font-family: AriaL;
    font-size: 9pt;
    overflow: hidden;
    min-width: 100%;
}

.options-wing-v2 textarea:focus {
    background: #fbfbfb;
    border: 1px solid #ccc;
}

.wrapper-range,
.pendrive_size,
.pendrive_personalization_text {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f6f6f6;
    padding: 0 12px;
    color: #666;
}

.wrapper-range:focus,
.pendrive_size:focus,
.vows_personalization_text:focus,
.pendrive_personalization_text:focus {
    background: #fbfbfb;
    border: 1px solid #ccc;
}





/* --   TEKST NA PERGAMINIE / OBWOLUCIE   -- */

.wrapper_template_text,
.parchment_template_text {
    width: 100%;
    height: 140px !important;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f6f6f6;
    padding: 0 12px;
    color: #666;
}

.wrapper_template_text:focus,
.parchment_template_text:focus {
    background: #fbfbfb;
    border: 1px solid #ccc;
}





/* --   ILOŚĆ W SKRZYDEŁKU   -- */

.options-wing-v2 .amount-container {
    margin: -6px 0 0 0;
    min-height: auto !important;
}

.options-wing-v2 .amount-container .amount {
    width: 48px;
    height: 32px;
    line-height: 32px;
    font-size: 18pt;
    margin: 0 8px;
}

.options-wing-v2 .amount-container .plus,
.options-wing-v2 .amount-container .minus {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background: #f1f1f1;
    color: #666;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-radius: 4px;
    text-align: center;
    font-size: 13pt;
}

.options-wing-v2 .amount-container .minus {
    line-height: 30px;
}









/* --   PRZYCISK DO POBIERANIA SZABLONÓW PUDEŁKA NA ZDJĘCIA   -- */

.download-photobox-templates {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin: 0 0 8px 0;
    background: #f1f1f1;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    text-align: center;
}

.download-photobox-templates:hover span { color: #; }
.download-photobox-templates span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 10pt;
    font-family: titillium_webregular;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-photobox-templates span b {
    font-weight: 100;
    margin: 0 12px 0 0;
    font-family: titillium_webregular;
}

.download-photobox-templates:hover svg { color: #; }
.download-photobox-templates svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
}









/* --   SKRZYDEŁKA   -- */

#spreads-wings {
    left: 0;
    width: 100%;
    height: 160px;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    margin: 8px 0;
}

#spreads-wings .single-spread {
    width: 180px;
    height: 90px;
    background: #e2e2e2;
    border-radius: 6px;
    /* overflow: hidden; */
    box-shadow: 0 1px 16px rgba(0, 0, 0, .1);
    margin: 8px 0 0 0;
    padding: 0;
}

#spreads-wings .single-spread::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 6px;
    box-sizing: border-box;
    z-index: 10;
}

#spreads-wings .single-spread .side-A {
    width: 50%;
    height: 100%;
    border-radius: 6px 0 0 6px;
    z-index: 9;
    cursor: pointer;
    border-right: 1px solid rgba(0, 0, 0, .1);
    font-size: 24pt;
    font-family: titillium_websemibold;
    color: rgba(0, 0, 0, .25);
}

#spreads-wings .single-spread .side-A:hover { background: #eaeaea; }
#spreads-wings .single-spread .side-A.selected {
    background: #;
    color: rgba(255, 255, 255, 1);
}

#spreads-wings .single-spread .side-B {
    width: 50%;
    height: 100%;
    border-radius: 0 6px 6px 0;
    z-index: 9;
    cursor: pointer;
    border-left: 1px solid rgba(255, 255, 255, .5);
    font-size: 24pt;
    font-family: titillium_websemibold;
    color: rgba(0, 0, 0, .25);
}

#spreads-wings .single-spread .side-B:hover { background: #e8e8e8; }
#spreads-wings .single-spread .side-B.selected {
    background: #;
    color: rgba(255, 255, 255, 1);
    border-left: 1px solid rgba(255, 255, 255, .15);
}

#spreads-wings .spreads-counter {
    top: 4px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #666;
}

#spreads-wings .prev-spread,
#spreads-wings .next-spread {
    top: 50%;
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: -20px 0 0 0;
    color: #aaa;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
}

#spreads-wings .prev-spread { left: 2px; }
#spreads-wings .next-spread { right: 2px; }

#spreads-wings .prev-spread:hover,
#spreads-wings .next-spread:hover {
    color: #666;
    transform: scale(1.2);
}

#wings-amount-preview {
    position: absolute;
    right: 2px;
    top: 14px;
    width: 24px;
    height: 24px;
    line-height: 20px;
    background: #;
    color: #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
}










/* --   PARAMETR - BEZ PUDEŁKA, BEZ PENDRIVA   -- */

#photo_paper-0 .thumb-photo,
#pendrive-0 .thumb-photo,
#box-0 .thumb-photo {
    background-image: none !important;
    background: #f1f1f1 !important;
    color: #aaa;
}

#photo_paper-0 .thumb-photo svg,
#pendrive-0 .thumb-photo svg,
#box-0 .thumb-photo svg {
    width: 128px;
    height: 128px;
    opacity: 1 !important;
    padding: 0 !important;
}





.box-step,
.cover-color-step {
    transition: opacity .3s cubic-bezier(.785, .135, .15, .86);
}

#box-personalization-container,
#cover-personalization-container {
    width: 832px;
}

#box-personalization-container.with-pendrive { width: 1248px !important; }

#box-personalization-container h4,
#cover-personalization-container h4 {
    display: block !important;
}

#box-personalization-container .step-back-container,
#cover-personalization-container .step-back-container {
    top: 16px;
    right: calc(100% + 16px);
}

#box-personalization-container .next-step-container,
#cover-personalization-container .next-step-container {
    top: 16px;
    left: calc(100% + 16px);
}

























/* --   OZNACZENIA JAKOŚCI PERSONALIZACJI DLA WYBRANYCH KOLORÓW POKRYCIA   -- */

.quality-color {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    z-index: 4000;
    cursor: pointer;
}

.quality-color.q1 { background: #c1000b; }
.quality-color.q2 { background: #ffc700; }
.quality-color.q3 { background: #00a820; }




















/* --   LISTA WYBRANYCH PERSONALIZACJI   -- */

.personalization-block.details .filter-tabs.small { transform: translate(0, 0); }
.personalization-block.details .filter-tabs { transform: translate(0, 72px); }
.personalization-block .filter-tabs {
    position: absolute;
    left: 0;
    top: 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

.personalization-block.details .personalization-list { transform: translate(0, 0); }
.personalization-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 72px;
    overflow: hidden;
    pointer-events: none;
    transform: translate(0, -72px);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    background: #fafafa;
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    z-index: 2002;
}

.personalization-list ul {
    list-style: none;
    height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.personalization-list li:not(.selected):not(.del):not(.add-new-personalization):hover .symbol { background: #777; }
.personalization-list li:last-child { font-size: 10pt; }
.personalization-list li {
    width: 56px;
    height: 72px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.personalization-list li:hover span { background: #ededed; }
.personalization-list li span {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    background: #f1f1f1;
}

.personalization-list li.add-new-personalization {
    position: absolute;
    left: 100%;
    top: 0;
}

.personalization-list li.selected { pointer-events: none; }
.personalization-list li.selected:hover .symbol { filter: brightness(1.05); }
.personalization-list li.selected .symbol { background: #; }
.personalization-list li .symbol {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: #666;
    color: #fff;
    font-family: titillium_websemibold;
    font-size: 12pt;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: opacity .3s cubic-bezier(.785, .135, .15, .86), transform .3s cubic-bezier(.785, .135, .15, .86);
}

/* --   IKONKA KASUJĄCA PERSONALIZACJĘ   -- */

.personalization-list li .del:hover { filter: brightness(1.1); }
.personalization-list li .del {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translate(0, -40px);
    opacity: 0;
    border-radius: 100%;
    background: #d00;
    color: #fff;
    font-family: Arial;
    font-size: 20pt;
    font-weight: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all .3s cubic-bezier(.785, .135, .15, .86), background 0s;
}

.personalization-list li.toggle-delete .symbol {
    transform: translate(0, 40px);
    opacity: 0;
}

.personalization-list li.toggle-delete .del {
    transform: translate(0, 0);
    opacity: 1;
}

.personalization-list li.removing .del {
    transform: scale(.5);
    opacity: 0;
}

.personalization-list li.ghost:hover { color: #666; }
.personalization-list li.ghost {
    background: none;
    color: #999;
    transition: none;
}

.personalization-list li.ghost span {
    transition: none;
}

.personalization-list li svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
    transition: none;
}

.personalization-list li:hover svg {
    width: 28px;
    height: 28px;
}

.personalization-list .delete-personalization span {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #d00;
    color: #fff;
    font-family: Arial;
    font-size: 20pt;
    font-weight: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.personalization-list .delete-personalization {
    font-size: 10pt;
}

.personalization-title {
    position: absolute;
    left: 0;
    top: -160px;
    width: 100%;
    font-size: 16pt;
    opacity: 0;
    color: #666;
    font-family: titillium_websemibold;
    text-transform: uppercase;
}






/* --   SKLONOWANA LISTA PERSONALIZACJI   -- */

.personalization-list.clone li { height: 80px; }
.personalization-list.clone {
    transform: translate(0, 80px);
    height: 80px;
    z-index: 10;
    border: 0;
    opacity: 0;
    pointer-events: none;
}










/* --   OPCJE PERSONALIZACJI WYSUWANE Z GÓRY   -- */

.personalization-mask {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: 1001;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
}

.personalization-mask.no-clip { height: auto !important; }
.personalization-mask.no-clip .personalization { position: relative; }
.personalization {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}










/* --   KROK PERSONALIZACJI   -- */

.personalization-step.compress.hide,
.personalization-step.hide {
    height: 0 !important;
    border: 0 !important;
}

.personalization-step {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    /* transition: height .3s cubic-bezier(.785, .135, .15, .86); */
    z-index: 2000;
    /* overflow: hidden; */
}





.personalization-step .container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) .3s;
}

.personalization-step .container.relative {
    position: relative !important;
    top: 0 !important;
}

.personalization-step .field-subtitle {
    font-size: 15pt;
    line-height: 96px;
    height: 96px;
    font-family: titillium_webbold;
    color: #;
    text-align: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.personalization-step .field-subtitle.low {
    height: 64px;
    line-height: 64px;
}

.personalization-step .field-subtitle > .empty > span {
    width: 100%;
}

.personalization-step .field-subtitle > .empty {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 96px;
    transition: all .2s cubic-bezier(.785, .135, .15, .86) .15s;
    color: #;
    font-family: titillium_webbold;
    font-size: 15pt;
    text-transform: uppercase;
}

.personalization-step .field-subtitle > .set {
    padding: 0 40px;
    height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .3s cubic-bezier(.785, .135, .15, .86), background .1s cubic-bezier(.785, .135, .15, .86);
    transform: scale(.8);
}

.personalization-step .field-subtitle > .set .label {
    text-transform: uppercase;
    line-height: 24px;
    font-size: 10pt;
    white-space: nowrap;
}

.personalization-step .field-subtitle > .set .value {
    line-height: 32px;
    font-size: 17pt;
    color: #;
    white-space: nowrap;
    font-family: titillium_websemibold;
}

.personalization-step .step-description {
    width: 100%;
    padding: 0 40px 24px 40px;
    margin: -24px 0 0 0;
    text-align: center;
    color: #888;
    font-size: 10pt;
    line-height: 150%;
    z-index: 100;
    font-family: titillium_webregular;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    pointer-events: none;
}

.personalization-step .field-description {
    text-align: center;
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    left: 0;
    top: 96px;
    width: 100%;
    color: #888;
    padding: 8px 128px;
    line-height: 20px;
    font-size: 10pt;
    border: 0;
    opacity: 0;
    transition: all .15s cubic-bezier(.785, .135, .15, .86) .15s;
    transform: translate(0, 16px);
    pointer-events: none;
}

.personalization-step .no-stamps {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.personalization-step .step-title {
    width: 100%;
    font-size: 15pt;
    line-height: 80px;
    height: 80px;
    font-family: titillium_webbold;
    color: #;
    text-align: center;
    text-transform: uppercase;
}





/* --   .ABSOLUTE-POSITIONS   -- */

.personalization-step.absolute-positions .field-subtitle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    perspective: 800px;
}

.personalization-step.absolute-positions .container {
    opacity: 1;
    position: absolute;
    left: 0;
    top: 96px;
}





/* --   .COMPRESS   -- */

.personalization-step.actions .field-subtitle .empty,
.personalization-step.compress .field-subtitle .empty {
    transform: translate(0, -16px);
    opacity: 0;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

.personalization-step.actions .field-subtitle .set,
.personalization-step.compress .field-subtitle .set {
    transform: scale(1);
    opacity: 1;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    perspective: 800px;
}

.personalization-step.compress .container {
    opacity: 0;
    transform: scale(.96);
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    pointer-events: none;
}

.personalization-step.compress:hover { background: rgba(0, 0, 0, .015); }
.personalization-step.compress.with-description { height: 176px !important; }
.personalization-step.compress.with-description.h36 { height: 156px !important; }
.personalization-step.compress.with-description.h56 { height: 176px !important; }
.personalization-step.compress.with-description.h76 { height: 196px !important; }
.personalization-step.compress {
    height: 96px !important;
    cursor: pointer;
    background: #fafafa;
    min-height: auto !important;
    transition: all .3s cubic-bezier(.785, .135, .15, .86), background 0s;
}

.personalization-step.compress .step-description {
    opacity: 0;
    transform: translate(0, -16px);
    pointer-events: none;
}

.personalization-step.compress .field-description {
    opacity: 1;
    transform: translate(0, 0);
    pointer-events: all;
}










/* --   STRZAŁKI DO SZYBKIEGO PRZEWIJANIA PARAMETRÓW PO ZWINIĘCIU KLASĄ ".COMPRESS"   -- */

.personalization-step .field-subtitle .change-value.hide {
    opacity: .15 !important;
    pointer-events: none !important;
}

.personalization-step .field-subtitle .change-value.next { right: 200px; }
.personalization-step .field-subtitle .change-value.prev { left: 200px; }
.personalization-step .field-subtitle .change-value {
    position: absolute;
    top: 24px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .3s cubic-bezier(.785, .135, .15, .86);
    opacity: 0;
    pointer-events: none;
}

.personalization-step .field-subtitle .change-value.mousedown svg { transform: scale(.91); }
.personalization-step .field-subtitle .change-value:hover svg { background: #fff; }
.personalization-step .field-subtitle .change-value svg {
    border-radius: 100%;
    width: 48px;
    height: 48px;
    color: #666;
    stroke-width: 2px;
    z-index: 10;
    padding: 12px;
    transition: all .15s cubic-bezier(.785, .135, .15, .86);
}

/* --   .COMPRESS   -- */

.personalization-step.compress .field-subtitle { pointer-events: all; }
.personalization-step.compress .field-subtitle .change-value {
    pointer-events: all;
    opacity: 1;
    transform: scale(.75);
}

.personalization-step.compress .field-subtitle:hover .change-value {
    opacity: 1;
    transform: scale(1);
}

/* --   :NOT(.COMPRESS)   -- */

.personalization-step:not(.compress) .field-subtitle .change-value {
    opacity: 0 !important;
}











.personalization-step-title span { width: 100%; }
.personalization-step-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 96px;
    line-height: 96px;
    font-size: 17pt;
    color: #888;
    text-align: center;
    font-family: titillium_webregular;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.personalization-step-title .close:hover {
    color: #;
    background: #ededed;
}

.personalization-step-title .close {
    position: absolute;
    right: 28px;
    top: 28px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    background: #f1f1f1;
    color: #888;
    transition: all .1s cubic-bezier(.785, .135, .15, .86);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12pt;
    font-family: titillium_websemibold;
}

.personalization-step-title .close svg {
    width: 20px;
    height: 20px;
}





.darker-bg {
    background: rgba(0, 0, 0, .015);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.step-header {
    width: 100%;
    height: 72px;
    overflow: hidden;
    z-index: 2001;
    position: sticky;
    top: 127px;
}





.personalization-step.step-text-lines { border-bottom: 1px solid rgba(0, 0, 0, .05); }
.personalization-step.step-text-lines .field-subtitle u { text-decoration: none; }
.personalization-step.step-text-lines .field-subtitle,
.personalization-step.step-text-lines .container {
    width: calc(100% - 192px);
    left: 96px;
}

.text-line-preview {
    border-radius: 8px;
    background: #f1f1f1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    margin: 0 0 8px 0;
}










.step_container .tab-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#step1_container.hide { transform: scale(.975); }
#step1_container {
    padding: 64px 0 0 0;
    transition: all .3s cubic-bezier(.165, .84, .44, 1);
}



/* --   EKRAN STARTOWY FORMULARZA   -- */

#step1_container.hide { transform: scale(.975); }
#new_container .album-block-addons { margin: 0 0 120px 0; }



/* --   LOGO FIRMOWE   -- */

.logo-step {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo-step .container {
    flex-direction: column;
}

.send-step {
    width: 100%;
    height: 100%;
}

.send-step .field-subtitle {
    pointer-events: none;
}

.company-logo {
    max-width: 200px;
    max-height: 200px;
    background: #f4f4f4;
}

.company-logo img {
    max-width: 200px;
    max-height: 200px;
    mix-blend-mode: multiply;
}














/* --   KONSOLA Z LEWEJ   -- */

body.scrolldown-hide #floating-console {
    top: 128px;
    height: calc(100% - 128px);
}

#floating-console.hide { transform: translate(-100%, 0); }
#floating-console {
    position: fixed;
    z-index: 99999;
    background: linear-gradient(90deg, #fff 0%, #ffffff00 100%);
    left: 0;
    top: 200px;
    width: 365px;
    height: calc(100% - 200px);
    padding: 32px 0 80px 16px;
    transition: all .6s cubic-bezier(.785, .135, .15, .86);
    font-size: 8pt;
    line-height: 150%;
    color: #666;
    direction: rtl;
    overflow-y: scroll;
    overflow-x: visible;
    display: none;
}

#floating-console div {
    direction: ltr;
    width: 100%;
    text-align: left;
    white-space: pre;
}

#floating-console p {
    width: 100%;
    opacity: 1;
}

#floating-console p.publish {
    margin: 0 !important;
    opacity: 1 !important;
}

#floating-console b {
    float: none;
    font-weight: 100;
    font-family: titillium_websemibold;
    color: #666;
    font-size: 9pt;
}

#floating-console i {
    float: none;
    font-weight: 100;
    font-family: titillium_websemibold;
    color: #;
    text-transform: none;
    font-style: normal;
}

/* --   SCROLLBARY KONSOLI   -- */

#floating-console::-webkit-scrollbar { width: 4px; background: #eee; }
#floating-console::-webkit-scrollbar-button { display: none; }
#floating-console::-webkit-scrollbar-track { background: #eee; }
#floating-console::-webkit-scrollbar-track-piece { background: #eee; }
#floating-console::-webkit-scrollbar-thumb { background: #; }
#floating-console::-webkit-scrollbar-corner { background: #eee; }
#floating-console::-webkit-resizer { }





/* --   MONITOR ZMIENNYCH   -- */

body.scrolldown-hide #personalization-vars-monitor { top: 128px; }
#personalization-vars-monitor.hide { transform: translate(100%, 0); }
#personalization-vars-monitor {
    position: fixed;
    right: 0;
    top: 200px;
    width: 280px;
    padding: 32px 16px;
    color: #444;
    pointer-events: none;
    z-index: 99999;
    transition: all .6s cubic-bezier(.785, .135, .15, .86);
    background: linear-gradient(90deg, #ffffff00 0%, #fff 100%);
}

#personalization-vars-monitor p {
    width: 100%;
    line-height: 16px;
    font-size: 8pt;
    font-family: titillium_webregular;
}

#personalization-vars-monitor p b {
    font-weight: 100;
    font-family: titillium_websemibold;
    float: none;
}









.z101 { z-index: 101 !important; }
.z100 { z-index: 100 !important; }





#box-personalization-reset-info,
#cover-personalization-reset-info {
    width: 100%;
}

#box-personalization-reset-info span,
#cover-personalization-reset-info span {
    background: #a00;
    line-height: 32px;
    padding: 0 12px;
    border-radius: 3px;
    color: #fff;
    font-size: 10pt;
}







.disabled-input {
    pointer-events: none;
}








.green-notice {
    position: absolute;
    left: 50%;
    width: 200px;
    height: auto;
    bottom: calc(100% + 16px);
    background: #0a7900;
    color: #fff;
    padding: 12px 20px 16px 12px;
    border-radius: 3px;
    transform: translate(-50%, 0);
    transition: all .25s ease-out;
}

.green-notice::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid #00000000;
    border-right: 8px solid #00000000;
    border-top: 8px solid #0a7900;
    transform: translate(-50%, 0);
}