/*
 Theme Name:  Divi Child Theme
 Theme URI:    https://padcreative.co.uk
 Description:  Pad Creative Child Theme for Divi
 Author:       Mark Williams
 Author URI:   https://padcreative.co.uk
 Template:     Divi
 Version:      1.0.0
*/

/*****Add any custom CSS below this line*****/

/*FONTS*/
@font-face {
  font-family: "d-dindin-bold";
  src: url("font/d-din-bold-webfont.woff2") format("woff2"),
    url("font/d-din-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "d-dindin-italic";
  src: url("font/d-din-italic-webfont.woff2") format("woff2"),
    url("font/d-din-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "d-dinregular";
  src: url("font/d-din-webfont.woff2") format("woff2"),
    url("font/d-din-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "d-din_condenseddinCnBd";
  src: url("font/d-dincondensed-bold-webfont.woff2") format("woff2"),
    url("font/d-dincondensed-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "d-din_condensedregular";
  src: url("font/d-dincondensed-webfont.woff2") format("woff2"),
    url("font/d-dincondensed-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "d-din_expdinexp-bold";
  src: url("font/d-dinexp-bold-webfont.woff2") format("woff2"),
    url("font/d-dinexp-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "d-din_expdinexp-italic";
  src: url("font/d-dinexp-italic-webfont.woff2") format("woff2"),
    url("font/d-dinexp-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "d-din_expregular";
  src: url("font/d-dinexp-webfont.woff2") format("woff2"),
    url("font/d-dinexp-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body,
div,
p,
span,
h4,
h5,
td {
  font-family: "d-dinregular", "Montserrat", Helvetica, Arial, Lucida,
    sans-serif;
}
b,
strong,
h1,
h2,
h3 {
  font-family: "d-dindin-bold", "Montserrat", Helvetica, Arial, Lucida,
    sans-serif;
}
em,
i {
  font-family: "d-dindin-italic", "Montserrat", Helvetica, Arial, Lucida,
    sans-serif;
}

/*Carousel - uses Divi Gallery module*/
.pad-carousel {
  overflow: hidden;
}
.pad-carousel .et_pb_module {
  /* 	overflow: hidden; */
  animation: scroll 60s linear infinite;
  width: max-content;
}
.pad-carousel .et_pb_module:hover {
  animation-play-state: paused;
}
.pad-carousel .et_pb_module .et_pb_gallery_items {
  /* 	animation: scroll 10s linear infinite; */
  white-space: nowrap;
  overflow: visible;
  width: max-content;
}
.pad-carousel .et_pb_module .et_pb_gallery_items .et_pb_gallery_item {
  display: inline-block !important;
  /* min-width: 200px; */
  width: 20vw;
  text-align: center;
  /* width: max-content; */
  margin: 0;
  padding: 0;
  padding-right: 6vw;
  float: none;
  clear: none;
}
.pad-carousel .et_pb_module .et_pb_gallery_items .et_pb_gallery_item img,
.pad-noCarousel .et_pb_module .et_pb_gallery_items .et_pb_gallery_item img {
  /* 	object-fit: contain; */
  max-height: 10vw;
  max-width: 100%;
  width: auto;
  margin: 0;
  padding: 0;
}
.pad-noCarousel .et_pb_module .et_pb_gallery_items {
  display: flex;
  flex-wrap: wrap;
}
.pad-noCarousel .et_pb_module .et_pb_gallery_items .et_pb_gallery_item {
  flex-grow: 1;
}
.pad-noCarousel .et_pb_module .et_pb_gallery_items .et_pb_gallery_item img {
  object-fit: contain;
  max-height: 10vw;
}

@keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Pad Gold Button */
.pad-button-gold-right-arrow {
  background-color: #998151 !important;
  clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.27);
  max-width: 210px;
  font-family: "d-dindin-bold";
}
.pad-button-gold-right-arrow:hover {
  clip-path: polygon(0% 0%, 90% 0, 100% 50%, 87% 115%, 0% 100%);
}
.pad-button-gold-right-arrow.pad-overlay-link {
  /* JS trigger */
}

.pad-button-gold-right-arrow-wide {
  background-color: #998151 !important;
  clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.27);
  max-width: none;
  font-family: "d-dindin-bold";
}

.pad-button-gold-left-arrow {
  background-color: #998151 !important;
  clip-path: polygon(100% 0%, 10% 0, 0% 50%, 10% 100%, 100% 100%);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.27);
  max-width: 210px;
  font-family: "d-dindin-bold";
}
.pad-button-gold-left-arrow:hover {
  clip-path: polygon(100% 0%, 10% 0, 0% 50%, 10% 100%, 100% 100%);
}
.pad-button-gold-right-arrow.pad-overlay-link {
  /* JS trigger */
}

/* Pad Blue Button */
.pad-button-blue-right-arrow {
  background-color: #0c2340 !important;
  clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.27);
  max-width: 210px;
  font-family: "d-dindin-bold";
}
.pad-button-blue-right-arrow:hover {
  clip-path: polygon(0% 0%, 90% 0, 100% 50%, 87% 115%, 0% 100%);
}
.pad-button-blue-right-arrow.pad-overlay-link {
  /* JS trigger */
}

/* Pad White Button */
.pad-button-white-right-arrow {
  background-color: #fff !important;
  clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.27);
  max-width: 210px;
  font-family: "d-dindin-bold";
}
.pad-button-white-right-arrow:hover {
  clip-path: polygon(0% 0%, 90% 0, 100% 50%, 87% 115%, 0% 100%);
  background-color: #fff !important;
}
.pad-button-white-right-arrow.pad-overlay-link {
  /* JS trigger */
}

/* Pad Overlay */
#main-content.pad-noverlay .print-view {
  display: none;
}
#main-content.pad-noverlay .pad-overlay-credit {
  text-align: center;
  padding: 20px 0;
}
#main-content.pad-overlay,
#main-content.pad-overlay * {
  background-color: transparent !important;
  color: #fff;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
  font-size: clamp(18.5px, 1.9vw, 28px);
  line-height: 1.5;
}
#main-content.pad-overlay h1,
#main-content.pad-overlay h2,
#main-content.pad-overlay h3,
#main-content.pad-overlay h4 {
  font-size: clamp(36px, 5.8vw, 72px);
  line-height: 1;
  font-weight: 700;
}
#main-content.pad-overlay h2 {
  font-size: clamp(30px, 4.8vw, 48px);
}
#main-content.pad-overlay h3 {
  font-size: clamp(24px, 3.8vw, 46px);
}
#main-content.pad-overlay h4 {
  font-size: clamp(20px, 2.8vw, 38px);
}
#main-content.pad-overlay .print-view {
  text-align: right;
}
#main-content.pad-overlay .print-view a {
  text-transform: uppercase;
  font-size: 16px;
  line-height: 18px;
}
#main-content.pad-overlay .pad-overlay-credit {
  display: none;
}
#pad-overlay-print-view-icon {
  height: 22px;
  width: 42px;
}
/* #main-content.pad-overlay .print-view a:before {
    content: '';
    font-family: eleganticons;
} */
#main-content.pad-overlay {
  padding-bottom: 100px;
}
#main-content.pad-overlay .wp-block-image .aligncenter > figcaption,
#main-content.pad-overlay .wp-block-image .alignleft > figcaption,
#main-content.pad-overlay .wp-block-image .alignright > figcaption,
#main-content.pad-overlay .wp-block-image.is-resized > figcaption {
  text-align: center;
  font-size: 16px;
}
#main-content.pad-overlay .has-drop-cap:not(:focus):first-letter {
  font-size: 6.4em;
}
p:not(.has-background):last-of-type {
  padding-bottom: 30px;
}
#main-content.pad-overlay a {
  text-decoration: underline;
}
#pad-overlay {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 100vw;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.72);
  padding: clamp(20px, 5%, 100px);
  text-align: center;
  cursor: zoom-out;
  transition: all 1.1s cubic-bezier(0.31, 0.07, 0.6, 1.53);
}
#pad-overlay.in-view {
  left: 0;
}
#pad-overlay-close {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 70px;
  height: 48px;
  font-size: 32px;
  line-height: 48px;
  text-align: center;
  color: #fff;
  font-family: Arial;
}
#pad-overlay iframe {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 90%;
  margin: 0 auto;
  max-width: 1367px;
  height: 90vh;
}
@media screen and (max-width: 500px) {
  #pad-overlay {
    padding: 24px 0 4px;
  }
  #pad-overlay iframe {
    width: 100%;
  }
  #main-content.pad-overlay .print-view {
    display: none;
  }
}

