/*
Theme Name: Brooklyn - Squid
Description: Child theme for Brooklyn WordPress theme
Author: Squidart
Author URI: http://squidart.co.za
Template: brooklyn
Version: 2.7

License URI: http://opensource.org/licenses/mit-license.php
*/

#hero-partners .parallax-scroll-container-calculated {
  height: 124.196% !important;
}
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 110px;
  /* row-gap: 100px; */
  row-gap: 80px;
  /* padding-top: 50px; */
  padding-top: 35px;
  /* padding-bottom: 180px; 180 * 0.72 */
  padding-bottom: 130px; 
}
.logo {
  display: block;
}
.page-id-2329 .title-contact .vc_column-inner:after,
.our-partners .title-contact .vc_column-inner:after  {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #b1b9bf;
  bottom: 3px;
  position: relative
}

/********** IMPORT RESPONSIVE BEHAVIOURS **********/
@import "assets/theme-spacing.css?v=2.7";



body .dg.ac {
  position: fixed;
  top: 20vh;
  left: 0;
  right: 0;
  height: 0;
  z-index: 71;
}


h2 { margin-bottom: 10px; }
h3 { margin-bottom: 12px; }
p, dd, pre, ul, ol, dl { margin-bottom: 12px; }







th, td {
  padding: 5px 0px;
}


::selection {
background: #33333333;
color: #ffffff;
text-shadow:none;
}
::-webkit-selection {
background: #33333333;
color: #ffffff;
text-shadow:none;
}
::-moz-selection {
background: #33333333;
color: #ffffff;
text-shadow:none;
}



.page-id-1154 #ut-custom-hero {
  border-bottom: 2px solid #000;
}
@media screen and (max-width: 1800px) {
  .page-id-1154 #ut-custom-hero {
      border-bottom: 1px solid #000;
  }
}


/* Nav *****************************************************************************/

.ut-navigation-menu .current_page_item, 
.ut-mobile-menu .menu-item {
  position: relative;
}

.ut-mobile-menu .menu-item a {
padding: 0 !important;
margin: 20px 0 20px 30px;
width: fit-content;
}

.ut-navigation-menu .current_page_item span:after,
.ut-navigation-menu .menu-item span:after,
.ut-mobile-menu .current_page_item a:after,
.ut-mobile-menu .menu-item a:after {
content: '';
position: absolute;
left: 0;
bottom: -3px; 
width: 0%;
height: 2px;
background-color: #fff; 
transition: width 0.3s ease-in-out;
}

.ut-navigation-menu .current_page_item span:after,
.ut-mobile-menu .current_page_item a:after {
width: 100%; 
}

.ut-navigation-menu .menu-item:hover span:after,
.ut-mobile-menu .menu-item:hover a:after {
width: 100%; 
}

/* Hero's / Image Tiles *****************************************************************************/

#hero-container {
  padding: 0;
}
#hero-container canvas,
canvas {
  position: absolute;
  top: calc(50%);
  /* top: calc(50% - 10vh ); */
  transform: translateY(-50%);
}



/* Hero Sections - Home*/
section#hero-container.vc_section,
section#hero-container.vc_section.vc_section-height-95vh,
section#hero-container.vc_section.vc_section-height-95vh #hero-row {
  min-height: 90vh !important;
  height: 90vh !important;
  max-height: 90vh !important;
  position: relative !important;
}
@media screen and (max-width: 590px) {

  section#hero-container.vc_section,
  section#hero-container.vc_section.vc_section-height-95vh,
  section#hero-container.vc_section.vc_section-height-95vh #hero-row {
      min-height: 85vh !important;
      height: 85vh !important;
      max-height: 85vh !important;
  }
  
}

@media screen and (max-width: 590px) {

  #hero-container > .parallax-scroll-container {
      /* background-size: 120% !important; */
      background-repeat: no-repeat;
      background-position: bottom center !important;
  }
  
}



