PATH:
root
/
mbmscss
body.js { &:before { background: white; content: ""; display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: -1; transition: 0.66s all, 0.66s z-index linear; } &.loading { height: 100%; width: 100%; &:before { opacity: 1; top: 0; z-index: 10000; } } } @import "init"; // FONTELLO BEGIN // FONTELLO END .lg-actions { top: 50%; top: calc(50% - 39px / 2); } .lSAction { position: absolute; left: 0; right: 0; top: 50%; & > a { background: none !important; margin: 0; opacity: 1; transform: translateY(-50%); } & > .lSPrev, & > .lSNext { // background-position: center; // background-repeat: no-repeat; } & > .lSPrev { // background-position-x: right; left: 0; } & > .lSNext { // background-position-x: left; right: 0; } } // ACTUAL STYLES html, body { background-color: map-get($colors, 'background'); background-color: var(--color-background); color: map-get($colors, 'text'); color: var(--color-text); font-family: map-get($fonts, main), map-get($fonts, main-fallback); font-family: var(--font-main), var(--font-main-fallback); } html, body { // scrollbar-3dlight-color: #000; // scrollbar-arrow-color: #000; scrollbar-base-color: map-get($colors, 'dark-10-darker'); scrollbar-base-color: var(--color-dark-10-darker); // scrollbar-darkshadow-color: #000; // scrollbar-face-color: #000; // scrollbar-highlight-color: #000; // scrollbar-shadow-color: #000; scrollbar-track-color: map-get($colors, 'light-10-lighter'); scrollbar-track-color: var(--color-light-10-lighter); } // Chrome & Safari (WebKit) SCROLLBARS ::-webkit-scrollbar { width: 0.66em; } ::-webkit-scrollbar-button { // background-color: #000; } ::-webkit-scrollbar-track { background-color: map-get($colors, 'light-10-lighter'); background-color: var(--color-light-10-lighter); } ::-webkit-scrollbar-track-piece { // background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: map-get($colors, 'dark-10-darker'); background-color: var(--color-dark-10-darker); border-radius: 0; transition: $transitions-duration all; transition: var(--transitions-duration) all; &:hover { // background-color: lighten(map-get($colors, 'dark-10-darker), 25%'); } } ::-webkit-scrollbar-corner { // background-color: transparent; } ::-webkit-resizer { // background-color: transparent; } // Firefox (Gecko) html, body { scrollbar-color: map-get($colors, 'dark-10-darker'); scrollbar-color: var(--color-dark-10-darker); } p{ line-height: 1.4; } img, video, picture { border: none; height: auto; max-width: 100%; } img { height: auto; } a { color: inherit; transition: $transitions-duration all; transition: var(--transitions-duration) all; &:focus, &:hover { @include useColor(color, 'blue-1'); text-decoration: underline; } } h1{ font-size: 2.2em; } h2{ font-size: 1.7em; } .button { background-color: map-get($colors, 'logo-accent'); background-color: var(--color-logo-accent); color: map-get($colors, 'main-background'); color: var(--color-main-background); display: inline-block; line-height: 1.25; padding: $padding-buttons-v - 2px $padding-buttons-v * 2; padding: rem-size($padding-buttons-v - 2px) rem-size($padding-buttons-v * 2); text-decoration: none; transition: $transitions-duration all; transition: var(--transitions-duration) all; &:hover { background-color: map-get($colors, 'main-text'); background-color: var(--color-main-text); color: map-get($colors, 'main-background'); color: var(--color-main-background); } } .image-to-shadow { background-position: bottom center; background-repeat: no-repeat; background-size: contain; bottom: 0; filter: brightness(0) blur($shadow-blur); filter: brightness(0) blur(rem-size($shadow-blur)); height: 100%; left: 0; opacity: $shadow-opacity; position: absolute; right: 0; top: 0; transform-origin: bottom center; transform: skew($shadow-skew) scale(0.5, 0.2) translateY(-2 * $shadow-blur); transform: skew($shadow-skew) scale(0.5, 0.2) translateY(rem-size(-2 * $shadow-blur)); z-index: 0; } div.grid { --items: 3; display: flex; flex-wrap: wrap; justify-content: space-between; @include remSize((margin-left, margin-right), $margin-grid-item-space-h / -2); &.left { justify-content: flex-start; } &.right { justify-content: flex-end; } &.h-center { justify-content: center; } &.v-center { align-items: center; } &.v-center-stretched { align-items: stretch; & > * { display: flex; flex-flow: column; justify-content: center; } } .text-center { text-align: center; } & > * { flex: 0 0 (100% / 3); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 3; width: calc(100% / 3); width: calc(100% / var(--items)); } @media (max-width: rem-size(999px * $mod, $font-size-base, true)) { flex-grow: 1; } } .bordered { @include useColor(border-color, 'light-border'); @include remSize((padding-bottom, padding-top), $padding-grid-item-v); @include remSize((padding-left, padding-right), $padding-grid-item-h); } & > div { display: flex; flex-flow: column; justify-content: space-between; & > .bordered { margin-top: auto; @include remSize(min-height, 357px); } } & > .growing { flex-grow: 1; } & > .shrinking { flex-shrink: 1; } & > .min-space { flex-basis: 0px; } & > .max-space { flex-basis: auto; } &.margin { @include emSize((margin-left, margin-right), $font-size-base * -1, $font-size-base); & > * { @include emSize(margin, $font-size-base, $font-size-base); } } &.padding { @include emSize((margin-left, margin-right), $font-size-base * -1, $font-size-base); & > * { @include emSize(padding, $font-size-base, $font-size-base); } } @media (max-width: rem-size(767px * $mod, $font-size-base, true)) { --items: 2; & > * { flex: 0 0 (100% / 2); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 2; width: calc(100% / 2); width: calc(100% / var(--items)); } } } @media (max-width: rem-size(479px * $mod, $font-size-base, true)) { --items: 1; & > * { flex: 0 0 (100% / 1); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 1; width: calc(100% / 1); width: calc(100% / var(--items)); } } } } .border-hexagon { align-items: center; display: flex; flex-flow: column; justify-content: center; @include remSize(min-height, $min-height-hexagon); text-align: center; img { height: auto; @include remSize(max-width, $max-width-hexagon-image); @include remSize((padding-bottom, padding-top), $font-size-base); width: 100%; } &:after { background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-ramka.png"); background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-ramka.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; content: ""; display: block; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } } .corner-arrow { &:after { font-family: 'icomoon'; content: "\e925"; display: block; pointer-events: none; position: absolute; transition: $transitions-duration all; transition: var(--transitions-duration) all; @include remSize(width, $width-corner-arrow); z-index: 1; font-size: 2em; color: #c90d13; } &.bottom { &:after { @include remSize(bottom, -7px); top: unset; } } &.left { &:after { @include remSize(left, -11px); right: unset; } } &.right { &:after { left: unset; @include remSize(right, -11px); } } &.top { &:after { bottom: unset; @include remSize(top, -7px); } } &.bottom.right { &:after { transform: rotate(-45deg); font-size: 13px; top: 10px; right: 6px; height: 16px; width: 16px; color: #fff; } } &.top.left { &:after { transform: rotate(120deg); } } &.top.right { &:after { transform: rotate(180deg); } } $h: 0.5; $v: 0.5; &:hover, &:focus { &.bottom { &:after { } } &.left { &:after { } } &.right { &:after { } } &.top { &:after { } } } } .hyperlink-overlay { cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } /*-----*/ .header { align-items: center; @include useColor(background-color, 'main-background'); @include useColor(color, 'darkgray-text'); display: flex; @include useEmSize(font-size, 'top-bar'); font-weight: 500; justify-content: space-between; padding: 3.5em 2em; transition: all 0.2s ease-out; &__logo { display: inline-block; &--wrapper { flex: 0 1 auto; max-width: 100%; } img { height: auto; width: 100%; } } &__text { line-height: (24 / 14); & > * { } a { text-decoration: none; font-size: 3em; padding: .7em; transition: all 0.3s ease-out; &:hover span::before{ @include useColor(color, 'main-a'); } } } &__langs { list-style-type: none; @include emSize(padding, map-get($font-sizes, 'top-bar') * 0.2); & > li { transition: $transitions-duration all; transition: var(--transitions-duration) all; &:not(:first-child) { margin-bottom: -1.3em; opacity: 0; } } &:hover, &:focus { & > li { margin-bottom: 0; opacity: 1; } } } @media (max-width: rem-size(1024px * $mod, $font-size-base, true)) { flex-wrap: wrap; &__logo { &--wrapper { order: 1; margin-left: 50px; z-index: 510; img{ width: 70%; } } } &__text { z-index: 510; order: 3; } &__langs { flex: 0 0 0px; @include emSize(margin-left, map-get($font-sizes, 'top-bar')); order: 2; } } @media (max-width: rem-size(575px * $mod, $font-size-base, true)) { flex-flow: column; align-items: flex-end; &__text { display: none } &__langs { @include emSize(margin-top, map-get($font-sizes, 'top-bar') * 2, map-get($font-sizes, 'top-bar')); } } } @media (max-width: rem-size(575px * $mod, $font-size-base, true)) { header .nav .fb-mobile{ display: block; } } header{ position: sticky; top: -1px; background: #fff; z-index: 100; transition: all 0.2s ease-out; &.darkHeader{ .header{ padding: 0 2em; } } } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { .header{ padding: 1.5em 2em; } } @media (max-width: rem-size(1024px * $mod, $font-size-base, true)) { .darkHeader{ .nav__wrapper { top: 21px; } } .header{ justify-content: flex-end; .header__logo{text-align: right;} } } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { } .breadcrumbs { &__wrapper { background-image: url("../../userfiles/tla/bg-bre.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; @include useColor(color, 'breadcrumbs-text'); display: flex; flex-flow: column; @include useEmSize(font-size, 'breadcrumbs'); font-weight: 500; justify-content: flex-end; min-height: 109px; @include emSize((padding-bottom, padding-top), $padding-breadcrumbs-v, map-get($font-sizes, 'breadcrumbs-text')); align-items: center; justify-content: center; text-align: center; padding-bottom: 6.3em; } a { color: inherit; text-decoration: none; &:focus, &:hover, &:active { text-decoration: underline; } } h1{ text-align: center; text-transform: uppercase; margin: 2em 0 .1em 0; } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { &__wrapper { padding-bottom: 3.3em; h1{ margin: .9em 0 .1em 0; } } } } .nav { @include useColor(color, 'nav-text'); pointer-events: all; &__wrapper { @include useEmSize(font-size, 'nav-item'); pointer-events: none; position: sticky; top: 0; z-index: 500; } &__checkbox[type="checkbox"] { display: none; & + .nav { transform: translateX(calc(-100% + #{$width-corner-arrow + 2 * map-get($font-sizes, 'nav-item')})) translateY(calc(-100% + #{$height-corner-arrow + 1.5 * map-get($font-sizes, 'nav-item')})); transform: translateX(calc(-100% + #{rem-size($width-corner-arrow + 2 * map-get($font-sizes, 'nav-item'), map-get($font-sizes, 'nav-item'), true)})) translateY(calc(-100% + #{rem-size($height-corner-arrow + 1.5 * map-get($font-sizes, 'nav-item'), map-get($font-sizes, 'nav-item'), true)})); & > ul { visibility: hidden; } } &:checked + .nav { background: #cb2027; overflow: auto; transform: translateX(0) translateY(0); padding: 3em 2em; margin-top: 5em; & > ul { visibility: visible; } } &:checked + .nav *{ color: #fff } } &__toggler { @include emSize(bottom, map-get($font-sizes, 'nav-item'), map-get($font-sizes, 'nav-item')); cursor: pointer; display: block; @include emSize(height, $height-corner-arrow, map-get($font-sizes, 'nav-item')); @include emSize(margin-bottom, map-get($font-sizes, 'nav-item'), map-get($font-sizes, 'nav-item')); margin-left: auto; margin-right: 0; // auto; position: sticky; @include emSize(width, $width-corner-arrow, map-get($font-sizes, 'nav-item')); &:after { @at-root .nav__checkbox:checked + .nav & { transform: rotate(180deg); content: "\e924"; color: #fff; } } } & > ul { align-items: baseline; display: flex; justify-content: space-between; list-style-type: none; padding: 0; margin-bottom: 0; margin-top: 0; border-right: 2px solid #8f8f8f; li { border-left: 2px solid #8f8f8f; padding: 0 2em; &.dropdown{ li a{ padding: 5px; } li a:hover, li a.active{ background: #c90d13; color: #fff; } } } & > li { font-weight: 600; text-align: center; &:first-child{ display: none; } } ul { display: none; list-style-type: none; @include emSize(padding-left, map-get($font-sizes, 'nav-item'), map-get($font-sizes, 'nav-item')); @media (min-width: rem-size(1024px * $mod, $font-size-base, true)) { display: none !important; } } } a { display: inline-block; padding: 3em 0; position: relative; text-decoration: none; &.active, &:active { @include useColor(color, 'main-a'); } &:focus, &:hover { @include useColor(color, 'main-a'); } } .dropdown:hover { ul{ display: block!important; position: absolute; top: 108px; width: 315px; left: 0em; background: #fff; text-align: left; z-index: 100; padding: 1em 0; margin: 0; li{ border: none; margin: 12px 0; a{ padding: 5px ; } } } } .fb-mobile{ display: none; font-size: 2.5em; padding-left: 6em; position: relative; position: absolute; top: 13px; right: 11px; span::before{ color: #fff; } } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { & ul li { padding: 0 1.5em; } } @media (max-width: rem-size(1280px * $mod, $font-size-base, true)) { & ul li { padding: 0 1.2em; a{ font-size: .9em; } } } @media (max-width: rem-size(1180px * $mod, $font-size-base, true)) { & ul li { padding: 0 .8em; a{ font-size: .9em; } } } @media (min-width: rem-size(1024px * $mod, $font-size-base, true)) { & > ul { li { &.corner-arrow { &:after { display: none; } } } } &__checkbox[type="checkbox"] { & + .nav { background: #fff; transform: translateX(0) translateY(0); & > ul { visibility: visible; } } } &__toggler { display: none; } } @media (max-width: rem-size(1023px * $mod, $font-size-base, true)) { background: #fff; max-height: 100vh; // opacity: 0.25; overflow: auto; @include emSize((padding-left, padding-right), map-get($font-sizes, 'nav-item'), map-get($font-sizes, 'nav-item')); transition: $transitions-duration all; transition: var(--transitions-duration) all; // transition-delay: 1s; width: unset; li.dropdown::after{ content: "\e924"; font-family: 'icomoon'; position: absolute; right: 0px; height: 0; } &:hover, &:focus { // opacity: 1; // transition-delay: 0s; } &__wrapper { background-color: transparent; left: 0; max-height: 100%; max-height: 100vh; overflow: auto; position: fixed; right: 0; top: 42px; } & > ul { display: block; padding-top: 6em; border: none; & > li { text-align: left; border: none; } li { // @include useColor(border-bottom-color, 'light-border'); // border-bottom-style: solid; // @include emSize(border-bottom-width, 1px, map-get($font-sizes, 'nav-item')); margin-right: 0; @include emSize(padding-bottom, $padding-nav-item-bottom / 3, map-get($font-sizes, 'nav-item')); // @include emSize(padding-right, map-get($font-sizes, 'nav-item') * 3, map-get($font-sizes, 'nav-item')); @include emSize(padding-top, $padding-nav-item-top / 3, map-get($font-sizes, 'nav-item')); &.corner-arrow { &:after { } &.expanded { &:after { } } } &:focus, &:hover { } & > a { font-size: 1.2em; padding: 5px; &:focus, &:hover { @include useColor(color, 'arrows'); } } &:last-child { border-bottom: none; } &.dropdown { &:after { } &.expanded { } } li:last-child { @include emSize(margin-bottom, $padding-nav-item-bottom / -3, map-get($font-sizes, 'nav-item')); padding-bottom: 0; } } ul { &[style*="display: none"] { display: block !important; height: 0; opacity: 0; pointer-events: none; visibility: hidden; } } } a { @include emSize(padding-bottom, $padding-nav-item-bottom / 3, map-get($font-sizes, 'nav-item')); @include emSize(padding-top, $padding-nav-item-top / 3, map-get($font-sizes, 'nav-item')); &:before, &:after { display: none; } &.active { @include useColor(color, 'nav-underscore'); } } .dropdown ul { position: relative; top: 0; width: 100%; left: 0em; background: #fff; text-align: left; z-index: 100; padding: 0; margin: 0; li{ padding: 0; padding-left: 1.5em; a{ padding: 5px; } } } .dropdown:hover ul{ top: 0; width: 100%; left: 0em; background: #fff; text-align: left; z-index: 100; padding: 0; margin: 0; position: relative; li{ padding: 0; padding-left: 1.5em; a{ padding: 5px; } } } .dropdown.expanded ul { top: 0; } .dropdown.expanded::after { transform: rotate(0deg); } } } .btn{ border-radius: 5px; background: #3d6490; padding: .5em 1em; color: #fff; font-size: 1.3em; font-weight: 600; text-transform: uppercase; text-decoration: none; &::after{ content: "\e923"; font-family: 'icomoon' !important; margin-left: .3em; } &.btn-red{ background-color: map-get($colors, 'main-a'); background-color: var(--color-main-a); } &.btn-big{ font-size: 1.7em; padding: .4em 1em; } &:hover{ background-color: map-get($colors, 'main-a'); background-color: var(--color-main-a); color: #fff; text-decoration: none; } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { &.btn-big{ font-size: 1.4em; } } } .banner { &__wrapper { @include useColor(background-color, 'banner-background'); background-image: url("../../userfiles/tla/bg-top.jpg"); background-position: center; background-size: cover; @include useColor(color, 'banner-text'); @include useEmSize(font-size, 'banner'); font-weight: 600; height: 620px; position: relative; margin-top: 6em; } &__slider{ position: absolute; width: 100%; top: -9.5em; } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { &__slider{ position: absolute; width: 96%; top: -9.5em; } .btn { margin-top: 7.2em; } .banner ul .btn.b3 { margin-top: 4.65em; } } @media (max-width: rem-size(1280px * $mod, $font-size-base, true)) { &__wrapper{ height: 480px; } &__slider{ width: 100%; position: relative; top:-2em } &__wrapper{ height: auto; margin-top: 1em; } } @media (max-width: rem-size(990px * $mod, $font-size-base, true)) { } @media (max-width: rem-size(768px * $mod, $font-size-base, true)) { &__slider{ width: 100%; left: 0; right: 0; overflow: hidden; } .lSSlideOuter .lSPager.lSpg{ display: none; } } @media (max-width: rem-size(480px * $mod, $font-size-base, true)) { } ul{ padding: 0; li > div{ position: absolute; left: 6em; top: 15em; bottom: 10em; z-index: 10; } h1, h2{ font-size: 3.55em; text-transform: uppercase; padding: 0; margin: 0; } .btn{ margin-top: 8.2em; display: inline-block; &:hover{ background: #fff; color: #3d6490; } &.b3{ margin-top: 5.65em; } } p{ margin: 0; } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { h1, h2 { font-size: 2.55em; } .btn { margin-top: 7.2em; } li > div { top: 11em; } } @media (max-width: rem-size(990px * $mod, $font-size-base, true)) { h1, h2 { font-size: 2em; } .btn { margin-top: 4.2em; } .btn.b3 { margin-top: 3.65em; } li > div { top:8em; left: 4em; } .btn.btn-big{ font-size: 1.2em; } } @media (max-width: rem-size(768px * $mod, $font-size-base, true)) { h1, h2 { font-size: 1.7em; } li>div { top: 6em; left: 2em; } .btn.btn-big { font-size: 1em; } } @media (max-width: rem-size(480px * $mod, $font-size-base, true)) { h1, h2 { font-size: 1.1em; } li>div { top: 4em; left: 1em; } .btn.btn-big { font-size: .9em; margin-top: 1.2em; } } } .lSSlideOuter{ .lSPager.lSpg { position: absolute; bottom: 5em; left: 0; right: 0; li{ position: relative; width: 13px; height: 7.51px; background-color: #ffffff; margin: 3.75px 10px!important; z-index: 10; a{ display: none; } } li:before, li:after { content: ""; position: absolute; width: 0; border-left: 6.5px solid transparent; border-right: 6.5px solid transparent; left: 0; } li:before { bottom: 100%; border-bottom: 3.75px solid #ffffff; } li:after { top: 100%; width: 0; border-top: 3.75px solid #ffffff; } li.active{ background: #333; &::after{ border-top: 3.75px solid #333; } &::before{ border-bottom: 3.75px solid #333; } } } } } .offer { line-height: (24px / 17px); text-align: center; overflow: hidden; &__wrapper { background: #3c3c3c; padding-top: 11em; padding-bottom: 5em; color: #fff; h2{ margin-top: 0; color: #fff; font-size: 1.8em; } p{ margin-bottom: 5px; } * { color: #fff; } @media (max-width: rem-size(1280px * $mod, $font-size-base, true)) { margin-top: -2em; } } &__grid { &.h-center{ padding: 0 7em; } &-item { cursor: pointer; display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 0; justify-content: flex-end; line-height: (24px / 17px); max-width: 100%; @include emSize((padding-bottom, padding-top), $padding-offer-grid-item-v / 2, map-get($font-sizes, 'offer')); @include emSize((padding-left, padding-right), $padding-offer-grid-item-h / 2, map-get($font-sizes, 'offer')); text-align: center; // @include emSize(width, map-get($containers, 'default') / 3, map-get($font-sizes, 'offer')); width: map-get($containers, 'default') / 3 !important; width: rem-size(map-get($containers, 'default') / 3, map-get($font-sizes, 'offer'), true) !important; padding: 0 6em; transition: all 0.2s ease-out; &:hover{ transform: scale(1.1); } .bg{ background-image: url("../../userfiles/tla/bg-hex.png"); background-position: center; background-size: contain; background-repeat: no-repeat; padding: 3em 2em; } & > * { width: 100%; } a { font-weight: 500; text-decoration: none; &:focus, &:hover, &:active { text-decoration: none; color: #fff; } } & [class^="icon-"]{ font-size: 5em; } h2{ font-size: 1em; font-weight: 500; margin-top: 1.5em; } & > img { margin-left: auto; margin-right: auto; @include emSize(max-width, $max-width-offer-grid-item-image, map-get($font-sizes, 'offer')); transition: $transitions-duration all; transition: var(--transitions-duration) all; & + h2 { @include useEmSize(font-size, 'offer-grid-item-header', map-get($font-sizes, 'offer')); line-height: (24px / 20px); & + p { margin-top: auto; & + a { margin-left: auto; margin-right: auto; @include emSize(margin-top, map-get($font-sizes, 'offer') * 0.5, map-get($font-sizes, 'offer')); width: unset; } } } } &:focus, &:hover { img { transform: scale($hover-logo-scale); } a { text-decoration: underline; } } } } h1 { @include useEmSize(font-size, 'offer-header', map-get($font-sizes, 'header')); } & > * { &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { .h-center{ padding: 0 2em; } } @media (max-width: rem-size(1280px * $mod, $font-size-base, true)) { div.grid>*:not(.no-width){ padding: 0; } } @media (max-width: rem-size(767px * $mod, $font-size-base, true)) { &__wrapper { @include emSize(padding-bottom, ($padding-offer-bottom - $padding-offer-grid-item-v) / 2 * 0.5, map-get($font-sizes, 'offer')); @include emSize(padding-top, $padding-offer-top * 0.5, map-get($font-sizes, 'offer')); } &__grid { &-item { @include emSize((padding-bottom, padding-top), $padding-offer-grid-item-v / 2 * 0.5, map-get($font-sizes, 'offer')); } } } } .about{ &__wrapper{ background-image: url("../../userfiles/tla/bg-dark.jpg"); background-size: auto; .about{ display: flex; justify-content: space-between; } .col-2{ width: 50%; padding: 6em 5em 4em 7em; background: #fff; display: flex; flex-flow: column nowrap; &.dark{ background: #444; p{ color: #fff; line-height: 1.5; } } h3{ color: #d54449; text-transform: uppercase; font-size: 1.7em } p{ margin-bottom: 5em; &:last-child{ margin-top:auto; margin-bottom: 0 } } } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { .col-2 { padding: 5em 4em 4em 5em; } } @media (max-width: rem-size(990px * $mod, $font-size-base, true)) { .about{ flex-wrap: wrap; } .col-2 { width: 100%; &.dark{ margin-top: 2em; } } } } } .bottom-g{ margin-top: 8em; padding-bottom: 3em; h3{ color: #fff; text-transform: uppercase; text-align: center; font-size: 2em; margin-bottom: 1.5em; } .row-g{ display: flex; justify-content: space-between; flex-wrap: nowrap; .row-item{ width: 24.5%; position: relative; overflow: hidden; &::after{ content: ''; position: absolute; pointer-events: none; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5e5e5+55,e5e5e5+55,000000+100&0+55,0.84+100 */ background: -moz-linear-gradient(top, rgba(229,229,229,0) 55%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(229,229,229,0) 55%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(229,229,229,0) 55%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e5e5e5', endColorstr='#d6000000',GradientType=0 ); /* IE6-9 */ } h4{ position: absolute; bottom: 1em; left: 2em; color: #fff; z-index: 20; margin: 0; font-size: 1.7em; font-weight: 600; pointer-events: none; transition: all 0.2s ease-out; } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { h4 { font-size: 1.3em } } p{ margin: 0; padding: 0; } img{ width: 100%; transition: all 0.2s ease-out; } &:hover{ h4{ bottom: 3em } img{ transform: scale(1.1); } } } } @media (max-width: rem-size(990px * $mod, $font-size-base, true)) { .row-g{ flex-wrap: wrap; .row-item{ width: 49%; margin-bottom: 3px; } } } @media (max-width: rem-size(660px * $mod, $font-size-base, true)) { .row-g{ flex-wrap: wrap; .row-item{ width: 100%; h4{ bottom: 2em; } } } } } .page { &__wrapper { @include useEmSize(font-size, 'page'); @include emSize((margin-bottom, margin-top), $margin-page-v, map-get($font-sizes, 'page')); } .page { @include useEmSize(font-size, 'page', map-get($font-sizes, 'page')); line-height: (24px / 17px); h1 { @include useEmSize(font-size, 'page-h1', map-get($font-sizes, 'page')); } h2 { @include useEmSize(font-size, 'page-h2', map-get($font-sizes, 'page')); } h3 { @include useEmSize(font-size, 'page-h3', map-get($font-sizes, 'page')); } h4 { @include useEmSize(font-size, 'page-h4', map-get($font-sizes, 'page')); } & > ol { & > li { padding: .5em 0; } } @at-root .page--categories .page > div.grid-wrapper { @include emSize((margin-bottom, margin-top), map-get($font-sizes, 'page') * 2, map-get($font-sizes, 'page')); & > *[class*="grid-cell"] { // @include emSize(padding, map-get($font-sizes, 'page') * 0.6, map-get($font-sizes, 'page')); @media (min-width: rem-size(1024px * $mod, $font-size-base, true)) { &:nth-of-type(2n) { @include emSize(padding-left, map-get($font-sizes, 'page') * 3, map-get($font-sizes, 'page')); } &:nth-of-type(2n+1) { @include emSize(padding-right, map-get($font-sizes, 'page') * 3, map-get($font-sizes, 'page')); } } } } } & > .grid { @include useEmSize(font-size, 'page-grid', map-get($font-sizes, 'page')); h1 { @include useEmSize(font-size, 'page-h1', map-get($font-sizes, 'page-grid')); } h2 { @include useEmSize(font-size, 'page-h2', map-get($font-sizes, 'page-grid')); } h3 { @include useEmSize(font-size, 'page-h3', map-get($font-sizes, 'page-grid')); } h4 { @include useEmSize(font-size, 'page-h4', map-get($font-sizes, 'page-grid')); } &:first-of-type { & > .bordered { justify-content: flex-start; p > img { height: auto; @include emSize(max-width, 75px, map-get($font-sizes, 'page-grid')); } } } &--logotypes { & > .bordered { justify-content: center !important; @include emSize(min-height, 314px, map-get($font-sizes, 'page-grid')); @include emSize((padding-bottom, padding-left, padding-right, padding-top), $padding-grid-item-h, map-get($font-sizes, 'page-grid')); } img { object-fit: contain; object-position: center; } } } @media (max-width: rem-size(1024px * $mod, $font-size-base, true)) { .page__wrapper .container--default { padding: 4em; } } @media (max-width: rem-size(768px * $mod, $font-size-base, true)) { .page__wrapper .container--default { padding: 2em; } } @media (max-width: rem-size(480px * $mod, $font-size-base, true)) { .page__wrapper .container--default { padding: 2em; margin: 0; max-width: 100%; } h1{ font-size: 1.7em; } .page h2{ font-size: 1.2em } } } .category-tree { @include useColor(color, 'category-tree'); @include useEmSize(font-size, 'page-category-tree', map-get($font-sizes, 'page')); font-weight: 600; line-height: (21px / 18px); margin-top: 0; padding-left: 0 !important; padding-right: 0 !important; ul { list-style-type: none; ul { @include emSize(padding-left, $padding-category-tree-left, map-get($font-sizes, 'page-category-tree')); &:not(.current) { display: none; } } } li { @include emSize((margin-bottom, margin-top), $margin-page-category-tree-item-v, map-get($font-sizes, 'page-category-tree')); } & > ul > li { @include emSize(max-width, $max-width-category-tree-item, map-get($font-sizes, 'page-category-tree')); } & > ul ul li { @include emSize((margin-bottom, margin-top), $margin-page-category-tree-item-v / 2, map-get($font-sizes, 'page-category-tree')); } a { color: inherit; display: block; @include emSize(padding-right, map-get($font-sizes, 'page-category-tree') * 1.2, map-get($font-sizes, 'page-category-tree')); text-decoration: none; &:focus, &:hover, &.active { @include useColor(color, 'category-tree-active'); } } ul ul.current a { @include useColor(color, 'category-tree-active'); } & > ul { padding-left: 0; } .corner-arrow { &:after { bottom: unset; cursor: pointer; pointer-events: all; z-index: 10; } &:hover, &:focus, &.expanded { &:after { } } } .dropdown.expanded { & > .corner-arrow:after { transform: rotate(-30deg); } & > ul { display: block; } } & + * { & > div.grid-wrapper { @include emSize(margin-left, map-get($font-sizes, 'page') * -1, map-get($font-sizes, 'page')); @include emSize(margin-top, map-get($font-sizes, 'page') * 3, map-get($font-sizes, 'page')); & > *[class*="grid-cell-"] { @include emSize(padding-left, map-get($font-sizes, 'page') * 1, map-get($font-sizes, 'page')); } a { text-decoration: none; &:hover, &:focus { text-decoration: underline; } } .border-hexagon { & + * { @include emSize(margin-bottom, map-get($font-sizes, 'page') * 2, map-get($font-sizes, 'page')); & + * { @include emSize(margin-top, map-get($font-sizes, 'page') * 2, map-get($font-sizes, 'page')); } } } @media (max-width: rem-size(899px * $mod, $font-size-base, true)) { & > *[class*="grid-cell-"] { width: 50%; } } @media (max-width: rem-size(539px * $mod, $font-size-base, true)) { margin-left: 0; & > *[class*="grid-cell-"] { padding-left: 0; width: 100%; } .border-hexagon img { height: auto; width: 30%; } } } & > *:first-child { margin-top: 0; } } &__mobile-toggler { &--checkbox { display: none; } &--label { display: none; transition: $transitions-duration all; transition: var(--transitions-duration) all; } } @media (max-width: rem-size(1023px * $mod, $font-size-base, true)) { @include useColor(background-color, 'category-tree-mobile-background'); @include useColor(color, 'category-tree-mobile'); bottom: 0; left: 0; position: fixed; right: 0; top: 0; transform: translateX(-100%); transition: $transitions-duration all; transition: var(--transitions-duration) all; width: 100% !important; z-index: 100; a { &:hover, &:focus, &.active { @include useColor(color, 'arrows'); } } & + * { flex-basis: 100%; width: 100%; } ul { &, & ul { padding-left: 0; } } li { margin: 0 !important; padding: 0 !important; a { @include emSize((padding-bottom, padding-top), map-get($font-sizes, 'page-category-tree') * 0.5, map-get($font-sizes, 'page-category-tree')); } &:not(:last-child) a { @include useColor(border-bottom-color, 'category-tree'); border-bottom-style: solid; @include emSize(border-bottom-width, 1px, map-get($font-sizes, 'page-category-tree')); } } $sel: 'ul li'; @for $i from 1 through 5 { #{$sel} ul li a { @include emSize(padding-left, map-get($font-sizes, 'page-category-tree') * ($i * 1.5), map-get($font-sizes, 'page-category-tree')); } $sel: #{$sel + ' ul li'}; } .corner-arrow { &:after { right: 0; } &:hover, &:focus, &:active { &:after { right: 0; } } } &__mobile-toggler { &--label { @include useColor(background-color, 'category-tree-mobile-background'); cursor: pointer; display: block; @include emSize(height, $width-corner-arrow * 1.75, map-get($font-sizes, 'page-category-tree')); left: 100%; position: absolute; @include emSize(top, map-get($font-sizes, 'page-category-tree') * 3, map-get($font-sizes, 'page-category-tree')); @include emSize(width, $height-corner-arrow * 1.75, map-get($font-sizes, 'page-category-tree')); &, &:after { pointer-events: all; } &:after { left: 5%; top: 28% !important; transform: rotate(-120deg); } } } } @at-root .category-tree__mobile-toggler { &--checkbox:checked + .category-tree { overflow-x: hidden; overflow-y: auto; transform: none; .category-tree { &__mobile-toggler { &--label { @include useColor(background-color, 'nav-background'); transform: translateX(-100%); &:after { left: 20%; transform: rotate(60deg); } } } } & > ul { & > li { max-width: unset; } } @media (max-width: rem-size(1023px * $mod, $font-size-base, true)) { padding-left: $padding-category-tree-mobile-h !important; padding-left: rem-size($padding-category-tree-mobile-h, map-get($font-sizes, 'page-category-tree'), true) !important; padding-top: map-get($font-sizes, 'page-category-tree') * 2 !important; padding-top: rem-size(map-get($font-sizes, 'page-category-tree') * 2, map-get($font-sizes, 'page-category-tree'), true) !important; padding-right: $padding-category-tree-mobile-h !important; padding-right: rem-size($padding-category-tree-mobile-h, map-get($font-sizes, 'page-category-tree'), true) !important; } @media (max-width: rem-size(479px * $mod, $font-size-base, true)) { padding-left: $padding-category-tree-mobile-h / 3 !important; padding-left: rem-size($padding-category-tree-mobile-h / 3, map-get($font-sizes, 'page-category-tree'), true) !important; & > ul { @include emSize(font-size, map-get($font-sizes, 'page-category-tree') * 0.75, map-get($font-sizes, 'page')); } } } } } .page--category, .page--product { .category-tree + * { & > .grid-wrapper { // justify-content: space-between; @include emSize(margin-bottom, $margin-category-product-wrapper, map-get($font-sizes, 'page')); @include emSize(margin-top, map-get($font-sizes, 'page'), map-get($font-sizes, 'page')); &:after { display: none; } .border-hexagon { background: none; max-height: unset; max-width: unset; position: relative; width: unset; img { @include emSize(height, $height-category-product-hexagon, map-get($font-sizes, 'page')); max-height: unset; max-width: unset; padding: 0; width: auto; } &:after { background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-nakladka.png"); // background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-nakladka.svg"); background-size: 100% 100%; height: 100%; @include emSize(left, map-get($font-sizes, 'page'), map-get($font-sizes, 'page')); pointer-events: none; position: absolute; top: 0; width: calc(100% - 1em); } } .item { &__card { @include emSize(flex-basis, $width-category-product-item-card-text, map-get($font-sizes, 'page-category-product-item-card')); flex-grow: 0; flex-shrink: 0; @include useEmSize(font-size, 'page-category-product-item-card', map-get($font-sizes, 'page')); font-weight: 500; line-height: (30 / 24); a { @include useColor(background-color, 'category-product-item-card-button-background'); @include useColor(color, 'category-product-item-card-button-text'); display: inline-block; @include useEmSize(font-size, 'page-category-product-item-card-button', map-get($font-sizes, 'page-category-product-item-card')); font-weight: 600; line-height: (24 / 20); @include emSize(margin-top, map-get($font-sizes, 'page-category-product-item-card') * 0.5, map-get($font-sizes, 'page-category-product-item-card')); @include emSize((padding-bottom, padding-top), $padding-category-product-item-card-button-v, map-get($font-sizes, 'page-category-product-item-card')); @include emSize((padding-left, padding-right), $padding-category-product-item-card-button-h, map-get($font-sizes, 'page-category-product-item-card')); &:hover, &:focus { @include useColor(background-color, 'category-product-item-card-button-background-hover'); } } } } } .item { &__name { @include useEmSize(font-size, 'page-category-product-item-name', map-get($font-sizes, 'page')); } &__desc { h1, h2, h3 { display: inline-block; } } } } @media (max-width: rem-size(1023px * $mod, $font-size-base, true)) { .category-tree + * { & > .grid-wrapper { justify-content: space-around; } } } @media (max-width: rem-size(829px * $mod, $font-size-base, true)) { .category-tree + * { & > .grid-wrapper { margin: 0; padding: 0; .item { &__image { flex-basis: 100%; margin: 0; @include emSize(margin-bottom, $margin-category-product-wrapper / 4, map-get($font-sizes, 'page')); padding: 0; width: 100%; img { height: auto; @include emSize(max-width, $height-category-products-product-image, map-get($font-sizes, 'page')); width: 100%; } &:before, &:after { left: 0 !important; margin: 0; padding: 0; width: 100% !important; } } &__card { flex-basis: 100%; margin: 0; @include emSize(margin-top, $margin-category-product-wrapper / 4, map-get($font-sizes, 'page-category-product-item-card')); padding: 0; text-align: center; width: 100%; a { @include emSize(margin-top, map-get($font-sizes, 'page-category-product-item-card'), map-get($font-sizes, 'page-category-product-item-card')); } } } } } } } .page--category { .category-products { .category-product { @include useEmSize(font-size, 'page-category-products-names', map-get($font-sizes, 'page')); font-weight: 600; @include emSize(margin-bottom, $margin-category-products-product-v, map-get($font-sizes, 'page')); text-align: center; &__image { display: block; @include emSize(margin-bottom, map-get($font-sizes, 'page-category-products-names') * 0.5, map-get($font-sizes, 'page-category-products-names')); img { @include emSize(height, $height-category-products-product-image, map-get($font-sizes, 'page-category-products-names')); object-fit: cover; position: relative; z-index: 1; } &:before, &:after { background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-nakladka.png"); // background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-nakladka.svg"); background-size: 100% 100%; content: ""; display: block; height: calc(100% - 0.4em); @include emSize(left, map-get($font-sizes, 'page-category-products-names') * 0.5, map-get($font-sizes, 'page-category-products-names')); pointer-events: none; position: absolute; top: 0; width: calc(100% - 1em); z-index: 2; } &:after { background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-ramka.png"); background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-ramka.svg"); height: calc(100% - 0.3em); } } } } @media (max-width: rem-size(829px * $mod, $font-size-base, true)) { .category-products { .category-product { &__image { img { @include emSize(max-width, $height-category-products-product-image, map-get($font-sizes, 'page')); @media (max-width: rem-size(319px * $mod, $font-size-base, true)) { height: auto; width: 100%; } } &:before, &:after { left: 0 !important; margin: 0; padding: 0; width: 100% !important; } } } } } } .page--product { .category-tree + * { & > .grid-wrapper { .border-hexagon { &:before, &:after { background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-nakladka.png"); // background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-nakladka.svg"); background-size: 100% 100%; height: 100%; @include emSize(left, map-get($font-sizes, 'page'), map-get($font-sizes, 'page')); pointer-events: none; position: absolute; top: 0; width: calc(100% - 1em); } &:after { background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-ramka.png"); background-image: url("../../userfiles/grafiki/szesciokaty/szesciokat-ramka.svg"); } } } } } .footer { &__wrapper { background-image: url(../../userfiles/tla/bg-dark.jpg); } &-contact__logo--wrapper{ width: 100%; display: flex; margin: auto; } &-contact { display: flex; justify-content: space-between; padding: 4em 0; &__wrapper { background-color: rgba(0, 0, 0, 0.6); } a { text-decoration: none; &:focus, &:hover, &:active { text-decoration: underline; } } &__text { width: 33.33%; padding: 3em 0; &.two{ border: 2px solid #8f8f8f; border-bottom: 0; border-top: 0; padding: 2em 91px; margin-right: 3em; } * { color: #fff; } h5{ font-weight: 600; font-size: 1.2em; margin-top: 0; } a{ &:hover{ color: #d54449; } } } } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { &-contact{ padding: 4em 6em; } } &-copyright { align-items: center; display: flex; justify-content: space-between; &__wrapper { background-color: rgba(0, 0, 0, 0.6); @include useColor(color, 'footer-copyright-text'); @include useEmSize(font-size, 'footer-copyright'); @include emSize(padding-bottom, $padding-footer-copyright-bottom, map-get($font-sizes, 'footer-copyright')); @include emSize(padding-top, $padding-footer-copyright-top, map-get($font-sizes, 'footer-copyright')); } a { text-decoration: none; &:focus, &:hover, &:active { @include useColor(color, 'main-a'); text-decoration: underline; } } &__text { & > *:first-child { margin-top: 0; } & > *:last-child { margin-bottom: 0; } } &__separator { @include emSize((margin-left, margin-right), map-get($font-sizes, 'footer-copyright') / 3 * 1.5); } &__kaczka { flex: 0 0 auto; @include useEmSize(font-size, 'footer-copyright-kaczka', map-get($font-sizes, 'footer-copyright')); } @media (max-width: rem-size(803px * $mod, $font-size-base, true)) { flex-wrap: wrap; &__text { flex: 1 1 auto; @include emSize(margin-bottom, map-get($font-sizes, 'footer-copyright'), map-get($font-sizes, 'footer-copyright')); text-align: center; width: 100%; } &__kaczka { flex: 1 1 auto; @include emSize(margin-top, map-get($font-sizes, 'footer-copyright'), map-get($font-sizes, 'footer-copyright-kaczka')); text-align: center; width: 100%; } } } } @media (max-width: rem-size(1280px * $mod, $font-size-base, true)) { .footer-contact { padding: 4em 2em; } .footer-contact__text.two { padding: 2em 40px; } } @media (max-width: rem-size(768px * $mod, $font-size-base, true)) { .footer-contact__logo--wrapper { flex-wrap: wrap; } .footer-contact__text { width: 100%; padding: 0; } .footer-contact__text.two { padding: 2em 0; border: none; } .footer-contact__text h5 { margin-bottom: 0; } .about__wrapper .col-2 { padding: 2em 2em 2em 2em; } } @media (max-width: rem-size(480px * $mod, $font-size-base, true)) { .btn{ font-size: 1.1em; } } .user-modal { max-height: 50vh; max-height: calc(100vh - #{($width-modal-border-filled + $width-modal-border-transparent + $padding-modal-v) * 2}); max-height: calc(100vh - #{rem-size(($width-modal-border-filled + $width-modal-border-transparent + $padding-modal-v) * 2, map-get($font-sizes, 'modal'), true)}); overflow: auto; &__wrapper { @include useColor(background-color, 'modal-background'); line-height: (36px / 20px); margin: auto; max-height: 90%; max-height: calc(100% - #{($width-modal-border-filled + $width-modal-border-transparent) * 2}); max-height: calc(100% - #{rem-size(($width-modal-border-filled + $width-modal-border-transparent) * 2, map-get($font-sizes, 'modal'), true)}); max-width: 90%; max-width: calc(100% - #{($width-modal-border-filled + $width-modal-border-transparent) * 2}); max-width: calc(100% - #{rem-size(($width-modal-border-filled + $width-modal-border-transparent) * 2, map-get($font-sizes, 'modal'), true)}); @include emSize((padding-left, padding-right), $padding-modal-h, map-get($font-sizes, 'modal')); @include emSize((padding-bottom, padding-top), $padding-modal-v, map-get($font-sizes, 'modal')); position: relative; &--overlay { @include useColor(background-color, 'modal-overlay'); bottom: 0; @include useEmSize(font-size, 'modal'); left: 0; position: fixed; right: 0; top: 0; z-index: 1000; } &:before { @include useColor(border-color, 'modal-border'); border-style: solid; @include emSize(border-width, $width-modal-border-filled, map-get($font-sizes, 'modal')); content: ""; display: block; position: absolute; @include emSize((bottom, left, right, top), -$width-modal-border-filled - $width-modal-border-transparent, map-get($font-sizes, 'modal')); } } & > * { &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } &__close-btn { cursor: pointer; @include emSize((height, width), $modal-close-button-size, map-get($font-sizes, 'modal')); position: absolute; right: 0; top: 0; transition: $transitions-duration all; transition: var(--transitions-duration) all; &:before, &:after { @include useColor(background-color, 'main-text'); border-radius: 2em; content: ""; display: block; position: absolute; transition: $transitions-duration all; transition: var(--transitions-duration) all; } &:before { @include emSize(bottom, $modal-close-button-space, map-get($font-sizes, 'modal')); left: 50%; @include emSize(top, $modal-close-button-space, map-get($font-sizes, 'modal')); transform: translateX(-50%) rotate(45deg); @include emSize(width, $modal-close-button-width, map-get($font-sizes, 'modal')); } &:after { @include emSize(left, $modal-close-button-space, map-get($font-sizes, 'modal')); top: 50%; @include emSize(right, $modal-close-button-space, map-get($font-sizes, 'modal')); transform: translateY(-50%) rotate(45deg); @include emSize(height, $modal-close-button-width, map-get($font-sizes, 'modal')); } &:hover, &:focus { @include useColor(background-color, 'main-text'); &:before, &:after { @include useColor(background-color, 'main-background'); } &:before { transform: translateX(-50%) rotate(225deg); } &:after { transform: translateY(-50%) rotate(225deg); } } } @media (max-width: rem-size(1023px * $mod, $font-size-base, true)) { br.mobile-no-line-wrap { display: none; } } @media (max-width: rem-size(767px * $mod, $font-size-base, true)) { &__wrapper { &--overlay { @include emSize(font-size, map-get($font-sizes, 'modal') * 0.75); } } } } ul.gallery { --items: 3; display: flex; flex-wrap: wrap; padding: 0; margin: 0; justify-content: center; li { flex: 0 0 (100% / 3); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-gallery-grid-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-gallery-grid-space-h)}); margin: 4px; list-style: none; &:not(.no-width) { width: 100% / 3; width: calc(100% / 3); width: calc(100% / var(--items)); } @media (max-width: rem-size(999px * $mod, $font-size-base, true)) { flex-grow: 1; } } li img { height: 100%; object-fit: cover; object-position: center; width: 100%; } @media (max-width: rem-size(767px * $mod, $font-size-base, true)) { --items: 2; &__item, & > a { flex: 0 0 (100% / 2); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 2; width: calc(100% / 2); width: calc(100% / var(--items)); } } } @media (max-width: rem-size(479px * $mod, $font-size-base, true)) { --items: 1; &__item, & > a { flex: 0 0 (100% / 1); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 1; width: calc(100% / 1); width: calc(100% / var(--items)); } } } } ul.referencje { --items: 4; display: flex; flex-wrap: wrap; padding: 0; margin: 0; justify-content: center; li { flex: 0 0 (100% / 4); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-gallery-grid-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-gallery-grid-space-h)}); margin: 4px; list-style: none; border: 1px solid #eee; &:not(.no-width) { width: 100% / 4; width: calc(100% / 4); width: calc(100% / var(--items)); } @media (max-width: rem-size(999px * $mod, $font-size-base, true)) { flex-grow: 1; } a{ line-height: 0; display: inherit; &:hover{ opacity: .7; } } } &__image, & > a > img { height: 100%; object-fit: cover; object-position: center; width: 100%; } @media (max-width: rem-size(767px * $mod, $font-size-base, true)) { --items: 2; &__item, & > a { flex: 0 0 (100% / 2); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 2; width: calc(100% / 2); width: calc(100% / var(--items)); } } } @media (max-width: rem-size(479px * $mod, $font-size-base, true)) { --items: 1; &__item, & > a { flex: 0 0 (100% / 1); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 1; width: calc(100% / 1); width: calc(100% / var(--items)); } } } } ul.producenci { --items: 3; display: flex; flex-wrap: wrap; padding: 0; margin: 0; justify-content: center; li { flex: 0 0 (100% / 3); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-gallery-grid-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-gallery-grid-space-h)}); margin: 4px; list-style: none; background: #fff; display: flex; align-items: center; justify-content: center; height: 250px; &:not(.no-width) { width: 100% / 3; width: calc(100% / 3); width: calc(100% / var(--items)); } img{ max-height: 150px; max-width: 150px; } @media (max-width: rem-size(999px * $mod, $font-size-base, true)) { flex-grow: 1; } a{ line-height: 0; display: inherit; display: flex; align-items: center; justify-content: center; &:hover{ opacity: .7; } } } @media (max-width: rem-size(1100px * $mod, $font-size-base, true)) { li{ height: 200px; } } @media (max-width: rem-size(767px * $mod, $font-size-base, true)) { --items: 2; &__item, & > a { flex: 0 0 (100% / 2); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 2; width: calc(100% / 2); width: calc(100% / var(--items)); } } } @media (max-width: rem-size(479px * $mod, $font-size-base, true)) { li{ height: 170px; img{ max-height: 120px; max-width: 120px; } } --items: 1; &__item, & > a { flex: 0 0 (100% / 1); flex: 0 0 calc(100% / var(--items)); flex: 0 0 calc(100% / var(--items) - #{$margin-grid-item-space-h}); flex: 0 0 calc(100% / var(--items) - #{rem-size($margin-grid-item-space-h)}); @include remSize((margin-bottom, margin-top), $margin-grid-item-space-v / 2); @include remSize((margin-left, margin-right), $margin-grid-item-space-h / 2); &:not(.no-width) { width: 100% / 1; width: calc(100% / 1); width: calc(100% / var(--items)); } } } } // AFTER STYLES .float-left { margin-bottom: 1em; margin-right: 2em; } .float-right { margin-bottom: 1em; margin-left: 2em; } .float-left, .float-right { display: block; } @media (max-width: rem-size(511px * $mod, $font-size-base, true)) { .float-left, .float-right { clear: both; float: none; margin-left: auto !important; margin-right: auto !important; } } .l-spacing-1 { letter-spacing: 1px; letter-spacing: rem-size(1px); } .bordered { border-style: solid; border-width: 1px; border-width: rem-size(1px); } .square:before{ content: ""; display: block; padding-top: 100%; /* initial ratio of 1:1*/ } .no-overflow-x { overflow-x: hidden; } .line-through { display: table; margin-left: auto; margin-right: auto; &:before, &:after { background-color: map-get($colors, 'dark'); background-color: var(--color-dark); content: ""; display: block; height: 2px; height: rem-size(2px); position: absolute; top: 58%; width: 10000px; width: 100vw; } &:before { left: 130%; left: calc(100% + 55px); left: calc(100% + #{rem-size(55px)}); } &:after { right: 130%; right: calc(100% + 55px); right: calc(100% + #{rem-size(55px)}); } } body.js { *[class*="fade-in"], *[class*="rotate-in"], *[class*="zoom-in"] { visibility: hidden; } } img[src*="img/loader.gif"] { object-fit: scale-down; } .cookies-box { background-color: rgba(0, 0, 0, 0.6); border-top: 2px solid rgba(0, 0, 0, 0.6); border-top: rem-size(2px) solid rgba(0, 0, 0, 0.6); color: white; position: fixed; bottom: 0; z-index: 99999; padding: rem-size(16px) rem-size(16px); line-height: rem-size(24px); text-align: center; width: 100%; .cookies-box-error { color: #ff5b5b; font-weight: bold; } a { color: inherit; text-decoration: underline; &:hover { color: map-get($colors, 'light'); color: var(--color-light); } } input[type="submit"], button[type="submit"] { background: none; border: none; color: inherit; cursor: pointer; text-decoration: underline; transition: $transitions-duration all; transition: var(--transitions-duration) all; &:hover { color: map-get($colors, 'light'); color: var(--color-light); } } div:first-of-type { float: left; } div:last-of-type { float: right; } display: flex; flex-wrap: wrap; justify-content: space-between; div { flex: 1 1 auto; padding: 0.5em 1em; text-align: center; } p { line-height: 1.25em; margin-bottom: 0; margin-top: 0; } } .page__wrapper{ background-image: url(../../userfiles/tla/bg-dark.jpg); background-size: auto; margin: 0; display: flex; .container--default{ background: #fff; max-width: 62%; margin: auto; margin-top: -3em; margin-bottom: 3em; padding: 8em; position: relative; display: inline-block; p{ font-weight: 500; line-height: 1.7; } &.no-bg{ background: transparent; padding: 0; margin-top: 3em; } @media (max-width: rem-size(1480px * $mod, $font-size-base, true)) { max-width: 90%; } } @media (max-width: rem-size(1380px * $mod, $font-size-base, true)) { .container--default{ margin-top: -1em; padding: 6em; } } &.no-bg{ background: #3c3c3c; } } .row{ display: flex; justify-content: space-between; .col-2{ width: 45%; } @media (max-width: rem-size(768px * $mod, $font-size-base, true)) { flex-wrap: wrap; .col-2{ width: 100%; margin-bottom: 1em; } } } .offer-box{ .oferta{ display: flex; justify-content: space-between; flex-wrap: wrap; .oferta-ikona { width: calc(100% / 3); margin: 4px; height: 260px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-wrap: wrap; flex: 0 0 calc(100% / 3 - 9px); text-align: center; transition: all 1s ease-out; *{ margin: 0; padding: 0;} img{ max-width: 18%; min-height: 100px; } h2{ font-size: 1.1em; font-weight: 500; margin-top: 1em; margin-bottom: 0; } &.active, &:hover{ background: #f58286; h2{ color: #fff; } } } .ul-d{ width: 100%; height: 0; visibility: hidden; justify-content: space-between; margin: 0; padding: 0; transition: all 1s ease-out; opacity: 0; height: 0; overflow: hidden; ul{ margin: 0; padding: 0; display: flex; justify-content: space-between; flex-wrap: wrap; &::after{ content: ""; flex: auto; } } li{ list-style: none; width: calc(100% / 3); margin: 4px; height: 260px; background: #d8d8d8; padding: 0; margin: 4px; display: flex; justify-content: space-between; flex: 0 0 calc(100% / 3 - 9px); transition: all 1s ease-out; a{ display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; transition: opacity 1s ease-out; img{ max-width: 150px; max-height: 150px; transition: all 1s ease-out; opacity: .4; filter: grayscale(100%); } } &:hover{ background: #fff; } &:hover img{ opacity: 1; filter: grayscale(0%); } } &.active-ul{ opacity: 1; height: auto; visibility: visible; } } @media (max-width: rem-size(1280px * $mod, $font-size-base, true)) { .oferta-ikona{ height: 220px; h2{ margin: 0; } img{ max-width: 14%; } } } @media (max-width: rem-size(768px * $mod, $font-size-base, true)) { .oferta-ikona{ width: calc(100% ); flex: 0 0 calc(100%); &.active{ } } .active-ul{ li{ width: calc(100% ); flex: 0 0 calc(100%); } } } } } @media (max-width: rem-size(1023px * $mod, $font-size-base, true)) { .nav .dropdown:hover ul{ background: #cb2027; } } iframe{ width: 100%; } @font-face { font-family: 'lg'; src: url("../font/lg.ttf?22t19m") format("truetype"), url("../font/lg.woff?22t19m") format("woff"), url("../font/lg.svg?22t19m#lg") format("svg"); font-weight: normal; font-style: normal; font-display: block; } .lg-icon { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'lg' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 2px; color: #999; cursor: pointer; display: block; font-size: 22px; margin-top: -10px; padding: 8px 10px 9px; position: absolute; top: 50%; z-index: 1080; border: none; outline: none; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { pointer-events: none; opacity: 0.5; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { color: #FFF; } .lg-actions .lg-next { right: 20px; } .lg-actions .lg-next:before { content: "\e095"; } .lg-actions .lg-prev { left: 20px; } .lg-actions .lg-prev:after { content: "\e094"; } @-webkit-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-moz-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-ms-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-webkit-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-moz-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-ms-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } .lg-outer.lg-right-end .lg-object { -webkit-animation: lg-right-end 0.3s; -o-animation: lg-right-end 0.3s; animation: lg-right-end 0.3s; position: relative; } .lg-outer.lg-left-end .lg-object { -webkit-animation: lg-left-end 0.3s; -o-animation: lg-left-end 0.3s; animation: lg-left-end 0.3s; position: relative; } .lg-toolbar { z-index: 1082; left: 0; position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { color: #999; cursor: pointer; float: right; font-size: 24px; height: 47px; line-height: 27px; padding: 10px 0; text-align: center; width: 50px; text-decoration: none !important; outline: medium none; background: none; border: none; box-shadow: none; -webkit-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; } .lg-toolbar .lg-icon:hover { color: #FFF; } .lg-toolbar .lg-close:after { content: "\e070"; } .lg-toolbar .lg-download:after { content: "\e0f2"; } .lg-sub-html { background-color: rgba(0, 0, 0, 0.45); bottom: 0; color: #EEE; font-size: 16px; left: 0; padding: 10px 40px; position: fixed; right: 0; text-align: center; z-index: 1080; } .lg-sub-html h4 { margin: 0; font-size: 13px; font-weight: bold; } .lg-sub-html p { font-size: 12px; margin: 5px 0 0; } #lg-counter { color: #999; display: inline-block; font-size: 16px; padding-left: 20px; padding-top: 12px; vertical-align: middle; } .lg-toolbar, .lg-prev, .lg-next { opacity: 1; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; } .lg-hide-items .lg-prev { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .lg-hide-items .lg-next { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } .lg-hide-items .lg-toolbar { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); opacity: 0; -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } .lg-outer .lg-thumb-outer { background-color: #0D0A0A; bottom: 0; position: absolute; width: 100%; z-index: 1080; max-height: 350px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { padding: 10px 0; height: 100%; margin-bottom: -5px; } .lg-outer .lg-thumb-item { border-radius: 5px; cursor: pointer; float: left; overflow: hidden; height: 100%; border: 2px solid #FFF; border-radius: 4px; margin-bottom: 5px; } @media (min-width: 1025px) { .lg-outer .lg-thumb-item { -webkit-transition: border-color 0.25s ease; -o-transition: border-color 0.25s ease; transition: border-color 0.25s ease; } } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #a90707; } .lg-outer .lg-thumb-item img { width: 100%; height: 100%; object-fit: cover; } .lg-outer.lg-has-thumb .lg-item { padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { -webkit-transition: bottom 0.25s ease; -o-transition: bottom 0.25s ease; transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 100px; } .lg-outer .lg-toogle-thumb { background-color: #0D0A0A; border-radius: 2px 2px 0 0; color: #999; cursor: pointer; font-size: 24px; height: 39px; line-height: 27px; padding: 5px 0; position: absolute; right: 20px; text-align: center; top: -39px; width: 50px; outline: medium none; border: none; } .lg-outer .lg-toogle-thumb:after { content: "\e1ff"; } .lg-outer .lg-toogle-thumb:hover { color: #FFF; } .lg-outer .lg-video-cont { display: inline-block; vertical-align: middle; max-width: 1140px; max-height: 100%; width: 100%; padding: 0 5px; } .lg-outer .lg-video { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .lg-outer .lg-video .lg-object { display: inline-block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .lg-outer .lg-video .lg-video-play { width: 84px; height: 59px; position: absolute; left: 50%; top: 50%; margin-left: -42px; margin-top: -30px; z-index: 1080; cursor: pointer; } .lg-outer .lg-has-iframe .lg-video { -webkit-overflow-scrolling: touch; overflow: auto; } .lg-outer .lg-has-vimeo .lg-video-play { background: url("../img/vimeo-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-vimeo:hover .lg-video-play { background: url("../img/vimeo-play.png") no-repeat scroll 0 -58px transparent; } .lg-outer .lg-has-html5 .lg-video-play { background: transparent url("../img/video-play.png") no-repeat scroll 0 0; height: 64px; margin-left: -32px; margin-top: -32px; width: 64px; opacity: 0.8; } .lg-outer .lg-has-html5:hover .lg-video-play { opacity: 1; } .lg-outer .lg-has-youtube .lg-video-play { background: url("../img/youtube-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-youtube:hover .lg-video-play { background: url("../img/youtube-play.png") no-repeat scroll 0 -60px transparent; } .lg-outer .lg-video-object { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } .lg-outer .lg-has-video .lg-video-object { visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { visibility: visible; } .lg-progress-bar { background-color: #333; height: 5px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1083; opacity: 0; -webkit-transition: opacity 0.08s ease 0s; -moz-transition: opacity 0.08s ease 0s; -o-transition: opacity 0.08s ease 0s; transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { background-color: #a90707; height: 5px; width: 0; } .lg-progress-bar.lg-start .lg-progress { width: 100%; } .lg-show-autoplay .lg-progress-bar { opacity: 1; } .lg-autoplay-button:after { content: "\e01d"; } .lg-show-autoplay .lg-autoplay-button:after { content: "\e01a"; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transition-duration: 0s; transition-duration: 0s; } .lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } #lg-zoom-in:after { content: "\e311"; } #lg-actual-size { font-size: 20px; } #lg-actual-size:after { content: "\e033"; } #lg-zoom-out { opacity: 0.5; pointer-events: none; } #lg-zoom-out:after { content: "\e312"; } .lg-zoomed #lg-zoom-out { opacity: 1; pointer-events: auto; } .lg-outer .lg-pager-outer { bottom: 60px; left: 0; position: absolute; right: 0; text-align: center; z-index: 1080; height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { overflow: visible; } .lg-outer .lg-pager-cont { cursor: pointer; display: inline-block; overflow: hidden; position: relative; vertical-align: top; margin: 0 5px; } .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { background-color: #fff; color: #FFF; bottom: 100%; height: 83px; left: 0; margin-bottom: 20px; margin-left: -60px; opacity: 0; padding: 5px; position: absolute; width: 120px; border-radius: 3px; -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { width: 100%; height: 100%; } .lg-outer .lg-pager { background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; display: block; height: 12px; -webkit-transition: box-shadow 0.3s ease 0s; -o-transition: box-shadow 0.3s ease 0s; transition: box-shadow 0.3s ease 0s; width: 12px; } .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px dashed; bottom: -10px; display: inline-block; height: 0; left: 50%; margin-left: -5px; position: absolute; vertical-align: middle; width: 0; } .lg-fullscreen:after { content: "\e20c"; } .lg-fullscreen-on .lg-fullscreen:after { content: "\e20d"; } .lg-outer #lg-dropdown-overlay { background-color: rgba(0, 0, 0, 0.25); bottom: 0; cursor: default; left: 0; position: fixed; right: 0; top: 0; z-index: 1081; opacity: 0; visibility: hidden; -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; } .lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay { -webkit-transition-delay: 0s; transition-delay: 0s; -moz-transform: translate3d(0, 0px, 0); -o-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); opacity: 1; visibility: visible; } .lg-outer.lg-dropdown-active #lg-share { color: #FFF; } .lg-outer .lg-dropdown { background-color: #fff; border-radius: 2px; font-size: 14px; list-style-type: none; margin: 0; padding: 10px 0; position: absolute; right: 0; text-align: left; top: 50px; opacity: 0; visibility: hidden; -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; } .lg-outer .lg-dropdown:after { content: ""; display: block; height: 0; width: 0; position: absolute; border: 8px solid transparent; border-bottom-color: #FFF; right: 16px; top: -16px; } .lg-outer .lg-dropdown > li:last-child { margin-bottom: 0px; } .lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon { color: #333; } .lg-outer .lg-dropdown a { color: #333; display: block; white-space: pre; padding: 4px 12px; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; } .lg-outer .lg-dropdown a:hover { background-color: rgba(0, 0, 0, 0.07); } .lg-outer .lg-dropdown .lg-dropdown-text { display: inline-block; line-height: 1; margin-top: -3px; vertical-align: middle; } .lg-outer .lg-dropdown .lg-icon { color: #333; display: inline-block; float: none; font-size: 20px; height: auto; line-height: 1; margin-right: 8px; padding: 0; vertical-align: middle; width: auto; } .lg-outer #lg-share { position: relative; } .lg-outer #lg-share:after { content: "\e80d"; } .lg-outer #lg-share-facebook .lg-icon { color: #3b5998; } .lg-outer #lg-share-facebook .lg-icon:after { content: "\e904"; } .lg-outer #lg-share-twitter .lg-icon { color: #00aced; } .lg-outer #lg-share-twitter .lg-icon:after { content: "\e907"; } .lg-outer #lg-share-googleplus .lg-icon { color: #dd4b39; } .lg-outer #lg-share-googleplus .lg-icon:after { content: "\e905"; } .lg-outer #lg-share-pinterest .lg-icon { color: #cb2027; } .lg-outer #lg-share-pinterest .lg-icon:after { content: "\e906"; } .lg-outer .lg-img-rotate { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 0, 0.67, 0) 0s; -moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 0, 0.67, 0) 0s; -o-transition: -o-transform 0.3s cubic-bezier(0.32, 0, 0.67, 0) 0s; transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0) 0s; } .lg-rotate-left:after { content: "\e900"; } .lg-rotate-right:after { content: "\e901"; } .lg-icon.lg-flip-hor, .lg-icon.lg-flip-ver { font-size: 26px; } .lg-flip-ver:after { content: "\e903"; } .lg-flip-hor:after { content: "\e902"; } .lg-group:after { content: ""; display: table; clear: both; } .lg-outer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1050; text-align: left; opacity: 0; outline: none; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lg-outer.lg-visible { opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; opacity: 1; } .lg-outer.lg-grab img.lg-object { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer.lg-grabbing img.lg-object { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg { height: 100%; width: 100%; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; } .lg-outer .lg-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; white-space: nowrap; } .lg-outer .lg-item { background: url("../img/loading.gif") no-repeat scroll center center transparent; display: none !important; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { display: inline-block !important; } .lg-outer.lg-css .lg-current { display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { display: inline-block; text-align: center; position: absolute; width: 100%; height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } .lg-outer .lg-img-wrap { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; } .lg-outer .lg-item.lg-complete { background-image: none; } .lg-outer .lg-item.lg-current { z-index: 1060; } .lg-outer .lg-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { opacity: 1; } .lg-outer .lg-empty-html { display: none; } .lg-outer.lg-hide-download #lg-download { display: none; } .lg-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: #000; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-backdrop.in { opacity: 1; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { -webkit-transition: none 0s ease 0s !important; -moz-transition: none 0s ease 0s !important; -o-transition: none 0s ease 0s !important; transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { -webkit-transition: opacity 0.1s ease 0s; -moz-transition: opacity 0.1s ease 0s; -o-transition: opacity 0.1s ease 0s; transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { opacity: 0; position: absolute; left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { left: 0; opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } /*# sourceMappingURL=lightgallery.css.map */
[+]
..
[-] _style-ie9.scss
[edit]
[-] _config.scss
[edit]
[-] style.scss
[edit]
[-] _responsive.scss
[edit]
[-] _init.scss
[edit]
[-] style-ie.scss
[edit]