.pdd_hero{
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
  
  display: flex;
  align-items: center;
}
.pdd_hero.no-padding{
  padding-bottom: 0; 
}
.pdd_hero.full-height{
  min-height: calc(100vh - 76px);
}
.pdd_hero>.video-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pdd_hero>.video-bg video{
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: perspective(1px) translate(-50%, -50%);
}

.pdd_hero>.content-wrapper{
  width: 100%;
  display: grid;
  align-items: center;
  grid-gap: 56px;
  z-index: 1;
  grid-template-columns: repeat(2, 50fr);
}
.pdd_hero>.content-wrapper.no-image{
  grid-template-columns: 100%; 
}

{# Left Content #}
.pdd_hero>.content-wrapper.left>.image-col{order: 2;}
.pdd_hero>.content-wrapper.left>.content-col{order: 1;}

{# Right Content #}
.pdd_hero>.content-wrapper.right>.image-col{order: 1;}
.pdd_hero>.content-wrapper.right>.content-col{order: 2;}


.pdd_hero>.content-wrapper>.image-col{
  font-size: 0;
}
.pdd_hero>.content-wrapper.left>.image-col,
.pdd_hero>.content-wrapper.right>.image-col{
  width: 100%;
/*   position: absolute;
  top: 0; */
/*   height: 100%; */
}
.pdd_hero>.content-wrapper.left>.image-col{
  right: 0;
}
.pdd_hero>.content-wrapper.right>.image-col{
  left: 0;
}
.pdd_hero>.content-wrapper.left>.image-col>img,
.pdd_hero>.content-wrapper.right>.image-col>img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.pdd_hero>.content-wrapper.left>.image-col>img{
  object-position: center left;
}
.pdd_hero>.content-wrapper.right>.image-col>img{
  object-position: center right;
}

.pdd_hero>.content-wrapper.left>.content-col,
.pdd_hero>.content-wrapper.right>.content-col{
  padding: 100px 0;
}

.pdd_hero>.content-wrapper>.content-col>.inner{
  /*max-width: 600px;*/
}
.pdd_hero>.content-wrapper>.content-col>.inner .tag{
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
}
.pdd_hero>.content-wrapper>.content-col>.inner .title{
  position: relative;
  margin-bottom: 40px;
  line-height: 1;
  
  font-size: 60px;
}
.pdd_hero>.content-wrapper>.content-col>.inner>.eyebrow-text{
  font-size: 18px;
  line-height: 25px;
  font-weight: bold;
  margin-bottom: 15px;
}

.pdd_hero>.content-wrapper.center{
  flex-direction: column-reverse;
  align-items: center;
}
.pdd_hero>.content-wrapper.center>.image-col{
  width: 100%;
  margin-top: 48px;
  text-align: center;
}
.pdd_hero>.content-wrapper.center>.content-col{width: 100%;}
.pdd_hero>.content-wrapper.center>.content-col>.inner{
  max-width: 1120px; 
  text-align: center;
  margin: 0 auto;
}

.pdd_hero.light-text>.content-wrapper>.content-col h1,
.pdd_hero.light-text>.content-wrapper>.content-col h2,
.pdd_hero.light-text>.content-wrapper>.content-col h3,
.pdd_hero.light-text>.content-wrapper>.content-col h4,
.pdd_hero.light-text>.content-wrapper>.content-col h5{
  font-family: Sentinel, sans-serif;
  font-weight: 300;
  letter-spacing: -.03em;
  color: #FFF; 
}

.pdd_hero>.content-wrapper>.content-col .content p,
.pdd_hero>.content-wrapper>.content-col .content a,
.pdd_hero>.content-wrapper>.content-col .content li{
  line-height: 1.46;
  letter-spacing: normal;
  
}

.pdd_hero>.content-wrapper>.content-col .content form{
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}
.pdd_hero>.content-wrapper>.content-col .content form input{
  margin: 0;
  height: 50px;
}
.pdd_hero>.content-wrapper>.content-col .content form button{
  padding: 0;
  height: 50px;
  border: 0;
}

.pdd_hero>.content-wrapper>.content-col .content *:last-child{
  margin-bottom: 0; 
}

.pdd_hero>.content-wrapper>.content-col .cta{
  margin-top: 40px;
}

.pdd_hero>.content-wrapper>.content-col .cta .cta_button.scroll{
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  text-align: left;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #98A2B3;
  padding: 30px 75px 30px 30px;
  
  background: #FFFFFF;
  box-shadow: 20px 25px 60px rgba(61, 75, 102, 0.1);
  border-radius: 10px;
  position: relative;
  min-width: 375px;
  max-width: 100%;
}
.pdd_hero>.content-wrapper>.content-col .cta .cta_button.scroll:after{
  content: '';
  position: absolute;
  width: 25px;
  height: 100%;
  top: 0;
  right: 30px;
  background-image: url('data:image/svg+xml;utf8,<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 19.7917V5.20841" stroke="%23CED8E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.70833 12.5H20.2917" stroke="%23CED8E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Color Schema */
.pdd_hero.light-text>.content-wrapper>.content-col .tag,
.pdd_hero.light-text>.content-wrapper>.content-col .title,
.pdd_hero.light-text>.content-wrapper>.content-col .content p,
.pdd_hero.light-text>.content-wrapper>.content-col .content li{
  color: #FFF;
}

.pdd_hero.light-text>.content-wrapper>.content-col .content a{
  color: #FFF;
  font-weight: 500;
}

.pdd_hero>.content-wrapper>.content-col .cta .hs_cos_wrapper_type_cta:not(:last-child){
  margin-right: 16px; 
}

/* Breakpoints */
@media(max-width: 1023px){
  .pdd_hero.full-height {
    min-height: 100vh;
  }
}
@media(max-width: 767px){
  .pdd_hero{
    min-height: inherit;
  }
  .pdd_hero>.video-bg{
    display: none; 
  }
  .pdd_hero>.content-wrapper{
    grid-template-columns: 100%;
  }
  .pdd_hero>.content-wrapper>.image-col{order: 2 !important;}
  .pdd_hero>.content-wrapper>.content-col{order: 1 !important;}
  
  .pdd_hero>.content-wrapper>.content-col>.inner .title{
    font-size: 48px; 
  }
}
@media only screen and (orientation: landscape) and (max-width: 1023px){
  .pdd_hero{
    background-position: bottom center;
  }
  .pdd_hero>.content-wrapper>.content-col{
    position: relative !important;
    bottom: initial !important;
  }
}


.pdd_hero lottie-player{
  width: 420px;
  height: 420px;
  margin-left:auto;
}
@media(max-width: 1023px){
  .pdd_hero lottie-player{
    width: 100%; 
    height: 420px;
  }
}