#hero-container {
  --w : 256px;
  --h : 233px;
  --scale : 1;
  --width : calc( var(--w) * var(--scale) );
  --height : calc( var(--h) * var(--scale) );
  
  --perc : 62.5%;

  background-color: #111111;

}

#hero-container::before {
  


  content: "";
  position: absolute;
  z-index: 5;
  bottom: -1px;
  left: var(--perc);
  width: var(--width);
  height: var(--height);

  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/wp-content/themes/brooklyn-child/images/section-split/split-home-1.svg);
}

#hero-container::after {
  content: "";
  position: absolute;
  z-index: 5;
  bottom: -1px;
  left: calc( var(--perc) + var(--width) );
  height: var(--height);
  width: 100%;
  background-color: #000000;
}


/* Contact form */
.wpcf7 form.sent .wpcf7-response-output {
  background-color: #46b450;
  color: #fff;
  border-radius: 20px;
  margin-right: 0;
  margin-left: 0;
}





/* HOME - Hero Text */
.home-hero-logo {
  position: absolute;
  top: calc(45%);
  transform: translateY(-50%);
  width: 100%;
  max-width: calc(100% - 40px);
}

#hero-container .hero-text {
  position: absolute;
  bottom: calc(var(--height)* 0.5);
  transform: translateY(50%);
  height: fit-content;
  
  display: inline-block;
  margin: 0;

  
  font-size: 48px;
  line-height: 1.2em;
  letter-spacing: 0.15em;
  color: #C3C8BC;

  text-shadow: 0px 2px 10px #025c00;
  color: #fff;
  /* -webkit-background-clip: text;
  color: transparent;
  caret-color: #0f62fe;
  background-image: linear-gradient(90deg, #ffffff66, #ffffff); */
}

#hero-container .hero-text::after {
  content: "";
  display: block;
  position: absolute;
  width: 200vw;
  height: 240px;
  bottom: -95px;
  left: -90vw;
  z-index: -1;
  background: rgb(3, 115, 1);
  background: linear-gradient(0deg, rgba(3, 115, 1, 0.5256696428571428) 0%, rgba(3, 115, 1, 0) 100%);
}





@media screen and (max-width: 1805px) {
  #hero-container .hero-text {
      font-size: 40px;
  }
}


@media screen and (max-width: 1440px) {

  #hero-container {
      --scale: 0.5;
  }
  /* #hero-container::before {
      width: calc( 256px * 0.5 );
      height: calc( 233px * 0.5 );
  }
  #hero-container::after {
      left: calc(60% + 128px);
      height: 116.75px;
  } */
      
      #hero-container .hero-text {
          font-size: calc(0.04* 60vw) !important;
      }

      #hero-container .hero-text::after {
          height: 130px;
          bottom: -41px;
      }
}

@media screen and (max-width: 1024px) {  
  #hero-container {
      --perc: 40%;
  }
}

@media screen and (max-width: 768px) {  
  #hero-container {
      --perc: 52.5%;
  }

  .home-hero-logo {
      content:url(/wp-content/themes/brooklyn-child/images/section-split/alkimista-home-logo-m.svg);
  }

  .home-hero-logo { width: 72% }

  #hero-container .hero-text {
      max-width: 48%;
  }

  #hero-container .hero-text {
      font-size: calc(0.09* 48vw) !important;
  }
}
@media screen and (max-width: 590px) {  
  #innovative-solutions::before { height: 0; }
  #hero-container::after { left: calc(var(--perc) + var(--width) - 1px); }
}


/* Contact page */
.page-id-630 h4 {
  font-size: 24px !important;
}







#innovative-solutions::before {
content: "";
position: absolute;
z-index: 1;
top: -1px;
left: calc(70%);
width: 441px;
height: 567px;
background-position: top right;
background-repeat: no-repeat;
background-size: contain;
background-image: url(/wp-content/themes/brooklyn-child/images/section-split/split-home-2.svg);
}

