/* ---------------------------- VARIABLES */

:root {
    --white: #ffffff; /* glowny font */
    --black: #000000; /* glowny font */
    --colorMain: #00a6c1;
    --transition03: 0.3s;
    --transition05: 0.5s;
    --transition08: 0.8s;
    /* var(--zzz) */
}

@font-face {
    font-family: 'NoirPro';
    src: url('../fonts/NoirPro-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
}
@font-face {
    font-family: 'NoirPro';
    src: url('../fonts/NoirPro-Regular.otf') format('opentype');
    font-weight: normal; /* 400 */
    font-style: normal;
    font-size: 16px;
}
@font-face {
    font-family: 'NoirPro';
    src: url('../fonts/NoirPro-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
}
@font-face {
    font-family: 'NoirPro';
    src: url('../fonts/NoirPro-SemiBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
}

/* -------------------------------------- */


body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: 'NoirPro', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.82857;
    color: var(--white);
    background-color: var(--black);
    transition: font-size 0.5s;
}
main {
    font-weight: 300;
    line-height: 1.5em;
}
.container {
    position: relative;
    max-width: 1280px;
}

img {
    border: none;
}
.small {
    font-size: 80%;
    line-height: 140%;
}
h1, h2, h3, h4, h5, h6 { }
h1 {
    font-weight: bold;
    color: var(--colorMain);
}
h1 span {
    font-weight: normal;
    color: var(--white);
}
h2 {
    font-size: 2.2rem;
    font-weight: normal;
}
h3 {
    font-weight: normal;
    text-transform: uppercase
}
p {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.textJustify,
p.textJustify,
span.textJustify {
    text-align: justify;
}
.textColor{
    color: var(--colorMain);
}

a {
    color: var(--black);
    text-decoration: none !important;
    transition: color var(--transition03);
}
a:hover, a:focus {
    color: var(--white);
    text-decoration: none !important;
}
strong {
    font-weight: bold;
}
hr.lineColor {
    margin: 2rem auto;
    width: 60%;
    border: 1px solid var(--colorMain);
    opacity: 1;
}


/* -------------------------------------------------------- */
/* ---------------------------- NAGLOWEK */
header {
    margin: 0 auto;
    padding: 0;
}
header div.headerImgBackground {
    background-image: url("../images/wow-naglowek-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: 100% auto; /* szerokosc, wysokosc */
    transition: background-position var(--transition05);
}
div.headerRowHeight {
    height: 1100px;
}

/* ---------------------------- NAGLOWEK (koniec) */


/* ---------------------------- sekcja1 */
#section01 { }
section.section01Background,
.section01Background {
    background-image: url("../images/wow-sec01-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 100% auto; /* szerokosc, wysokosc */
    transition: background-position var(--transition05);
}
div.section01RowHeight {
    height: 1000px;
}
/* ---------------------------- sekcja1 (koniec) */


/* ---------------------------- sekcja2 */
#section02 { }
div.section02aRowHeight {
    height: 580px;
}
div.section02bRowHeight {
    height: 580px;
}
div.section02ContainerImgBackground,
div.section02aRowImgBackground {
    background-image: url("../images/wow-sec02a-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: auto 100%; /* szerokosc, wysokosc */
    transition: background-position var(--transition05);
}
div.section02bRowImgBackground {
    background-image: url("../images/wow-sec02b-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 100% 0%;
    background-size: auto 100%; /* szerokosc, wysokosc */
    transition: background-position var(--transition05);
}

/* ---------------------------- sekcja2 (koniec) */


/* ---------------------------- sekcja3 */
#section03 { }
.section03Background {
    background-image: url("../images/wow-sec03-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 100% auto; /* szerokosc, wysokosc */
    transition: background-position var(--transition05);
}
div.section03RowHeight {
    height: 1000px;
}

/* ---------------------------- sekcja3 (koniec) */


/* ---------------------------- sekcja4 */
#section04 { }
div.section04RowImgBackground {
    background-image: url("../images/wow-sec04b-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 100% 0%;
    background-size: 100% auto; /* szerokosc, wysokosc */
    transition: background-position var(--transition05);
}
div.section04RowHeight {
    height: 550px;
}
img.wowMovie {
    display: block;
    margin: 0 auto;
}

div.flexContener {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
}

div.boxInfo {
    margin: 0 0 1em 0;
    padding: 0;
}
div.boxInfo img {
    position: relative;
    margin-bottom: 1.0em;
}
div.boxInfo p {
    font-size: 1.1rem;
    text-transform: lowercase;
}
div.boxInfo p:first-letter {
    text-transform: uppercase;
}
/* ---------------------------- sekcja4 (koniec) */


footer {
    margin: 0;
    padding: 0;
}
footer div.container { }


/* ------------------------------------------------------- */
/* ----------------------------------------- RESPONSYWNOSC */
@media only screen and (min-width: 1400px) {
    div.boxInfo {
        width: 20%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    div.boxInfo {
        width: 18%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    p {
        font-size: 1.15rem;
        line-height: 1.6rem;
    }
    header div.headerImgBackground {
        background-position: 50% 0%;
        background-size: 100% auto; /* szerokosc, wysokosc */
    }
    div.headerRowHeight {
        height: 880px;
    }
    div.headerRowHeight > div {
        margin-bottom: 2rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        background-color: rgba(0,0,0,0.4);
    }
    div.section02aRowImgBackground > div,
    div.section02bRowImgBackground > div {
        padding: 2rem 2rem 2rem 2rem;
        background-color: rgba(0,0,0,0.4);
    }
    .section03Background {
        background-position: 50% 50%;
        background-size: auto 75%; /* szerokosc, wysokosc */
    }
    div.section03RowHeight {
        height: 1000px;
    }
    div.section04RowImgBackground {
        background-position: 50% 50%;
        background-size: auto 100%; /* szerokosc, wysokosc */
    }
    div.boxInfo {
        width: 23%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    p {
        font-size: 1.15rem;
        line-height: 1.6rem;
    }
    header div.headerImgBackground {
        background-position: 50% 0%;
        background-size: 145% auto; /* szerokosc, wysokosc */
    }
    div.headerRowHeight {
        height: 800px;
    }
    div.headerRowHeight > div {
        margin-bottom: 2rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        background-color: rgba(0,0,0,0.4);
    }
    div.section02aRowImgBackground > div,
    div.section02bRowImgBackground > div {
        padding: 2rem 2rem 2rem 2rem;
        background-color: rgba(0,0,0,0.4);
    }
    div.section02bRowImgBackground {
        background-position: 50% 50%;
        background-size: auto 80%; /* szerokosc, wysokosc */
    }
    .section03Background {
        background-position: 50% 50%;
        background-size: auto 75%; /* szerokosc, wysokosc */
    }
    div.section03RowHeight {
        height: 900px;
    }
    div.section04RowImgBackground {
        background-position: 50% 50%;
        background-size: auto 100%; /* szerokosc, wysokosc */
    }
    div.boxInfo {
        width: 31%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 768px) {
    p {
        font-size: 1.1rem;
        line-height: 1.5rem;
    }
    header div.headerImgBackground {
        background-position: 50% 0%;
        background-size: 150% auto; /* szerokosc, wysokosc */
    }
    div.headerRowHeight {
        height: 700px;
    }
    div.headerRowHeight > div {
        margin-bottom: 2rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        background-color: rgba(0,0,0,0.4);
    }
    section.section01Background,
    .section01Background {
        background-position: 50% 50%;
        background-size: auto 75%; /* szerokosc, wysokosc */
    }
    div.section01RowHeight {
        height: 900px;
    }
    div.section02aRowImgBackground {
        background-position: 0% 0%;
        background-size: auto 84%; /* szerokosc, wysokosc */
    }
    div.section02bRowImgBackground {
        background-position: 100% 0%;
        background-size: auto 80%; /* szerokosc, wysokosc */
    }
    .section03Background {
        background-position: 50% 50%;
        background-size: auto 75%; /* szerokosc, wysokosc */
    }
    div.section03RowHeight {
        height: 800px;
    }
    div.section04RowHeight {
        height: 460px;
    }
    div.section04RowImgBackground {
        background-position: 100% -80px;
        background-size: auto 100%; /* szerokosc, wysokosc */
    }
    div.boxInfo {
        width: 48%;
    }
}

@media only screen and (max-width: 576px) {
    p {
        font-size: 1.1rem;
        line-height: 1.5rem;
    }
    header div.headerImgBackground {
        background-position: 50% 0%;
        background-size: 140% auto; /* szerokosc, wysokosc */
    }
    div.headerRowHeight {
        height: 500px;
    }
    div.headerRowHeight > div {
        margin-bottom: 2rem;
        padding-top: 2rem;
        background-color: rgba(0,0,0,0.4);
    }
    section.section01Background,
    .section01Background {
        background-position: 50% 50%;
        background-size: auto 75%; /* szerokosc, wysokosc */
    }
    div.section01RowHeight {
        height: 1000px;
    }
    div.section02aRowImgBackground {
        background-position: 0% 0%;
        background-size: auto 70%; /* szerokosc, wysokosc */
    }
    div.section02bRowImgBackground {
        background-position: 100% 0%;
        background-size: auto 70%; /* szerokosc, wysokosc */
    }
    .section03Background {
        background-position: 50% 50%;
        background-size: auto 75%; /* szerokosc, wysokosc */
    }
    div.section03RowHeight {
        height: 800px;
    }
    div.section04RowImgBackground {
        background-position: 70% -40px;
        background-size: auto 100%; /* szerokosc, wysokosc */
    }
    div.section04RowHeight {
        height: 500px;
    }
    div.boxInfo {
        width: 48%;
    }
}

/* */