* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* font-family: 'Roboto Serif' , serif , 'Roboto', serif; */
}
body {
    overflow-x: hidden;
    max-width: 1920px;
    /* background-color: #dfdede; */
    /* background-color: #CCD3F2; */
}

h1 {
    font-family: 'Roboto serif' , serif;
    font-weight: 500;
}
p,h2,h3,h4 {
    font-family: 'Roboto Flex' , sans-serif;
}

/* ----------navigation---------- */






/* ----------navigation---------- */



header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 90px;
    width: 100%;
    margin: auto;
    position: sticky;
    /* background-color: white; */
    background-color: #272b3b;
    ;
    z-index: 999;
    top: 0;
    font-family: 'Roboto Flex' , sans-serif;
    transition: background-color 300ms ease-in-out;
}
header.scrolled {
    background-color: white;
    /* opacity: .98; */
}

header nav li a {
    opacity: 60%;
}
header.scrolled nav li a {
    color:#272b3b
}
header.scrolled nav li a:hover {
    color:#272b3b
}

header  .logo {
    background-image: url("My Work/Logos/Logo_white.svg");
    opacity: 80%;
    background-position: center;
    background-repeat: no-repeat;
}
header.scrolled .logo {
    background-image: url("My Work/Logos/Logo_blue.svg");
    opacity: 90%;
    background-position: center;
    background-repeat: no-repeat;
}


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    /* position: relative; */
    /* position: absolute;
    right: 0px; */
    width: 90vw;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 2.5px;
}  
.logo { 
    display: flex;
    /* position: absolute;
    left: 0; */
    z-index: 1000;
}
.monogram {
    height: 70px;
}
.nav_links {
    display: flex;
    align-items: flex-start;
    text-transform: uppercase;
    justify-content: flex-end;
    width: 100%;
    position: relative;
    gap: 50px;
}
.nav_menu {
    visibility: hidden;
}
.nav_links li {
    list-style: none;
}

.nav_links li a {
    text-decoration: none;
    color:#ffffff;
    opacity: 60%;
}
.nav_links li a:hover {
    /* color: #272b3b; */
    color: #ffffff;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    /* text-decoration-color: #272b3b; */
    text-decoration-color: #F8CB12;
    opacity: 100%;
}

.yellow_logo {
    height: 80px;
    width: 80px;
    /* background-image: url("My Work/Logos/Logo_blue_highlight.svg"); */
    background-position: center;
    background-repeat: no-repeat;
}
.yellow_logo:hover {
    background-image: url("My Work/Logos/Logo_yellow.svg");
}
.underline {
    color: #272b3b;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    text-decoration-color: #272b3b;
}
.hamburger {
    display: none;
    cursor: pointer;
    transition: 300ms;
}

/* ----------------------About / Contact------------------------ */


footer {
    display: grid;
    margin: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
    column-gap: 1vw;
    flex-wrap: wrap;
    justify-content: center;
}
hr {
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    border: none;
    background-color: #272b3b;
    height: 1.25px;
    opacity: 75%;
}
/* .topline {
    margin-top: 45px;
    margin-bottom: 45px;
} */
.bottomline {
    margin-left: auto;
    margin-right: auto;
    grid-column: 1 / 9;
    border: none;
    background-color: #272b3b;
    height: 1.25px;
    opacity: 75%;
    width: 100%;
}
.intro {
    background-color: #272b3b;
    /* background-color: #ffffff; */
    /* opacity: 30%; */
    background-image: url('My Work/Home_page/Website_Opening_GIF_Blue_Yellow.gif');
    background-size: 100%;
    background-position-y: 35%;
    /* background-image: linear-gradient(to bottom right, #272b3b, #484F69) */
}
.intro_copy {
    grid-column: 1 / 11;
    grid-row: 1;
    /* color: #272b3b; */
    color: #ffffff;
    opacity: 60%;
    margin: 15vw 0;
}
.footer_div {
    background-color: #272b3b;
    /* background-color: #f8ca12; */
    /* background-color: #2f3e5929; */
    margin-top: 5vw;
    /* height: 300px; */
    border-radius: 2rem 2rem 0 0;
}
#about {
    height: 50vw;
    width: 90vw;
    padding-top: 2vh;
    font-size: 7rem;
    letter-spacing: -1.55px;
    line-height: 12rem;
    font-weight: 600;
    /* text-align: center; */
    color: #1e4ca129;
}
#hi {
    font-size: 6rem;
    font-weight: 200;
    line-height: 6rem;
}
#johnson {
    text-align: right;
}
#contact {
    width: 90vw;
    padding-top: 4vw;
    opacity: .9;
    /* padding-bottom: 90px; */
}


