@charset "UTF-8";
/* CSS Document */
/*---DEFAULT---*/
* {
      margin: 0;
      padding: 0;
}
body {
      font-size: 62.5%;
      font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
html {
      font-size: 100%;
}
.clearfloat {
      clear: both;
}
img {
      max-width: 100%;
}
/*-----COLOURS----

BLUE: #002663
YELLOW: #FDC82F
RED: #9E3039

*/
/*---STRUCTURE---*/
/*---STRUCTURE---*/
/*---STRUCTURE---*/
/*---STRUCTURE---*/
/*---STRUCTURE---*/
.wrapper {
      width: 960px;
      margin: 0 auto;
      /*	position: relative;*/
}
#about {
      padding: 100px 0;
}
/*---SERVICE ICONS---*/
/*---SERVICE ICONS---*/
/*---SERVICE ICONS---*/
#service-icons {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      flex-direction: row;
}
.service-icon-btn {
      border: 1px solid #002663;
      width: 308px;
      height: 70px;
      box-sizing: border-box;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      padding: 23px 5px 0px 70px;
      margin: 10px 0;
}
#feasability, #virtual, #rezoning, #full-service, #massing, #rendering, #assessments {
      background-repeat: no-repeat;
      background-size: 45px;
      background-position: 5% center;
}
#full-service {
      background-image: url("../img/ui/icon_full-service.svg");
}
#massing {
      background-image: url("../img/ui/icon_massing.svg");
}
#rezoning {
      background-image: url("../img/ui/icon_zoning.svg");
}
#assessments {
      background-image: url("../img/ui/icon_assessment.svg");
}
#rendering {
      background-image: url("../img/ui/icon_rendering.svg");
}
#feasability {
      background-image: url("../img/ui/icon_feasability.svg");
}
/*---TYPE---*/
/*---TYPE---*/
/*---TYPE---*/
/*---TYPE---*/
/*---TYPE---*/
header h1 {
      position: absolute;
      text-align: center;
      top: 50%;
      left: 5%;
      color: #fff;
      font-size: 10em;
      font-family: 'gotham-ultra';
      font-weight: normal;
      letter-spacing: 0.3em;
      line-height: .8em;
      text-transform: uppercase;
}
h2 {
      font-family: 'gotham-ultra';
      font-weight: normal;
      font-size: 1.6em;
      letter-spacing: 0.3em;
      color: #002663;
      margin-top: 50px;
      margin-bottom: 20px;
      text-transform: uppercase;
}
h3 {
      font-family: 'gotham-light';
      font-size: 1.6em;
      text-align: left;
      color: #002663;
}
h4 {
      font-family: 'gotham-med';
      font-size: 1.7em;
      text-align: left;
      color: #000;
      text-transform: uppercase;
}
p {
      font-family: 'gotham-light';
      font-size: 1.8em;
      line-height: 26px;
      margin-top: 35px;
}
#feature p {
      margin: 0 0 35px 0;
}
#feature h2 {
      margin-top: 0px;
}
.p-italic {
      font-style: italic;
      font-weight: 900;
      font-family: 'gotham-med';
}
.blue {
      color: #002663;
}
.yellow {
      color: #FDC82F;
}
.red {
      color: #9E3039;
}
.bold {
          font-family: 'gotham-ultra';
    font-kerning: auto;
      letter-spacing: 0.08em;


}
    
