@sunrise-upc/sales-static-components 3.7.8 → 3.7.9

package/dist/esm/components/StageTeaserComponent/DoubleGrid/DoubleGridComponent.css

@@ -0,0 +1,1030 @@
+.stageTeaserMain {
+  height: 100%;
+}
+video {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.video-wrapper {
+  overflow: hidden;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+.stageTeaserContainer {
+  margin-left: 8px;
+  margin-right: 8px;
+  border-radius: 8px;
+  flex-direction: row;
+  width: calc(100% - 10px);
+  height: 100%;
+}
+
+.row-wrapper {
+  height: 100%;
+}
+.stageTeaserMain {
+  &.full-width {   
+    .stageTeaserContainer {
+      margin: 0;
+      width: 100%;
+      border-radius: 0;
+    }    
+  }
+}
+.stageTeaserRightWrapper {
+  position: relative;
+}
+.stageTeaserTopText {
+  margin-bottom: 0px;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+}
+@media all and (max-width: 1023px) {
+  .stageTeaserTopText {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .stageTeaserTopText {
+    font-size: 16px;
+    line-height: 20px;
+  }
+}
+.stageTeaserMainTexth1,
+h2,
+h3,
+h4 {
+  padding-top: 4px;
+  padding-bottom: 8px;
+  font-weight: 700;
+  margin-bottom: 0px !important;
+}
+
+@media (min-width:1440px) {
+  .stageTeaserMainTexth1 {
+    font-size: 32px;
+    line-height: 40px;
+  }
+
+  .stageTeaserMainTexth2 {
+    font-size: 28px;
+    line-height: 36px;
+  }
+
+  .stageTeaserMainTexth3 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .stageTeaserMainTexth4 {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+@media (min-width:320px)and (max-width:1439px) {
+  .stageTeaserMainTexth1 {
+    font-size: 28px;
+    line-height: 36px;
+  }
+
+  .stageTeaserMainTexth2 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .stageTeaserMainTexth3 {
+    font-size: 20px;
+    line-height: 28px;
+  }
+
+  .stageTeaserMainTexth4 {
+    font-size: 18px;
+    line-height: 24px;
+  }
+}
+.stageTeaserMainTextdisplay {
+  font-size: 48px;
+  line-height: 60px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.stageTeaserBottomText {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+.stageTeaserSecondaryPromoText {
+  overflow-wrap: anywhere;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+}
+
+.stageTeaserSecondaryPromoPercent {
+  font-size: 34px;
+  line-height: 38px;
+  font-weight: 700;
+}
+
+.stageTeaserPromoText {
+  font-size: 18px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+.stageTeaserLeftWrapperBackground {
+  background: var(--primary-colour-pale-dawn-grey-200, #e6e3df);
+}
+
+.stageTeaserBannerWrapper .react-multi-carousel-list {
+  position: initial;
+}
+
+.stageTeaserBannerWrapper .react-multiple-carousel__arrow {
+  background: #ffffff;
+  box-shadow: 0px 4px 12px rgba(87, 84, 82, 0.2);
+  border-radius: 24px;
+  font-size: 16px;
+  height: 44px;
+  width: 44px;
+  padding: 10px;
+  z-index: 1;
+}
+
+.stageTeaserBannerWrapper .react-multiple-carousel__arrow::before {
+  color: #da291c;
+  font-size: 16px;
+}
+
+.stageTeaserBannerWrapper .react-multiple-carousel__arrow:disabled::before {
+  color: #b3aeaa;
+}
+
+.stageTeaserBannerWrapper .react-multiple-carousel__arrow--right {
+  right: 3%;
+}
+
+.stageTeaserBannerWrapper .react-multiple-carousel__arrow--left {
+  left: 3%;
+}
+/* dots */
+.stageTeaserBannerWrapper .react-multi-carousel-dot button {
+  background: #ffffff;
+  opacity: 0.3;
+  border: 0px;
+  transition: none;
+}
+.stageTeaserBannerWrapper .react-multi-carousel-dot--active button {
+  background: #da291c;
+  opacity: 1;
+}
+
+.stageTeaserBannerWrapper .react-multi-carousel-dot button:hover:active {
+  background: #da291c;
+}
+@media all and (max-width: 1439px) {
+  .stageTeaserMainTextdisplay {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 500;
+    padding-top: 4px;
+    padding-bottom: 8px;
+    margin-bottom: 0px;
+  }
+}
+@media (max-width: 768px) {
+  .stageTeaserContainer, .row-wrapper {
+    flex-direction: column;
+  }
+    .stageTeaserPromoPercent {
+    font-weight: 700;
+  }
+  .stageTeaserPromoText {
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 500;
+  }
+}
+
+.stageTeaserBannerWrapper .react-multiple-carousel__arrow--right{
+  right: -2% !important;
+}
+
+.stageTeaserBannerWrapper .react-multiple-carousel__arrow--left {
+  left: -1% !important;
+}
+
+.stageTeaserBannerWrapper.full-width .react-multiple-carousel__arrow--right{
+  right: 20px !important;
+  @media only screen and (min-width : 1440px) {
+    left: calc(50% + 720px) !important;
+  }
+}
+
+.stageTeaserBannerWrapper.full-width .react-multiple-carousel__arrow--left {
+  left: 20px !important;
+  @media only screen and (min-width : 1440px) {
+    left: calc(50% - 720px) !important;
+  }
+
+}
+
+
+.teaserTimer {
+  padding-top: 16px;
+  padding-bottom: 10px;
+}
+ .stageTeaserLeftWrapper {
+  height: fit-content;
+  margin: auto 0;
+ }
+
+/*Tablet md & All small devices*/
+@media only screen and (max-width : 768px) {
+  video {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+
+  .stageTeaserRightWrapper {
+    height: 400px;
+  }
+
+  .stageTeaserLeftWrapper {
+    padding: 24px;
+    text-align: center;
+  }
+
+  .stageTeaserSecondaryPromoPercent {
+    font-size:28px;
+  }
+}
+
+
+/*Tablet - lg*/
+@media only screen and (min-width : 769px) and (max-width : 1024px) {
+  .stageTeaserRightWrapper {
+    width: 100%;
+  }
+
+
+  .stageTeaserLeftWrapper {
+
+    padding: 55px;
+  }
+}
+@media (width : 1024px) {
+  .stageTeaserRightWrapper {
+    width: 50%;
+  }
+}
+/*Desktop, Laptop & Large Desktops*/
+@media only screen and (min-width : 1025px) {
+  .stageTeaserLeftWrapper {
+
+    padding: 120px 80px 120px 68px;
+    &.slim-version {
+      padding: 70px 80px 70px 68px;
+    }
+
+  }
+}
+
+
+#inboxCount{
+  position: absolute;
+  top: 0;
+  right:0;
+}
+.stageTeaserPromoBubble {
+  display: flex;
+  text-align: center;
+  padding: 0px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.stageTeaserPrimaryPromoBubble {
+  width: 160px;
+  height: 160px;
+  background: var(--primary-colour-ice-white, #ffffff);
+  z-index: 1;
+}
+
+.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {
+  background: var(--primary-colour-ice-white, #ffffff);
+  z-index: 1;
+}
+
+.stageTeaserSecondaryPromoBubble {
+  width: 120px;
+  height: 120px;
+  top: 171px;
+  color: #ffffff;
+  background: var(--primary-colour-grey-dusk-grey-600, #3d3935);
+}
+
+.stageTeaserPromoPercent,
+.stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {
+  font-size: 52px;
+  line-height: 52px;
+  font-weight: 700;
+}
+
+/*Tablet md & All small devices*/
+@media only screen and (max-width: 768px) {
+    /* primary bubble size*/
+    .stageTeaserPrimaryPromoBubble {
+    width: 120px;
+    height: 120px;
+  }
+  
+  .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoText {
+    font-size: 18px;
+    line-height: 20px;
+    font-weight: 500;
+  }
+  .stageTeaserPromoPercent,
+  .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {
+    font-size: 24px;
+    line-height: 32px;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoText {
+    font-size: 10px;
+    line-height: 14px;
+  }
+  /* primary with secondary size*/
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {
+    width: 96px;
+    height: 96px;
+  }
+
+  /* secondary bubble size*/
+  .stageTeaserSecondaryPromoBubble {
+    width: 84px;
+    height: 84px;
+  }
+
+  .stageTeaserSecondaryPromoPercent {
+    font-size: 21px;
+    line-height: 24px;
+  }
+
+  .stageTeaserSecondaryPromoText {
+    font-size: 12px;
+    line-height: 12px;
+  }
+}
+
+/*Tablet - lg*/
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+  /* primary with secondary size*/
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPrimaryPromoBubble {
+    width: 120px;
+    height: 120px;
+  }
+  .stageTeaserPromoPercent,
+  .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {
+    font-size: 42px;
+  }
+  .stageTeaserSecondaryPromoBubble {
+    width: 96px;
+    height: 96px;
+  }
+  .stageTeaserSecondaryPromoPercent{
+    font-size: 26px;
+  }
+}
+
+/*Extra Large Screens*/
+@media only screen and (min-width: 2000px) {
+  .stageTeaserPromoPercent,
+  .stageTeaserPrimaryWithSecondaryBubble .stageTeaserPromoPercent {
+    font-size: 42px;
+  }
+  .stageTeaserSecondaryPromoBubble {
+    width: 96px;
+    height: 96px;
+  }
+  .stageTeaserSecondaryPromoPercent{
+    font-size: 26px;
+  }
+}
+/* primary bubble */
+.stageTeaserPromoBubble.stageTeaserBottomRight {
+  right: 40px;
+}
+.stageTeaserPromoBubble.stageTeaserBottomRight {
+  bottom: 40px;
+}
+
+/* primary with secondary */
+.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {
+  right: 86px;
+  left: initial;
+}
+.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {
+  bottom: 131px;
+}
+/* secondary bubble */
+.stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {
+  right: 40px;
+  left: initial;
+}
+.stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {
+  bottom: 40px;
+  top: initial;
+}
+
+/*Very small devices - phones*/
+@media screen and (max-width : 652px) {
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {
+    right: 46px;
+    left: initial;
+    bottom: 48px;
+    top: initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {
+    right: 6px;
+    left: initial;
+    bottom: 102px;
+  }
+}
+
+/*All small devices - phones*/
+@media screen and (min-width : 652px) and (max-width : 768px) {
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {
+    right: 192px;
+    left: initial;
+    bottom: 48px;
+    top: initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {
+    right: 128px;
+    left: initial;
+    bottom: 102px;
+  }
+}
+
+/*Tablet - md*/
+@media only screen and (min-width : 769px) and (max-width : 990px) {
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {
+    right: 48px;
+    left: initial;
+    bottom: 128px;
+  }
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {
+    right: 22px;
+    left: initial;
+    bottom: 60px;
+    top: initial;
+  }
+}
+
+/*Tablet - lg*/
+@media only screen and (min-width : 990px) and (max-width : 1024px) {
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomRight {
+    right: 48px;
+    left: initial;
+    bottom: 128px;
+  }
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserBottomRight {
+    right: 22px;
+    left: initial;
+    bottom: 60px;
+    top: initial;
+  }
+}
+
+/*Desktop, Laptop & Large Desktops*/
+@media only screen and (min-width : 1025px) {
+}
+
+/*Extra Large Screens*/
+@media only screen and (min-width : 2000px) {
+}
+/* primary bubble */
+.stageTeaserPromoBubble.stageTeaserBottomLeft {
+    left: 40px;
+  }
+  .stageTeaserPromoBubble.stageTeaserBottomLeft {
+    bottom: 40px;
+  }
+  
+  /* primary with secondary */
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {
+    left: 86px;
+    right:  initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {
+    bottom: 131px;
+  }
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {
+    left: 40px;
+    right:  initial;
+  }
+  .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {
+    bottom: 40px;
+    top: initial;
+  }
+  
+  
+  /*All small devices - phones*/
+  @media screen and (max-width : 768px) {
+    /* secondary bubble */
+    .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {
+      left: 58px;
+      right:  initial;
+      bottom: 48px;
+      top: initial;
+    }
+    .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {
+      left: 8px;
+      right:  initial;
+      bottom: 102px;
+    }
+  }
+  
+  /*Tablet - md*/
+  @media only screen and (min-width : 769px) and (max-width : 990px) {
+    .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {
+      left: 48px;
+      right:  initial;
+      bottom: 128px;
+    }
+    /* secondary bubble */
+    .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {
+      left: 22px;
+      right:  initial;
+      bottom: 60px;
+      top: initial;
+    }
+  }
+  
+  /*Tablet - lg*/
+  @media only screen and (min-width : 990px) and (max-width : 1024px) {
+    .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserBottomLeft {
+      left: 48px;
+      right:  initial;
+      bottom: 128px;
+    }
+    /* secondary bubble */
+    .stageTeaserSecondaryPromoBubble.stageTeaserBottomLeft {
+      left: 22px;
+      right:  initial;
+      bottom: 60px;
+      top: initial;
+    }
+  }
+  
+  /*Desktop, Laptop & Large Desktops*/
+  @media only screen and (min-width : 1025px) {
+  }
+  
+  /*Extra Large Screens*/
+  @media only screen and (min-width : 2000px) {
+  }
+/* primary bubble */
+.stageTeaserPromoBubble.stageTeaserTopLeft {
+  left: 40px;
+}
+.stageTeaserPromoBubble.stageTeaserTopLeft {
+  top: 40px;
+}
+
+@media screen and (max-width : 568px) {
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {
+    left: 38px;
+    right:  initial;
+    top: 68px;
+    bottom: initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {
+    left: 2px;
+    right:  initial;
+    top: -12px;
+  }
+}
+
+@media screen and (min-width : 568px) and (max-width : 768px) {
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {
+    left: 112px;
+    right:  initial;
+    top: 68px;
+    bottom: initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {
+    left: 61px;
+    right:  initial;
+    top: -12px;
+  }
+}
+
+@media screen and (width : 768px) {
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {
+    left: 132px;
+    right:  initial;
+    top: 84px;
+    bottom: initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {
+    left: 61px;
+    right:  initial;
+    top: -12px;
+  }
+}
+
+
+/*All small devices - phones*/
+
+/*Tablet - md*/
+@media only screen and (min-width : 769px) and (max-width : 990px) {
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {
+    left: 0px;
+    right:  initial;
+    top: 18px;
+  }
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {
+    left: -33px;
+    right:  initial;
+    top: 111px;
+    bottom: initial;
+  }
+}
+
+/*Tablet - lg*/
+@media only screen and (min-width : 990px) and (max-width : 1024px) {
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {
+    left: 22px;
+    right:  initial;
+    top: 22px;
+  }
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {
+    left: -22px;
+    right:  initial;
+    top: 108px;
+    bottom: initial;
+  }
+}
+
+/*Desktop, Laptop & Large Desktops*/
+@media only screen and (min-width : 1025px) and (max-width : 2000px) {
+  /* primary with secondary */
+.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {
+  left: 72px;
+  right:  initial;
+  top: 12px;
+}
+/* secondary bubble */
+.stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {
+  left: 20px;
+  right:  initial;
+  top: 126px;
+  bottom: initial;
+}
+}
+
+/*Extra Large Screens*/
+@media only screen and (min-width : 2000px) {
+  
+/* primary with secondary */
+.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopLeft {
+  left: 0px;
+  right:  initial;
+  top: 12px;
+}
+/* secondary bubble */
+.stageTeaserSecondaryPromoBubble.stageTeaserTopLeft {
+  left: -62px;
+  right:  initial;
+  top: 41px;
+  bottom: initial;
+}
+
+
+}
+/* primary bubble */
+.stageTeaserPromoBubble.stageTeaserTopRight {
+  right: 40px;
+}
+.stageTeaserPromoBubble.stageTeaserTopRight {
+  top: 40px;
+}
+
+@media screen and (max-width : 568px) {
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {
+    right: 38px;
+    left:  initial;
+    top: 68px;
+    bottom: initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {
+    right: 2px;
+    left:  initial;
+    top: -12px;
+  }
+}
+
+@media screen and (min-width : 568px) and (max-width : 768px) {
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {
+    right: 112px;
+    left:  initial;
+    top: 68px;
+    bottom: initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {
+    right: 61px;
+    left:  initial;
+    top: -12px;
+  }
+}
+
+@media screen and (width : 768px) {
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {
+    right: 132px;
+    left:  initial;
+    top: 84px;
+    bottom: initial;
+  }
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {
+    right: 61px;
+    left:  initial;
+    top: -12px;
+  }
+}
+
+
+/*All small devices - phones*/
+
+/*Tablet - md*/
+@media only screen and (min-width : 769px) and (max-width : 990px) {
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {
+    right: 72px;
+    left:  initial;
+    top: 18px;
+  }
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {
+    right: 24px;
+    left:  initial;
+    top: 111px;
+    bottom: initial;
+  }
+}
+
+/*Tablet - lg*/
+@media only screen and (min-width : 990px) and (max-width : 1024px) {
+  .stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {
+    right: 78px;
+    left:  initial;
+    top: 22px;
+  }
+  /* secondary bubble */
+  .stageTeaserSecondaryPromoBubble.stageTeaserTopRight {
+    right: 26px;
+    left:  initial;
+    top: 108px;
+    bottom: initial;
+  }
+}
+
+/*Desktop, Laptop & Large Desktops*/
+@media only screen and (min-width : 1025px) and (max-width : 2000px) {
+  /* primary with secondary */
+.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {
+  right: 72px;
+  left:  initial;
+  top: 12px;
+}
+/* secondary bubble */
+.stageTeaserSecondaryPromoBubble.stageTeaserTopRight {
+  right: 20px;
+  left:  initial;
+  top: 126px;
+  bottom: initial;
+}
+}
+
+/*Extra Large Screens*/
+@media only screen and (min-width : 2000px) {
+  
+/* primary with secondary */
+.stageTeaserPrimaryWithSecondaryBubble.stageTeaserPromoBubble.stageTeaserTopRight {
+  right: 0px;
+  left:  initial;
+  top: 12px;
+}
+/* secondary bubble */
+.stageTeaserSecondaryPromoBubble.stageTeaserTopRight {
+  right: 44px;
+  left:  initial;
+  top: 322px;
+  bottom: initial;
+}
+
+
+}
+.falcon-grey-600 {
+  color: #3d3935;
+}
+
+.falcon-grey-500 {
+  color: #5f5955;
+}
+.falcon-grey-400 {
+  color: #86807c;
+}
+
+.falcon-grey-100 {
+  color: #f7f6f5;
+}
+
+.falcon-ice-white {
+  color: #ffffff;
+}
+.falcon-background-grey-100 {
+  background-color: #f7f6f5;
+}
+.falcon-background-ice-white {
+  background-color: #ffffff;
+}
+.falcon-background-transparent {
+  background-color: transparent;
+}
+
+.falcon-gradient-rubyglow-diagonal {
+  border-radius: 8px;
+  background: linear-gradient(93.71deg, #e2271e -0.37%, #ef7c3c 100%);
+}
+.falcon-gradient-rubyglow-vertical {
+  border-radius: 8px;
+  background: linear-gradient(180deg, #e2271e 0%, #ef7c3c 100%);
+}
+.falcon-gradient-rubyglow-v2-diagonal {
+  border-radius: 8px;
+  background: linear-gradient(93.71deg, #D91219 -0.37%, #F19202 100%);
+}
+.falcon-gradient-rubyglow-v2-vertical {
+  border-radius: 8px;
+  background: linear-gradient(180deg, #DB0F16 0%, #F39200 100%);
+}
+.falcon-gradient-pinksky-diagonal {
+  background: linear-gradient(98.52deg, #d093a6 -0.35%, #e7c9bc 100.35%);
+  border-radius: 8px;
+}
+.falcon-gradient-pinksky-vertical {
+  background: linear-gradient(180deg, #d093a6 0%, #e7c9bc 100%);
+  border-radius: 8px;
+}
+.falcon-gradient-bluehaze-diagonal {
+  background: linear-gradient(98.52deg, #7899bd -0.35%, #b8d0e3 100.35%);
+  border-radius: 8px;
+}
+.falcon-gradient-bluehaze-vertical {
+  background: linear-gradient(180deg, #7899bd 0%, #b8d0e3 100%);
+  border-radius: 8px;
+}
+.falcon-gradient-greencloud-diagonal {
+  background: linear-gradient(99.06deg, #8d989b -0.35%, #f8edd2 105.52%);
+  border-radius: 8px;
+}
+.falcon-gradient-greencloud-vertical {
+  background: linear-gradient(180deg, #8d989b 0%, #f8edd2 100%);
+  border-radius: 8px;
+}
+.falcon-gradient-peachfog-diagonal {
+  background: linear-gradient(98.52deg, #9c8a95 -0.35%, #f6d6b3 100.35%);
+  border-radius: 8px;
+}
+.falcon-gradient-peachfog-vertical {
+  background: linear-gradient(180deg, #9c8a95 0%, #f6d6b3 100%);
+  border-radius: 8px;
+}
+.falcon-gradient-orange-diagonal {
+  background: linear-gradient(105deg, #EF7C3C 0%, #E2271E 100%);
+  border-radius: 4px 0;
+}
+.falcon-gradient-dark-blue-haze{
+  background: linear-gradient(239deg, #4F87C1 52.95%, rgba(94, 148, 207, 0) 111%);
+  border-radius: 4px 0;
+}
+
+.falcon-def-transparancy {
+  background: rgba(0, 0, 0, 1);
+}
+/* center a block element */
+/* use this to any of the pseudo elements as these are the mandatory properties */
+/* setting styles in separate formats for cross browser support */
+/* specify the max width for an element and apply ellipses and truncate the overflow */
+/* vertically center alilgn any HTML element */
+/* add basePath to assets  */
+.DoubleGridRedefined-module__double-grid-teaser-section___00-ih {
+  padding: 140px 80px 140px 68px;
+}
+
+.DoubleGridRedefined-module__double-grid-teaser-top-text___Ifb0r {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+}
+
+.DoubleGridRedefined-module__double-grid-main-text___CUOi1, .DoubleGridRedefined-module__double-grid-teaser-main-text-h4___UbSpA, .DoubleGridRedefined-module__double-grid-teaser-main-text-h3___yyb57, .DoubleGridRedefined-module__double-grid-teaser-main-text-h2___T2tmJ, .DoubleGridRedefined-module__double-grid-teaser-main-text-h1___PHZjG {
+  padding-top: 4px;
+  padding-bottom: 8px;
+  font-weight: 700;
+  margin-bottom: 0px !important;
+}
+
+.DoubleGridRedefined-module__double-grid-teaser-main-text-h1___PHZjG {
+  font-size: 32px;
+  line-height: 40px;
+}
+
+.DoubleGridRedefined-module__double-grid-teaser-main-text-h2___T2tmJ {
+  font-size: 28px;
+  line-height: 36px;
+}
+
+.DoubleGridRedefined-module__double-grid-teaser-main-text-h3___yyb57 {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.DoubleGridRedefined-module__double-grid-teaser-main-text-h4___UbSpA {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.DoubleGridRedefined-module__double-grid-teaser-main-text-display___XrrBz {
+  font-size: 48px;
+  line-height: 60px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.DoubleGridRedefined-module__double-grid-teaser-bottom-text___Z-fhk {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.DoubleGridRedefined-module__double-grid-teaser-btn-section___Q1jBm {
+  display: inline-flex;
+  padding-top: 22px;
+}
+@media (max-width: 1439px) {
+  .DoubleGridRedefined-module__double-grid-teaser-btn-section___Q1jBm {
+    display: inline-flex;
+    flex-direction: column;
+    padding-bottom: 8px;
+  }
+}
+@media (max-width: 767px) {
+  .DoubleGridRedefined-module__double-grid-teaser-btn-section___Q1jBm {
+    padding-top: 6px;
+  }
+}
+
+.DoubleGridRedefined-module__double-grid-btns___0Sbnd {
+  padding-right: 16px;
+}
+@media (max-width: 1439px) {
+  .DoubleGridRedefined-module__double-grid-btns___0Sbnd {
+    padding-bottom: 8px;
+    padding-right: 0px;
+  }
+}
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .DoubleGridRedefined-module__double-grid-btns___0Sbnd {
+    padding-bottom: 16px;
+    padding-right: 0px;
+  }
+}
+.DoubleGridRedefined-module__double-grid-btns___0Sbnd a {
+  text-decoration: none;
+}