body {
  background-color: black; }

#mobile-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #000016;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 3.75em; }
  #mobile-nav a {
    padding: 1em .5em .5em 2em;
    text-decoration: none;
    color: #D8BFAA;
    font-size: 28px;
    display: block;
    transition: 0.3s;
    font-family: 'Roboto Condensed', sans-serif; }
    #mobile-nav a:hover, #mobile-nav a:active {
      color: #EBF5EE; }
  #mobile-nav .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 3.125em; }
  #mobile-nav .closebtn {
    font-size: 4em;
    padding-left: .75em; }

#wrapper {
  max-width: 5120px;
  background-color: #E4E2E2;
  transition: .5s; }

.hero {
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  background-image: url("../img/herodoubleoverlay.png");
  background-position: center;
  background-size: cover; }
  @media screen and (min-height: 1800px) {
    .hero {
      background-position: 50% 25%; } }
  @media screen and (max-width: 1135px) {
    .hero {
      background-position: 60% 0%; } }
  @media screen and (max-width: 955px) {
    .hero {
      background-position: 65% 0%; } }
  @media screen and (max-width: 852px) {
    .hero {
      background-position: 80% 100%; } }
  @media screen and (max-width: 524px) {
    .hero {
      justify-content: space-between; } }
  @media screen and (min-height: 1300px) {
    .hero {
      background-position: 70% 100%; } }
  @media screen and (max-height: 450px) {
    .hero {
      background-position: 10% 100%; } }
  .hero .hamburger {
    color: white;
    margin: 1em 1em 0 0;
    font-size: 3em;
    cursor: pointer; }
    @media screen and (min-width: 525px) {
      .hero .hamburger {
        display: none;
        height: 0;
        width: 0; } }
  .hero .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 15%;
    margin-right: 7.813em; }
    @media screen and (max-width: 1135px) {
      .hero .nav {
        margin-right: 6.5em; } }
    @media screen and (max-width: 852px) {
      .hero .nav {
        padding-left: 2em; } }
    @media screen and (max-width: 780px) {
      .hero .nav {
        justify-content: flex-end;
        padding: 0 0 8em 3em;
        margin-right: 2em; } }
    @media screen and (max-width: 670px) {
      .hero .nav {
        margin-right: 1em; } }
    @media screen and (max-height: 450px) {
      .hero .nav {
        padding-bottom: 4em; } }
    @media screen and (max-width: 524px) {
      .hero .nav {
        display: none;
        height: 0;
        width: 0; } }
    .hero .nav ul {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 60%;
      margin-top: 2em;
      padding-left: 1em; }
      @media screen and (max-width: 780px) {
        .hero .nav ul {
          height: 70%; } }
      @media screen and (max-height: 450px) {
        .hero .nav ul {
          height: 60%; } }
    .hero .nav li a {
      text-decoration: none;
      color: #D8BFAA; }
      .hero .nav li a:hover, .hero .nav li a:active {
        color: #EBF5EE; }
      @media screen and (max-width: 780px) {
        .hero .nav li a {
          font-size: 1.3em; } }
      @media screen and (max-width: 525px) {
        .hero .nav li a {
          font-size: 1em; } }
  .hero .header {
    display: flex;
    flex-direction: column;
    height: 78%;
    width: 37%;
    align-items: flex-end;
    justify-content: center;
    margin: 1em 1.25em 0 0;
    color: #BFD1E5; }
    @media screen and (min-width: 1600px) {
      .hero .header {
        width: 38.625em; } }
    @media screen and (min-width: 1800px) {
      .hero .header {
        width: 37%; } }
    @media screen and (min-width: 2450px) {
      .hero .header {
        width: 38.625em; } }
    @media screen and (min-width: 2560px) {
      .hero .header {
        width: 42%; } }
    @media screen and (min-width: 2850px) {
      .hero .header {
        width: 38.625em; } }
    @media screen and (min-width: 3250px) {
      .hero .header {
        width: 37%; } }
    @media screen and (min-width: 4050px) {
      .hero .header {
        width: 38.625em; } }
    @media screen and (min-width: 4550px) {
      .hero .header {
        width: 37%; } }
    @media screen and (max-width: 852px) {
      .hero .header {
        margin-top: 10%;
        justify-content: flex-start;
        width: 47%; } }
    @media screen and (max-width: 780px) {
      .hero .header {
        padding-left: 1em;
        width: 67%;
        margin-top: 12%; } }
    @media screen and (max-width: 670px) {
      .hero .header {
        width: 70%; } }
    @media screen and (max-width: 525px) {
      .hero .header {
        margin: 15% 0 0 10%;
        width: 85%; } }
    @media screen and (max-height: 450px) {
      .hero .header {
        margin-top: 10%;
        width: 55%; } }
    .hero .header .name {
      height: 10.5em;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end; }
      .hero .header .name .first-name {
        align-self: flex-start; }
      @media screen and (max-width: 670px) {
        .hero .header .name {
          height: 10.5em;
          width: 100%;
          flex-direction: column;
          align-items: flex-end; }
          .hero .header .name .first-name {
            align-self: flex-start; } }
      @media screen and (min-width: 1600px) {
        .hero .header .name {
          flex-direction: row;
          align-items: flex-end;
          justify-content: space-between; }
          .hero .header .name .first-name {
            align-self: flex-end; } }
      @media screen and (min-width: 1800px) {
        .hero .header .name {
          height: 10.5em;
          width: 100%;
          flex-direction: column;
          align-items: flex-end; }
          .hero .header .name .first-name {
            align-self: flex-start; } }
      @media screen and (min-width: 2450px) {
        .hero .header .name {
          flex-direction: row;
          align-items: flex-end;
          justify-content: space-between; }
          .hero .header .name .first-name {
            align-self: flex-end; } }
      @media screen and (min-width: 2560px) {
        .hero .header .name {
          height: 10.5em;
          width: 100%;
          flex-direction: column;
          align-items: flex-end; }
          .hero .header .name .first-name {
            align-self: flex-start; } }
      @media screen and (min-width: 2850px) {
        .hero .header .name {
          flex-direction: row;
          align-items: flex-end;
          justify-content: space-between; }
          .hero .header .name .first-name {
            align-self: flex-end; } }
      @media screen and (min-width: 3250px) {
        .hero .header .name {
          height: 10.5em;
          width: 100%;
          flex-direction: column;
          align-items: flex-end; }
          .hero .header .name .first-name {
            align-self: flex-start; } }
      @media screen and (min-width: 4050px) {
        .hero .header .name {
          flex-direction: row;
          align-items: flex-end;
          justify-content: space-between; }
          .hero .header .name .first-name {
            align-self: flex-end; } }
      @media screen and (min-width: 4550px) {
        .hero .header .name {
          height: 10.5em;
          width: 100%;
          flex-direction: column;
          align-items: flex-end; }
          .hero .header .name .first-name {
            align-self: flex-start; } }
      @media screen and (max-width: 780px) {
        .hero .header .name {
          font-size: 1.25em; } }
      @media screen and (max-width: 525px) {
        .hero .header .name {
          font-size: 1em; } }
    .hero .header .skills {
      display: flex;
      align-self: flex-end;
      color: #D8BFAA;
      padding: 1.5em .02em 0 0; }

.intro {
  color: #2F195F;
  margin: 7% 10%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  text-align: center; }

.projects-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #2F195F;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  margin: 1em 1em 3.5em; }
  .projects-header .separator-line {
    height: .075em;
    width: 35%;
    margin: .5em;
    background-color: #2F195F; }
  .projects-header h3 {
    white-space: nowrap;
    overflow: none; }

.participate {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  position: relative;
  margin: 8em 0 15em; }
  @media screen and (max-width: 670px) {
    .participate {
      flex-direction: column;
      align-items: center;
      margin-bottom: 8em; } }
  .participate .dropdown-content {
    opacity: 0;
    position: absolute; }
    @media screen and (max-width: 1024px) {
      .participate .dropdown-content {
        opacity: 1;
        margin-top: 4em; } }
  @media screen and (min-width: 1025px) {
    .participate:hover #dark-vanilla {
      transition: all .75s ease-out;
      transform: translateX(7.4em); }
    .participate:hover #antiflash-white {
      transition: all .75s ease-out;
      transform: translateX(5.525em); }
    .participate:hover #pale-aqua {
      transition: all .75s ease-out;
      transform: translateX(3.65em); }
    .participate:hover #buff {
      transition: all .75s ease-out;
      transform: translateX(1.775em); }
    .participate:hover .dropdown-content {
      opacity: 1;
      transition: all .5s ease 1s;
      transform: translateY(3.5em); } }
  .participate .part-image img {
    margin-right: 5em;
    height: auto;
    width: 27vw;
    border-radius: .75em; }
    @media screen and (max-width: 670px) {
      .participate .part-image img {
        width: 70%;
        margin: 0; } }
  @media screen and (max-width: 670px) {
    .participate .part-image {
      display: flex;
      justify-content: center;
      align-items: center; } }
  .participate .project {
    color: black;
    height: 30%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin: 10em 10em 0 3.5em; }
    @media screen and (max-width: 670px) {
      .participate .project {
        margin: 3em 0 0 0;
        align-items: center; } }
    .participate .project .colors-bar {
      width: 17.146em;
      height: .75em;
      margin-bottom: .5em; }
      .participate .project .colors-bar .color {
        display: inline-block;
        width: 1.75em;
        height: 100%; }
        @media screen and (max-width: 1024px) {
          .participate .project .colors-bar .color {
            margin-right: 1.84em; } }
      .participate .project .colors-bar #violet {
        background-color: #2F195F; }
      .participate .project .colors-bar #buff {
        background-color: #F2D492; }
      .participate .project .colors-bar #pale-aqua {
        background-color: #BFD1E5; }
      .participate .project .colors-bar #antiflash-white {
        background-color: #EBF5EE; }
      .participate .project .colors-bar #dark-vanilla {
        background-color: #D8BFAA; }
        @media screen and (max-width: 1024px) {
          .participate .project .colors-bar #dark-vanilla {
            margin: 0; } }
    .participate .project .title {
      white-space: nowrap;
      overflow: none; }
      .participate .project .title h2 {
        text-align: center; }
      .participate .project .title .dropdown-content {
        display: flex;
        width: 17.188em;
        height: 5.8em;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        background-color: #E4E2E2; }
        .participate .project .title .dropdown-content p {
          overflow-x: visible;
          white-space: normal; }
        .participate .project .title .dropdown-content a {
          color: #2F195F;
          text-decoration: none; }
          .participate .project .title .dropdown-content a:hover {
            color: #D8BFAA; }
    .participate .project .tools-used {
      display: flex;
      width: 17.188em;
      justify-content: center;
      margin-top: 1em; }

.bjork {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 10em; }
  @media screen and (max-width: 670px) {
    .bjork {
      margin: 15em 0 4em; } }
  .bjork .dropdown-content {
    opacity: 0;
    position: absolute; }
    @media screen and (max-width: 1024px) {
      .bjork .dropdown-content {
        opacity: 1;
        margin-top: 3.5em; } }
  .bjork .bjork-image {
    margin-right: 2em; }
    @media screen and (max-width: 670px) {
      .bjork .bjork-image {
        width: 94%;
        margin-right: 0; } }
    .bjork .bjork-image img {
      height: auto;
      width: 85vw;
      border-radius: .75em; }
      @media screen and (max-width: 670px) {
        .bjork .bjork-image img {
          width: 100%; } }
  @media screen and (min-width: 1025px) {
    .bjork:hover #dark-vanilla {
      transition: all .75s ease-out;
      transform: translateX(23.063em); }
    .bjork:hover #antiflash-white {
      transition: all .75s ease-out;
      transform: translateX(17.297em); }
    .bjork:hover #pale-aqua {
      transition: all .75s ease-out;
      transform: translateX(11.416em); }
    .bjork:hover #buff {
      transition: all .75s ease-out;
      transform: translateX(5.48em); }
    .bjork:hover .dropdown-content {
      opacity: 1;
      transition: all .5s ease 1s;
      transform: translateY(3.5em); } }
  .bjork .project {
    align-self: flex-start;
    color: black;
    height: 30%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin: 3em 3.75em 10em 10em; }
    @media screen and (max-width: 670px) {
      .bjork .project {
        width: 70%;
        margin: 3em 0 10em 0;
        align-self: center;
        align-items: center; } }
    .bjork .project .colors-bar {
      width: 32.875em;
      height: .75em;
      margin-bottom: .5em; }
      .bjork .project .colors-bar .color {
        display: inline-block;
        width: 1.75em;
        height: 100%; }
        @media screen and (max-width: 1024px) {
          .bjork .project .colors-bar .color {
            margin-right: 5.74em; } }
      .bjork .project .colors-bar #violet {
        background-color: #2F195F; }
      .bjork .project .colors-bar #buff {
        background-color: #F2D492; }
      .bjork .project .colors-bar #pale-aqua {
        background-color: #BFD1E5; }
      .bjork .project .colors-bar #antiflash-white {
        background-color: #EBF5EE; }
      .bjork .project .colors-bar #dark-vanilla {
        background-color: #D8BFAA; }
        @media screen and (max-width: 1024px) {
          .bjork .project .colors-bar #dark-vanilla {
            margin: 0; } }
    .bjork .project .title {
      white-space: nowrap;
      overflow: none; }
      .bjork .project .title .dropdown-content {
        display: flex;
        width: 32.875em;
        height: 4.8em;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        background-color: #E4E2E2; }
        .bjork .project .title .dropdown-content p {
          overflow-x: visible;
          white-space: normal; }
        .bjork .project .title .dropdown-content a {
          color: #2F195F;
          text-decoration: none; }
          .bjork .project .title .dropdown-content a:hover {
            color: #D8BFAA; }
    .bjork .project .tools-used {
      display: flex;
      width: 32.875em;
      justify-content: center;
      margin-top: 1em; }

.bach-to-tupac {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: auto;
  position: relative;
  margin: 5em 0 15em; }
  @media screen and (max-width: 670px) {
    .bach-to-tupac {
      flex-direction: column;
      align-items: center;
      margin-bottom: 10em; } }
  .bach-to-tupac .dropdown-content {
    opacity: 0;
    position: absolute; }
    @media screen and (max-width: 1024px) {
      .bach-to-tupac .dropdown-content {
        opacity: 1;
        margin-top: 4em; } }
  @media screen and (min-width: 1025px) {
    .bach-to-tupac:hover #dark-vanilla {
      transition: all .75s ease-out;
      transform: translateX(7.4em); }
    .bach-to-tupac:hover #antiflash-white {
      transition: all .75s ease-out;
      transform: translateX(5.525em); }
    .bach-to-tupac:hover #pale-aqua {
      transition: all .75s ease-out;
      transform: translateX(3.65em); }
    .bach-to-tupac:hover #buff {
      transition: all .75s ease-out;
      transform: translateX(1.775em); }
    .bach-to-tupac:hover .dropdown-content {
      opacity: 1;
      transition: all .5s ease 1s;
      transform: translateY(3.5em); } }
  .bach-to-tupac .btt-image {
    margin-left: 2em; }
    .bach-to-tupac .btt-image img {
      height: auto;
      width: 54vw;
      border-radius: .75em; }
      @media screen and (max-width: 670px) {
        .bach-to-tupac .btt-image img {
          width: 94%; } }
  .bach-to-tupac .project {
    color: black;
    height: 30%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin: 10em 3.75em 0 3.5em; }
    @media screen and (max-width: 670px) {
      .bach-to-tupac .project {
        margin-top: 3em;
        align-items: center; } }
    .bach-to-tupac .project .colors-bar {
      width: 17.146em;
      height: .75em;
      margin-bottom: .5em; }
      .bach-to-tupac .project .colors-bar .color {
        display: inline-block;
        width: 1.75em;
        height: 100%; }
        @media screen and (max-width: 1024px) {
          .bach-to-tupac .project .colors-bar .color {
            margin-right: 1.84em; } }
      .bach-to-tupac .project .colors-bar #violet {
        background-color: #2F195F; }
      .bach-to-tupac .project .colors-bar #buff {
        background-color: #F2D492; }
      .bach-to-tupac .project .colors-bar #pale-aqua {
        background-color: #BFD1E5; }
      .bach-to-tupac .project .colors-bar #antiflash-white {
        background-color: #EBF5EE; }
      .bach-to-tupac .project .colors-bar #dark-vanilla {
        background-color: #D8BFAA; }
        @media screen and (max-width: 1024px) {
          .bach-to-tupac .project .colors-bar #dark-vanilla {
            margin: 0; } }
    .bach-to-tupac .project .title {
      white-space: nowrap;
      overflow: none; }
      .bach-to-tupac .project .title .dropdown-content {
        display: flex;
        width: 17.188em;
        height: 5.8em;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        background-color: #E4E2E2; }
        .bach-to-tupac .project .title .dropdown-content p {
          overflow-x: visible;
          white-space: normal; }
        .bach-to-tupac .project .title .dropdown-content a {
          color: #2F195F;
          text-decoration: none; }
          .bach-to-tupac .project .title .dropdown-content a:hover {
            color: #D8BFAA; }
    .bach-to-tupac .project .tools-used {
      display: flex;
      width: 17.188em;
      justify-content: center;
      margin-top: 1em; }

.cart-modal {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 13em; }
  @media screen and (max-width: 670px) {
    .cart-modal {
      padding-bottom: 20em;
      padding-top: 5em; } }
  @media screen and (max-width: 525px) {
    .cart-modal {
      margin-bottom: 12em; } }
  @media screen and (max-width: 415px) {
    .cart-modal {
      margin-bottom: 16em; } }
  @media screen and (max-width: 330px) {
    .cart-modal {
      margin-bottom: 12em; } }
  .cart-modal .dropdown-content {
    opacity: 0;
    position: absolute; }
    @media screen and (max-width: 1024px) {
      .cart-modal .dropdown-content {
        opacity: 1;
        margin-top: 4em; } }
  @media screen and (min-width: 1025px) {
    .cart-modal:hover #dark-vanilla {
      transition: all .75s ease-out;
      transform: translateX(15.563em); }
    .cart-modal:hover #antiflash-white {
      transition: all .75s ease-out;
      transform: translateX(11.672em); }
    .cart-modal:hover #pale-aqua {
      transition: all .75s ease-out;
      transform: translateX(7.673em); }
    .cart-modal:hover #buff {
      transition: all .75s ease-out;
      transform: translateX(3.66em); }
    .cart-modal:hover .dropdown-content {
      opacity: 1;
      transition: all .5s ease 1s;
      transform: translateY(3.5em); } }
  .cart-modal .cart-modal-image {
    margin-right: 2em; }
    @media screen and (max-width: 970px) {
      .cart-modal .cart-modal-image {
        margin-right: 1.5em; } }
    @media screen and (max-width: 900px) {
      .cart-modal .cart-modal-image {
        margin-right: 1em; } }
    @media screen and (max-width: 670px) {
      .cart-modal .cart-modal-image {
        width: 94%;
        margin-right: 0; } }
    .cart-modal .cart-modal-image img {
      height: auto;
      width: 50vw;
      border-radius: .75em; }
      @media screen and (max-width: 852px) {
        .cart-modal .cart-modal-image img {
          width: 65vw; } }
      @media screen and (max-width: 670px) {
        .cart-modal .cart-modal-image img {
          width: 100%; } }
  .cart-modal .project {
    color: black;
    height: 30%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin: 2em 3.5em 0 7.5em; }
    @media screen and (max-width: 970px) {
      .cart-modal .project {
        margin-left: 6em; } }
    @media screen and (max-width: 852px) {
      .cart-modal .project {
        margin: 3.5em 3.5em 0 3.5em;
        align-items: center; } }
    @media screen and (max-width: 670px) {
      .cart-modal .project {
        width: 70%;
        margin: 3.5em 0 0; } }
    @media screen and (max-width: 475px) {
      .cart-modal .project {
        margin-bottom: 4em; } }
    .cart-modal .project .colors-bar {
      width: 25.375em;
      height: .75em;
      margin-bottom: .5em; }
      .cart-modal .project .colors-bar .color {
        display: inline-block;
        width: 1.75em;
        height: 100%; }
        @media screen and (max-width: 1024px) {
          .cart-modal .project .colors-bar .color {
            margin-right: 3.9em; } }
      .cart-modal .project .colors-bar #violet {
        background-color: #2F195F; }
      .cart-modal .project .colors-bar #buff {
        background-color: #F2D492; }
      .cart-modal .project .colors-bar #pale-aqua {
        background-color: #BFD1E5; }
      .cart-modal .project .colors-bar #antiflash-white {
        background-color: #EBF5EE; }
      .cart-modal .project .colors-bar #dark-vanilla {
        background-color: #D8BFAA; }
        @media screen and (max-width: 1024px) {
          .cart-modal .project .colors-bar #dark-vanilla {
            margin: 0; } }
    .cart-modal .project .title {
      white-space: nowrap;
      overflow: none; }
      .cart-modal .project .title .dropdown-content {
        display: flex;
        width: 25.375em;
        height: 4.8em;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        background-color: #E4E2E2; }
        .cart-modal .project .title .dropdown-content p {
          overflow-x: visible;
          white-space: normal; }
        .cart-modal .project .title .dropdown-content a {
          color: #2F195F;
          text-decoration: none; }
          .cart-modal .project .title .dropdown-content a:hover {
            color: #D8BFAA; }
    .cart-modal .project .tools-used {
      display: flex;
      width: 25.375em;
      justify-content: center;
      margin-top: 1em; }
  @media screen and (max-width: 852px) {
    .cart-modal {
      flex-direction: column;
      align-items: center;
      height: 35em; } }

.wireframes {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 6em; }
  @media screen and (max-width: 670px) {
    .wireframes {
      flex-direction: column;
      align-items: center;
      padding-bottom: 10em; } }
  .wireframes .dropdown-content {
    opacity: 0;
    position: absolute; }
    @media screen and (max-width: 1024px) {
      .wireframes .dropdown-content {
        opacity: 1;
        margin-top: 3.5em; } }
  @media screen and (min-width: 1025px) {
    .wireframes:hover #dark-vanilla {
      transition: all .75s ease-out;
      transform: translateX(4.625em); }
    .wireframes:hover #antiflash-white {
      transition: all .75s ease-out;
      transform: translateX(3.469em); }
    .wireframes:hover #pale-aqua {
      transition: all .75s ease-out;
      transform: translateX(2.289em); }
    .wireframes:hover #buff {
      transition: all .75s ease-out;
      transform: translateX(1.15em); }
    .wireframes:hover .dropdown-content {
      opacity: 1;
      transition: all .5s ease 1s;
      transform: translateY(3.5em); } }
  .wireframes .wireframes-images {
    margin-left: 2em;
    display: flex;
    align-items: center; }
    @media screen and (max-width: 670px) {
      .wireframes .wireframes-images {
        width: 94%;
        margin: 0;
        justify-content: space-between; } }
    .wireframes .wireframes-images img {
      height: auto;
      width: 25vw;
      border-radius: .75em;
      margin-left: 2em; }
      @media screen and (max-width: 670px) {
        .wireframes .wireframes-images img {
          height: auto;
          width: 49%;
          margin-left: 0; } }
  .wireframes .project {
    color: black;
    height: 30%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin: 10em 3.5em 0 3.75em; }
    @media screen and (max-width: 670px) {
      .wireframes .project {
        margin-top: 5em; } }
    .wireframes .project .colors-bar {
      width: 14.438em;
      height: .75em;
      margin-bottom: .5em; }
      .wireframes .project .colors-bar .color {
        display: inline-block;
        width: 1.75em;
        height: 100%; }
        @media screen and (max-width: 1024px) {
          .wireframes .project .colors-bar .color {
            margin-right: 1.15em; } }
      .wireframes .project .colors-bar #violet {
        background-color: #2F195F; }
      .wireframes .project .colors-bar #buff {
        background-color: #F2D492; }
      .wireframes .project .colors-bar #pale-aqua {
        background-color: #BFD1E5; }
      .wireframes .project .colors-bar #antiflash-white {
        background-color: #EBF5EE; }
      .wireframes .project .colors-bar #dark-vanilla {
        background-color: #D8BFAA; }
        @media screen and (max-width: 1024px) {
          .wireframes .project .colors-bar #dark-vanilla {
            margin: 0; } }
    .wireframes .project .title {
      white-space: nowrap;
      overflow: none; }
      .wireframes .project .title .dropdown-content {
        display: flex;
        width: 14.438em;
        height: 6.8em;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        background-color: #E4E2E2; }
        .wireframes .project .title .dropdown-content p {
          overflow-x: visible;
          white-space: normal; }
        .wireframes .project .title .dropdown-content a {
          color: #2F195F;
          text-decoration: none; }
          .wireframes .project .title .dropdown-content a:hover {
            color: #D8BFAA; }
        .wireframes .project .title .dropdown-content h5 {
          margin-top: .3em; }
        .wireframes .project .title .dropdown-content #footnote {
          padding-bottom: .4em; }
    .wireframes .project .tools-used {
      display: flex;
      width: 14.438em;
      justify-content: center;
      margin-top: 1em; }

.happy-bday {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 10em; }
  @media screen and (max-width: 670px) {
    .happy-bday {
      margin: 15em 0 4em; } }
  .happy-bday .dropdown-content {
    opacity: 0;
    position: absolute; }
    @media screen and (max-width: 1024px) {
      .happy-bday .dropdown-content {
        opacity: 1;
        margin-top: 3.5em; } }
  .happy-bday .bday-image {
    margin-right: 2em; }
    @media screen and (max-width: 670px) {
      .happy-bday .bday-image {
        width: 94%;
        margin-right: 0; } }
    .happy-bday .bday-image img {
      height: auto;
      width: 85vw;
      border-radius: .75em; }
      @media screen and (max-width: 670px) {
        .happy-bday .bday-image img {
          width: 100%; } }
  @media screen and (min-width: 1025px) {
    .happy-bday:hover #dark-vanilla {
      transition: all .75s ease-out;
      transform: translateX(23.063em); }
    .happy-bday:hover #antiflash-white {
      transition: all .75s ease-out;
      transform: translateX(17.297em); }
    .happy-bday:hover #pale-aqua {
      transition: all .75s ease-out;
      transform: translateX(11.416em); }
    .happy-bday:hover #buff {
      transition: all .75s ease-out;
      transform: translateX(5.48em); }
    .happy-bday:hover .dropdown-content {
      opacity: 1;
      transition: all .5s ease 1s;
      transform: translateY(3.5em); } }
  .happy-bday .project {
    align-self: flex-start;
    color: black;
    height: 30%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin: 3em 3.75em 10em 14em; }
    .happy-bday .project h2 {
      text-align: center; }
    @media screen and (max-width: 670px) {
      .happy-bday .project {
        width: 70%;
        margin: 3em 0 10em 0;
        align-self: center;
        align-items: center; } }
    .happy-bday .project .colors-bar {
      width: 32.875em;
      height: .75em;
      margin-bottom: .5em; }
      .happy-bday .project .colors-bar .color {
        display: inline-block;
        width: 1.75em;
        height: 100%; }
        @media screen and (max-width: 1024px) {
          .happy-bday .project .colors-bar .color {
            margin-right: 5.74em; } }
      .happy-bday .project .colors-bar #violet {
        background-color: #2F195F; }
      .happy-bday .project .colors-bar #buff {
        background-color: #F2D492; }
      .happy-bday .project .colors-bar #pale-aqua {
        background-color: #BFD1E5; }
      .happy-bday .project .colors-bar #antiflash-white {
        background-color: #EBF5EE; }
      .happy-bday .project .colors-bar #dark-vanilla {
        background-color: #D8BFAA; }
        @media screen and (max-width: 1024px) {
          .happy-bday .project .colors-bar #dark-vanilla {
            margin: 0; } }
    .happy-bday .project .title {
      white-space: nowrap;
      overflow: none; }
      .happy-bday .project .title .dropdown-content {
        display: flex;
        width: 32.875em;
        height: 4.8em;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        background-color: #E4E2E2; }
        .happy-bday .project .title .dropdown-content p {
          overflow-x: visible;
          white-space: normal; }
        .happy-bday .project .title .dropdown-content a {
          color: #2F195F;
          text-decoration: none; }
          .happy-bday .project .title .dropdown-content a:hover {
            color: #D8BFAA; }
    .happy-bday .project .tools-used {
      display: flex;
      width: 32.875em;
      justify-content: center;
      margin-top: 1em; }

.footer {
  display: flex;
  justify-content: center;
  letter-spacing: .2em;
  align-items: center;
  width: 100%;
  height: 6.25em;
  background-color: #00021C;
  color: #D8BFAA; }

#about-mobile-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #000016;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 3.75em; }
  #about-mobile-nav a {
    padding: 1em .5em .5em 2em;
    text-decoration: none;
    color: #D8BFAA;
    font-size: 28px;
    display: block;
    transition: 0.3s;
    font-family: 'Roboto Condensed', sans-serif; }
    #about-mobile-nav a:hover, #about-mobile-nav a:active {
      color: #EBF5EE; }
  #about-mobile-nav .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 3.125em; }
  #about-mobile-nav .closebtn {
    font-size: 4em;
    padding-left: .75em; }

#wrapper {
  max-width: 5120px;
  background-color: #E4E2E2;
  transition: .5s; }