/*---MAIN NAVIGATION---*/
/*---MAIN NAVIGATION---*/
/*---MAIN NAVIGATION---*/
/*---MAIN NAVIGATION---*/
/*---MAIN NAVIGATION---*/
nav {
      position: fixed;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      background-color: #002663;
      z-index: 10000;
}
#logo {
      float: left;
      /*        background-color: #000;*/
      padding: 20px 30px;
}
nav ul {
      display: flex;
      justify-content: space-evenly;
      float: right;
      width: 700px;
      list-style: none;
      height: 45px;
      padding-top: 25px;
}
nav li {
      position: relative;
}
nav li a:link, nav li a:visited {
      font-size: 1.2em;
      text-transform: uppercase;
      font-family: 'gotham-med';
      color: #fff;
      letter-spacing: 0.3em;
      text-decoration: none;
      font-weight: 100;
}
nav li a:hover, nav li a:focus, nav li a:active, nav li a.current {
      border-bottom: 1px solid #FDC82F;
      padding-bottom: 2px;
}
nav li.social-icons a:hover, nav li.social-icons a:focus, nav li.social-icons a:active {
      border-bottom: none;
}
nav li ul {
      position: absolute;
      left: -10000px;
      display: block;
      width: auto;
}
nav li:hover ul {
      left: 0;
      height: auto;
      padding-top: 28px;
      display: block;
      margin-left: -15px;
}
nav li li a:link, nav li li a:visited {
      font-family: 'gotham-med';
      text-transform: none;
      width: 100%;
      display: block;
      letter-spacing: 0.1em;
      padding: 10px 20px 8px 20px;
      font-size: 1.4em;
      background-color: #002663;
      transition: all 0.2s ease;
}
nav li li a:hover, nav li li a:focus, nav li li a:active {
      border-bottom: none;
      color: #002663;
      background-color: #fff;
}
.vert-line {
      background-color: #fff;
      width: 2px;
      height: 14px;
}
.social-icons {
      margin-top: -4px;
}
/*----CTA-----*/
/*----CTA-----*/
/*----CTA-----*/
.cta {
      display: flex;
      width: 636px;
      justify-content: space-between;
      margin-top: 30px;
}
.cta a:link, .cta a:visited {
      width: 308px;
      height: 70px;
      box-sizing: border-box;
      font-family: 'gotham-ultra';
      font-weight: normal;
      font-size: 1.4em;
      letter-spacing: 0.3em;
      text-align: center;
      color: #002663;
      background-color: #FDC82F;
      text-transform: uppercase;
      padding-top: 26px;
      text-decoration: none;
}
.cta a:hover, .cta a:focus, .cta a:active {
      background-color: #9E3039;
      color: #fff;
}
/*----FEATURE-----*/
/*----FEATURE-----*/
/*----FEATURE-----*/
#feature {
      background-color: #FDC82F;
      width: 100%;
      padding: 65px 0;
}
#feature-image {
      background-image: url("../project/000-feature/feature-image.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      width: 60%;
      height: 570px;
      background-position:left;
      float: left;
}
#feature-copy {
      width: 308px;
      box-sizing: border-box;
      float: left;
      margin-left: 3%;
}
#feature-copy a:link, #feature-copy a:visited {
      width: 308px;
      height: 70px;
      box-sizing: border-box;
      font-family: 'gotham-ultra';
      font-weight: normal;
      font-size: 1.4em;
      letter-spacing: 0.3em;
      text-align: center;
      color: #fff;
      background-color: #002663;
      text-transform: uppercase;
      padding-top: 26px;
      text-decoration: none;
      display: block;
}
#feature-copy a:hover, #feature-copy a:focus, #feature-copy a:active {
      background-color: #9E3039;
      color: #fff;
}
/*----PROJECT-----*/
/*----PROJECT-----*/
/*----PROJECT-----*/
#projects {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
}
.project {
      width: 50%;
      background-color: #002663;
      position: relative;
}
.project img {
      width: 100%;
}
.project:hover img {
      mix-blend-mode: multiply;
}

.project a:link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.project p {
      font-family: 'gotham-ultra';
      font-weight: normal;
      font-size: 1.6em;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      display: block;
      text-align: center;
      visibility: hidden;
      opacity: 0;
      position: absolute;
      top: 40%;
      width: 100%;
      transition: all 0.5s ease;
}
.project:hover p {
      visibility: visible;
      opacity: .9;
}
/*----CONTACT US-----*/
/*----CONTACT US-----*/
/*----CONTACT US-----*/
#contact-us {
      background-image: url("../img/footer/footer-image.jpg");
      background-size: cover;
      width: 100%;
      height: auto;
      background-position: center;
    
}

#contact-container-2 {
    display: flex;
    justify-content: space-evenly;
    margin: 0 100px;
}

#address-block {
    width: 33%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 30px;
    margin: 0 100px;
}

#address-block a:link, #address-block a:visited {
    text-decoration: none;
    color: #002663;
    
}
#address-block a:focus, #address-block a:hover, #address-block a:active {
    border-bottom: 1px solid #FDC82F;
    

}

