body {
    margin: 0;
    width: 100%;
    height: auto;
    background-color: #141414; 
}

.header {
    width: 100%;
    height: 18vh;
}

.space-header {
    width: 15%;
    height: 130px;
    float: left;
}

.logo {
    width: 68%;
    height: 18vh;
    float: left;
}

img#logo {
    width:100%;
    height:auto;
}

.menu {
    width: 15%;
    height: 18vh;
    float: left;
}

.menu ul li{
    font-size: 1.5vw;
    color: #fff;
    font-family: "owners", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-align: right;
    list-style: none;
    text-decoration: none;
    padding: 8px 40px 0 0;
}

#work:hover, #about:hover, #talk:hover {
    color: #FFFF00;
}

p {
    font-family: "owners-wide", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .1vw;
    color: #fff;
}

/* INDEX */

.website-body {
    width: 100%;
    height: auto;
}

.website-body .body-1 {
    width: 70%;
    height: 34vh;
    margin: 20px auto 10px auto;
}

.website-body .body-1 .work-1 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
}

.work-1 #one {
    width: 100%;
    height: auto;
}

.website-body .body-1 .work-2 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
}

.work-2 #two {
    width: 100%;
    height: auto;
}

.website-body .body-1 .work-3 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0;
}

.work-3 #three {
    width: 100%;
    height: auto;
}

.website-body .body-2 {
    width: 70%;
    height: 34vh;
    margin: 20px auto 10px auto;
}

.website-body .body-2 .work-4 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
}

.work-4 #four {
    width: 100%;
    height: auto;
}

.website-body .body-2 .work-5 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
}

.work-5 #five {
    width: 100%;
    height: auto;
}

.website-body .body-2 .work-6 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0;
}

.work-6 #six {
    width: 100%;
    height: auto;
}

/*
.website-body .body-3 {
    width: 70%;
    height: 34vh;
    margin: 20px auto 10px auto;
    border: 2px solid #000;
}

.website-body .body-3 .work-7 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
    border: 2px dotted #fb4e79;
}
.website-body .body-3 .work-8 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
    border: 2px dotted #fb4e79;
}

.website-body .body-3 .work-9 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0;
    border: 2px dotted #fb4e79;
}

.website-body .body-4 {
    width: 70%;
    height: 34vh;
    margin: 20px auto 10px auto;
    border: 2px solid #000;
}

.website-body .body-4 .work-10 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
    border: 2px dotted #fb4e79;
}
.website-body .body-4 .work-11 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
    border: 2px dotted #fb4e79;
}

.website-body .body-4 .work-12 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0;
    border: 2px dotted #fb4e79;
}

.website-body .body-5 {
    width: 70%;
    height: 34vh;
    margin: 20px auto 10px auto;
    border: 2px solid #000;
}

.website-body .body-5 .work-13 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
    border: 2px dotted #fb4e79;
}
.website-body .body-5 .work-14 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
    border: 2px dotted #fb4e79;
}

.website-body .body-5 .work-15 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0;
    border: 2px dotted #fb4e79;
}

.website-body .body-6 {
    width: 70%;
    height: 34vh;
    margin: 20px auto 10px auto;
    border: 2px solid #000;
}

.website-body .body-6 .work-16 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
    border: 2px dotted #fb4e79;
}
.website-body .body-6 .work-17 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0 14px 0 0;
    border: 2px dotted #fb4e79;
}

.website-body .body-6 .work-18 {
    width: 32%;
    height: 34vh;
    float: left;
    margin: 0;
    border: 2px dotted #fb4e79;
}
*/

/* ABOUT */ 

.about-body {
    width: 100%;
    height: 80vh;
    float: left;
}

.about-body .space-left {
    width: 15%;
    height: 79vh;
    float: left;
}

.about-body .about {
    width: 70.5%;
    height: auto;
    float: left;
    margin: auto;
}

.about-body .about .about-photo {
    width: 32%;
    height: auto;
    float: left;
    margin: 20px 0 0 30px;
}

.about-body .about-photo #me {
    width: 100%;
    height: auto;
    margin-top: 8%;
}


