@charset "UTF-8";
/*!
Theme Name: HERTALIS Child
Description: Child theme for the Divi 
Author: Ian Brown
Template: Divi
Version: 1.27.02.2024
*/
/* 
######################
GLOBAL
######################
*/
:root {
  --clr-white: #f0eee9;
  --clr-black: #30343f;
  --clr-dark: #345f79;
  --clr-highlight: #d65079;
  --clr-highlight-2: #edc373;
  --border-radius: 8px;
  /* 
######################
FONTS
######################
*/
  font-size: 14px;
  /*
  #################
  MAX WIDTH 980px
  #################
  */
  /*
  #################
  MAX WIDTH 767px
  #################
  */
}
:root body {
  background-color: var(--clr-black) !important;
}
:root h4 {
  font-size: 48px !important;
  line-height: 1.1em;
}
@media only screen and (max-width: 980px) {
  :root h4 {
    font-size: 38px !important;
  }
}
@media only screen and (max-width: 767px) {
  :root h4 {
    font-size: 30px !important;
  }
}
/* 
###########################
MAIN AREA - lift main area
###########################
*/
div#et-main-area {
  position: relative;
  top: -102px;
}
/* 
###################################################
COLORS USING VARIABLES - style changes made easy
###################################################
*/
.et_pb_section.hert-colour-type-a {
  background-color: var(--clr-white) !important;
}
.et_pb_section.hert-colour-type-a h4, .et_pb_section.hert-colour-type-a p, .et_pb_section.hert-colour-type-a li a {
  color: var(--clr-black) !important;
}
.et_pb_section.hert-colour-type-b, .et_pb_module.hert-colour-type-b {
  background-color: var(--clr-black) !important;
}
.et_pb_section.hert-colour-type-b h4, .et_pb_section.hert-colour-type-b p, .et_pb_section.hert-colour-type-b li a, .et_pb_module.hert-colour-type-b h4, .et_pb_module.hert-colour-type-b p, .et_pb_module.hert-colour-type-b li a {
  color: var(--clr-white) !important;
}
.et_pb_sticky div#hert-header-wrap {
  background-color: var(--clr-black);
}
/* 
######################
LISTS
######################
*/
ul.hert-list-type-1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0;
}
ul.hert-list-type-1 li {
  font-size: 20px;
}
/* 
######################
SUB TITLE
######################
*/
p.hert-subtitle {
  font-size: 20px;
}
footer {
  z-index: 0;
  position: relative !important;
}
.hert-hide {
  display: none !important;
}
.hert-show {
  display: flex !important;
}
/* 
#####################################
SPLIT ROW - half image half text
Maintain aspect ratio for all sizes
#####################################
*/
.hert-split-row .et_pb_column {
  width: 50% !important;
  margin-right: 0 !important;
}
.hert-split-row {
  min-height: 700px;
}
#hert-split-row-image-wrap-seriously-good {
  background-position-x: 40%;
}
#hert-split-row-image-wrap-community {
  background-position-x: 60%;
}
.hert-vert-centre-items {
  display: flex;
  align-items: center;
}
h1.hert-split-row-header {
  font-weight: 400;
  line-height: 1.2em;
  margin-bottom: 40px;
}
p.hert-split-row-sub-header {
  font-weight: 300;
  font-size: 26px;
  line-height: 1.4em;
}
p.hert-split-row-sub-header a {
  color: var(--clr-dark);
}
/*
#################
MAX WIDTH 980px
#################
*/
@media only screen and (max-width: 980px) {
  div#hert-split-row-image-main-image {
    height: 100vw;
    min-height: 50vh;
  }
  .hert-split-row .et_pb_column {
    width: 100% !important;
  }
  p.hert-split-row-sub-header {
    font-size: 22px;
    line-height: 1.4em;
  }
  .hert-split-row-image-wrap {
    margin-bottom: 0;
  }
}
/* 
######################
CLIENT LOGOS
######################
*/
div#hert-client-logos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  align-items: flex-end;
  position: relative;
}
div#hert-client-logos .hert-client-logo-wrap {
  position: relative;
}
div#hert-client-logos .hert-client-logo-wrap img {
  width: 100%;
}
div#hert-client-logos div#hert-hm {
  top: 0px;
  min-width: 200px;
}
div#hert-client-logos div#hert-bgf {
  width: 160px;
}
div#hert-client-logos div#hert-montagu {
  width: 130%;
  z-index: 9;
}
div#hert-client-logos div#hert-bridgepoint {
  max-width: 60%;
  left: 90px;
}
div#hert-client-logos div#hert-pantheon {
  width: 120%;
  top: -20%;
  z-index: 9;
}
div#hert-client-logos div#hert-coller {
  width: 140%;
}
div#hert-client-logos div#hert-altvia {
  left: 50px;
  top: -50px;
}
div#hert-client-logos div#hert-crestbridge {
  width: 150%;
}
div#hert-client-logos div#hert-boston-uni {
  left: 96px;
}
div#hert-client-logos div#hert-bregal {
  width: 200%;
}
/*
#################
MAX WIDTH 980px
#################
*/
@media only screen and (max-width: 980px) {
  div#hert-client-logos {
    max-width: 94%;
  }
  div#hert-client-logos div#hert-bridgepoint {
    left: 70px;
  }
  div#hert-client-logos div#hert-triton {
    width: 90%;
    left: -14px;
  }
  div#hert-client-logos div#hert-crestbridge {
    width: 134%;
    left: -20px;
  }
  div#hert-client-logos div#hert-altvia {
    left: 40px;
    top: -20px;
  }
  div#hert-client-logos div#hert-boston-uni {
    left: 60px;
    width: 86%;
  }
  div#hert-client-logos-wrap .et_pb_column:first-child {
    margin-bottom: -20px;
  }
}
/*
#################
MAX WIDTH 767px
#################
*/
@media only screen and (max-width: 767px) {
  div#hert-client-logos .hert-client-logo-wrap {
    width: 100% !important;
    left: 0 !important;
    text-align: center;
  }
  div#hert-client-logos .hert-client-logo-wrap img {
    max-width: 120px;
    min-width: 65px;
  }
}
/* 
######################
MENU
######################
*/
.hert-header-footer-menu .et-menu li.linked-in-icon a {
  color: transparent !important;
  font-size: 1px !important;
}
.hert-header-footer-menu .linked-in-icon a:before {
  display: block;
  font-family: "ETmodules";
  font-size: 20px;
  line-height: 40px;
  height: 40px;
  width: 40px;
  text-align: center;
  content: "";
  color: #fff;
  background-color: #007bb6 !important;
  border-radius: 8px;
}
.hert-header-footer-menu.hert-footer-menu .linked-in-icon a:before {
  position: relative;
  top: -16px;
}
/* 
######################
MOBILE MENU
######################
*/
.hert-header-footer-menu span.mobile_menu_bar:before {
  color: var(--clr-highlight-2) !important;
}
.hert-header-footer-menu .et_mobile_menu {
  border-top: none !important;
}
/* 
######################
HERO
######################
*/
/*
  #################
  MAX WIDTH 980px
  #################
  */