#directions a:link, #directions a:visited {
    text-decoration: none;
    color: #002663;
}
#directions a:focus, #directions a:hover, #directions a:active {
    border-bottom: 1px solid #FDC82F;   

}

 #contact-logo {
        width: 70px;
        margin-bottom: 20px;
        display: block;
    }

.contact-block {
    width: 50%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 30px;
    margin: 100px 5px;
    height: inherit;
}

#google-map {
    width: 100%;
    margin: 0 auto;
    z-index: 1000;
}
#contact-us h6 {
    color: #002663;
      font-family: 'gotham-med';
      font-weight: normal;
      font-size: 1.6em;
      letter-spacing: 0.3em;
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: left;
    margin-bottom: 20px;
}

#contact-us p {
    color: #002663;
      font-family: 'gotham-light';
      font-weight: normal;
      font-size: 1.6em;
      line-height: 1.4em;
      text-align: left;
    margin: 0;
    padding: 0;
}

.space {
        margin-bottom: 20px;

}

/*----FOOTER-----*/
footer {
      background-color: #002663;
      height: 135px;
      box-sizing: border-box;
      padding: 44px 0;
      width: 100%;
}
#footer-logo {
      width: 226px;
      float: left;
}
#footer-logo img {
      width: 100%;
}

footer h6 {
      color: #fff;
      font-family: 'gotham-med';
      font-weight: normal;
      font-size: 1.4em;
      letter-spacing: 0.3em;
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: left;
}
footer a:link, footer a:visited {
      text-decoration: none;
      color: #fff;
}

#footer-signature {
    float: right;
    color: #fff;
 font-family: 'gotham-med';
      font-weight: normal;
      font-size: 1em;
      letter-spacing: 0.3em;
      line-height: 1.2em;
      text-transform: uppercase;
    padding-top: 30px;

}