.contactme {
    grid-column: 1 / 9;
    grid-row: 3;
    color: #ffffffab; 
    padding-top: 2vw;
    /* padding-bottom: 90px; */
    font-size: 7vw;
    letter-spacing: -1.55px;
}
.contactme_text {
    grid-column: 5 / 8;
    grid-row: 1;
    font-weight: 300;
    font-size: 20px;
    text-align: left;
    line-height: 30px;
    letter-spacing: -.55px;
    color: #ffffffab;
    display: flex;
    align-content: center;

}
.contactme_text p a {
    color: #ffffffab;
    text-decoration: none; 
    font-weight: 500;
    /* text-underline-offset: 0.5em; */
}
.contactme_text p a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    text-decoration-color: #F8CB12;
}
.contactme_text p{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.more_socials {
    position: relative;
    flex-direction: column;
    align-content: center;
    grid-column: 8 / 9;
    grid-row: 1;
    display: flex;
    justify-content: center;
    /* align-content: space-around;
    align-items: baseline; */
}
.social_link {
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 60%;
    font-family: 'Roboto Flex' , sans-serif;
}
.social_link:hover{
    text-decoration: underline;
    text-decoration-color: #F8CB12;
    color: #ffffff;
    opacity: 100%;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;
}
#instagram:hover > #instagram_arrow { 
    opacity: 1;
}
#linkedIn:hover > #linkedIn_arrow { 
    opacity: 1;
}
#email:hover > #email_arrow { 
    opacity: 1;
}

.more_socials img{
    height: 10px;
    padding-right: 10px;
    opacity: 60%;
}
.socials {
    padding: 2px 0;
}


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



/* footer {
    margin: auto;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column-start: 3;
    grid-column-end: 5;
    padding-top: 100px;
    padding-bottom: 40px;
}
.index_socials {
    grid-area: socials;
}
.socials {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 4rem;
    width: 100%;
}

.about_socials {
    grid-column-start: 3;
    grid-column-end: 5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 4rem;
    width: 100%;
    margin-top: 6vw;
}


#insta {
    background-image: url("My Work/About_contact/instagram.svg");
    height: 30px;
    width: 30px;
    background-position: center;
    background-repeat: no-repeat;
}
#insta:hover {
    background-image: url("My Work/About_contact/instagram_yellow.svg");
}
#linkedin {
    background-image: url("My Work/About_contact/Linkedin.svg");
    height: 30px;
    width: 30px;
    background-position: center;
    background-repeat: no-repeat;
}
#linkedin:hover {
    background-image: url("My Work/About_contact/Linkedin_yellow.svg");
}
#thedots {
    background-image: url("My Work/About_contact/The-dots.svg");
    height: 30px;
    width: 30px;
    background-position: center;
    background-repeat: no-repeat;
}
#thedots:hover {
    background-image: url("My Work/About_contact/The-dots_yellow.svg");
} */


/* ----------------------------- THE GRID -------------------------------- */


.work_container {
    /*grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 450px 450px 450px 80px; */
    /* grid-template-areas: 
    "work_adidas work_adidas work_MRLP work_climate"
    "work_days work_nyam work_nyam work_nyam"
    "work_days work_cc work_cc work_popcorn"
    ". socials socials ."; */
    width: 90vw;
    height: 100%;
    margin-top: 15px;
    display: grid;
    margin: auto;
    padding-top: 75px;
    /* margin-top: 20px; */
    grid-auto-flow: row;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 250px 100px);
    column-gap: 20px;
    flex-wrap: wrap;
    /* row-gap: 1.23rem;
    column-gap: 1.23rem; */
}


