/*    font-family: 'Saira', 'Saira Condensed', sans-serif;*/


html {
    scroll-behavior: smooth;
}

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

.clearfix::after {
    content: "";
    clear: both;
    display: table;
    overflow: auto;
}

body {
    max-width: 100%;
    margin: 0 auto;
}

/* Header - Strona pierwsza */

header > * {
    position: absolute;
    overflow: hidden;
}

header {
    position: relative;
    background-image: url(../img/background.jpg);
    background-attachment: fixed;
    background-color: #29a6dc;
    background-size: contain;
    height: 100vh;
    text-transform: uppercase;
    overflow: hidden;
    max-width: 100%;
}

header p.hey {
    z-index: 1;
    top: 10%;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 120px;
    font-weight: bold;
    margin: 0 5vw;
    color: white;
}

header h1.name {
    z-index: 1;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 75px;
    font-weight: bold;
    top: 30%;
    margin: 0 5vw;
    color: white;
}

header p.job {
    z-index: 1;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 60px;
    font-weight: lighter;
    top: 45%;
    margin: 0 5vw;
    color: white;
}

header a {
    z-index: 1;
}

header a button.portfolio {
    display: block;
    margin: 75vh 0 0 5vw;
    font-family: 'Saira', sans-serif;
    font-size: 36px;
    background-color: transparent;
    color: white;
    padding: 0px 60px;
    text-transform: uppercase;
    line-height: 90px;
    border: 2px solid white;
    border-radius: 10px;
    letter-spacing: 2px;
    transition: 0.3s;
}

header a {
    text-decoration: none;
}

header a:visited {
    color: white;
}

