html {
    scroll-behavior: smooth;
}
body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: "noto-sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.82857;
    font-weight: normal;
    color: var(--mainFontColor);
    background-color: var(--black);
    transition: font-size 0.5s;
}
main {
    /*font-size: 1.2em;*/
    line-height: 1.3em;
}
img {
    border: none;
}
.small {
    font-size: 80%;
    line-height: 140%;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "klavika-web-condensed", Helvetica, Arial, sans-serif;
}
h1 {
    text-transform: uppercase;
    font-size: 4.5rem;
}
h2 {
}
h3 {
    font-weight: 300;
}
p {
    /*text-align: justify;*/
}
a {
    color: var(--secandFontColor);
    text-decoration: underline var(--secandFontColor);
    transition: all var(--transition05);
}
a:hover, a:focus {
    color: var(--white);
    text-decoration: underline var(--secandFontColor);
}
a.sectionButton {
    display: table;
    margin-top: 2rem;
    padding: 0.5rem 1.1rem;
    text-transform: uppercase;
    color: var(--white);
    border-radius: 1px;
    border: 2px solid var(--white);
    background-color: transparent;
    text-decoration: none !important;
    transition: all var(--transition05);
}
a.sectionButton:hover {
    color: var(--black);
    background-color: var(--white);
    border: 2px solid var(--white);
}
strong { }


/* -------------------------------------------------------- */
/* ---------------------------- NAGLOWEK */
header {
    /*margin-bottom: 2.6rem;*/
}
.headerHeight {  }
.headerBackground {
    background-image: url("../images/amd-epyc-naglowek-tlo.jpg");
    background-repeat: no-repeat;
    transition: all 0.5s;
}
header h1 {
    margin-bottom: 2rem;
}
header h3 {
    margin-bottom: 4rem;
    max-width: 70%;
}
header img.headerLogo {  }
/* ---------------------------- NAGLOWEK (koniec) */


/* ---------------------------- SEKCJA Info (img-tlo + txt) */
section.sectionInfo {  }
.sectionInfoBackground {
    background-repeat: no-repeat;
    transition: background-position 0.5s;
}
.sectionInfoBackground1 {
    background-image: url("../images/amd-epyc-info-tlo1.jpg");
}
.sectionInfoBackground2 {
    background-image: url("../images/amd-epyc-info-tlo2.jpg");
}
.sectionInfoHeight1 { }
.sectionInfoHeight1 div.col-12,
.sectionInfoHeight2 div.col-12 {
    margin-bottom: 4rem;
}
.sectionInfoHeight2 { }
.sectionInfo .container {
    /*padding-bottom: 2.8rem;*/
}
.sectionInfo h2 {  }
.sectionInfo p {
    margin-bottom: 0;
}


/* ---------------------------- SEKCJA Film  */
section.sectionMovie {  }
.sectionMovie img {  }
.sectionMovie h2 {  }
.sectionMovie p {  }