.work_container a {
    display: block;
}
.work {
    overflow: hidden;
    background-color: #272b3b11;
}
.overlay_container:hover {
    z-index: 1;
    transform: scale(1.05);
    transition: transform 200ms ease-in;
    box-shadow: 0 0px 38px rgba(0,0,0,.3);
}    
.work_image {
    opacity: 90%;
}

.descriptor {
    left: 0;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    text-decoration-line: none;
    color:#262c49;
}
/* .descriptor:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-decoration-color: #272b3b;
} */
.descriptor h1 {
    font-size: 16px;
    font-family: 'Roboto Serif' , serif;
    font-weight: 500;
    /* text-transform: uppercase; 
    letter-spacing: 2px;*/
    transition: letter-spacing 300ms ease-out;
    -webkit-transition: letter-spacing 300ms ease-out;
}
.descriptor p {
    font-size: 16px;
    font-weight: 300;
    color: rgba(37,44,73,.70);
    transition: letter-spacing 300ms ease-out;
    -webkit-transition: letter-spacing 300ms ease-out;
}


#work_LMA {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
    position: relative;
}    
#LMA_image {    
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/LMA_Ripples_Boat.jpg');
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
}
#descriptor_LMA {
    grid-column: 1 / 5;
    grid-row: 4;
}


#work_streamly {
    grid-column: 5 / 7;
    grid-row: 1;
    position: relative;
}
#streamly_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Streamly_Microphone.jpg');
    background-size: cover;
    background-position-y: 10%;
    background-position-x: center;
}
#descriptor_streamly {
    grid-column: 5 / 7;
    grid-row: 2;
}


#work_ICA {
    grid-column: 7 / 9;
    grid-row: 1;
    position: relative;
}
#ICA_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/ICA_Orbs_ALT.jpg');
    background-size: 100%;
    background-position-y: center;
    background-position-x: center;
}
#descriptor_ICA {
    grid-column: 7 / 9;
    grid-row: 2;
}


#work_nyam {
    /* grid-area: work_nyam; */
    grid-column: 5 / 7;
    grid-row: 3;
    position: relative;
}
#nyam_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Nyam.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
#descriptor_nyam {
    grid-column: 5 / 7;
    grid-row: 4;
    
}


#work_adidas {
    /* grid-area: work_adidas; */
    grid-column: 7 / 9;
    grid-row: 3;
    position: relative;
}
#adidas_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Generation.jpg');
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
}
#descriptor_adidas {
    grid-column: 7 / 9;
    grid-row: 4;
}


#work_IIRIS {
    grid-column: 1 / 3;
    grid-row: 5;
    position: relative;
}
#IIRIS_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/IIRIS_Home_datasphere.png');
    background-size: 100%;
    background-position-y: center;
    background-position-x: center;
}
#descriptor_IIRIS {
    grid-column: 1 / 3;
    grid-row: 6;
}


#work_days {
    /* grid-area: work_days; */
    grid-column: 3 / 5;
    grid-row: 5;
    position: relative;
}
#days_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/36daysoftype.svg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;;
}
#descriptor_days {
    grid-column: 3 / 5;
    grid-row: 6;
}



#work_monopoly {
    grid-column: 1 / 3;
    grid-row: 7;
    position: relative;
}
#monopoly_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Monopoly_hero.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
#descriptor_monopoly {
    grid-column: 1 / 3;
    grid-row: 8;
}



#work_pampers_life {
    grid-column: 1 / 3;
    grid-row: 5;
    position: relative;
}
#pampersLife_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Pampers_sustainability.jpg');
    background-position-y: center;
    background-position-x: center;
    background-size: 90%;
}
#descriptor_pampers_life {
    grid-column: 1 / 3;
    grid-row: 6; 
}


#work_pampers_skin {
    grid-column: 3 / 5;
    grid-row: 7;
    position: relative;
}
#pampers_skin_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Pampers_skin.jpg');
    background-size: 80%;
    background-position-x: center;
    background-position-y: center;
}
#descriptor_pampers_skin {
    grid-column: 3 / 5;
    grid-row: 8;
}