#innovative-solutions::after {
content: "";
position: absolute;
z-index: 1;
top: -1px;
left: calc(70% + 441px);
height: 567px;
width: 50.5%;
background-color: #000000; 
z-index: 5;
}

.footer-nav.linkedin-nav {
margin-top: -25px;
width: 100%;
}

/* Contact */
#hero-contact {
height: 660px;
  border-bottom: 2px solid #fff;
  background-color: #000000;
  margin-bottom: -1px;
}

#hero-contact::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -1px;
  left: calc( 53.75% - 1px );
  width: 400px;
  height: 491px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/wp-content/themes/brooklyn-child/images/section-split/split-light.svg);
}

#hero-contact::after {
content: "";
  position: absolute;
  z-index: 1;
  bottom: -1px;
  right: calc( 100% - 53.75% );
  height: 491px;
  width: 100%;
  background-color: #ffffff; 
  z-index: 5;
}
.h1-contact, .h1-partners {
  font-size: 105px !important;
  display: inline-block;
  margin-top: 340px;
  padding-bottom: 100px;
  border-bottom: 0px solid #b1b9bf;
}

/* Partners */
#hero-partners {
height: 50vw;
min-height: 384px;
/* min-height: 900px; */
  border-bottom: 2px solid #fff;
  background-color: #000000;
  margin-bottom: -1px;
}

#hero-partners::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -1px;
  left: calc( 53.75% - 1px );
  width: 400px;
  height: 491px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/wp-content/themes/brooklyn-child/images/section-split/split-light.svg);
}

#hero-partners::after {
content: "";
  position: absolute;
  z-index: 1;
  bottom: -1px;
  right: calc( 100% - 53.75% );
  height: 491px;
  width: 100%;
  background-color: #ffffff; 
  z-index: 5;
}
.h1-partners {
  margin-top: 33vw;
}

@media screen and (max-width: 2400px) {
  /* Partners */
  #hero-partners {
  /* min-height: 1335px; */
  }
  #hero-partners::before {
  left: calc( 53.75% - 1px );
      width: 300px;
      height: 368.25px;
}
#hero-partners::after {
  right: calc( 100% - 53.75% );
      height: 368.25px;
      width: 100%;
}
.h1-partners {
    margin-top: calc(50vw - 368.25px) ;
  padding-bottom: 0px;
}

  /* Contact */
  #hero-contact {
      height: 400px;
  }
  #hero-contact::before {
  left: calc( 53.75% - 1px );
      width: 200px;
      height: 245.5px;
}
#hero-contact::after {
  right: calc( 100% - 53.75% );
      height: 245.5px;
      width: 100%;
}
      body .h1-contact {
          margin-top: 152px;
          padding-bottom: 57px;
      }

}

@media screen and (max-width: 1950px) {

  body #hero-contact .parallax-scroll-container { background-position: right 60%; }

}

/* Custom */
@media screen and (max-width: 1505px) {

      body .h1-contact, body .h1-partners {
          font-size: 93px !important;
      }
  .h1-partners {
      margin-top: calc(50.5vw - 368.25px) ;
  }

}

@media screen and (max-width: 1350px) {

#hero-partners::before {
  left: calc( 45% - 1px );
}
#hero-partners::after {
  right: calc( 100% - 45% );
}

  #hero-contact::before {
  left: calc( 45% - 1px );
}
#hero-contact::after {
  right: calc( 100% - 45% );
}

      body .h1-contact, body .h1-partners {
          font-size: 80px !important;
      }
  .h1-partners {
      margin-top: calc(52.5vw - 368.25px) ;
  }
}

@media screen and (max-width: 1260px) {

}

@media screen and (max-width: 1200px) {

  body #hero-contact .parallax-scroll-container { background-size: 110% !important; }

      body .h1-contact, body .h1-partners {
          font-size: 67px !important;
      }

      body .h1-contact {
          margin-top: 175px;
          padding-bottom: 50px;
      }
  .h1-partners {
      margin-top: calc(54.5vw - 368.25px) ;
  }
.logo-row {
    column-gap: 90px;
    row-gap: 70px;
    padding-top: 30px;
    padding-bottom: 100px;
  }
}

