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

h1 {
    font-family: 'Roboto serif' , serif;
    font-weight: 400;
}
h2 {
    font-family: 'Roboto flex' , sans-serif;
    font-weight: 400;
}
h4 {
    font-family: 'Roboto serif' , serif;
    font-weight: 400;
}
p {
    font-family: 'Roboto serif' , serif;
}


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



header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 90px;
    width: 100%;
    margin: auto;
    position: sticky;
    /* background-color: white; */
    background-color: #ffffff;
    z-index: 999;
    top: 0;
    font-family: 'Roboto Flex' , sans-serif;
}
header nav li a {
    opacity: 60%;
}
.nav_menu {
    visibility: hidden;
}
nav {
    display: flex;
    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;
}
.nav_links {
    display: flex;
    align-items: flex-start;
    text-transform: uppercase;
    justify-content: flex-end;
    width: 100%;
    position: relative;
    gap: 50px;
}
.nav_links li {
    list-style: none;
}

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

.yellow_logo {
    height: 80px;
    width: 80px;
    background-image: url("My Work/Logos/Logo_blue.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;
}


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

/* 
footer {
    margin: auto;
    width: 400px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / 7;
}
.socials {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    width: 100%;
    grid-column-start: 4;
    grid-column-end: 6;
    padding-bottom: 100px;
}
#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");
} */


/* -------------------------My Work------------------------- */


.portfolio_container {
    width: 100%;
    height: 100%;
    display: grid;
    margin: auto;
    grid-template-columns: repeat(10,1fr);
    row-gap: 2vw;
    column-gap: 2vw;
    overflow-x: visible;
    margin: 7vw 0 0 0;
}
.opening {
    grid-column: 1 / 7;
    height: 50vw;
}

.project_info {
    grid-column: 2 / 8;
    grid-row: 1;
    width: 100%;
    margin-top: 0;
    margin-bottom: 5vw;
    background-color: white;
}
.project_info h1 {
    font-weight: 400;
    font-size: 36px;
    line-height: 42px;
    text-align: left;
}
.project_info h2 {
    grid-column: 1 / 3;
    grid-row: 1;    
    margin-top: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.95px;
    text-transform: uppercase;
    padding-bottom: 20px;
}
.project_info p {
    font-size: 16px;
    font-weight: 200;
    line-height: 30px;
    padding-top: 15px;
}
h3 {
    font-family: 'Roboto flex' , sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    grid-column: 2 / 4;
    margin: 2vw 0;
    color:#272b3b;
    opacity: 70%;
}

.video_size {
   width: 100%;
   height: 45vw;
}
.video {
    grid-column: 3 / 9;
    /* height: 43vw; */
    /* margin: 20px 0; */
    width: 100%;
}
#top_video {
    margin-top: -5vw;
}


/* -----------------LMA------------------ */


#LMA_hero {
    background-image: url('My Work/LMA/LMA_Billboard.jpg');
    background-size: 105%;
    background-position-x: 90%;
    background-position-y: center;
}
#LMA_brand_assets {
    grid-column: 2 / 10;
    width: 100%;
}
#LMA_strapline {
    grid-column: 1 / 11;
    width: 100%;  
}
#LMA_carousel {
    margin-top: -2.5vw;
}


/* -----------------Streamly------------------ */


#streamly_hero {
    background-image: url('My Work/Streamly/Streamly_opening_Lauren_LR.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
#streamly_billboard {
    grid-column: 1 / 11;
    width: 100%;
}
#streamly_ui {
    grid-column: 1 / 11;
    width: 100%;
}
#streamly_assets {
    grid-column: 1 / 9;
    width: 100%;
    margin-top: 5vw;
}
#streamly_gif {
    grid-column: 2 / 6;
    width: 100%;
    margin-top: 5vw;
}
#streamly_phone {
    grid-column: 6 / 10;
    width: 100%;
    margin-top: 5vw;
}



/* -----------------ICA------------------ */


#ICA_hero {
    background-image: url('My Work/IC_Academy/IC_Academy_HERO_opt3.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
#ICA_billboard {
    grid-column: 2 / 10;
    width: 100%;
    margin-top: 5vw;
}
#ICA_social {
    grid-column: 3 / 9;
    width: 100%;
    margin-top: 5vw;
}
#ICA_brochure {
    grid-column: 1 / 11;
    width: 100%;
}


/* -----------------NYAM------------------ */


