@sunrise-upc/sales-static-components 3.8.1 → 3.8.3

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

@@ -1,940 +1,940 @@
-.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);
+.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 */