html {scroll-behavior: smooth;}
* {box-sizing: border-box;}
body {padding:0; margin:0; font-family: "Open Sans", Helvetica, Arial, sans-serif;}
a {color:#000; text-decoration:none;}

h1, h2, h3, h4, h5, h6 {margin:0.5rem 0; line-height:1.2; color:#000}
h2 {font-size:2.87500rem; font-weight: normal; margin: 0 0 1rem 0; line-height:1.4; }
h3 {font-size:2.25rem;}
h4 {font-size:1.6rem;}
p {font-size:1.125rem; line-height:1.8;}

h1 {font-size:5rem}
h2 span, h3 span {color:#D52428}

.hidden {display:none;}
.hidden[data-show="true"] {display:block;}
.relative {position:relative;}
img {max-width:100%;}
.text-center {text-align:center;}
.text-left {text-align:left;}
.text-right {text-align:right;}
.center {float:none; margin:0 auto;}
.button {display:inline-block; background:#D52428; color:#fff; border:0; margin:1rem auto; padding:1rem 2rem 1rem 2rem; font-size: 0.9375em; font-family: inherit; font-weight: bold; cursor: pointer; outline: none !important; transition:transform 250ms ease-in-out; text-decoration:none; text-transform: uppercase; line-height:1.4; text-align: center}
.button:after {display: inline-block; width:21px; height:16px; float: right; margin-left: 1.5rem; background: url('../img/icon-arrow-white.svg') no-repeat; background-size: contain; content: ""; transform: translatey(4px); transition: transform 300ms ease-in-out;}
.button:hover {transform: translateY(-3px); }
.button.hollow {color: #d52428; border: 2px solid #D52428; background: transparent;}
.button.hollow:after {display: inline-block; width:21px; height:16px; float: right; margin-left: 1.5rem; background: url('../img/icon-arrow-red.svg') no-repeat; background-size: contain; content: ""; transform: translatey(2px); transition: transform 300ms ease-in-out;}

.clearfix {width:100%; display:block; height:1px; clear:both;}
.no-padding {padding-left:0; padding-right:0;}
.no-padding-top {padding-top: 0}
.no-padding-bottom {padding-bottom: 0}
.right {float: right;}
.left {float: left}
p.big {font-size: 1.6rem;}
p.small {font-size: 0.65rem !important; line-height: 1.2 !important;}
p.small.grey {color: #999}
.bold {font-weight: bold}
.red {color: #d52428;}

#logo {position: relative; z-index: 1; margin-bottom: 2rem;}

header {max-width: 80rem; max-height: 520px; position: relative; margin: 0 auto; padding-bottom: 4rem; background: url('../img/ALDO_Kubota_M4_BG.jpg') center center no-repeat; background-size: cover}
header .pre-title {margin-bottom: 1.5rem; font-size: 1.6rem; color: #fff; text-shadow: 2px 5px 16px rgba(0,0,0,0.5); position: relative; z-index: 1; text-transform: uppercase;}
header h1 {margin-bottom: 1.5rem; font-size:2.875rem; color: #fff; position: relative; z-index: 1;} 
header h1 span {margin-top: 1em; display: inline-block; font-size: 0.8em; font-weight: normal; line-height: 1.2;}
header:before {width: 50%; height: 100%; position: absolute; background: rgba(0,0,0,0.5); content: ""}

.formularz {display: block; padding: 0 3rem 2rem 3rem; background: #F3F3F3;}
.formularz .field.checkbox {margin-top: 0.5rem; line-height: 0.4;}
.formularz .field.checkbox label {display: inline; font-size: 0.625rem; color:#707070; line-height: 1.2;}
.formularz .data-admin {font-size: 0.625rem; color: #707070; line-height: 1.2}
.formularz .data-admin a {text-decoration: underline;}
.formularz .small {font-size: 0.625rem; color: #707070}
.formularz .small a {color: #D52428; text-decoration: underline;}
.formularz .medium {font-size: 1rem; margin-top: 0.5rem; line-height: 1.5;}
.formularz .big {margin-bottom: 0; line-height: 1.3;}
.formularz .red {color: #D52428;}
.formularz span {display: none; margin: 0 0 0.5rem 0;font-size: 0.8rem; font-weight: bold; color: #D52428}
.formularz .show {display: block}
.formularz .error {border: 1px solid #D52428 !important}
.formularz .field label {display: block; margin: 0.25rem 0; font-size: 0.8rem; color:#747474;}
.formularz .field input[type="text"], .formularz .field input[type="email"], .formularz .field input[type="tel"] {width: 100%; padding: 0.75rem 1.25rem; border: 0; border: 1px solid #ccc; font-size: 1rem; background: #fff;}
.formularz .field input[type="text"]:focus, .formularz .field input[type="email"]:focus, .formularz .field input[type="tel"]:focus {border: 1px solid #D52428 !important; outline: none !important;}
.formularz .button {float: left; background:#D52428; padding: 0 0 0 0; overflow: auto;}
.formularz .button[disabled="true"] {background: #999;}
.formularz .button[disabled="true"]:after {fill: #999}
.formularz .button:after {display: none; transform: translateY(19px);}
.formularz .button input[type="submit"] { margin:0; padding:1rem 2.5rem 1rem 2.5rem; background: transparent; color: inherit; border: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; cursor: inherit}

section {padding-top: 3rem; padding-bottom: 3rem}
main .pre-title {display: block; clear: both; position: relative; padding: 0.75rem 1rem 1rem 1rem; margin:0 -1rem .5rem -1rem; font-size: 2.25rem; background: #D52428; color: #fff; font-weight: bold; }
main .pre-title + .pre-title { margin-bottom: 3rem; }
main .pre-title img {margin-right: -1rem; margin: 0 0.5rem; float: right; max-width: 110px;}
main .pre-title + .pre-title img {margin-top: 1rem;}
main .pre-title span {display: block; padding: 0;}
main .pre-title + .pre-title span {font-size: 1.35rem; margin-bottom: .75rem}
main .pre-title p {margin: 0.25rem 0; font-size: 1.4rem;}
main .pre-title + .pre-title p {font-size: 2rem; line-height: 1.125;}
main .pre-title p.small {margin-top: 0.5rem; font-size: 0.75rem; font-weight: normal; color: #ffbcbd}
main h2 {display: block; margin: 4rem 0; padding-bottom: 4rem; position: relative;}
main h2:after {position: absolute; bottom: 0; width: 70px; height: 7px; background: #D52428; display: block; content: "";}

.models {padding-top: 0}
.models h3 {display: block; position: relative; margin: 2rem 0; padding-bottom: 2rem;}
.models h3:after {position: absolute; bottom: 0; width: 50px; height: 5px; left: 50%;  transform: translateX(-50%); background: #D52428; display: inline-block; content: "";}
.models img {max-width: 100%}
.models .col {margin-top: 1rem;}
.models .col:nth-child(4) {clear: both}
.models p {font-size: 0.85rem; line-height: 1.65;}

.row.grey {padding: 0; background: #F7F7F7; position: relative}
.row.grey img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.row.grey .icon {position: static; width: auto; height: auto; float: right; margin-right: -1rem; padding: 1.25rem 1.15rem 1.25rem 1.25rem; float: right; height: auto; background: #D52428;}
.row.grey p {font-size: 0.9rem}
.row.grey p.big {margin: 1rem 0; font-size: 2rem;}
.row.grey p.big-title {margin: 0; font-size: 2.5rem; color: #D52428; font-weight: bold; line-height: 1.2}
.row.grey .image-container {position: absolute; height: 100%;}
.row.grey .content-container {float: right}

.row.grey.deals {padding: 1rem; margin-top: 2rem; margin-bottom: 2rem}
.row.grey.deals + .deals {margin-bottom: 4rem;}
.row.grey.deals .image-container {top: 0}
.row.grey.deals h2 {font-weight: bold; font-size: 2.5rem}
.row.grey.deals h2 span {color: #D52428; display: block}
.row.grey.deals p.big {font-size: 1.5rem;}
.row.grey.deals img {max-width: 100%; width: 8.75rem; height: auto; object-fit: fill; top: 50%; left:  50%; transform: translate(-50%, -50%);}

footer {padding-top: 3rem}
footer h4 {position: relative; margin-bottom: 2rem; padding-bottom: 3rem;}
footer h4:after {position: absolute; bottom: 0; width: 50px; height: 5px; background: #D52428; display: block; content: "";}
footer img {max-width: 150px; margin: 1rem 0;}
footer p {font-size: 0.85rem;}
footer .footer-bottom {margin-top: 2rem; border-top: 1px solid #ddd}
footer .footer-bottom p {font-size: 0.75rem; color: #666}
footer ul {display: block; margin: 0.875rem 0; padding: 0; list-style-type: none; text-align: right}
footer ul li {display: inline-block; margin: 0 0.5rem; font-size: 0.75rem;}
footer ul li a {color: #666}
footer ul li a:hover {text-decoration: underline;}

.thank-you {margin-bottom: 1rem; overflow: auto;}
.thank-you .row:first-of-type {padding-bottom: 0}
.thank-you img {max-width: 250px;}
.thank-you #logo {margin-bottom: 0}
.thank-you #logo img {max-width: none;}

#cookie-bar {position:fixed; z-index:1; bottom:0; left:0; width:100%; background:#222; color:#fff; box-shadow:0px -4px 8px rgba(0,0,0,0.25);}
#cookie-bar p {display:block; max-width:1200px; margin:0 auto; padding:15px; font-size:1rem; overflow:auto;}
#cookie-bar p .btn {font-size:1rem; float:right; background:#fff; color:#000; border:0; padding:0.75rem 1rem;}
#cookie-bar p span {display:block; float:left; margin-top:0.75rem;}
#cookie-bar p span a {color:inherit; text-decoration:underline;}

.glider div p:first-of-type {margin-top: 2rem;}
.glider div p {padding-right: 2rem;}
.glider-contain .glider-next, .glider-contain .glider-prev {padding: 0.5rem 1rem 0.65rem 1rem; background: #D52428; color: #fff;}

.icon {padding-top: 1em; padding-bottom: 1em; text-align: center;}

/* Accordion */
.accordion .header {display: block; background: #f3f3f2; color: #000; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 16px; transition: 0.4s;
  font-family: 'open sans'; padding: 20px; }

.accordion .header.active {background: #D52428; color: #fff;}
.accordion h2 {display:inline-block; margin: 0; font-size: 1.25em;}
.accordion svg {display: inline-block; float: right; margin-top: 0.5em; transform: rotate(90deg);}
.accordion .hide {display: inline-block; float: right;}
.accordion .hide svg {display: none; transform: rotate(-90deg) !important;}

.accordion .header.active:hover {background: #D52428; color: #fff;}

.accordion .header.active h2 {color:#fff;}
.accordion .header.active svg {display: none;}
.accordion .header.active .hide svg {display: block;}
.accordion .header:hover {background: #ddd;}

.accordion .panel {padding: 0 1rem; display: none; border:1px solid #ddd;}

.formularz .read-more-button {display: inline; cursor: pointer; white-space: nowrap;}
.formularz .read-more-button:hover {text-decoration: underline;}
.formularz .read-more-button {color: #000;}
.formularz .read-more-container {display: none;}

[data-target][data-show="false"] {display: none;}
[data-name][data-show="true"] {display: inline !important;}


/* Grid styles for resolution up to 1175px (M) */
@media only screen and (max-width:73.5rem) {
	header h1 {font-size:3.25rem;}
	header .formularz .miarka {transform: none}
	header .big-buttons {margin-top: 3rem;}
	header .formularz {margin-left: 3.1rem}
}

/* Grid styles for resolution up to 1060px (M) */
@media only screen and (max-width:66.25rem) {
	header h1 {font-size:2.7rem;}
	header .big-buttons {margin-top: 4rem;}
	header .big-button {font-size: 1.45rem}
}

/* Grid styles for resolution up to 970px (M) */
@media only screen and (max-width:60.625rem) {
	header {padding-bottom: 0}
	header #logo {margin-bottom: 2rem}
	header .background {height: 70%;}
	header .formularz {position: static; margin-left: 0; border-radius: 0; background: #F7F7F7}
	header .formularz .col {padding: 0;}
	header .formularz .l6 {padding: 2rem 0;}
	header .formularz .l6:first-of-type {clear: both;}
	header .formularz .l6.text-right {text-align: center}
	header .formularz .field input[type="text"], header .formularz .field input[type="email"], header .formularz .field input[type="tel"] {background: #fff; padding: 0.65rem 1rem;}
	.row.grey .image-container, .row.grey .image-container img {position: static;}
	.row.grey.deals .image-container {text-align: center;}
	.row.grey.deals .image-container img {transform: none; margin: 0 auto 1rem;}
	.models .col:nth-child(4) {clear: none}
}

/* Grid styles for resolution up to 800px (S) */
@media only screen and (max-width:50rem) {

	header:before {width: 100%;}
	footer .footer-bottom {text-align: center}
	footer ul {text-align: center;}

	.glider-contain .glider-next, .glider-contain .glider-prev {top: 30%;}
	.glider div p:first-of-type {margin-top: 1rem;}
	.glider div p {padding-right: 0;}

}

/* Grid styles for resolution up to 640px (XS) */
@media only screen and (max-width:40rem) {
	header {background: url('../img/ALDO_Kubota_M4_BG_Mobile.jpg') center center no-repeat; background-size: cover}
	header h1 {font-size:2rem;}
	header .pre-title {font-size: 1.25rem;}
	footer img {margin-top: 1.5rem}
	main img, .row.grey .icon {width: 70px; height: 70px; padding: 1rem; margin-right: -0.75rem}
	main .pre-title {margin: 0 -0.75rem 0.1rem -0.75rem;}
	main .pre-title span {font-size: 1.4rem}
	main .pre-title + .pre-title span {font-size: .9rem}
	main .pre-title + .pre-title {margin-bottom: 0.1rem}
	main .pre-title p {font-size: 1rem;}
	main .pre-title + .pre-title p {font-size: 1.42rem}
	main .pre-title img {width: 70px; height: auto; margin: 0 0 0.75rem 0; padding: 0}
	main h2 {margin: 0 0 2rem 0; padding-bottom: 2rem;}
	h2 {font-size: 2rem}

	.glider h3 {margin-top: 0}
	.glider img {padding: 0 1em;}
	.glider-contain .glider-next, .glider-contain .glider-prev {top: 23%}

	.formularz {padding: 0 0.9375rem 2rem 0.9375rem}

	.models img {margin: 0 auto; display: block;}

	.row.grey p.big {font-size: 1.5rem;}
	.row.grey p.big-title {margin-top: 2rem; font-size: 2rem}

	.row.grey.deals h2 {font-size: 1.75rem; line-height: 1.125;}
	.row.grey.deals p.big {font-size: 1rem;}

	footer p {font-size: 0.8rem;}
	footer .footer-bottom p, footer .footer-bottom ul li {font-size: 0.7rem;}

	#finansowanie {background: #D52428; color: #fff; margin: 0;}
	#finansowanie h2, #finansowanie h2 span {color: #fff;}

	#finansowanie .button {color: #d52428; background: #fff;}
	#finansowanie .button:after {background: url('../img/icon-arrow-red.svg') no-repeat; background-size: contain;}

	#rozliczenie {margin: 0;}

	.row.grey.deals h2 span {display: inline;}
}

/* Grid styles for resolution up to 520px (XS) */
@media only screen and (max-width:32.5rem) {
	header h1 {font-size: 2rem}
}

/* Grid styles for resolution up to 480px (XXS) */
@media only screen and (max-width:30rem) {

}

/* Grid styles for resolution up to 360px (XXS) */
@media only screen and (max-width:22.5rem) {

}