.about-header {
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  background-image: url("../img/about page lg.png");
  background-position: center 85%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; }
  @media screen and (max-width: 900px) {
    .about-header {
      background-position: 99% 85%; } }
  @media screen and (max-width: 500px) {
    .about-header {
      background-size: cover;
      background-position: 90% 50%; } }
  .about-header .hamburger {
    color: white;
    margin: 1em 1em 0 1em;
    font-size: 3em;
    cursor: pointer; }
    @media screen and (min-width: 779px) {
      .about-header .hamburger {
        display: none;
        height: 0;
        width: 0; } }
  .about-header .about-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 15%;
    font-size: 1.5em;
    margin-right: 2em; }
    @media screen and (max-width: 1135px) {
      .about-header .about-nav {
        margin-right: 6.5em; } }
    @media screen and (max-width: 852px) {
      .about-header .about-nav {
        padding-left: 2em; } }
    @media screen and (max-width: 780px) {
      .about-header .about-nav {
        display: none;
        height: 0;
        width: 0; } }
    .about-header .about-nav ul {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 60%;
      margin-top: 2em;
      padding-left: 1em; }
      @media screen and (max-width: 780px) {
        .about-header .about-nav ul {
          height: 70%; } }
    .about-header .about-nav li a {
      text-decoration: none;
      color: #D8DCFF; }
      .about-header .about-nav li a:hover, .about-header .about-nav li a:active {
        color: #EBF5EE; }

.qa {
  background-color: #52489C;
  color: white; }
  .qa .qa-title {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4em;
    padding-top: 4em;
    border-top: 1em solid black; }
    .qa .qa-title h4 {
      line-height: 2em; }
    @media screen and (max-width: 575px) {
      .qa .qa-title h2 {
        line-height: 1.5em; } }
  .qa .qa-content {
    margin: 0 5em 0 5em; }
    .qa .qa-content p {
      line-height: 2.5em;
      font-size: 1.2em; }

.about-footer {
  background-color: #3F3047;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6.25em;
  letter-spacing: .2em;
  color: #98B9AB; }

#con-mobile-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #0C090D;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 3.75em; }
  #con-mobile-nav a {
    padding: 1em .5em .5em 2em;
    text-decoration: none;
    color: #DD99BB;
    font-size: 28px;
    display: block;
    transition: 0.3s;
    font-family: 'Roboto Condensed', sans-serif; }
    #con-mobile-nav a:hover, #con-mobile-nav a:active {
      color: #FFF8F0; }
  #con-mobile-nav .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 3.125em; }
  #con-mobile-nav .closebtn {
    font-size: 4em;
    padding-left: .75em; }

#wrapper {
  max-width: 5120px;
  background-color: #E4E2E2;
  transition: .5s; }

