/*////// SECTION ACCENTS //////*/
div.left-accent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 5.1rem;
    background: rgba(191, 191, 191, 0.70);
    mix-blend-mode: multiply;
    /*border: 1px solid red;*/
}
div.right-accent {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    width: 5.1rem;
    background: rgba(191, 191, 191, 0.70);
    mix-blend-mode: multiply;
    /*border: 1px solid red;*/
}





/*////// HERO SECTION //////*/
section.hero-section {
    padding-top: 9rem;
    padding-bottom: 5.5rem;
}
section.hero-section div.hero-container {
    height: 100rem;
    padding: 0 0 0 0;
    background: #727070;
    background: #D9D9D9;
}
/*//// HERO SECTION ACCENTS ////*/
div.hero-container div.left-accent,
div.hero-container div.right-accent {
    bottom: -5.5rem;
}


/*//// FLEX ////*/
div.hero-container div.hero-flex-container {
    height: 100%;
}
div.hero-flex-container div.hero-flex-item {
    height: 100%;
}

/*// SPECIFICS //*/
#hero-flex-item-1 {}
#hero-flex-item-1.animated {}

/*//  NEW HERO IMAGE //*/
#hero-flex-item-1 div.image-container {
    position: relative;
    width: 192rem;
    height: 100rem;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.5s ease;
}
#hero-flex-item-1.animated div.image-container {
    opacity: 1;
}
#hero-flex-item-1.animated div.image-container {  }
#hero-flex-item-1 div.image-container img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-52%,-49%) scale(1.2);
    width: 100%;
    height: auto;
    transition: all 3.4s ease;
    transition: all 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}
#hero-flex-item-1.animated div.image-container img {
    transform: translate(-28.7%,-50%) scale(1);
}



/*//  OLD HERO IMAGE //*/
#hero-flex-item-1 div.hero-image-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://formworkdev.wpenginepowered.com/wp-content/uploads/2024/09/formwork-home-hero-image-OPT-scaled.jpg');
    transition: all .7s ease;
}
#hero-flex-item-1.animated div.hero-image-container {
    left: 38rem;
}
#hero-flex-item-1 .caption-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: #727070;
    opacity: 0;
    transition: all 1.8s ease;
    transition-delay: .5s; 
}
#hero-flex-item-1.animated .caption-container {
    width: 80.2rem;
    opacity: 1;
}
#hero-flex-item-1 .caption-container h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-47%,-50%);
    width: 80.2rem;
    color: #FFF;
    text-align: center;
    font-family: "Reddit Sans";
    font-size: 4rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5; /* 150% */
    text-transform: lowercase;
}
#hero-flex-item-1 .caption-container h1 span {
    display: block;
    margin-top: 1.2rem;
    opacity: 0;
    transition: all .66s ease; 
    transition-delay: 1.8s;
}
#hero-flex-item-1 .caption-container h1 span.d-1 { 
    transition-delay: 2.2s;
}
#hero-flex-item-1 .caption-container h1 span.d-2 { 
    transition-delay: 2.6s;
}
#hero-flex-item-1 .caption-container h1 span.d-3 { 
    transition-delay: 3s;
}
#hero-flex-item-1 .caption-container h1 span.d-4 { 
    transition-delay: 3.6s;
}
#hero-flex-item-1.animated .caption-container h1 span {
    opacity: 1;
    margin-top: 0;
}

/*/// MOBILE SITE TITLE ///*/
#hero-flex-item-2 {
    padding: 6rem 4rem;
    background: #ffffff;
}
#hero-flex-item-2 .caption-container {
    position: relative;
    height: auto;
    background: #ffffff;
    opacity: 0;
    transition: all .66s ease;
    transition-delay: .5s; 
}
#hero-flex-item-2.animated .caption-container {
    opacity: 1;
}
#hero-flex-item-2 .caption-container h1 {
    position: absolute;
    width: 100%;
    color: #ffffff;
    color: #727070;
    text-align: center;
    font-family: "Reddit Sans";
    font-size: 30px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    text-transform: lowercase;
}
#hero-flex-item-2 .caption-container h1 span {
    display: block;
    margin-top: 1.2rem;
    opacity: 0;
    transition: all .66s ease; 
}
#hero-flex-item-2.animated .caption-container h1 span {
    opacity: 1;
    margin-top: 0;
}



