h1 {
    font-family: var(--dxp-g-root-font-family, Roboto);
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
} 
h2{
    font-family: var(--dxp-g-root-font-family, Roboto);
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
}
h3{
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
}
.font1 {
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
} 
.font2{
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
}
.font3{
font-family: var(--dxp-g-root-font-family, Roboto);
font-style: normal;
font-weight: 700;
line-height: 110%;
}
.font4 {
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
.font5 {
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
.font6 {
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
}
.large-subtitle{
  font-family: var(--dxp-g-root-font-family, Roboto);
  font-style: normal;
  font-weight: 400;
  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: 700;
  line-height: 16px;
  letter-spacing: 0.48px;
}
@media only screen and (min-width: 768px) { 
  h1 {
  font-size: 40px;
  letter-spacing: 1.2px;
  }	
  h2 {
  font-size: 32px;
  letter-spacing: 0.96px;
  }	
  h3 {
    font-size: 24px;
    letter-spacing: 0.72px;
  }
  .font1 {
    font-size: 40px;
    letter-spacing: 1.2px;
    }
  .font2 {
    font-size: 32px;
    letter-spacing: 0.96px;
    }
  .font3 {
    font-size: 24px;
    letter-spacing: 0.72px;
    }
  .font4 {
    font-size: 48px;
    letter-spacing: 0.96px;
    }
  .font5 {
    font-size: 20px;
    }
  .font6 {
    font-size: 64px;
    letter-spacing: 0.96px;
    }
  .large-subtitle{
    font-size: 48px;
    letter-spacing: 0.96px;
  }	
  .contentText{
    font-size: 18px;
    letter-spacing: 0.54px;
  }	
}

@media only screen and (max-width: 767px) { 
  h1 {
      font-size: 22px;
      letter-spacing: 0.66px;
  }      
  h2 {
    font-size: 20px;
    letter-spacing: 0.6px;
  }   
  h3 {
    font-size: 18px;
    letter-spacing: 0.54px;
  }
  .font1 {
    font-size: 22px;
    letter-spacing: 0.66px;
    }
  .font2 {
    font-size: 20px;
    letter-spacing: 0.6px;
    }
  .font3 {
    font-size: 18px;
    letter-spacing: 0.54px;
    }
  .font4 {
    font-size: 26px;
    letter-spacing: 0.6px;
    }
  .font5 {
    font-size: 16px;
    }
  .font6 {
    font-size: 28px;
    letter-spacing: 0.96px;
    }
  .large-subtitle{
    font-size: 26px;
    letter-spacing: 0.6px;
  }	
  .contentText{
    font-size: 16px;
    letter-spacing: 0.48px;
  }		
}

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

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

.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, #E70A48);
  transition-duration: 0.3s;
}
.gbText:hover a {
  color: var(--dxp-g-root-contrast-8, #A94DC3);
  transition-duration: 0.3s;
}
.gbLink{
  color: var(--dxp-g-root-contrast, #E70A48);
  transition-duration: 0.3s;
}
.gbLink:hover{
  color: var(--dxp-g-root-contrast-8, #A94DC3);
  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, #008377);
  transition-duration: 0.3s;
}
.vbLink:hover{
  color: var(--dxp-g-root-contrast, #E70A48);
  transition-duration: 0.3s;
}
.vbForm{
  color: var(--dxp-g-root-contrast-6, #FFF);
}

.white{
  background: var(--dxp-g-root, #FFFFFF);
}
.black{
  background: var(--dxp-g-root-1, #000000);
}
.red{
  background: var(--dxp-g-root-2, #E70A48);
}
.green{
  background: var(--dxp-g-root-3, #008377);
}
.purple{
  background: var(--dxp-g-root-4, #A94DC3); 
}

 /** 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;
    }        }

    .redsection {    
    	background-color: var(--dxp-g-brand, #E70A48);
    }
    .greensection {    
    	background-color: var(--dxp-g-brand-1, #008377);
    }
    .purplesection {    
    	background-color: var(--dxp-g-brand-2, #A94DC3);
    }
    .whitesection {    
    	background-color: var(--dxp-g-brand-3, #FFFFFF);
    }
    .gradientsection {    
    	background-image: linear-gradient(90deg, var(--dxp-g-brand, #E70A48) 0%, var(--dxp-g-brand-4, #E10098) 50%, var(--dxp-g-brand-2, #A94DC3) 100%);
    }
    .gradient2section {    
    	background-image: linear-gradient(90deg, var(--dxp-g-brand-2, #A94DC3) 0%, var(--dxp-g-brand-4, #E10098) 50%, var(--dxp-g-brand, #E70A48) 100%);
    }
    .redgradientsection {    
    	background-image: linear-gradient(180deg, var(--dxp-g-brand-6, rgba(161, 54, 147, 0.7)) 50%, var(--dxp-g-brand-5, rgba(235, 35, 78, 0.7)) 100%);
    }