/** Custom Headlines **/
  @media only screen and (max-width: 767px) { .titleContentPage {
    color: var(--dxp-g-root-contrast-7, #414141);
    text-transform: uppercase;
    font-size: 20px;
    line-height: 140%;
    font-weight: 400;
    font-style: normal;
    display: flex;
    align-items: flex-end;
  }      }
  @media only screen and (min-width: 768px) { .titleContentPage {
    color: var(--dxp-g-root-contrast, #06183A);
    font-size: 40px;
    line-height: 44px;
    font-weight: 400;
    font-style: normal;
    display: flex;
    align-items: flex-end;
   }	}

  @media only screen and (max-width: 767px) { .orangeHeading {
    color: var(--dxp-g-root-contrast-3, #E5531A);
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    font-style: normal;	
  }      }
  @media only screen and (min-width: 768px) { .orangeHeading {
    color: var(--dxp-g-root-contrast-3, #E5531A);
    font-size: 32px;
    line-height: 56px;
    font-weight: 300;
    font-style: normal;	
   }	}

   @media only screen and (max-width: 767px) { .sgGradientHeading {
    background: linear-gradient(90.54deg, #67B9B0 0.26%, #219CDC 13.46%, #1D4289 53.6%, #CE1431 76.69%, #E5531A 105.83%);
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
    font-style: normal;	
    letter-spacing: 0.03em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }      }
  @media only screen and (min-width: 768px) { .sgGradientHeading {
    background: linear-gradient(90.54deg, #67B9B0 0.26%, #219CDC 13.46%, #1D4289 53.6%, #CE1431 76.69%, #E5531A 105.83%);
    font-size: 28px;
    line-height: 33.6px;
    font-weight: 400;
    font-style: normal;	
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
   }	}
   .gradientBox { 
    position: relative;
    box-sizing:content-box; 
    float: center;
    display: flex;
    flex-direction: column;
    justify-content: cespace-between;
    align-items: flex-start;
 }

 @media only screen and (max-width: 767px) { .titleLargeCard {
  color: var(--dxp-g-root-contrast-9, #000000);
  text-transform: uppercase;
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
}      }
@media only screen and (min-width: 768px) { .titleLargeCard {
  color: var(--dxp-g-root-contrast, #06183A);
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
 }	}

 @media only screen and (max-width: 767px) { .titleSmallCard {
  color: var(--dxp-g-root-contrast-9, #000000);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
}      }
@media only screen and (min-width: 768px) { .titleSmallCard {
  color: var(--dxp-g-root-contrast, #06183A);
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
 }	}

 .featureHeading {
  color: var(--dxp-g-root-contrast-8, #1D4289);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  font-style: normal;	
}      

@media only screen and (max-width: 767px) { .relatedTitle {
  color: var(--dxp-g-root-contrast-8, #1D4289);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-style: normal;	
  text-transform: uppercase;
}      }
@media only screen and (min-width: 768px) { .relatedTitle {
  color: var(--dxp-g-root-contrast, #06183A);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-style: normal;	
  text-transform: uppercase;
 }	}

 @media only screen and (max-width: 767px) { .titleCarousel {
  color: var(--dxp-g-root-contrast, #06183A);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  text-align: center;
  text-transform: uppercase;
}      }
@media only screen and (min-width: 768px) { .titleCarousel {
  color: var(--dxp-g-root-contrast, #06183A);
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  font-style: normal;	
  text-align: center;
  text-transform: uppercase;
 }	}

 @media only screen and (max-width: 767px) { .subtitleHero {
  color: var(--dxp-g-root-contrast-7, #414141);
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.846154px;
  text-transform: uppercase;
}      }
@media only screen and (min-width: 768px) { .subtitleHero {
  color: var(--dxp-g-root-contrast, #06183A);
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.846154px;
  text-transform: uppercase;
 }	}

 @media only screen and (max-width: 767px) { .titleHeroApplicationCard {
  color: var(--dxp-g-root-contrast-8, #1D4289);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}      }
@media only screen and (min-width: 768px) { .titleHeroApplicationCard {
  color: var(--dxp-g-root-contrast-5,#0E4E95 );
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
 }	}

  /** Custom Text **/

  @media only screen and (max-width: 767px) { .contentText {
    color: var(--dxp-g-root-contrast-1, #132C51);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
  }      }
  @media only screen and (min-width: 768px) { .contentText  {
    color: var(--dxp-g-root-contrast-1, #132C51);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
   }	}

  @media only screen and (max-width: 767px) { .boltCardText {
    color: var(--dxp-g-root-contrast-1, #132C51);
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
  }      }
  @media only screen and (min-width: 768px) { .boltCardText  {
    color: var(--dxp-g-root-contrast, #06183A);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.04em;
   }	}

   @media only screen and (max-width: 767px) { .carouselText {
    color: var(--dxp-g-root-contrast-1, #132C51);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
  }      }
  @media only screen and (min-width: 768px) { .carouselText  {
    color: var(--dxp-g-root-contrast-1, #132C51);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
   }	}

   @media only screen and (max-width: 767px) { .cardTextSmall {
    color: var(--dxp-g-root-contrast, #06183A);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }      }
  @media only screen and (min-width: 768px) { .cardTextSmall  {
    color: var(--dxp-g-root-contrast-9, #000000);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
   }	}

   @media only screen and (max-width: 767px) { .phraseText {
    color: var(--dxp-g-root-contrast-5, #0E4E95);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
  }      }
  @media only screen and (min-width: 768px) { .phraseText  {
    color: var(--dxp-g-root-contrast-5, #0E4E95);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
   }	}

   @media only screen and (max-width: 767px) { .usedInCarousel {
    color: var(--dxp-g-root-contrast-1, #132C51);
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.846154px;
    text-transform: uppercase;
  }      }
  @media only screen and (min-width: 768px) { .usedInCarousel {
    color: var(--dxp-g-root-contrast-1, #132C51);
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.846154px;
    text-transform: uppercase;
   }	}

     /** Link Text **/
    .cardLink  {
      color: var(--dxp-g-root-contrast-5,#0E4E95);
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.04em;
     }	
     .cardLink:hover {
      color:  var(--dxp-g-root-contrast-6, #219CDC);
      }

   .cardLinktext{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0.03em;
    color: var(--dxp-g-root-contrast-4,#FFFFFF);
}
.cardLinktext:hover {
  color:  var(--dxp-g-root-contrast-3, #E5531A);
  }

  @media only screen and (max-width: 767px) { .relatedLink {
    color: var(--dxp-g-root-contrast-6,#219CDC);
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.75px;
    text-transform: uppercase;
  }      }
  @media only screen and (min-width: 768px) { .relatedLink {
    color: var(--dxp-g-root-contrast-6,#219CDC);
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.75px;
    text-transform: uppercase
   }	}
   .relatedLink:hover {
    color: var(--dxp-g-root-contrast-5,#0E4E95);
    }

    @media only screen and (max-width: 767px) { .sectionLink {
      color: var(--dxp-g-root-contrast-7,#414141);
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }      }
    @media only screen and (min-width: 768px) { .sectionLink {
      color: var(--dxp-g-root-contrast-7,#414141);
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 16px;
      letter-spacing: 0.1em;
      text-transform: uppercase
     }	}
     .sectionLink:hover {
      color: var(--dxp-g-root-contrast-6,#219CDC);
      }

  @media only screen and (max-width: 767px) { .footerHeading {
    color: var(--dxp-g-root-contrast-10,#F1F3F7);
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
  }      }
  @media only screen and (min-width: 768px) { .footerHeading  {
    color: var(--dxp-g-root-contrast-10,#F1F3F7);
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
   }	}
   .footerHeading:hover {
    color:  var(--dxp-g-root-contrast-3, #E5531A);
    }

  @media only screen and (max-width: 767px) { .footerText {
    color: var(--dxp-g-root-contrast-4,#FFFFFF);
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
  }      }
  @media only screen and (min-width: 768px) { .footerText  {
    color: var(--dxp-g-root-contrast-4,#FFFFFF);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
   }	}
.footerText:hover {
  color:  var(--dxp-g-root-contrast-3, #E5531A);
  }

  @media only screen and (max-width: 767px) { .carouselTextLink {
    color: var(--dxp-g-root-contrast-6, #219CDC);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
  }      }
  @media only screen and (min-width: 768px) { .carouselTextLink  {
    color: var(--dxp-g-root-contrast-6, #219CDC);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
   }	}
   .carouselTextLink:hover {
    color: var(--dxp-g-root-contrast-5,#0E4E95);
    }

  @media only screen and (max-width: 767px) { .linkHero {
      color: var(--dxp-g-root-contrast-3, #E5531A);
      font-style: normal;
      font-weight: 400;
      font-size: 13px;
      line-height: 16px;
    }      }
  @media only screen and (min-width: 768px) { .linkHero  {
      color: var(--dxp-g-root-contrast-3, #E5531A);
      font-style: normal;
      font-weight: 400;
      font-size: 13px;
      line-height: 16px;
     }	}
  .linkHero:hover {
    color:  var(--dxp-g-root-contrast-6,#219CDC);
    }

    /** Sub-Components **/

.img{
      border: 1px solid var(--dxp-g-root-1, #E8E8E8);
      box-sizing: border-box;
      border-radius: 4px;
    }

.img-gradient{
      position:relative;
      display:inline-block;
      display: relative;
      min-width: 100%;
      max-height: 100%;
    }

    .img-gradient:after {
      content:'';
      position:absolute;
      left:0; top:0;
      width:100%; height:100%;
      display:inline-block;
      background: linear-gradient(180deg, var(--dxp-g-root-9) 0%, var(--dxp-g-root-10) 100%);
      color: var(--dxp-g-root-9);
    }

    .img-gradient img{
      display:block;
    }

@media only screen and (max-width: 767px) {
.rectangle21 {
      position: static;
      width: 24px;
      height: 2px;
      background: var(--dxp-g-root-7);
      }
      }
@media only screen and (min-width: 768px) {
.rectangle21{
position: static;
width: 34.52px;
height: 2px;
background: var(--dxp-g-root-7);
}}

.button {
  background-color: var(--dxp-g-root-5,#0E4E95);
  transition-duration: 0.3s;
}
.button:hover {
  background-color: var(--dxp-g-root-contrast-3,#E5531A);
}

.buttontext {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  font-size: 13px;
  line-height: 16px;
  color: var(--dxp-g-root-contrast-4,#FFFFFF);
  fill: var(--dxp-g-root-contrast-4,#FFFFFF);;
  text-align: center;
}

.textarea{
  border-right: solid 2px var(--dxp-g-root-contrast-4,#FFFFFF);
  height: 48px;
  width: 123px;

}
.svgarea{
  height: 48px;
  width: 48px;
}

.buttontext {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  font-size: 13px;
  line-height: 16px;
  color: var(--dxp-g-root-contrast-4,#FFFFFF);
  fill: var(--dxp-g-root-contrast-4,#FFFFFF);;
}

.rainbowLine {
  position: static;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,rgba(229, 83, 26, 1) 0%,rgba(206, 20, 49, 1) 27.6%,rgba(29, 66, 137, 1) 48.52%,rgba(33, 156, 220, 1) 87.5%,rgba(103, 185, 176, 1) 100%);
    }

  .rainbowLineReverse {
    position: static;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,rgba(103, 185, 176, 1) 0%,rgba(33, 156, 220, 1) 13.5%,rgba(29, 66, 137, 1) 51.48%,rgba(206, 20, 49, 1) 62.46%,rgba(229, 83, 26, 1) 100%);
  }
  
@media only screen and (max-width: 1023px) {
  .videoframe{
    width: 60vw;
    height: 40vw;
  }        }
  @media only screen and (min-width: 1024px) {
    .videoframe{
      width: 30vw;
      height: 20vw;
    }        }