/* -- main-banner-carousel :: v.: 0.24 r.: 30/05/25 @ pp */
/*
 * v. 0.01 @ fs (16/03/20): main banner carousel + @ pp (19/03/20): poprawki stylow dla IE (BREMBDEV-2337)
 * v. 0.02 @ fs (01/04/20): app download button (BREMBDEV-2469)
 * v. 0.03 @ fs (27/04/20): naprawione bledy (BREMBDEV-2480)
 * v. 0.04 @ fs (21/04/20): subtitle height fix (BREMBDEV-2480)
 * v. 0.05 @ pp (30/06/20): usunieta nadmiarowa regula dla .service-list w karuzeli na mobile (< 640) (BREMBDEV-1682)
 * v. 0.06 @ pp (07/07/20): poprawki stylow przycisku CTA (BREMBDEV-2521)
 * v. 0.07 @ pp (03/08/20): dodanie reguly do ukrywania noty prawnej oraz wykazu uslug nieaktywnego slajdu (BREMBDEV-2575)
 * v. 0.08 @ pp (16/10/20): poprawka stylow przycisku (dodanie z-index, zeby lezal nad linkiem otaczajacym wszystko) (BREMBDEV-2635)
 * v. 0.09 @ pp (27/01/21): poprawki stylow paska promocyjnego (przeniesione z dev-fs) (BREMBDEV-2284)
 * v. 0.10 @ pp (18/03/21): dodanie zwiekszonej wysokosci karuzeli (<=768) przy widocznej mobilnej nawigacji (.mob-nav-bg) oraz dodanie maksymalnej wysokosci LI, zmniejszenie standardowego marginesu (<=640) (BREMBDEV-2720)
 * v. 0.11 @ pp (29/01/21): dodanie efektu hover na czerwonym przycisku przy najechaniu na href, dodanie stanu :focus na przycoiskach (BREMBDEV-2603)
 * v. 0.12 @ pp (20/01/21): usuniecie cienia z paska promocyjnego w banerze (BREMBDEV-2676)
 * v. 0.13 @ pp (12/04/21): przebudowa portletu main-banner-carousel (BREMBDEV-2763)
 * v. 0.14 @ fs (08/07/21): ukrycie linkow z pustymi atrybutami href (BREMBDEV-2460)
 * v. 0.15 @ pp (30/09/21): dodanie deklaracji 'text-decoration: none' dla linkow w valuesach (BREMBDEV-2910)
 * v. 0.16 @ pp (06/08/21): automatyczne rozciaganie CTA na mobile (<=480) (BREMBDEV-2872)
 * v. 0.17 @ pp (30/08/21): ukrycie scrolla w zakladkach (BREMBDEV-2886)
 * v. 0.18 @ pp (17/08/21): zmiany dla WCAG (m.in. zmiana polozenia oraz dodanie reguly dla stanu 'focus' zakladek, dodanie regul dla paragrafow o klasie 'heading') (BREMBDEV-2420)
 * v. 0.19 @ pp (17/09/21): ukrycie scrolla w zakladkach na urzadzeniach mobilnych - zmniejszenie wysokosci hrefa na liscie (BREMBDEV-2886)
 * v. 0.20 @ pp (22/10/21): poprawki stylow na mobile dla banera z valuesami (BREMBDEV-2947)
 * v. 0.21 @ mk (11/01/22): poprawki stylow dla floating stripe'a (SKCZDEV-574)
 * v. 0.22 @ vlk (28/02/23): poprawka szerokosci guzika (SKCZDEV-641)
 * v. 0.23 @ pp (06/02/24): dodanie stylow dla zamienionej kolejnosci kolumn w slajdzie (.reversed) (SKCZDEV-677)
 * v. 0.24 @ pp (22/04/25): dodanie maksymalnej szerokosci kolumny (< 640); zmiana koloru tla, naglowkow w slajdzie, tla zakladek; dodanie maksymalnej szerokosci top-bannera na HP; dodanie obramowania kontenera na slajd 
 							przy wiecej niz jednym slajdzie; powiekszenie ikonki (.icon) (SKCZDEV-791)
 */