#nyam_hero {
    background-image: url('My Work/Nyam/Nyam_logo.svg');
    background-size: cover;
    background-position: center;
}
#nyam_streetfood {
    grid-column: 1 / 11;
    width: 100%;
}
#nyam_translation {
    grid-column: 1 / 11;
    width: 100%;
}
#nyam_trolley {
    grid-column: 2 / 10;
    width: 100%;
    margin-top: 5vw;
}
#nyam_underground {
    grid-column: 2 / 10;
    width: 100%;
    margin-top: 5vw;
}


/* -----------------Generation adidas------------------ */


#adidas_hero {
    background-image: url('My Work/Generation_adidas/Generation_Logo.svg');
    background-size: cover;
    background-position: center;
}
#london_energy {
    grid-column: 1 / 11;
    width: 100%;
}
#dance {
    grid-column: 1 / 11;
    width: 100%;
}
#eband {
    width: 100%;
    grid-column: 2 / 10;
    margin-bottom: 5vw;
}
#floodlights {
    grid-column: 1 / 11;
    width: 100%;
}


/* -----------------IIRIS------------------ */


#IIRIS_hero {
    background-image: url('My Work/IIRIS/IIRIS_Background_02.png');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
#IIRIS_cards {
    grid-column: 1 / 11;
    width: 100%;
    margin-top: 5vw;
}
#IIRIS_icons {
    grid-column: 3 / 9;
    width: 100%;
    margin-top: 5vw;
}
#IIRIS_events {
    grid-column: 1 / 11;
    width: 100%;
}


/* -----------------36days------------------ */


#days_hero {
    background-image: url('My Work/36days/36days_logo.svg');
    background-size: cover;
    background-position: center;
}
#deathly_hallows {
    grid-column: 1 / 11;
    width: 100%;
}


/* ---------------Monopoly Doodle---------------- */


#Monopoly_hero {
    background-image: url('My Work/Monopoly/Google_Doodle_Hero.jpg');
    background-size: cover;
    background-position: center;
}
#Monopoly_doodle {
    grid-column: 1 / 11;
    width: 100%;
}


/* ----------------Pampers Skin---------------- */


#pampers_skin_hero {
    background-image: url('My Work/Pampers_Skin/Pampers_skin_hero.jpg');
    background-size: cover;
    background-position: center;
}
#pampers_sleep_story {
    grid-column: 4 / 11;
    margin: 2vw 0;
}
#pampers_infographics {
    grid-column: 5 / 10;
    margin: 2vw 0;
}


/* -----------------Climate------------------ */


#climate_hero {
    background-image: url('My Work/Climate_change_protest/Climatechange_logo.jpg');
    background-size: cover;
    background-position: center;
}
#climate_protest {
    grid-column: 1 / 11;
    width: 100%;
}


/* -----------------MRLP------------------ */


#MRLP_hero {
    background-image: url('My Work/MRLP/MRLP_logo.svg');
    background-size: cover;
    background-position: center;
}
#MRLP_gorilla {
    grid-column: 6 / 10;
    width: 100%;
    margin-top: 5vw;
}
#MRLP_newspaper {
    grid-column: 2 / 6;
    width: 100%;
    margin-top: 5vw;
}
#MRLP_slogans {
    grid-column: 1 / 11;
    width: 100%;
}
#MRLP_Votefor {
    grid-column: 1 / 11;
    width: 100%;
}


/* ---------------Innovation Lab----------------- */


#Innovation_hero {
    background-image: url('My Work/Innovation_Lab/Innovation_lab_background_hero.jpg');
    background-size: cover;
    background-position: center;
}
#Innovation_logos {
    grid-column: 2 / 10;
    width: 100%;
    filter: drop-shadow(4px 4px 1.5px #1e1f211a);
}
#Innovation_idea {
    grid-column: 3 / 9;
    width: 100%;
    padding-top: 5vw;
}
#Innovation_typeface {
    grid-column: 2 / 10;
    width: 100%;
}
#Innovation_docs {
    grid-column: 1 / 11;
    width: 100%;
    padding-top: 2.5vw
}


/* --------------Gro--------------- */



#gro_hero {
    background-image: url('My Work/Gro/Gro_LOGO.svg');
    background-size: cover;
    background-position: center;    
}


/* -----------------Popcorn------------------ */


#popcorn_hero {
    background-image: url('My Work/Vue_popcorn/Vue_popcorn_logo.jpg');
    background-size: cover;
    background-position: center;
    }
