:root {
    --white: #ffffff;
    --black: #000000; /* glowny font */
    /*--actinaBackground: #00031c;*/
    --actinaBackground: #0a0a0a;
    --actinaBlue: #32c8dc; /* naglowki srednie i male + ikony */
    --actinaRed: #ff0543; /* tlo w prostokatach */
    --actinaGray: #dbdbdb; /* tlo w prostokatach */
    --transition03: 0.3s;
    --transition05: 0.5s;
    --transition08: 0.8s;
    /* var(--zzz) */
}

@font-face {
    font-family: 'RobotoMono';
    src: url('../fonts/RobotoMono-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
}
@font-face { /* font uzyty w ostatniej wierszu/sekcji z ikonami */
    font-family: 'RobotoMono';
    src: url('../fonts/RobotoMono-Medium.ttf') format('opentype');
    font-weight: 500; /* TODO: sprawdzic wartosc */
    font-style: normal;
    font-size: 16px;
}

@font-face {
    font-family: 'NoirPro';
    src: url('../fonts/NoirPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
}

@font-face {
    font-family: 'NoirPro';
    src: url('../fonts/NoirPro-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
}
@font-face {
    font-family: 'NoirPro';
    src: url('../fonts/NoirPro-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: 'RobotoMono', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.82857;
    color: var(--white);
    background-color: var(--actinaBackground);
    transition: font-size 0.5s;
}
body.bodyBackground {
    background-image: url("../images/actina-opisy-glowne-tlo.png");
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 50% auto;
    transition: background-position var(--transition05);
}
main {
    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 {
    font-family: 'NoirPro', Helvetica, Arial, sans-serif;
}
h3 {
    font-weight: 600;
}
p {
    font-size: 1.15rem;
}
.textJustify, /*2023-10-11*/
p.textJustify,
span.textJustify {
    text-align: justify;
}
a {
    color: var(--black);
    text-decoration: underline !important;
    transition: color var(--transition03);
}
a:hover, a:focus {
    color: var(--white);
    text-decoration: none !important;
}
strong { }
div.columnContainer {
    margin: 0 auto;
    padding: 4rem 3rem;
    max-width: 80%;
}

.columnBackground,
.columnBackgroundDark {
    background-color: var(--actinaBackground);
}
.columnBackgroundGray {
    background-color: var(--actinaGray);
    color: var(--black);
}

.tloGradientPrawa {
    background: rgb(219,219,219);
    background: -moz-linear-gradient(left, rgba(219,219,219,0) 45%, rgb(219,219,219) 50%, rgb(219,219,219) 55%);
    background: -webkit-linear-gradient(left, rgba(219,219,219,0) 45%, rgb(219,219,219) 50%, rgb(219,219,219) 55%);
    background: linear-gradient(to right, rgba(219,219,219,0) 45%, rgb(219,219,219) 50%, rgb(219,219,219) 55%);
}
.tloGradientLewa {
    background: rgb(219,219,219);
    background: -moz-linear-gradient(left, rgb(219,219,219) 0%, rgb(219,219,219) 50%, rgba(219,219,219,0) 55%);
    background: -webkit-linear-gradient(left, rgb(219,219,219) 0%, rgb(219,219,219) 50%, rgba(219,219,219,0) 55%);
    background: linear-gradient(to right, rgb(219,219,219) 0%, rgb(219,219,219) 50%, rgba(219,219,219,0) 55%);
}
#section4 div.backgroundApsoliteContainer,
#section6 div.backgroundApsoliteContainer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* -------------------------------------------------------- */
/* ---------------------------- NAGLOWEK */
header {
    margin: 0 auto;
    padding: 0;
}
header div.columnContainer {
    margin: inherit;
    padding: inherit;
}
div.headerHeight { }
header div.headerBackground{
    background-image: url("../images/silent-naglowek-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 100% 0%;
    background-size: 100% auto;
    transition: background-position var(--transition05);
}
header h1 {
    font-size: 350%;
    font-weight: bold;
    /*color: var(--actinaBlue);*/
}
header h2 {
    font-size: 250%;
    text-align: right;
}
header h2 span {
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 0.8em;
}
header img.toner {
    display: block;
    margin: 0 auto;
}
header p {
    font-size: 1.1em;
}
/* ---------------------------- NAGLOWEK (koniec) */


/* ---------------------------- sekcja1 Ikony */
#section1 { }
#section1 div > img {
    margin-bottom: 2rem;
}
#section1 h5 {
    height: 45px;
}
#section1 p { /*2023-10-11*/
    font-size: 0.90rem;
}
/* ---------------------------- sekcja1 Ikony (koniec)*/


/* ---------------------------- sekcja2 Pewnosc */
#section2 div.backgroundImage {
    background-image: url("../images/actina-opisy-sec2-tlo.png");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: auto auto;
    transition: background-position var(--transition05);
}
/* ---------------------------- sekcja2 Pewnosc (koniec) */


/* ---------------------------- sekcja4 Własny styl */
#section4 { }

#section4 div.columnBackgroundFoto {
    background-image: url("../images/actina-opisy-sec4-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: auto auto;
    transition: background-position var(--transition05);
}
#section4 h3 {
    /*color: var(--actinaBlue);*/
}
#section4 p { /*2023-10-11*/
    font-size: 1.0rem;
}
/* ---------------------------- sekcja4 Własny styl (koniec) */


