/* -- infobox-grid :: v.: 0.01 r.: 19/05/25 @ pp */
/*
 * v. 0.01 @ pp (11/04/25): utworzenie pliku + poprawki (SKCZDEV-780)
 */
.infobox-grid {width: 100%;}
.infobox-grid .container {padding: 0;}
#page-content section.infobox-grid {margin-bottom: 0; /* font-family: 'Open Sans Light'; */}
section.infobox-grid[data-stats=true] .slot {transition: opacity .5s; opacity: 0;}
section.infobox-grid[data-stats=true] .slot.inited {opacity: 1;}
.infobox-grid div.item > a {position: absolute; top: 0; z-index: 1; width: 100%; height: 100%;}
.firefox .infobox-grid div.item > a {left: 0;}
.infobox-grid div.item > a:hover {text-decoration: none;}
.infobox-grid div.item .legal-note p a {bottom: 0;}
.infobox-grid {width: 100%; color: var(--def-links);}
.infobox-grid .container {box-sizing: border-box; padding: .225rem .225rem 1rem .225rem;}
.infobox-grid ul {list-style: none !important; font-size: .4rem; padding-left: .4rem;}/* importance added only to override inline styles */
.infobox-grid ul li {margin-bottom: .5em; line-height: 1.2; margin: .21em 0; padding-bottom: 2px;}
.infobox-grid ol {list-style: none;}
.infobox-grid ol.num {list-style: decimal;}
.infobox-grid p {font-size: .4rem; line-height: 1.375;}
.infobox-grid li {position: relative;}
.infobox-grid li::before {position: absolute; left: -.4rem; top: 0.2rem; width: 0.125rem; height: 0.125rem !important; background-color: var(--ind-bg-color); content: '';}
.infobox-grid ul ul {font-size: 100%;}
div.infobox-grid ul li::before {top: .31em; height: .5em;}
body.biz .infobox-grid li::before {background-color: var(--biz-bg-color);}
.infobox-grid .item {position: relative; display: table-cell; margin: .2rem .3rem; float: left; height: 7.15rem; background: transparent; box-sizing: border-box; border-radius: 3px; border: 1px solid #d0d0d0; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .22); transition: .4s;}
.infobox-grid .item:hover {background: transparent; box-shadow: inset 0 -8.75rem 0 0 var(--light-gray-color); transition: .4s;}
.infobox-grid .item.col-1 {width: 9rem;}
.infobox-grid .item.col-2 {width: 18.6rem;}
.infobox-grid .item.col-3 {display: table; width: 28.2rem;}
.infobox-grid .item.col-3.img {display: inline-block;}
.infobox-grid .img-box, .infobox-grid .text-box {display: inline-block; float: none; vertical-align: top;}
.infobox-grid .img-box {display: none !important;}
.infobox-grid .text-box {display: block; padding: .625rem .6rem; max-height: calc(100% - 1.55rem); overflow: hidden; box-sizing: border-box;}
.infobox-grid .text-box .headline {height: 1.25rem;}
.infobox-grid .text-box .text {margin-bottom: 0.25em;}
.infobox-grid .item.col-3 .text-box, .infobox-grid .item.col-2 .text-box {padding: .6rem;}
.infobox-grid .item.col-3 div.text-box.no-img {width: 100%;}
.infobox-grid .headline, .infobox-grid .headline h3, .infobox-grid .headline p, .infobox-grid .headline h2, .infobox-grid .headline strong {text-align: left; font-family: "Montserrat Lite Bold", Arial, sans-serif;}
.infobox-grid .headline {display: flex;min-height: 1.25rem;justify-content: space-between;align-items: center;margin-top: 0;margin-bottom: 18px;}
.infobox-grid .promoted-4 .headline {padding-right: 0;}
.infobox-grid .headline > h3, .infobox-grid .headline > p, .infobox-grid .headline h2 {font-size: .4em; /* font-family: 'Open Sans Semi'; */ font-weight: normal; color: var(--main-text-color);}
.infobox-grid .headline > p {flex-shrink: 1; flex-grow: 0;}
.infobox-grid.lifting .headline p {/* font-family: 'Open Sans Semi'; */ font-size: .45rem; font-weight: normal; line-height: 1.2;}
.infobox-grid .headline img {max-width: 1.4rem; max-height: 1.4rem; /*flex-basis: 1.4rem; flex-grow: 1;*/ flex-shrink: 0; /*align-self: flex-start;*/ margin-left: .5rem;}
.infobox-grid .more {position: absolute; bottom: .8rem; right: .475rem; z-index: 2;/* text-transform: lowercase;*/ font-family: "Montserrat Lite Semi", Arial, sans-serif; font-size: .4rem;}
.infobox-grid .more::after {position: absolute; left: -100%; bottom: 0; width: 200%; height: 1px; background-image: linear-gradient(to left, var(--ind-bg-color) 0%, var(--ind-bg-color) 50%, transparent 50%, transparent 50%, transparent 100%); visibility: hidden; content: '';}
.infobox-grid .more::after {}
.infobox-grid .more::after {
	/* from left side, its mean first color(will be last) is color of needing class, then width, and then color of transparent, cause left half will be , but invisible */
	transition: all 0.3s ease-in-out 0s;
	transform: scaleX(0);
}
body.ind .infobox-grid .more::after {background-image: linear-gradient(to left, var(--ind-bg-color) 0%, var(--ind-bg-color) 50%, transparent 50%, transparent 50%, transparent 100%);}
body.biz .infobox-grid .more::after {background-image: linear-gradient(to left, var(--biz-bg-color) 0%, var(--biz-bg-color) 50%, transparent 50%, transparent 50%, transparent 100%);}

.infobox-grid .more:hover::after {visibility: visible; transform: scaleX(1);}
.infobox-grid a.more.button.red {bottom: .57rem;}
.infobox-grid a.more.button.red::before, .infobox-grid a.more.button.red::after {display: none;}

/* infobox-grid promo */
.infobox-grid .promo {width: 0; height: 0; border-right: 1.775rem solid red; border-bottom: 1.775rem solid transparent; position: absolute; right: -1px; top: -1px;}
.infobox-grid .promo::after {content: '%'; font-weight: bold; color: var(--white-color); position: absolute; left: .9rem; top: .075rem; font-size: .9rem;}

.infobox-grid .promo {position: absolute; right: -1px; top: -1px;}
.infobox-grid .promo {overflow: hidden; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 3px;}
.infobox-grid .img .promo {display: none;}
.infobox-grid .promoted-3 .promo::after {top: .25rem;}
.infobox-grid .promo::after {content: '%'; font-weight: bold; color: var(--white-color); position: absolute; left: 1.55rem; top: .075rem; font-size: .9rem;}
.infobox-grid .promoted .headline {padding-right: .75rem;}
.infobox-grid .promoted.img .headline {padding-right: 0;}
.infobox-grid .promoted:not(.promoted-2):not(.promoted-3) .promo::before {content: ''; background-color: #f00; width: 2.5rem; height: 2.5rem; display: block; position: absolute; border-radius: 0; transform: rotate(45deg) translate(0, -70px);}

.infobox-grid .promoted-2 {border-color: #f9dc6b; box-shadow: inset 0 0 0 0 #ffc;}
.infobox-grid .promoted-2 .promo {overflow: hidden; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 3px;}
.infobox-grid .promoted-2 .promo span {position: absolute; z-index: 1; font-weight: bold; font-family: "Montserrat Lite Semi", Arial, sans-serif;}
.infobox-grid .promoted-2 .promo span.units {top: .3rem; right: .125rem; font-size: .425rem;}
.infobox-grid .promoted-2 .promo span:first-child {top: .2rem; right: .5rem; font-size: .55rem;} 
.infobox-grid .promoted-2 .promo::after {content: ''; border-radius: 50%; border: 0; width: 2.5rem; height: 2.5rem; top: -1.25rem; right: -1.25rem; z-index: 0; background-color: #f9dc6b; color: var(--def-links); left: auto;}
.infobox-grid .promoted-2.item:hover {box-shadow: inset 0 -8.75rem 0 0 #ffc;}

.infobox-grid .promoted-3.item {background-color: #efd063; border: 1px solid #efd063;}
.infobox-grid .promoted-3.item::before {content: ''; border: 2px dashed var(--white-color); right: .125rem; left: .125rem; bottom: .125rem; top: .125rem; position: absolute;}
.infobox-grid .promoted-3 .promo {border-right-color: transparent; top: .3rem; right: .6rem;}
.infobox-grid .promoted-3 .promo::after {background-color: transparent; font-size: 1.2rem;}
.infobox-grid .promoted-3.item:hover {box-shadow: inset 0 -8.75rem 0 0 #f9dc6b;}
.infobox-grid .promoted-4.item {border: 4px solid #efd063;}
.infobox-grid .promoted-4 .headline {padding-right: 0;}
.infobox-grid .promoted-4 a.more, .infobox-grid .promoted-5 a.more {bottom: .4rem;}
.infobox-grid.lifting .promoted-4 .text-box, .infobox-grid.lifting .promoted-5 .text-box {padding: .545rem .6rem;}
.infobox-grid.lifting .promoted-4 .legal-label, .infobox-grid.lifting .promoted-5 .legal-label {top: -34px;}
.firefox .infobox-grid .item.col-3.promoted-5 {display: table-cell;}

.infobox-grid .promoted-bar .item {margin-bottom: 37px;}
.infobox-grid .promoted-bar .item:hover .color-bar-solo {box-shadow: none; transition: .4s;}

.infobox-grid.sub-grid .item {height: 2.65rem;}
.infobox-grid.sub-grid .headline {min-height: 0;}
.infobox-grid.sub-grid .text-box, .infobox-grid.sub-grid .item.col-3 .text-box, .infobox-grid.sub-grid .item.col-2 .text-box {padding: .375rem .6rem;}
.infobox-grid.sub-grid .text-box {max-height: 100%;}
.infobox-grid.sub-grid .more {bottom: .525rem;}
.infobox-grid.sub-grid .legal-label {top: -.975rem;}
.infobox-grid.sub-grid .headline > h3, .infobox-grid.sub-grid .headline > p, .infobox-grid.sub-grid .headline h2 {margin-top: 0;}

@media only screen and (max-width: 1217px) {
	.infobox-grid {width: 100% !important;}
	.infobox-grid .overflow-hidden {width: auto !important;}
	.infobox-grid .item.col-1 .text-box {width: auto !important;}
}
@media screen and (max-width: 1200px) {
	.infobox-grid {margin: 0 auto;}
	.infobox-grid .item.col-3 {width: 98%; width: calc(100% - .6rem);}
	.infobox-grid .item.col-3 .text-box {width: auto;}
}
@media screen and (max-width: 1170px) {
	.infobox-grid .container {border-left: 0;}
}
@media screen and (max-width: 1152px) {
	.infobox-grid .container {width: auto;}
	.infobox-grid .item.col-2 {width: 98%; width: calc(100% - .55rem);}
	.infobox-grid .item.col-1 {width: 48.9%; width: calc(50% - .6rem);}
}
@media only screen and (max-width: 1024px) {
	.infobox-grid .legal-text {left: inherit; right: .125rem;}
	.firefox .infobox-grid .item.col-3 .img-box, .firefox .infobox-grid .item.col-2 .img-box {display: inline-block;}
	.firefox .infobox-grid .item.col-3 .img-box {margin: 5% 0;}
	.firefox .infobox-grid .item.col-2 .img-box {margin: 3.5% 0;}
}
@media screen and (max-width: 800px) {
	.infobox-grid .button {margin-left: 20px;}
}
@media screen and (max-width: 768px) {
	.infobox-grid .item {min-height: 0; height: auto;}
	.infobox-grid .item .text {padding-bottom: 1.4rem;}
	.safari .infobox-grid .item > a::after {display: none;}
	.infobox-grid .item.col-1 {width: 98%; width: calc(100% - .55rem);}
	.infobox-grid .text-box {position: relative;}
	.infobox-grid .headline {min-height: 0;}
	.infobox-grid .more {bottom: 27px;}
	.infobox-grid .promoted-4 a.more, .infobox-grid .promoted-5 a.more {bottom: 22px;}
	.infobox-grid a.more.button.red {bottom: 0.4rem;}
	.infobox-grid .promoted-4 a.more.button.red, .infobox-grid .promoted-5 a.more.button.red {bottom: 14px;}
	.infobox-grid .legal-text {width: 400px;}
	.infobox-grid.lifting .legal-note {position: relative; top: auto;}
	.infobox-grid.lifting .legal-label {bottom: 25px; top: auto;}
	.infobox-grid.lifting .promoted-4 .legal-label, .infobox-grid.lifting .promoted-5 .legal-label {top: auto; bottom: 20px;}
	.infobox-grid .promoted-bar .item.promoted-5, .infobox-grid .promoted-bar .item.promoted-6 {margin-bottom: 7px;}
	.infobox-grid .promoted-bar .item {margin-bottom: 9px;}
	.infobox-grid .promoted-bar .item.long-promoted-bar {margin-bottom: 67px;}
}
@media screen and (max-width: 640px) {
	.infobox-grid .item.col-3 {display: table-cell;}
	.infobox-grid .item.col-3 .img-box, .infobox-grid .item.col-2 .img-box {display: none !important;}
	.infobox-grid .item.col-2 {padding-right: 0;}
}
@media screen and (max-width: 479px) {
	.infobox-grid .promo {right: 0 !important;}
	.infobox-grid .promoted-3 .promo::after {left: 1.075rem;}
	.infobox-grid .text-box {padding: .4rem .6rem;}
}
@media screen and (max-width: 420px) {
	.infobox-grid .button {margin-left: 10px;}
}