/* Global References */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 160px;
  }
button.normal {
    font-size: 16px;
    font-weight: 900;
    padding: 20px 40px;
    color: #fff;
    background: #f5cb11;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.2s;
}
/* Header and Navigation Bar */
*{ /* An asterisk is a "CSS universal selector" aka this stuff below applies to everything*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Josefin Sans", Sans-serif;
    font-variant: small-caps;
}

#header {
    display: flex; /* translate elements (2: logo and the list) from column vector to a row vector */
    align-items: center; /* centers the 2 elements */
    justify-content: space-between; /* puts 1st el against left wall and 2nd against the right wall */
    padding: 20px 80px; /* (y-axis translation, x-axis translation) extra space on site */
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    z-index: 999;
    position: sticky; /* Sticky navbar */
    top: 0; /* Box shadow for navbar */
    left: 0;
    height: 100%;
    width: 100%;
}

#navbar {
    display: flex; /* navbar links from column vector to row vector */
    align-items: center; /* center items */
    justify-content: center;
  }
  li {  /* Parent tag of anker. The anker tags are all the a tags in the index file. These will give direction to each tab in navbar*/
    list-style: none; /* Removing the bullets from navbar list */
    padding: 0 20px;
    position:relative;
  }
  li a { /* Editing the links themselves (a= anker tab) Parent tag of a:hover and a.active*/
    text-decoration: none; /* Remove the underlines on Home, Shop, Blog, etc */
    line-height: 20px;
    font-size: 19px;
    font-weight: 600; /* Bolden text */
    color: #999;
    transition: 0.3s ease; /* ease into the color change slightly for visual appeal */
  }
  li a:hover, /* Hovering on a link */
  li a.active { /* Highlighting active page */
    color: #1f2022
  }
  li a:hover::after,
  li a.active::after {
    content: "";
    width: 30%; /* Length of the underline */
    height: 2px;
    background: #1f2022;
    position: absolute;
    bottom: -4px; /* How far down from the word is the underline */
    left: 20px; /* Lining up where the left of the underline begins */
  }
  button:hover {
    color: #1f2022;
    background-color: #999;
  }

#mobile {
    display: none;
    align-items: center;
}

#close {
    display: none;
}
/* Home Page  */
/* (Home.I) Hero - Tip: Mute/Unmute (Cmd + /) the backgrounds to visualize where you are editing. Delete those lines if you don't need*/ 
#hero {
    height: 100vh;
  }
.hero-container {
    position: relative;
    display: flex;
    top: 0; /* this top and left ensures the container covers the #hero */
    left: 0;
    height: 100%;
    width: 100%;
    padding: 250px 150px;
  }
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .cover .heroCover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .cover::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: #1f2022;
    opacity: 0.5;
    z-index: 12;
  }
  .cover img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
  }
  .hero-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 130;
  }
  .hero-text .h1 {
    font-size: 35px;
    font-weight: 400;
    color: #fff;
  }
  .hero-text .h2 {
    font-size: 70px;
    font-weight: 600;
    color: #fff;
  }
  .hero-text .h3 {
    font-size: 20px;
    font-weight: 400;
    padding-top: 20px;
    color: #fff;
}
#hero button { /* Slide the button down a little */
    position: absolute;
    margin-top: 275px;
    z-index: 130;
}
#hero button:hover {
    color: #1f2022;
    background-color: #999;
}

/* (Home.II) Our Work */
#work {
    height: 70vh;
  }