.about-body .about .about-text {
    width: 55%;
    height: 63vh;
    float: left;
    margin: 35px 20px 0 40px;
    padding: 25px 15px 45px 15px;
    letter-spacing: 300px;
}

.about-body .space-right {
    width: 13%;
    height: 79vh;
    float: left;
}

/* TALK */ 

.talk-body {
    width: 100%;
    height: 76vh;
    float: left;
}

.talk-body .space-left {
    width: 29%;
    height: 80vh;
    float: left;
}

.talk-body .space-left img#line-left {
    width: 110%;
    height: auto;
    float: left;
}

.talk-body .contact {
    width: 41%;
    height: 71vh;
    float: left;
    margin: 30px 0 0 0;
}

.talk-body .contact .contact-top {
    width: 100%;
    height: 15vh;
    float: left;
    margin: 10px 0 0 0;
}

.talk-body .contact .my-contact {
    width: 100%;
    height: 51vh;
    float: left;
    margin: 0 0 0 0;
}

.talk-body .contact .my-contact p.socials {
    font-size: 1.5vw;
    color: #ffff00;
    font-family: "owners", sans-serif;
    font-weight: 800;
    font-style: normal;
    line-height: 100%;
    text-align: center;
    text-decoration: none;
}

#email, #insta {
    color: #fff;
}

#email:hover, #insta:hover {
    color: #Ffff00;
}

#email:visited, #insta:visited {
    color: #fff;
}

.talk-body .space-right {
    width: 29%;
    height: 80vh;
    float: left;
}

.talk-body .space-right img#line-right {
    width: 91%;
    height: auto;
    float: left;
    margin: 0 0 0 20px;
}

/* WORKS */ 

.inner-body {
    width: 100%;
    height: 200vh;
    float: left;
}

.inner-body .space-left {
    width: 15%;
    height: 200vh;
    float: left;
}

.inner-body .title {
    width: 100%;
    height: 7vh;
    float: left;
    margin: 30px 0 0 0;
}

p.work-titles {
    font-size: 3vw;
    color: #fff;
    font-family: "owners", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-align: center;
    margin: 0;
}

.inner-body .medium {
    width: 100%;
    height: 4vh;
    float: left;
}

p.subtitle {
    font-size: 1.5vw;
    color: #fff;
    font-family: "owners-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    letter-spacing: .1vw;
    margin: 0;
}

.inner-body .description {
    width: 100%;
    height: auto;
    float: left;
    margin: 10px 0 20px 0;
}

.description .description-left {
    width: 14%;
    height: 10vh;
    float: left;
}

.inner-body .description .work-description {
    width: 70%;
    height: auto;
    float: left;
    margin: 0;
}

.description .description-right {
    width: 14%;
    height: 10vh;
    float: left;
}

.inner-body .work {
    width: 68%;
    height: auto;
    float: left;
    margin: 0;
}

.inner-body .work .work-photo {
    width: 100%;
    height: auto;
    float: left;
    margin: 5px 0 0 0;
}

.work-photo img.work-large {
    width: 100%;
    height: auto;
}

.inner-body .caption {
    width: 100%;
    height: auto;
    float: left;
    margin: 0 0 20px 0;
}

.caption .caption-left {
    width: 10%;
    height: 10vh;
    float: left;
}

.inner-body .caption .work-caption {
    width: 80%;
    height: auto;
    float: left;
    margin: 0;
}

.caption .caption-right {
    width: 8.5%;
    height: 10vh;
    float: left;
}

.inner-body .work .multi-photos {
    width: 100%;
    height: 59vh;
    float: left;
}

.inner-body .work .multiphotos-big {
    width: 100%;
    height: auto;
    float: left;
    margin: 20px 0 40px 0;
}

.multiphotos-big img.collage {
    width: 100%;
    height: auto;
}

.inner-body .work .multiphotos-big2 {
    width: 100%;
    height: auto;
    float: left;
    margin: 20px 0 40px 0;
}

.multiphotos-big2 img.collage-2 {
    width: 100%;
    height: auto;
}