@media screen and (max-width: 1024px) {
#hero-partners::before {
  left: calc( 37% - 1px );
}
#hero-partners::after {
  right: calc( 100% - 37% );
}

#ut-parallax-67584e94e56b9,
body #hero-contact .parallax-scroll-container { background-size: 150% !important; }

#hero-contact::before {
  left: calc( 37% - 1px );
}
#hero-contact::after {
  right: calc( 100% - 37% );
}
body .h1-contact, body .h1-partners {
  font-size: 52px !important;
}
}

@media screen and (max-width: 950px) {
#hero-partners {
    /* min-height: 220px; */
    /* height: 220px; */
}
.h1-partners {
  margin-top: calc(45.5vw - 184.5px) ;
}

#hero-partners::before {
  left: calc(45% + 6px);
  height: calc(245.5px * 0.75);
  width: calc(200px * 0.75);
}

#hero-partners::after {
  right: calc( 100% - 46.5% );
  height: calc(245.5px * 0.75);
}

  #ut-parallax-675850c7d94eb,
  body #hero-contact .parallax-scroll-container { 
      background-size: 130% !important; 
      background-position: right 47%;
  }

.page-id-630 #ut-custom-hero section,
  #hero-contact {
      min-height: 220px;
      height: 220px;
  }

  #hero-contact::before {
      left: calc(45% + 6px);
      height: calc(245.5px * 0.5);
      width: calc(200px * 0.5);
  }

  #hero-contact::after {
      right: calc( 100% - 46% );
      height: calc( 245.5px * 0.5 );
  } 

      body .h1-contact {
          margin-top: 60px;
          padding-bottom: 23px;
      }
}

@media screen and (max-width: 768px) {
  
  body .h1-contact, body .h1-partners {
      font-size: 40px !important;
  }
  #hero-contact { margin-bottom: -3px; }
.h1-partners {
  margin-top: calc(180px) ;
  
  }
  .page-id-2329 .title-contact .vc_column-inner:after,
  .our-partners .title-contact .vc_column-inner:after {
    width: 50%;
  }
}
@media screen and (max-width: 590px) {    
  body #hero-contact .parallax-scroll-container {
      background-size: 130% !important;
      background-position: right 32%;
  }
  #hero-partners::after {
    right: calc( 100% - 47% );
  }

  #hero-contact::before {
      left: calc(57% + 4px);
      height: calc(245.5px* 0.3);
      width: calc(200px* 0.3);
  }

  #hero-contact::after {
      right: calc(100% - 58.5%);
      height: calc(245.5px* 0.3);
  }

  body .h1-contact {
      margin-top: 95px;
      padding-bottom: 20px;
      /* border-bottom: none; */
  }
  /* border-bottom: 3px solid #b1b9bf; */
.logo-row {
    column-gap: 70px;
    row-gap: 45px;
    padding-top: 25px;
    padding-bottom: 80px;
}

}

@media screen and (max-width: 420px) {
  
  body #hero-contact .parallax-scroll-container {
      background-size: 140% !important;
      background-position-x: right !important;
  }
}
@media screen and (max-width: 365px) {
  #hero-contact::after { right: calc(100% - 70% - 5px ); }
  #hero-contact::before { left: calc(70% + 4px); }

  body #hero-contact .parallax-scroll-container {
      background-position-y: 38% !important;
  }
}




/* Image Tiles */
.image-tile {
  --scale : 1;
  --r : 20px;
  --radius : calc( var(--r) * var(--scale) );
  --top: 0px;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--radius);
}
.image-tile::before,
.image-tile::after {
  content: "";
  position: absolute;
  top: var(--top);
  right: 0px;
  width: 100%;
  height: 100%;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
}
.image-tile-filler {
  position: absolute;
  top: var(--top);
  left: 0;
  width: 100%;
  height: 10px;
}