/*----OWL-----*/
.owl-carousel {
      position: relative;
      height: 100%;
}
.owl-slide {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      width: 100%;
      background-color: #fff;
      height: 100vh;
      max-height: 100%;
}
#image1 {
      background-image: url("../img/hero-slider/image-1.jpg");
}
#image2 {
      background-image: url("../img/hero-slider/image-2.jpg");
}
#image3 {
      background-image: url("../img/hero-slider/image-3.jpg");
}
#image4 {
      background-image: url("../img/hero-slider/image-4.jpg");
}
#image5 {
      background-image: url("../img/hero-slider/image-5.jpg");
}
#image6 {
      background-image: url("../img/hero-slider/image-6.jpg");
}
#image7 {
      background-image: url("../img/hero-slider/image-7.jpg");
}
#image8 {
      background-image: url("../img/hero-slider/image-8.jpg");
}
.owl-prev {
      position: absolute;
      background-image: url("../img/ui/arrow-prev.svg");
      background-size: 25px 50px;
      top: 50%;
      left: 25px;
      margin-top: -50px;
      width: 25px;
      height: 50px;
}
.owl-next {
      position: absolute;
      background-image: url("../img/ui/arrow-next.svg");
      background-size: 25px 50px;
      right: 25px;
      top: 50%;
      margin-top: -50px;
      width: 25px;
      height: 50px;
}
/*----HAMBURGER MENU----*/
#logo-mobile {
      float: left;
      width: 138px;
      margin-left: 20px;
}
#logo-mobile img {
      padding: 20px 0 0 0;
      width: 100%;
}
.hamburger-menu {
      display: none;
}
.hamburger-menu a:link, .hamburger-menu a:visited {
      text-decoration: none;
}
.hamburger {
      display: none;
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #002663;
      z-index: 10000;
      height: 70px;
}
#hamburger-container {
      float: right;
      width: 25px;
      margin-right: 20px;
      margin-top: 20px;
}
.bar {
      display: block;
      width: 25px;
      height: 2px;
      margin: 6px auto;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      background-color: #FDC82F;
}
.nav-item {
      text-align: right;
      padding-right: 20px;
}
.nav-item img {
      width: 65px;
}
.nav-link {
      font-size: 2.4em;
      font-family: 'gotham-light';
      letter-spacing: 0.1em;
      font-weight: 600;
      color: #383838;
}
.special {
      font-size: 1.8em;
      font-family: 'gotham-ultra';
      letter-spacing: 0.1em;
      font-weight: 600;
      color: #383838;
}
.nav-link:hover {
      border-bottom: 1px solid #FDC82F;
}
/*----Project Page Specific CSS----*/
/*----Project Page Specific CSS----*/
/*----Project Page Specific CSS----*/
#project-desc {
      padding: 60px 0;
      position: relative;
      height: auto;
}
#yellow-arrow {
      margin-top: -120px;
      width: 40px;
      height: 40px;
      z-index: 9000;
      position: absolute;
}
#yellow-arrow img {}
#project-block {
      background-color: #FDC82F;
      padding: 60px 20px 0px;
      width: 308px;
      box-sizing: border-box;
      float: left;
      margin-top: -80px;
      z-index: 9000;
      position: relative;
}
#project-block p {
      margin: 0 0 20px 0;
}
#project-blurb {
      float: left;
      width: 632px;
      margin: 100px 0 0 328px;
      position: absolute;
      bottom: 60px;
}
#project-blurb p {
      font-size: 2.4em;
      font-family: 'gotham-light';
      line-height: 34px;
}
.project-layout {
      display: flex;
      justify-content: space-between;
      width: 100%;
	max-width: 1366px;
      padding: 0 0%;
      box-sizing: border-box;
      flex-wrap: wrap;
	margin: 0 auto;
}
.half-image {
      width: 50%;
      box-sizing: border-box;
      border: 10px solid #fff;
}
.full-image {
      width: 100%;
      border: 10px solid #fff;
}
.project-writeup {
      width: 960px;
      margin: 100px auto;
}
.column {
      float: left;
      width: 48%;
      box-sizing: border-box;
}
.call-out {
      width: 960px;
      margin: 0 auto;
      padding-bottom: 100px;
}
.call-out p {
      font-size: 2.4em;
      font-family: 'gotham-light';
      line-height: 34px;
      color: #002663;
      margin-left: 328px;
}
.border {
      border: 1px solid #000;
}
#project-nav {
      margin: 100px auto;
}
#project-nav ul {
      display: flex;
      justify-content: space-between;
      list-style: none;
}
#project-nav li.prev-btn a:link, #project-nav li.prev-btn a:visited {
      background-image: url("../img/ui/project-nav-back-arrow.svg");
      background-repeat: no-repeat;
      background-position: center left 25px;
      display: block;
      padding: 26px 50px;
      font-size: 1.2em;
      text-transform: uppercase;
      font-family: 'gotham-ultra';
      color: #002663;
      letter-spacing: 0.3em;
      text-decoration: none;
      background-color: #FDC82F;
}
#project-nav li.prev-btn a:hover, #project-nav li.prev-btn a:focus, #project-nav li.prev-btn a:active {
      background-color: #9E3039;
      color: #fff;
      background-image: url("../img/ui/project-nav-back-arrow-white.svg");
      background-repeat: no-repeat;
      background-position: center left 25px;
      background-size: 8px;
}
#project-nav li.next-btn a:link, #project-nav li.next-btn a:visited {
      background-image: url("../img/ui/project-nav-forward-arrow.svg");
      background-repeat: no-repeat;
      background-position: center right 25px;
      display: block;
      padding: 26px 50px;
      font-size: 1.2em;
      text-transform: uppercase;
      font-family: 'gotham-ultra';
      color: #002663;
      letter-spacing: 0.3em;
      text-decoration: none;
      background-color: #FDC82F;
}
#project-nav li.next-btn a:hover, #project-nav li.next-btn a:focus, #project-nav li.next-btn a:active {
      background-color: #9E3039;
      color: #fff;
      background-image: url("../img/ui/project-nav-forward-arrow-white.svg");
      background-repeat: no-repeat;
      background-position: center right 25px;
      background-size: 8px;
}
/*----About Page Specific CSS----*/
/*----About Page Specific CSS----*/
/*----About Page Specific CSS----*/
/*----About Page Specific CSS----*/
#header-image {
      background-image: url("../img/about/header.jpg");
      width: 100%;
      height: 100vh;
      background-size: cover;
    background-position: center;
}
#bio-image-container {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      box-sizing: border-box;

}
#bio-image-container button {
      width: 50%;
      margin: 6px 6px;
    position: relative;
    box-sizing: border-box;

}

