*, ::after, ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

@font-face {
  font-family: Knucklehead;
  src: url(fonts/Knucklehead.otf) format("opentype");
  font-display: swap
}

:root {
  --white-color: #f8f8f8;
  --grey-color: #eeeeee;
  --red-color: #ee0000;
  --dark-green-color: #15532e;
  --alt-red-color: #c00000;
  --black-color: #111111;
  --tan-color: #b5a389;
  --primary-font: Knucklehead, 'Monserrat', sans-serif;
  --secondary-font: 'PT Serif', serif

}

body {
  height: 100vh
}

h1, h2, p {
  color: var(--black-color);
  text-align: center
}

h1 {
  font-size: 7rem;
  margin-bottom: 24px;
  font-family: var(--primary-font);
  letter-spacing: 5px;
  font-weight: 400;
  color: var(--white-color)
}

h2 {
  font-size: 4.5rem;
  font-family: var(--primary-font);
  letter-spacing: 2px;
  font-weight: 400;
  margin-bottom: 2%
}

li {
  list-style-type: none;
  padding: 10px 20px 10px 20px
}

li a {
  text-decoration: none;
  color: var(--white-color)
}

p {
  font-family: var(--secondary-font)
}

.scrolled {
  background-color: #15532e
}

.nav-logo {
  font-size: 2.5rem;
  letter-spacing: 1px;
  font-weight: 400;
  font-family: var(--primary-font)
}

#icon {
  display: none
}

.header-logo {
  display: block;
  width: 20vh;
  margin-left: auto;
  margin-right: auto
}

.outer-nav {
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style-type: none;
  height: 10vh;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  color: var(--white-color)
}

.inner-nav {
  display: flex;
  align-items: center
}

.inner-nav li {
  font-size: 1.4rem;
  margin-left: 1vh;
  margin-right: 3vh;
  font-family: var(--primary-font);
  letter-spacing: 2.5px;
  font-weight: 100
}

.inner-nav a {
  text-decoration: none;
  color: var(--white-color)
}

.inner-nav a:hover {
  color: var(--white-color);
  transition: .5s
}

#Contact-Us-Nav {
  background-color: #b5a389;
  border-radius: 6px;
  margin-right: 0;
}

.inner-nav #Contact-Us-Nav {
  margin-top: 0;
}

#mobile-menu {
  display: none;
  background-color: #000000f5;
  top: 10vh;
  flex-direction: column;
  height: auto;
  padding-bottom: 1.5vh;
}
#mobile-menu li {
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.subheading {
  color: var(--white-color);
  font-size: 1.5rem;
  margin-bottom: 2rem
}

.hero-banner {
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .75)), url(photos/frontWhite.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3%
}

.hero-buttons {
  display: flex;
  justify-content: center
}

.button {
  font-size: 2.5vh;
  letter-spacing: 3px;
  text-decoration: none;
  color: var(--white-color);
  padding: 15px 25px 15px 25px;
  background-color: var(--black-color);
  border-radius: 5.429rem;
  text-transform: uppercase;
  font-family: var(--primary-font)
}

.second-button {
  background-color: #00000000;
  border: 2px solid var(--black-color)
}

.second-button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: .5s
}

.second-button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: .5s;
  color: var(--alt-red-color)
}

.second-button:hover span {
  padding-right: 25px
}

.second-button:hover span:after {
  opacity: 1;
  right: 0
}

.content {
  padding: 0 2vh
}

.solid {
  border-top: 3px solid var(--dark-green-color);
  width: 20vh;
  margin-left: auto;
  margin-right: auto
}

.center {
  margin-left: auto;
  margin-right: auto;
  max-width: 50rem;
  padding: 2rem 2rem
}

.about-content {
  margin-left: auto;
  margin-right: auto
}

.about {
  margin-bottom: 10%
}

.services {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 5vh;
  padding-top: 5vh
}

.service {
  display: flex;
  flex-direction: column;
  margin: 0 2%;
  padding-bottom: 2%;
  padding-top: 2%;
  -ms-flex: 1;
  flex: 1;
  flex-basis: 24%;
}

.service img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
  width: 100%;
  height: 300px;
  object-fit: cover;
  margin-bottom: 2vh
}

.service h2 {
  font-size: 3.5rem;
  color: var(--dark-green-color);
  text-align: left
}

.service p {
  text-align: left
}

.call-to-action {
  display: flex;
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .4)), url(photos/call-to-action.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 30vh;
  justify-content: center;
  align-items: center;
  margin-bottom: 5vh
}

.call-to-text {
  display: flex;
  flex-direction: column;
  align-items: center
}

.call-to-text h2 {
  color: var(--white-color);
  font-size: 3.5rem;

}

.call-to-text a {
  padding: 20px 40px 20px 40px;
  font-size: 2.5rem;
}

