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

html {
    background-image: url('../images/halftone.png');
    background-repeat: repeat;
}

p {
    font-family: 'Zilla Slab', serif;
    font-size: 1.05rem;
}

.more-btn p {
    font-family: 'Jura', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
}

.more-btn {
    display: inline-block;
    text-decoration: none;
    color: black;
    position: relative;
    padding: 3rem 0;
}

.more-btn span {
    padding: 15px 10px 15px 2px;
    background-color: #49C44F;
}

.more-btn p::before {
    display: none;
}

.content-container {
    margin: 0 auto;
    width: 80vw;
    padding: 5rem 0;
}

.paragraph-title h1::before {
    display: inline-block;
    content: "";
    border-top: 1px solid #021E31;
    width: 100px;
    position: absolute;
    left: -120px;
    top: 1.5rem;
}

.wraper {
    width: 80vw;
    height: 60vh;
    position: relative;
    top: 0;
    z-index: 2;
    overflow: hidden;
}

.img-bcg {
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.bcg {
    background-image: url('../images/mm.jpg');
    background-position: center;
}

.bcg2 {
    background-image: url('../images/danuta_barszcz.jpg');
}

.bcg3 {
    background-image: url('../images/jkozaka-www.jpg');
    background-position: top center;
}

.bcg4 {
    background-image: url('../images/Emilia_Jurewicz_L.jpg');
    background-position: top center;
}

.bcg5 {
    background-image: url('../images/beata_lewandowska2.jpg');
}

.photo-asz {
    background-image: url('../images/alina_szblowska2.jpg');
}

.photo-akr {
    background-image: url('../images/Anna_konopacka_rogowska2.jpg');
}

.photo-oz {
    background-image: url('../images/oscar_zieba.jpg');
}

.photo-rt {
    background-image: url('../images/robert_tomaszewski2.jpg');
}

.photo-js {
    background-image: url('../images/Janusz_Stanek2.jpg');
}

.bcg-photo {
    width: 2px;
    height: 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: #49C44F;
}

.bcg-sec {
    width: 75vw;
    height: 50vh;
    position: absolute;
    top: 28vh;
    left: 0;
    z-index: -1;
}

.bcg-color1 {
    border: 1.5px solid gray;
}

.bcg-color2 {
    border: 1.5px solid #cdbca2;
}

.bcg-color3 {
    border: 1.5px solid #517540
}

.bcg-color4 {
    border: 1.5px solid #3d7298;
}

.bcg-color5 {
    border: 1.5px solid #e5e4a3;
}

.bcg-color6 {
    border: 1.5px solid #9a706e;
}

.bcg-sec2 {
    width: 20vw;
    height: 55vh;
    position: absolute;
    z-index: -1;
}

.member-name {
    position: absolute;
    top: 0;
    left: 5vw;
    opacity: 1;
}

.member-name p {
    font-family: 'Jura', sans-serif;
    text-transform: uppercase;
    font-size: 1.3rem;
    display: inline-block;
    text-decoration: none;
    color: black;
    padding: 15px 10px 15px 2px;
    background-color: #49C44F;
}

.member-name p:first-of-type {
    background-color: transparent;
}

.member-description {
    position: relative;
}

@media only screen and (min-width: 320px) and (orientation: landscape) {
    .wraper {
        width: 30vw;
        height: 90vh;
        position: relative;
        top: 0;
        left: 0;
        z-index: 2;
        overflow: hidden;
    }
    .info {
        width: 60%;
    }
    .more-btn {
        display: inline-block;
        text-decoration: none;
        color: black;
        position: relative;
        margin-top: 0;
        left: 50vw;
        top: -40vh;
    }
}

@media only screen and (min-width: 767px) and (orientation:portrait) {
    .content-container {
        margin: 0 auto;
        width: 60vw;
        padding: 5rem 0;
    }
    .wraper {
        width: 60vw;
        height: 60vh;
        position: relative;
        top: 0;
        z-index: 2;
        overflow: hidden;
    }
}

@media only screen and (min-width: 1000px) and (orientation: landscape) {
    .wraper {
        width: 30vw;
        height: 60vh;
        position: relative;
        top: 0;
        left: 0;
        z-index: 2;
        overflow: hidden;
    }
    .more-btn {
        display: inline-block;
        text-decoration: none;
        color: black;
        position: relative;
        margin-top: 0;
        left: 40vw;
        top: -60vh;
    }
}

@media screen and (min-width: 1100px) {
    .more-btn {
        position: absolute;
        top: -5vh;
        left: 20vw;
        width: 50vw;
    }
    .more-btn p {
        font-family: 'Jura', sans-serif;
        text-transform: uppercase;
        font-size: 1rem;
    }
    .more-btn p {
        display: inline-block;
        text-decoration: none;
        color: black;
        padding: 15px 10px 15px 2px;
        background-color: #49C44F;
    }
    .more-btn p:first-of-type {
        background-color: transparent;
    }
    .content-container {
        height: 100%;
        width: 60%;
        margin: 0 auto;
        text-align: justify;
        position: relative;
    }
    .paragraph-content {
        position: relative;
        left: 20vw;
        top: 5vh;
        width: 50vw;
    }
    .paragraph-title h1::before {
        display: inline-block;
        content: "";
        border-top: 1px solid #021E31;
        width: 100px;
        position: absolute;
        left: -120px;
        top: 1.5rem;
    }
    .wraper {
        width: 25vw;
        height: 75vh;
        position: absolute;
        top: 0;
        left: -10vw;
        z-index: 2;
        overflow: hidden;
    }
    .img-bcg {
        background-size: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .bcg-photo {
        width: 2px;
        height: 0;
        position: relative;
        top: 0;
        left: 0;
        z-index: 3;
        background-color: #49C44F;
    }
    .bcg-sec {
        width: 75vw;
        height: 70vh;
        position: absolute;
        top: -7vh;
        left: 0;
        z-index: -1;
    }
    .bcg-sec2 {
        width: 20vw;
        height: 55vh;
        position: absolute;
        z-index: -1;
    }
    .member-name {
        position: absolute;
        top: 0;
        left: 5vw;
        opacity: 1;
    }
    .member-name p {
        font-family: 'Jura', sans-serif;
        text-transform: uppercase;
        font-size: 1.3rem;
        display: inline-block;
        text-decoration: none;
        color: black;
        padding: 15px 10px 15px 2px;
        background-color: #49C44F;
    }
    .member-name p:first-of-type {
        background-color: transparent;
    }
    .member-description {
        position: relative;
        top: 0;
        left: 20vw;
        width: 50vw;
    }
}