.nav-link-container {
    display: flex;
    justify-content: space-around;
    width: 60vw;
    padding-right: 7vw;
}



.navbar a {
    white-space: nowrap;
    display: block;
    margin: 0;

}

.first-text {
    font-size: calc(2vw + 10px);
}
.info-container {
    height: 30vw;
}



footer {
    height: 80px;
}

.mobile-break {
    display: none;
}

.custom-margin-top {
    margin-top: 500px ;
}

.custom-fabrication {
    margin-top: 100px;
    font-size: 7vw;
    letter-spacing: 7px;

}

.info-container {
    margin-top: 350px;
}

 .custom-page-image,
    .custom-page-image-darkener {
    height: calc(90vw + 800px)

   }

@media screen and (max-width:1200px) {
    .project-container {
        margin-top: 100px;
    }
    .info-container {
        margin-top: 450px;
    }

    .product-button {
        width: 45vw;
        height: 12vw;
        font-size: 7vw
    }

    .contact-text {
        font-size: 1.5vw;
    }

    .info-container {
        height: 60vw;
    }
}

@media screen and (max-width: 1000px) {
    .small-font {
        font-size: 14px;
    }
    .showButton
    .showButton2,
    .showButton3,
    .showButton4,
    .showButton5,
    .showButton6 {
        font-size: 16px;
    }


}

@media screen and (max-width:900px){
   .custom-page-image,
    .custom-page-image-darkener {
    height: calc(50vw + 1200px)

   }
.custom-fabrication {
    margin-top: 100px;
}                                 
.main-keystone-logo {
    width: 400px;
}
   
.name-label {
    display: none;
}
.email-label {
    display: none;
}

    .about-link {
        width: 40vw;
        transform: translate(0, 0);
    }

    .image-placeholder {
        position: relative; 
        display: inline-block;
        transform: translate(0,0);
    }
    
    .black-cat-placeholder {
        display: none;
    }

    .logo-image {
        width: 60px;
    }

    .square {
        height: 40px;
    }

    .info-container {
        height: 100vw;
    }
    .navbar a {
        font-size: 2vw;
    }

    .navbar-container {
        height: 50px;
    }
    .navbar {
        height: 50px;
    }
    .toggleButton {
       top: 0;
    }
    .toggleButton {
        font-size: 3vw;
    }

    .form-container {
        margin-top: 100px;
        max-width: 550px;
        font-size: 2vw;
    }

    textarea {
        min-height: 150px;
        font-size: 1.5vw;
    }

    input[type="text"],
    input[type="email"] {
        font-size: 1.5vw;
}
.form-container-label {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
}
.image-placeholder {
    transform: none;
}
#showButton3,
#showButton2,
#showButton {
    height: 40px;
}
.showButton3,
.showButton2,
.showButton {
    font-size: 13px;
}

.contact-text {
    font-size: 2.5vw;
}



.box1 {
    margin-left: auto;
    margin-right: auto;
}

.box2 {
    margin-left: auto;
    margin-right: auto;
}

.box3 {
    margin-left: auto;
    margin-right: auto;
}

.last-box {
    grid-column: 1 / 3;
    margin-top: 5%;
}

.home-page-image {
    background-image: url("../images/phone-home-image.png");
}
.product-button {
    width: 60vw;
    height: 15vw;
    font-size: 9vw;
}

.about-line {
    height: 0;
    width: 70vw;
    margin-top: 5%;
    margin-bottom: 5%
}

.first-text-container {
    flex-flow: column;
    align-items: center;
    margin-top: 10vw;
}

.image-placeholder {
    margin: 0;
}

.first-text {
    width: 70vw;
}

.custom-margin-top {
    margin-top: calc( 1200px - 50vw) ;
}
.project-image {
    width: 10vw;
    height: 10vw;
}

.project-image-container {
    width: 10vw;
    height: 10vw;
}
.custom-fabrication {
    font-size: 7vw;
}
.custom-page-image,
.custom-page-image-darkener {
    height: calc(50vw + 1200px)
}
}