@media only screen and (max-width: 980px) {
  div#hert-homepage-hero-container .et_pb_row {
    display: flex;
    flex-direction: column;
  }
  div#hert-homepage-hero-container .et_pb_row .et_pb_column_0 {
    order: 2;
    height: 100vw;
  }
  div#hert-homepage-hero-container .et_pb_row .et_pb_column_1 {
    order: 1;
  }
  div#hert-community-container .et_pb_row .hert-split-row-image-wrap {
    height: 100vw;
  }
}
/* 
#####################################
HOMEPAGE
#####################################
*/
h1.hert-split-row-header span {
  color: var(--clr-highlight-2);
  font-weight: 700;
}
/* 
############
COMMUNITY
############
*/
#hert-community-container {
  border-top: 100px solid var(--clr-white);
  border-bottom: 100px solid var(--clr-white);
}
#hert-community-container h4 {
  margin-bottom: 40px;
}
#hert-community-container p.hert-split-row-sub-header {
  padding-bottom: 40px;
}
/*
#################
MAX WIDTH 1400px
#################
*/
/*
#################
MAX WIDTH 980px
#################
*/
@media only screen and (max-width: 980px) {
  #hert-community-container {
    border-top: 0px solid var(--clr-white);
    border-bottom: 0px solid var(--clr-white);
  }
  ul#hert-list-any-questions {
    list-style: none;
  }
}
/* 
######################
ANY QUESTIONS
######################
*/
/*
#################
MAX WIDTH 1400px
#################
*/
@media only screen and (max-width: 1400px) {
  div#hert-any-questions-container {
    padding-top: 2vh;
  }
}
/* 
######################
BUTTONS
######################
*/
a.hert-button {
  color: #fff;
  background-color: var(--clr-highlight);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 20px;
}
a#hert-fixed-contact-button {
  display: none;
  position: fixed;
  top: 86%;
  right: 2%;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  align-items: center;
  justify-content: center;
  text-align: center;
  -webkit-box-shadow: 0px 2px 14px rgba(50, 50, 50, 0.3);
  -moz-box-shadow: 0px 2px 14px rgba(50, 50, 50, 0.3);
  box-shadow: 0px 2px 14px rgba(50, 50, 50, 0.3);
}
/* 
######################
CLIP PATH SHAPES
######################
*/
.hert-text-with-polygon-container {
  display: flex;
  flex-direction: column;
  max-width: 270px;
  position: relative;
  left: -30px;
}
.hert-text-with-polygon-container .hert-text-with-polygon {
  position: relative;
  display: flex;
  align-items: center;
  height: 160px;
}
.hert-text-with-polygon-container .hert-polygon {
  height: 200px;
  width: 140%;
  position: absolute;
  z-index: -1;
  top: -40px;
  left: -20%;
}
.hert-text-with-polygon-container h4 {
  font-weight: 700;
  font-size: 2.6em !important;
  text-wrap: nowrap;
}
.hert-polygon {
  height: 200px;
  width: 140%;
  position: absolute;
  z-index: -1;
  top: -40px;
  left: -20%;
  background-color: var(--clr-highlight-2);
}
div#hert-polygon-client-logos {
  clip-path: polygon(28% 0, 84% 33%, 83% 100%, 10% 100%);
}
div#hert-polygon-get-in-touch {
  clip-path: polygon(20% 28%, 76% 0%, 81% 100%, 20% 100%);
  right: 5px;
}
.hert-polygon.highlight {
  clip-path: polygon(0% 0, 96% 0%, 83% 93%, 0% 70%);
  background-color: var(--clr-highlight);
  top: 0;
}
.hert-polygon.highlight-2 {
  clip-path: polygon(8% 0, 84% 33%, 83% 100%, 10% 100%);
  background-color: var(--clr-highlight-2);
  top: -40px;
}
.hert-text-with-polygon.highlight p {
  color: var(--clr-white) !important;
  font-size: 1.4rem;
}
/*
#################
MAX WIDTH 980px
#################
*/
@media only screen and (max-width: 980px) {
  .hert-text-with-polygon-container {
    margin: -40px auto 0 auto;
    left: 0;
  }
  .hert-polygon {
    right: unset;
    margin: 0 auto;
    top: -70px;
  }
}
/*
#################
MAX WIDTH 980px
#################
*/
@media only screen and (max-width: 980px) {
  .hert-text-with-polygon-container {
    max-width: 245px;
  }
}