.elementor-39 .elementor-element.elementor-element-f4f94bc{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:2;}.elementor-39 .elementor-element.elementor-element-f4f94bc:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-f4f94bc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-f4f94bc.e-con{--align-self:flex-start;--order:-99999 /* order start hack */;}.elementor-39 .elementor-element.elementor-element-2996eccb{--display:flex;--min-height:82vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:300px 300px;--row-gap:300px;--column-gap:300px;--overlay-opacity:0.5;}.elementor-39 .elementor-element.elementor-element-2996eccb:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-2996eccb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );background-image:url("https://barryelwonger.com/wp-content/uploads/2026/05/Ezra-Splash-HORIZONTAL-scaled.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-39 .elementor-element.elementor-element-2996eccb::before, .elementor-39 .elementor-element.elementor-element-2996eccb > .elementor-background-video-container::before, .elementor-39 .elementor-element.elementor-element-2996eccb > .e-con-inner > .elementor-background-video-container::before, .elementor-39 .elementor-element.elementor-element-2996eccb > .elementor-background-slideshow::before, .elementor-39 .elementor-element.elementor-element-2996eccb > .e-con-inner > .elementor-background-slideshow::before, .elementor-39 .elementor-element.elementor-element-2996eccb > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #303030 0%, #000000 100%);}.elementor-39 .elementor-element.elementor-element-74f53811{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-39 .elementor-element.elementor-element-74f53811:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-74f53811 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-49fc05f1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-49fc05f1:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-49fc05f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-463d7ec{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-1190ccf4{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-60268a8d{--display:flex;}.elementor-39 .elementor-element.elementor-element-30e867cc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-30e867cc:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-30e867cc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-4ba3a7a0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-9e17504{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-d5199e7{--display:flex;}.elementor-39 .elementor-element.elementor-element-7634913c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-7634913c:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-7634913c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-4772566d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-19c855f3{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-1567b776{--display:flex;}.elementor-39 .elementor-element.elementor-element-69b2f69e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-69b2f69e:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-69b2f69e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-676d7122{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-33adbcf6{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-5a27c4cd{--display:flex;}.elementor-39 .elementor-element.elementor-element-4a252600{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-4a252600:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-4a252600 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-4718b281{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-453e0da7{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-69053555{--display:flex;}.elementor-39 .elementor-element.elementor-element-3b40f903{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-3b40f903:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-3b40f903 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-56624529{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-292e7aba{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-3fd4982f{--display:flex;}.elementor-39 .elementor-element.elementor-element-4e0423f9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-4e0423f9:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-4e0423f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-3f7e674c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-3075cac4{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-7a309ae{--display:flex;}.elementor-39 .elementor-element.elementor-element-eb137c0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-eb137c0:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-eb137c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-27d1c8a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-4536246{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-c38a154{--display:flex;}.elementor-39 .elementor-element.elementor-element-2a227bf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-2a227bf:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-2a227bf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-39 .elementor-element.elementor-element-1598b9b8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-39 .elementor-element.elementor-element-34975786{--display:flex;--min-height:50vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-39 .elementor-element.elementor-element-3ee8430b{--display:flex;}.elementor-39 .elementor-element.elementor-element-0610e9e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-39 .elementor-element.elementor-element-0610e9e:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-0610e9e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-39 .elementor-element.elementor-element-2996eccb{--width:100%;}}@media(max-width:1024px){.elementor-39 .elementor-element.elementor-element-f4f94bc{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-39 .elementor-element.elementor-element-2996eccb:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-2996eccb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://barryelwonger.com/wp-content/uploads/2026/05/Ezra-Splash-HORIZONTAL-scaled.jpeg");background-position:center right;background-repeat:no-repeat;background-size:cover;}.elementor-39 .elementor-element.elementor-element-2996eccb{--min-height:74vh;}}@media(max-width:767px){.elementor-39 .elementor-element.elementor-element-f4f94bc{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-39 .elementor-element.elementor-element-2996eccb:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-2996eccb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://barryelwonger.com/wp-content/uploads/2026/05/Ezra-Splash-HORIZONTAL-scaled.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-39 .elementor-element.elementor-element-2996eccb{--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:20px;}.elementor-39 .elementor-element.elementor-element-5b73478f{margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(max-width:1024px) and (min-width:768px){.elementor-39 .elementor-element.elementor-element-f4f94bc{--width:100%;}.elementor-39 .elementor-element.elementor-element-2996eccb{--width:100%;}}@media(min-width:1920px){.elementor-39 .elementor-element.elementor-element-f4f94bc:not(.elementor-motion-effects-element-type-background), .elementor-39 .elementor-element.elementor-element-f4f94bc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://barryelwonger.com/wp-content/uploads/2026/05/gronkzilla-web-large-1536x864-1.jpeg");}.elementor-39 .elementor-element.elementor-element-f4f94bc{--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-39 .elementor-element.elementor-element-2996eccb{--min-height:86vh;}.elementor-39 .elementor-element.elementor-element-74f53811{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-5b73478f */.project-hero { position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background-position: center center; background-size: cover; background-repeat: no-repeat; min-height: 82vh; } .project-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.56) 58%, rgba(0, 0, 0, 0.92) 100% ), linear-gradient( 90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.46) 100% ); z-index: 1; } .project-hero-content { position: relative; z-index: 2; width: 1080px; max-width: calc(100% - 96px); margin: 0 auto; padding-top: 6vh; } .project-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #00cc66; margin-bottom: 24px; } .project-hero-title { font-family: "Syne", sans-serif; font-weight: 800; line-height: 0.86; letter-spacing: -0.055em; margin: 0 0 28px; color: #ffffff; } .project-hero-title span { display: block; font-size: 72px; } .project-hero-title span:last-child { color: #00cc66; } .project-hero-intro { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 24px; line-height: 1.32; color: rgba(255, 255, 255, 0.78); max-width: 760px; margin: 0; } /* Large Screen / Thunderbolt */ @media (min-width: 1600px) { .project-hero { min-height: 86vh; } .project-hero-content { width: 1280px; max-width: calc(100% - 160px); padding-top: 7vh; } .project-eyebrow { font-size: 13px; margin-bottom: 26px; } .project-hero-title span { font-size: 76px; } .project-hero-intro { font-size: 28px; max-width: 880px; } } /* Desktop */ @media (min-width: 1025px) and (max-width: 1599px) { .project-hero { min-height: 82vh; } .project-hero-content { width: 1080px; max-width: calc(100% - 96px); padding-top: 6vh; } .project-eyebrow { font-size: 12px; margin-bottom: 24px; } .project-hero-title span { font-size: 62px; } .project-hero-intro { font-size: 24px; max-width: 760px; } } /* Tablet */ @media (min-width: 768px) and (max-width: 1024px) { .project-hero { min-height: 74vh; } .project-hero-content { width: calc(100% - 72px); max-width: 760px; padding-top: 4vh; } .project-eyebrow { font-size: 11px; letter-spacing: 0.19em; margin-bottom: 20px; } .project-hero-title { line-height: 0.88; margin-bottom: 24px; } .project-hero-title span { font-size: 42px; } .project-hero-intro { font-size: 22px; line-height: 1.3; max-width: 660px; } } /* Mobile */ @media (max-width: 767px) { .project-hero { min-height: 100vh; min-height: 100svh; align-items: flex-end; background-position: center center; padding-top: 10px; box-sizing: border-box; } .project-hero-content { width: calc(100% - 28px); max-width: none; padding: 0 0 68px; box-sizing: border-box; } .project-eyebrow { font-size: 8.5px; line-height: 1.2; letter-spacing: 0.075em; margin-bottom: 14px; white-space: nowrap; } .project-hero-title { line-height: 0.96; letter-spacing: -0.035em; margin-bottom: 18px; max-width: 100%; } .project-hero-title span { display: block; font-size: clamp(22px, 7.4vw, 24px); max-width: 100%; white-space: nowrap; } .project-hero-intro { font-size: 28px; line-height: 1.28; max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-48a8cb08 */.project-intro-section { background: #050604; } .project-intro { width: 100%; background: #050604; color: #ffffff; } .project-intro-inner { width: 1080px; max-width: calc(100% - 96px); margin: 0 auto; padding: 72px 0 92px; } .project-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .project-meta-item { padding: 44px 40px 42px; border-right: 1px solid rgba(255, 255, 255, 0.16); } .project-meta-item:first-child { padding-left: 0; } .project-meta-item:last-child { border-right: none; padding-right: 0; } .project-meta-label { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 20px; } .project-meta-value { font-family: "Syne", sans-serif; font-size: 23px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: #ffffff; } .project-pullquote { position: relative; margin: 90px 0 72px; padding-left: 48px; max-width: 1080px; font-family: "Cormorant Garamond", serif; font-size: 42px; font-style: italic; font-weight: 400; line-height: 1.45; color: #00cc66; } .project-pullquote::before { content: ""; position: absolute; left: 0; top: 9px; width: 3px; height: calc(100% - 18px); background: #00cc66; } .project-intro-copy { max-width: 1080px; } .project-intro-copy p { font-family: "Outfit", sans-serif; font-size: 24px; font-weight: 300; line-height: 1.85; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.46); margin: 0; } /* Large Screen / Thunderbolt */ @media (min-width: 1600px) { .project-intro-inner { width: 1280px; max-width: calc(100% - 160px); padding: 84px 0 112px; } .project-meta-item { padding: 48px 48px 46px; } .project-meta-label { font-size: 13px; } .project-meta-value { font-size: 25px; } .project-pullquote { margin: 100px 0 78px; font-size: 46px; max-width: 1180px; } .project-intro-copy p { font-size: 26px; } } /* Desktop */ @media (min-width: 1025px) and (max-width: 1599px) { .project-intro-inner { width: 1080px; max-width: calc(100% - 96px); padding: 72px 0 92px; } .project-meta-value { font-size: 23px; } .project-pullquote { font-size: 42px; } .project-intro-copy p { font-size: 24px; } } /* Tablet */ @media (min-width: 768px) and (max-width: 1024px) { .project-intro-inner { width: calc(100% - 72px); max-width: 760px; padding: 64px 0 82px; } .project-meta-grid { grid-template-columns: repeat(2, 1fr); } .project-meta-item { padding: 34px 32px; border-right: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .project-meta-item:first-child, .project-meta-item:nth-child(3) { padding-left: 0; } .project-meta-item:nth-child(2), .project-meta-item:nth-child(4) { border-right: none; padding-right: 0; } .project-meta-item:nth-child(3), .project-meta-item:nth-child(4) { border-bottom: none; } .project-meta-label { font-size: 11px; margin-bottom: 16px; } .project-meta-value { font-size: 22px; } .project-pullquote { margin: 72px 0 56px; padding-left: 34px; font-size: 34px; line-height: 1.42; } .project-intro-copy p { font-size: 21px; line-height: 1.75; } } /* Mobile */ @media (max-width: 767px) { .project-intro-inner { width: calc(100% - 28px); max-width: none; padding: 46px 0 64px; } .project-meta-grid { grid-template-columns: 1fr; } .project-meta-item { padding: 24px 0; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .project-meta-item:last-child { border-bottom: none; } .project-meta-label { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 10px; } .project-meta-value { font-size: 21px; line-height: 1.3; } .project-pullquote { margin: 56px 0 42px; padding-left: 22px; font-size: 28px; line-height: 1.34; } .project-pullquote::before { width: 3px; top: 5px; height: calc(100% - 10px); } .project-intro-copy p { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, 0.52); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7f374430 *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-42e85ffa *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-51408aec *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7d3b6ec6 *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-60318783 *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-3787efa7 *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-483efbaa *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-d459a15 *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-148f837a *//* ================================ PROJECT CASE STUDY SECTION ================================ */ .project-case-section { width: 100%; background: #050604; color: #ffffff; } /* Main row */ .project-case-row { width: 100%; min-height: 560px; background: #050604; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .project-case-row, .project-case-row > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .project-case-row > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: inherit; padding: 0 !important; } .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Columns */ .project-case-media, .project-case-content { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Media side */ .project-case-media { display: flex; flex-direction: column; min-height: 560px; background: #050604; overflow: hidden; } .project-case-media .elementor-widget-html, .project-case-media .elementor-widget-container { width: 100%; height: 100%; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 560px; background: #050604; overflow: hidden; } .project-gallery-main { flex: 1 1 auto; width: 100%; min-height: 460px; margin: 0; overflow: hidden; background: #000000; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; border: 0; background: #000000; } /* Thumbnail strip */ .project-gallery-thumbs { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%; height: auto; gap: 10px; padding: 14px; background: #050604; overflow-x: auto; overflow-y: hidden; } .project-gallery-thumb { position: relative; appearance: none; flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 84px !important; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; padding: 0; cursor: pointer; overflow: hidden; opacity: 0.58; transition: opacity 0.2s ease, border-color 0.2s ease; } .project-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-gallery-thumb:hover, .project-gallery-thumb.is-active { opacity: 1; border-color: #00cc66; } /* YouTube support */ .project-gallery-youtube-poster { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; padding: 0; border: 0; background: #000000; cursor: pointer; overflow: hidden; } .project-gallery-youtube-poster img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; } .project-gallery-main-play, .project-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; pointer-events: none; } .project-gallery-main-play { font-size: 54px; background: rgba(0, 0, 0, 0.24); } .project-gallery-play { font-size: 22px; background: rgba(0, 0, 0, 0.28); } .project-gallery-youtube-poster:hover .project-gallery-main-play { color: #00cc66; background: rgba(0, 0, 0, 0.38); } /* Content side */ .project-case-content { display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 72px 7vw; background: #080907; } .project-case-content .elementor-widget-html, .project-case-content .elementor-widget-container { width: 100%; } .project-case-text { width: 100%; max-width: 620px; min-width: 0; } /* Text styles */ .project-case-eyebrow { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #00cc66; margin-bottom: 18px; } .project-case-title { font-family: "Syne", sans-serif; font-size: 46px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; margin: 0 0 20px; } .project-case-title span { color: #00cc66; } .project-case-subhead { font-family: "Cormorant Garamond", serif; font-size: 20px; font-style: italic; line-height: 1.35; color: rgba(255, 255, 255, 0.7); margin: 0 0 28px; } .project-case-copy { font-family: "Outfit", sans-serif; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); margin: 0 0 32px; } .project-case-copy strong { color: rgba(255, 255, 255, 0.82); font-weight: 700; } /* Tags */ .project-case-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-case-tags span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(0, 204, 102, 0.45); font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #00cc66; } /* Learn more link */ .project-case-link, .project-case-link:visited { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color 0.25s ease, gap 0.25s ease; } .project-case-link span { display: inline-block; font-size: 18px; line-height: 1; color: #00cc66; transform: translateY(-1px); } .project-case-link:hover { gap: 16px; color: #00cc66; } .project-case-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .project-case-row { min-height: 660px; } .project-case-media, .project-case-content, .project-gallery { min-height: 660px; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 540px; } .project-gallery-thumb { flex-basis: 132px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 99px !important; } .project-case-content { padding: 88px 8vw; } .project-case-text { max-width: 680px; } .project-case-title { font-size: 54px; } .project-case-subhead { font-size: 22px; } .project-case-copy { font-size: 18px; } } /* ================================ DESKTOP ================================ */ @media (min-width: 1025px) and (max-width: 1599px) { .project-case-row, .project-case-media, .project-case-content, .project-gallery { min-height: 560px; } .project-case-title { font-size: 46px; } } /* ================================ TABLET ================================ */ @media (min-width: 768px) and (max-width: 1024px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 460px; } .project-gallery-thumbs { padding: 12px 36px; } .project-case-content { padding: 64px 48px 72px; } .project-case-text { max-width: 760px; } .project-case-title { font-size: 42px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .project-case-row, .project-case-row > .e-con-inner, .project-case-row.is-reverse, .project-case-row.is-reverse > .e-con-inner { flex-direction: column !important; } .project-case-media, .project-case-content { flex: none !important; width: 100% !important; max-width: 100% !important; min-height: auto; } .project-gallery { min-height: auto; } .project-gallery-main, .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe, .project-gallery-youtube-poster, .project-gallery-youtube-poster img { min-height: 300px; } .project-gallery-thumbs { padding: 10px 14px; gap: 8px; } .project-gallery-thumb { flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 86px !important; } .project-case-content { padding: 42px 20px 54px; } .project-case-title { font-size: 32px; line-height: 1; margin-bottom: 16px; } .project-case-subhead { font-size: 18px; margin-bottom: 22px; } .project-case-copy { font-size: 16px; line-height: 1.65; margin-bottom: 26px; } .project-case-tags span { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 10px; min-height: 30px; } .project-case-link { margin-top: 28px; font-size: 10px; letter-spacing: 0.12em; } .project-case-link span { font-size: 16px; } .project-gallery-main-play { font-size: 42px; } .project-gallery-play { font-size: 18px; } } /* Lock project gallery image height on desktop/widescreen */ @media (min-width: 1025px) { .project-case-row { min-height: auto !important; } .project-case-media, .project-case-content { min-height: 560px !important; } .project-gallery { height: 560px !important; min-height: 560px !important; } .project-gallery-main { height: 440px !important; min-height: 440px !important; max-height: 440px !important; flex: 0 0 440px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 440px !important; min-height: 440px !important; max-height: 440px !important; object-fit: cover !important; } } /* Large screen */ @media (min-width: 1600px) { .project-case-media, .project-case-content { min-height: 640px !important; } .project-gallery { height: 640px !important; min-height: 640px !important; } .project-gallery-main { height: 510px !important; min-height: 510px !important; max-height: 510px !important; flex: 0 0 510px !important; } .project-gallery-main img, .project-gallery-main video, .project-gallery-main iframe { height: 510px !important; min-height: 510px !important; max-height: 510px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-a0eedbe *//* ================================ PORTFOLIO BOTTOM CTA ================================ */ .portfolio-bottom-cta { width: 100%; background: #050604; color: #ffffff; padding: 110px 24px 120px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .portfolio-bottom-cta-inner { width: 1080px; max-width: 100%; margin: 0 auto; text-align: center; } .portfolio-bottom-cta-kicker { font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #00cc66; margin: 0 0 22px; } .portfolio-bottom-cta-title { font-family: "Syne", sans-serif; font-size: 58px; font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; color: #ffffff; max-width: 820px; margin: 0 auto 28px; } .portfolio-bottom-cta-copy { font-family: "Outfit", sans-serif; font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, 0.58); max-width: 760px; margin: 0 auto 42px; } .portfolio-bottom-cta-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .portfolio-bottom-cta-button, .portfolio-bottom-cta-button:visited { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 220px; min-height: 48px; padding: 14px 24px; background: #00cc66; color: #050604; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 0.25s ease, color 0.25s ease; } .portfolio-bottom-cta-button:hover { background: #ffffff; color: #050604; } .portfolio-bottom-cta-link, .portfolio-bottom-cta-link:visited { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; color: #ffffff; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-align: center; transition: color 0.25s ease; } .portfolio-bottom-cta-link span { color: #00cc66; font-size: 18px; line-height: 1; transform: translateY(-1px); } .portfolio-bottom-cta-link:hover { color: #00cc66; } .portfolio-bottom-cta-button:focus-visible, .portfolio-bottom-cta-link:focus-visible { outline: 2px solid #00cc66; outline-offset: 6px; } /* ================================ LARGE SCREEN ================================ */ @media (min-width: 1600px) { .portfolio-bottom-cta { padding: 130px 40px 140px; } .portfolio-bottom-cta-inner { width: 1280px; } .portfolio-bottom-cta-title { font-size: 68px; } .portfolio-bottom-cta-copy { font-size: 19px; } } /* ================================ TABLET ================================ */ @media (max-width: 1024px) { .portfolio-bottom-cta { padding: 90px 36px 100px; } .portfolio-bottom-cta-title { font-size: 48px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .portfolio-bottom-cta { padding: 72px 20px 84px; } .portfolio-bottom-cta-kicker { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 18px; } .portfolio-bottom-cta-title { font-size: 36px; line-height: 1; margin-bottom: 24px; } .portfolio-bottom-cta-copy { font-size: 16px; line-height: 1.65; margin-bottom: 34px; } .portfolio-bottom-cta-actions { gap: 20px; } .portfolio-bottom-cta-button, .portfolio-bottom-cta-button:visited { width: 100%; max-width: 360px; } .portfolio-bottom-cta-link, .portfolio-bottom-cta-link:visited { max-width: 320px; font-size: 10px; letter-spacing: 0.12em; line-height: 1.4; } .portfolio-bottom-cta-link span { font-size: 16px; } }/* End custom CSS */