.work-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0; /* this top and left ensures the container covers the #hero */
    left: 0;
    height: 100%;
    width: 100%;
    margin-top: 120px;
    /* background: #9b59b6; */
  }
  .work-container .title {
    font-size: 64px;
    font-weight: 600;
    color: #1f2022;
  }
  .work-container .lines { /* all for graphic with lines under the "Our Work" */
    width: 250px;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .work-container .lines::before,
  .work-container .lines::after {
    content: '';
    position: absolute;
    margin: auto;
    height: 1.5px;
    background: #1f2022;
    width: 30%; /* space between the lines */
    top: 50%;
  }
  .work-container .lines::before {
    right: 0;
  }
  .work-container .lines::after {
    left: 0;
  }
  .work-container .lines img {
    height: 50px;
    width: 65px;
  } /*graphic w/ lines ends here */
  .subtitle {
    padding-top: 40px;
    font-size: 19px;
    font-weight: 400;
    color: #1f2022;
  }
  .gallery {
    padding: 15px;
  }
  .gallery .image-grid {
    --gap: 16px; /* This is setting a variable to reuse later (gap between photos)*/
    --num-cols: 4;
    --row-height: 265px;
    box-sizing: border-box; /*The padding does not increse the width of the container*/
    padding: var(--gap);
    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr); /* We want (4, "equalwidth") columns */
    grid-auto-rows: var(--row-height); /* We want an unlimited amount of 300px rows */
    gap: var(--gap);
  }
  .image-grid img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* The images will maintain there aspect ratios */
    transition: 0.5s ease;
  }
  .image-grid img:hover {
    box-shadow: 0 0 0 10px #f5cb11;
    cursor: pointer;
  }
  .view-all button:hover {
    color: #1f2022;
    background-color: #999;
}

/* (Home.III) About Us */
#banner {
    height: 85vh;
}
.banner-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0; /* this top and left ensures the container covers the #hero */
    left: 0;
    height: 100%;
    width: 100%;
    margin-top: 120px;
    background: rgb(245, 245, 245);
  }
  .banner-container .title {
    font-size: 64px;
    font-weight: 600;
    color: #1f2022;
    margin-top: 120px;
    z-index: 130;
  }
  .banner-container .lines { /* all for graphic with lines under the subtitle */
    width: 250px;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 130;
  }
  .banner-container .lines::before,
  .banner-container .lines::after {
    content: '';
    position: absolute;
    margin: auto;
    height: 1.5px;
    background: #1f2022;
    width: 30%; /* space between the lines */
    top: 50%;
  }
  .banner-container .lines::before {
    right: 0;
  }
  .banner-container .lines::after {
    left: 0;
  }
  .banner-container .lines img {
    height: 50px;
    width: 65px;
  } /*graphic w/ lines ends here */
  .subtitle {
    padding: 40px 20vw;
    font-size: 19px;
    font-weight: 400;
    color: #1f2022;
    text-align: center;
}
#banner button:hover {
    color: #1f2022;
    background-color: #999;
}

/* (Home.IV) Free Consultation */
#registration {
    height: 90vh;
}
.reg-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0; /* this top and left ensures the container covers the #hero */
    left: 0;
    height: 100%;
    width: 100%;
  }
  .reg-container .title {
    font-size: 64px;
    font-weight: 600;
    color: #fff;
    margin-top: 170px;
    z-index: 130;
  }
  .reg-container .lines { /* all for graphic with lines under the subtitle */
    width: 250px;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 130;
  }
  .reg-container .lines::before,
  .reg-container .lines::after {
    content: '';
    position: absolute;
    margin: auto;
    height: 1.5px;
    background: #fff;
    width: 30%; /* space between the lines */
    top: 50%;
  }
  .reg-container .lines::before {
    right: 0;
  }
  .reg-container .lines::after {
    left: 0;
  }
  .reg-container .lines i {
    color: #fff;
  } /*graphic w/ lines ends here */
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .cover .regCover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .cover::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: #1f2022;
    opacity: 0.7;
    z-index: 12;
  }
  .cover img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
  }
  .reg-container .subtitle {
    padding: 40px 335px;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    z-index: 130;
  }
  .subtitle span {
    color: #f5cb11;
  }