#top-banner {max-width: 32.75rem; margin: auto;}
/* main banner carousel BREMBDEV-2337 */
#main-banner-carousel {position: relative; height: auto; max-width: 32.75rem; box-sizing: border-box; padding: 0; background: var(--white-color);}
#main-banner-carousel > ul.slides, #main-banner-carousel > ul.slides > li {height: 8.75rem;}
#main-banner-carousel div.slot::before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; height: 8.75rem; background: var(--black-color); opacity: 0; transition: opacity .5s ease; content: '';}
#main-banner-carousel div.slot:hover::before {opacity: .2;}
#main-banner-carousel .slot, #main-banner-carousel > ul > li .slide {height: 100%;}
#main-banner-carousel > ul {padding: 0; margin: 0; visibility: hidden; opacity: 0; transition: opacity .5s ease;}
#main-banner-carousel.visible > ul {z-index: 15; visibility: visible; opacity: 1; transition: opacity .5s ease;}
#main-banner-carousel > ul .container {transition: opacity .5s ease;}
#main-banner-carousel .container {box-sizing: border-box; display: flex; flex-wrap: wrap; height: 100%; max-width: 100%; padding: 0; background-color: #f6f6f6;}
#main-banner-carousel.slides > ul .container {border: 2px solid var(--nav-border); border-bottom: none;}/**/
#main-banner-carousel .container.reversed {flex-direction: row-reverse;}
#main-banner-carousel .container .col {display: flex; align-items: center; flex-basis: 50%; flex-grow: 1; flex-shrink: 0; padding: 0; max-width: 50%; height: 100%; box-sizing: border-box;}
#main-banner-carousel .container .col-left {padding-left: 2.275rem; padding-right: .3rem; flex-wrap: wrap;}
#main-banner-carousel .container.reversed .col-left {padding-left: .9rem; padding-right: 1.675rem;}
/*#main-banner-carousel .container > a:hover ~ .col-left .button.red {background: #900;}*/
#main-banner-carousel .container .col-right {position: relative; padding-right: 2.275rem;  padding-left: .3rem; display: flex; justify-content: center; background-size: cover; background-position: right;}
.edge #main-banner-carousel .container .col-right {overflow: hidden;}
#main-banner-carousel .link-cover {position: absolute; top: .8rem; bottom: .8rem; left: 2.275rem; right: 2.275rem; z-index: 1; text-decoration: none;}
#main-banner-carousel .link-cover[href=""] {display: none;} /* hide empty cover links BREMBDEV-2460 */
#main-banner-carousel .link-cover:focus {outline: 1px dotted var(--black-color);}
#main-banner-carousel .inner {box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: start; flex-basis: 100%; height: 50%; padding: 0; background: transparent;}
#main-banner-carousel .inner:nth-child(2) {justify-content: flex-start;}
#main-banner-carousel h1, #main-banner-carousel h2, #main-banner-carousel .heading {margin: 0; color: var(--main-text-color);}
#main-banner-carousel h1, #main-banner-carousel .h1 {font-family: "Mbank", Arial, sans-serif;}
#main-banner-carousel h2, #main-banner-carousel .h2 {font-size: .6rem; font-family: "Montserrat Lite", Arial, sans-serif;}
#main-banner-carousel .button {position: absolute; z-index: 2; bottom: 1rem;}
#main-banner-carousel .val .button {bottom: 1.45rem;}
#main-banner-carousel.values .button {bottom: 1.575rem;}
#main-banner-carousel .button:focus {box-shadow: 0 0 10px rgba(255, 255, 255, .5);}
#main-banner-carousel .values {display: flex; flex-basis: 100%; flex-grow: 1; flex-shrink: 0; flex-wrap: wrap; position: relative; z-index: 2; transform: translate(0, -1.05rem);  padding: .275rem 0; margin: 0 auto; max-width: 28.2rem;  background-color: var(--white-color); border-radius: 4px; border: 1px solid #c6c6c6; box-sizing: border-box; box-shadow: 0 1px 1px var(--black-color)00038;}
#main-banner-carousel .slide.hidden + .values {display: none;}
#main-banner-carousel .value {position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-basis: 33.33%; flex-grow: 1; flex-shrink: 0; padding: .25rem .425rem .25rem .7rem; margin: 0; box-sizing: border-box;}
#main-banner-carousel .values.promoted {padding-bottom: 0;}
#main-banner-carousel .values.promoted .value {padding-bottom: .5rem;}
#main-banner-carousel .color-bar {bottom: 0; left: 0; box-sizing: border-box; flex-basis: 100%; height: auto; padding: 0.125rem .25rem; border: 0; font-family: "Montserrat Lite", Arial, sans-serif; box-shadow: none;}
#main-banner-carousel .slide.hidden + .color-bar {display: none;}
#main-banner-carousel .color-bar p {margin: 0; line-height: 1.2;}
#main-banner-carousel .value > a {position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-decoration: none;}
#main-banner-carousel .value > img {max-width: 1rem; max-height: 1rem; margin-right: .5rem;}
#main-banner-carousel .value > p {font-size: .4rem; font-family: "Montserrat Lite", Arial, sans-serif;}
#main-banner-carousel .value > a ~ p {color: var(--ind-bg-color);}
#main-banner-carousel .icon {max-height: 100%; max-width: 100%;}
/*#main-banner-carousel.lifting .service-list {top: 4px;}*/
/*#main-banner-carousel.lifting .legal-label, #main-banner-carousel.lifting .service-list-label {background-color: none;}*/
#main-banner-carousel.lifting .legal-label, #main-banner-carousel.lifting .service-list-label, #main-banner-carousel .legal-text .row, #main-banner-carousel .service-list-text .row {font-family: "Montserrat Lite", Arial, sans-serif;}
#main-banner-carousel .slide.inactive + .legal-note, #main-banner-carousel .slide.inactive + .service-list, #main-banner-carousel .slide.inactive + .service-list + .legal-note {display: none;}
#main-banner-carousel #all-download-btn {position: absolute; bottom: .5rem; z-index: 3;}
#main-banner-carousel.values #all-download-btn {bottom: 1rem;}
#main-banner-carousel .button-wrapper {text-align: left;}