@media screen and (max-width:600px) {
  
    .main-keystone-logo {
        width: 350px;
    }
    .project-image-container {
        width: 50vw;
        height: 50vw;

    }
    .project-image {
        width: 50vw;
        height: 50vw;
        
    }
    .custom-fabrication {
        font-size: calc(30px + 4vw);
        margin-top: 0;
    }
    
    .placeholder {
        width: 30vw;
    } 
    .square {
        width: 30vw;
    }

    


   .project-container {
    flex-flow: column;
    margin-top: 10px;
   }
   .project-image-container {
    margin-bottom: 50px;
   }
    .image-placeholder {
        width: 200px;
        margin-left: 0;
    }
    .first-text {
        line-height: 20px;
    }

    .custom-page-image {
        background-image: url("../images/steel-background.png") !important;
        background-size:cover;
    }
    .custom-fabrication {
        margin-top: 200px;;
    }
    .first-text-container {
        margin-top: 0;
    }

    .mobile-break {
        display: block;
    }
    .g-recaptcha {
        transform: scale(.7);
    }
    .info-container {
        height: 120vw;
    }

    .contact-text {
        font-size: 3.5vw;
    }
    .nav-link-container {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .logo {
        display: none;
    }

    .navbar a {
        font-size: 3vw;
        padding: 5px;
    }
    .navbar-container {
        height: 6vh;
    }
    .navbar {
        height: 6vh;
    }
    .toggleButton {
        font-size: 4vw;
        right: 0;
        padding: 2px 5px;
    }

    .form-container {
        font-size: 10px;
        max-width: 400px;
    }

    input[type="text"],
    input[type="email"] {
        font-size: 10px;

    
}

    textarea {
        font-size: 10px;
    }
    
    .product-button {
        width: 70vw;
        height: 20vw;
        font-size: 11vw;
    }

 
 
    .first-text {
        width: 90vw;

    }
   
    .custom-margin-top {
        margin-top: calc( 500px - 30vw) ;
    }
    .about-link {
        transform: translate(0, 0);
    }
    .image-placeholder {
        width: 100%;
        height: 100%;  font-family: kdam thmor pro;
    font-weight: 900;
    }
    .custom-fabrication {
        margin-top: 0;
    }

    .form-container {
        margin-top: 350px;
    }
}

@media screen and (max-width:400px) { 
    .main-keystone-logo {
        width: 200px;
    }
    .custom-fabrication {
        margin-top: 0;
        padding-top: 50px;
    }
    .showButton, .showButton2, .showButton3 {
        font-size: 12px;
    }
    .first-text {
        font-size: 15px;
    }

    .white-circle {
        width: 30px;
        height: 30px;
    }
    footer {
        font-size: 9px;
    }
    .navbar a {
        font-size: 5vw;
    }
    
    .last-box {
        grid-column: auto;
        margin-top: 0%;
    }

    .product-button {
        width: 80vw;
        height: 30vw;
        font-size: 15vw;
    }
    .custom-margin-top {
        margin-top: calc( 1200px - 140vw) ;
    }
    .form-container {
        margin-top: 350px;
    }
    
}


/**PROJECTS NEW FORMAT**/

.box66 {
    grid-column: 3 / 4; grid-row: 2 / 3
}

.box65 {
    grid-column: 2 / 3; grid-row: 2 / 3
}

.box64 {
    grid-column: 4 / 5; grid-row: 1 / 3
}

.box63 {
    grid-column: 3 / 4; grid-row: 1 / 2
}

.box62 {
    grid-column: 1 / 2; grid-row: 1 / 3
}

.box61 {
    grid-column: 2 / 3; grid-row: 1 / 2
}

.box24 {
    grid-column: 1 / 3; grid-row: 2 / 3
}

.box21 {
    grid-column: 3 / 4; grid-row: 1 / 4
}

.box36 {
    grid-column: 1 / 2; grid-row: 1 / 3 
}

.box34 {
    grid-column: 4 / 5; grid-row: 1 / 3
}
@media screen and (max-width: 900px) {
    .project-image {
        width: 100%;
        height: 100%;
    }
    .project-image-container {  
        width: 20vw;
        height: 20vw;
    }
    .square {
        width: 120px;
    }
    .project-container {
        margin-top: 0;
    }

    .small-font {
        font-size: 10px;
    }
    .showButton,
    .showButton2,
    .showButton3,
    .showButton4,
    .showButton5,
    .showButton6 {
        font-size: 12px;
    }
    .custom-page-image,
    .custom-page-image-darkener {
        height: calc(50vw + 1200px)
    }
    .info-container {
        margin-top: 600px;
    }
}
.project-container {
    margin-top: 0;
}   
@media screen and (max-width: 700px) {
    .info-container {
        margin-top: 500px;
    }
    .square {
        width: 150px;
    }
    .box5-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-gap: 10px;
    }
    .large-project-image {
        width: 30vw;
        height: 30vw;
    }
    .large-project-image-container {
        width: 30vw;
        height: 30vw;
    }
    .container-projects {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        grid-gap: 0;
        width: 450px;
        margin-right: auto;
        margin-left: auto;
    }
    #showButton,
    #showButton2,
    #showButton3,
    #showButton4,
    #showButton5,
    #showButton6 {
        margin-bottom: 0;
    }
    .placeholder {
        width: 150px;
    }
    .project-container {
        margin-top: 100px;
    }

    .project-image-container {  
        width: 23vw;
        height: 23vw;
    }
    .project-container,
    .box6-container,
    .box2-container,
    .box3-container,
    .box4-container,
    .box5-container {
        grid-gap: 5px;
    }

    .custom-page-image,
    .custom-page-image-darkener {
        height: calc(50vw + 1200px)
    }
    .square {
        width: 150px;
    }
}