.vc_column-inner:has(.image-tile),
.wpb_raw_code:has(.image-tile),
.wpb_wrapper:has(.image-tile) {
height: 100%;
}
/* Industries page */

.industries-toggle-more p {
  font-size: 24px !important;
  line-height: 1.5em;
  margin-bottom: 40px;
}

.industries-1 {
  --perc : 33%;
  
  --r : 58px;
  --h : 566px;
  --before-w : 60px;
  --before-h : 237px;
  --after-w : 156px;
  --after-h : 189px;
  
  --base-height : calc( var(--scale) * var(--h) );
  
  --before-width : calc( var(--scale) * var(--before-w) );
  --before-height : calc( var(--scale) * var(--before-h) );

  --after-width : calc( var(--scale) * var(--after-w) );
  --after-height : calc( var(--scale) * var(--after-h) );

  height: var(--base-height);
  border-radius: var(--radius);
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/industries-1-bg-iii.jpg);
}
.industries-1::before {
background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/industries-1-l.svg);
height: var(--before-height);
width: var(--before-width);
top: unset;
bottom: -1px;
left: -1px;
}
.industries-1::after {
background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/industries-1-r.svg);
height: var(--after-height);
width: calc( var(--after-width) + 2px );
left: calc( var(--perc) - var(--after-width) - 1px );
top: unset;
bottom: -1px;
}
.industries-1 .image-tile-filler {
background-color: #fff;
height: var(--after-height);
width: calc( var(--perc) - var(--after-width) + 1px );
top: unset;
bottom: -1px;
left: 0px;
}


.industries-2 {
  --perc : 33%;
  
  --r : 64px;
  --h : 447px;
  --before-w : 67px;
  --before-h : 267px;
  --after-w : 173px;
  --after-h : 215px;
  
  --base-height : calc( var(--scale) * var(--h) );
  
  --before-width : calc( var(--scale) * var(--before-w) );
  --before-height : calc( var(--scale) * var(--before-h) );

  --after-width : calc( var(--scale) * var(--after-w) );
  --after-height : calc( var(--scale) * var(--after-h) );

  height: var(--base-height);
  border-radius: var(--radius);

  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/industries-2-bg.jpg);
  background-size: 180%;
}
.industries-2::before {
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/industries-2-l.svg);
  background-position: bottom left;
  width: var(--before-width);
  height: var(--before-height);
  top: -1px;
  left: -1px;
}
.industries-2::after {
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/industries-2-r.svg);
  height: var(--after-height);
  width: calc( var(--after-width) + 2px );
  left: calc( var(--perc) - var(--after-width) - 1px );
  top: -1px;
}
.industries-2 .image-tile-filler {
  background-color: #fff;
  height: var(--after-height);
  width: calc( var(--perc) - var(--after-width) + 1px );
  top: -3px;
  left: 0px;
}

.industries-3 {
  --perc : 50%;

  --r : 95px;
  --h : 1400px;
  --before-w : 425px;
  --before-h : 250px;
  --after-w : 425px;
  --after-h : 314px;

  --base-height : calc( var(--scale) * var(--h) );

  --before-width : calc( var(--scale) * var(--before-w) );
  --before-height : calc( var(--scale) * var(--before-h) );

  --after-width : calc( var(--scale) * var(--after-w) );
  --after-height : calc( var(--scale) * var(--after-h) );

  height: var(--base-height);
  border-radius: var(--radius);
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/industries-3-bg.jpg);
}
  .industries-3::before {
      background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/contact-1-l.svg);
      width: var(--before-width);
      height: var(--before-height);
      top: -1px;
      right: calc( var(--perc) - var(--before-width) );
  }
  .industries-3::after {
      background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/contact-1-r.svg);
      width: var(--after-width);
      height: var(--after-height);
      right: -1px;
  }
  .industries-3 .image-tile-filler {
      left: unset;
      right: 0;
      background-color: #fff;
      height: var(--before-height);
      width: calc(var(--perc) - var(--after-width) + 1px);
  }