.reg-container .form-container {
    max-width: 700px;
    width: 100%;
    background: #1f2022;
    padding: 25px 30px;
    border-radius: 5px;
    z-index: 130;
  }
  form .user-detatils {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0 12px 0;
    background: transparent
  }
  form .user-detatils .input-box {
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
  }
  form .user-detatils .input-box-double {
    margin-bottom: 15px;
    width: 100%;
  }
  .user-detatils .input-box input,
  .user-detatils .input-box-double input {
    height: 45px;
    width: 100%;
    border-style: none;
    padding-left: 15px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: transparent;
    color: rgb(103, 102, 102);
    border-bottom: 1px solid rgb(103, 102, 102);
    outline: #fff;
  }
  .user-details .input-box input:focus,
  .user-details .input-box-double input:focus {
    outline: none;
  }
  .user-detatils .input-box-double input { /*If the image has the class image-grid-col-2 we want it to do this ... */
    height: 120px;
  }
  form .button {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  form .button input {
    font-size: 16px;
    font-weight: 900;
    padding: 20px 40px;
    color: #fff;
    background: #f5cb11;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.2s;
  }
  form .button input:hover {
    color: #1f2022;
    background-color: #999;
}

/* (Home.V) Footer */
footer {
    height: 95vh;
}
.ft-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0; /* this top and left ensures the container covers the #hero */
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(233, 233, 233);
  }
  .copyright {
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  .ft-logo img {
    margin-top: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    width: 160px;
  }
  .ft-container .lines {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1075px;
    z-index: 130;
    height: 1.5px;
    background: #999;
    margin-top: 20px;
  }
.ft-container .col-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1075px;
    padding-top: 70px;
    padding-bottom: 60px;
  }
  .col-container .title {
    font-size: 28px;
    font-weight: 600;
    color: #1f2022;
    margin-bottom: 30px;
  }
  .col-a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 33%;
    height: 250px;
  }
  .col-a p {
    margin-bottom: 20px;
  }
  .col-a .social i{
    color: #1f2022;
  }
  .cols-bc{
    display: flex;
  }
  .col-b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 16.5%;
    height: 250px;
    margin-right: 100px;
  }
  .col-b a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    color: #1f2022;
    margin-bottom: 20px;
 }
  .col-c {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 16.5%;
    height: 250px;
  }
  .col-c a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    color: #1f2022;
    margin-bottom: 20px;
  }
  .col-container p {
    font-size: 18px;
    font-weight: 400;
  }
  .col-container i {
    color: #f5cb11;
    padding-right: 20px;
    font-size: 1.2em;
  }
.col-container .circle {
    background: rgb(212, 212, 212);
    border-radius: 50%;
    color: black;
    display: inline-block;
    height: 50px;
    font-weight: bold;
    font-size: 1.2em;
    width: 50px;
  }
  .circle span {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 0 15px;
  }
 .circle:hover {
    cursor: pointer;
} 

/* About Page */
#page-header {
    background-image: url("img/porch.jpeg");
    background-position: 70%;
    width: 100%;
    height: 40vh;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
 .ph-container {
    position: relative;
    display: flex;
    top: 0; /* this top and left ensures the container covers the #page-header */
    left: 0;
    height: 100%;
    width: 100%;
  }
  .ph {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .ph::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: #1f2022;
    opacity: 0.5;
    z-index: 12;
  }
  .ph-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 130px;
  }
  .ph-text span {
    font-size: 65px;
    font-weight: 500;
    color: #fff;
    z-index: 130;
}

#about-banner {
    height: 125vh;
}
.ab-container {
    height: 100%;
    width: 100%;
    display: flex;
    padding: 80px 170px;
  }
  .ab-container .ab-text {
    margin-right: 24px;
  }
  .ab-container .ab-text p {
    color: #1f2022;
    font-size: 19px;
    font-weight: 400;
    margin-bottom: 1em;
}