#main-banner-carousel.main-banner-carousel > ul > li {position: absolute; z-index: 1; width: 100%; opacity: 0; transition: opacity .5s ease .2s;}
#main-banner-carousel.main-banner-carousel > ul > li.current {z-index: 3; opacity: 1; transition: opacity .5s ease 0;}
#main-banner-carousel.mob-nav > ul > li {max-height: 8.75rem;}
#main-banner-carousel-nav {position: absolute; top: 7px; z-index: 15; left: 50%; transform: translate(-50%); display: flex; align-items: center; justify-content: center;}
#main-banner-carousel-nav svg {cursor: pointer;}

#main-banner-carousel .button-top.at-top {position: fixed; top: -15px; left: 0; z-index: 100; display: block; width: 100%; height: auto; background-color: rgba(1, 1, 1, .5); text-align: center; transition: bottom .5s;}
#main-banner-carousel .button-top {top: auto; ; display: none; width: auto; cursor: pointer;}
#main-banner-carousel .button-top .button {position: relative; bottom: auto; margin: 2px auto;}

#main-banner-carousel .button-top.yellow {bottom: 0; width: 1128px; transition: none; background-color: transparent; cursor: pointer;}
#main-banner-carousel .button-top.yellow .button {bottom: 2px; float: right; margin: 0;}

