*,
*::before,
*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: sans-serif;

    scroll-behavior: smooth;

    position: relative;

} 

html {
    width: 100%;
}




/* hamburger styles */
.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}





/* --- Modal Styling --- */



.action-button {
    text-align: center;
/*    margin: 1rem auto; */
    margin: 0;
    --radius-fixed: 50%;
    --radius-static: 25px;
    z-index: 10;
  }
  .action-button button {
    font: inherit;
    font-weight: 700;
    transition: transform 0.6s ease-in-out, color 0.3s linear 0.3s;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    color: white;
    background: none;
  }
  .action-button button::before {
    position: fixed;
    top: 0%;
    left: 0;
    font: monospace;
    content: attr(style);
    color: black;
    font-size: 1rem;
    display: none;
  }
  .action-button button::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    height: 100%;
    width: 100%;
    background: black;
    z-index: -1;
    transition: transform, border-radius;
    transition-duration: inherit;
    transform-origin: top left;
    border-radius: var(--radius);
  } 
  .action-button button[data-flipping] {
    color: transparent;
    transition: none;
    transform: translate(calc(-1px * var(--dx)), calc(-1px * var(--dy)));
  }
  .action-button button[data-flipping]::after {
    transition: none;
    border-radius: var(--prev-radius);
    transform: scale(calc(1 / var(--dw)), calc(1 / var(--dh)));
  }
  .action-button button.static {
    padding: 1rem 2rem;
    --radius: var(--radius-static);
    --prev-radius: var(--radius-fixed);
    transform-origin: bottom right;
  }
  .action-button button.fixed {
    transform-origin: top right;
    --radius: var(--radius-fixed);
    --prev-radius: var(--radius-static);
    position: fixed;
    right: 5%;
    bottom: 3%;
    border-radius: 50%;
    font-size: 2em;
    width: 1.5em;
    height: 1.5em;
    z-index: 10;
    line-height: 1;
    padding: 0;
    opacity: 0;
/*    transform: scale(0); */
  }
  .action-button button.fixed:hover {
    animation:
      bounce 300ms
      alternate infinite
      cubic-bezier(.2, .65, .6, 1);
  }
  .action-button[data-scroll-position="-1"] .static {
    opacity: 0;
  }
  .action-button[data-scroll-position="-1"] .fixed {
    opacity: 1;
  }
  






/* --- Modal Styling End --- */





nav {

    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 6rem;
    position: fixed;
    width: 100%;
    z-index: 497;
    transition: 200ms ease-in-out;
    background-color:#F5DF4D; 
    
}




nav ul {

    display: flex;

    list-style: none;


}


nav a {

    color: #000;

    text-decoration: none;

    margin: 0 16px;
    
    font-weight: 700;

}

nav a:hover {
    color: #939597;
}

nav > a:first-of-type {
    margin-left: 2rem;
}


.changeColor {
    background-color: #f4f7ff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}


.changeColor a{
    color: #000;
}

.changeColor a:hover {
    color: #939597;
}

nav.changeColor>ul.active {
    background-color: #f4f7ff;
}

nav.changeColor>ul {
    background: none;
}


.offeringCard > div h2, .offeringCard > div:link h2, .offeringCard > div:visited h2{

    color: #939597;

}





section.page {

    min-height: 100vh;

    overflow: auto;  

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    align-content: center;

    justify-content: flex-start;

    color: #939597;

/*    scroll-snap-align: start; */

    flex-wrap: nowrap;

}


body {
/*
    scroll-snap-type: y mandatory; */

    overflow-y: scroll;

    height: 100vh;

    background-color: #F4F7FF;

}


/*
main section#four {

    height: 3040px;



#two, #three, #four {

    background: #F4F7FF;

}

}
*/


#home {

    background: #F5DF4D;

}



article.hero {

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    align-content: center;

    justify-content: flex-start;

    align-items: flex-start;

    margin: 15vh 10vw 2rem 10vw;

}



h1 {

    font-size: 4.4rem;

    font-family: proxima-nova, sans-serif;

    font-weight: 800;

    font-style: normal;

    letter-spacing: -.1rem;

    line-height: 4.4rem;

    margin-bottom: 1rem;

}

.offeringCard > div > h2 {

    font-weight: 400;

    font-family: proxima-nova, sans-serif;;

    font-size: 2.99rem;

}