#work_climate {
    /* grid-area: work_climate; */
    grid-column: 5 / 9;
    grid-row: 5 / 8;
    position: relative;
}
#climate_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Climate_change_protest/Climatechange_logo.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: 30%;
}
#descriptor_climate {
    grid-column: 5 / 9;
    grid-row: 8;
}


#work_MRLP {
    /* grid-area: work_MRLP; */
    grid-column: 1 / 5;
    grid-row: 9 / 12;
    position: relative;
}
#MRLP_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/MRLP_loonyman.jpg');
    background-size: cover;
    background-position-y: 60%;
}
#descriptor_MRLP {
    grid-column: 1 / 5;
    grid-row: 12;
}



#work_innovation {
    /* grid-area: work_MRLP; */
    grid-column: 5 / 7;
    grid-row: 9;
    position: relative;
}
#innovation_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Innovation_lab_bulb.jpg');
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
}
#descriptor_innovation {
    grid-column: 5 / 7;
    grid-row: 10;
}



#work_gro {
    grid-column: 7 / 9;
    grid-row: 9;
    position: relative;
}
#gro_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Gro_Energy.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: 30%;
}
#descriptor_gro {
    grid-column: 7 / 9;
    grid-row: 10;
}



#work_popcorn {
    /* grid-area: work_popcorn; */
    grid-column: 5 / 7;
    grid-row: 11;
    position: relative;
}
#popcorn_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/Popcorn_dark.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: 25%;
}
#descriptor_popcorn {
    grid-column: 5 / 7;
    grid-row: 12;
}



#work_cc {
    /* grid-area: work_cc; */
    grid-column: 7 / 9;
    grid-row: 11;
    position: relative;
}
#cc_image {
    grid-column: 1 / 2;
    grid-row: 1;
    background-image: url('My Work/Home_page/cc_awards_2019.jpg');
    background-size: cover;
    background-position-x: right;
    background-position-y: center;
}
#descriptor_cc {
    grid-column: 7 / 9;
    grid-row: 12;
}





/* --------------------Overlaying--------------------- */


.overlay_container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    color: white;
    text-align: left;
    transition: opacity 200ms ease-in-out;
    -webkit-transition: opacity 200ms ease-in-out;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
/* .overlay_container h1 {
    font-size: 1.2rem;
    font-weight: 700;
    width: 20vw;
    margin: auto;
    line-height: 1.6rem;
    transition: opacity 200ms ease-in-out;
    -webkit-transition: opacity 200ms ease-in-out;
}
.overlay_container p {
    font-size: .9rem;
    font-weight: normal;
    width: 90%;
    margin: auto;
    line-height: 1.2rem;
    margin-left: 1.5rem;
    transition: opacity 200ms ease-in-out;
    -webkit-transition: opacity 200ms ease-in-out;
} */
.overlay_container:hover .overlayinfo{
    opacity: 100%;
    top: 0%;
    transition: opacity 200ms ease-in-out;
    -webkit-transition: opacity 200ms ease-in-out;
}
.overlay_container:hover .overlay{
    background-color: #272b3b;
    opacity: 70%;
    mix-blend-mode: multiply;
    transition: opacity 200ms ease-in-out;
    -webkit-transition: opacity 200ms ease-in-out;
    /*outline: 10px solid #fed114;
     outline-offset: -20px; */
} 
.overlay {
    width: 100%;
    height: 100%;
    position: relative;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    -webkit-transition: 200ms ease-in-out;
    grid-column: 1 / 2;
    grid-row: 1;
    /* background-color: #272b3b; */
}
.overlayinfo {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0%;
    transition: opacity 200ms ease-in-out;
    -webkit-transition: opacity 200ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


/* --------Descriptors--------- */


#work_LMA:hover ~ #descriptor_LMA h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_LMA:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_LMA:hover ~ #descriptor_LMA p {
    /* font-weight: 400; */
    color:#272b3b;
    letter-spacing: .3px;
}
#descriptor_LMA:hover p {
    /* font-weight: 400; */
    color:#272b3b;
    letter-spacing: .3px;
}