/* Our Work Page */
#display .display-container {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
}
.display-container .work-list {
    padding: 100px 150px;
    position: sticky;
    height: 550px;
    top: 100px;
    left: 0;
}
#display-bar {
    align-items: center; /* center items */
    justify-content: center;
  }
  #display-bar li {  /* Parent tag of anker. The anker tags are all the a tags in the index file. These will give direction to each tab in navbar*/
    list-style: none; /* Removing the bullets from display-bar list */
    padding: 0 20px;
    position:relative;
    margin-top: 30px;
    width: 250px;
  }
  #display-bar li a { /* Editing the links themselves (a= anker tab) Parent tag of a:hover and a.active*/
    text-decoration: none; /* Remove the underlines on Home, Shop, Blog, etc */
    font-size: 19px;
    font-weight: 600; /* Bolden text */
    color: #1f2022;
    padding-bottom: 20px;
    position: relative;
  }
  #display-bar li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 300px;
    height: 1px;
    background-color: rgb(103, 102, 102);
  }
  #display-bar li i {
    padding-right: 10px;
    font-size: 0.8em;
  }
.work-gallery {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
  }
  .before, .after {
    flex-basis: calc(33%);
    margin-right: 22px;
    margin-bottom: 10px;
  }
  .after {
    margin-right: 0;
  }
  .before img, .after img {
    width: 100%;
    height: 270px;
    margin-bottom: 22px;
  }
  .before img:hover, .after img:hover {
    box-shadow: 0 0 0 10px #f5cb11;
    cursor: pointer;
    transition: 0.3s;
}
  .subheading {
    text-align: center;
  }
  .before span, .after span {
    font-size: 37px;
    font-weight: 400;
    width: 100%;
    color: #1f2022;
  }
  .before p, .after p {
    font-size: 25px;
    font-weight: 400;
    color: #1f2022;
    text-align: center;
    margin: 22px;
  } 
  
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    cursor: grab;
  }
  #lightbox-image {
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    overflow: clip;
  }
  #lightbox-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
  #lightbox-controls button {
    margin-left: 10px;
    color: #fff;
    background: transparent;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
  }
  .hidden {
    display: none;
}

/* Contact Page */
#contact-banner{
    height: 30vh;
}
.contact-container{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .contact-text{
    margin-top: 80px;
  }
  .contact-text span{
    color: #1f2022;
    font-size: 40px;
    font-weight: 400;
  }
  .contact-form{
    max-width: 700px;
    width: 100%;
    padding: 25px 30px;
    border-radius: 5px;
    z-index: 130;
  }
  form .contact-details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0 12px 0;
    background: transparent
  }
  form .contact-details .input{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
  }
  form .contact-details .input-double{
    margin-bottom: 15px;
    width: 100%;
  }
  .contact-details .input input,
  .contact-details .input-double input{
    height: 45px;
    width: 100%;
    border-style: none;
    padding-left: 15px;
    font-size: 16px;
    transition: all 0.3s ease;
    color: rgb(103, 102, 102);
    border: none;
    border-bottom: 1px solid rgb(103, 102, 102);
  }
  .contact-details .input input:focus,
  .contact-details .input-double input:focus{
    outline: none;
  }
  .contact-details .input-double input{ /*If the image has the class image-grid-col-2 we want it to do this ... */
    height: 120px;
  }