h2 {

    font-size: 1.99rem;

    font-family: proxima-nova, serif;

    font-weight: 400;

    font-style: normal;

    letter-spacing:normal;

    line-height: 1.99rem;

    margin-bottom: 1rem;

}



h3 {

    color: #939597;

    font-size: 1rem;

    font-family: proxima-nova, sans-serif;

    font-weight: 400;

    font-style: normal;

    letter-spacing:normal;

    line-height: 2rem;

}



p {

    font-size: 1.25rem;

    font-family: proxima-nova, sans-serif;

    font-weight: 300;

    font-style: normal;

    letter-spacing: .07rem; 

    line-height: 1.75rem;

    margin-bottom: 1rem;

}

em {
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
    font-style: italic;
}

ul#projectGoals > li {

    font-family: proxima-nova, sans-serif;
    
    font-weight: 300;
    
    font-style: normal;

    font-size: 1.25rem;

    line-height: 1.3rem;

    margin-bottom: 0.5rem;

    letter-spacing: 0.07rem;

}

ul#projectGoals > li:last-of-type {

    margin-bottom: 0;
}


.projectDescription p {

    max-width: 290px;

    text-align: center;

    padding: .5rem;

    line-height: 1.5rem;

    color: #939597;



}


button.btn, .submit, .grayButton {

    display: flex;

    width: 12rem;

    align-items: center;

    justify-content: center;

    align-content: center;

    margin: 1rem 0;

    padding: 0;

    height: 3rem;

    border-radius: 25px;

    border: none;

    color: #ffffff;

    background-color: black;

    font-size: 1rem;

    font-family: proxima-nova, sans-serif;

    font-weight: 300;

    font-style: normal;

    cursor: pointer;

}



.grayButton, .grayButton > h4 {

    background-color: #939597;

}



button.grayButton#interaction {

    margin: 0;

    padding: 0;



}



figure {

    display:block;

}


/*
figure.offerings {

    display: flex;

    flex-wrap: wrap;

}

*/

section.logoContainer {
    margin-top: 1.25rem;
}

figure.logos {

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    flex-wrap: wrap;

    max-width: 1058px;

}



figure.logos > img {

    height: 7rem;

    width: 13rem;

    background-color: #ffffff;

    border-radius: 15px;

    margin: .2rem;

}



img#nickelodeon {

    padding: 1.5rem;

}



img#disney {

    padding: 1.5rem;

}



img#cbs {

    padding: 1rem;

}



img#microsoft {

    padding: 1.3rem;

}



img#hasbro {

    padding: .65rem;

}



img#hbo {

    padding: 2rem;

}



img#sony {

    padding: 2rem;

}


#offeringChoice > article > figure > div > img {
    background-color: none;
    padding: 0px;
    border-radius: 0%;
}

#offeringChoice.offeringSection > article:hover {
    background-color: none;
    padding: 0px;
    border-radius: 0%;
    animation:
      bounce 300ms
      alternate infinite
      cubic-bezier(.2, .65, .6, 1);
}

#offeringChoice.projectSection > article > figure > div > img {
    background-color: #FFFFFF;
    padding: 8px;
    border-radius: 10px;
    transition: all .2s ease-in-out;
}
 

#offeringChoice.projectSection > article > figure > div > img:hover {
    transform: scale(1.1);
}

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes bounce {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-20px);
    }
  }


    @keyframes drop-in {
    from {
      transform:
        rotate(-30deg) translateY(-100%);
      opacity: 0;
    }
    to {
      transform:
        rotate(0deg) translateY(0%);
      opacity: 1;
        }
    }

  #offeringChoice.projectSection > article > figure > div.toggled > img:hover {
    animation:
      bounce 300ms
      alternate infinite
      cubic-bezier(.2, .65, .6, 1);
  }


#offeringChoice.offeringSection {

    display: flex; 

    flex-direction: row;

    align-items: baseline;

    margin-left: 10vw;

    transition: all .3s ease;

    position: relative;

    animation-name: fade-in;

    animation-duration: 1s;

    width: 80vw;

    column-gap: 32px;
}

#offeringChoice.projectSection {

    display: flex; 

    flex-direction: row;

    align-items: baseline;

    position: fixed;

    top: 10px;

    right: 5%;

    z-index: 497;

    transition: all .3s ease;

    margin: 0;

}