#work_streamly:hover ~ #descriptor_streamly h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_streamly:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_streamly:hover ~ #descriptor_streamly p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_streamly:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_ICA:hover ~ #descriptor_ICA h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_ICA:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_ICA:hover ~ #descriptor_ICA p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_ICA:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_IIRIS:hover ~ #descriptor_IIRIS h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_IIRIS:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_IIRIS:hover ~ #descriptor_IIRIS p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_IIRIS:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}


#work_adidas:hover ~ #descriptor_adidas h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_adidas:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_adidas:hover ~ #descriptor_adidas p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_adidas:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_MRLP:hover ~ #descriptor_MRLP h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_MRLP:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_MRLP:hover ~ #descriptor_MRLP p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_MRLP:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_innovation:hover ~ #descriptor_innovation h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_innovation:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_innovation:hover ~ #descriptor_innovation p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_innovation:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_climate:hover ~ #descriptor_climate h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_climate:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_climate:hover ~ #descriptor_climate p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_climate:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_days:hover ~ #descriptor_days h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_days:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_days:hover ~ #descriptor_days p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_days:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_pampers_life:hover ~ #descriptor_pampers_life h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_pampers_life:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_pampers_life:hover ~ #descriptor_pampers_life p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_pampers_life:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_nyam:hover ~ #descriptor_nyam h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_nyam:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;

}
#work_nyam:hover ~ #descriptor_nyam p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_nyam:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_pampers_skin:hover ~ #descriptor_pampers_skin h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_pampers_skin:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_pampers_skin:hover ~ #descriptor_pampers_skin p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_pampers_skin:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_monopoly:hover ~ #descriptor_monopoly h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_monopoly:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_monopoly:hover ~ #descriptor_monopoly p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_monopoly:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_cc:hover ~ #descriptor_cc h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_cc:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_cc:hover ~ #descriptor_cc p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_cc:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_popcorn:hover ~ #descriptor_popcorn h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_popcorn:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_popcorn:hover ~ #descriptor_popcorn p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_popcorn:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}

#work_gro:hover ~ #descriptor_gro h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#descriptor_gro:hover h1 {
    /* font-weight: 600; */
    letter-spacing: .3px;
}
#work_gro:hover ~ #descriptor_gro p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}
#descriptor_gro:hover p {
    /* font-weight: 400; */
    letter-spacing: .3px;
    color:#272b3b;
}


/* --------------------- */


#LMAlogo img {
    width: 12rem;
    height: auto;
    position: relative;
}

#streamlylogo img {
    width: 10rem;
    height: auto;
    position: relative;
}

#ICAlogo img {
    width: 10rem;
    height: auto;
    position: relative;
}

#IIRISlogo img {
    width: 5rem;
    height: auto;
    position: relative;
}

#adidaslogo img {
    width: 12rem;
    height: auto;
    position: relative;
}

#innovationlogo img {
    width: 13rem;
    height: auto;
    position: relative;
}

#MRLPlogo img{
    width: 10rem;
    height: auto;
    position: relative;
}
#adidas_logo_phone {
    display: none;
}

#climatelogo img {
    width: 10rem;
    height: auto;
    position: relative;   
}

#dayslogo img {     
    width: 6rem;
    height: auto;    
    position: relative;
}

#pamperslogo img {
    width: 8rem;
    height: auto;    
    position: relative;
}

#nyamlogo img {     
    width: 12rem;
    height: auto;    
    position: relative;
}

#monopolylogo img {
    width: 12rem;
    height: auto;    
    position: relative;
}

#cclogo img {     
    width: 6rem;
    height: auto;    
    position: relative;
}

#popcornlogo img{
    width: 6rem;
    height: auto;    
    position: relative;
}

#canarylogo img {
    width: 10rem;
    height: auto;    
    position: relative;
}




/* -------  1500px ------- */


@media only screen and (max-width: 1500px){
    
    .body {
        max-width: 1500px;
    }
    #about {
        font-size: 6.5rem;
        line-height: 11rem;
    }


}