/*////// MAP SECTION //////*/
section.map-section {}
section.map-section div.map-container {}

/*//// FLEX ////*/
div.map-container div.map-flex-container {}
div.map-flex-container div.map-flex-item {
    padding: 4rem 0;
    text-align: center;
}
div.map-flex-container div.map-flex-item h2 {
    color: #565652;
    text-align: center;
    font-family: "Reddit Sans";
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.08; /* 208.333% */
    letter-spacing: 0.12rem;
}
div.map-flex-container div.map-flex-item h2 span.label {
    color: #5D959A;
    font-style: italic;
    font-weight: 600;
    line-height: 5rem;
    letter-spacing: 0.12rem;    
}
div.map-flex-container div.map-flex-item h2 span.pipe {
    color: #5D959A;
    font-weight: 400;
    line-height: 5rem;
    letter-spacing: 0.12rem;
}
/*// SPECIFICS //*/
#map-flex-item-1 {}
#map-flex-item-2 div.google-map-container {
    width: 71.3108rem;
    height: 58.1951rem;
    margin: 0 auto;
    border: 1px solid #565652;
}




/*////// FORM SECTION //////*/
section.form-section {}
section.form-section div.form-container {}

/*//// FLEX ////*/
div.form-container div.form-flex-container {
    justify-content: center;
}
div.form-flex-container div.form-flex-item {}

/*// SPECIFICS //*/
#form-flex-item-1 {
    max-width: 134rem;
    padding: 4rem 0 2rem 0;
    margin-bottom: 3.6rem;
    border-bottom: 2px solid #5D959A;;
}
#form-flex-item-1 h3 {
    color: #565652;
    font-family: "Reddit Sans";
    font-size: 3.8rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0968rem;
}
#form-flex-item-2 {
    position: relative;
    max-width: 134rem;
    padding: 4rem 6rem 5rem 6rem;
    margin-bottom: 3rem;
    /*background: rgba(242, 242, 242, 0.80);*/
    border-bottom: 2px solid #5D959A;    
}
#form-flex-item-2 div.form-background {
    position: absolute;
    top: 0;
    right: 0;
    /*bottom: 18rem;*/
    bottom: 15rem;
    left: 0;
    z-index: 1;
    background: rgba(242, 242, 242, 0.80);
}
#form-flex-item-2 div.contact-form-container {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
}
/*/ CONTACT FORM 7 /*/
div.contact-form-container span.hide-label-text {
    height: 0;
    visibility: hidden;
    font-size: 0;
}
div.contact-form-container div.input-container {
    display: inline-block;
    width: 100%;
}
div.contact-form-container div.input-container.half-width {
    width: calc(49.8% - 10px);
    margin-right: 10px;
}
div.input-container input, 
div.input-container textarea {
    width: 100%;
    height: 5rem;
    margin: 1rem 0;
    padding: .5rem;    
    background: transparent;
    outline: none;
    border: none;
    border-bottom: 1px solid #565652;
    color: #565652;
    font-family: "Reddit Sans";
    font-size: 2.8rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0968rem;
    text-transform: lowercase;
    transition: background-color 0.5s ease;    
}
/*/ SEND BUTTON /*/
div.button-container input {
    width: auto;
    height: auto;
    padding: .4rem 6rem .6rem 6rem;
    margin: 13rem 0 0 -6rem;
    background: transparent;
    border: 1px solid #565652;
    color: #565652;
    font-family: "Reddit Sans";
    font-size: 2.8rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0968rem;
    text-transform: lowercase;
    transition: background-color 0.5s ease; 
    cursor: pointer;   
}
div.button-container input.button-disabled {
    opacity: 0.5;
    pointer-events: none; /* Makes the button unclickable */
}
/*//// SENDING ICON ////*/
div.sending-scrim {
    display: none;
    position: absolute;
    top: 0;
    righT: 0;
    bottom: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}
