* {
  box-sizing: border-box;
}
@font-face {
  font-family: 'museoReg';
  src: url('MuseoSans-300.woff2') format('woff2'),
      url('MuseoSans-300.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'museoBold';
  src: url('MuseoSans-700.woff2') format('woff2'),
      url('MuseoSans-700.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ! MOBILE QUERY */

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

  body {
      font-family: "Lato", sans-serif;
      margin: 0px;
    }
  
    h3 {
      font-size: 12px;
      letter-spacing: 3.5px;
      margin-top: 5px;
    }
    .sidenavMobile {
      height: 100%;
      width: 0px;
      position: fixed;
      z-index: 101;
      top: 0;
      left: 0;
      background-color: #1c3a3a;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
      
    }
    
    .sidenavMobile a {
      padding: 6px 0px 6px 0px;
      text-decoration: none;
      font-family: "museoBold";
      font-size: 25px;
      color: white;
      display: block;
      text-align: center;
      transition: all .2s ease-in-out;
    }
    
    .sidenavMobile a:active {
      transform: scale(1.05);
      background: #1c3a3a;
      color: #fff;
    }
    
    .sidenavMobile .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

    .logoNavMobile img {
      width: 100px;
      padding-bottom: 10px;
      padding-top: 20px;
    }

    .navSectionsMobile {
      width: 100%;
      height: 90px;
      background: #0a161c;
      margin-bottom: 10px;
    }

    .nav_icons_mobile {
      width: 35px;
      margin-top: 10px;
    }
    .menuBar {
      position: fixed;
      top: 10px;
      left: 10px;
      border-radius: 3px;
      z-index: 100;
      padding: 3px 10px 10px 10px;
      color: #fff;
      background-color: #1c3a3a;
      font-size: 40px;
      line-height: 1;
      cursor: pointer;
    }

    .sidenavMobile {padding-top: 15px;}
    .sidenavMobile a {font-size: 18px;}
    
    .sidenav {
      /* height: 100%;
      width: 200px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: pink;
      overflow-x: hidden;
      padding-top: 10px; */
      display: none;
    }
    
    /* .sidenav a {
      padding: 6px 0px 6px 0px;
      text-decoration: none;
      font-family: "museoBold";
      font-size: 25px;
      color: white;
      display: block;
      text-align: center;
      transition: all .2s ease-in-out;
    }
    
    .sidenav a:hover {
      transform: scale(1.05);
      background: #1c3a3a;
      color: #fff;
    }
    
    .logoNav img {
      width: 120px;
      padding-bottom: 15px;
    }
  
    .navSections {
      width: 100%;
      height: 80px;
      background: #0a161c;
      margin-bottom: 10px;
    }
  
    .nav_icons {
      width: 35px;
      margin-top: 10px;
    } */
    
  
    .main {
      padding-left: 20px;
    }
  
    .skills_container {
      width: 100%;
      height: auto;
    }
    
    .skills_title {
      width: 80%;
      margin-top: -200px;
      margin-left: 50px;
      grid-area: title;
    }
    
    .skills_para {
      margin-top: -130px;
      width: 100%;
      font-family: museoBold;
      font-size: 10px;
      line-height: 20px;
      letter-spacing: 1.2px;
      text-align: center;
      padding: 0px 20px 20px;
      grid-area: para;
    }

    .tablet_desktop_about {
      display: none;    
    }
  
    .about_me_section {
      margin-top: -95px;
      grid-area: about;
    }

    .download_btn {
      width: 100%;
      background-color: #1c3a3a;
      border: none;
      color: #fff;
      padding: 20px 30px;
      cursor: pointer;
      font-size: 20px;
      margin-top: -20px;
      margin-bottom: 90px;
      border-radius: 0;

      font-family: 'museoReg';
      font-size: 15px;
      letter-spacing: 2.5px;
      transition: all .2s ease-in-out;
    }

    .download_btn:active {
      background-color: #0a161c;
      color: #e59b39;
      transform: scale(1.05);
    }

    .download_btn_desktop {
      display: none;
    }
    
    .skills_section {
      display: grid;
      grid-gap: 30px;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas: 
        "about"
        "title"
        "icons"
        "para";
    
      /* background-color: rgba(255, 0, 0, 0.3); */
      margin: 0 auto;
    
      width: 100%;
      height: 500px;
      max-width: 1100px;
    
      margin-top: 60px;
      margin-bottom: -100px;
      text-align: justify;
      hyphens: auto;
    }
  
    .icons {
      width: 100%;
      margin-top: -130px;
      padding: 60px;
      grid-area: icons;
    }
  
    .about_bg {
      position: absolute;
      margin-top: -160px;
      margin-left: 240px;
      z-index: 2001;
      width: 60%;
      height: auto;
    }
  
    .section3 {
      width: 100%;
      height: auto;
    }
  
    .portfolio {
      width: 96%;
  
      grid-area: portfolio;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "projectsHeader"
                          "img1"
                          "img2"
                          "img3"
                          "img4"
                          "img5"
                          "img6"
                          "img7"
                          "img8"
  }
  
  .interactiveHeader {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
    margin-bottom: 5px;
      grid-area: projectsHeader;
  }
  
  .img1 {
      grid-area: img1;
      display: block;
    width: 100%;
    height: auto;
  }
  
  .img2 {
      grid-area: img2;
  }
  
  .img3 {
      grid-area: img3;
  }
  
  .img4 {
      grid-area: img4;
  }
  
  .img5 {
      grid-area: img5;
  }
  
  .img6 {
      grid-area: img6;
  }
  
  .img7 {
    grid-area: img7;
  }
  
  .img8 {
    grid-area: img8;
  }
  
  .portfolio img {
      width: 100%;
  }
  
  .container {
  
    position: relative;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: .85;
    transition: .5s ease;
    background-color: #e59b39;
    cursor: pointer;
  }
  
  
  
  .text {
    color: white;
    font-family: 'museoBold';
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 2.5px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .section4 {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "design"
      "button1"
      "line1"
      "photography"
      "button2"
      "line2";
    width: 98.5%;
    height: auto;
    margin-top: 30px;
  }
  
  .gd_section {
    width: 97%;
    grid-area: design;
  }
  
  .p_section {
    width: 97%;
    grid-area: photography;

    margin-top: 30px;
  }
  
  .graphic_design_button {
    font-family: 'museoBold';
    grid-area: button1;
    margin-top: 15px;
    width: 100%;
    height: 25px;
    color: #0a161c;
    cursor: pointer;
    letter-spacing: 2.5px;
    transition: all .2s ease-in-out;
  }
  
  .underline1 {
    grid-area: line1;
    margin-top: -15px;
    width: 80%;
    height: 1.5px;
    background: #e59b39;
  }
  
  .graphic_design_button:hover {
    transform: scale(1.005);
    color: #e59b39;
  }
  
  .photography_button {
    font-family: 'museoBold';
    grid-area: button1;
    margin-top: 15px;
    width: 100%;
    height: 25px;
    color: #0a161c;
    cursor: pointer;
    letter-spacing: 2.5px;
    transition: all .2s ease-in-out;
  }
  
  .photography_button:hover {
    transform: scale(1.005);
    color: #e59b39;
  }
  
  .underline2 {
    grid-area: line2;
    margin-top: -15px;
    width: 80%;
    height: 1.5px;
    background: #e59b39;
  }
  
  .section4 a {
    text-decoration: none;
  }
  
  .section5 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "coffee"
      "contact";
    width: 95.5%;
    margin-top: 80px;
    margin-bottom: 35px;
    height: auto;
  }
  
  .section5 img {
    width: 100%;
  }
  
  .section5 h1 {
      color: #1c3a3a;
      font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
      text-transform: uppercase;
  }
  
  .contactFormbg {
    grid-area: contact;
      background: #fff;
      width: 80%;
      height: auto;
      overflow: hidden;
      margin-left: 40px;
      padding: 20px;
      
  }
  
  form {
  
      width: 100%;
      font-size: 2rem;
      text-align: left;
  }
  
  .contactLabel {
    color: #1c3a3a;
      font-family: 'museoReg';
    letter-spacing: 5px;
      font-size: 1rem;
      text-transform: uppercase;
      padding-bottom: 15px;
  }
  
  input {
    border-radius: 5px;
    font-family: "museoReg";
      font-size: 12px;
      letter-spacing: .3px;
  
      width: 99%;
      background: #1c3a3a;
      color: white;
      float: left;
      border: none;
      padding: 10px;
  }
  
  textarea {
    border-radius: 5px;
      font-family: "museoReg";
      font-size: 12px;
      letter-spacing: .3px;
  
      height: 70px;
      width:  99%;
      background: #1c3a3a;
      color: white;
      float: left;
      border: none;
      padding: 10px;
  }
  
  #name {
      margin-left: 0px;
      color: white;
  }
  
  #email {
      margin-left: 0px;
  }
  
  #subject {
      margin-left: 0px;
  }
  
  #message {
      margin-top: 0px;
  }
  
  button {
      font-family: "museoReg";
      font-size: 16px;
      letter-spacing: .3px;
      text-transform: uppercase;
  
      background: #1c3a3a;
      color: #fff;
      margin-top: 20px;
      padding: 10px 20px 10px 20px;
      border-radius: 5px;
      border: none;
      cursor: pointer;
  }
  
  
  
  
  
  /** Project Screen Styles */
  
  
  
  .sections_container {
    background-color: #f5f5f5;
    padding: 20px;
  }
  
  .project_titles {
    width: 100%;
    grid-area: title;
  }
  
  .sections_container p {
    margin: 0;
    width: 100%;
    grid-area: para;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .intro {
    height: auto;
  
    overflow: hidden;
    margin: 0 auto;
  
    width: 100%;
    max-width: 1100px;
  
    padding: 0px;
    margin-top: 60px;
  }
  
  .overview {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    margin-bottom: 0px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime1 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .about {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "para2"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime2 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .objective_challenges {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image"
      "para2";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }

  .objective_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .crime3 {
    width: 100%;
    grid-area: image;
  }
  
  .process {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image2"
      "para2"
      "image1";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }

  .process_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .crime4 {
    width: 100%;
    margin-top: -40px;
    grid-area: image1;
  }
  
  .crime5 {
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
    grid-area: image2;
  }
  
  .deliverable {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "button";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime_button {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
  
    height: 48px;
    grid-area: button;
    background-color: #e59b39;
    border: none;
    color: #0a161c;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 20px 2px;
    cursor: pointer;
  
    transition: all .2s ease-in-out;
  }
  
  .deliverable a:hover {
    transform: scale(1.008);
  
    color: #e59b39;
    background: #0a161c;
  }

  /* * RETAIL PROJECT 02 */

  .marketing_title {
    margin-top: 60px;
  }

  .about_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_overview {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr ;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    margin-bottom: 0px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .retail2 {
    width: 100%;
    grid-area: image;
  }
  
  .motion_graphics {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .motion1 {
    width: 100%;
    grid-area: image;
  }
  
  .interactive_catalogue {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .cata1 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .rotating_product {
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .rotate1 {
    width: 100%;
    grid-area: image;
  }
  
  .touchscreen_ordering {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title "
      "para"
      "image"
      "para2";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .order1 {
    width: 100%;
    grid-area: image;
  }
  
  .touchscreen_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process {
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "image1"
      "para"
      "para2"
      "para3"
      "image3"
      "para4"
      "link";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .bb_link{
    text-decoration: none;
    color: #e59b39;
    font-family: 'museoBold';
  }
  
  .retail_process_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process_para3 {
    grid-area: para3;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process_para4 {
    grid-area: para4;
  
    
    width: 95%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail4 {
    width: 100%;
    grid-area: image1;
  }
  
  .retail5 {
    width: 100%;
    grid-area: image3;
  }
  
  .marketing_button {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
  
    height: 60px;
    grid-area: link;
    background-color: #e59b39;
    border: none;
    color: #0a161c;
    padding: 20px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 2px;
    cursor: pointer;
  
    transition: all .2s ease-in-out;
  }
  
  .retail_process a:hover {
    transform: scale(1.008);
  
    color: #e59b39;
    background: #0a161c;
  }
  
  .demo_video_section {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "video";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .demo_video {
    width: 100%;
    grid-area: video;
  }
  
  /* * MARKETING MATERIALS PAGE */
  
  .marketing_materials {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "image1"
      "image2"
      "image3"
      "image4"
      "heading1"
      "h1"
      "video1_1"
      "h2"
      "video1_2"
      "h3"
      "video1_3"
      "h4"
      "video1_4"
  
      "heading2"
      "h5"
      "video2_1"
      "h6"
      "video2_2"
      "h7"
      "video2_3"
      "h8"
      "video2_4";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .heading1 {
    padding-top: 50px;
    padding-bottom: 30px;
    width: 100%;
    grid-area: heading1;
  }
  
  .heading2 {
    padding-top: 50px;
    padding-bottom: 30px;
    width: 100%;
    grid-area: heading2;
  }
  
  .standard {
    width: 100%;
    grid-area: h1;
    margin-bottom: 0px;
  }
  
  .story {
    width: 100%;
    grid-area: h2;
    margin-bottom: 0px;
  }
  
  .instagram {
    width: 100%;
    grid-area: h3;
    margin-bottom: 0px;
  }
  
  .facebook {
    width: 100%;
    grid-area: h4;
    margin-bottom: 0px;
  }
  
  .standard2 {
    width: 100%;
    grid-area: h5;
    margin-bottom: 0px;
  }
  
  .story2 {
    width: 100%;
    grid-area: h6;
    margin-bottom: 0px;
  }
  
  .instagram2 {
    width: 100%;
    grid-area: h7;
    margin-bottom: 0px;
  }
  
  .facebook2 {
    width: 100%;
    grid-area: h8;
    margin-bottom: 0px;
  }
  
  .mm1 {
    width: 100%;
    grid-area: image1;
  }
  
  .mm2 {
    width: 100%;
    grid-area: image2;
  }
  
  .mm3 {
    width: 100%;
    grid-area: image3;
  }
  
  .mm4 {
    width: 100%;
    grid-area: image4;
  }
  
  .video1_1 {
    width: 100%;
    grid-area: video1_1;
  }
  
  .video1_2 {
    width: 100%;
    grid-area: video1_2;
  }
  
  .video1_3 {
    width: 100%;
    grid-area: video1_3;
  }
  
  .video1_4 {
    width: 100%;
    grid-area: video1_4;
  }
  
  .video2_1 {
    width: 100%;
    grid-area: video2_1;
  }
  
  .video2_2 {
    width: 100%;
    grid-area: video2_2;
  }
  
  .video2_3 {
    width: 100%;
    grid-area: video2_3;
  }
  
  .video2_4 {
    width: 100%;
    grid-area: video2_4;
  }

  /** Covid Infographic */


.sections_container {
  background-color: #f5f5f5;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.covid_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 0px;
  margin-top: 60px;
}

.covid_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;


  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.covid1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.covid_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title "
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}



.covid_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}



.covid3 {
  width: 100%;
  grid-area: image;
}

.covid_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns:  1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.covid4 {
  width: 100%;
  grid-area: image1;
  border: 1px rgb(202, 202, 202) solid;
}

.covid_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.covid_vid {
  grid-area: video;
}

/** DC Digital Signage */


.sections_container {
  background-color: #f5f5f5;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;
  padding: 0px;
  margin-top: 60px;
}

.dc_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;


  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc1 {
  width: 100%;
  grid-area: image;
  display: none;
}

.dc_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "image"
     "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc2 {
  width: 100%;
  grid-area: image;
}

.dc_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.dc_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns:  1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2"
    "image1"
    "image2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc_process_para2 {
  grid-area: para2;

  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc4 {
  width: 100%;
  margin-top: 0px;
  grid-area: image1;
}

.dc5 {
  width: 100%;
  margin-top: 0px;
  margin-left: 0px;
  grid-area: image2;
}

.dc_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para"
     "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.dc_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.dc_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

/** Restaurant App */


.sections_container {
  background-color: #f5f5f5;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 0px;

  margin-top: 60px;
}

.res_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res1 {
  width: 100%;
  grid-area: image;
}

.res_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
  background-color: #979696;
}

.res_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res3 {
  width: 100%;
  grid-area: image;
}

.res_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title "
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.res_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.res_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

/** Sandwich Webpage */


.sections_container {
  background-color: #f5f5f5;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 0px;
  margin-top: 60px;
}

.sandwich_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich1 {
  width: 100%;
  grid-area: image;
}

.sandwich_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich2 {
  width: 100%;
  grid-area: image;
}

.sandwich_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.sandwich_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich4 {
  width: 100%;
  margin-top: -40px;
  grid-area: image1;
}

.sandwich_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.sandwich_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.sandwich_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}




.sections_container {
  background-color: #f5f5f5;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.lg_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 0px;
  margin-top: 60px;
}

.lg_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg1 {
  width: 100%;
  grid-area: image;
}

.lg_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.lg_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg4 {
  width: 100%;
  grid-area: image1;
  border: 1px rgb(202, 202, 202) solid;
}

.lg_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.lg_vid {
  grid-area: video;
}

/** Spring Break Matching Game */


.sections_container {
  background-color: #f5f5f5;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.spring_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 0px;
  margin-top: 60px;
}

.spring_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.spring_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring2 {
  width: 100%;
  grid-area: image;
}

.spring_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.spring_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.spring4 {
  width: 100%;
  grid-area: image1;
}

.spring_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.spring_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.spring_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

  /* * GRAPHIC DESIGN PAGE */

.gd_sections_container {
  background-color: #f5f5f5;
  padding: 20px;
  padding-bottom: 0px;
}

.gd_heading img {
  width: 100%;
  grid-area: title;
  margin-top: 90px;
  margin-bottom: 40px;
}

.gd_sections_container h1 {
  color: #0a161c;
  font-family: 'museoBold';
  font-size: 25px;
  letter-spacing: 2.5px;
  margin: 0;

  grid-area: sub;
  text-align: center;
  width: 100%;
}

.gd_sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.project1 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "sub"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image1 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project2 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "sub"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image2 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project3 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "sub"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image3 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project4 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "sub"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image4 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project5 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "sub"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;
  margin-bottom: 70px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image5 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}
  
  /** PHOTOGRAPHY PAGE  */
  
  .photography_heading img {
    width: 100%;
    grid-area: title;
    margin-top: 60px;
    margin-bottom: 0px;
    padding: 20px;
  }
  
  .photos_sections_container {
    padding: 65px;
    padding-bottom: 0px;
  }
  
  .photos_sections_container h1 {
    color: #0a161c;
    font-family: 'museoBold';
    font-size: 25px;
    letter-spacing: 2.5px;
    margin: 0;
    text-align: center;
  }
  
  .photos_sections_container p{
    margin: 0;
    width: 100%;
    grid-area: para;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .photos1 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "img1"
      "img2"
      "img3"
      "img4"
      "img5"
      "img6";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos1 h1 {
    grid-area: title;
  }
  
  .image1 {
    width: 100%;
    grid-area: img1;
  }
  
  .image2 {
    width: 100%;
    grid-area: img2;
  }
  
  .image3 {
    width: 100%;
    grid-area: img3;
  }
  
  .image4 {
    width: 100%;
    grid-area: img4;
  }
  
  .image5 {
    width: 100%;
    grid-area: img5;
  }
  
  .image6 {
    width: 100%;
    grid-area: img6;
  }
  
  .photos2 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img7"
    "img8"
    "img9"
    "img10"
    "img11"
    "img12"
    "img13"
    "img14"
    "img15"
    "img16"
    "img17"
    "img18"
    "img19"
    "img20";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos2 h1 {
    grid-area: title;
  }
  
  .image7 {
    width: 100%;
    grid-area: img7;
  }
  
  .image8 {
    width: 100%;
    grid-area: img8;
  }
  
  .image9 {
    width: 100%;
    grid-area: img9;
  }
  
  .image10 {
    width: 100%;
    grid-area: img10;
  }
  
  .image11 {
    width: 100%;
    grid-area: img11;
  }
  
  .image12 {
    width: 100%;
    grid-area: img12;
  }
  
  .image13 {
    width: 100%;
    grid-area: img13;
  }
  
  .image14 {
    width: 100%;
    grid-area: img14;
  }
  
  .image15 {
    width: 100%;
    grid-area: img15;
  }
  
  .image16 {
    width: 100%;
    grid-area: img16;
  }
  
  .image17 {
    width: 100%;
    grid-area: img17;
  }
  
  .image18 {
    width: 100%;
    grid-area: img18;
  }
  
  .image19 {
    width: 100%;
    grid-area: img19;
  }
  
  .image20 {
    width: 100%;
    grid-area: img20;
  }
  
  .photos3 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img21"
    "img22"
    "img23"
    "img24"
    "img25"
    "img26"
    "img27"
    "img28";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos3 h1 {
    grid-area: title;
  }
  
  .image21 {
    width: 100%;
    grid-area: img21;
  }
  
  .image22 {
    width: 100%;
    grid-area: img22;
  }
  
  .image23 {
    width: 100%;
    grid-area: img23;
  }
  
  .image24 {
    width: 100%;
    grid-area: img24;
  }
  
  .image25 {
    width: 100%;
    grid-area: img25;
  }
  
  .image26 {
    width: 100%;
    grid-area: img26;
  }
  
  .image27 {
    width: 100%;
    grid-area: img27;
  }
  
  .image28 {
    width: 100%;
    grid-area: img28;
  }
  
  .photos4 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img29"
    "img30"
    "img31"
    "img32";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos4 h1 {
    grid-area: title;
  }
  
  .image29 {
    width: 100%;
    grid-area: img29;
  }
  
  .image30 {
    width: 100%;
    grid-area: img30;
  }
  
  .image31 {
    width: 100%;
    grid-area: img31;
  }
  
  .image32 {
    width: 100%;
    grid-area: img32;
  }
  
  .photos5 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img33"
    "img34"
    "img35"
    "img36"
    "img37"
    "img38";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos5 h1 {
    grid-area: title;
  }
  
  .image33 {
    width: 100%;
    grid-area: img33;
  }
  
  .image34 {
    width: 100%;
    grid-area: img34;
  }
  
  .image35 {
    width: 100%;
    grid-area: img35;
  }
  
  .image36 {
    width: 100%;
    grid-area: img36;
  }
  
  .image37 {
    width: 100%;
    grid-area: img37;
  }
  
  .image38 {
    width: 100%;
    grid-area: img38;
  }
  
  .photos6 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img39"
    "img40"
    "img41"
    "img42"
    "img43"
    "img44"
    "img45"
    "img46"
    "img47"
    "img48"
    "img49"
    "img50"
    "img51"
    "img52";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
    margin-bottom: 40px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos6 h1 {
    grid-area: title;
  }
  
  .image39 {
    width: 100%;
    grid-area: img39;
  }
  
  .image40 {
    width: 100%;
    grid-area: img40;
  }
  
  .image41 {
    width: 100%;
    grid-area: img41;
  }
  
  .image42 {
    width: 100%;
    grid-area: img42;
  }
  
  .image43 {
    width: 100%;
    grid-area: img43;
  }
  
  .image44 {
    width: 100%;
    grid-area: img44;
  }
  
  .image45 {
    width: 100%;
    grid-area: img45;
  }
  
  .image46 {
    width: 100%;
    grid-area: img46;
  }
  
  .image47 {
    width: 100%;
    grid-area: img47;
  }
  
  .image48 {
    width: 100%;
    grid-area: img48;
  }
  
  .image49 {
    width: 100%;
    grid-area: img49;
  }
  
  .image50 {
    width: 100%;
    grid-area: img50;
  }
  
  .image51 {
    width: 100%;
    grid-area: img51;
  }
  
  .image52 {
    width: 100%;
    grid-area: img52;
  }
  
  }
  
  /* * MOBILE QUERY END */


/* ! MEDIUM TABLET QUERY */

@media only screen and (min-width: 601px) {
  body {
      font-family: "Lato", sans-serif;
      margin: 0px;
    }
  
    h3 {
      font-size: 12px;
      letter-spacing: 3.5px;
      margin-top: 5px;
    }

    .sidenavMobile {
      display: none;
    }
    
    .sidenav {
      height: 100%;
      width: 200px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #1c3a3a;
      overflow-x: hidden;
      padding-top: 10px;
    }
    
    .sidenav a {
      padding: 6px 0px 6px 0px;
      text-decoration: none;
      font-family: "museoBold";
      font-size: 25px;
      color: white;
      display: block;
      text-align: center;
      transition: all .2s ease-in-out;
    }
    
    .sidenav a:not(.logoNav):hover {
      transform: scale(1.05);
      background: #1c3a3a;
      color: #fff;
    }
    
    .logoNav img {
      width: 120px;
      padding-bottom: 15px;
      padding-top: 20px;
    }
  
    .navSections {
      width: 100%;
      height: 90px;
      background: #0a161c;
      margin-bottom: 10px;
    }
  
    .nav_icons {
      width: 35px;
      margin-top: 10px;
    }
    
    .menuBar {
      display: none;
    }
  
    .main {
      padding-left: 20px;
      margin-left: 200px; /* Same as the width of the sidenav */
    }
  
    .feature {
      margin-left: 200px;
    }
  
    .skills_container {
      width: 100%;
      height: 780px;
    }
    
    .skills_title {
      width: 80%;
      margin-top: -215px;
      margin-left: 50px;
      grid-area: title;
    }
    
    .skills_para {
      margin-top: -190px;
      width: 100%;
      text-align: center;
      grid-area: para;
      font-family: "museoBold";
      font-size: 13px;
      line-height: 30px;
      letter-spacing: 1.2px;
    }
  
    .about_me_section {
      margin-top: -200px;
      grid-area: about;
    }

  

    .mobile_about {
      display: none;
    }
    
    .skills_section {
      display: grid;
      grid-gap: 30px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas: 
        "about about"
        "title icons"
        "para para";
    
      /* background-color: rgba(255, 0, 0, 0.3); */
      margin: 0 auto;
    
      width: 100%;
      height: 500px;
      max-width: 1100px;
    
      margin-bottom: 0px;
    
      padding: 10px;
      text-align: justify;
      hyphens: auto;
    }
  
    .icons {
      width: 60%;
      margin-top: -140px;
      margin-left: -20px;
      grid-area: icons;
    }
  
    .headshot {
      position: relative;
      z-index: 2002;
      margin: -93px 0px 0px 145px;
    }
  
    .section3 {
      width: 100%;
      height: auto;
      margin-top: -200px;
    }
  
    .portfolio {
      width: 98.5%;
  
      grid-area: portfolio;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "resume resume resume resume"
                            "projectsHeader projectsHeader projectsHeader projectsHeader"
                          "img1 img2 img3 img4"
                          "img5 img6 img7 img8"
  }

  .resume {
    width: 100%;
    height: auto;
    grid-area: resume;
  }
  .download_btn_desktop {
    width: 100%;
    background-color: #1c3a3a;
    border: none;
    color: #fff;
    padding: 10px 30px;
    cursor: pointer;
    font-size: 15px;
    margin-top: -100px;
    margin-left: 0px;
    margin-bottom: 0px;
    border-radius: 0;
    transition: all .2s ease-in-out;
    
  }
  
  .download_btn_desktop:hover {
    background-color: #0a161c;
    color: #e59b39;
    transform: scale(1.002);
  }

  .download_btn {
    display: none;
  }
  
  .interactiveHeader {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
    margin-bottom: 5px;
      grid-area: projectsHeader;
  }
  
  .img1 {
      grid-area: img1;
      display: block;
    width: 100%;
    height: auto;
  }
  
  .img2 {
      grid-area: img2;
  }
  
  .img3 {
      grid-area: img3;
  }
  
  .img4 {
      grid-area: img4;
  }
  
  .img5 {
      grid-area: img5;
  }
  
  .img6 {
      grid-area: img6;
  }
  
  .img7 {
    grid-area: img7;
  }
  
  .img8 {
    grid-area: img8;
  }
  
  .portfolio img {
      width: 100%;
  }
  
  .container {
  
    position: relative;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: .85;
    transition: .5s ease;
    background-color: #e59b39;
    cursor: pointer;
  }
  
  .text {
    color: white;
    font-family: 'museoBold';
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2.5px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .section4 {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "design photography"
      "button1 button2"
      "line1 line2";
    width: 100%;
    height: auto;
    margin-top: 30px;
  }
  
  .gd_section {
    width: 97%;
    grid-area: design;
  }
  
  .p_section {
    width: 97%;
    grid-area: photography;
  }
  
  .graphic_design_button {
    font-family: 'museoBold';
    grid-area: button1;
    margin-top: 15px;
    width: 100%;
    height: 25px;
    color: #0a161c;
    cursor: pointer;
    letter-spacing: 2.5px;
    transition: all .2s ease-in-out;
  }
  
  .underline1 {
    grid-area: line1;
    margin-top: -15px;
    width: 80%;
    height: 1.5px;
    background: #e59b39;
  }
  
  .graphic_design_button:active {
    transform: scale(1.005);
    color: #e59b39;
  }
  
  .photography_button {
    font-family: 'museoBold';
    grid-area: button1;
    margin-top: 15px;
    width: 100%;
    height: 25px;
    color: #0a161c;
    cursor: pointer;
    letter-spacing: 2.5px;
  }
  
  .photography_button:active {
    transform: scale(1.005);
    color: #e59b39;
  }
  
  .underline2 {
    grid-area: line2;
    margin-top: -15px;
    width: 80%;
    height: 1.5px;
    background: #e59b39;
  }
  
  .section4 a {
    text-decoration: none;
  }
  
  .section5 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 45% 50%;
    grid-template-rows: auto;
    grid-template-areas: 
      "coffee contact";
    width: 100%;
    margin-top: 80px;
    margin-bottom: 35px;
    height: auto;
  }
  
  .section5 img {
    width: 100%;
  }
  
  .section5 h1 {
      color: #1c3a3a;
      font-family: 'museoBold';
    font-size: 20px;
    letter-spacing: 5px;
      text-transform: uppercase;
      margin-bottom: 0px;
  }
  
  .contactFormbg {
    margin-top: -70px;
    grid-area: contact;
      background: #fff;
      width: 100%;
      height: auto;
      overflow: hidden;
      margin-left: 0px;
      padding: 40px;
      
  }
  
  form {
  
      width: 100%;
      font-size: 2rem;
      text-align: left;
  }
  
  .contactLabel {
    color: #1c3a3a;
      font-family: 'museoReg';
    letter-spacing: 5px;
      font-size: 1rem;
      text-transform: uppercase;
      padding-bottom: 15px;
  }
  
  input {
    border-radius: 5px;
    font-family: "museoReg";
      font-size: 12px;
      letter-spacing: .3px;
  
      width: 99%;
      background: #1c3a3a;
      color: white;
      float: left;
      border: none;
      padding: 10px;
  }
  
  textarea {
    border-radius: 5px;
      font-family: "museoReg";
      font-size: 12px;
      letter-spacing: .3px;
  
      height: 70px;
      width:  99%;
      background: #1c3a3a;
      color: white;
      float: left;
      border: none;
      padding: 10px;
  }
  
  #name {
      margin-left: 0px;
      color: white;
  }
  
  #email {
      margin-left: 0px;
  }
  
  #subject {
      margin-left: 0px;
  }
  
  #message {
      margin-top: 0px;
  }
  
  button {
      font-family: "museoReg";
      font-size: 16px;
      letter-spacing: .3px;
      text-transform: uppercase;
  
      background: #1c3a3a;
      color: #fff;
      margin-top: 20px;
      padding: 10px 20px 10px 20px;
      border-radius: 5px;
      border: none;
      cursor: pointer;
  }
  
  
  
  
  
  /** Project Screen Styles */
  
  
  
  .sections_container {
    background-color: #f5f5f5;
    margin-left: 200px;
    padding: 20px;
  }
  
  .project_titles {
    width: 100%;
    grid-area: title;
  }
  
  .sections_container p {
    margin: 0;
    width: 100%;
    grid-area: para;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .intro {
    height: auto;
  
    overflow: hidden;
    margin: 0 auto;
  
    width: 100%;
    max-width: 1100px;
  
    padding: 30px;
  }
  
  .overview {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    margin-bottom: 40px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime1 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .about {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "para2"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime2 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .objective_challenges {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image"
      "para2";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  .objective_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .crime3 {
    width: 100%;
    grid-area: image;
  }
  
  .process {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image2"
      "para2"
      "image1";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }

  .process_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .crime4 {
    width: 100%;
    margin-top: -40px;
    grid-area: image1;
  }
  
  .crime5 {
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
    grid-area: image2;
  }
  
  .deliverable {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "button";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime_button {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
  
    height: 48px;
    grid-area: button;
    background-color: #e59b39;
    border: none;
    color: #0a161c;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 40px 2px;
    cursor: pointer;
  
    transition: all .2s ease-in-out;
  }
  
  .deliverable a:hover {
    transform: scale(1.008);
  
    color: #e59b39;
    background: #0a161c;
  }


  /* * RETAIL PROJECT 02 */

  .marketing_title {
    margin-top: 60px;
  }

  .about_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_overview {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr ;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    margin-bottom: 0px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .retail2 {
    width: 100%;
    grid-area: image;
  }
  
  .motion_graphics {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .motion1 {
    width: 100%;
    grid-area: image;
  }
  
  .interactive_catalogue {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .cata1 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .rotating_product {
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .rotate1 {
    width: 100%;
    grid-area: image;
  }
  
  .touchscreen_ordering {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title "
      "para"
      "image"
      "para2";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .order1 {
    width: 100%;
    grid-area: image;
  }
  
  .touchscreen_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process {
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "image1"
      "para"
      "para2"
      "para3"
      "image3"
      "para4"
      "link";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .bb_link{
    text-decoration: none;
    color: #e59b39;
    font-family: 'museoBold';
  }
  
  .retail_process_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process_para3 {
    grid-area: para3;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process_para4 {
    grid-area: para4;
  
    
    width: 95%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail4 {
    width: 100%;
    grid-area: image1;
  }
  
  .retail5 {
    width: 100%;
    grid-area: image3;
  }
  
  .marketing_button {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
  
    height: 60px;
    grid-area: link;
    background-color: #e59b39;
    border: none;
    color: #0a161c;
    padding: 20px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 2px;
    cursor: pointer;
  
    transition: all .2s ease-in-out;
  }
  
  .retail_process a:hover {
    transform: scale(1.008);
  
    color: #e59b39;
    background: #0a161c;
  }
  
  .demo_video_section {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "video";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .demo_video {
    width: 100%;
    grid-area: video;
  }
  
  /* * MARKETING MATERIALS PAGE */
  
  .marketing_materials {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "image1"
      "image2"
      "image3"
      "image4"
      "heading1"
      "h1"
      "video1_1"
      "h2"
      "video1_2"
      "h3"
      "video1_3"
      "h4"
      "video1_4"
  
      "heading2"
      "h5"
      "video2_1"
      "h6"
      "video2_2"
      "h7"
      "video2_3"
      "h8"
      "video2_4";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .heading1 {
    padding-top: 50px;
    padding-bottom: 30px;
    width: 100%;
    grid-area: heading1;
  }
  
  .heading2 {
    padding-top: 50px;
    padding-bottom: 30px;
    width: 100%;
    grid-area: heading2;
  }
  
  .standard {
    width: 100%;
    grid-area: h1;
    margin-bottom: 0px;
  }
  
  .story {
    width: 100%;
    grid-area: h2;
    margin-bottom: 0px;
  }
  
  .instagram {
    width: 100%;
    grid-area: h3;
    margin-bottom: 0px;
  }
  
  .facebook {
    width: 100%;
    grid-area: h4;
    margin-bottom: 0px;
  }
  
  .standard2 {
    width: 100%;
    grid-area: h5;
    margin-bottom: 0px;
  }
  
  .story2 {
    width: 100%;
    grid-area: h6;
    margin-bottom: 0px;
  }
  
  .instagram2 {
    width: 100%;
    grid-area: h7;
    margin-bottom: 0px;
  }
  
  .facebook2 {
    width: 100%;
    grid-area: h8;
    margin-bottom: 0px;
  }
  
  .mm1 {
    width: 100%;
    grid-area: image1;
  }
  
  .mm2 {
    width: 100%;
    grid-area: image2;
  }
  
  .mm3 {
    width: 100%;
    grid-area: image3;
  }
  
  .mm4 {
    width: 100%;
    grid-area: image4;
  }
  
  .video1_1 {
    width: 100%;
    grid-area: video1_1;
  }
  
  .video1_2 {
    width: 100%;
    grid-area: video1_2;
  }
  
  .video1_3 {
    width: 100%;
    grid-area: video1_3;
  }
  
  .video1_4 {
    width: 100%;
    grid-area: video1_4;
  }
  
  .video2_1 {
    width: 100%;
    grid-area: video2_1;
  }
  
  .video2_2 {
    width: 100%;
    grid-area: video2_2;
  }
  
  .video2_3 {
    width: 100%;
    grid-area: video2_3;
  }
  
  .video2_4 {
    width: 100%;
    grid-area: video2_4;
  }

  /** Covid Infographic */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.covid_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.covid_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.covid1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.covid_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title "
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}



.covid_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}



.covid3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.covid_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns:  1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.covid4 {
  width: 100%;
  grid-area: image1;
  border: 1px rgb(202, 202, 202) solid;
}

.covid_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.covid_vid {
  grid-area: video;
}

/** DC Digital Signage */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.dc_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;


  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc1 {
  width: 100%;
  grid-area: image;
  display: none;
}

.dc_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "image"
     "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc2 {
  width: 100%;
  grid-area: image;
}

.dc_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.dc_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns:  1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2"
    "image1"
    "image2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc_process_para2 {
  grid-area: para2;

  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc4 {
  width: 100%;
  margin-top: 0px;
  grid-area: image1;
}

.dc5 {
  width: 100%;
  margin-top: 0px;
  margin-left: 0px;
  grid-area: image2;
}

.dc_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para"
     "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.dc_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.dc_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

/** Restaurant App */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.res_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res1 {
  width: 100%;
  grid-area: image;
}

.res_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
  background-color: #979696;
}

.res_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para"
    "image para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res3 {
  width: 100%;
  grid-area: image;
}

.res_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title "
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.res_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.res_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

/** Sandwich Webpage */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.sandwich_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1.75fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich1 {
  width: 100%;
  grid-area: image;
}

.sandwich_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich2 {
  width: 100%;
  grid-area: image;
}

.sandwich_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.sandwich_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1"
    "para2 image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich4 {
  width: 100%;
  margin-top: -40px;
  grid-area: image1;
}

.sandwich_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.sandwich_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.sandwich_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

/** LG TV Product Demo */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.lg_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.lg_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg1 {
  width: 100%;
  grid-area: image;
}

.lg_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image"
    "para2 image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.lg_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg4 {
  width: 100%;
  grid-area: image1;
  border: 1px rgb(202, 202, 202) solid;
}

.lg_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.lg_vid {
  grid-area: video;
}

/** Spring Break Matching Game */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.spring_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.spring_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.spring_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring2 {
  width: 100%;
  grid-area: image;
}

.spring_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.spring_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.spring4 {
  width: 100%;
  grid-area: image1;
}

.spring_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.spring_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.spring_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

  /* * GRAPHIC DESIGN PAGE */

.gd_sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 40px;
  padding-bottom: 0px;
}

.gd_heading img {
  width: 100%;
  grid-area: title;
}

.gd_sections_container h1 {
  color: #0a161c;
  font-family: 'museoBold';
  font-size: 25px;
  letter-spacing: 2.5px;
  margin: 0;
}

.gd_sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.project1 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image1 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project2 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image2 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project3 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image3 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project4 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image4 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project5 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;
  margin-bottom: 70px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image5 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}
  
  /** PHOTOGRAPHY PAGE  */
  
  .photography_heading img {
    width: 100%;
    grid-area: title;
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 25px;
  }
  
  .photos_sections_container {
    margin-left: 200px;
    padding: 45px;
    padding-bottom: 0px;
  }
  
  .photos_sections_container h1 {
    color: #0a161c;
    font-family: 'museoBold';
    font-size: 25px;
    letter-spacing: 2.5px;
    margin: 0;
    text-align: center;
  }
  
  .photos_sections_container p{
    margin: 0;
    width: 100%;
    grid-area: para;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .photos1 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "img1"
      "img2"
      "img3"
      "img4"
      "img5"
      "img6";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos1 h1 {
    grid-area: title;
  }
  
  .image1 {
    width: 100%;
    grid-area: img1;
  }
  
  .image2 {
    width: 100%;
    grid-area: img2;
  }
  
  .image3 {
    width: 100%;
    grid-area: img3;
  }
  
  .image4 {
    width: 100%;
    grid-area: img4;
  }
  
  .image5 {
    width: 100%;
    grid-area: img5;
  }
  
  .image6 {
    width: 100%;
    grid-area: img6;
  }
  
  .photos2 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img7"
    "img8"
    "img9"
    "img10"
    "img11"
    "img12"
    "img13"
    "img14"
    "img15"
    "img16"
    "img17"
    "img18"
    "img19"
    "img20";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos2 h1 {
    grid-area: title;
  }
  
  .image7 {
    width: 100%;
    grid-area: img7;
  }
  
  .image8 {
    width: 100%;
    grid-area: img8;
  }
  
  .image9 {
    width: 100%;
    grid-area: img9;
  }
  
  .image10 {
    width: 100%;
    grid-area: img10;
  }
  
  .image11 {
    width: 100%;
    grid-area: img11;
  }
  
  .image12 {
    width: 100%;
    grid-area: img12;
  }
  
  .image13 {
    width: 100%;
    grid-area: img13;
  }
  
  .image14 {
    width: 100%;
    grid-area: img14;
  }
  
  .image15 {
    width: 100%;
    grid-area: img15;
  }
  
  .image16 {
    width: 100%;
    grid-area: img16;
  }
  
  .image17 {
    width: 100%;
    grid-area: img17;
  }
  
  .image18 {
    width: 100%;
    grid-area: img18;
  }
  
  .image19 {
    width: 100%;
    grid-area: img19;
  }
  
  .image20 {
    width: 100%;
    grid-area: img20;
  }
  
  .photos3 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img21"
    "img22"
    "img23"
    "img24"
    "img25"
    "img26"
    "img27"
    "img28";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos3 h1 {
    grid-area: title;
  }
  
  .image21 {
    width: 100%;
    grid-area: img21;
  }
  
  .image22 {
    width: 100%;
    grid-area: img22;
  }
  
  .image23 {
    width: 100%;
    grid-area: img23;
  }
  
  .image24 {
    width: 100%;
    grid-area: img24;
  }
  
  .image25 {
    width: 100%;
    grid-area: img25;
  }
  
  .image26 {
    width: 100%;
    grid-area: img26;
  }
  
  .image27 {
    width: 100%;
    grid-area: img27;
  }
  
  .image28 {
    width: 100%;
    grid-area: img28;
  }
  
  .photos4 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img29"
    "img30"
    "img31"
    "img32";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos4 h1 {
    grid-area: title;
  }
  
  .image29 {
    width: 100%;
    grid-area: img29;
  }
  
  .image30 {
    width: 100%;
    grid-area: img30;
  }
  
  .image31 {
    width: 100%;
    grid-area: img31;
  }
  
  .image32 {
    width: 100%;
    grid-area: img32;
  }
  
  .photos5 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img33"
    "img34"
    "img35"
    "img36"
    "img37"
    "img38";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos5 h1 {
    grid-area: title;
  }
  
  .image33 {
    width: 100%;
    grid-area: img33;
  }
  
  .image34 {
    width: 100%;
    grid-area: img34;
  }
  
  .image35 {
    width: 100%;
    grid-area: img35;
  }
  
  .image36 {
    width: 100%;
    grid-area: img36;
  }
  
  .image37 {
    width: 100%;
    grid-area: img37;
  }
  
  .image38 {
    width: 100%;
    grid-area: img38;
  }
  
  .photos6 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img39"
    "img40"
    "img41"
    "img42"
    "img43"
    "img44"
    "img45"
    "img46"
    "img47"
    "img48"
    "img49"
    "img50"
    "img51"
    "img52";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
    margin-bottom: 40px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos6 h1 {
    grid-area: title;
  }
  
  .image39 {
    width: 100%;
    grid-area: img39;
  }
  
  .image40 {
    width: 100%;
    grid-area: img40;
  }
  
  .image41 {
    width: 100%;
    grid-area: img41;
  }
  
  .image42 {
    width: 100%;
    grid-area: img42;
  }
  
  .image43 {
    width: 100%;
    grid-area: img43;
  }
  
  .image44 {
    width: 100%;
    grid-area: img44;
  }
  
  .image45 {
    width: 100%;
    grid-area: img45;
  }
  
  .image46 {
    width: 100%;
    grid-area: img46;
  }
  
  .image47 {
    width: 100%;
    grid-area: img47;
  }
  
  .image48 {
    width: 100%;
    grid-area: img48;
  }
  
  .image49 {
    width: 100%;
    grid-area: img49;
  }
  
  .image50 {
    width: 100%;
    grid-area: img50;
  }
  
  .image51 {
    width: 100%;
    grid-area: img51;
  }
  
  .image52 {
    width: 100%;
    grid-area: img52;
  }
  
  }
  
  /* * MEDIUM TABLET QUERY END */

  /* ! TABLET PORTRAIT QUERY */

@media only screen and (min-width: 601px) and (orientation : portrait) {
  body {
      font-family: "Lato", sans-serif;
      margin: 0px;
    }
  
    h3 {
      font-size: 12px;
      letter-spacing: 3.5px;
      margin-top: 5px;
    }

    .sidenavMobile {
      display: none;
    }
    
    .sidenav {
      height: 100%;
      width: 200px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #1c3a3a;
      overflow-x: hidden;
      padding-top: 10px;
    }
    
    .sidenav a {
      padding: 6px 0px 6px 0px;
      text-decoration: none;
      font-family: "museoBold";
      font-size: 25px;
      color: white;
      display: block;
      text-align: center;
      transition: all .2s ease-in-out;
    }
    
    .sidenav a:not(.logoNav):hover {
      transform: scale(1.05);
      background: #1c3a3a;
      color: #fff;
    }
    
    .logoNav img {
      width: 120px;
      padding-bottom: 15px;
      padding-top: 20px;
    }
  
    .navSections {
      width: 100%;
      height: 90px;
      background: #0a161c;
      margin-bottom: 10px;
    }
  
    .nav_icons {
      width: 35px;
      margin-top: 10px;
    }
    
    .menuBar {
      display: none;
    }
  
    .main {
      padding-left: 20px;
      margin-left: 200px; /* Same as the width of the sidenav */
    }
  
    .feature {
      margin-left: 200px;
    }
  
    .skills_container {
      width: 100%;
      height: 780px;
    }
    
    .skills_title {
      width: 80%;
      margin-top: -215px;
      margin-left: 50px;
      grid-area: title;
    }
    
    .skills_para {
      margin-top: -240px;
      width: 100%;
      text-align: left;
      grid-area: para;
      font-family: "museoBold";
      font-size: 10px;
      line-height: 20px;
      letter-spacing: 1.2px;
    }
  
    .about_me_section {
      margin-top: -90px;
      grid-area: about;
    }

    

    .mobile_about {
      display: none;
    }
    
    .skills_section {
      display: grid;
      grid-gap: 30px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas: 
        "about about"
        "title icons"
        "title para";
    
      /* background-color: rgba(255, 0, 0, 0.3); */
      margin: 0 auto;
    
      width: 100%;
      height: 500px;
      max-width: 1100px;
    
      margin-bottom: 0px;
    
      padding: 10px;
      text-align: justify;
      hyphens: auto;
    }
  
    .icons {
      width: 60%;
      margin-top: -170px;
      margin-left: -20px;
      grid-area: icons;
    }
  
    .headshot {
      position: relative;
      z-index: 2002;
      margin: -93px 0px 0px 145px;
    }
  
    .section3 {
      width: 100%;
      height: auto;
      margin-top: -200px;
    }
  
    .portfolio {
      width: 98.5%;
  
      grid-area: portfolio;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "resume resume"
                          "projectsHeader projectsHeader"
                          "img1 img2"
                          "img3 img4"
                          "img5 img6"
                          "img7 img8"
  }

  .resume {
    width: 100%;
    height: auto;
    grid-area: resume;
  }
  .download_btn_desktop {
    width: 100%;
    background-color: #1c3a3a;
    border: none;
    color: #fff;
    padding: 10px 30px;
    cursor: pointer;
    font-size: 15px;
    margin-top: -100px;
    margin-left: 0px;
    margin-bottom: 0px;
    border-radius: 0;
    transition: all .2s ease-in-out;
    
  }
  
  .download_btn_desktop:hover {
    background-color: #0a161c;
    color: #e59b39;
    transform: scale(1.002);
  
   
  }

  .download_btn {
    display: none;
  }
  
  .interactiveHeader {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
    margin-bottom: 5px;
      grid-area: projectsHeader;
  }
  
  .img1 {
      grid-area: img1;
      display: block;
    width: 100%;
    height: auto;
  }
  
  .img2 {
      grid-area: img2;
  }
  
  .img3 {
      grid-area: img3;
  }
  
  .img4 {
      grid-area: img4;
  }
  
  .img5 {
      grid-area: img5;
  }
  
  .img6 {
      grid-area: img6;
  }
  
  .img7 {
    grid-area: img7;
  }
  
  .img8 {
    grid-area: img8;
  }
  
  .portfolio img {
      width: 100%;
  }
  
  .container {
  
    position: relative;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: .85;
    transition: .5s ease;
    background-color: #e59b39;
    cursor: pointer;
  }
  
  .text {
    color: white;
    font-family: 'museoBold';
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2.5px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .section4 {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "design"
      "button1"
      "line1"
      "photography"
      "button2"
      "line2";
    width: 100%;
    height: auto;
    margin-top: 30px;
  }
  
  .gd_section {
    width: 97%;
    grid-area: design;
  }
  
  .p_section {
    width: 97%;
    grid-area: photography;
  }
  
  .graphic_design_button {
    font-family: 'museoBold';
    grid-area: button1;
    margin-top: 15px;
    width: 100%;
    height: 25px;
    color: #0a161c;
    cursor: pointer;
    letter-spacing: 2.5px;
    transition: all .2s ease-in-out;
  }
  
  .underline1 {
    grid-area: line1;
    margin-top: -15px;
    width: 80%;
    height: 1.5px;
    background: #e59b39;
  }
  
  .graphic_design_button:active {
    transform: scale(1.005);
    color: #e59b39;
  }
  
  .photography_button {
    font-family: 'museoBold';
    grid-area: button1;
    margin-top: 15px;
    width: 100%;
    height: 25px;
    color: #0a161c;
    cursor: pointer;
    letter-spacing: 2.5px;
  }
  
  .photography_button:active {
    transform: scale(1.005);
    color: #e59b39;
  }
  
  .underline2 {
    grid-area: line2;
    margin-top: -15px;
    width: 80%;
    height: 1.5px;
    background: #e59b39;
  }
  
  .section4 a {
    text-decoration: none;
  }
  
  .section5 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "coffee"
      "contact";
    width: 95.5%;
    margin-top: 50px;
    margin-bottom: 35px;
    height: auto;
  }
  
  .section5 img {
    width: 100%;
    margin-bottom: 50px;
  }
  
  .section5 h1 {
      color: #1c3a3a;
      font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
      text-transform: uppercase;
  }
  
  .contactFormbg {
    grid-area: contact;
      background: #fff;
      width: 80%;
      height: auto;
      overflow: hidden;
      margin-left: 90px;
      padding: 20px;
      
  }
  
  form {
  
      width: 100%;
      font-size: 2rem;
      text-align: left;
  }
  
  .contactLabel {
    color: #1c3a3a;
      font-family: 'museoReg';
    letter-spacing: 5px;
      font-size: 1rem;
      text-transform: uppercase;
      padding-bottom: 15px;
  }
  
  input {
    border-radius: 5px;
    font-family: "museoReg";
      font-size: 12px;
      letter-spacing: .3px;
  
      width: 99%;
      background: #1c3a3a;
      color: white;
      float: left;
      border: none;
      padding: 10px;
  }
  
  textarea {
    border-radius: 5px;
      font-family: "museoReg";
      font-size: 12px;
      letter-spacing: .3px;
  
      height: 70px;
      width:  99%;
      background: #1c3a3a;
      color: white;
      float: left;
      border: none;
      padding: 10px;
  }
  
  #name {
      margin-left: 0px;
      color: white;
  }
  
  #email {
      margin-left: 0px;
  }
  
  #subject {
      margin-left: 0px;
  }
  
  #message {
      margin-top: 0px;
  }
  
  button {
      font-family: "museoReg";
      font-size: 16px;
      letter-spacing: .3px;
      text-transform: uppercase;
  
      background: #1c3a3a;
      color: #fff;
      margin-top: 20px;
      padding: 10px 20px 10px 20px;
      border-radius: 5px;
      border: none;
      cursor: pointer;
  }
  
  
  
  
  
  /** Project Screen Styles */
  
  
  
  .sections_container {
    background-color: #f5f5f5;
    margin-left: 200px;
    padding: 20px;
  }
  
  .project_titles {
    width: 100%;
    grid-area: title;
  }
  
  .sections_container p {
    margin: 0;
    width: 100%;
    grid-area: para;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .intro {
    height: auto;
  
    overflow: hidden;
    margin: 0 auto;
  
    width: 100%;
    max-width: 1100px;
  
    padding: 30px;
  }
  
  .overview {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    margin-bottom: 40px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime1 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .about {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "para2"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime2 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .objective_challenges {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image"
      "para2";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  .objective_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .crime3 {
    width: 100%;
    grid-area: image;
  }
  
  .process {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image2"
      "para2"
      "image1";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }

  .process_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .crime4 {
    width: 100%;
    margin-top: -40px;
    grid-area: image1;
  }
  
  .crime5 {
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
    grid-area: image2;
  }
  
  .deliverable {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "button";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .crime_button {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
  
    height: 48px;
    grid-area: button;
    background-color: #e59b39;
    border: none;
    color: #0a161c;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 40px 2px;
    cursor: pointer;
  
    transition: all .2s ease-in-out;
  }
  
  .deliverable a:hover {
    transform: scale(1.008);
  
    color: #e59b39;
    background: #0a161c;
  }

  /* * RETAIL PROJECT 02 */

  .marketing_title {
    margin-top: 60px;
  }

  .about_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_overview {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr ;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    margin-bottom: 0px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .retail2 {
    width: 100%;
    grid-area: image;
  }
  
  .motion_graphics {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .motion1 {
    width: 100%;
    grid-area: image;
  }
  
  .interactive_catalogue {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .cata1 {
    width: 100%;
    grid-area: image;
    border: 1px rgb(202, 202, 202) solid;
  }
  
  .rotating_product {
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "para"
      "image";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .rotate1 {
    width: 100%;
    grid-area: image;
  }
  
  .touchscreen_ordering {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title "
      "para"
      "image"
      "para2";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .order1 {
    width: 100%;
    grid-area: image;
  }
  
  .touchscreen_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process {
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "image1"
      "para"
      "para2"
      "para3"
      "image3"
      "para4"
      "link";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .bb_link{
    text-decoration: none;
    color: #e59b39;
    font-family: 'museoBold';
  }
  
  .retail_process_para2 {
    grid-area: para2;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process_para3 {
    grid-area: para3;
  
    
    width: 100%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail_process_para4 {
    grid-area: para4;
  
    
    width: 95%;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .retail4 {
    width: 100%;
    grid-area: image1;
  }
  
  .retail5 {
    width: 100%;
    grid-area: image3;
  }
  
  .marketing_button {
    font-family: 'museoBold';
    font-size: 30px;
    letter-spacing: 5px;
  
    height: 60px;
    grid-area: link;
    background-color: #e59b39;
    border: none;
    color: #0a161c;
    padding: 20px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 2px;
    cursor: pointer;
  
    transition: all .2s ease-in-out;
  }
  
  .retail_process a:hover {
    transform: scale(1.008);
  
    color: #e59b39;
    background: #0a161c;
  }
  
  .demo_video_section {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "video";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .demo_video {
    width: 100%;
    grid-area: video;
  }
  
  /* * MARKETING MATERIALS PAGE */
  
  .marketing_materials {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "image1"
      "image2"
      "image3"
      "image4"
      "heading1"
      "h1"
      "video1_1"
      "h2"
      "video1_2"
      "h3"
      "video1_3"
      "h4"
      "video1_4"
  
      "heading2"
      "h5"
      "video2_1"
      "h6"
      "video2_2"
      "h7"
      "video2_3"
      "h8"
      "video2_4";
  
    /* background-color: rgba(238, 255, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .heading1 {
    padding-top: 50px;
    padding-bottom: 30px;
    width: 100%;
    grid-area: heading1;
  }
  
  .heading2 {
    padding-top: 50px;
    padding-bottom: 30px;
    width: 100%;
    grid-area: heading2;
  }
  
  .standard {
    width: 100%;
    grid-area: h1;
    margin-bottom: 0px;
  }
  
  .story {
    width: 100%;
    grid-area: h2;
    margin-bottom: 0px;
  }
  
  .instagram {
    width: 100%;
    grid-area: h3;
    margin-bottom: 0px;
  }
  
  .facebook {
    width: 100%;
    grid-area: h4;
    margin-bottom: 0px;
  }
  
  .standard2 {
    width: 100%;
    grid-area: h5;
    margin-bottom: 0px;
  }
  
  .story2 {
    width: 100%;
    grid-area: h6;
    margin-bottom: 0px;
  }
  
  .instagram2 {
    width: 100%;
    grid-area: h7;
    margin-bottom: 0px;
  }
  
  .facebook2 {
    width: 100%;
    grid-area: h8;
    margin-bottom: 0px;
  }
  
  .mm1 {
    width: 100%;
    grid-area: image1;
  }
  
  .mm2 {
    width: 100%;
    grid-area: image2;
  }
  
  .mm3 {
    width: 100%;
    grid-area: image3;
  }
  
  .mm4 {
    width: 100%;
    grid-area: image4;
  }
  
  .video1_1 {
    width: 100%;
    grid-area: video1_1;
  }
  
  .video1_2 {
    width: 100%;
    grid-area: video1_2;
  }
  
  .video1_3 {
    width: 100%;
    grid-area: video1_3;
  }
  
  .video1_4 {
    width: 100%;
    grid-area: video1_4;
  }
  
  .video2_1 {
    width: 100%;
    grid-area: video2_1;
  }
  
  .video2_2 {
    width: 100%;
    grid-area: video2_2;
  }
  
  .video2_3 {
    width: 100%;
    grid-area: video2_3;
  }
  
  .video2_4 {
    width: 100%;
    grid-area: video2_4;
  }

  /** Covid Infographic */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.covid_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.covid_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.covid1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.covid_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title "
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}



.covid_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}



.covid3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.covid_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns:  1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.covid4 {
  width: 100%;
  grid-area: image1;
  border: 1px rgb(202, 202, 202) solid;
}

.covid_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.covid_vid {
  grid-area: video;
}

/** DC Digital Signage */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.dc_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;


  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc1 {
  width: 100%;
  grid-area: image;
  display: none;
}

.dc_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "image"
     "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc2 {
  width: 100%;
  grid-area: image;
}

.dc_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.dc_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns:  1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2"
    "image1"
    "image2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc_process_para2 {
  grid-area: para2;

  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc4 {
  width: 100%;
  margin-top: 0px;
  grid-area: image1;
}

.dc5 {
  width: 100%;
  margin-top: 0px;
  margin-left: 0px;
  grid-area: image2;
}

.dc_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
     "para"
     "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.dc_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.dc_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

/** Restaurant App */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.res_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res1 {
  width: 100%;
  grid-area: image;
}

.res_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
  background-color: #979696;
}

.res_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para"
    "image para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res3 {
  width: 100%;
  grid-area: image;
}

.res_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title "
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.res_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.res_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

/** Sandwich Webpage */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.sandwich_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1.75fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich1 {
  width: 100%;
  grid-area: image;
}

.sandwich_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich2 {
  width: 100%;
  grid-area: image;
}

.sandwich_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.sandwich_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1"
    "para2 image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich4 {
  width: 100%;
  margin-top: -40px;
  grid-area: image1;
}

.sandwich_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.sandwich_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.sandwich_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}




.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.lg_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.lg_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg1 {
  width: 100%;
  grid-area: image;
}

.lg_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image"
    "para2 image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.lg_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg4 {
  width: 100%;
  grid-area: image1;
  border: 1px rgb(202, 202, 202) solid;
}

.lg_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.lg_vid {
  grid-area: video;
}

/** Spring Break Matching Game */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.spring_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.spring_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.spring_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring2 {
  width: 100%;
  grid-area: image;
}

.spring_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring3 {
  width: 100%;
  grid-area: image;
  display: none;
}

.spring_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image1"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.spring4 {
  width: 100%;
  grid-area: image1;
}

.spring_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "button";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.spring_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.spring_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

  /* * GRAPHIC DESIGN PAGE */

.gd_sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
  padding-bottom: 0px;
}

.gd_heading img {
  width: 100%;
  grid-area: title;
}

.gd_sections_container h1 {
  color: #0a161c;
  font-family: 'museoBold';
  font-size: 25px;
  letter-spacing: 2.5px;
  margin: 0;
}

.gd_sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.project1 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image1 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project2 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image2 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project3 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image3 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project4 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image4 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project5 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;
  margin-bottom: 70px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image5 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}
  
  /** PHOTOGRAPHY PAGE  */
  
  .photography_heading img {
    width: 100%;
    grid-area: title;
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 20px;
  }
  
  .photos_sections_container {
    margin-left: 200px;
    padding: 20px;
    padding-bottom: 0px;
  }
  
  .photos_sections_container h1 {
    color: #0a161c;
    font-family: 'museoBold';
    font-size: 25px;
    letter-spacing: 2.5px;
    margin: 0;
    text-align: center;
  }
  
  .photos_sections_container p{
    margin: 0;
    width: 100%;
    grid-area: para;
    font-family: 'museoReg';
    font-size: 15.5px;
    letter-spacing: 1.2px;
    line-height: 24px;
  }
  
  .photos1 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title"
      "img1"
      "img2"
      "img3"
      "img4"
      "img5"
      "img6";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos1 h1 {
    grid-area: title;
  }
  
  .image1 {
    width: 100%;
    grid-area: img1;
  }
  
  .image2 {
    width: 100%;
    grid-area: img2;
  }
  
  .image3 {
    width: 100%;
    grid-area: img3;
  }
  
  .image4 {
    width: 100%;
    grid-area: img4;
  }
  
  .image5 {
    width: 100%;
    grid-area: img5;
  }
  
  .image6 {
    width: 100%;
    grid-area: img6;
  }
  
  .photos2 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img7"
    "img8"
    "img9"
    "img10"
    "img11"
    "img12"
    "img13"
    "img14"
    "img15"
    "img16"
    "img17"
    "img18"
    "img19"
    "img20";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos2 h1 {
    grid-area: title;
  }
  
  .image7 {
    width: 100%;
    grid-area: img7;
  }
  
  .image8 {
    width: 100%;
    grid-area: img8;
  }
  
  .image9 {
    width: 100%;
    grid-area: img9;
  }
  
  .image10 {
    width: 100%;
    grid-area: img10;
  }
  
  .image11 {
    width: 100%;
    grid-area: img11;
  }
  
  .image12 {
    width: 100%;
    grid-area: img12;
  }
  
  .image13 {
    width: 100%;
    grid-area: img13;
  }
  
  .image14 {
    width: 100%;
    grid-area: img14;
  }
  
  .image15 {
    width: 100%;
    grid-area: img15;
  }
  
  .image16 {
    width: 100%;
    grid-area: img16;
  }
  
  .image17 {
    width: 100%;
    grid-area: img17;
  }
  
  .image18 {
    width: 100%;
    grid-area: img18;
  }
  
  .image19 {
    width: 100%;
    grid-area: img19;
  }
  
  .image20 {
    width: 100%;
    grid-area: img20;
  }
  
  .photos3 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img21"
    "img22"
    "img23"
    "img24"
    "img25"
    "img26"
    "img27"
    "img28";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos3 h1 {
    grid-area: title;
  }
  
  .image21 {
    width: 100%;
    grid-area: img21;
  }
  
  .image22 {
    width: 100%;
    grid-area: img22;
  }
  
  .image23 {
    width: 100%;
    grid-area: img23;
  }
  
  .image24 {
    width: 100%;
    grid-area: img24;
  }
  
  .image25 {
    width: 100%;
    grid-area: img25;
  }
  
  .image26 {
    width: 100%;
    grid-area: img26;
  }
  
  .image27 {
    width: 100%;
    grid-area: img27;
  }
  
  .image28 {
    width: 100%;
    grid-area: img28;
  }
  
  .photos4 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img29"
    "img30"
    "img31"
    "img32";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos4 h1 {
    grid-area: title;
  }
  
  .image29 {
    width: 100%;
    grid-area: img29;
  }
  
  .image30 {
    width: 100%;
    grid-area: img30;
  }
  
  .image31 {
    width: 100%;
    grid-area: img31;
  }
  
  .image32 {
    width: 100%;
    grid-area: img32;
  }
  
  .photos5 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img33"
    "img34"
    "img35"
    "img36"
    "img37"
    "img38";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos5 h1 {
    grid-area: title;
  }
  
  .image33 {
    width: 100%;
    grid-area: img33;
  }
  
  .image34 {
    width: 100%;
    grid-area: img34;
  }
  
  .image35 {
    width: 100%;
    grid-area: img35;
  }
  
  .image36 {
    width: 100%;
    grid-area: img36;
  }
  
  .image37 {
    width: 100%;
    grid-area: img37;
  }
  
  .image38 {
    width: 100%;
    grid-area: img38;
  }
  
  .photos6 {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "title"
    "img39"
    "img40"
    "img41"
    "img42"
    "img43"
    "img44"
    "img45"
    "img46"
    "img47"
    "img48"
    "img49"
    "img50"
    "img51"
    "img52";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: auto;
    max-width: 1100px;
    margin-bottom: 40px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }
  
  .photos6 h1 {
    grid-area: title;
  }
  
  .image39 {
    width: 100%;
    grid-area: img39;
  }
  
  .image40 {
    width: 100%;
    grid-area: img40;
  }
  
  .image41 {
    width: 100%;
    grid-area: img41;
  }
  
  .image42 {
    width: 100%;
    grid-area: img42;
  }
  
  .image43 {
    width: 100%;
    grid-area: img43;
  }
  
  .image44 {
    width: 100%;
    grid-area: img44;
  }
  
  .image45 {
    width: 100%;
    grid-area: img45;
  }
  
  .image46 {
    width: 100%;
    grid-area: img46;
  }
  
  .image47 {
    width: 100%;
    grid-area: img47;
  }
  
  .image48 {
    width: 100%;
    grid-area: img48;
  }
  
  .image49 {
    width: 100%;
    grid-area: img49;
  }
  
  .image50 {
    width: 100%;
    grid-area: img50;
  }
  
  .image51 {
    width: 100%;
    grid-area: img51;
  }
  
  .image52 {
    width: 100%;
    grid-area: img52;
  }
  
  }

  /* * END OF TABLET PORTRAIT */

  /* ! NORMAL DESKTOP LAPTOP QUERY */

@media only screen 
and (min-width : 980px) {

  .video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


body {
    font-family: "Lato", sans-serif;
    margin: 0px;
  }

  h3 {
    font-size: 12px;
    letter-spacing: 3.5px;
    margin-top: 5px;
  }

  .sidenavMobile {
    display: none;
  }
  
  .sidenav {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #1c3a3a;
    overflow-x: hidden;
    padding-top: 10px;
  }
  
  .sidenav a {
    padding: 6px 0px 6px 0px;
    text-decoration: none;
    font-family: "museoBold";
    font-size: 25px;
    color: white;
    display: block;
    text-align: center;
    transition: all .2s ease-in-out;
  }
  
  .sidenav a:not(.logoNav):hover {
    transform: scale(1.05);
    background: #1c3a3a;
    color: #fff;
  }
  
  .logoNav img {
    width: 120px;
    padding-bottom: 15px;
    padding-top: 20px;
  }

  .navSections {
    width: 100%;
    height: 90px;
    background: #0a161c;
    margin-bottom: 10px;
  }

  .nav_icons {
    width: 35px;
    margin-top: 10px;
  }
  
  .menuBar {
    display: none;
  }

  .main {
    padding-left: 20px;
    margin-left: 200px; /* Same as the width of the sidenav */
  }

  .feature {
    margin-left: 200px;
  }

  .skills_container {
    width: 100%;
    height: 780px;
  }
  
  .skills_title {
    width: 80%;
    margin-top: -215px;
    margin-left: 50px;
    grid-area: title;
  }
  
  .skills_para {
    margin-top: -180px;
    margin-left: -20px;
    width: 100%;
    grid-area: para;
    text-align: left;
    font-family: "museoBold";
    line-height: 30px;
    letter-spacing: 1.2px;
  }

  .mobile_about {
    display: none;
  }

  

  .about_me_section {
    margin-top: -200px;
    grid-area: about;
  }
  
  .skills_section {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 120px 160px 100px 100px;
    grid-template-areas: 
      "about about"
      "title icons"
      "title para"
      "title resume";
  
    /* background-color: rgba(255, 0, 0, 0.3); */
    margin: 0 auto;
  
    width: 100%;
    height: 500px;
    max-width: 1100px;
  
    margin-bottom: 40px;
  
    padding: 10px;
    text-align: justify;
    hyphens: auto;
  }

  .icons {
    width: 60%;
    margin-top: -140px;
    margin-left: -20px;
    grid-area: icons;
  }

  .headshot {
    position: relative;
    z-index: 2002;
    margin: -93px 0px 0px 145px;
  }

  .about_bg {
    position: absolute;
    margin-top: -160px;
    margin-left: 240px;
    z-index: 2001;
    width: 60%;
    height: auto;

  }

  .section3 {
    width: 100%;
    height: auto;
    margin-top: 50px;
  }

  .portfolio {
    width: 98.5%;

    grid-area: portfolio;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "resume resume resume resume"
                          "projectsHeader projectsHeader projectsHeader projectsHeader"
                        "img1 img2 img3 img4"
                        "img5 img6 img7 img8"
}
.resume {
  width: 100%;
  height: auto;
  grid-area: resume;
}
.download_btn_desktop {
  width: 100%;
  background-color: #1c3a3a;
  border: none;
  color: #fff;
  padding: 10px 30px;
  cursor: pointer;
  font-size: 15px;
  margin-top: -100px;
  margin-left: 0px;
  margin-bottom: 0px;
  border-radius: 0;
  transition: all .2s ease-in-out;
  
}

.download_btn_desktop:hover {
  background-color: #0a161c;
  color: #e59b39;
  transform: scale(1.002);

 
}

.interactiveHeader {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;
  margin-bottom: 5px;
    grid-area: projectsHeader;
}

.img1 {
    grid-area: img1;
    display: block;
  width: 100%;
  height: auto;
}

.img2 {
    grid-area: img2;
}

.img3 {
    grid-area: img3;
}

.img4 {
    grid-area: img4;
}

.img5 {
    grid-area: img5;
}

.img6 {
    grid-area: img6;
}

.img7 {
  grid-area: img7;
}

.img8 {
  grid-area: img8;
}

.portfolio img {
    width: 100%;
}

.container {

  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #e59b39;
  cursor: pointer;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-family: 'museoBold';
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 2.5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.section4 {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "design photography"
    "button1 button2"
    "line1 line2";
  width: 100%;
  height: auto;
  margin-top: 30px;
}

.gd_section {
  width: 97%;
  grid-area: design;
}

.p_section {
  width: 97%;
  grid-area: photography;
}

.graphic_design_button {
  font-family: 'museoBold';
  grid-area: button1;
  margin-top: 15px;
  width: 60%;
  height: 25px;
  color: #0a161c;
  cursor: pointer;
  letter-spacing: 2.5px;
  transition: all .2s ease-in-out;
}

.underline1 {
  grid-area: line1;
  margin-top: -15px;
  width: 80%;
  height: 1.5px;
  background: #e59b39;
}

.graphic_design_button:hover {
  transform: scale(1.005);
  color: #e59b39;
}

.photography_button {
  font-family: 'museoBold';
  grid-area: button1;
  margin-top: 15px;
  width: 60%;
  height: 25px;
  color: #0a161c;
  cursor: pointer;
  letter-spacing: 2.5px;
}

.photography_button:hover {
  transform: scale(1.005);
  color: #e59b39;
}

.underline2 {
  grid-area: line2;
  margin-top: -15px;
  width: 80%;
  height: 1.5px;
  background: #e59b39;
}

.section4 a {
  text-decoration: none;
}

.section5 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 40% 50%;
  grid-template-rows: auto;
  grid-template-areas: 
    "coffee contact";
  width: 100%;
  margin-top: 80px;
  margin-bottom: 35px;
  height: auto;
}

.section5 img {
  width: 100%;
}

.section5 h1 {
    color: #1c3a3a;
    font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 80px;
}

.contactFormbg {
  grid-area: contact;
    background: #fff;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-left: 40px;
    padding: 40px;
    
}

form {

    width: 100%;
    font-size: 2rem;
    text-align: left;
}

.contactLabel {
  color: #1c3a3a;
    font-family: 'museoReg';
  letter-spacing: 5px;
    font-size: 1rem;
    text-transform: uppercase;
    padding-bottom: 15px;
}

input {
  border-radius: 5px;
  font-family: "museoReg";
    font-size: 12px;
    letter-spacing: .3px;

    width: 99%;
    background: #1c3a3a;
    color: white;
    float: left;
    border: none;
    padding: 10px;
}

textarea {
  border-radius: 5px;
    font-family: "museoReg";
    font-size: 12px;
    letter-spacing: .3px;

    height: 70px;
    width:  99%;
    background: #1c3a3a;
    color: white;
    float: left;
    border: none;
    padding: 10px;
}

#name {
    margin-left: 0px;
    color: white;
}

#email {
    margin-left: 0px;
}

#subject {
    margin-left: 0px;
}

#message {
    margin-top: 0px;
}

button {
    font-family: "museoReg";
    font-size: 16px;
    letter-spacing: .3px;
    text-transform: uppercase;

    background: #1c3a3a;
    color: #fff;
    margin-top: 20px;
    padding: 10px 20px 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}





/** Project Screen Styles */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.crime1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image"
    "para2 image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.crime2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para"
    "image para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.crime3 {
  width: 100%;
  grid-area: image;
}

.process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.75fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1"
    "para2 image2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.crime4 {
  width: 100%;
  margin-top: -40px;
  grid-area: image1;
}

.crime5 {
  width: 100%;
  margin-top: 0px;
  margin-left: 0px;
  grid-area: image2;
}

.deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1.75fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "button para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.crime_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 70px 2px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}


/* * RETAIL PROJECT 02 */

.about_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.retail_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr ;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 0px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.retail2 {
  width: 100%;
  grid-area: image;
}

.motion_graphics {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.motion1 {
  width: 100%;
  grid-area: image;
}

.interactive_catalogue {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.cata1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.rotating_product {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.rotate1 {
  width: 100%;
  grid-area: image;
}

.touchscreen_ordering {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para"
    "image para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.order1 {
  width: 100%;
  grid-area: image;
}

.touchscreen_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.retail_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.85fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1"
    "para2 para2"
    "para3 para3"
    "image3 image3"
    "para4 link";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.bb_link{
  text-decoration: none;
  color: #e59b39;
  font-family: 'museoBold';
}

.retail_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.retail_process_para3 {
  grid-area: para3;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.retail_process_para4 {
  grid-area: para4;

  
  width: 95%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.retail4 {
  width: 100%;
  grid-area: image1;
}

.retail5 {
  width: 100%;
  grid-area: image3;
}

.marketing_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 65px;
  grid-area: link;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 70px 2px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.retail_process a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}

.demo_video_section {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.demo_video {
  width: 100%;
  grid-area: video;
}

/* * MARKETING MATERIALS PAGE */

.marketing_materials {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image3 image2"
    "image1 image4"
    "heading1 heading1"
    "h1 h1"
    "video1_1 video1_1"
    "h2 h3"
    "video1_3 video1_2"
    "video1_3 video1_2"
    "h4 video1_2"
    "video1_4 video1_2"

    "heading2 heading2"
    "h5 h5"
    "video2_1 video2_1"
    "h6 h7"
    "video2_3 video2_2"
    "video2_3 video2_2"
    "h8 video2_2"
    "video2_4 video2_2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.heading1 {
  padding-top: 50px;
  padding-bottom: 30px;
  width: 100%;
  grid-area: heading1;
}

.heading2 {
  padding-top: 50px;
  padding-bottom: 30px;
  width: 100%;
  grid-area: heading2;
}

.standard {
  width: 100%;
  grid-area: h1;
  margin-bottom: 0px;
}

.story {
  width: 100%;
  grid-area: h2;
  margin-bottom: 0px;
}

.instagram {
  width: 100%;
  grid-area: h3;
  margin-bottom: 0px;
}

.facebook {
  width: 100%;
  grid-area: h4;
  margin-bottom: 0px;
}

.standard2 {
  width: 100%;
  grid-area: h5;
  margin-bottom: 0px;
}

.story2 {
  width: 100%;
  grid-area: h6;
  margin-bottom: 0px;
}

.instagram2 {
  width: 100%;
  grid-area: h7;
  margin-bottom: 0px;
}

.facebook2 {
  width: 100%;
  grid-area: h8;
  margin-bottom: 0px;
}

.mm1 {
  width: 100%;
  grid-area: image1;
}

.mm2 {
  width: 100%;
  grid-area: image2;
}

.mm3 {
  width: 100%;
  grid-area: image3;
}

.mm4 {
  width: 100%;
  grid-area: image4;
}

.video1_1 {
  width: 100%;
  grid-area: video1_1;
}

.video1_2 {
  width: 100%;
  grid-area: video1_2;
}

.video1_3 {
  width: 100%;
  grid-area: video1_3;
}

.video1_4 {
  width: 100%;
  grid-area: video1_4;
}

.video2_1 {
  width: 100%;
  grid-area: video2_1;
}

.video2_2 {
  width: 100%;
  grid-area: video2_2;
}

.video2_3 {
  width: 100%;
  grid-area: video2_3;
}

.video2_4 {
  width: 100%;
  grid-area: video2_4;
}


/** Sandwich Webpage */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.sandwich_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 2.5fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich1 {
  width: 100%;
  grid-area: image;
}

.sandwich_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image"
    "para2 image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich2 {
  width: 100%;
  grid-area: image;
}

.sandwich_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para"
    "image para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich3 {
  width: 100%;
  grid-area: image;
  display: initial;
}

.sandwich_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1"
    "para2 image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.sandwich_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.sandwich4 {
  width: 100%;
  margin-top: -40px;
  grid-area: image1;
}

.sandwich_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1.75fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "button para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.sandwich_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 40px 2px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.sandwich_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}


/** Restaurant App */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.res_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res1 {
  width: 100%;
  grid-area: image;
}

.res_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
  background-color: #979696;
}

.res_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para"
    "image para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res3 {
  width: 100%;
  grid-area: image;
}

.res_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.res_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.res_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1.75fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "button para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.res_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 40px 2px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.res_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}



/** Covid Infographic */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.covid_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.covid_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "image";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.covid1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.covid_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title "
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}



.covid_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 3.5fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}



.covid3 {
  width: 100%;
  grid-area: image;
  display:initial;
}

.covid_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.75fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.covid4 {
  width: 100%;
  grid-area: image1;
  border: 1px rgb(202, 202, 202) solid;
}

.covid_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.covid_vid {
  grid-area: video;
}

/** LG TV Product Demo */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.lg_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.lg_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg1 {
  width: 100%;
  grid-area: image;
}

.lg_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image"
    "para2 image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg2 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.lg_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.75fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.lg4 {
  width: 100%;
  grid-area: image1;
  border: 1px rgb(202, 202, 202) solid;
}

.lg_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "para"
    "video";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.lg_vid {
  grid-area: video;
}



/** DC Digital Signage */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.dc_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 3.5fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;


  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc1 {
  width: 100%;
  grid-area: image;
  display: initial;
}

.dc_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image"
    "para2 image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc2 {
  width: 100%;
  grid-area: image;
}

.dc_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para"
    "image para2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc_objective_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc3 {
  width: 100%;
  grid-area: image;
  display: initial;
}

.dc_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1"
    "para2 image2";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.dc_process_para2 {
  grid-area: para2;

  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.dc4 {
  width: 100%;
  margin-top: 0px;
  grid-area: image1;
}

.dc5 {
  width: 100%;
  margin-top: 0px;
  margin-left: 0px;
  grid-area: image2;
}

.dc_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1.75fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "button para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.dc_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 70px 2px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.dc_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}


/** Spring Break Matching Game */


.sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 20px;
}

.project_titles {
  width: 100%;
  grid-area: title;
}

.sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.spring_intro {
  height: auto;

  overflow: hidden;
  margin: 0 auto;

  width: 100%;
  max-width: 1100px;

  padding: 30px;
}

.spring_overview {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring1 {
  width: 100%;
  grid-area: image;
  border: 1px rgb(202, 202, 202) solid;
}

.spring_about {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image"
    "para2 image";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring2 {
  width: 100%;
  grid-area: image;
}

.spring_objective_challenges {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "image para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring3 {
  width: 100%;
  grid-area: image;
  display: initial;
}

.spring_process {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1.85fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "para image1"
    "para2 image1";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.spring_process_para2 {
  grid-area: para2;

  
  width: 100%;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.spring4 {
  width: 100%;
  grid-area: image1;
}

.spring_deliverable {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1.75fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "button para";

  /* background-color: rgba(238, 255, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 40px;
}

.spring_button {
  font-family: 'museoBold';
  font-size: 30px;
  letter-spacing: 5px;

  height: 48px;
  grid-area: button;
  background-color: #e59b39;
  border: none;
  color: #0a161c;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 40px 2px;
  cursor: pointer;

  transition: all .2s ease-in-out;
}

.spring_deliverable a:hover {
  transform: scale(1.008);

  color: #e59b39;
  background: #0a161c;
}


/* * GRAPHIC DESIGN PAGE */

.gd_sections_container {
  background-color: #f5f5f5;
  margin-left: 200px;
  padding: 80px;
  padding-bottom: 0px;
}

.gd_heading img {
  width: 100%;
  grid-area: title;
}

.gd_sections_container h1 {
  color: #0a161c;
  font-family: 'museoBold';
  font-size: 25px;
  letter-spacing: 2.5px;
  margin: 0;

  text-align: left;
}

.gd_sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.project1 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image1 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project2 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image2 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project3 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image3 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project4 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image4 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}

.project5 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title"
    "image"
    "para";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;
  margin-bottom: 70px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.gd_image5 {
  width: 100%;
  grid-area: image;
  border: 1.3px rgb(228, 228, 228) solid;
}



/** PHOTOGRAPHY PAGE  */

.photos_sections_container {
  margin-left: 200px;
  padding: 65px;
  padding-bottom: 0px;
}

.photos_heading img {
  width: 100%;
  grid-area: title;
}

.photos_sections_container h1 {
  color: #0a161c;
  font-family: 'museoBold';
  font-size: 25px;
  letter-spacing: 2.5px;
  margin: 0;
  text-align: left;
}

.photos_sections_container p{
  margin: 0;
  width: 100%;
  grid-area: para;
  font-family: 'museoReg';
  font-size: 15.5px;
  letter-spacing: 1.2px;
  line-height: 24px;
}

.photos1 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "img1 img2"
    "img3 img6"
    "img5 img4";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.photos1 h1 {
  grid-area: title;
}

.image1 {
  width: 100%;
  grid-area: img1;
}

.image2 {
  width: 100%;
  grid-area: img2;
}

.image3 {
  width: 100%;
  grid-area: img3;
}

.image4 {
  width: 100%;
  grid-area: img4;
}

.image5 {
  width: 100%;
  grid-area: img5;
}

.image6 {
  width: 100%;
  grid-area: img6;
}

.photos2 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "img7 img8"
    "img9 img10"
    "img11 img12"
    "img13 img14"
    "img15 img16"
    "img17 img18"
    "img19 img20";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.photos2 h1 {
  grid-area: title;
}

.image7 {
  width: 100%;
  grid-area: img7;
}

.image8 {
  width: 100%;
  grid-area: img8;
}

.image9 {
  width: 100%;
  grid-area: img9;
}

.image10 {
  width: 100%;
  grid-area: img10;
}

.image11 {
  width: 100%;
  grid-area: img11;
}

.image12 {
  width: 100%;
  grid-area: img12;
}

.image13 {
  width: 100%;
  grid-area: img13;
}

.image14 {
  width: 100%;
  grid-area: img14;
}

.image15 {
  width: 100%;
  grid-area: img15;
}

.image16 {
  width: 100%;
  grid-area: img16;
}

.image17 {
  width: 100%;
  grid-area: img17;
}

.image18 {
  width: 100%;
  grid-area: img18;
}

.image19 {
  width: 100%;
  grid-area: img19;
}

.image20 {
  width: 100%;
  grid-area: img20;
}

.photos3 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "img21 img22"
    "img23 img24"
    "img25 img26"
    "img27 img28";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.photos3 h1 {
  grid-area: title;
}

.image21 {
  width: 100%;
  grid-area: img21;
}

.image22 {
  width: 100%;
  grid-area: img22;
}

.image23 {
  width: 100%;
  grid-area: img23;
}

.image24 {
  width: 100%;
  grid-area: img24;
}

.image25 {
  width: 100%;
  grid-area: img25;
}

.image26 {
  width: 100%;
  grid-area: img26;
}

.image27 {
  width: 100%;
  grid-area: img27;
}

.image28 {
  width: 100%;
  grid-area: img28;
}

.photos4 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "img29 img30"
    "img31 img32";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.photos4 h1 {
  grid-area: title;
}

.image29 {
  width: 100%;
  grid-area: img29;
}

.image30 {
  width: 100%;
  grid-area: img30;
}

.image31 {
  width: 100%;
  grid-area: img31;
}

.image32 {
  width: 100%;
  grid-area: img32;
}

.photos5 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "img36 img37"
    "img35 img34"
    "img33 img38";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.photos5 h1 {
  grid-area: title;
}

.image33 {
  width: 100%;
  grid-area: img33;
}

.image34 {
  width: 100%;
  grid-area: img34;
}

.image35 {
  width: 100%;
  grid-area: img35;
}

.image36 {
  width: 100%;
  grid-area: img36;
}

.image37 {
  width: 100%;
  grid-area: img37;
}

.image38 {
  width: 100%;
  grid-area: img38;
}

.photos6 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "title title"
    "img39 img42"
    "img41 img40"
    "img43 img44"
    "img45 img46"
    "img47 img48"
    "img49 img50"
    "img51 img52";

  /* background-color: rgba(255, 0, 0, 0.3); */
  margin: 0 auto;

  width: 100%;
  height: auto;
  max-width: 1100px;
  margin-bottom: 40px;

  padding: 10px;
  text-align: justify;
  hyphens: auto;
}

.photos6 h1 {
  grid-area: title;
}

.image39 {
  width: 100%;
  grid-area: img39;
}

.image40 {
  width: 100%;
  grid-area: img40;
}

.image41 {
  width: 100%;
  grid-area: img41;
}

.image42 {
  width: 100%;
  grid-area: img42;
}

.image43 {
  width: 100%;
  grid-area: img43;
}

.image44 {
  width: 100%;
  grid-area: img44;
}

.image45 {
  width: 100%;
  grid-area: img45;
}

.image46 {
  width: 100%;
  grid-area: img46;
}

.image47 {
  width: 100%;
  grid-area: img47;
}

.image48 {
  width: 100%;
  grid-area: img48;
}

.image49 {
  width: 100%;
  grid-area: img49;
}

.image50 {
  width: 100%;
  grid-area: img50;
}

.image51 {
  width: 100%;
  grid-area: img51;
}

.image52 {
  width: 100%;
  grid-area: img52;
}

}

/* * NORMAL DESKTOP LAPTOP QUERY END */