/* Fancy scrollbars... */
/* The emerging W3C standard that is currently Firefox-only */
*,
iframe {
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 200, 200, 0.5) transparent;
}

/* Works on Chrome/Edge/Safari */
::-webkit-scrollbar,
iframe::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track,
iframe::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb,
iframe::-webkit-scrollbar-thumb {
  background-color: rgba(200, 200, 200, 0.5);
}

/* Accordion close icon */
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
  display: block !important;
  /* content: "\e04f" !important; */
  content: "\4d" !important;
}

/* JLC Timeline */
.timeline {
  clear: both;
  padding-bottom: 100px;
  /* overflow-x: hidden; */
}

.timeline * {
  text-align: center;
  box-sizing: border-box;
}

.timeline ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline ul li {
  margin: 0 auto;
  padding-bottom: 3rem;
  position: relative;
  background-color: #0c2340;
  width: 5px;
}

.timeline ul li h4 {
  font-size: 27px;
  position: absolute;
  padding: 0;
  top: 0;
  /* calc(3rem - 11px); */
  left: -52px;
  width: 110px;
  height: 110px;
  border: 4px solid #0c2340;
  border-radius: 50%;
  line-height: 104px;
  text-align: center;
  color: #fff;
  z-index: 10;
  transform: rotate3d(0, 1, 0, 90deg);
  transition: transform 1s linear;
}
.timeline ul li h4.inView {
  transform: rotate3d(0, 1, 0, 0deg);
}

