* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

html {
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: 'Francois One', sans-serif; */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
}

body {
    overflow-x: hidden;
}

div.wrapper {
    max-width: 1320px;
    margin: 0 auto;
}



/* -------- nav, logo, typing -------- */

nav {
    height: 17vh;
    width: 100vw;
    background-color: #fff;
    /* background-color: #000; */
}


div.logo {
    display: inline-block;
    position: relative;
    margin-left: 5vw;
    line-height: 17vh;
    font-family: monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: darkblue;
    /* color: #fff; */
    overflow: hidden;
    /* background-color: #000; */
}

div.logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    /* background-color: #000; */
    /* border-left: 3px solid darkblue; */
    animation: cursor .6s infinite linear, typing 4s steps(12, start) infinite;

}

@keyframes cursor {
    0% {
        border-color: transparent;
    }

    10% {
        border-color: transparent;
    }

    25% {
        border-color: #000;
    }

    75% {
        border-color: #000;
    }

    90% {
        border-color: transparent;
    }

    100% {
        border-color: transparent;
    }

}

@keyframes typing {
    100% {
        left: 100%;
    }
}


/*---------- break points for mobile ----------*/
@media (min-width: 375px) {

    div.logo {
        font-size: 3rem;
    }
}

@media (min-width: 768px) {

    div.logo {
        font-size: 4.5rem;
    }
}


/* ---------- break points for desktop ---------- */
@media (min-width: 1024px) {

    div.logo {
        font-size: 6rem;
    }
}


/* -------- header, video -------- */