.contacts-page {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100vh;
  width: 100%;
  background-color: #362C28; }
  .contacts-page .hamburger {
    color: white;
    margin: 1em 1em 0 1em;
    font-size: 3em;
    cursor: pointer; }
    @media screen and (min-width: 779px) {
      .contacts-page .hamburger {
        display: none;
        height: 0;
        width: 0; } }
  .contacts-page .contacts-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: 15%;
    margin-right: 1em; }
    @media screen and (max-width: 1135px) {
      .contacts-page .contacts-nav {
        margin-right: 4em; } }
    @media screen and (max-width: 852px) {
      .contacts-page .contacts-nav {
        padding-left: 1em; } }
    @media screen and (max-width: 780px) {
      .contacts-page .contacts-nav {
        display: none;
        height: 0;
        width: 0; } }
    .contacts-page .contacts-nav ul {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 60%;
      margin-top: 2em;
      padding-left: 4em; }
      @media screen and (max-width: 780px) {
        .contacts-page .contacts-nav ul {
          height: 70%; } }
    .contacts-page .contacts-nav li a {
      text-decoration: none;
      color: #DD99BB; }
      .contacts-page .contacts-nav li a:hover, .contacts-page .contacts-nav li a:active {
        color: #EBF5EE; }
  .contacts-page .contacts {
    display: flex;
    flex-direction: column;
    height: 75%;
    width: 68%;
    align-items: center;
    justify-content: center;
    margin-right: 6em; }
    @media screen and (max-width: 780px) {
      .contacts-page .contacts {
        width: 100%; } }
    .contacts-page .contacts h2 {
      color: #FFF8F0;
      line-height: 2em;
      font-size: 3em; }
      @media screen and (max-width: 1134px) {
        .contacts-page .contacts h2 {
          font-size: 3.5em; } }
      @media screen and (max-width: 878px) {
        .contacts-page .contacts h2 {
          font-size: 3em; } }
      @media screen and (max-width: 670px) {
        .contacts-page .contacts h2 {
          font-size: 2.5em; } }
      @media screen and (max-width: 590px) {
        .contacts-page .contacts h2 {
          font-size: 2em; } }
      @media screen and (max-width: 375px) {
        .contacts-page .contacts h2 {
          font-size: 1.5em; } }
    .contacts-page .contacts a {
      text-decoration: none;
      color: #C0FDFB; }
      .contacts-page .contacts a:hover, .contacts-page .contacts a:active {
        color: #598392; }

.contacts-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6.25em;
  letter-spacing: .2em;
  background-color: #0C090D;
  color: #DD99BB; }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 100%; }

h1 {
  font-size: 5.250em;
  font-family: 'Comfortaa', cursive; }

h2 {
  font-size: 2.5em;
  font-family: 'Comfortaa', cursive; }

h3 {
  font-size: 1.75em;
  line-height: 1.4; }

h4 {
  font-size: 1.5em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  letter-spacing: .2em; }

li, h5 {
  font-size: 1.5em;
  font-family: 'Roboto Condensed', sans-serif; }

p {
  font-size: 1em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 1.2em; }

@media screen and (max-width: 1134px) {
  html {
    font-size: .75em; } }
@media screen and (min-width: 1135px) {
  html {
    font-size: 1em; } }
@media screen and (min-width: 1800px) {
  html {
    font-size: 1.5em; } }
@media screen and (min-width: 2560px) {
  html {
    font-size: 2em; } }
@media screen and (min-width: 3250px) {
  html {
    font-size: 2.5em; } }
@media screen and (min-width: 4550px) {
  html {
    font-size: 3.5em; } }
@media screen and (max-width: 413px) {
  html {
    font-size: .55em; } }
@media screen and (max-height: 450px) {
  html {
    font-size: .55em; } }
@media screen and (max-height: 325px) {
  html {
    font-size: .45em; } }
@media screen and (max-width: 1024px) {
  .project {
    font-size: 1.2em; } }
@media screen and (max-width: 800px) {
  .project {
    font-size: 1em; } }

/*# sourceMappingURL=main.css.map */