#Vue_box {
    grid-column: 1 / 11;
    width: 100%;
}


/* -----------------Creative Conscience------------------ */


#cc_hero {
    background-image: url('My Work/Creative_conscience/CreativeConscience_logo.svg');
    background-size: cover;
    background-position: center;
}
#cc_video {
    height: 35vw;
    margin-bottom: 2.5vw;
}









/* -----------------------Carousel------------------------- */


.carousel_container {
    grid-column: 1 / 11;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    transition: transform 400ms ease-in;
    margin: 5vw 0;
}
#top_carousel {
    margin-top: 0px;
}

#pampers_images {
    height: 50vw;
}
.carousel_image {
    height: 40vw;
    display: none;
    border-radius: 1rem;
    filter: drop-shadow(0px 1px 10px #1e1f2149);
}
.carousel_buttons {
    margin: 3vw 0;
}
.button {
    display: inline-block;
    height: .15rem;
    width: 3.5rem;
    border: 0;
    cursor: pointer;
    background-color: #1e1f21;
    opacity: 40%;
    transition: opacity ease 300ms;
    margin: 0 1vw;
}
.button:hover{
    opacity: 1;
} 
.button_selected {
    opacity: 1;
}
.image_selected {
    display: block;
}
.fade {
    animation: fadeOut ease 1s;
}

@keyframes fadeOut{
    from { opacity: 0.4;}
    to { opacity: 1;}
}

/*--------OLD---------

.carousel_slider{
    height: 700px;
    border-radius: 5px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    transition: transform 400ms ease-in;
    position: relative;
}
.carousel_image {
    height: 700px;
    display: none;
    transition: position ease 250ms;
}
.carousel_image_selected {
    display: block;
    transition: position ease 250ms;
}
.carousel_nav {
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 40px 0;
    text-align: center;
}
.slider_buttons {
    display: flex;
    column-gap: 3rem;
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.carousel_button {
    display: inline-block;
    height: .5rem;
    width: .5rem;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background-color: #262b49;
    opacity: 40%;
    transition: opacity ease 250ms;
    margin: 0 10px;
}
.carousel_button_selected {
    opacity: 100%;
}
.carousel_button:hover{
    opacity: 1;
} 
.current_slide {
    opacity: 100%;
    z-index: 100;
    transform: scale(1.2);
    transition: transform 400ms ease-in;
}


Buttons 


.carousel_button_right {
    position: absolute;
    background-position: center;
    right: 0;
    top: 40%;
    border: 0;
    cursor: pointer;
    z-index: 100;
    background-image: url("My Work/Logos/Right_button.svg");
    background-size: 1.7vw;
    background-color: #262b4975;
    background-position: 55% 50%;
    border-radius: .5vw 0 0 .5vw;
    height: 3.5vw;
    width: 3.5vw;
    background-repeat: no-repeat;
}
.carousel_button_right:hover {
    background-image: url("My Work/Logos/Right_button_white.svg");
    background-color: #262b49;
}

.carousel_button_left {
    position: absolute;
    background-position: center;
    left: 0;
    top: 40%;
    border: 0;
    cursor: pointer;
    z-index: 100;
    background-image: url("My Work/Logos/Left_button.svg");
    background-size: 1.7vw;
    background-color: #262b4975;
    background-position: 45% 50%;
    border-radius: 0 .5vw .5vw 0;
    height: 3.5vw;
    width: 3.5vw;
    background-repeat: no-repeat;
}
.carousel_button_left:hover {
    background-image: url("My Work/Logos/Left_button_yellow.svg");
    background-color: #262b49;
}

.image_navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5vw;
    margin: 5vw 0;
}
.image_indicators {
    height: .7vw;
    width: .7vw;
    border-radius: 10px;
    border: 0;
    background-color: #97a7afbe;
    margin: 3vw 3vw;
    cursor: pointer;
}
.image_indicators:hover {
    background-color: #fed114;
}
.current_line {
    background-color: #262b49
}
.hidden_button { display: none;}*/





/* -----------------Next/Prev------------------ */




.project_section {
    /* background-color: #2f3e5929; */
    /* background-color: #CCD3F2; */
    /* width: 100%; */
    height: auto;
    margin-top: 5vw;
    border-radius: 2rem 2rem 0 0;
    background-color: #272b3b; 
}

.more_projects {
    width: 90%;
    display: grid;
    margin: auto;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: 1px 15vw 5vw;
    row-gap: 1.5vw;
    column-gap: 1.5vw;
    overflow: hidden;
    /* margin-top: 20px; */
    padding-top: 2.5vw;
    padding-bottom: 1vw;
}
.more_projects hr {
    background-color: #272b3b;
    grid-column: 1 / 9;
    grid-row: 1;
    height: 1px;
    width: 100%;
    border: none;
    opacity: .75;
}    
.whats_next {
    grid-column: 1 / 4;
    grid-row: 2;
    margin-top: 0;
}
.whats_next h1 {
    font-weight: 300;
    font-size: 36px;
    line-height: 40px;
    color: #ffffffab;
    letter-spacing: .3px;
    /* padding-top: 40px; */
}
.whats_next p {
    padding-top: 40px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    letter-spacing: .3px;
    color: #ffffffab;
}

.more_socials {
    position: relative;
    display: flex;
    grid-column: 1 / 5;
    grid-row: 3;
    /* justify-content: space-around; */
    /* align-items: center; */
}
.social_link {
    text-decoration: none;
    font-size: 11px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffffab;
    opacity: 80%;
    font-family: 'Roboto Flex' , sans-serif;
    padding-right: 2vw;
}
.social_link:hover {
    text-decoration: underline;
    text-decoration-color: #F8CB12;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    opacity: 100%;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;
}
.more_socials img{
    height: 10px;
    padding-right: 10px;
    opacity: 60%;
}

#instagram:hover > #instagram_arrow { 
    opacity: 1;
}
#linkedIn:hover > #linkedIn_arrow { 
    opacity: 1;
}
#email:hover > #email_arrow { 
    opacity: 1;
}