/* przebudowa portletu main-banner-carousel (BREMBDEV-2763) */
#main-banner-carousel > div.title-tabs {position: absolute; top: 100%; width: 100%; visibility: hidden; overflow: hidden;}
#main-banner-carousel.visible > div.title-tabs {visibility: visible;}
#main-banner-carousel > div.title-tabs > ul {position: relative; left: 0; z-index: 2; display: flex; align-items: stretch; /*width: 100%; */height: auto; margin: 0; padding: 0; transition: left .5s;}
#main-banner-carousel > div.title-tabs.shorten > ul {left: 20px; width: calc(100% - 40px); overflow-x: scroll;}
#main-banner-carousel > div.title-tabs > ul > li {position: static; display: flex; flex-basis: 20%; flex-grow: 1; width: auto; height: auto; opacity: 1;}
#main-banner-carousel > div.title-tabs > ul > li > a {position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-width: 150px; height: calc(100% - 10px); margin: 0 1px; padding: 5px 10px; border: 2px solid var(--nav-border); background-color: #f6f6f6; color: var(--main-text-color); text-align: center; font-size:.4rem;font-family: "Montserrat Lite Semi", Arial, sans-serif; transition: border-color .5s;}
#main-banner-carousel > div.title-tabs li:first-child > a {margin-left: 0;}
#main-banner-carousel > div.title-tabs li:last-child > a {margin-right: 0;}
#main-banner-carousel > div.title-tabs > ul > li > a:focus {outline-offset: -4px;}
#main-banner-carousel > div.title-tabs > ul > li.active > a {font-family: 'Montserrat Lite Bold'; font-weight: normal;}
/*.firefox #main-banner-carousel > div.title-tabs > ul > li.active > a {letter-spacing: -.3px;}*/
/*#main-banner-carousel > div.title-tabs.promo-bar > ul > li > a {padding-top: 35px;}*/
#main-banner-carousel > div.title-tabs > ul > li > a:hover, #main-banner-carousel > div.title-tabs > ul > li > a:focus {text-decoration: none;}
#main-banner-carousel > div.title-tabs > ul > li > a > .progress {position: absolute; bottom: -1px; left: -1px; display: block; height: 0;}
#main-banner-carousel > div.title-tabs > ul > li.active > a > .progress {border-top: 4px solid transparent;}
#main-banner-carousel > div.title-tabs > div.nav {position: absolute; bottom: 0; z-index: 2; width: 20px; min-height: 30px; background-color: var(--white-color); opacity: 0;}
#main-banner-carousel > div.title-tabs > div.nav.promo-bar {background: transparent linear-gradient(0, var(--white-color) 45%, transparent 46%);}
#main-banner-carousel > div.title-tabs > div.nav.active {opacity: 1;}
#main-banner-carousel > div.title-tabs > div.nav.prev {left: 0;}
#main-banner-carousel > div.title-tabs > div.nav.next {right: 0;}
#main-banner-carousel > div.title-tabs > div.nav > a {display: block; width: 100%; height: 100%; text-decoration: none;}
#main-banner-carousel > div.title-tabs > div.nav > a:focus {outline: 2px dotted var(--black-color); outline-offset: -2px; opacitty: .5;}
#main-banner-carousel > div.title-tabs > div.nav > a::before {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; width: 18px; height: 10px; margin: auto; background: url(/.templates/img/arrows.svg) -1px 0/20px no-repeat; transform: rotate(90deg); content: '';}
#main-banner-carousel > div.title-tabs > div.nav.next > a::before {transform: rotate(-90deg)}
#main-banner-carousel > div.title-tabs > div.nav.off > a::before {background-position: -1px -73px; cursor: pointer;}
#main-banner-carousel > div.title-tabs.promo-bar > div.nav > a::before {top: 40%;}