header img.zdjecie {
    max-height: 100vh;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

/* Sekcja 1 - O mnie */
section.about-me-fullwidth {
    width: 100%;
    padding: 80px 5vw;
    background: #fff;
}

section.about-me-fullwidth h1 {
    color: black;
    margin: 5vh 0;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 60px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

section.about-me-fullwidth h2 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 36px;
    letter-spacing: 2px;
}

section.about-me-fullwidth p {
    margin: 0 2vh;
    color: #333;
    font-family: 'Saira', sans-serif;
    font-size: 21px;
}

section.about-me-fullwidth .content {
    max-width: 100%;
    margin: 0 auto;
}

section.about-me-fullwidth .content img {
    width: 10%;
    margin-left: 50%;
    transform: translate(-50%, 0);
}

section.about-me-fullwidth p.description {
    margin: 0;
    color: #333;
    font-family: 'Saira', sans-serif;
    font-size: 21px;
    line-height: 1.6;
    text-align: justify;
}

section.about-me {

    width: 90%;
    margin: 0 auto;
}

section.about-me h1 {
    color: black;
    margin: 5vh 0;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 60px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

section.about-me div.frame {
    float: left;
    width: 33.333%;
}

section.about-me .frame.dwa {      
    width: 25%;
}
section.about-me .frame.trzy {     
    width: 50%;
}
section.about-me .frame.cztery {   
    width: 25%;
}

section.about-me .frame.trzy ul {
    column-count: initial;
    -webkit-column-count: initial;
    -moz-column-count: initial;
}

section.about-me .skills-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

section.about-me .skills-columns ul {
    flex: 1 1 320px;
    min-width: 0;
    list-style: disc;
    padding-left: 22px;
    margin: 0;
    font-family: 'Saira', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #333;
}

section.about-me .skills-columns li {
    margin-bottom: 10px;
}


section.about-me h2 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 36px;
    letter-spacing: 2px;
    text-align: center;
}

section.about-me h3 {
    margin: 0 2vh;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 21px;
}

section.about-me p {
    margin: 0 2vh;
    color: #333;
    font-family: 'Saira', sans-serif;
    font-size: 21px;

}

section.about-me p.description {
    text-align: justify;
}

section.about-me li {
    margin: 0 2vh;
    font-family: 'Saira', sans-serif;
    font-size: 21px;
}

section.about-me div.time {
    margin: 20px;
    text-align: right;
}

section.about-me div.frame img {
    max-width: 180px;             
    max-height: 180px;            
    object-fit: contain;     
    margin-left: 50%;
    transform: translate(-50%, 0);
    display: block;
    margin-bottom: 20px;
    opacity: 0.95;
}

section.about-me div.tab1 {
    font-weight: 600;
    background-color: #333;
    background-position: -40%;
    border: 1px solid black;
    width: 60%;
}

section.about-me div.tab2 {
    font-weight: 600;
    color: white;
    background-color: #333;
    background-position: -40%;
    border: 1px solid black;
    width: 100%;
}

section.about-me div.tab3 {
    font-weight: 600;
    color: white;
    background-color: #333;
    background-position: -40%;
    border: 1px solid black;
    width: 80%;
}

section.about-me div.tab4 {
    font-weight: 600;
    color: white;
    background-color: #333;
    background-position: -40%;
    border: 1px solid black;
    width: 80%;
}

section.about-me div p.procenty {
    color: white;
}

section.about-me div.cztery > p {
    margin-bottom: 20px;
}

/* Sekcja 3 - Projekty*/

section.projects {
    background-color: #1e1e1e;
    padding: 5px 0 50px 0;
}

section.projects h1 {
    color: white;
    margin: 5vh 0;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 60px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

section.projects div.projekt {
    margin: 0 auto 5vh auto;
    width: 90vw;
    min-height: 50vh;

}

section.projects div.projekt:nth-of-type(odd) {
    background-color: #34728F;
}

section.projects div.projekt:nth-of-type(odd) > * {
    float: left;
}

section.projects div.projekt:nth-of-type(even) {
    background-color: #8F4F4F;
}

section.projects div.projekt:nth-of-type(even) > * {
    float: right;
}

section.projects div.projekt iframe {
    width: 100%;
    min-height: 50vh;
}

section.projects div.projekt div.illustration {
    width: 50%;
    min-height: 50vh;
    display: flex;
    justify-content: center;   
    align-items: center;      
    overflow: hidden;          
}

section.projects div.projekt div.illustration img {
    max-width: 100%;
    max-height: 100%;
    max-height: 600px;
    object-fit: cover; /* dopasowanie proporcji */
    display: block;
}


section.projects div.projekt h2 {
    font-family: 'Saira', sans-serif;
    padding: 50px 20px 20px 20px;
    font-size: 36px;
    color: white;
    width: 45%;
    display: block;
    border-bottom: 2px solid;
    text-transform: uppercase;
}

section.projects div.projekt p {
    font-family: 'Saira', sans-serif;
    padding: 50px 20px 20px 20px;
    font-size: 21px;
    color: white;
    width: 45%;
}



/*Sekcja 4 - Motto*/

section.motto {
    height: 100vh;
    text-align: center;
    background-image: url(../img/motto.jpg);
    background-position: top center;
    background-size: cover;
    color: white;
}

section.motto div.background {
    width: 100%;
    height: 100%;
    background-color: rgba(63, 114, 45, .5);
    padding-top: 30vh;
}

section.motto div.tekst {
    width: 60%;
    font-size: 48px;
    text-align: center;
    margin: 0 auto;
    font-family: 'Saira', sans-serif;
}

section.motto div.tekst h1 {

    font-size: 24px;
    text-align: right;
}

/*Sekcja 5 - Doswiadczenie*/

section.experience div.tablica {
    margin-bottom: 5vh;
}

section.experience aside.logo {

    width: 25%;
}

section.experience aside.logo img {
    margin-left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
}

section.experience div.space {
    height: 114px;
    border-bottom: 2px solid black;
    margin-left: 75%;
}

section.experience div > * {
    float: left;
}


section.experience div div.dane {
    width: 75%;
}

section.experience h1 {
    color: black;
    margin: 5vh 0;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 60px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;

}

section.experience div {
    font-family: 'Saira Condensed', sans-serif;
}

section.experience h2 {
    height: 58px;
    width: 100%;
    font-size: 24px;
    font-weight: bold;
    padding-top: 20px;
    padding-left: 5vw;
    letter-spacing: 2px;
}

section.experience span {
    text-align: right;
    height: 56px;
    width: 50%;
    font-size: 20px;
    padding-bottom: 20px;
    padding-right: 5vw;
    letter-spacing: 1px;
    border-bottom: 2px solid black;
}

section.experience h3 {
    height: 56px;
    width: 50%;
    font-size: 20px;
    padding-bottom: 20px;
    padding-left: 5vw;
    border-bottom: 2px solid black;
    letter-spacing: 1px;
}

section.experience p {
    width: 90%;
    margin-left: 5vh;
    padding: 10px;
}

section.experience li {
    width: 100%;
    margin-left: 7vw;

}

/*Sekcja 6 - Hobby*/

div.hobby > * {
    float: left;
}

section.hobby h1 {
    color: black;
    margin: 5vh 0;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 60px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;

}

section.hobby p {
    padding-top: 15vh;
    min-height: 100%;
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: 0.6s;
}

section.hobby p:hover {
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 1;
    background-size: 120%;
}

section.hobby div.item {
    width: 50%;
    height: 40vh;
    font-size: 60px;
    font-family: 'Saira', sans-serif;
    color: white;
    transition: 0.6s;
}

section.hobby div.item:nth-of-type(1) {
    background-image: url(../img/hobby1.jpg);
    background-position: center;
    background-size: 100%;

}

section.hobby div.item:nth-of-type(2) {
    background-image: url(../img/hobby2.png);
    background-size: 100%;
    background-position: center;
}

section.hobby div.item:nth-of-type(3) {
    background-image: url(../img/hobby3.jpg);
    background-size: 100%;
    background-position: center;

}

section.hobby div.item:nth-of-type(4) {
    background-image: url(../img/hobby4.jpg);
    background-size: 100%;
    background-position: center;

}

section.hobby div.item:nth-of-type(5) {
    background-image: url(../img/hobby5.jpg);
    background-size: 100%;
    background-position: center;
}

section.hobby div.item:nth-of-type(6) {
    background-image: url(../img/hobby6.jpg);
    background-size: 100%;
    background-position: center;

}

section.hobby div.item:hover {
    background-size: 120%;
    cursor: default;
}

/*Sekcja 7s - Dane Kontaktowe*/

section.contact {
    background-color: #1e1e1e;
}


section.contact h1 {
    color: white;
    padding: 5vh 0;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 60px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

section.contact div.photo {
    float: left;
    width: 50%;
}

section.contact div.photo img {
    display: block;
    margin-left: 50%;
    transform: translate(-50%, 0);
    width: 50%;
    border-radius: 50%;
    box-shadow: 1px 5px 5px 1px white;
}

section.contact div.dane {
    float: left;
    width: 50%;
}

section.contact div.dane > div {
    width: 100%;
    margin: 15px 0;
}

section.contact div.dane * {
    float: left;
}

section.contact div.dane span {
    font-family: 'Saira', sans-serif;
    padding-left: 10px;
    line-height: 72px;
    font-size: 24px;
    text-decoration: none;
    color: white;
}

/*Footer*/

footer {
    font-family: 'Saira', sans-serif;
    text-align: center;
    color: white;
    background-color: #29a9df;
    font-size: 15px;
    padding: 2vh 0;
}

footer a {
    color: white;
    text-decoration: none;
}

/* Media do wersji mobilnych oraz tabletów */
@media (orientation: portrait) and (min-width: 791px) and (max-width: 1024px) {



    /*    Sekcja 4 - Doswiadczenie*/

    section.experience div.space {
        height: 143px;
    }

    section.experience h1 {
        font-size: 42px;
    }

    section.experience h2 {
        height: 74px;
        font-size: 36px;
    }

    section.experience h3 {
        height: 69px;
        font-size: 28px;
        ;
        width: 60%;
    }



    section.experience span {
        font-size: 28px;
        height: 69px;
        width: 40%;
    }

    section.experience div.tablica p {
        font-size: 28px;
        width: 80%;
        margin-left: 0vw;
    }

    section.experience div.tablica li {
        font-size: 30px;
        ;
        width: 85%;
    }



    /*    Sekcja 5 - Hobby*/

    div.hobby > * {
        float: none;
    }

    section.hobby div.item:nth-of-type(n) {
        background-size: cover;
        width: 100%;
        height: 40vh;
    }

    section.hobby h1 {
        font-size: 60px;
    }

    section.hobby p {
        padding-top: 0;
        min-height: 0%;
        font-size: 36px;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.3);
        transition: 0s;
    }

    /*    Footer  */

    Footer h1 {
        font-size: 24px;
    }

    Footer div {
        font-size: 12px;
    }



}

@media (orientation: portrait) and (min-width: 651px) and (max-width: 790px) {

    /* Header - Strona pierwsza */

    header p.hey {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 3%;
        font-size: 50px;
    }

    header h1.name {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 15%;
        font-size: 30px;
    }

    header p.job {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 25%;
        font-size: 30px;
    }

    header a {
        font-size: 22px;
        margin: 0;
        line-height: 42px;
        top: 90%;
        left: 50%;
        transform: translate(-50%, 0);
    }

    header a button.portfolio {
        font-size: 22px;
        line-height: 52px;
        padding: 0 20px;
        margin: 0;
    }

    header img.zdjecie {
        width: 100%;

    }

    /* Sekcja 2 - O mnie */


    section.about-me {
        width: 95%;
        margin: 0 auto;
    }

    section.about-me h1 {
        font-size: 32px;
    }

    section.about-me h2 {
        font-size: 24px;
    }

    section.about-me h3 {
        font-size: 20px;
    }

    section.about-me p {
        font-size: 18px;
    }

    section.about-me li {
        font-size: 18px;
    }

    section.about-me div.frame {
        float: inherit;
        width: 100%;
    }

    section.about-me .frame.dwa {      
        width: 100%;
    }
    section.about-me .frame.trzy {     
        width: 100%;
    }
    section.about-me .frame.cztery {   
        width: 100%;
    }

    section.about-me div.frame img {
        width: 35%;
        margin: auto;
        text-align: center;
        justify-content: center;
        transform: translate(0%, 0);
    }

    /* Sekcja 2 - Projekty */

    section.projects h1 {
        font-size: 32px;
    }

    section.projects div.projekt:nth-of-type(odd) > * {
        float: none;
    }

    section.projects div.projekt:nth-of-type(even) > * {
        float: none;
    }

    section.projects div.projekt {
        width: 100%;
    }

    section.projects div.projekt div.illustration {
        width: 100%;
    }

    section.projects div.projekt h2 {
        font-size: 28px;
        padding-top: 30px;
        width: 90%;
        font-weight: lighter;
    }

    section.projects div.projekt p {
        font-size: 22px;
        width: 90%;
        padding: 20px 20px 20px 20px;
    }

    /* Sekcja 3 - Motto*/

    section.motto div.tekst {
        width: 90%;
        font-size: 38px;
    }

    section.motto div.tekst h1 {
        font-size: 31px;
    }

    /*    Sekcja 4 - Doswiadczenie*/



    section.experience h1 {
        font-size: 32px;
    }

    section.experience h3 {
        width: 60%;
    }

    section.experience span {
        width: 40%;
    }

    section.experience div.tablica p {
        font-size: 20px;
        width: 80%;
        margin-left: 0vw;
    }

    section.experience div.tablica li {
        font-size: 18px;
        ;
        width: 85%;
    }


    /*    Sekcja 5 - Hobby*/

    div.hobby > * {
        float: none;
    }

    section.hobby div.item:nth-of-type(n) {
        background-size: cover;
        width: 100%;
        height: 40vh;
    }

    section.hobby h1 {
        font-size: 32px;
    }

    section.hobby p {
        padding-top: 0;
        min-height: 0%;
        font-size: 24px;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.3);
        transition: 0s;
    }

    /*    Sekcja 6 - Dane Kontaktowe*/

    section.contact div.dane span {
        font-size: 20px;
    }


    /*    Footer  */

    Footer h1 {
        font-size: 30px;
    }

    Footer div {
        font-size: 20px;
    }



}

@media (orientation: portrait) and (min-width: 451px) and (max-width: 650px) {

    /* Header - Strona pierwsza */

    header p.hey {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 3%;
        font-size: 50px;
    }

    header h1.name {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 15%;
        font-size: 30px;
    }

    header p.job {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 22%;
        font-size: 30px;
    }

    header a {
        display: block;
        width: 60%;
        left: 50%;
        top: 35%;
        transform: translate(-50%, 0);
    }

    header a button.portfolio {
        font-size: 12px;
        margin: 0;
        line-height: 32px;


    }

    header img.zdjecie {
        width: 100%;

    }

    /* Sekcja 1 - O mnie */

    section.about-me h1 {
        font-size: 32px;
    }

    section.about-me h2 {
        font-size: 24px;
    }

    section.about-me h3 {
        font-size: 20px;
    }

    section.about-me p {
        font-size: 18px;
    }

    section.about-me li {
        font-size: 18px;
    }

    section.about-me div.frame {
        float: inherit;
        width: 100%;
    }

    section.about-me div.frame img {
        margin-top: 20px;
    }

    /* Sekcja 2 - Projekty */

    section.projects h1 {
        font-size: 24px;
    }

    section.projects div.projekt:nth-of-type(odd) > * {
        float: none;
    }

    section.projects div.projekt:nth-of-type(even) > * {
        float: none;
    }

    section.projects div.projekt {
        width: 100%;
    }

    section.projects div.projekt div.illustration {
        width: 100%;
    }

    section.projects div.projekt h2 {
        font-size: 18px;
        padding-top: 30px;
        width: 90%;
        font-weight: lighter;
    }

    section.projects div.projekt p {
        font-size: 12px;
        width: 90%;
        padding: 20px 20px 20px 20px;
    }

    /* Sekcja 3 - Motto*/

    section.motto div.tekst {
        width: 90%;
        font-size: 23px;
    }

    section.motto div.tekst h1 {
        font-size: 16px;
    }

    /*    Sekcja 4 - Dowsiadczenie*/

    section.experience div > * {
        float: left;
    }

    section.experience h1 {
        font-size: 24px;
        ;
    }

    section.experience aside {
        display: none;
    }

    section.experience div div.dane {
        width: 100%;
    }

    section.experience div.dane h2.firma {
        font-size: 18px;
        float: left;

    }

    section.experience div.dane span {
        float: left;
        font-size: 12px;
        border: none;
    }

    section.experience div.dane h3 {
        float: left;
        font-size: 12px;
        border: none;
        border: none;
    }

    section.experience div.tablica {
        margin-bottom: 0;
    }

    section.experience div.tablica div.dane p:first-of-type {
        border-top: 2px solid black;

    }

    section.experience p.opis {
        width: 95%;

        padding: 0 0 0 5vw;
        margin: 0 5% 0 0;

    }

    section.experience div.dane li {
        width: 86%;
        font-size: 12px;
        padding: 0 0 0 5px;
    }

    section.experience div.dane ul:nth-last-child(n) {
        margin-bottom: 20px;
    }




    /*    Sekcja 5 - Hobby*/

    div.hobby > * {
        float: none;
    }

    section.hobby div.item:nth-of-type(n) {
        background-size: cover;
        width: 100%;
        height: 40vh;
    }

    section.hobby h1 {
        font-size: 24px;
    }

    section.hobby p {
        padding-top: 0;
        min-height: 0%;
        font-size: 18px;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.3);
        transition: 0s;
    }

    /*    Sekcja 6 - Dane Kontaktowe*/

    section.contact h1 {
        font-size: 24px;
        ;
    }

    section.contact div.photo {
        display: none;
    }

    section.contact div.dane {
        margin: 5vh 0;
        width: 100%;
    }

    section.contact div.dane div {
        width: 90%;
        margin: 10px 5vw;
    }

    section.contact div.dane img {
        width: 32px;
    }

    section.contact div.dane span {
        font-size: 14px;
        line-height: 32px;
    }


    /*    Footer  */

    Footer h1 {
        font-size: 24px;
    }

    Footer div {
        font-size: 12px;
    }



}