/* -------  1220px ------- */


@media only screen and (max-width: 1220px){
    
    .body {
        max-width: 1220px;
    }
    #about {
        font-size: 8vw;
        line-height: 14vw;
        height: 60vw;
    }
    #hi {
        font-size: 7vw;
        line-height: 8vw; 
    }

}



/* -------  1080px ------- */


@media only screen and (max-width: 1080px){
    
    .body {
        max-width: 1080px;
    }
    .work_container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, 300px 50px);
        row-gap: 2vw;
    }
    .descriptor {
        margin-top: 0px;
    }
    .descriptor p {
        font-size: .9rem;
    }
    .descriptor h1 {
        font-size: .9rem;
    }

    #work_LMA {
        grid-column: 1 / 2;
        grid-row: 1;
    }    
    #descriptor_LMA {
        grid-column: 1 / 2;
        grid-row: 2;
    }
    
    #work_streamly {
        grid-column: 2 / 3;
        grid-row: 1;
    }
    #descriptor_streamly {
        grid-column: 2 / 3;
        grid-row: 2;
    }
    
    
    #work_ICA {
        grid-column: 1 / 2;
        grid-row: 3;
    }
    #descriptor_ICA {
        grid-column: 1 / 2;
        grid-row: 4;
    }
    

    #work_nyam {
        grid-column: 2 / 3;
        grid-row: 3;
    }
    #descriptor_nyam {
        grid-column: 2 / 3;
        grid-row: 4;
        
    }


    #work_adidas {
        grid-column: 1 / 2;
        grid-row: 5;
    }
    #descriptor_adidas {
        grid-column: 1 / 2;
        grid-row: 6;
    }


    #work_IIRIS {
        grid-column: 2 / 3;
        grid-row: 5;
    }
    #descriptor_IIRIS {
        grid-column: 2 / 3;
        grid-row: 6;
    }
    
    
    #work_days {
        grid-column: 1 / 2;
        grid-row: 7;

    }
    #descriptor_days {
        grid-column: 1 / 2;
        grid-row: 8;
    }


    #work_monopoly {
        grid-column: 2 / 3;
        grid-row: 7;
    }
    #descriptor_monopoly {
        grid-column: 2 / 3;
        grid-row: 8;
    }


    #work_pampers_skin {
        grid-column: 1 / 2;
        grid-row: 9;
    }
    #descriptor_pampers_skin {
        grid-column: 1 / 2;
        grid-row: 10;
    }


    #work_climate {
        grid-column: 2 / 3;
        grid-row: 9;
    }
    #descriptor_climate {
        grid-column: 2 / 3;
        grid-row: 10;
    }


    #work_MRLP {
        grid-column: 1 / 2;
        grid-row: 11;
    }
    #descriptor_MRLP {
        grid-column: 1 / 2;
        grid-row: 12;
    }
    

    #work_innovation {
        grid-column: 2 / 3;
        grid-row: 11;
    }
    #descriptor_innovation {
        grid-column: 2 / 3;
        grid-row: 12;
    }
    
    
    #work_gro {
        grid-column: 1 / 2;
        grid-row: 13;
    }
    #descriptor_gro {
        grid-column: 1 / 2;
        grid-row: 14;
    }
    
    
    #work_popcorn {
        grid-column: 2 / 3;
        grid-row: 13;
    }
    #descriptor_popcorn {
        grid-column: 2 / 3;
        grid-row: 14;
    }
    

    #work_cc {
        grid-column: 1 / 2;
        grid-row: 15;
    }
    #descriptor_cc {
        grid-column: 1 / 2;
        grid-row: 16;
    }
    
    
    
    
    


    .contactme_text {
        font-size: 1rem;
    }
    .social_link {
        font-size: .55rem;
    }
}



/* -------  920px ------- */