.call-to-text {
  font-size: 1rem
}

.portfolio-showcase {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5vh;
  margin-bottom: 10vh
}

.portfolio {
  display: flex;
  flex: 0 1 calc(25% - 4vh);
  height: 20vh;
  margin: 0 2vh;
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .4)), url(photos/call-to-action.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center
}

.portfolio-text {
  color: var(--white-color);
  text-align: center;
  font-size: 2.5rem;
  padding-left: .5rem
}

.port1 {
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .4)), url(photos/project_1.jpeg)
}

.port2 {
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .4)), url(photos/project_2.jpeg)
}

.port3 {
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .4)), url(photos/proj2/image_24.jpeg)
}

.port4 {
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .4)), url(photos/project_4.jpeg)
}

footer {
  background-color: #383838;
  padding: 2% 10%;
  padding-bottom: 0
}

.footer-logo {
  display: block;
  width: 24rem;
  margin-left: auto;
  margin-right: auto
}

.points-of-contact {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 5vh 0;
  padding-top: 2vh
}

.point {
  display: flex;
  flex-direction: row;
  align-content: center
}

.fa-envelope, .fa-map-marker-alt, .fa-phone, .point-text {
  line-height: 50px
}

.fa-envelope, .fa-map-marker-alt, .fa-phone {
  vertical-align: middle;
  font-size: 1.25rem;
  padding-right: .5vh;
  padding-left: .25vh;
  color: #d4d4d4
}

h3 {
  font-size: 1.5rem;
  font-family: var(--primary-font);
  color: #d4d4d4;
  letter-spacing: 2px;
  font-weight: 400
}

.copyright {
  border-top: #747474 1px solid;
  padding: 1% 0;
  color: #d4d4d4
}

.new-hero-banner {
  height: 65vh;
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .4)), url(photos/project_4.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.filters {
  display: flex;
  justify-content: center;
  align-items: center
}

button {
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  color: #55565b;
  font-size: 1.05rem;
  font-weight: 550
}

.filters li:not(:first-child):before {
  content: '-';
  display: inline-block;
  vertical-align: middle;
  color: #55565b;
  padding-left: 1rem;
  padding-right: 1rem
}

.filters li {
  padding: 0
}

.projects {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center
}

.project {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 2.5vh 2.5vh;
  text-decoration: none
}

.project img {
  float: left;
  width: 640px;
  height: 480px;
  object-fit: cover;
  margin-bottom: 2vh
}

.project-title {
  font-size: 1.5rem;
  font-style: normal;
  font-family: var(--secondary-font);
  text-decoration: none;
  color: var(--dark-green-color);
}

a {
  text-decoration: none;
  color: inherit;
}

#all {
  color: #000
}

.portfolio-hero-banner {
  height: 40vh
}