@media (orientation: portrait) and (max-width: 450px) {

    /* Header - Strona pierwsza */

    header p.hey {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 8%;
        font-size: 40px;
    }

    header h1.name {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 20%;
        font-size: 20px;
    }

    header p.job {
        margin: 0;
        width: 100vw;
        text-align: center;
        top: 27%;
        font-size: 20px;
    }

    header a {
        display: block;
        width: 60%;
        left: 50%;
        top: 35%;
        transform: translate(-50%, 0);
    }

    header a button.portfolio {
        font-size: 12px;
        margin: 0;
        line-height: 32px;


    }

    header img.zdjecie {
        width: 100%;

    }

    /* Sekcja 1 - O mnie */

    section.about-me h1 {
        font-size: 24px;
    }

    section.about-me h2 {
        font-size: 18px;
    }

    section.about-me h3 {
        font-size: 14px;
    }

    section.about-me p {
        font-size: 12px;
    }

    section.about-me li {
        font-size: 12px;
    }

    section.about-me div.frame {
        float: inherit;
        width: 100%;
    }

    section.about-me div.frame img {
        margin-top: 20px;
    }

    /* Sekcja 2 - Projekty */

    section.projects h1 {
        font-size: 24px;
    }

    section.projects div.projekt:nth-of-type(odd) > * {
        float: none;
    }

    section.projects div.projekt:nth-of-type(even) > * {
        float: none;
    }

    section.projects div.projekt {
        width: 100%;
    }

    section.projects div.projekt div.illustration {
        width: 100%;
    }

    section.projects div.projekt iframe {
        height: 40vh;
    }

    section.projects div.projekt h2 {
        font-size: 18px;
        padding-top: 30px;
        width: 90%;
        font-weight: lighter;
    }

    section.projects div.projekt p {
        font-size: 12px;
        width: 90%;
        padding: 20px 20px 20px 20px;
    }

    /* Sekcja 3 - Motto*/

    section.motto div.tekst {
        width: 90%;
        font-size: 23px;
    }

    section.motto div.tekst h1 {
        font-size: 16px;
    }

    /*    Sekcja 4 - Dowsiadczenie*/

    section.experience div > * {
        float: left;
    }

    section.experience h1 {
        font-size: 24px;
        ;
    }

    section.experience aside {
        display: none;
    }

    section.experience div div.dane {
        width: 100%;
    }

    section.experience div.dane h2.firma {
        font-size: 18px;
        float: left;

    }

    section.experience div.dane span {
        float: left;
        font-size: 12px;
        border: none;
    }

    section.experience div.dane h3 {
        float: left;
        font-size: 12px;
        border: none;
        border: none;
    }

    section.experience div.tablica {
        margin-bottom: 0;
    }

    section.experience div.tablica div.dane p:first-of-type {
        border-top: 2px solid black;

    }

    section.experience p.opis {
        width: 95%;

        padding: 0 0 0 5vw;
        margin: 0 5% 0 0;

    }

    section.experience div.dane li {
        width: 86%;
        font-size: 12px;
        padding: 0 0 0 5px;
    }

    section.experience div.dane ul:nth-last-child(n) {
        margin-bottom: 20px;
    }




    /*    Sekcja 5 - Hobby*/

    div.hobby > * {
        float: none;
    }

    section.hobby div.item:nth-of-type(n) {
        background-size: cover;
        width: 100%;
        height: 40vh;
    }

    section.hobby h1 {
        font-size: 24px;
    }

    section.hobby p {
        padding-top: 0;
        min-height: 0%;
        font-size: 18px;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.3);
        transition: 0s;
    }

    /*    Sekcja 6 - Dane Kontaktowe*/

    section.contact h1 {
        font-size: 24px;
        ;
    }

    section.contact div.photo {
        display: none;
    }

    section.contact div.dane {
        margin: 5vh 0;
        width: 100%;
    }

    section.contact div.dane div {
        width: 90%;
        margin: 10px 5vw;
    }

    section.contact div.dane img {
        width: 32px;
    }

    section.contact div.dane span {
        font-size: 14px;
        line-height: 32px;
    }

    /*    Footer  */

    Footer h1 {
        font-size: 18px;
    }

    Footer div {
        font-size: 12px;
    }

}