@media only screen and (max-width: 920px){

    .body {
        max-width: 920px;
    }

    .logo {
        
    }
    .hamburger {
        display: block;
        opacity: 100%;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
        transform: translateY(10px) rotate(45deg);
        background-color: #262c49;
        transition: 300ms;
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-10px) rotate(-45deg);
        background-color: #262c49;
        transition: 300ms;
    }
    
    .nav_links {
        visibility: hidden;
    }
    .nav_menu {
        position: fixed;
        display: flex;
        justify-content: space-evenly;
        visibility: visible;
        right: -150%;
        top: 0;
        gap: 0;
        height: 80vh;
        width: 100%;
        background-color: #F8CB12;
        text-align: left;
        flex-direction: column;
        transition: all 500ms ease-in-out;
        text-transform: uppercase;
        padding-left: 4vw;
        padding-top: 40vh;
    }
    .nav_menu_links {
        display: flex;
        justify-content: space-between;
    }
    .nav_menu a{
        font-size: 6vw;
        font-weight: 400;
        line-height: 5vw;
        color: #262c49;
        text-decoration: none;
        transition: letter-spacing 300ms ease-out;
        -webkit-transition: letter-spacing 300ms ease-out;
    }
    .nav_menu li {
        list-style: none;
    }
    .nav_menu li a:hover {
        /* color: #272b3b; */
        color: #262c49;
        text-decoration: underline;
        text-decoration-thickness: 4px;
        text-underline-offset: 7px;
        /* text-decoration-color: #272b3b; */
        text-decoration-color: #262c49;
        opacity: 100%;
        letter-spacing: 5px;
    }
    .nav_menu.active {
        right: 0;
    }
    .bar {
        display: block;
        width: 30px;
        height: 3px;
        margin: 7px auto;
        -webkit-transition: all 300ms ease-in-out;
        background-color: #ffffff;
        opacity: 60%;
    }
    header.scrolled .bar {
        background-color: #262c49;
        opacity: 1;
    }

    .work_container {
        margin-top: 0px;
        grid-template-rows: repeat(8, 45vw 50px);
    }  

    .descriptor {
        margin-top: 0;
    }

    #LMAlogo img {
        width: 18vw;
    }
    #ICAlogo img {
        width: 20vw
    }
    #nyamlogo img {     
        width: 25vw 
    }
    #adidaslogo img {
        width: 28vw;
    }
    #IIRISlogo img {
        width: 12vw;
    }
    #dayslogo img {
        width: 15vw;
    }
    #monopolylogo img {
        width: 30vw;
    }
    #pamperslogo img {
        width: 20vw;
    }
    #climatelogo img {
        width: 16vw;
    }
    #innovationlogo img {
        width: 30vw;
    }
    #MRLPlogo img {
        width: 15vw;
    }
    #canarylogo img {
        width: 24vw;
    }
    #popcornlogo img {
        width: 17vw;
    }
    #cclogo img {
        width: 15vw;
    }

    .nav_links li {
        font-size: .7rem;
    }
    .yellow_logo {
        height: 60px;
        width: 60px;
    }
    .yellow_logo:hover {
        height: 60px;
        width: 60px;
    }


    .contactme_text {
        grid-column: 1 / 7;
        grid-row: 2;
    }
    .more_socials {
        grid-column: 7 / 9;
        grid-row: 1 / 3;
        justify-content: space-evenly;
    }    

}


/* -----------600px------------- */