#more_ICA {
    position: relative;
    background-image: url('My Work/Home_page/ICA_Orbs_ALT.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_streamly {
    position: relative;
    background-image: url('My Work/Home_page/Streamly_Microphone.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_LMA {
    position: relative;
    background-image: url('My Work/Home_page/LMA_Ripples_Boat.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_nyam {
    position: relative;
    background-image: url('My Work/Home_page/Nyam.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_generation {
    position: relative;
    background-image: url('My Work/Home_page/Generation.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_IIRIS {
    position: relative;
    background-image: url('My Work/Home_page/IIRIS_Home_datasphere.png');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_days {
    position: relative;
    background-image: url('My Work/Home_page/36daysoftype.svg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_monopoly {
    position: relative;
    background-image: url('My Work/Home_page/Monopoly_hero.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_pampers {
    position: relative;
    background-image: url('My Work/Home_page/Pampers_skin.jpg');
    background-size: 88%;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_climate {
    position: relative;
    background-image: url('My Work/Home_page/Protest.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_MRLP {
    position: relative;
    background-image: url('My Work/Home_page/MRLP_loonyman.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_innovation {
    position: relative;
    background-image: url('My Work/Home_page/Innovation_lab_bulb.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_gro {
    position: relative;
    background-image: url('My Work/Home_page/Gro_Energy.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_popcorn {
    position: relative;
    background-image: url('My Work/Home_page/Popcorn_dark.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}
#more_cc {
    position: relative;
    background-image: url('My Work/Home_page/cc_awards_2019.jpg');
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    grid-column: 1 / 2;
    grid-row: 1;
}

.prev_project {
    grid-column: 5 / 7;
    grid-row: 2;
    display: grid;
    grid-template-columns: 2fr;
    grid-template-rows: 1fr;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.next_project {
    grid-column: 7 / 9;
    grid-row: 2;
    text-align: left;
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns: 2fr;
    grid-template-rows: 1fr;
}

.prev_descriptor , .prev_descriptor_phone  {
    grid-column: 5 / 7;
    grid-row: 3;
    text-align: left;
    position: relative;
    text-decoration: none;
}
.next_descriptor , .next_descriptor_phone {
    grid-column: 7 / 9;
    grid-row: 3;
    text-align: left;
    position: relative;
    text-decoration: none;
}

.next_descriptor h4 , .prev_descriptor h4 {
    text-decoration: none;
    color: #ffffffab;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .2px;
    font-weight: 500;
    opacity: 90%;
}

.next_descriptor p , .prev_descriptor p {
    text-decoration: none;
    color: #ffffffab;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: .2px;
    font-family: 'Roboto Flex' , sans-serif;
    font-weight: 100;
    opacity: 90%;
}
/* .next_descriptor h2:hover {
    color: #ffffff79;
}
.prev_descriptor h2:hover {
    color: #ffffff79;
} */

.overlay {
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
    transition: opacity 200ms ease-in-out;
    -webkit-transition: 200ms ease-in-out;
    background-color: #272b3b;
    opacity: 100%;
    /* mix-blend-mode: normal; */
    grid-column: 1 / 2;
    grid-row: 1;
}
.overlay_image {
    opacity: 65%;
    mix-blend-mode: normal;
    top: 0%;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;
}
.overlay_image:hover {
    z-index: 1;
    transform: scale(1.05);
    transition: transform 150ms ease-in;
    box-shadow: 0 rgba(0,0,0,.3);
    opacity: 95%;
    background-color: #ffffff;
}

.next_project:hover ~ .next_descriptor h4 , .prev_project:hover ~ .prev_descriptor h4 {
    /* text-decoration: underline;
    text-decoration-color: #ffffff9a;
    text-decoration-thickness: .5px;
    text-underline-offset: 5px; */
    /* font-weight: 600; */
    color: #ffffff;
    opacity: 100%;
    letter-spacing: .3px;
    transition: letter-spacing 300ms ease-out;
    -webkit-transition: letter-spacing 300ms ease-out;
}
.next_descriptor:hover h4, .prev_descriptor:hover h4{
    /* font-weight: 600; */
    color: #ffffff;
    opacity: 100%;
    letter-spacing: .3px;
    transition: letter-spacing 300ms ease-out;
    -webkit-transition: letter-spacing 300ms ease-out;
}

.next_project:hover ~ .next_descriptor p , .prev_project:hover ~ .prev_descriptor p {
    /* text-decoration: underline;
    text-decoration-color: #ffffff9a;
    text-decoration-thickness: .5px;
    text-underline-offset: 5px; */
    /* font-weight: 300; */
    color: #ffffff;
    opacity: 100%;
    letter-spacing: .3px;
    transition: letter-spacing 300ms ease-out;
    -webkit-transition: letter-spacing 300ms ease-out;
}
.prev_descriptor:hover p, .next_descriptor:hover p{
    /* font-weight: 300; */
    color: #ffffff;
    opacity: 100%;
    letter-spacing: .3px;
    transition: letter-spacing 300ms ease-out;
    -webkit-transition: letter-spacing 300ms ease-out;
}


/* -------  1380px ------- */


@media screen and (max-width: 1366px){
    body {
        max-width: 1366px;
    }

    /* #Loony_conference {
        grid-column-start: 1;
        grid-column-end: 9;
        height: 100%;
        padding-right: 0;
    } */
    
}


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


@media screen and (max-width: 1081px){
    body {
        max-width: 1081px;
    }
    
    .nav_links li {
        font-size: .7rem;
    }
    .logo {
        margin-right: 2vw;
    }

    .video {
        grid-column: 2 / 10;
    }
    .video_size {
        width: 100%;  
    }
    #top_video {
        margin-top: 2vw;
        margin-bottom: 5vw;
    }

    .more_projects {
        grid-template-rows: 2.3vw 15vw 12vw;
    }

}





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


@media screen and (max-width: 920px){
    body {
        max-width: 920px;
    }

    @media (max-width:920px){
     
        .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: 100vh;
            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: 70vh;
        }
        .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: #262c49;
            opacity: 60%;
        }
        header.scrolled .bar {
            background-color: #262c49;
            opacity: 1;
        }
    }
    
    .nav_links li {
        font-size: .7rem;
    }
    .yellow_logo {
        height: 60px;
        width: 60px;
    }
    .yellow_logo:hover {
        height: 60px;
        width: 60px;
    }

    .carousel_container {
        margin-top: 10vw;
    }
    .video {
        margin: 5vw 0;
    }

    #LMA_brand_assets {
        grid-column: 1 / 11;
    }

    #streamly_gif {
        grid-column: 1 / 6;
    }
    #streamly_phone {
        grid-column: 6 / 11;
    }

    #ICA_billboard {
        grid-column: 1 / 11;
    }
    #ICA_social {
        grid-column: 2 / 10;
    }

    #nyam_trolley {
        grid-column: 1 / 11;
    }
    #nyam_underground {
        grid-column: 3 / 9;
    }

    #eband {
        grid-column: 3 / 9;
    }

    #IIRIS_icons {
        grid-column: 2 / 10;
    }

    #MRLP_gorilla {
        grid-column: 6 / 11;
    }
    #MRLP_newspaper {
        grid-column: 1 / 6;
    }

    #Innovation_idea {
        grid-column: 2 / 10;
    }
    #Innovation_typeface {
        grid-column: 1 / 11;
    }

    #cc_video {
        height: 45vw;
    }

    .project_info h1 {
        font-size: 30px;
        text-align: left;
        line-height: 38px;
    }
    .project_info h2 {
        font-size: 11px;
        line-height: 18px;
        padding-bottom: 10px;
    }
    .project_info p {
        font-size: 15px;
        line-height: 24px;
        font-weight: 200;
    }
    
    .project_info {
        grid-column: 2 / 10;
    }


    .more_projects {
        grid-template-rows: .5vw 8.5vw 25vw 15vw;
        margin-top: 5vw;
    }
    .whats_next {
        grid-column: 1 / 5;
        grid-row: 2;
        margin: 0 0;
    }
    .next_project {
        grid-column: 5 / 9;
        grid-row: 3;
    }
    .next_descriptor {
        grid-column: 5 / 9;
        grid-row: 4;
    }
    .prev_project {
        grid-column: 1 / 5;
        grid-row: 3;
    }
    .prev_descriptor {
        grid-column: 1 / 5;
        grid-row: 4;
    }

    .next_descriptor p , .prev_descriptor p {
        font-size: 13px;
        line-height: 18px;
    }
    .next_descriptor h4 , .prev_descriptor h4 {
        font-size: 13px;
        line-height: 18px;
    }

    h3 {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        grid-column: 2 / 4;
    }
    .more_socials {
        display: none;
    }


    
    
}

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


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

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

    .project_info {
        grid-column: 2 / 10;
    }
    .project_info h1 {
        font-size: 28px;
        text-align: left;
        line-height: 36px;
    }
    .project_info h2 {
        font-size: 11px;
        line-height: 18px;
        padding-bottom: 10px;
    }
    .project_info p {
        font-size: 14px;
        line-height: 24px;
        font-weight: 200;
    }

    .carousel_container {
        margin-top: 3vw;
    }
    .carousel_image {
        height: 100%;
        width: 90vw;
    }
    .carousel_buttons {
        margin: 7vw 0;
    }
    .button {
        margin: 0 2vw;
        width: 15vw;
    }
    .video {
        grid-column: 1 / 11;
    }
    .video_size {
        height: 60vw;
    }

    #nyam_underground {
        grid-column: 1 / 11;
    }
    #eband {
        grid-column: 1 / 11;
    }

    #Monopoly_doodle {
        display: none;
    }

    #pampers_sleep_story {
        grid-column: 1 / 11;
    }
    #pampers_infographics {
        grid-column: 1 / 11;
    }
    #pampers_images {
        height: 100%;
        width: 60vw;
    }
    
    #MRLP_gorilla {
        grid-column: 1 / 11;
    }
    #MRLP_newspaper {
        grid-column: 1 / 11;
    }

    #Innovation_idea {
        grid-column: 1 / 11;
    }
    #Innovation_logos {
        grid-column: 1 / 11;
    }

    #image_size {
        height: 80vw;
        margin-top: 10vw;
    }

    #button_smaller {
        width: 12vw;
    }

    #cc_video {
        height: 55vw;
    }


    .more_projects {
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: .5vw 18vw 55vw 18vw 55vw 18vw;
    }
    .more_projects hr {
        grid-column: 1 / 5;
    }
    .whats_next {
        grid-column: 1 / 5;
        grid-row: 2;
    }
    .next_project {
        grid-column: 1 / 5;
        grid-row: 3;
    }
    .next_descriptor {
        grid-column: 1 / 5;
        grid-row: 4;
    }
    .prev_project {
        grid-column: 1 / 5;
        grid-row: 5;
    }
    .prev_descriptor {
        grid-column: 1 / 5;
        grid-row: 6;
    }

    .whats_next h1 {
        font-weight: 300;
        font-size: 20px;
        line-height: 28px;
        color: #272b3b;
        letter-spacing: .3px;
    }
    .next_descriptor p , .prev_descriptor p {
        font-size: 12px;
        line-height: 15px;
    }
    .next_descriptor h4 , .prev_descriptor h4 {
        font-size: 12px;
        line-height: 15px;
    }

    h3 {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        grid-column: 1 / 11;
        text-align: center;
    }
    
    
}