@media (orientation: landscape) and (max-width: 650px) {

    /* Header - Strona pierwsza */

    header p.hey {
        font-size: 40px;
    }

    header h1.name {
        font-size: 20px;
    }

    header p.job {
        font-size: 20px;
    }

    header a button.portfolio {
        font-size: 16px;
        line-height: 32px;
        padding: 0px 15px;
    }

    header img.zdjecie {
        height: 100vh;
    }

    /* Sekcja 1 - O mnie */

    section.about-me h1 {
        font-size: 24px;
    }

    section.about-me h2 {
        font-size: 18px;
    }

    section.about-me h3 {
        font-size: 14px;
    }

    section.about-me p {
        font-size: 12px;
    }

    section.about-me li {
        font-size: 12px;
    }

    section.about-me div.time {
        margin: 20px 20px 20px 25%;
        text-align: left;
    }

    section.about-me div.frame {
        float: inherit;
        width: 100%;
    }

    section.about-me div.frame img {
        margin-top: 20px;
        width: 20%;
    }

    /* Sekcja 2 - Projekty */



    section.projects h1 {
        font-size: 24px;
    }

    section.projects div.projekt:nth-of-type(odd) > * {
        float: none;
    }

    section.projects div.projekt:nth-of-type(even) > * {
        float: none;
    }

    section.projects div.projekt {
        width: 100%;
    }

    section.projects div.projekt div.illustration {
        width: 100%;
        min-height: 50vh;
    }

    section.projects div.projekt iframe {
        height: 60vh;
    }

    section.projects div.projekt h2 {
        font-size: 18px;
        padding-top: 30px;
        width: 90%;
        font-weight: lighter;
    }

    section.projects div.projekt p {
        font-size: 12px;
        width: 90%;
        padding: 20px 20px 20px 20px;

    }

    /*    Sekcja 3 - Motto*/

    section.motto div.tekst {
        width: 90%;
        font-size: 18px;
    }

    section.motto div.tekst h1 {
        font-size: 11px;
    }

    /*    Sekcja 4 - Dowsiadczenie*/

    section.experience div > * {
        float: left;
    }

    section.experience h1 {
        font-size: 24px;
        ;
    }

    section.experience aside {
        display: none;
    }

    section.experience div div.dane {
        width: 100%;
    }

    section.experience div.dane h2.firma {
        font-size: 22px;
        float: left;

    }

    section.experience div.dane span {
        float: left;
        font-size: 18px;
        border: none;
    }

    section.experience div.dane h3 {
        float: left;
        font-size: 18px;
        border: none;
        border: none;
    }

    section.experience div.tablica {
        margin-bottom: 0;
    }

    section.experience div.tablica div.dane p:first-of-type {
        border-top: 2px solid black;

    }

    section.experience p.opis {
        width: 95%;
        padding: 0 0 0 5vw;
        margin: 0 5% 0 0;

    }

    section.experience div.dane ul {
        width: 100%;
    }


    section.experience div.dane li {
        width: 90%;
        font-size: 16px;
        padding: 0 0 0 5px;
    }

    section.experience div.dane ul:nth-last-child(n) {
        margin-bottom: 20px;
    }

    /*    Sekcja 5 - Hobby*/

    div.hobby > * {
        float: left;
    }

    section.hobby div .item {
        width: 50%;
        height: 40vh;
    }

    section.hobby h1 {
        font-size: 24px;
    }

    section.hobby p {
        padding-top: 0;
        min-height: 0%;
        font-size: 18px;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.3);
        transition: 0s;
    }

    /*Sekcja 6 - Dane Kontaktowe*/

    section.contact h1 {
        font-size: 24px;
    }

    section.contact div.photo {
        float: none;
        display: none;
    }

    section.contact div.dane {
        width: 100%;
    }

    section.contact div.dane > div {
        width: 50%;
    }


    section.contact div.dane img {
        width: 32px;
    }

    section.contact div.dane span {
        font-size: 14px;
        line-height: 32px;
    }

    /*    Footer  */

    Footer h1 {
        font-size: 24px;
    }

    Footer div {
        font-size: 12px;
    }


}