@media screen and (max-width: 1328px) {
	/*#main-banner-carousel .service-list {left: .1rem;}*/
	/*#top-banner #main-banner-carousel .legal-note {right: calc(50% - -4px);}*/
	#top-banner #main-banner-carousel .legal-text {left: auto;}
}
@media screen and (max-width: 1310px) {
	#main-banner-carousel .container .col-left {padding-left: calc(50% - 14.1rem);}
	#main-banner-carousel .container .col-right {padding-right: calc(50% - 14.1rem);}
	#main-banner-carousel .link-cover {left: calc(50% - 14.1rem); right: calc(50% - 14.1rem);}
}
@media only screen and (max-width: 1217px) {
	#main-banner-carousel .container .col {margin-left: 0;}
}
@media screen and (max-width: 1176px) {
	#main-banner-carousel .values {margin-left: .6rem; margin-right: .6rem;}
}
@media screen and (max-width: 1152px) {
	#main-banner-carousel .container .col-left {padding-left: .3rem;}
	#main-banner-carousel .container .col-right {padding-right: .3rem;}
	#main-banner-carousel .link-cover {left: .3rem; right: .3rem;}
}
@media screen and (max-width: 1142px) {
	#main-banner-carousel .button-top.yellow {width: 100%; padding: 0 .25rem; box-sizing: border-box;}
}
@media screen and (max-width: 920px) {
	#main-banner-carousel .values {margin-left: .375rem; margin-right: .375rem;}
}
@media screen and (max-width: 768px) {
	#main-banner-carousel.main-banner-carousel .mob-nav-bg.visible {position: relative; z-index: 1; height: .725rem; background-color: var(--gray-color);}
	#main-banner-carousel.mob-nav {height: 9.475rem;}
	/*#main-banner-carousel::after {bottom: -.725rem;}*/
	#main-banner-carousel-nav {top: 5px; z-index: 14;}
	/*#main-banner-carousel .service-list {left: 0;}*/
	/*#top-banner #main-banner-carousel .legal-note {right: 50%; / *z-index: 16;* /}*/
	/*#main-banner-carousel.lifting .service-list {top: 0;}*/
	#main-banner-carousel .button-top.at-top {top: 0;}
	#main-banner-carousel .button-top .button {display: block; width: auto;}
}
@media screen and (max-width: 640px) {
	#main-banner-carousel {margin-bottom: .25rem !important;}
	/*#main-banner-carousel.mob-nav {height: 10.925rem;}
	#main-banner-carousel.mob-nav > ul > li {max-height: 10.2rem;}*/
	#main-banner-carousel > ul.slides, #main-banner-carousel > ul.slides > li {height: 9.35rem;}
	/*#main-banner-carousel .col-left .inner:first-child {height: 45%;}*/
	#main-banner-carousel .legal-wrapper {display: flex; flex-direction: row; order: 1; width: 100%;}
	#main-banner-carousel .legal-wrapper .service-list, #main-banner-carousel .legal-wrapper .service-list-label, 
	#main-banner-carousel .legal-wrapper .legal-note, #main-banner-carousel .legal-wrapper .legal-label {position: static; width: auto; background-color: transparent;}
	#main-banner-carousel .legal-wrapper .service-list-label {padding-left: 0;}
	#main-banner-carousel .legal-wrapper .legal-note {margin-left: auto;}
	#main-banner-carousel .legal-wrapper .legal-label {padding-right: 0;}
	#main-banner-carousel .inner {order: 2; height: 42%;}
	#main-banner-carousel .container .col {max-width: unset;}
	#main-banner-carousel .col-left .inner:nth-of-type(2) {height: 49%;}
	#main-banner-carousel .val .col-left .inner {height: 31%;}
	#main-banner-carousel .val .col-left .inner:nth-of-type(2) {height: 58%;}
	/*#main-banner-carousel.values .col-left .inner:first-child {height: 40%;}
	#main-banner-carousel.values .col-left .inner:nth-of-type(2) {height: 55%;}*/
	#main-banner-carousel .container.reversed {flex-direction: unset;}
	#main-banner-carousel .container .col {flex-basis: 100%;}
	#main-banner-carousel .container .col-left {order: 1; align-items: start; height: 59%;}
	#main-banner-carousel .container.reversed .col-left {padding-left: 2.275rem; padding-right: .3rem;}
	#main-banner-carousel .container .col-right {order: 0; height: 41%;}
	#main-banner-carousel .values {flex-wrap: wrap;}
	#main-banner-carousel .value {flex-basis: 100%; justify-content: flex-start;}
	#main-banner-carousel h1, #main-banner-carousel .h1 {font-size: .75rem; line-height: 1;}
	#main-banner-carousel h2, #main-banner-carousel .h2 {font-size: .4rem;}
	/*#main-banner-carousel .icon {max-height: calc(100% - 1.4rem);}*/
	#main-banner-carousel .button {bottom: .5rem;}
	
	/*#main-banner-carousel .button-top {height: .9rem;}*/
	/*#main-banner-carousel .button-top .button {bottom: .275rem;}*/
	
	#main-banner-carousel .button-top.yellow {width: 100%; z-index: 16; background-color: #efd063;}
	#main-banner-carousel .button-top.yellow .button {float: none;}
	/*#main-banner-carousel .button-top.yellow .button {bottom: 15px;}*/
	
	#main-banner-carousel .col .antichurn-counter {line-height: inherit;}
	#main-banner-carousel .val .button {bottom: 1.15rem;}
	#main-banner-carousel .val .button-top .button {bottom: auto;}
	
	#main-banner-carousel > div.title-tabs > ul > li > a {padding: 10px; line-height: 1.25; font-size: .3rem;}
}
@media screen and (max-width: 480px) {
	#main-banner-carousel .inner {position: relative;}
	#main-banner-carousel .button-top .button {width: calc(100% - .55rem);}
	#main-banner-carousel > ul.slides, #main-banner-carousel > ul.slides > li, #main-banner-carousel div.slot::before {height: 12.35rem;}
}