h1 {
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  text-transform: uppercase;
} 
h2{
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}
h3{
font-family: var(--dxp-g-root-font-family, Roboto);
font-style: normal;
font-weight: 600;
line-height: 140%;
}
h4 {
font-size: 18px;
letter-spacing: 0.54px;
line-height: 20px;
min-height: 41.2px;
}
.large-subtitle{
font-family: var(--dxp-g-root-font-family, Roboto);
font-style: normal;
font-weight: 600;
line-height: 110%;
}
.subtitle{
font-family: var(--dxp-g-root-font-family, Roboto);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 16px;
letter-spacing: 0.48px;
}
.link{
font-family: var(--dxp-g-root-font-family, Roboto);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 100% */
letter-spacing: 0.48px;
}
.contentText{
font-family: var(--dxp-g-root-font-family, Roboto);
font-style: normal;
font-weight: 400;
line-height: 140%;
}
.buttonText{
font-family: var(--dxp-g-root-font-family, Roboto);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 14px; /* 100% */
letter-spacing: 0.42px;
}
@media only screen and (min-width: 768px) { 
h1 {
font-size: 40px;
letter-spacing: 1.2px;
min-height: 44px;
}	
h2 {
font-size: 32px;
letter-spacing: 0.96px;
min-height: 60.8px;
}	
h3 {
  font-size: 24px;
  letter-spacing: 0.72px;
  line-height: 24px;
  min-height: 49.6px;
}
.large-subtitle{
  font-size: 32px;
  letter-spacing: 0.96px;
  min-height: 51.2px;
}	
.contentText{
  font-size: 18px;
  letter-spacing: 0.54px;
}	
}

@media only screen and (max-width: 767px) { 
h1 {
    font-size: 22px;
    letter-spacing: 0.66px;
    min-height: 24.2px;
}      
h2 {
  font-size: 20px;
  letter-spacing: 0.6px;
  min-height: 44px;
}   
h3 {
  font-size: 18px;
  letter-spacing: 0.54px;
  line-height: 20px;
  min-height: 41.2px;
}
h4 {
  font-size: 18px;
  letter-spacing: 0.54px;
  line-height: 20px;
  min-height: 41.2px;
}
.large-subtitle{
  font-size: 20px;
  letter-spacing: 0.6px;
  min-height: 38px;
}	
.contentText{
  font-size: 16px;
  letter-spacing: 0.48px;
}		
}

.wbText{
color: var(--dxp-g-root-contrast-1, #2F4858);
}
.wbLink{
color: var(--dxp-g-root-contrast, #0E4E95);
transition-duration: 0.3s;
}
.wbLink:hover{
color: var(--dxp-g-root-contrast-2, #06183A);
transition-duration: 0.3s;
}
.wbForm{
color: var(--dxp-g-root-contrast, #0E4E95);
}

.bbText{
color: var(--dxp-g-root-contrast-4, #F2F2F2);
}
.bbLink{
color: var(--dxp-g-root-contrast, #0E4E95);
transition-duration: 0.3s;
}
.bbLink:hover{
color: var(--dxp-g-root-contrast-2, #06183A);
transition-duration: 0.3s;
}
.bbForm{
color: var(--dxp-g-root-contrast-2, #06183A);
}

.rbText{
color: var(--dxp-g-root-contrast-6, #FFF);
}
.rbLink{
color: var(--dxp-g-root-contrast-6, #FFF);
transition-duration: 0.3s;
}
.rbLink:hover{
color: var(--dxp-g-root-contrast-7, #000);
transition-duration: 0.3s;
}
.rbForm{
color: var(--dxp-g-root-contrast-6, #FFF);
}

.gbText{
color: var(--dxp-g-root-contrast-6, #FFF);
}
.gbText a {
color: var(--dxp-g-root-contrast, #0E4E95);
transition-duration: 0.3s;
}
.gbText:hover a {
color: var(--dxp-g-root-contrast-8, #1D4289);
transition-duration: 0.3s;
}
.gbLink{
color: var(--dxp-g-root-contrast, #0E4E95);
transition-duration: 0.3s;
}
.gbLink:hover{
color: var(--dxp-g-root-contrast-8, #1D4289);
transition-duration: 0.3s;
}
.gbForm{
color: var(--dxp-g-root-contrast-6, #FFF);
}

.vbText{
color: var(--dxp-g-root-contrast-6, #FFF);
}
.vbLink{
color: var(--dxp-g-root-contrast-2, #06183A);
transition-duration: 0.3s;
}
.vbLink:hover{
color: var(--dxp-g-root-contrast, #0E4E95);
transition-duration: 0.3s;
}
.vbForm{
color: var(--dxp-g-root-contrast-6, #FFF);
}

.white{
background: var(--dxp-g-root, #FFFFFF);
}
.black{
background: transparent;
}
.red{
background: var(--dxp-g-root-2, #06183A);
}
.green{
background: var(--dxp-g-root-3, #219CDC);
}
.purple{
background: var(--dxp-g-root-4, #1D4289); 
}
.black-background{
  background: #000000; 
}
.blue-background{
  background: var(--dxp-g-brand-2, #0E4E95 );/* SGB Blue */
}
.lightblue-background{
  background: var(--dxp-g-brand-3,  #219CDC );/* SGB Light Blue */
}
.orange-background{
  background: var(--dxp-g-brand-1, #E5531A ); /* SGB Orange */
}
.green-background{
  background: var(--dxp-g-brand, #67B9B0); /* SGB Green*/
}


/** Positioning **/

.component-margin{
margin-left: 4vw;
margin-right: 4vw;
}
.component-margin-half{
margin-left: 2vw;
margin-right: 2vw;
}
.component-margin-left{
margin-left: 4vw;
}
.component-margin-right{
margin-right: 4vw;
}
.component-margin-left-plus{
margin-left: 4vw;
margin-right: 2vw;
}
.component-margin-right-plus{
margin-right: 4vw;
margin-left: 2vw;
}


  /** Sub-Components **/

  .cardLine{
    position: static;
    height: 2px;
    background: var(--dxp-g-brand, #E70A48);
    }
  .benefitLine {
      position: static;
      width: 100%;
      height: 2px;
      background: var(--dxp-g-brand, #E70A48);
        }
  .text-gradient{
          background: var(--text-gradient);
      }
  .button-full-textsize{
        max-width: fit-content;
        width: -moz-fit-content;
        height: 48px;
        }
  .button-full{
        display: flex;
        max-width: fit-content;
        transition-duration: 0.3s;
        cursor: pointer;
      }
  @media only screen and (min-width: 768px) {
    .cardLine{
    width: 34.52px;
    }
  }
  @media only screen and (max-width: 767px) {
    .cardLine {
          width: 24px;
          }
          }

  /** Old Styles **/

  .gradientBox { 
    position: relative;
    box-sizing:content-box; 
    float: center;
    display: flex;
    flex-direction: column;
    justify-content: cespace-between;
    align-items: flex-start;
 }

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

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

  .img-gradient:after {
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    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;
  }


.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;
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;
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;
  }        }

  .greensection {    
    background-color: var(--dxp-g-brand, #67B9B0);
  }
  .lightbluesection {    
    background-color: var(--dxp-g-brand-3, #219CDC);
  }
  

  .background-image {    
      border-radius: 40px;
  }
  .background-image-overlay{    
      border-radius: 40px;
  }