@media (orientation: landscape) and (max-width: 850px) and (min-width: 650px) {

    header p.hey {
        font-size: 45px;
    }

    header h1.name {
        font-size: 25px;
    }

    header p.job {
        font-size: 25px;
    }

    header a button.portfolio {
        font-size: 21px;
        line-height: 37px;
        ;
    }

    header img.zdjecie {
        height: 100vh;
    }

    /* Sekcja 1 - O mnie */

    section.about-me h1 {
        font-size: 24px;
    }

    section.about-me h2 {
        font-size: 18px;
    }

    section.about-me h3 {
        font-size: 14px;
    }

    section.about-me p {
        font-size: 12px;
    }

    section.about-me li {
        font-size: 12px;
    }

    section.about-me div.time {
        margin: 20px 20px 20px 25%;
        text-align: left;
    }

    section.about-me div.frame {
        float: inherit;
        width: 100%;
    }

    section.about-me div.frame img {
        margin-top: 20px;
        width: 20%;
    }

    /* Sekjca 2 - Projekty */

    section.projects h1 {
        font-size: 24px;
    }

    section.projects div.projekt:nth-of-type(odd) > * {
        float: none;
    }

    section.projects div.projekt:nth-of-type(even) > * {
        float: none;
    }

    section.projects div.projekt {
        width: 100%;
    }

    section.projects div.projekt iframe {
        height: 60vh;
    }

    section.projects div.projekt div.illustration {
        width: 100%;
    }

    section.projects div.projekt h2 {
        font-size: 18px;
        padding-top: 30px;
        width: 90%;
        font-weight: lighter;
    }

    section.projects div.projekt p {
        font-size: 12px;
        width: 90%;
        padding: 20px 20px 20px 20px;

    }

    /*    Sekcja 3 - Motto*/

    section.motto div.tekst {
        width: 90%;
        font-size: 23px;
    }

    section.motto div.tekst h1 {
        font-size: 16px;
    }

    /*    Sekcja 4 - Dowsiadczenie*/

    section.experience div > * {
        float: left;
    }

    section.experience h1 {
        font-size: 24px;
        ;
    }

    section.experience aside {
        display: none;
    }

    section.experience div div.dane {
        width: 100%;
    }

    section.experience div.dane h2.firma {
        font-size: 22px;
        float: left;

    }

    section.experience div.dane span {
        float: left;
        font-size: 18px;
        border: none;
    }

    section.experience div.dane h3 {
        float: left;
        font-size: 18px;
        border: none;
        border: none;
    }

    section.experience div.tablica {
        margin-bottom: 0;
    }

    section.experience div.tablica div.dane p:first-of-type {
        border-top: 2px solid black;

    }

    section.experience p.opis {
        width: 95%;
        padding: 0 0 0 5vw;
        margin: 0 5% 0 0;

    }

    section.experience div.dane ul {
        width: 100%;
    }


    section.experience div.dane li {
        width: 90%;
        font-size: 16px;
        padding: 0 0 0 5px;
    }

    section.experience div.dane ul:nth-last-child(n) {
        margin-bottom: 20px;
    }


    /*    Sekcja 5 - Hobby*/

    div.hobby > * {
        float: left;
    }

    section.hobby div.item:nth-of-type(n) {
        background-size: cover;

        width: 50%;
        height: 40vh;
    }

    section.hobby h1 {
        font-size: 24px;
    }

    section.hobby p {
        padding-top: 0;
        min-height: 0%;
        font-size: 18px;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.3);
        transition: 0s;
    }

    /*Sekcja 6 - Dane Kontaktowe*/

    section.contact h1 {
        font-size: 24px;
    }

    section.contact div.photo {
        float: none;
        display: none;
    }

    section.contact div.dane {
        width: 100%;
    }

    section.contact div.dane > div {
        width: 50%;
    }


    section.contact div.dane img {
        width: 32px;
    }

    section.contact div.dane span {
        font-size: 14px;
        line-height: 32px;
    }

    /*    Footer  */

    Footer h1 {
        font-size: 24px;
    }

    Footer div {
        font-size: 12px;
    }


}

