body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: 'Metropolis', Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.82857;
    font-weight: normal;
    color: var(--black);
    background-color: #ffffff;
    transition: font-size 0.5s;
}

main {
    font-size: 1.2em;
    line-height: 1.3em;
}

img {
    border: none;
}
.small {
    font-size: 80%;
    line-height: 140%;
}
h2 {
    margin-bottom: 1em;
}
h3 {
    margin-bottom: 0.8em;
}
h2, h3 {
    font-weight: bold;
}
h4 { }

p {
    font-size: 0.95em;
}
a {
    text-decoration: none !important;
}
a:hover, a:focus {
    text-decoration: none !important;
}
strong { }
.textJustify {
    text-align: justify;
}
.fontRed,
p.fontRed,
span.fontRed {
    color: var(--SantanderColor);
}

div.boxZalety,
div.boxMaksMin,
div.boxRaty,
div.stepBox {
    border-radius: var(--radius10);
}




/* ---------------------------- NAGLOWEK */
div.header {
    position: relative;
    margin: 0 auto;
    padding: 0;
    background-color: var(--white);
    border-radius: var(--radius10);
}
/* ---------------------------- NAGLOWEK (koniec) */


div.boxBorder {
    border: 2px solid var(--boxBorderColor1);
    background-color: #ffffff;
}

/* ---------------------------- sekcja Zalety */
#zaletySection {
    padding: 1.25em 0;
    background-color: var(--sectionColorBack2);
}
div.boxZalety {
    margin: 1.25em 0;
    padding: 1.1em;
}
div.boxZalety img {
    margin-bottom: 0.5em;
}
div.boxZalety p {
     margin: 0;
}
/* ---------------------------- sekcja Zalety (koniec) */

/* -------------------------------------------------------- */
/* ---------------------------- sekcja MaksimumMinimum */
#maksMinSection { }
div.boxMaksMin {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: space-around;
    margin: 1.2em 0;
    padding: 2em 1.8em;
}
div.boxMaksMin h3,
div.boxMaksMin img {
    margin-bottom: 1.2em;
}
div.boxMaksMin ul li {
    list-style: none;
}
div.boxMaksMin ul.list1 li {
    list-style-image: url("../images/kredyt-santander-list-znacznik-01.png");
}
div.boxMaksMin ul.list2 li {
    list-style-image: url("../images/kredyt-santander-list-znacznik-02.png");
}
/* ---------------------------- sekcja MaksimumMinimum (koniec) */


/* -------------------------------------------------------- */
/* ---------------------------- sekcja Raty */
#ratySection {
    background-color: var(--sectionColorBack2);
}
div.boxRaty {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: space-around;
    margin: 1.2em 0;
    padding: 2em 1.8em;
}
div.boxRaty h3 {
    text-align: center;
}
div.boxRaty p {
    margin-bottom: 1.2em;
    text-align: center;
}
div.boxRaty button {
    padding: 8px 20px;
    font-size: 1.25em;
    font-weight: bold;
    border-radius: var(--radius10);
    background-color: var(--SantanderColorBack);
    border: none;
    border-color: transparent;
    transition: color var(--transition05), background-color var(--transition05);
}
div.boxRaty button:hover {
    border: none;
    background-color: var(--black) !important;
}

/* --------------------------- sekcja Zakupy (modal) */
div.modal-dialog {
    margin-top: 1140px;
    min-width: 570px;
}
div.modal-body {
    padding: 2em 2em 1.2em 2em;
}
div.modal-body p {
    font-size: 0.85em;
}
div.modal-body a {
    color: var(--SantanderColor);
    transition: color var(--transition05);
}
div.modal-body a:hover {
    color: var(--black);
}
button.btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    /*padding: 1.25rem 1rem;*/
    border-color: var(--white);
    box-shadow: 0 0 0 0.25rem rgba(250,250,250,0.0);
}
button.btn-close:focus {
    border-color: var(--white);
    box-shadow: 0 0 0 0.25rem rgba(250, 250, 250, 0.0);
}
/* ---------------------------- sekcja Zakupy (modal) (koniec) */
#ratySection .small {
    text-align: center;
}
/* ---------------------------- sekcja Raty (koniec) */

/* -------------------------------------------------------- */
/* ---------------------------- sekcja KROKI */
#krokiSection { }
div.stepBox {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    align-content: space-around;
    margin: 1.2em 0;
    /*padding: 2em 1.8em;*/
    padding: 2.5em 1.8em 2em 1.8em;
}
div.stepNumber {
    position: absolute;
    left: 0;
    right: 0;
    top: -1.28em;
}
div.stepNumber p {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 1.8em;
    height: 1.8em;
    font-size: 1.4em;
    color: var(--white);
    border-radius: 50%;
    background-color: var(--SantanderColorBack);
}
div.stepBox img {
    margin-bottom: 1.2em;
}
div.stepBox h3,
div.stepBox p {
    text-align: center;
}
div.stepBox div.borderRight {
    border-right: solid 2px var(--boxBorderColor2);
}
#krokiSection img.santanderLogo {
    display: block;
    margin: 0 auto;
}
/* ---------------------------- sekcja KROKI (koniec) */


footer {
    margin: 0;
    padding: 0;
    color: var(--white);
    background-color: var(--SantanderColor);
}
footer div.container {
    padding: 1em;
}
footer div.container p {
    margin: 1.2em auto;
    width: 80%;
}
footer div.container a {
    color: var(--white);
    text-decoration: underline !important;
}
footer div.container a:hover { }



/* ------------------------------------------------------- */
/* ----------------------------------------- RESPONSYWNOSC */

@media only screen and (min-width: 1400px) {
    div.boxMaksMin {
        min-height: 440px;
    }
    div.stepBox1-2 {
        min-height: 585px;
    }
    div.stepBox3-4 {
        min-height: 790px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    div.boxRaty {
        min-height: 350px;
    }
    div.boxMaksMin {
        min-height: 440px;
    }
    div.modal-dialog {
        margin-top: 1240px;
        min-width: inherit;
    }
    div.stepBox1-2 {
        min-height: 635px;
    }
    div.stepBox3-4 {
        min-height: 865px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    div.boxRaty {
        min-height: 370px;
    }
    div.modal-dialog {
        margin-top: 1170px;
        min-width: inherit;
    }
    div.stepBox1-2 {
        min-height: 715px;
    }
    div.stepBox3-4 {
        min-height: 940px;
    }
    div.borderRight {
        border-right: solid 2px transparent !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
    div.modal-dialog {
        margin-top: 1810px;
        min-width: inherit;
    }
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
    div.modal-dialog {
        margin-top: 1950px;
        min-width: inherit;
    }
    div.borderRight {
        border-right: solid 2px transparent !important;
    }
}
@media only screen and (max-width: 576px) {
    div.modal-dialog {
        margin-top: 2220px;
        min-width: inherit;
    }
    div.borderRight {
        border-right: solid 2px transparent !important;
    }
}

/* */