@media screen and (max-width: 1440px) {
  .industries-1,
  .industries-2,
  .industries-3 {
      --scale: 0.5;    
  }
  .industries-2 .image-tile-filler {
      top: -1px;
  }

}
@media screen and (max-width: 1280px) {
  .industries-1 {
      background-size: 120%;
  }
  .industries-3 {
      background-size: 160%;
  }
}
@media screen and (max-width: 768px) {
  .industries-1 {
      background-size: cover;
  }
  .industries-3 {
      --scale: 0.25;
  }

  .industries-toggle-more p {
      font-size: 16px !important;
      line-height: 1.5em;
  }
}
@media screen and (max-width: 560px) {
  .industries-1 {

      background-size: 120%;
      --scale : 0.375;
      --r : 26px;
      --radius: calc( var(--scale) * var(--r) );
  }

  .industries-2 {
      --before-w: 41px;
  }
  
  .industries-2::before {
      background-size: 160%;
      top: -2px;
  }
}
@media screen and (max-width: 360px) {
  .industries-1 {
      background-size: 140%;
  }
  .industries-2 {
      background-size: 270%;
      --perc: 50%;
  }
}

/* ABOUT US TILES */
.about-our-prof-p { margin: 80px 0 120px 0 !important; }
.about-p-40-lite {
  font-weight: 300;
  line-height: 1.5em;
}

.sqa-top-separator,
.page-id-1154 .vc_separator.wpb_content_element {
  margin-bottom: 3px;
}
/* .page-id-1154 .vc_separator.wpb_content_element { margin-bottom: 1px; } */
.page-id-1154 .vc_separator.vc_sep_border_width_3 .vc_sep_holder_l .vc_sep_line { border-top-width: 1px; }

img.hundred-perc-south-african {
  margin: 30px 0 30px 0 !important;
}
@media screen and (max-width: 1440px) {
  img.hundred-perc-south-african { 
      width: 200px;
  }
}
@media screen and (max-width: 768px) {
  img.hundred-perc-south-african { 
      width: 150px;
      margin: 20px 0 20px 0 !important;

  }
  .separator-hide-tablet { display: none; }

  .about-our-prof-p { margin: 0px 0 80px 0 !important; }

}

.about-1 {
  --r : 48px;
  --h : 275px;
  --w : 202px;
  --radius : calc( var(--r) * var(--scale) );
  --height : calc( var(--h) * var(--scale) );
  --width : calc( var(--w) * var(--scale) );

  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/about-1-bg-ii.jpg);
  height: 100%;
  border-radius: var(--radius);
}

.about-1::before {
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/about-1-l.svg);
  height: var(--height);
  width: var(--width);
  top: unset;
  bottom: -1px;
  left: 0px;
}

@media screen and (max-width: 1440px) {
  .about-1 {
      --scale: 0.5;
  }
}


.tech-1 {
  --r : 44px;
  --h : 377px;
  --w : 333px;
  --radius : calc( var(--r) * var(--scale) );
  --height : calc( var(--h) * var(--scale) );
  --width : calc( var(--w) * var(--scale) );

  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/tech-1-bg.jpg);
  background-size: 120%;
  height: 538px;
  border-radius: var(--radius);
  margin-top:10vh;
}

.tech-1::before {
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/tech-1-l.svg);
  height: var(--height);
  width: var(--width);
  top: unset;
  bottom: -1px;
  left: -1px;
}


.tech-2 {
    height: 1494px;
    border-radius: 58px;
    
    --r : 44px;
    --h : 440px;
    --w : 240px;
    --radius : calc( var(--r) * var(--scale) );
    --height : calc( var(--h) * var(--scale) );
    --width : calc( var(--w) * var(--scale) );
    
      background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/tech-2-bg.jpg);
      background-size: 110%;
      height: 100%;
      border-radius: var(--radius);
      border: 1px solid #fff;
}
.tech-2::before {
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/tech-2-l.svg);
  height: var(--height);
  width: var(--width);
  top: -1px;
  left: -1px;
}