/* Start Media Query */
@media (max-width: 850px) { /* iPad Air */
    /* Spanning Across More Than One Page */
    #navbar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: fixed;
        top: 0;
        right: -350px;
        height: 100vh;
        width: 350px;
        background-color: rgb(245, 245, 245);
        box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
        padding: 80px 0 0 10px;
        transition: 0.3s;
    }
    #navbar.active{
        right: 0;
    }
    #navbar li{
        margin-bottom: 25px; /* Spacing out links of navbar */
    }
    #navbar .normal{
        display: none;
    }

    #mobile{
        display: flex;
        align-items: center;
    }
    #mobile i{
        color: #1a1a1a;
        font-size: 24px;
        padding-left: 20px;
    }

    #close{
        display: initial;
        position: absolute;
        top: 30px;
        left: 30px;
        color: #222;
        font-size: 24px;
        border-style: none;
        background: transparent;
        }
    #registration{
        height: 90vh;
    }
    .reg-container .subtitle{
        padding: 40px 100px;
    }
    footer{
        height: 130vh;
    }
    .ft-container .lines{
        margin-top: 40px;
      }
    .col-container{
        padding: 145px;
      }
      #page-header{
        height: 30vh;
    }
    #lightbox {
        max-width: 87%;
        max-height: 100%;
      }
    /* Home Page */
    #hero { 
        height: 70vh;
    }
    .hero-container {
        padding: 250px 128px;
    }
    #work {
        height: 55vh;
    }
    #banner {
        height: 55vh;
    }
    .banner-container .subtitle {
        padding: 40px 100px;
    }

    /* About Page */
    #about-banner {
        height: 90vh;
    }
    .ab-container {
        padding: 80px 0;
    }
    .ab-container .ab-text {
        width: 100%;
    }
    .ab-container .ab-text p {
        margin-left: 24px;
    }
    .ab-img {
        margin-right: 24px;
    }

    /* Our Work Page */
    .display-container .work-list {
        padding: 100px 0 100px 50px;
    }
    #display-bar li a::after {
        width: 200px;
      }
      .before, .after {
        padding: 40px;
      }
      .before img, .after img {
        width: 100%;
        height: 200px;
        margin-bottom: 22px;
      }

    /* Contact Page */
    #contact-banner {
        height: 55vh;
    }
}

@media (max-width: 477px){ /* iPhone XR */
    #header {
        padding: 20px 30px; /* (y-axis translation, x-axis translation) extra space on site */
    }
    #navbar.active{
        right: 175px;
    }
    #navbar li{
        margin-bottom: 25px; /* Spacing out links of navbar */
    }
    #mobile{
        display: flex;
        align-items: center;
    }
    #mobile button{
        margin-left: 25px;
        width: 88%;
        padding: 10px;
    }
    #mobile i{
        color: #1a1a1a;
        font-size: 24px;
        padding-left: 20px;
    }
    #close{
        display: initial;
        position: absolute;
        top: 30px;
        left: 30px;
        color: #222;
        font-size: 24px;
        border-style: none;
        background: transparent;
    }
    #registration{
        height: 130vh;
    }
    .reg-container .title{
        text-align: center;
    }
    .reg-container .subtitle{
        padding: 40px 50px;
    }
    footer{
        height: 168vh;
    }
    .ft-container .lines{
        margin-top: 40px;
    }
    .ft-container .col-container{
        padding: 50px 20px 100px 20px;
        width: 100%;
        flex-direction: column;
      }
      .col-a {
        width: 100%;
      }
      .cols-bc{
        display: flex;
        justify-content: space-between;
        margin-top: 60px;
      }
      .col-b {
        margin-left: 50px;
        width: 30%;
      }
      .col-c{
        margin-right: 50px;
        width: 30%;
      }
    #page-header{
        height: 30vh;
    }
    .ph-text {
        margin-top: 104px;
    }
    #lightbox {
        max-width: 56%;
        max-height: 100%;
      }

    /* Home Page */
    #hero { 
        height: 55vh;
    }
    .hero-container {
        padding: 120px 22px;
      }
      .hero-text .h1 {
        font-size: 28px;
      }
      .hero-text .h2 {
        font-size: 47px;
      }
      .hero-text .h3 {
        font-size: 18px;
      }
      #hero button {
        margin-top: 200px;
    }
    #work {
        height: 150vh;
      }
      .subtitle p{
        width: 300px;
      }
      .gallery .image-grid{
        grid-template-columns: repeat(1, 1fr); /* We want (1, "equalwidth") columns */
        padding: 30px;
        gap: 30px;
      }
    #banner {
        height: 85vh;
    }
    .banner-container .subtitle {
        padding: 40px 60px;
    }

    /* About Page */
    #about-banner {
        height: 140vh;
    }
    .ab-container {
        padding: 25px 0;
        flex-direction: column;
    }
    .ab-container .ab-text {
      width: 100%;
    }
    .ab-container .ab-text p {
        margin: 25px;
    }
    .ab-img {
        overflow: clip;
        margin: 25px;
    }

    /* Our Work Page */
    .display-container .work-list {
        display: none;
    }
    #display-bar li { 
        width: 110px;
        padding: 0 1px;
      }
    #display-bar li a::after {
        width: 50px;
      }
      .before, .after {
        padding: 0;
        margin: 25px;
      }
      .before img, .after img {
        width: 100%;
        height: 200px;
        margin-bottom: 22px;
      }

    /* Contact Page */
    #contact-banner {
        height: 60vh;
      }
      .contact-text{
        margin-top: 50px;
        text-align: center;
        padding: 0 20px;
      }

}