section.projectSection > article > div, 
section.projectSection > article > ul {
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
    
}

section.projectSection > article > figure > div > img {

    height: 72px;
    width: 72px;
    border-radius: 8px;
    margin-bottom: 0px;
    transition: all .3s ease;
}

section.projectSection > article > figure > div.toggled > img {

    height: 48px;
    width: 48px;
    border-radius: 4px;
    margin-bottom: 12px;
    transition: all .3s ease;
}




article.offeringCard {

    display: flex;

    flex-direction: column;

    margin: 0;

}

section#offeringChoice.offeringSection > article {

    margin: 0;
}

section#offeringChoice.projectSection > article {
    margin: 0 8px;
}



article.offeringCard > ul {

    list-style-type: circle;

}


p.responsibility {

    font-weight: 300;

    font-size: 1.13rem;

}

li.involvement {
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
    font-style: normal;
}


article.offeringCard > ul li {

    font-size: 1rem;

    font-family: proxima-nova, sans-serif;

    font-weight: 300;

    font-style: normal;

    letter-spacing: .05rem;

    line-height: 1.5rem;

}



figure.offerings {

    margin-bottom: 2rem;

}

figure.offerings img {

    max-height: 200px;

    height: 20vw;

    justify-content:end;

}

figure.offerings-mini img {

    max-height: 48px;

    justify-content:end;

}



figure.projectLogo > img {

    max-width: 22rem;

    margin-bottom: .5rem;

    width: 30vw;

}



section.uxProject, 
section.printProject {

    opacity: 0;
    position: fixed;
    margin: 0;
    transition: all 1s ease;
}

section.uxProject.toggled, 
section.printProject.toggled {

    display: flex;

    flex-direction:column;

    position: relative;

    margin-left: 10vw;

    opacity: 1;
    
    transition: all 1s ease;
    
}



section.projectContainer {

    display: flex;

    flex: 0 0 50%;

    background-color: white;

    max-width: 80vw;

    margin-bottom: 2rem;

    border-radius: 15px;

}



a.projectLink:nth-of-type(even) section.projectContainer {

    display: flex;

    flex-direction:row-reverse;

}



article.projectDescription {

    display: flex;

    width: 472px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    align-content: center;

}



figure.projectImage {

    display: flex;

    justify-content: space-around;

    background-repeat: no-repeat;

    background-size: cover;

    border-radius: 0 15px 15px 0;

    max-height: 472px;

    max-width: 472px;

    width: 40vw;

    height: 40vw;

}



figure.projectImage#marsFry {

    background-color: #00A6C3;

    background-image: url(/img/project1.png);

}



figure.projectImage#datesChai {

    background-color: #77a240;

    background-image: url(/img/project2.png);

}



figure.projectImage#ux3 {

    background-color: #fabdcc;

    background-image: url(/img/project3.png);

}


figure.projectImage#ux4 {

    background-color: #9577ac;

    background-image: url(/img/project4.png);

}


figure.projectImage#tmnt {

    background-color: #5b5d4f;

    background-image: url(/img/printProject1e.png);

}

figure.projectImage#campSpirit {

    background-color: #a1a1c4;

    background-image: url(/img/printProject2.png);

}


figure.projectImage#ss {

    background-color: #fabdcc;

    background-image: url(/img/printProject3.png);

}

figure.projectImage#tcue {

    background-color: #b7b9c5;

    background-image: url(/img/printProject1.png);

}


a.projectLink:nth-of-type(even) section.projectContainer > figure.projectImage {

    border-radius: 15px 0 0 15px;

}



figure.projectImage > img {

    padding: 1.5rem;

    height: 100%;

    margin: 0;

}



a:link, a:visited {

    text-decoration: none;

    display: inline-block;

  }

  section.social {

      margin:0 10vw 0 10vw;

}



/* --- About Overlay --- */



.overlay {

    height: 0;

    width: 100%;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgba(0,0,0, 0.9);

    overflow-x: hidden;

    transition: 0.5s;

    z-index: 500;

  }

  

  .overlay-content#about {

    display: flex;

    justify-content: center;

    flex-direction: column;

    flex-wrap: nowrap;

    position: relative;

    height: 100%;

    text-align: center;

    margin: 0 30vw;

    text-align: left;

  }



  .overlay-content#about h3{

    margin-bottom: 1rem;

  }

  

  .overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 36px;

    color: #818181;

    display: block;

    transition: 0.3s;

  }

  

  .overlay a:hover,.overlay a:focus,.overlay h1, .overlay p{

    color: #939597;

  }

  

  .overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

    z-index:5;

  }