.image-tile-bottom .wpb_content_element,
.image-tile-bottom .wpb_wrapper { display: flex; align-items: flex-end; flex-basis: 100%; }

.tech-3 {
  --r : 48px;
  --h : 275px;
  --w : 202px;
  --radius : calc( var(--r) * var(--scale) );
  --height : calc( var(--h) * var(--scale) );
  --width : calc( var(--w) * var(--scale) );

  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/tech-3-bg.jpg);
  height: 100%;
  border-radius: var(--radius);
  background-size: 110%;

  max-height: 70%;
  height: 560px;
  max-width: 490px;
  margin: 0 0 0 auto;
}

.tech-3::before {
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/tech-3-l.svg);
  height: var(--height);
  width: var(--width);
  top: unset;
  bottom: -1px;
  left: -1px;
}

@media screen and (max-width: 2100px) {
  .tech-2 {
      background-size: 140%;
  }
}
@media screen and (max-width: 1650px) {
  .tech-2 {
      height: 70%;
  }
}
@media screen and (max-width: 1440px) {
  .tech-1,
  .tech-3 {
      --scale: 0.5;
  }
  .tech-1 {
      height: 350px;
      background-size: 160%;
      
  }
  .tech-2 {
      height: 50%;
      background-size: 240%;
  }

  .tech-2::before {
      height: 0px;
  }
}

@media screen and (max-width: 1200px) {
  .tech-1 {
      background-size: 220%;
  }

  .tech-3 {
      background-size: 160%;
  }
}

@media screen and (max-width: 768px) {	
  
  .tech-1 {
      margin-top:0;
  }


  .tech-2 {
      height: 210px;
      background-size: cover;
  }

  .image-tile-bottom {
      height: fit-content;
  }
  .tech-3 {
      background-size: cover;
      max-height: 70%;
      height: 360px;
      max-width: 100%;
  }
  
}



.contact-1 {
  --tile-h : 182px;
  --before-w : 150px;
  --before-h : 88px;
  --after-h : 111px;
  --pos-perc : 76.25%;

  height: var(--tile-h);
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/contact-1-bg-v.png);

}

.contact-1::before {
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/contact-1-l.svg);
  width: var(--before-w);
  height: var(--before-h);
  right: calc( var(--pos-perc) - var(--before-w) );
}

.contact-1::after {
  background-image: url(/wp-content/themes/brooklyn-child/images/image-tiles/contact-1-r.svg);
  width: var(--before-w);
  height: var(--after-h);
  right: -1px;
}

.contact-1 .image-tile-filler {
  left: unset;
  background-color: #fff;
  right: calc( var(--before-w) - 2px );
  width: calc( var(--pos-perc) - var(--before-w) - var(--before-w) + 4px );
  height: var(--before-h);
}

@media screen and (max-width: 1440px) {	
  .contact-1 {
      --tile-h : calc(182px* 0.5);
      --before-w : calc(150px* 0.5);
      --before-h : calc(88px* 0.5);
      --after-h : calc(111px * 0.5);
      --radius: 10px;
  }
}

@media screen and (max-width: 970px) {	
  .contact-1 {
      border-top: 3px solid #fff;
  }
}

@media screen and (max-width: 590px) {	
  .contact-1 {
      --tile-h: 70px;
      --before-w: 40px;
      --before-h: 24px;
      --after-h: 31px;
      --radius: 10px;
      --top : 0px;
      border-top: none;
      border-top: 1px solid #fff;
      background-size: 130%;
  }
      .contact-1::before,
      .contact-1::after {
          top: calc(var(--top) + 0px);
      }
      .contact-1::after {
          right: 0px;
          top: -0.25px;
      }
      .contact-1::before {
          top: -0.75px;
      }
      .contact-1 .image-tile-filler {
          top: -1px;
      }
}