header {
    height: 83vh;
    position: relative;
    overflow: hidden;
    background-image: url('../img/poster/poster1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
}

header h2.onvideo {
    position: absolute;
    z-index: 1;
    padding: 15px 0;
    width: 100%;
    top: 10%;
    transform: translateY(-50%);
    /* font-family: arial; */
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    animation: welcome 21s infinite both;
    /* opacity: 0; */
    /* UWAGA: czas trwania animacji - taki sam jak długość filmu */
}

header h2.onvideo:nth-of-type(2) {
    animation-delay: 7s;
}

header h2.onvideo:nth-of-type(3) {
    animation-delay: 14s;
}


@keyframes welcome {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    27% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    33.33% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}



/*---------- break points for mobile ----------*/
@media (min-width: 375px) {

    header h2.onvideo {
        font-size: 2.2rem;
    }
}

@media (min-width: 768px) {

    header h2.onvideo {
        font-size: 2.5rem;
    }
}

/* ---------- break points for desktop ---------- */
@media (min-width: 1024px) {

    header h2.onvideo {
        font-size: 2.6rem;
    }
}



/* -------- rysowanie, scroll section -------- */


.drawing,
.about {
    /* margin: 90px 0; */
    margin: 10vh 0;
}

.drawing h1,
.about h1 {
    font-size: 4.5rem;
    text-align: center;
    /* margin-bottom: 40px; */
    margin-bottom: 10vh;
    /* color: #444; */

    /* font-family: 'Road Rage', cursive; */
    font-family: 'Road Rage', Arial;

    color: rgb(18, 57, 185);
}


/* SEKCJA I - RYSOWANIE */

.drawing h2 {
    color: white;
    background-color: blue;
    padding: 20px 0 20px 10vw;
    margin-bottom: 30px;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.drawing img {
    float: left;
    padding: 0 30px;
}

img.gallery {
    float: left;
    padding: 0 30px;
    cursor: pointer;
    transition: .3s;
}

img.gallery:hover {
    transform: rotate(7deg);
}

.drawing article p {
    padding-left: 30px;
    font-size: 2.5rem;
    font-weight: 600;
    padding-right: 40px;
    line-height: 1.5;
    text-align: justify;
}

.drawing article {
    margin-bottom: 12vh;
    transition: 1s;
}

/* Na start: art2, art3 - niewidoczne */
.drawing .art2 {
    transform: translateX(-100vw);
}

.drawing .art3 {
    transform: translateX(100vw);
}

/* Klasa active - animacja, aktywacja przez jQ */
.drawing .art2.active,
.drawing .art3.active {
    transform: translateX(0);
}



/*---------- break points for mobile ----------*/
@media (min-width: 375px) {
    /* - dla iPhone SE (2nd gen) */

    .drawing h1,
    .about h1 {
        font-size: 6rem;
    }

    .drawing h2 {
        font-size: 3rem;
    }

    .drawing article p {
        font-size: 2.7rem;
    }
}



@media (min-width: 768px) {

    .drawing h1,
    .about h1 {
        font-size: 6.5rem;
    }

    .drawing h2 {
        font-size: 3.3rem;
    }

    .drawing article p {
        font-size: 2.8rem;
        font-weight: 600;
    }


}

/* ---------- break points for desktop ---------- */
@media (min-width: 1024px) {

    .drawing h1,
    .about h1 {
        font-size: 7rem;
    }

    .drawing h2 {
        font-size: 3.5rem;
    }

    .drawing article p {
        font-size: 3rem;
        font-weight: 600;
        line-height: 2;
    }
}


/* SEKCJA II - O nas */

.about {
    padding: 0 20px;
}

.about p {
    font-size: 2.5rem;
    margin: 20px 0;
    font-weight: 600;
}

.about p span {
    font-size: 3.5rem;
    /* font-family: 'Sedgwick Ave', cursive; */
    /* font-family: 'Luckiest Guy', cursive; */
    /* font-family: 'Road Rage', cursive; */
    font-family: 'Road Rage', Arial;
    color: rgb(18, 57, 185);

}

.about article {
    margin-bottom: 60px;
    transition: .8s;
}

.about img {
    display: block;
    width: 100%;
}

/* Na start: niewidoczne  - rozwijane po scroll'u*/
.about article {
    transform: scale(0);
}

/* Klasa active - animacja (rozwinięcie), aktywacja przez jQ */
.about article.active {
    transform: scale(1);
}


/*---------- break points for mobile ----------*/
@media (min-width: 375px) {
    /* - dla iPhone SE (2nd gen) */


    .about p {
        font-size: 2.7rem;
    }

    .about p span {
        font-size: 3.9rem;
    }
}


@media (min-width: 768px) {

    .about p {
        font-size: 2.8rem;
        font-weight: 600;
    }

    .about p span {
        font-size: 4.3rem;

    }
}


/* ---------- break points for desktop ---------- */
@media (min-width: 1024px) {


    .about p {
        font-size: 3rem;
        font-weight: 600;
    }

    .about p span {
        font-size: 4.5rem;
    }

}



/*------------------------------------------
  /*Footer*/

footer {
    position: relative;
    width: 100vw;
    /* height: 30vh; */
    height: 40vh;
    margin-top: 20vh;
    text-align: center;
    background-color: #333;
    background-color: rgb(0, 0, 0);
}

p.notes {
    position: absolute;
    left: 10%;
    bottom: 5%;
    margin-bottom: 2vh;
    border-left: 5px solid white;
    font-family: 'Antic', sans-serif;
    font-size: 12px;
    padding: 5px;
    color: white;
}

footer section.contact {
    padding: 3% 0 0 11%;
    /*  margin-bottom: 3vh;*/
    text-align: left;
}

footer section.contact ul {
    list-style: none;
}

footer section.contact ul li {
    font-family: 'Antic', sans-serif;
    font-size: 13px;
    margin-bottom: .9vh;
    transition: .3s;
}

footer section.contact ul li:hover {
    color: white;
}

footer section.contact ul a {
    text-decoration: none;
    font-size: 12px;
    color: #999;
}

footer section.contact ul a:hover {
    color: #00b1ff;
    color: white;
}

footer section.contact ul i {
    margin-right: 5px;
    color: #999;
}



@media (orientation: portrait) and (min-width: 768px) {

    p.notes {
        font-size: 13px;
        padding: 15px;
    }

    footer section.contact {
        padding: 3% 0 0 11%;
        /*  margin-bottom: 3vh;*/
        text-align: left;
    }

    footer section.contact ul a {
        font-size: 13px;

    }

}



/* ---------- break points for desktop ----------*/

@media (orientation: landscape) and (min-width: 1025px) {


    /*  footer {}*/

    p.notes {
        font-size: 13px;
        padding: 15px;
    }

    footer section.contact {
        position: absolute;
        right: 10%;
        bottom: 5%;
        margin-bottom: 3vh;
    }

    /*  footer section.contact ul {}*/
    /*  footer section.contact ul li {}*/
    /*  footer section.contact ul li:hover {}*/

    footer section.contact ul a {
        font-size: 13px;
    }

    /*  footer section.contact ul a:hover {}*/
    /*  footer section.contact ul i {}*/
}