/* --- About Overlay End --- */



/* --- Contact Overlay --- */



.overlayContact {

    height: 0;

    width: 100%;

    position: fixed;

    z-index: 1;

    bottom: 0;

    left: 0;

    background-color: rgba(0,0,0, 0.9);

    overflow-x: hidden;

    transition: 0.5s;

    z-index: 500;

  }

  
  form#contact {
    margin-top: 33vh;
  }


  .overlayContact-content#contact {

    display: flex;

    /* position: relative; */

    /*     height: 100%;  */

    /* text-align: center; */

    /*    margin-top: 33vh; */

    /* text-align: left; */

    /* width: 56vw; */

    justify-content: center;

  }

  

  .overlayContact-content#contact h3{

    margin-bottom: 1rem;

  }

  

  .overlayContact a {

    padding: 8px;

    text-decoration: none;

    font-size: 36px;

    color: #818181;

    display: block;

    transition: 0.3s;

  }

  

  .overlayContact a:hover,.overlayContact a:focus,.overlayContact h1, .overlayContact p{

    color: #939597;

  }

  

  .overlayContact .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

    z-index:5;

  }



  

#contact input[type="text"], #contact input[type="email"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }





fieldset {

	border: medium none !important;

	margin: 0 0 10px;

	min-width: 100%;

	padding: 0;

	width: 100%;

}



#contact input[type="text"], #contact input[type="email"], #contact textarea {

	width:100%;

	border:1px solid #939597;

    color: #939597;

    background-color:rgba(0,0,0,0.3);

    margin:0 0 5px;

	padding:10px;

}



#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact textarea:hover {

	-webkit-transition:border-color 0.3s ease-in-out;

	-moz-transition:border-color 0.3s ease-in-out;

	transition:border-color 0.3s ease-in-out;

	border:1px solid #AAA;

}



#contact textarea {

	height:100px;

	max-width:100%;

    resize:none;

}



#contact button[type="submit"] {

	cursor:pointer;

	width:100%;

	border:none;

	background:#939597;

	color:#FFF;

	margin:0 0 5px;

	padding:10px;

	font-size:1rem;

}



#contact button[type="submit"]:hover {

	background:#939597;

	-webkit-transition:background 0.3s ease-in-out;

	-moz-transition:background 0.3s ease-in-out;

	transition:background-color 0.3s ease-in-out;

}



#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }



#contact input:focus, #contact textarea:focus {

	outline:0;

	border:1px solid #999;

}

::-webkit-input-placeholder {

 color:#888;

}

:-moz-placeholder {

 color:#888;

}

::-moz-placeholder {

 color:#888;

}

:-ms-input-placeholder {

 color:#888;

}



/* --- Contact Overlay End --- */



/* --- Popup Affordance (Page One) --- */















  

/* --- Popup Affordance (Page One) End --- */



/* --- Project Page Styling --- */

  video.uxVid {
    width: 1440px;
    max-height: 850px;
    max-width: 90vw;
    background-color:white;
  }

 

  article.projectPage {

    display: flex;

    color: #939597;

    flex-direction: column;

    align-items: center;

  }

  article.projectPage > figure:first-of-type {
    margin-top: 5.7rem;

  }

  section.projectHero {

    max-width: 90vw;

    width: 1248px;

    margin: 0;

    padding: 0;

    display: flex;
    
    align-items: flex-start;

    justify-content: flex-start;

  }



  a#projectLink {

      margin: 0;

      padding: 0;
 


  }

  ul#projectGoals {

      list-style-type: circle;

      margin: 0 0 16px 2rem;

      line-height: 2rem;



  }