@media only screen and (max-width: 600px){

    .body {
        max-width: 720px;
    }

    header {
        height: 17vw;  
    }
    .nav_links {
        gap: 15px;
    }
    .nav_links li{
        font-size: 9px;
    }

    #about {
        text-align: right;
    }
    #hi {
        text-align: left;
    }

    .work_container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(15, 70vw 15vw);
        row-gap: 2.5vw;
    }
    .descriptor h1 {
        font-size: 14px;
        line-height: 17px;
    }
    .descriptor p {
        font-size: 14px;
        line-height: 17px;
    }

    #work_LMA {
        grid-column: 1 / 3;
        grid-row: 1;
    }    
    #descriptor_LMA {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    
    #work_streamly {
        grid-column: 1 / 3;
        grid-row: 3;
    }
    #descriptor_streamly {
        grid-column: 1 / 3;
        grid-row: 4;
    }
    
    
    #work_ICA {
        grid-column: 1 / 3;
        grid-row: 5;
    }
    #descriptor_ICA {
        grid-column: 1 / 3;
        grid-row: 6;
    }
    

    #work_nyam {
        grid-column: 1 / 3;
        grid-row: 7;
    }
    #descriptor_nyam {
        grid-column: 1 / 3;
        grid-row: 8;
        
    }


    #work_adidas {
        grid-column: 1 / 3;
        grid-row: 9;
    }
    #descriptor_adidas {
        grid-column: 1 / 3;
        grid-row: 10;
    }


    #work_IIRIS {
        grid-column: 1 / 3;
        grid-row: 11;
    }
    #descriptor_IIRIS {
        grid-column: 1 / 3;
        grid-row: 12;
    }
    
    
    #work_days {
        grid-column: 1 / 3;
        grid-row: 13;

    }
    #descriptor_days {
        grid-column: 1 / 3;
        grid-row: 14;
    }


    #work_monopoly {
        grid-column: 1 / 3;
        grid-row: 15;
    }
    #descriptor_monopoly {
        grid-column: 1 / 3;
        grid-row: 16;
    }


    #work_pampers_skin {
        grid-column: 1 / 3;
        grid-row: 17;
    }
    #descriptor_pampers_skin {
        grid-column: 1 / 3;
        grid-row: 18;
    }


    #work_climate {
        grid-column: 1 / 3;
        grid-row: 19;
    }
    #descriptor_climate {
        grid-column: 1 / 3;
        grid-row: 20;
    }


    #work_MRLP {
        grid-column: 1 / 3;
        grid-row: 21;
    }
    #descriptor_MRLP {
        grid-column: 1 / 3;
        grid-row: 22;
    }
    

    #work_innovation {
        grid-column: 1 / 3;
        grid-row: 23;
    }
    #descriptor_innovation {
        grid-column: 1 / 3;
        grid-row: 24;
    }
    
    
    #work_gro {
        grid-column: 1 / 3;
        grid-row: 25;
    }
    #descriptor_gro {
        grid-column: 1 / 3;
        grid-row: 26;
    }
    
    
    #work_popcorn {
        grid-column: 1 / 3;
        grid-row: 27;
    }
    #descriptor_popcorn {
        grid-column: 1 / 3;
        grid-row: 28;
    }
    

    #work_cc {
        grid-column: 1 / 3;
        grid-row: 29;
    }
    #descriptor_cc {
        grid-column: 1 / 3;
        grid-row: 30;
    }


    #LMAlogo img {
        width: 25vw;
        
    }
    
    #streamlylogo img {
        width: 38vw;
        
    }
    
    #ICAlogo img {
        width: 35vw;
        
    }

    #nyamlogo img {     
        width: 45vw;
        
    }

    #adidaslogo img {
        width: 50vw;
        
    }

    #IIRISlogo img {
        width: 20vw;
        
    }
    
    #dayslogo img {     
        width: 25vw;
        
    }

    #monopolylogo img {
        width: 55vw;
        
    }

    #pamperslogo img {
        width: 35vw;
    
    }
    
    #MRLPlogo img{
        width: 25vw;
        
    }

    #innovationlogo img {
        width: 55vw;
        
    }
    
    #canarylogo img {
        width: 40vw;
    }
    
    #climatelogo img {
        width: 22vw;
           
    }
    
    #popcornlogo img{
        width: 22vw;
        
    }
    
    #cclogo img {     
        width: 22vw;
        
    }
    


    footer {
        grid-template-columns: repeat(5, 1fr);
    }
    
    
    .contactme {
        grid-column: 1 / 5;
        font-size: 5vw;
    }
    .contactme_text {
        grid-column: 1 / 5;
        font-size: 11px;
        line-height: 17px;
    }
    .social_link {
        font-size: 8px;
        line-height: 14px;
    }
    .more_socials {
        grid-column: 4 / 6;
        grid-row: 1 / 3;
        justify-content: space-between;
        padding-top: 3vw;

    }
    .more_socials img {
        height: 8px;
    }
    .socials {
        padding: 0;
    }
}