/* ---------------------------- SEKCJA z kolumna po lewej  */
section.sectionInfoLeft {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
.sectionInfoLeft div.row { }
section.leftCol01 { }
section.leftCol02 { }
section.leftCol01Height {
    min-height: 580px;
}
section.leftCol02Height {
    min-height: 400px;
}
section.leftColBackground {
    background-repeat: no-repeat;
    transition: background-position 0.5s;
}
section.leftCol01Background {
    background-image: url("../images/amd-epyc-leftCol01-tlo.jpg");
}
section.leftCol02Background {
    background-image: url("../images/amd-epyc-leftCol02-tlo.jpg");
}


footer {
    margin: 0 0 3rem 0;
    padding: 0;
}
footer div.container {
    padding: 1rem;
}


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

@media only screen and (min-width: 1400px) {
    .headerHeight {
        min-height: 600px;
    }
    .headerBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto auto; /* first width, second height. */
    }
    .sectionInfoHeight1 {
        min-height: 540px;
    }
    .sectionInfoHeight2 {
        min-height: 540px;
    }
    .sectionInfoBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto auto; /* first width, second height. */
    }
    section.leftColBackground {
        background-position: 50% 50%; /* first horizontal, second vertical */
        background-size: auto auto; /* first width, second height. */
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .headerHeight {
        min-height: 450px;
    }
    .headerBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto auto; /* first width, second height. */
    }
    header h1 {
        font-size: 3.0rem !important;
    }
    header h3 {
        margin-bottom: 2rem;
        max-width: inherit;
    }
    .sectionInfoHeight1 {
        min-height: 540px;
    }
    .sectionInfoHeight2 {
        min-height: 540px;
    }
    .sectionInfoBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto auto; /* first width, second height. */
    }
    section.leftColBackground {
        background-position: 50% 50%; /* first horizontal, second vertical */
        background-size: auto auto; /* first width, second height. */
    }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .headerHeight {
        min-height: 350px;
    }
    .headerBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto 100%; /* first width, second height. */
    }
    header h1 {
        font-size: 3.0rem !important;
    }
    header h3 {
        margin-bottom: 2rem;
        max-width: inherit;
    }
    .sectionInfoHeight1 {
        min-height: 500px;
    }
    .sectionInfoHeight2 {
        min-height: 500px;
    }
    .sectionInfoBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto 90%; /* first width, second height. */
    }
    section.leftColBackground {
        background-position: 65% 50%; /* first horizontal, second vertical */
        background-size: auto auto; /* first width, second height. */
    }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .headerHeight {
        min-height: 350px;
    }
    .headerBackground {
        background-position: 40% 0%; /* first horizontal, second vertical */
        background-size: auto 100%; /* first width, second height. */
    }
    header h1 {
        font-size: 2.5rem !important;
    }
    header h3 {
        margin-bottom: 2rem;
        max-width: inherit;
    }
    .sectionInfoHeight1 {
        min-height: 420px;
    }
    .sectionInfoHeight1 div.col-12 {
        /*padding-bottom: 30px;*/
    }
    .sectionInfoHeight2 {
        min-height: 420px;
    }
    .sectionInfoHeight2 div.col-12 {
        /*padding-bottom: 30px;*/
    }
    .sectionInfoBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto 80%; /* first width, second height. */
    }
    section.leftColBackground div.col-12 {
        background-color: rgba(0,0,0,0.5);
    }
    section.leftColBackground {
        background-position: 65% 50%; /* first horizontal, second vertical */
        background-size: auto 100%; /* first width, second height. */
    }
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
    .headerHeight {
        min-height: 350px;
    }
    .headerBackground {
        background-position: 40% 0%; /* first horizontal, second vertical */
        background-size: auto 100%; /* first width, second height. */
    }
    header h1 {
        font-size: 2.5rem !important;
    }
    header h3 {
        margin-bottom: 2rem;
        max-width: inherit;
    }
    .sectionInfoHeight1 {
        min-height: 380px;
    }
    .sectionInfoHeight2 {
        min-height: 380px;
    }
    .sectionInfoBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto 80%; /* first width, second height. */
    }
    section.sectionInfoLeft {
         justify-content: flex-start;
         align-items: end;
         align-content: end;
     }
    section.leftColBackground {
        background-position: 70% 0%; /* first horizontal, second vertical */
        background-size: auto 60%; /* first width, second height. */
    }
}
@media only screen and (max-width: 576px) {
    .headerHeight {
        min-height: 300px;
    }
    .headerBackground {
        background-position: 40% 0%; /* first horizontal, second vertical */
        background-size: auto 100%; /* first width, second height. */
    }
    header h1 {
        font-size: 1.5rem !important;
    }
    header h3 {
        margin-bottom: 2rem;
        max-width: inherit;
    }
    .sectionInfoHeight1 {
        min-height: 360px;
    }
    .sectionInfoHeight2 {
        min-height: 360px;
    }
    .sectionInfoBackground {
        background-position: 50% 0%; /* first horizontal, second vertical */
        background-size: auto 80%; /* first width, second height. */
    }
    section.sectionInfoLeft {
        justify-content: flex-start;
        align-items: end;
        align-content: end;
    }
    section.leftColBackground {
        background-position: 70% 0%; /* first horizontal, second vertical */
        background-size: auto 60%; /* first width, second height. */
    }
}

/* */