.pictures {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.picture {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 2.5vh 2.5vh;
  text-decoration: none
}

.picture img {
  float: left;
  width: 500px;
  height: 375px;
  object-fit: cover;
  margin-bottom: 2vh
}

.proj1 {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/proj1/image_32.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.proj2 {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/proj2/image_27.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.proj3 {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/proj3/image_14.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.proj4 {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/proj4/image_17.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.rocky {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/mountrockykitchen/finish1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}
.kitchenette {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/kitchenette/pic1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}
.whitefield {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/whitefieldporch/pic1\ \(2\).jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}
.harmony {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/harmony/pic1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.aberdeen {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/proj5/image_7.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.union {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/unionst/finish1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.walden {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/waldenclubhouse/finished5.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.mt-felix {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/mtfelixdeck/finish1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.covedeck {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/covedeck/finish1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.waterdeck {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/watersdeck/finish1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.cherrybasement {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/cherrybasement/finish2.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.nelsonmill {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/nelsonmillroof/finish1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.greenst {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/greenst/finish2.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.preistfordrails {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/preistfordrails/finish2.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.washingtondeck {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/washingtondeck/finish1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.baumgardnerbath {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/baumgardnerbath/finish1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.amazon {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/amazon/amazon1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
}

.patterson {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/patterson-roof/roof5.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.contact-banner {
  background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url(photos/proj4/image_19.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.contact-us {
  display: flex;
  justify-content: space-around;
  padding: 2% 10%
}

input {
  width: 100%;
  height: 2.5rem;
  border-radius: 4px;
  border-width: 1px;
  font-size: 1rem;
  padding: 5px;
  font-family: sans-serif
}

.contact-form {
  width: 75%
}

.row {
  display: flex;
  width: 100%;
  margin-top: 1.5rem
}

.row p {
  width: 70%;
  margin-left: 1rem
}

.row p:first-child {
  margin-left: 0
}

.row:first-child {
  margin-top: 0
}

.project-type {
  padding-top: 1.5rem
}

label {
  display: block;
  font-size: 2rem;
  letter-spacing: 2px;
  margin-bottom: .5rem;
  font-family: var(--primary-font)
}

select {
  width: 100%;
  height: 2.5rem;
  border-radius: 4px;
  border-width: 1px;
  font-size: 1rem;
  padding: 5px;
  font-family: sans-serif
}

textarea {
  display: block;
  width: 100%;
  height: 5rem;
  resize: none;
  border-radius: 4px;
  border-width: 1px;
  font-size: 1rem;
  padding: 5px;
  font-family: sans-serif
}

form {
  text-align: center
}

@media (max-width:900px) {
  .services {
    flex-direction: column;
    flex-basis: auto;
  }

  .portfolio {
    flex: 0 1 calc(50% - 4vh);
    margin-bottom: 4vh
  }

  .points-of-contact {
    flex-direction: column;
    align-items: center;
    justify-content: center
  }
}

@media (max-width:780px) {
  .inner-nav li {
    margin-right: .5vh
  }

  .new-hero-banner div h1 {
    padding-top: 10vh;
    font-size: 5rem
  }
}

@media (min-width:731px) {
  #mobile-menu {
    display: none
  }
}

@media (max-width:730px) {
  .inner-nav li {
    display: none
  }

  #nav-id {
    background-color: #15532e
  }

  #icon {
    display: block
  }

  .project img {
    width: 427px;
    height: 320px
  }
}

@media(max-width:700px) {
  .row {
    flex-direction: column;
    align-items: center
  }

  .row p {
    margin-left: 0;
    width: 100%
  }

  label {
    margin-top: 1.5rem
  }

  .inactiveLink {
   pointer-events: none;
   cursor: default;
}

  .project-type {
    padding-top: 0
  }

  .row {
    margin-top: 0
  }

  textarea {
    margin-bottom: 1.5rem
  }
}

@media (max-width:550px) {
  .call-to-text a {
    margin: 0;
    margin-right: 0 !important
  }

  .picture img {
    width: 320px;
    height: 240px
  }
}

@media (max-width:500px) {
  h1 {
    font-size: 5rem
  }

  .subheading {
    font-size: 1.3rem
  }

  .hero-buttons .button {
    font-size: 1.3rem;
    margin-bottom: 1rem
  }

  .center {
    padding: 1rem 1rem
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center
  }

  .portfolio {
    flex: 1 calc(90% - 4vh)
  }

  .footer-logo {
    width: 100%
  }

  .header-logo {
    width: 17vh
  }

  .project img {
    width: 320px;
    height: 240px
  }

  .filters li:not(:first-child):before {
    content: '';
    display: inline-block;
    padding-left: .4rem;
    padding-right: .4rem
  }

  .filters li button {
    font-size: .9rem
  }
}

@media (max-width:400px) {
  h2 {
    font-size: 3rem
  }

  h1 {
    font-size: 3.5rem
  }

  .new-hero-banner div h1 {
    padding-top: 10vh;
    font-size: 3.3rem
  }

  .subheading {
    font-size: 1rem
  }

  .filters li button {
    font-size: .7rem
  }
}

@media (max-width:350px) {
  .project img {
    width: 213px;
    height: 160px
  }

  .picture img {
    width: 213px;
    height: 160px
  }
}

@media (max-width:300px) {
  .points-of-contact {
    flex-direction: column;
    align-items: center;
    justify-content: center
  }

  .footer-logo {
    width: 100%
  }

  .header-logo {
    width: 15vh
  }

  .content {
    padding: 0
  }

  .fa-envelope, .fa-map-marker-alt, .fa-phone {
    font-size: 10px
  }

  .point-text {
    font-size: 1rem
  }
}




/* keep mobile menu hidden on desktop */
@media (min-width: 731px) {
  #mobile-menu {
    display: none !important;
  }
}

/* mobile-only dropdown sizing */
@media (max-width: 730px) {
  /* make dropdown panel feel larger */
  #mobile-menu {
    width: 100%;
    max-height: 85vh;          /* gives room for larger items */
    overflow-y: auto;          /* scroll if many links */
    padding: 8px 0;
    box-sizing: border-box;
  }

  /* bigger row spacing */
  #mobile-menu li {
    width: 100%;
  }

  /* bigger tap targets + larger text */
  #mobile-menu li a {
    display: flex;
    align-items: center;
    min-height: 64px;          /* bigger clickable height */
    padding: 0 22px;           /* left/right breathing room */
    font-size: 1.2rem;         /* larger menu text */
    line-height: 1.2;
    letter-spacing: 0.5px;
    width: 100%;
    box-sizing: border-box;
  }

  /* optional: make hamburger button bigger */
  #icon i,
  .fa-bars {
    font-size: 1.6rem;
  }
}