/* ---------------------------- sekcja5 Profesjonalizm */
#section5 { }
#section5 div.backgroundImage {
    background-image: url("../images/actina-opisy-sec5-tlo.png");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: auto auto;
    transition: background-position var(--transition05);
}
/* ---------------------------- sekcja5 Profesjonalizm (koniec) */


/* ---------------------------- sekcja6 FURY */
#section6 { }
#section6 div.columnBackgroundFoto {
    background-image: url("../images/silent-sec6-tlo.jpg");
    background-repeat: no-repeat;
    background-position: 0% 50%;
    background-size: auto auto;
    transition: background-position var(--transition05);
}
/* ---------------------------- sekcja6 FURY (koniec) */


/* ---------------------------- sekcja7 Napisali o Actina */
#section7 { }
#section7 div.columnContainer {
    max-width: inherit;
}
#section7 div > a > img {
    margin-bottom: 2em;
}
/* ---------------------------- sekcja7 Napisali o Actina (koniec) */


/* ---------------------------- sekcja9 Ikony2 */
#section9 { }
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;
    background-color: transparent !important; /*  */
}
div.boxInfo img {
    position: relative;
    margin-bottom: 1.0em;
}
div.boxInfo p {
    text-transform: uppercase;
}
#section9 p { /*2023-10-11*/
    font-size: 1.1rem;
}
/* ---------------------------- sekcja 9 Ikony2 (koniec) */


footer {
    margin: 0;
    padding: 0;
}
footer div.container {
    padding-bottom: 0;
}
footer div.container div.columnContainer {
    /*margin: 0 auto;*/
    padding: 0;
}


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

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    header div.headerBackground{
        background-position: 50% 15%;
        background-size: 79% auto;
    }
    div.headerHeight {
        min-height: 1000px;
    }
    #section1 div > img {
        width: 140px;
        height: auto;
    }
    div.imgContainer {
        display: none;
    }
    #section4 div.columnBackgroundFoto {
        background-position: 100% 50%;
        background-size: auto 90%;
    }
    div.boxInfo {
        width: 18%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .container {
        max-width: inherit;
    }
    header div.headerBackground{
        background-position: 50% 5%;
        background-size: 79% auto;
    }
    div.headerHeight {
        min-height: 920px;
    }
    #section1 div > img {
        width: 140px;
        height: auto;
    }
    #section1 h5 {
        height: inherit;
    }
    div.imgContainer {
        display: none;
    }
    #section4 div.columnBackgroundFoto {
        background-position: 110% 50%;
        background-size: auto 80%;
    }
    #section6 div.columnBackgroundFoto {
        background-position: 0% 50%;
        background-size: auto 95%;
    }
    div.boxInfo {
        width: 23%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .container {
        max-width: inherit;
    }
    div.columnContainer {
        padding: 2.5rem 1.5rem;
    }

    header div.headerBackground{
        background-position: 100% 10%;
        background-size: 100% auto;
    }
    div.headerHeight {
        min-height: 820px;
    }
    #section1 div > img {
        width: 140px;
        height: auto;
    }
    #section1 h5 {
        height: inherit;
    }
    #section4 div.backgroundApsoliteContainer,
    #section6 div.backgroundApsoliteContainer {
        display: none;
    }
    div.boxInfo {
        width: 31%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 768px) {
    .container {
        max-width: inherit;
    }
    div.columnContainer {
        padding: 1rem 1rem;
    }
    div.headerHeight {
        min-height: 640px;
    }
    header div.columnContainer {
        max-width: 100%;
    }
    header h1 {
        font-size: 230%;
    }
    header h2 {
        font-size: 160%;
    }
    #section1 div > img {
        width: 120px;
        height: auto;
    }
    #section1 h5 {
        height: inherit;
    }
    #section4 div.backgroundApsoliteContainer,
    #section6 div.backgroundApsoliteContainer {
        display: none;
    }
    div.boxInfo {
        width: 48%;
    }
}

@media only screen and (max-width: 576px) {
    .container {
        max-width: inherit;
    }
    div.columnContainer {
        padding: 1rem 0;
    }
    div.headerHeight {
        min-height: 480px;
    }
    header div.columnContainer {
        max-width: 100%;
    }
    header h1 {
        font-size: 230%;
    }
    header h2 {
        font-size: 160%;
    }
    #section1 div > img {
        width: 120px;
        height: auto;
    }
    #section1 h5 {
        height: inherit;
    }
    #section4 div.backgroundApsoliteContainer,
    #section6 div.backgroundApsoliteContainer {
        display: none;
    }
    div.boxInfo {
        width: 48%;
    }
}

/* */