@media (max-width: 400px){ /* iPhone SE */
    #header {
        padding: 20px 10px; /* (y-axis translation, x-axis translation) extra space on site */
    }
    #navbar.active{
        right: 30vw;
    }
    #mobile{
        display: flex;
        align-items: center;
    }
    #mobile button{
        margin-left: 25px;
        width: 88%;
        padding: 10px;
    }
    #mobile i{
        color: #1a1a1a;
        font-size: 24px;
        padding-left: 20px;
    }
    #close{
        display: initial;
        position: absolute;
        top: 30px;
        left: 30px;
        color: #222;
        font-size: 24px;
        border-style: none;
        background: transparent;
    }
    #registration{
        height: 155vh;
    }
    .reg-container .title{
        text-align: center;
    }
    .reg-container .subtitle{
        padding: 40px 50px;
    }
    footer{
        height: 205vh;
    }
    .ft-container .lines{
        margin-top: 40px;
    }
    .ft-container .col-container{
        padding: 50px 20px 100px 20px;
        width: 100%;
        flex-direction: column;
      }
      .col-a {
        width: 100%;
      }
      .cols-bc{
        display: flex;
        justify-content: space-between;
        margin-top: 60px;
      }
      .col-b {
        margin-left: 50px;
        width: 30%;
      }
      .col-c{
        margin-right: 50px;
        width: 30%;
      }
    #page-header{
        height: 30vh;
    }
    .ph-text {
        margin-top: 68px;
    }
    #lightbox {
        max-width: 52%;
        max-height: 100%;
      }

    /* Home Page */
    #hero { 
        height: 65vh;
    }
    .hero-container {
        padding: 120px 12px;
      }
      .hero-text .h1 {
        font-size: 26px;
      }
      .hero-text .h2 {
        font-size: 44px;
      }
      .hero-text .h3 {
        font-size: 17px;
      }
      #hero button {
        margin-top: 200px;
    }
    #work {
        height: 220vh;
      }
      .subtitle p{
        width: 300px;
      }
      .gallery .image-grid{
        grid-template-columns: repeat(1, 1fr); /* We want (1, "equalwidth") columns */
        padding: 30px;
        gap: 30px;
      }
    #banner {
        height: 120vh;
    }
    .banner-container .subtitle {
        padding: 40px 60px;
    }

    /* About Page */
    #about-banner {
        height: 190vh;
    }
    .ab-container {
        padding: 25px 0;
        flex-direction: column;
    }
    .ab-container .ab-text {
      width: 100%;
    }
    .ab-container .ab-text p {
        margin: 25px;
    }
    .ab-img {
        overflow: hidden;
        margin: 25px;
        object-position: center top;
    }

    /* Our Work Page */
    .display-container .work-list {
        display: none;
    }
    #display-bar li { 
        width: 110px;
        padding: 0 10px;
      }
    #display-bar li a::after {
        width: 50px;
      }
      .before, .after {
        padding: 0;
        margin: 10px;
      }
      .before img, .after img {
        width: 100%;
        height: 200px;
        margin-bottom: 22px;
      }

    /* Contact Page */
    #contact-banner {
        height: 60vh;
      }
      .contact-text{
        margin-top: 50px;
        text-align: center;
        padding: 0 20px;
      }

}