/*

  section.projectPageDescription, li.involvement {

    color: #191607d9;

  }

  */


  section.projectPageDescription {

    display: flex;

    width: 50vw;

    max-width: 928px;

    flex-direction: column;

    align-items: flex-start;

    flex-wrap: nowrap;

    margin-right: 5rem;

  }

  

  .projectCopy {

    flex-wrap: wrap;

    display: flex;

    max-width: 90vw;

    width: 1248px;

  }



    section.projectPageDescription p:last-of-type {

        margin-bottom: 4rem;

  }


  .projectImages-1up {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.projectImages-2up {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 90vw;
    width: 1440px;
    margin-bottom: 2rem;
}

div.projectImages-1up > section.projectImages > figure {

    margin-bottom: .5rem;

}

div.projectImages-1up > section.projectImages > figure > img {

    width: 1440px;
    max-width: 90vw;

}

div.projectImages-2up > section.projectImages > figure {

    margin-bottom: .5rem;

}


  /*
    .projectImages-2up {
        display: flex;
        flex-wrap: wrap;
        width: 90vw;
        max-width: 1440px;
    }

    .projectImages-1up {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 90vw;
        max-width: 800px;
    }

    section.projectImages > figure {

        margin-bottom: .5rem;
        max-width: 600px;

    }
*/


    section.projectImages > figure {

        margin-bottom: 2rem;
        
    }

    section.projectImages > figure:last-of-type {
        margin-bottom:0;
    }
  

  article.projectPage > figure > img, section.projectImages > figure > img {

    width: 100vw;
    max-width: 1440px;

  }
    
  div.projectImages-2up section.projectImages > figure > img {

    max-width: 720px;

    min-width: 360px;

    width: 45vw;

    margin: 0;

  }



  div.projectAsideContainer {

    display: flex;

    flex-direction: column;

    max-width: 15rem;

    width: 40vw;

  }

  aside {

      display: flex;

  }

div.projectAsideContainer aside:last-of-type {

    margin: 1rem 0 2rem 0; 

} 



  article.projectPage header {

    display: flex;

    flex-wrap: nowrap;

    flex-direction: column;

    max-width: 90vw;

  }

  footer {
    padding-bottom: 4rem;
  }

  footer.copyright {
    margin-left: 10vw;
    max-width: 65vw;
  }
  footer.copyright > p {
    font-size: .75rem;
    line-height: 1rem;
  }

  article.projectPage aside {

    align-items: flex-end;

    text-align: right;

    align-content: stretch;

    flex-direction: column;

}



article.projectPage h3 {

    font-family: proxima-nova, sans-serif;

    font-weight: 600;

    font-style: normal;

    font-size: 1.25rem;

    letter-spacing: 0; 

    margin-bottom: .5rem;

}



article.projectPage ul {

    list-style-type:none;

    font-family: proxima-nova, sans-serif;

    font-weight: 400;

    font-style: normal;

    font-size: 1rem;

    line-height: 1.25rem;

    letter-spacing: .05rem;

}





.projectHero > header h1 {

    margin: 2rem 0 0 0;

}



.projectHero > header h2 {

    margin: 1rem 0 2rem 0;

}

body > main > article > section > header > h2 {
    
    font-weight: 300;

}



.arrows {

    -webkit-text-size-adjust: 100%;

    font-size: 1em;

    line-height: 1.4;

    grid-template-columns: 1fr;

    column-gap: .5em;

    row-gap: .5em;

    list-style-type: none;

    margin: 0 .5em 3rem 0;

    padding: 0;

    text-align: center;

    display: flex;

    justify-content: center;

    align-content: center;

    padding-top: 2em;

}

.arrows > li a{

    margin: 0 1rem;

}



/* --- Project Page Styling End --- */















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


    article.hero {

        max-width: 80vw;

    }

    figure.logos > img {

        background-color: white;

        border-radius: 10px;

        margin: .25rem;

        height: 17.5vw;

        width: 32.5vw;

        max-width: 13rem;

        max-height: 7rem;

    }


    article.projectDescription {
    
        max-height: 348px;

        height: 70vw;
    
    }


    div.projectImages-2up > section.projectImages figure > img {

        max-width: 720px;
    
        min-width: 250px;
    
        width: 90vw;
    
      }


    img#nickelodeon {

        padding: .75rem;

    }

    

    img#disney {

        padding: .75rem;

    }

    

    img#cbs {

        padding: .5rem;

    }

    

    img#microsoft {

        padding: .65rem;

    }

    

    img#hasbro {

        padding: .325rem;

    }

    

    img#hbo {

        padding: 1.5rem;

    }

    

    img#sony {

        padding: 1rem;

    }