.inner-body .space-right {
    width: 16%;
    height: 200vh;
    float: left;
}

.bottom-space {
    width: 100%;
    height: 10vh;
    float: left;
}


@media only screen and (max-width:1000px) {
   
    img#logo {
        width:100%;
        margin: 20px 0 0 0;
    }

    .menu {
        width: 15%;
        height: 130px;
        float: left;
    }
    
    .menu ul li{
        font-size: 1.58vw;
        padding: 8px 10px 0 0;
    }
    /* INDEX */
    .website-body .body-1 {
        height: 23vh;
        margin: 20px auto 10px auto;
    }

    .website-body .body-1 .work-1 {
        margin: 0 10px 0 0;
    }

    .work-1 #one {
        width: 100%;
        height: auto;
    }

    .website-body .body-1 .work-2 {
        margin: 0 10px 0 0;
    }

    .website-body .body-2 {
        width: 70%;
        height: 23vh;
        margin: 20px auto 10px auto;
    }

    .website-body .body-2 .work-4 {
        margin: 0 10px 0 0;
    }

    .website-body .body-2 .work-5 {
        margin: 0 10px 0 0;
    }
    /* ABOUT */ 
    .about-body {
        height: 125vh;
    }

    .about-body .space-left {
        height: 125vh;
    }

    .about-body .about {
        width: 68%;
    }

    .about-body .about .about-photo {
        width: 100%;
        height: 60vh;
        float: none;
        display: block;
        margin: 0;
        background-image: url("../images/me-tablet.jpg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .about-body .about-photo #me {
        width: 0;
    }


    .about-body .about .about-text {
        width: 100%;
        height: 55vh;
        float: none;
        display: block;
        margin: 0;
        padding: 0;
        letter-spacing: 300px;
    }

    .about-body .space-right {
        height: 125vh;
    }
    /* TALK */ 
    
    .talk-body .space-left {
        background-image: url("../images/talk-left.png");
        background-size: 130%;
        background-repeat: no-repeat;
    }
    
    .talk-body .space-left img#line-left {
        width: 0;
    }
    
    
    .talk-body .contact .my-contact p.socials {
        font-size: 1.9vw;
    }
    
    .talk-body .space-right {
        background-image: url("../images/talk-right.png");
        background-size: 107%;
        background-repeat: no-repeat;
    }
    
    .talk-body .space-right img#line-right {
        width: 0;
    }

    /* WORKS */
      .inner-body .caption {
        width: 100%;
        height: auto;
        float: left;
        margin: 0 0 20px 0;
    }

    .caption .caption-left {
        width: 9%;
    }
}

@media only screen and (max-width:800px) {
    img#logo {
        margin: 30px 0 0 0;
    }

    .menu ul li{
        font-size: 1.4vw;
        padding: 10px 0 0 0;
    }
    /* INDEX */
    .website-body .body-1 {
        height: auto;
    }
    
    .website-body .body-1 .work-1 {
        width: 100%;
        height: auto;
        float: none;
        display: block;
        margin: 0 14px 25px 0;
    }
    
    .website-body .body-1 .work-2 {
        width: 100%;
        height: auto;
        float: none;
        display: block;
        margin: 0 14px 25px 0;
    }
    
    .website-body .body-1 .work-3 {
        width: 100%;
        height: auto;
        float: none;
        display: block;
        margin: 0 14px 0 0;
    }

    .website-body .body-2 {
        width: 70%;
        height: auto;
    }
    
    .website-body .body-2 .work-4 {
        width: 100%;
        height: auto;
        float: none;
        display: block;
        margin: 0 14px 25px 0;
    }
    
    .website-body .body-2 .work-5 {
        width: 100%;
        height: auto;
        float: none;
        display: block;
        margin: 0 14px 25px 0;
    }

    .website-body .body-2 .work-6 {
        width: 100%;
        height: auto;
        float: none;
        display: block;
        margin: 0 14px 10px 0;
    }

    /* ABOUT */ 
    .about-body .about .about-photo {
        height: 46vh;
    }
}