@media (orientation: landscape) and (min-width: 850px) and (max-width: 1024px) {

    header p.hey {
        font-size: 80px;
    }

    header h1.name {
        font-size: 40px;
    }

    header p.job {
        font-size: 40px
    }

    header a button.portfolio {
        font-size: 26px;
        line-height: 60px;
        ;
    }

    header img.zdjecie {
        height: 100vh;
    }

    /* Sekcja 1 - O mnie */

    section.about-me h1 {
        font-size: 24px;
    }

    section.about-me h2 {
        font-size: 18px;
    }

    section.about-me h3 {
        font-size: 14px;
    }

    section.about-me p {
        font-size: 12px;
    }

    section.about-me li {
        font-size: 12px;
    }

    section.about-me div.time {
        margin: 20px 20px 20px 25%;
        text-align: left;
    }

    section.about-me div.frame {
        float: inherit;
        width: 100%;
    }

    section.about-me div.frame img {
        margin-top: 20px;
        width: 20%;
    }

    /* Sekcja 2 - Projekty */



    section.projects h1 {
        font-size: 24px;
    }

    section.projects div.projekt:nth-of-type(odd) > * {
        float: none;
    }

    section.projects div.projekt:nth-of-type(even) > * {
        float: none;
    }

    section.projects div.projekt {
        width: 100%;
    }

    section.projects div.projekt div.illustration {
        width: 100%;
        min-height: 50vh;
    }

    section.projects div.projekt iframe {
        height: 60vh;
    }

    section.projects div.projekt h2 {
        font-size: 28px;
        padding-top: 30px;
        width: 90%;
        font-weight: lighter;
    }

    section.projects div.projekt p {
        font-size: 22px;
        width: 90%;
        padding: 20px 20px 20px 20px;

    }

    /*    Sekcja 3 - Motto*/

    section.motto div.tekst {
        width: 90%;
        font-size: 28px;
    }

    section.motto div.tekst h1 {
        font-size: 21px;
    }

    /*    Sekcja 5 - Hobby*/

    div.hobby > * {
        float: left;
    }

    section.hobby div.item:nth-of-type(n) {
        background-size: cover;
        width: 50%;
        height: 40vh;
    }

    section.hobby h1 {
        font-size: 24px;
    }

    section.hobby p {
        padding-top: 0;
        min-height: 0%;
        font-size: 18px;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.3);
        transition: 0s;
    }

    /*    Footer  */

    Footer h1 {
        font-size: 24px;
    }

    Footer div {
        font-size: 12px;
    }





}

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

    header a button.portfolio:hover {
        color: black;
        background-color: #fff;
    }

    section.motto div.tekst {
        font-size: 32px;
    }

}