.bio-image {
          width: 100%;

}

#bio-1 {
           width: 100%;
      height: 264px;

      background-image: url("../img/about/staff/dan-guillemette.jpg");
      background-size: cover;
    background-position: center;
}
#bio-2 {
     width: 100%;
      height: 264px;
      background-image: url("../img/about/staff/kate-bowman.jpg");
      background-size: cover;
        background-position: center;

}

.by-line {
      position: absolute;
      bottom: -50px;
      background-color: #002663;
      color: #fff;
      padding: 8px;
      width: 100%;
      box-sizing: border-box;
}
.bio-image p {
      padding: 0;
      margin: 0;
      font-size: 1.5em;
      line-height: 1.3em;
}
button {
      border: none;
      text-align: left;
}
button:hover {
      opacity: .8;
}

#team-members li .bold .small {
    font-size: .6em;
    font-weight: 100;
}

#team-members {
          margin-bottom: 100px;
              margin-top: 80px;


}

#team-members ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
}

#team-members li {
    list-style: none;
    border: 1px solid #002663;
      box-sizing: border-box;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      padding: 23px;
      margin: 10px;
    font-family: 'gotham-light';
      font-size: 1.5em;
      text-align: left;
      color: #002663;
}

#office-image-1 {
    background-image: url("../img/about/office/_MG_5110.jpg");
    background-position: center;
    
}

#office-image-gallery {
    display: flex;
    margin-top: 200px;
    
}

#office-image-gallery img {
    width: 50%;
          margin: 5px;
          box-sizing: border-box;
}

.image-call-out {
     width: 60%;
    position: relative;
    left: -20%;
    background-size:cover;
    background-position: center;
    height: 600px;
}

.about-call-out p {
     font-size: 2.4em;
      font-family: 'gotham-light';
      line-height: 34px;
      color: #002663;
      margin: -400px 0 0 200px;
    padding: 40px;
    background-color: #fff;
        position: relative;
    
}



/*----MODAL----*/
/* The Modal (background) */
.modal {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      z-index: 1;
      /* Sit on top */
      padding-top: 150px;
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
      overflow: auto;
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 60%;
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s;
    max-height: 60vh;
    max-width: 750px;
}


/* MODAL LAYOUT */


.modal-photo {



}
.modal-desc {
    padding: 20px 50px 0px 0px;
    width: 100%;
    box-sizing: border-box;
            position: relative;
      background-color: #fefefe;


}

#modal-1-photo {
    background-image: url("../img/about/staff/dan-guillemette-2.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    position: relative; 
    height: 308px;
}
#modal-2-photo {
    background-image: url("../img/about/staff/kate-bowman-2.jpg");
  background-size: cover;
    background-position: center;
    width: 100%;
    position: relative; 
    height: 308px;


}

.modal h4 {
    
}

.modal p {
    padding:0;
    margin:10px 0;
    font-size: 1.5em;
    
}
.modal a:link {
    font-size: 1.6em;
    background-color: #002663;
    color: #fff;
    padding: 10px;
    display: inline-block;
    font-weight: 100;
    text-decoration: none;
}

/* Add Animation */
@-webkit-keyframes animatetop {
      from {
            top: -300px;
            opacity: 0
      }
      to {
            top: 0;
            opacity: 1
      }
}
@keyframes animatetop {
      from {
            top: -300px;
            opacity: 0
      }
      to {
            top: 0;
            opacity: 1
      }
}
/* The Close Button */
.close {
      color: black;
    position: absolute;
    top: 0px;
    right: 20px;
      font-size: 28px;
      font-weight: bold;
    background-color: #FDC82F;
    width: 40px;
    text-align: center;
    z-index: 6000;
    
}
.close:hover, .close:focus {
      text-decoration: none;
      cursor: pointer;
}


/*----WORK WITH US Page Specific CSS----*/
/*----WORK WITH US Page Specific CSS----*/
/*----WORK WITH US Page Specific CSS----*/
/*----WORK WITH US Page Specific CSS----*/