@media screen and (max-width: 500px) {
        .placeholder {
            width: 100px;
        }
        .container-projects {
            width: 300px;
        }
        .square {
            width: 100px;
        }

        .showButton,
        .showButton2,
        .showButton3,
        .showButton4,
        .showButton5,
        .showButton6 {
            font-size: 10px;
        }
       
        
}

.wide-image {
    width: 25vw;
    height: 17vw;
}

.tall-image {
    height: 30vw;
    width: 20vw;    
}

@media screen and (max-width: 700px) {
   
    .large-project-image {
        width: 30vw;
        height: 30vw;
    }
    .large-project-image-container {
        width: 30vw;
        height: 30vw;
    }
}

@media screen and (max-width: 650px) {
    .project-image-container {
        width: 80vw;
        height: 80vw;
    }

    .project-image {
        width: 80vw;
        height: 80vw;
    }
    .wide-image {
        width: 80vw;
        height: 65vw;
    }
    .tall-image {
        width: 48vw;
        height: 70vw;
    }

   
    .box6-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto ;
        width: 40vw;
        left: 50%;
        transform: translate(-20vw, -20px);
        z-index: 110;
        grid-gap: 5px;  

    }
    .box62 {
        grid-column: 1 / 2; grid-row: 5 / 6 

    }
    .box64 {
        grid-column: 2 / 3; grid-row: 5 / 6 

    }
    .box61 {
        grid-column: 1 / 3; grid-row: 1 / 2 

    }
    .box63 {
        grid-column: 1 / 3; grid-row: 2 / 3 

    }
    .box65 {
        grid-column: 1 / 3; grid-row: 3 / 4

    }
    .box66 {
        grid-column: 1/ 3; grid-row: 4 / 5

    }
    .box3container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto;

    }
    .box31 {
        grid-column: 1/ 3; grid-row: 1 / 2
    }
    .box32 {
        grid-column: 1 / 3; grid-row: 2 / 3
    }

    .box33 {
        grid-column: 1/ 3; grid-row: 3 / 4
    }
    .box34 {
        grid-column: 1/ 2; grid-row: 5 / 6
    }
    .box35 {
        grid-column: 1/ 3; grid-row: 4 / 5
    }
    .box36 {
        grid-column: 2 / 3; grid-row: 5 / 6
    }
    .box2-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .box21 {
        grid-column: 1/ 3; grid-row: 1 / 2
    }
    .box22 {
        grid-column: 1 / 3; grid-row: 2 / 3
    }

    .box23 {
        grid-column: 1/ 3; grid-row: 3 / 4
    }
    .box24 {
        grid-column: 1/ 3; grid-row: 4 / 5
    }
    .box4-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;

    }
    .box41 {
        grid-column: 1/ 2; grid-row: 1 / 2
    }
    .box42 {
        grid-column: 2 / 3; grid-row: 1 / 2
    }

    .box43 {
        grid-column: 1/ 3; grid-row: 2 / 3
    }
    .box5-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;

    }
    .box51 {
        grid-column: 1/ 2; grid-row: 1 / 2
    }
    .box52 {
        grid-column: 1 / 2; grid-row: 2 / 3
    }

    .box53 {
        grid-column: 1 / 2; grid-row: 3 / 4
    }
    .box54 {
        grid-column: 1 / 2; grid-row: 4 / 5
    }
    .project-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .custom-page-image,
    .custom-page-image-darkener {
        height: calc(560vw + 900px);
    }
    .info-container {
        margin-top: 700px;
    }
}

@media screen and (max-width: 350px) {
    .placeholder {
        width: 70px;
    }
    .container-projects {
        width: 210px;
    }
    .square {
        width: 70px;
    }
}


@media screen and (max-width: 450px) {
    .info-container {
        margin-top: 400px;
    }
}