.timeline ul li:before {
  content: "";
  background-color: #0c2340;
  display: block;
  width: 94px;
  height: 94px;
  border: 6px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  /* calc(3rem - 9px); */
  left: -50px;
}

.timeline ul li.milestone:before {
  background-color: #84754e;
}

.timeline ul li:after {
  content: "";
  display: block;
  height: 4px;
  width: calc(10vw - 55px);
  background-color: #0c2340;
  position: absolute;
  top: 55px;
  /* calc(3rem + 45px); */
  left: 55px;
  z-index: 0;
}
.timeline ul li.end:before {
  background-color: #84754e;
  animation: spin 3s linear 0s infinite;
}
.timeline ul li.end:after {
  display: none;
}

.timeline ul li div {
  text-align: left;
  min-height: 100px;
  padding: 26px;
  transform: translate3d(10vw, 10px, 0) perspective(50em)
    rotate3d(0, 1, 0, 90deg);
  transform-origin: left center;
  width: 400px;
  /* font-size: clamp(16px, 1.2vw, 28px); */
  background-color: #0c2340;
  color: #fff;
  border-bottom: 4px solid #fff;
  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.22);
  z-index: 10;
  transition: transform 1s cubic-bezier(0.83, 0.39, 0.49, 2.27);
}
.timeline ul li div a:link,
.timeline ul li div a:visited {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
}
.timeline ul li div a:hover {
  /* text-decoration: dotted; */
  border-bottom-style: dotted;
}
.timeline ul li div.inView {
  transform: translate3d(10vw, 10px, 0) perspective(50em)
    rotate3d(0, 1, 0, 0deg);
}

.timeline ul li div.milestone {
  background-color: #84754e;
  position: relative;
  padding-left: 100px;
}
.timeline ul li div.milestone:before {
  content: "";
  display: block;
  background: url(images/milestone.svg) #fff;
  background-position: center;
  background-size: 84% auto;
  background-repeat: no-repeat;
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.timeline ul li:nth-child(even) div {
  /* left: 2vw; */
  transform: translate3d(calc(-400px - 10vw), 10px, 0) perspective(50em)
    rotate3d(0, 1, 0, -90deg);
  transform-origin: right center;
}

.timeline ul li:nth-child(even) div.inView {
  transform: translate3d(calc(-400px - 10vw), 10px, 0) perspective(50em)
    rotate3d(0, 1, 0, 0deg);
}

.timeline ul li:nth-child(even):after {
  left: -10vw;
}

@keyframes spin {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 359deg);
  }
}

/* Timeline Alt animations */
.timeline-v2 {
}
.timeline-v2 ul li h4 {
  opacity: 0;
  transform: unset;
  transition: opacity 1s ease-in-out;
}
.timeline-v2 ul li h4.inView {
  opacity: 1;
  transform: unset;
}
.timeline-v2 ul li div {
  opacity: 0;
  transform: translate3d(8vw, 10px, 0);
  transition: all 1s ease-in-out;
}
.timeline-v2 ul li div.inView {
  opacity: 1;
  transform: translate3d(10vw, 10px, 0);
}
.timeline-v2 ul li:nth-child(even) div {
  transform: translate3d(calc(-400px - 8vw), 10px, 0);
}
.timeline-v2 ul li:nth-child(even) div.inView {
  transform: translate3d(calc(-400px - 10vw), 10px, 0);
}
.timeline-v2 ul li.end:before {
  animation: spin 10s linear 0s infinite;
}

@media screen and (max-width: 900px) {
  .timeline ul li {
    padding-bottom: 40px;
  }
  .timeline ul li div {
    width: 40vw;
    line-height: 1.3;
    font-size: 16px;
    font-size: clamp(16px, 4vw, 26px);
    padding: 4vw;
  }
  .timeline ul li div.milestone {
    padding-left: 11vw;
  }
  .timeline ul li div {
    transform: translate3d(8vw, 79px, 0);
  }
  .timeline ul li div.inView {
    transform: translate3d(10vw, 79px, 0);
  }
  .timeline-v2 ul li:nth-child(even) div {
    transform: translate3d(calc(-40vw - 8vw), 79px, 0);
  }
  .timeline-v2 ul li:nth-child(even) div.inView {
    transform: translate3d(calc(-40vw - 10vw), 79px, 0);
  }
}