#header-image-2 {
      background-image: url("../img/work-with-us/header-image.jpg");
      width: 100%;
      height: 100vh;
      background-size: cover;
    background-position: center;
}

#residential-image {
    background-image: url("../img/work-with-us/res-image-1.jpg");
    
}

#local-image {
    background-image: url("../img/work-with-us/local-image-1.jpg");
    
}

.client-variations {
    padding: 50px 0;
}

.client-images {
    display: flex;
    
}

.client-images img {
    width: 100%;
}

#list-container {
    display: flex;
    
}
#client-list {
    padding: 0 0 100px 0;
}
#client-list ul {
    padding: 40px;
}


#client-list li {
    list-style: none;
      font-family: 'gotham-light';
      font-size: 2em;
      text-align: left;
      color: #002663;
    margin: 5px 0;
    

}







/*------MEDIA QUERY 0-959px--------*/
/*------MEDIA QUERY 0-959px--------*/
/*------MEDIA QUERY 0-959px--------*/




@media only screen and (max-width : 959px) {
      .wrapper {
            width: 100%;
      }
      header h1 {
            position: absolute;
            text-align: center;
            top: 50%;
            left: 5%;
            color: #fff;
            font-size: 4.8em;
            font-family: 'gotham-ultra';
            font-weight: normal;
            letter-spacing: 0.3em;
            line-height: .8em;
            text-transform: uppercase;
      }
      #about, #staff {
            width: 100%;
            padding-left: 30px;
            padding-right: 30px;
            box-sizing: border-box;
      }
      .service-icon-btn {
            width: 100%;
      }
      .cta {
            width: 100%;
            flex-wrap: wrap;
      }
      .cta a:link, .cta a:visited {
            width: 100%;
            margin: 5px;
      }
      #feature {
            display: none;
      }
      .project {
            width: 100%;
      }
      #contact-us {
            background-position: bottom 50px center;
            background-repeat: no-repeat;
      }
      
      footer {
            height: auto;
      }
      
    
   
      #footer-logo {
            float: none;
            padding: 0 0 0 30px;
            box-sizing: border-box;
      }
      
      #address-block {
          width: 80%;
          margin: 0 auto;
          box-sizing: border-box;
      }
    #contact-container-2 {
        display: inline;
    }
    
    .contact-block {
    width: 80%;
   margin: 15px auto;
}
    
    
      nav {
            display: none;
      }
      .hamburger-menu {
            display: inline;
            z-index: 10000;
      }
      .nav-menu {
            position: fixed;
            left: -100%;
            top: 70px;
            flex-direction: column;
            background-color: #fff;
            width: 100%;
            transition: 0.3s;
            z-index: 10000;
            height: 100vh;
            opacity: 1;
      }
      .nav-menu.active {
            left: 0;
      }
      .nav-item {
            margin: 1rem 0;
      }
      .hamburger {
            display: block;
      }
      #yellow-arrow {
            width: 308px;
            margin: -120px auto 0;
            position: relative;
      }
      #project-block {
            float: none;
            margin: -0px auto 0;
            padding-bottom: 20px;
      }
      #project-blurb {
            float: none;
      }
      #project-blurb {
            position: relative;
            margin: 100px 0 0 0;
            width: 100%;
            padding: 60px 50px 0;
            box-sizing: border-box;
      }
      .half-image {
            width: 100%;
      }
      .project-writeup {
            width: 100%;
            box-sizing: border-box;
            padding: 0px 50px;
      }
      .column {
            float: none;
            width: 100%;
            box-sizing: border-box;
      }
      .call-out {
            width: 100%;
            box-sizing: border-box;
      }
      .call-out p {
            font-size: 2.4em;
            margin-left: 0;
            padding: 0px 50px;
      }
    
    .image-call-out {
     width: 100%;
    position: relative;
    left: 0;
    background-size:cover;
    background-position: center;
    height: 300px;
        margin-bottom: 40px;
}

.about-call-out p {
     font-size: 2.4em;
      line-height: 34px;
    width: 100%;
box-sizing: border-box;
    margin: 0px;
    padding: 0px;
        position:relative;
    
}
    #office-image-gallery {
    margin-top: 40px;
    
}


    
}