/*
    section.page#four {

        height: 450vh;

    }
*/


    .projectHero > header h1 {

        margin: 2rem 0 0 0;

    }





    .projectCopy {

        flex-direction:column-reverse;

    }


/*
    .projectHero > header h2 {

        margin: 1rem 0 .5rem 0;

    }
*/
    

    h1 {

        font-size: 3.317rem;

        font-family: proxima-nova, sans-serif;

        font-weight: 800;

        font-style: normal;

        letter-spacing: -.1rem;

        line-height: 3rem;

        overflow-wrap: wrap;

    }

    .offeringCard > div > h2 {

        font-size: 1.99rem;
    
        font-family: proxima-nova, sans-serif;;
    
    }


    h2 {

        font-size: 1.5rem;

        font-family: proxima-nova, sans-serif;

        font-weight: 400;

        font-style: normal;

        line-height: 1.75rem;

    }



    figure.offerings {

        margin-bottom: .5rem;

    }



    section.projectContainer{

        display: flex;

        flex-direction:row;

        flex-wrap: wrap;

        justify-content: center;

    }

    figure.projectImage {

        height: 80vw;

        width: 80vw;

        max-height: 360px;

        border-radius: 0 0 15px 15px;

        max-width: 720px;

    }

    a.projectLink:nth-of-type(even) section.projectContainer > figure.projectImage {

        border-radius: 0 0 15px 15px;

    }


/*
    section.projectPageDescription {
        
        color: #484848c7;

    }
*/

    figure.projectLogo > img {

        width: 64vw;

        margin-bottom: .5rem;

        padding-top: 2rem;

    }

    article.projectPage header {

        display: flex;

        flex-wrap: nowrap;

        align-content: center;

        flex-direction: column;

        max-width: 80vw;

        align-items: flex-start;

        justify-content: space-between;

    }
/*
    nav ul {

        flex: 0;

    }
*/
    .overlay-content#about {

        margin: 0 10vw;

    }

    section.projectImages > figure {

        margin-bottom: .5vw;

    }

    section.projectPageDescription {

        width: 90vw;

    }

    section.projectHero {

        justify-content: flex-start;

        

    }



    div.projectAsideContainer {

        display: flex;

        align-items: flex-start;

        flex-direction: column;

    }



    article.projectPage aside {

        align-items: flex-start;

        width: 60vw;

        max-width: 16rem;

        text-align: left;

    }

    section.projectHero {

        flex-direction: column;

    }

      

}













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

    img#hbo {
        padding: 1rem;
    }

    p.responsibility {
    
        font-size: 1rem;
    
        line-height: 1.25rem;
    
    }

    nav > a:first-of-type {
        margin-left: 1rem;
    }

    .overlay a {font-size: 20px}

    .overlay .closebtn {

        font-size: 40px;

        right: 35px;

    }

    .overlay-content#about {

        margin: 1rem 5vw;

      }

    

    section.projectHero {

        flex-direction: column;

        align-items: flex-start;

    }



    div.projectAsideContainer {

        display: flex;

        align-items: flex-start;

        flex-direction: column;

    }



    article.projectPage aside {

        align-items: flex-start;

        width: 80vw;

        max-width: 16rem;

        text-align: left;

    }

    section.projectHero {

        flex-direction: column;

      }

    .overlayContact-content#contact {

        max-width: 90vw;

        margin: 0 5vw 0 5vw;

      }

    form#contact {
        margin-top: 25vh;
    }

/*
    #offeringChoice.projectSection {
        flex-direction: column;
        align-items: center;
        top: 40%;
    }
*/
        .nav-menu {
            position: fixed;
            left: -100%;
            top: 6rem;
            flex-direction: column;
            background-color: #F5DF4D;
            width: 100%;
            border-radius: 0 0 10px 10px;
            text-align: center;
            transition: 0.3s;
            box-shadow:
                0 10px 10px rgba(0, 0, 0, 0.05);
        }
    
        .nav-menu.active {
            left: 0;
        }
    
        .nav-item {
            margin: 2.5rem 0;
        }
    
        .hamburger {
            display: block;
            cursor: pointer;
        }
        
        .hamburger.active .bar:nth-child(2) {
            opacity: 0;
        }
    
        .hamburger.active .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
    
        .hamburger.active .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

    }

/*
@media screen and (max-width: 335px) {
    #offeringChoice.projectSection {
        top: 40%;
    }
}
*/