div.sending-scrim.visible {
    display: block;
}
div.sending-scrim h2 {
    opacity: .8;
}
div.sending-scrim img.sending-icon {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40rem;
    height: auto;
    opacity: .6;
}






/*////// GRANULAR RESPONSIVE //////*/
/*// MOBILE SCREEN //*/
@media only screen and (max-width: 1024px) { }
/*// SMALL MOBILE //*/
@media only screen and (max-width: 851px) { 

        /*//// ACCENTS ////*/
        div.left-accent,
        div.right-accent { width: 2rem; }


        /*//// HERO SECTION ////*/
        section.hero-section { padding-top: 80px; }
        section.hero-section div.hero-container { height: auto; padding: 0 0; background: #727070; }

        #hero-flex-item-1 div.image-container { width: 100%; height: auto; overflow: hidden; }
        #hero-flex-item-1 div.image-container.animated { width: 100%; }

        #hero-flex-item-1 div.image-container img { position: relative; top: -20rem; left: 0; transform: none !important; opacity: 0; transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
        #hero-flex-item-1.animated div.image-container img { top: 0; opacity: 1; }


        /*////// MAP SECTION //////*/
        section.map-section {}
        section.map-section div.map-container { padding: 2rem 4rem 4rem 4rem; }
        #map-flex-item-2 div.google-map-container { width: 100%; height: 400px; }


        /*////// FORM SECTION //////*/
        section.form-section {}
        section.form-section div.form-container { padding: 2rem 4rem 4rem 4rem; }
        #form-flex-item-1 h3 { font-size: 24px; }
        #form-flex-item-2 { max-width: 100%; padding: 4rem 3rem 5rem 3rem; }
        div.input-container input,
        div.input-container textarea { font-size: 18px; }
        div.button-container input { padding: .4rem 6rem .6rem 6rem; margin: 10rem 0 0 0; }

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

        /*//// ACCENTS ////*/
        div.left-accent,
        div.right-accent { width: 2rem; }


        /*//// HERO SECTION ////*/
        section.hero-section { padding-top: 80px; }
        section.hero-section div.hero-container { height: auto; padding: 0 0; background: #727070; }

        #hero-flex-item-1 div.image-container { width: 100%; height: auto; overflow: hidden; }
        #hero-flex-item-1 div.image-container.animated { width: 100%; }

        #hero-flex-item-1 div.image-container img { position: relative; top: -20rem; left: 0; transform: none !important; opacity: 0; transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
        #hero-flex-item-1.animated div.image-container img { top: 0; opacity: 1; }


        /*////// MAP SECTION //////*/
        section.map-section {}
        section.map-section div.map-container { padding: 2rem 4rem 4rem 4rem; }
        #map-flex-item-2 div.google-map-container { width: 100%; height: 400px; }


        /*////// FORM SECTION //////*/
        section.form-section {}
        section.form-section div.form-container { padding: 2rem 4rem 4rem 4rem; }
        #form-flex-item-1 h3 { font-size: 24px; }
        #form-flex-item-2 { max-width: 100%; padding: 4rem 3rem 5rem 3rem; }
        div.input-container input,
        div.input-container textarea { font-size: 18px; }
        div.button-container input { padding: .4rem 6rem .6rem 6rem; margin: 10rem 0 0 0; }

        div.contact-form-container div.input-container.half-width { width: 100%; margin-right: 0; }

}
@media only screen and (max-width: 380px) { }
@media only screen and (max-width: 360px) { }
@media only screen and (max-width: 320px) { }

/*//// LANDSCAPE STYLES ////*/
@media screen and (max-width: 851px) and (orientation: landscape) { }
@media screen and (max-width: 815px) and (orientation: landscape) { }
@media screen and (max-width: 667px) and (orientation: landscape) { }
@media screen and (max-width: 570px) and (orientation: landscape) { }