
/*==========================================================================================*/
/* ---------------------- start: styles for Story Horizontal Layout ----------------------  */
body.bodyHorizStory {
    overflow: hidden;
}

.color-light svg
, .color-light .ShareOverlay ul li svg>g>g 
, .color-light .ShareOverlay ul li svg>g>g rect
, .color-light .ShareOverlay ul li svg>g>g path
, .color-light .ShareOverlay ul li svg>g>g circle 
{
    stroke: #ffffff;
}
.color-light .ShareOverlay {
    color: #ffffff;
}
.color-light .ShareOverlay ul li:before {
    content: '';
    position: absolute;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    border: 1px solid #ffffff
}
/* .bodyHorizStory .swiper-slide {
    overflow:hidden;
} */

/* configure scrollbar */        
        .bodyHorizStory .swiper-slide *::-webkit-scrollbar {
            width: 0.5em;
        }
        .bodyHorizStory .swiper-slide *::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        }
        .bodyHorizStory .swiper-slide *::-webkit-scrollbar-thumb {
            background-color: rgba(1,1,1,0.3);
            outline: 1px solid rgba(1,1,1,0.6);
        }
/* /configure scrollbar */

/* configure buttons */
    .bodyHorizStory [data-icon="social-share-light"]:after {
        opacity: 0.7;
    }

        .bodyHorizStory .MainNav .horizStoryButton {
            margin: 0;
            border: 0;
            width: 40px;
            height: 40px;
            will-change: opacity;
            transition: transform 350ms ease-out;
            background-color: transparent;
            border: 1px solid rgba(219, 226, 233, 0.5);
            border-radius: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        .bodyHorizStory .pswp__large .pswp__button {
            opacity: 1;
        }
        .bodyHorizStory .pswp__large .pswp__button::after
        ,.bodyHorizStory  .ShareButtons--button::after {
            opacity: 0.4;
        }

        .bodyHorizStory .pswp__large .pswp__button--arrow--right span.Icon{
            top:2px;
        }

        .bodyHorizStory .pswp__large .pswp__button--arrow--left span.Icon {
            top:2px;
        }


        .bodyHorizStory .MainNav .horizStoryButton::before {
            background:rgba(219, 226, 233, 0.4) !important;
            transform: rotate(-45deg) scale(0.7);
            transition: transform 450ms ease-out;
            display: block;
            height: 2px;
            width: 26px;
            margin-left: -13px;
            margin-top:0px;
            top: 50%;
            left: 50%;
            box-sizing: border-box;
            opacity: 1;
            border:0;
        }
        .bodyHorizStory .MainNav .horizStoryButton::after {
            background:rgba(219, 226, 233, 0.4) !important;
            transform: rotate(45deg) scale(0.7);
            transition: transform 450ms ease-out;
            display: block;
            height: 2px;
            width: 26px;
            margin-left: -13px;
            margin-top:0px;
            top: 50%;
            left: 50%;
            box-sizing: border-box;
            opacity: 1;
            border:0;
        }
        @media (max-width: 750px) {
            .bodyHorizStory .SiteHeader--backButton span {
                display:block;
            }
        }


        .bodyHorizStory .StoriesContainer .swiper-button-next span::after {
            background: url(../img/icons/global/1x/arrow-page-right-lignt.png) no-repeat 0px 0px !important;
            /* background-size: 10px 16px; */
            opacity:1;
            transform: scale(0.5);
        }
        .bodyHorizStory .StoriesContainer .swiper-button-prev span::after {
            background: url(../img/icons/global/1x/arrow-page-left-light.png) no-repeat 0px 0px !important;
            /* background-size: 10px 16px; */
            opacity:1;
            transform: scale(0.5);
        }

        /* ==========Make top Header "transparent" in order < and > links to work ===============*/
        .bodyHorizStory .SiteHeader--logo {
            width: 250px;
            height:80px;
            margin-left: auto;
            margin-right: auto;
        }

        .bodyHorizStory .SiteHeader--sticky {
            min-height:0px;
        }

        .bodyHorizStory .SiteHeader--navWrapper
        , .bodyHorizStory .SiteHeader 
        , .bodyHorizStory  .js-SiteHeader--background.SiteHeader--background 
        , .bodyHorizStory  .SiteHeader--sticky
        , .bodyHorizStory .SiteHeader--fullNav
        {
            height:0px;
        }
        .bodyHorizStory .SiteHeader--navWrapper {
            z-index:3;
        }
        
        /*========================================================================================*/


        .bodyHorizStory .swiperButtonsMainDiv {
            position: absolute;
            left: auto;
            top: 0;
            right: 60px;
            z-index: 702;
            background:none;
            margin-top: -5em;
            height: 80px;
            width:120px;
            display: flex;
            flex-direction:row;
            justify-content: flex-end;
        }
        @media (min-width: 1920px) {
            .bodyHorizStory .swiperButtonsMainDiv {
                right: calc((100vw - 1920px)/2 + 60px); 
            }
        }






        .bodyHorizStory .pswp__large.swiperButtonsMainDiv .pswp__button.pswp__button--arrow--left.swiper-button-next
        , .bodyHorizStory .pswp__large.swiperButtonsMainDiv .pswp__button.pswp__button--arrow--right.swiper-button-prev {
            position:relative;
            float:none;
            left:0;
            background:none;
            width:40px; 
            height:40px;
            background:none;
            top:0px;
            margin-right:20px;
            margin-bottom:0px;
            margin-top:-1px;
            margin-left:0px;
            align-self: center;
        }
        /* add gradient backgorund on top buttons to be better visible*/
        .bodyHorizStory .StoriesMediaTextGrid.fullwidth.hasImageOrVideo::after {
            background: linear-gradient(180deg, rgba(20,23,26,0.75) 130px, rgba(13,30,47,0) 300px);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;

            height: calc(100vh + 5em);
            margin-top: -5em;
            margin-bottom: 0;
        }


        /*hide prev and next buttons if screen is too small */
        @media (max-width: 550px) {
            .bodyHorizStory .swiperButtonsMainDiv {
                /* display:none; */
            }
        }
        /* move back and prev buttons down when screen is too small*/
        @media (max-width: 550px) {
            .StoriesContainer--progress, .StoriesContainer--progressbar {
                bottom: 50px;
            }
            .bodyHorizStory .pswp__large.swiperButtonsMainDiv   {
                top: unset;
                width: 100vw;
                right: 0;
                justify-content: space-between;
                height:50px;
                bottom:0;
                padding-left: 20px;
                padding-right:20px;
                margin-top: 0;
                margin-bottom: -4em;
            }
            .bodyHorizStory .pswp__large.swiperButtonsMainDiv  .pswp__button.pswp__button--arrow--right.swiper-button-prev 
            ,.bodyHorizStory .pswp__large.swiperButtonsMainDiv  .pswp__button.pswp__button--arrow--left.swiper-button-next {
                left: 0;
                right: auto;
                transform: scale(0.99);
                margin:0;
                
            }
            .bodyHorizStory .pswp__large.swiperButtonsMainDiv  .pswp__button.pswp__button--arrow--left.swiper-button-next {
                left: auto;
                right: 0;
            }
        }

/* /configure buttons */

/* fix share buttons overlay in big screens*/
@media (min-width: 1921px) {        
    .bodyHorizStory .ShareOverlay  {
        left: calc((100vw - 1920px)/(-2) );
    }
}



.bodyHorizStory .StoriesSpaceBetween {
    height: 25px;
}

.bodyHorizStory .slideType_first .StoriesSplashScreen--title
,.bodyHorizStory .StoriesParagraph--title
{
    line-height:1;
}

/* -- fix quote styles --- */        
.bodyHorizStory  .swiper-slide .StoriesQuote--content>p:first-child::before {
    transform: scale(-1, 1) rotate(180deg);
    width: 49px;
    float: left;
    margin-left:0px;
}
.bodyHorizStory .swiper-slide .StoriesQuote--content {
    /* color: rgba(255,255,255,0.75); */
    
    /* font-size: inherit;
    line-height:1.6;
    font-family: "Georgia","Times New Roman",serif; */

    font-family: "Open Sans","Helvetica Neue","Helvetica",sans-serif;
    font-size: 15px;
    line-height: 1.6;

}       
@media (max-width: 1000px) {
    .bodyHorizStory .swiper-slide .StoriesQuote--content {
        font-size:12px;
    }
}



/* -- fix quote styles --- */      
.bodyHorizStory .swiper-slide .StoriesMediaTextGrid {            
    position: absolute;
   
    min-width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    
    top: -5em;
    margin-top: 0em;
    margin-bottom: 0em;
    padding-top: 0;
    padding-bottom: 0;

    flex-direction: row;

}
.bodyHorizStory .swiper-slide .StoriesMediaTextGrid .slideContainer {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100vw;
    display:flex;
    flex-direction:column;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 1000;

    margin:0;
    padding:0;
    left:0px;   
    
    align-self: flex-start;

    position:static;
    top: 0em;
    margin-top:5em;
    height: calc(var(--vh, 1vh) * 100 - 9em);
    
}
.bodyHorizStory .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText {
    margin:0;
    padding:0;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    width:100%;
    z-index:2;

    max-height: calc(var(--vh, 1vh) * 100 - 11em);

}
@media (max-width: 1000px) {
    .bodyHorizStory .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText .EmbeddedMedia--iframe iframe {
        max-height: unset;
    }
}



.bodyHorizStory .StoriesContainer {
    bottom: 4em;
}


.bodyHorizStory .swiper-slide  .StoriesMediaTextGrid.fullwidth:before
{
    height: calc(100vh + 5em);
    margin-top: -5em;
    margin-bottom: 0;
}


/* fix card slider pagination dots position */
.bodyHorizStory .swiper-slide    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--cards {
    flex-direction: column;
}
.bodyHorizStory .swiper-slide    .StoriesMediaTextGrid .slideContainer .SlideText .Slider--pagination {
    position: relative;
}

/* remove card slider left&right buttons */
@media (min-width: 1281px) {
    .bodyHorizStory .swiper-slide    .StoriesMediaTextGrid .slideContainer .SlideText .CardSlider .CardSlider--button-prev
    ,.bodyHorizStory .swiper-slide    .StoriesMediaTextGrid .slideContainer .SlideText .CardSlider .CardSlider--button-next {
        display:none;
    }
}

/*--add formatting --*/
        .StoriesParagraph--Text h1 {
            font-size: 2em;   
            font-weight: bold;
        }   
        .StoriesParagraph--Text h2 {
            font-size: 1.5em; 
            font-weight: bold;  
        }   
        .StoriesParagraph--Text h3 {
            font-size: 1.17em; 
            font-weight: bold; 
        }   
        .StoriesParagraph--Text h4 {
            font-weight: bold;
        }   
        .StoriesParagraph--Text h5 {
            font-size: 0.83em; 
            font-weight: bold;
        }   
        .StoriesParagraph--Text h6 {
            font-size: 0.67em; 
            font-weight: bold;
        }   
        .StoriesParagraph--Text pre {
            display: block;
            font-family: monospace;
            white-space: pre;
            margin: 0.5em 0px;
            padding-left:5px;
            border-left: 3px solid rgba(255,255,255,0.3);
        }
        .StoriesParagraph--Text blockquote {
            display: block;
            padding: 2px 5px;
            background: rgba(255,255,255,0.1);
        }
       
          
        /* .StoriesParagraph--Text ol,.StoriesParagraph--Text ul,.StoriesParagraph--Text img,.StoriesParagraph--Text table,.StoriesParagraph--Text pre,.StoriesParagraph--Text code {
            margin-top: 0.5em;
            margin-bottom: 0.5em
        } */

        .StoriesParagraph--Text ol {
            counter-reset: ol--counter
        }

        .StoriesParagraph--Text ol>li {
            position: relative;
            padding-left: 2em;
            list-style-type: none;
            /* margin-bottom: 0.75em */
        }

        .StoriesParagraph--Text ol>li:last-of-type {
            margin-bottom: 0
        }

        .StoriesParagraph--Text ol>li:before {
            color: #fff
        }

        .StoriesParagraph--Text ol>li {
            position: relative
        }

        .StoriesParagraph--Text ol>li:before {
            position: absolute;
            left: 0;
            counter-increment: ol--counter;
            content: counter(ol--counter);
            font-weight: bold
        }

        .StoriesParagraph--Text ul:not(.CardSlider--list) {
            display: block
        }

        .StoriesParagraph--Text ul:not(.CardSlider--list)>li {
            position: relative;
            padding-left: 2em;
            list-style-type: none;
            /* margin-bottom: 0.75em */
        }

        .StoriesParagraph--Text ul:not(.CardSlider--list)>li:last-of-type {
            margin-bottom: 0
        }

        .StoriesParagraph--Text ul:not(.CardSlider--list)>li:before {
            color: #fff
        }

        .StoriesParagraph--Text ul:not(.CardSlider--list)>li:before {
            position: absolute;
            left: 5px;
            width: 4px;
            height: 4px;
            top: 1em;
            margin-top: -4px;
            content: '';
            border-radius: 100%;
            background-color: currentColor
        }

        .StoriesParagraph--Text small {
            font-size: 0.75em
        }

        .StoriesParagraph--Text img {
            display: block;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto
        }

        .StoriesParagraph--Text em {
            font-style: italic
        }

        .StoriesParagraph--Text strong {
            font-weight: bold
        }

        .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link) {
            border-bottom: 1px solid currentColor;
            color: inherit;
            overflow: hidden;
            position: relative;
            position: relative
        }

        .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            opacity: 0;
            -webkit-transition: opacity 200ms ease;
            transition: opacity 200ms ease;
            background-color: rgba(0,146,209,0.5)
        }

        .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link):hover {
            border-bottom: 0;
            color: #0092D1
        }

        .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link):hover::before {
            opacity: 1
        }

        .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="hinderlingvolkart.com"])::after,.StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="localhost"])::after,.StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="unops.org"])::after {
            content: '';
            display: inline-block;
            background: url("../img/icons/global/1x/new-window-light.png") no-repeat;
            width: 18px;
            height: 14px;
            margin-left: 8px;
            vertical-align: baseline
        }
        .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="hinderlingvolkart.com"]):hover::after,.StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="localhost"]):hover::after,.StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="unops.org"]):hover::after {
            background: url("../img/icons/global/1x/new-window.png") no-repeat;
        }


        /* add support for Authenia font */
        h1.H1Authenia,  h2.H2Authenia, h3.H3Authenia
        {
            font-family: Authenia, Georgia, "Times New Roman", serif;
            font-weight:900;
            line-height:1;
        }
        h3.StoriesParagraph--title.H3Authenia {
            font-size: 62px;
        }
        h3.Footnotes--title.H3Authenia {
            font-size: 16px;
        }


        h1.H1Authenia {
            font-size: 52px;
            letter-spacing: 2.5px;
        }
        h2.H2Authenia {
            font-size: 38px;
            letter-spacing: 2.0px;
        }
        h3.H3Authenia {
            font-size: 24px;
            letter-spacing: 1.5px;
        }

        


        /* -- change quotes visual --*/
        .bodyHorizStory .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(/assets/graphics/quote_en_horizStory.svg) no-repeat;
            transform: none;
            width: 50px;
            margin: -10px 0px 10px 0px;
        }
        .bodyHorizStory .color-strawberry .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(/assets/graphics/quote_Strawberry_en_horizStory.svg) no-repeat;
        }
        .bodyHorizStory .color-mint .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(/assets/graphics/quote_Mint_en_horizStory.svg) no-repeat;
        }
        .bodyHorizStory .color-dune .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(/assets/graphics/quote_Dune_en_horizStory.svg) no-repeat;
        }

        .bodyHorizStory.fr .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before,
        .bodyHorizStory.es .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(/assets/graphics/quote_es_fr_horizStory.svg) no-repeat;  
            width:70px;                 
        }
        .bodyHorizStory.fr .color-strawberry .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before,
        .bodyHorizStory.es .color-strawberry .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(/assets/graphics/quote_Strawberry_es_fr_horizStory.svg) no-repeat;  
     
        }
        .bodyHorizStory.fr .color-mint .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before,
        .bodyHorizStory.es .color-mint .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(/assets/graphics/quote_Mint_es_fr_horizStory.svg) no-repeat;  
     
        }
        .bodyHorizStory.fr .color-dune .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before,
        .bodyHorizStory.es .color-dune .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(/assets/graphics/quote_Dune_es_fr_horizStory.svg) no-repeat;  
     
        }
        
        
        /* -- /change quotes visual --*/

        
        
        /* --- CW-635 fix json video file not to be seen in other slides --- */
        .bodyHorizStory .StoriesContainer .swiper-slide:not(.swiper-slide-active) {
            overflow: hidden;
        }
       
        /* --- /CW-635 fix json video file not to be seen in other slides --- */
        

        /* --- add white theme to horiz story layout */
            .bodyHorizStory.theme-white [id="main-content"] {
                background: -webkit-gradient(linear, left top, left bottom, from(#dadada), to(#ebebeb));
                background: linear-gradient(180deg, #dadada 0%, #ebebeb 100%);
                color: #181A1C;

                
            }

            .bodyHorizStory.theme-white .StoriesQuote--content {
                color: #181A1C;
            }


            .bodyHorizStory.theme-white .StoriesMediaTextGrid.fullwidth:before {
                background: linear-gradient(45deg, rgba(231, 231, 231, 0.85) 30%, rgba(214, 214, 214, 0) 100%)
            }
            .bodyHorizStory.theme-white .StoriesMediaTextGrid.fullwidth.hasImageOrVideo::after {
                background: linear-gradient(180deg, rgba(226, 226, 226, 0.75) 130px, rgba(13,30,47,0) 300px);
            }    

            .bodyHorizStory.theme-white  .StoriesSplashScreen--scrollIndicator svg path,
            .bodyHorizStory.theme-white  .StoriesSplashScreen--scrollIndicator svg circle,
            .bodyHorizStory.theme-white  .StoriesSplashScreen--scrollIndicator svg polygon {
                stroke:#181A1C;
            }

            .bodyHorizStory.theme-white .SiteHeader--logo .SiteLogo svg g {
                fill: #181A1C !important;
            }

            .bodyHorizStory.theme-white .StoriesContainer .swiper-button-next span::after {
                background: url(../img/icons/global/1x/arrow-page-right-black.png) no-repeat 0px 0px !important;
                opacity:1;
            }
            .bodyHorizStory.theme-white .StoriesContainer .swiper-button-prev span::after {
                background: url(../img/icons/global/1x/arrow-page-left-black.png) no-repeat 0px 0px !important;
                opacity:1;
            }
            .bodyHorizStory.theme-white .pswp__large .pswp__button::after {
                border-color:#000000;
            }
            .bodyHorizStory.theme-white .pswp__large .pswp__button::before {
                background-color: rgba(5, 5, 5, 0.1);
            }
            .bodyHorizStory.theme-white [data-icon="social-share"]:after {
                background: url(../img/icons/global/1x/social-share-black.png) no-repeat 0px 0px !important;
                opacity: 0.8;
                
            }
            .bodyHorizStory.theme-white [data-icon="social-share-light"]:after {
                background: url(../img/icons/global/1x/social-share-black.png) no-repeat 0px 0px !important;
                opacity: 0.8;
                
            }
            .bodyHorizStory.theme-white .ShareButtons--button::before {
                background-color: rgba(5,5,5,0.1);
            }
            .bodyHorizStory.theme-white .ShareButtons--button::after {
                border-color:rgba(5, 5, 5, 0.8)
            }

            .bodyHorizStory.theme-white .MainNav .horizStoryButton::after,
            .bodyHorizStory.theme-white .MainNav .horizStoryButton::before {
                background: rgba(5, 5, 5, 0.7) !important;
            }
            .bodyHorizStory.theme-white .MainNav .horizStoryButton {
                border-color:rgba(5, 5, 5, 0.7)
            }
            .bodyHorizStory.theme-white .SiteHeader--backButton span:before {
                background-color: rgba(5,5,5,0.1);
            }

            .bodyHorizStory.theme-white .swiper-slide.slideType_articleText.slideAlign_center .StoriesMediaTextGrid.fullwidth.hasImageOrVideo:before {
                background: linear-gradient(45deg, rgba(231, 231, 231, 0.85) 30%, rgba(214, 214, 214, 0) 100%);
            }

            .bodyHorizStory.theme-white  .StoriesContainer--related--title {
                color: #000000;
            }
            .bodyHorizStory.theme-white .StoriesContainer--related--title:after {
                background: rgba(5, 5, 5, 0.6);
            }

            .bodyHorizStory.theme-white  .slideType_last  StoriesCard  .StoriesCard--inner {
                background: linear-gradient(45deg, rgba(231, 231, 231, 0.4) 30%, rgba(214, 214, 214, 0) 100%)
            }


            .bodyHorizStory.theme-white  .StoriesContainer--progress {
                background: rgba(5, 5, 5, 0.6);
            }
            .bodyHorizStory.theme-white  .StoriesContainer--progressbar {
                background: rgba(5, 5, 5, 1);
            }

        /* --- /add white theme to horiz story layout */


        .color-light .Card .Card--inner {
            background-color: #181C20;
        }
        .color-light .Card--text 
        ,.color-hasColorSchemaSet .Card--text 
        {
            color: #ffffff;
            opacity: 0.8;
        }

        
        .bodyHorizStory  .StoriesMediaTextGrid--cardContainer {
            width: 50%;
            max-width: 320px;
            margin-right: 40px
        }

        .bodyHorizStory  .StoriesMediaTextGrid--cardContainer:last-of-type {
            margin-right: 0
        }

        @media (max-width: 1000px) {
            .bodyHorizStory  .StoriesMediaTextGrid--cardContainer {
                margin-right:0;
                width: 100%;
                max-width: 250px;
                margin-bottom: 20px
            }

            .bodyHorizStory  .col-inverted-mobile .StoriesMediaTextGrid--cardContainer {
                margin-top: 40px;
                margin-bottom: 0
            }
        }



        .color-light .StoriesQuote--content {
            letter-spacing: 0
        }
        .color-light .StoriesQuote--content>p:first-child::before {
            height: 34px;
        }
/* -- /add formatting --*/


/* --- color schemas --- */
        /* ............................. */
        /* ............................. */
        /* ............................. */
        .bodyHorizStory .swiper-slide.slideType_first.color-oceanBlue .StoriesSplashScreen--title 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-oceanBlue .StoriesSplashScreen--legend 
        ,.bodyHorizStory .swiper-slide.color-oceanBlue  .StoriesParagraph--title 
        ,.bodyHorizStory .swiper-slide.color-oceanBlue  .Card--title
        ,.bodyHorizStory .swiper-slide.color-oceanBlue  .CardFact
        ,.bodyHorizStory .swiper-slide.color-oceanBlue  .StoriesCard--preTitle
        ,.bodyHorizStory .swiper-slide.color-oceanBlue  .StoriesCard--title
        ,.bodyHorizStory .swiper-slide.color-oceanBlue  .StoriesCard--content
        ,.bodyHorizStory .swiper-slide.color-oceanBlue  .CardHeaderQuote
        ,.bodyHorizStory .swiper-slide.color-oceanBlue .Footnotes--title 
        {
            color: #60c9e3;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-oceanBlue .ClockIcon
        ,.bodyHorizStory .swiper-slide.color-oceanBlue .Footnotes--title   {
            border-color: #60c9e3;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-oceanBlue  .ClockIcon .ClockIcon--minutes
        ,.bodyHorizStory .swiper-slide.slideType_first.color-oceanBlue  .ClockIcon .ClockIcon--hours {
            background-color: #60c9e3;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-oceanBlue .StoriesSplashScreen--scrollIndicator g 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-oceanBlue   .StoriesSplashScreen--scrollIndicator path
        ,.bodyHorizStory .swiper-slide.slideType_first.color-oceanBlue   .StoriesSplashScreen--scrollIndicator polygon {
            stroke: #60c9e3;
        }
        .bodyHorizStory .swiper-slide.color-oceanBlue .StoriesFullscreenVideo.background-pattern-smallGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-OceanBlue-small.png);
        }
        .bodyHorizStory .swiper-slide.color-oceanBlue .StoriesFullscreenVideo.background-pattern-largeGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-OceanBlue.png);
        }
        .bodyHorizStory .swiper-slide.color-oceanBlue .colorSchemaTheme {
            background-color:#60c9e3;
        }
        .bodyHorizStory .swiper-slide.color-oceanBlue .fullwidth.colorSchemaTheme::before
        ,.bodyHorizStory .swiper-slide.color-oceanBlue .fullwidth.colorSchemaTheme::after {
            background: none;
        }

        .bodyHorizStory .swiper-slide.color-oceanBlue .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-OceanBlue_en.svg) no-repeat;
        }
        .bodyHorizStory.fr .swiper-slide.color-oceanBlue .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before
        , .bodyHorizStory.es .swiper-slide.color-oceanBlue .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-OceanBlue_es_fr.svg) no-repeat;
        }

        .bodyHorizStory .swiper-slide.color-oceanBlue  .CardHeaderQuote .CardHeaderQuote--quote:before {
            background: url(../graphics/quotes-color-OceanBlue.png) no-repeat;
        }
        /* ............................. */
        /* ............................. */
        /* ............................. */
        .bodyHorizStory .swiper-slide.slideType_first.color-sand .StoriesSplashScreen--title 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-sand .StoriesSplashScreen--legend 
        ,.bodyHorizStory .swiper-slide.color-sand  .StoriesParagraph--title 
        ,.bodyHorizStory .swiper-slide.color-sand  .Card--title
        ,.bodyHorizStory .swiper-slide.color-sand  .CardFact
        ,.bodyHorizStory .swiper-slide.color-sand  .StoriesCard--preTitle
        ,.bodyHorizStory .swiper-slide.color-sand  .StoriesCard--title
        ,.bodyHorizStory .swiper-slide.color-sand  .StoriesCard--content
        ,.bodyHorizStory .swiper-slide.color-sand  .CardHeaderQuote
        ,.bodyHorizStory .swiper-slide.color-sand .Footnotes--title 
        {
            color: #f5e1a4;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-sand .ClockIcon
        ,.bodyHorizStory .swiper-slide.color-sand .Footnotes--title   {
            border-color: #f5e1a4;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-sand  .ClockIcon .ClockIcon--minutes
        ,.bodyHorizStory .swiper-slide.slideType_first.color-sand  .ClockIcon .ClockIcon--hours {
            background-color: #f5e1a4;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-sand .StoriesSplashScreen--scrollIndicator g 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-sand   .StoriesSplashScreen--scrollIndicator path
        ,.bodyHorizStory .swiper-slide.slideType_first.color-sand   .StoriesSplashScreen--scrollIndicator polygon {
            stroke: #f5e1a4;
        }
        .bodyHorizStory .swiper-slide.color-sand .StoriesFullscreenVideo.background-pattern-smallGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-Sand-small.png);
        }
        .bodyHorizStory .swiper-slide.color-sand .StoriesFullscreenVideo.background-pattern-largeGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-Sand.png);
        }
        .bodyHorizStory .swiper-slide.color-sand .colorSchemaTheme {
            background-color:#f5e1a4;
        }
        .bodyHorizStory .swiper-slide.color-sand .fullwidth.colorSchemaTheme::before
        ,.bodyHorizStory .swiper-slide.color-sand .fullwidth.colorSchemaTheme::after {
            background: none;
        }

        .bodyHorizStory .swiper-slide.color-sand .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-Sand_en.svg) no-repeat;
        }
        .bodyHorizStory.fr .swiper-slide.color-sand .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before
        , .bodyHorizStory.es .swiper-slide.color-sand .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-Sand_es_fr.svg) no-repeat;
        }

        .bodyHorizStory .swiper-slide.color-sand  .CardHeaderQuote .CardHeaderQuote--quote:before {
            background: url(../graphics/quotes-color-Sand.png) no-repeat;
        }
        /* ............................. */
        /* ............................. */
        /* ............................. */
        .bodyHorizStory .swiper-slide.slideType_first.color-yellow .StoriesSplashScreen--title 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-yellow .StoriesSplashScreen--legend 
        ,.bodyHorizStory .swiper-slide.color-yellow  .StoriesParagraph--title 
        ,.bodyHorizStory .swiper-slide.color-yellow  .Card--title
        ,.bodyHorizStory .swiper-slide.color-yellow  .CardFact
        ,.bodyHorizStory .swiper-slide.color-yellow  .StoriesCard--preTitle
        ,.bodyHorizStory .swiper-slide.color-yellow  .StoriesCard--title
        ,.bodyHorizStory .swiper-slide.color-yellow  .StoriesCard--content
        ,.bodyHorizStory .swiper-slide.color-yellow  .CardHeaderQuote
        ,.bodyHorizStory .swiper-slide.color-yellow .Footnotes--title 
        {
            color: #ffd86b;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-yellow .ClockIcon
        ,.bodyHorizStory .swiper-slide.color-yellow .Footnotes--title   {
            border-color: #ffd86b;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-yellow  .ClockIcon .ClockIcon--minutes
        ,.bodyHorizStory .swiper-slide.slideType_first.color-yellow  .ClockIcon .ClockIcon--hours {
            background-color: #ffd86b;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-yellow .StoriesSplashScreen--scrollIndicator g 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-yellow   .StoriesSplashScreen--scrollIndicator path
        ,.bodyHorizStory .swiper-slide.slideType_first.color-yellow   .StoriesSplashScreen--scrollIndicator polygon {
            stroke: #ffd86b;
        }
        .bodyHorizStory .swiper-slide.color-yellow .StoriesFullscreenVideo.background-pattern-smallGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-Yellow-small.png);
        }
        .bodyHorizStory .swiper-slide.color-yellow .StoriesFullscreenVideo.background-pattern-largeGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-Yellow.png);
        }
        .bodyHorizStory .swiper-slide.color-yellow .colorSchemaTheme {
            background-color:#ffd86b;
        }
        .bodyHorizStory .swiper-slide.color-yellow .fullwidth.colorSchemaTheme::before
        ,.bodyHorizStory .swiper-slide.color-yellow .fullwidth.colorSchemaTheme::after {
            background: none;
        }

        .bodyHorizStory .swiper-slide.color-yellow .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-Yellow_en.svg) no-repeat;
        }
        .bodyHorizStory.fr .swiper-slide.color-yellow .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before
        , .bodyHorizStory.es .swiper-slide.color-yellow .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-Yellow_es_fr.svg) no-repeat;
        }

        .bodyHorizStory .swiper-slide.color-yellow  .CardHeaderQuote .CardHeaderQuote--quote:before {
            background: url(../graphics/quotes-color-Yellow.png) no-repeat;
        }
        /* ............................. */
        /* ............................. */
        /* ............................. */
        .bodyHorizStory .swiper-slide.slideType_first.color-limeGreen .StoriesSplashScreen--title 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-limeGreen .StoriesSplashScreen--legend 
        ,.bodyHorizStory .swiper-slide.color-limeGreen  .StoriesParagraph--title 
        ,.bodyHorizStory .swiper-slide.color-limeGreen  .Card--title
        ,.bodyHorizStory .swiper-slide.color-limeGreen  .CardFact
        ,.bodyHorizStory .swiper-slide.color-limeGreen  .StoriesCard--preTitle
        ,.bodyHorizStory .swiper-slide.color-limeGreen  .StoriesCard--title
        ,.bodyHorizStory .swiper-slide.color-limeGreen  .StoriesCard--content
        ,.bodyHorizStory .swiper-slide.color-limeGreen  .CardHeaderQuote
        ,.bodyHorizStory .swiper-slide.color-limeGreen .Footnotes--title 
        {
            color: #d6e24d;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-limeGreen .ClockIcon
        ,.bodyHorizStory .swiper-slide.color-limeGreen .Footnotes--title   {
            border-color: #d6e24d;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-limeGreen  .ClockIcon .ClockIcon--minutes
        ,.bodyHorizStory .swiper-slide.slideType_first.color-limeGreen  .ClockIcon .ClockIcon--hours {
            background-color: #d6e24d;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-limeGreen .StoriesSplashScreen--scrollIndicator g 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-limeGreen   .StoriesSplashScreen--scrollIndicator path
        ,.bodyHorizStory .swiper-slide.slideType_first.color-limeGreen   .StoriesSplashScreen--scrollIndicator polygon {
            stroke: #d6e24d;
        }
        .bodyHorizStory .swiper-slide.color-limeGreen .StoriesFullscreenVideo.background-pattern-smallGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-LimeGreen-small.png);
        }
        .bodyHorizStory .swiper-slide.color-limeGreen .StoriesFullscreenVideo.background-pattern-largeGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-LimeGreen.png);
        }
        .bodyHorizStory .swiper-slide.color-limeGreen .colorSchemaTheme {
            background-color:#d6e24d;
        }
        .bodyHorizStory .swiper-slide.color-limeGreen .fullwidth.colorSchemaTheme::before
        ,.bodyHorizStory .swiper-slide.color-limeGreen .fullwidth.colorSchemaTheme::after {
            background: none;
        }

        .bodyHorizStory .swiper-slide.color-limeGreen .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-LimeGreen_en.svg) no-repeat;
        }
        .bodyHorizStory.fr .swiper-slide.color-limeGreen .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before
        , .bodyHorizStory.es .swiper-slide.color-limeGreen .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-LimeGreen_es_fr.svg) no-repeat;
        }

        .bodyHorizStory .swiper-slide.color-limeGreen  .CardHeaderQuote .CardHeaderQuote--quote:before {
            background: url(../graphics/quotes-color-LimeGreen.png) no-repeat;
        }
        /* ............................. */
        /* ............................. */
        /* ............................. */
        .bodyHorizStory .swiper-slide.slideType_first.color-green .StoriesSplashScreen--title 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-green .StoriesSplashScreen--legend 
        ,.bodyHorizStory .swiper-slide.color-green  .StoriesParagraph--title 
        ,.bodyHorizStory .swiper-slide.color-green  .Card--title
        ,.bodyHorizStory .swiper-slide.color-green  .CardFact
        ,.bodyHorizStory .swiper-slide.color-green  .StoriesCard--preTitle
        ,.bodyHorizStory .swiper-slide.color-green  .StoriesCard--title
        ,.bodyHorizStory .swiper-slide.color-green  .StoriesCard--content
        ,.bodyHorizStory .swiper-slide.color-green  .CardHeaderQuote
        ,.bodyHorizStory .swiper-slide.color-green .Footnotes--title 
        {
            color: #b6e34d;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-green .ClockIcon
        ,.bodyHorizStory .swiper-slide.color-green .Footnotes--title  {
            border-color: #b6e34d;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-green  .ClockIcon .ClockIcon--minutes
        ,.bodyHorizStory .swiper-slide.slideType_first.color-green  .ClockIcon .ClockIcon--hours {
            background-color: #b6e34d;
        }
        .bodyHorizStory .swiper-slide.slideType_first.color-green .StoriesSplashScreen--scrollIndicator g 
        ,.bodyHorizStory .swiper-slide.slideType_first.color-green   .StoriesSplashScreen--scrollIndicator path
        ,.bodyHorizStory .swiper-slide.slideType_first.color-green   .StoriesSplashScreen--scrollIndicator polygon {
            stroke: #b6e34d;
        }
        .bodyHorizStory .swiper-slide.color-green .StoriesFullscreenVideo.background-pattern-smallGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-Green-small.png);
        }
        .bodyHorizStory .swiper-slide.color-green .StoriesFullscreenVideo.background-pattern-largeGrain .StoriesFullscreenVideo--videoWrapper::after {
            background-image: url(../graphics/pattern-video-Green.png);
        }
        .bodyHorizStory .swiper-slide.color-green .colorSchemaTheme {
            background-color:#b6e34d;
        }
        .bodyHorizStory .swiper-slide.color-green .fullwidth.colorSchemaTheme::before
        ,.bodyHorizStory .swiper-slide.color-green .fullwidth.colorSchemaTheme::after {
            background: none;
        }

        .bodyHorizStory .swiper-slide.color-green .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-Green_en.svg) no-repeat;
        }
        .bodyHorizStory.fr .swiper-slide.color-green .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before
        , .bodyHorizStory.es .swiper-slide.color-green .StoriesMediaTextGrid .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-Green_es_fr.svg) no-repeat;
        }


        .bodyHorizStory .swiper-slide.color-green  .CardHeaderQuote .CardHeaderQuote--quote:before {
            background: url(../graphics/quotes-color-Green.png) no-repeat;
        }
        /* ............................. */
        /* ............................. */
        /* ............................. */

        .bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-black_en.svg) no-repeat !important;
        }
        .bodyHorizStory.fr .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before
        , .bodyHorizStory.es .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .StoriesQuote--content>p:first-child::before {
            background: url(../graphics/quote_color-black_es_fr.svg) no-repeat !important;
        }
        .bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .StoriesParagraph--content 
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .StoriesParagraph--title
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .StoriesQuote--content 
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .StoriesContainer--related--title
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .LinkList--text
        ,.bodyHorizStory .swiper-slide.color-hasColorSchemaSet:not(.color-default,.color-):not(.slideType_mediaCaption) .slideContainer .SlideText  .Footnotes--title 
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .Footnotes--title
        /*,.bodyHorizStory .swiper-slide.color-hasColorSchemaSet .StoriesMediaTextGrid.colorSchemaTheme .slideContainer .SlideText   a.Cta*/
        ,.bodyHorizStory .swiper-slide.color-hasColorSchemaSet.StoryArticleSDGs .StoriesMediaTextGrid.colorSchemaTheme .slideContainer .SlideText .SDGContainerHorizStory .Card--title
        {
            color: #16272c;
        }

        
        
        .bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText  .Footnotes--title
        {
            border-color: #16272c;
        }
        
        .bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText .StoriesContainer--related--title:after 
        
        ,.bodyHorizStory .swiper-slide.color-hasColorSchemaSet .StoriesMediaTextGrid.colorSchemaTheme .slideContainer .SlideText   a.Cta:before
        
        ,.bodyHorizStory .color-light .swiper-slide .StoriesMediaTextGrid .slideContainer .SlideText   .CardHeaderFact 
        {
            background: #16272c;
        }
        .bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="hinderlingvolkart.com"])::after
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="localhost"])::after
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="unops.org"])::after 
        {
            background: url(../img/icons/global/1x/new-window-black.png) no-repeat;
        }
        .bodyHorizStory .swiper-slide:not(.color-default,.color-) .slideContainer .SlideText .Card--text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="unops.org"])::after 
        {
            background: url("../img/icons/global/1x/new-window-light.png") no-repeat;
        }

        .bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="hinderlingvolkart.com"]):hover::after
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="localhost"]):hover::after
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .colorSchemaTheme .slideContainer .SlideText .StoriesParagraph--Text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="unops.org"]):hover::after 
        ,.bodyHorizStory .swiper-slide:not(.color-default,.color-) .slideContainer .SlideText .Card--text a[href]:not(.button):not(.Cta):not(.Card):not(.Button--link)[href*="//"]:not([href*="unops.org"]):hover::after
        {
            background: url("../img/icons/global/1x/new-window.png") no-repeat;
        }

        

        .bodyHorizStory .swiper-slide.color-hasColorSchemaSet:not(.color-default,.color-) .StoriesFullscreenVideo.background-pattern-none .StoriesFullscreenVideo--videoWrapper::after {
            background-image: none;
        }

        .bodyHorizStory .swiper-slide.color-hasColorSchemaSet .slideContainer .SlideText  .CardHeaderQuote {
            background:none;
        }

        .bodyHorizStory .swiper-slide.slideType_last.color-hasColorSchemaSet .StoriesCard--content 
        ,.bodyHorizStory .swiper-slide.color-hasColorSchemaSet .StoriesMediaTextGrid:not(.colorSchemaTheme) .slideContainer .SlideText   a.Cta
        ,.bodyHorizStory .StoriesContainer.color-light .swiper-slide .StoriesMediaTextGrid.colorSchemaTheme .slideContainer .SlideText  .Card--title
        ,.bodyHorizStory .StoriesContainer.color-light .swiper-slide.slideType_articleText.color-default .defaultBackground .Card--title
        ,.bodyHorizStory .StoriesContainer.color-light .swiper-slide.slideType_mediaCaption.color-default .defaultBackground .Card--title
        
        ,.bodyHorizStory .StoriesContainer.color-light .swiper-slide.slideType_articleText .defaultBackground  .ArticleAuthor
        ,.bodyHorizStory .StoriesContainer:not(.color-light) .swiper-slide.slideType_articleText:not(.color-hasColorSchemaSet)   .ArticleAuthor
        ,.bodyHorizStory .StoriesContainer:not(.color-light) .swiper-slide.slideType_articleText.color-hasColorSchemaSet .defaultBackground  .ArticleAuthor
        ,.bodyHorizStory .StoriesContainer.color-light .swiper-slide.slideType_articleText.color-default   .ArticleAuthor
        
        ,.bodyHorizStory .StoriesContainer:not(.color-light) .swiper-slide.color-hasColorSchemaSet.slideType_articleText.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid:not(.colorSchemaTheme) .slideContainer .SlideText .SDGContainerHorizStory .Card--title
        {
            color:#fff;
        }
        .bodyHorizStory .swiper-slide.slideType_last.color-hasColorSchemaSet .StoriesCard--content {
            opacity:0.8;
        }
        .bodyHorizStory .swiper-slide.color-hasColorSchemaSet .StoriesMediaTextGrid:not(.colorSchemaTheme) .slideContainer .SlideText   a.Cta:before {
            background-color:#ffffff;
        }

        
        /* .bodyHorizStory .swiper-slide.color-hasColorSchemaSet .StoriesMediaTextGrid .slideContainer .SlideText   a.Cta:hover {
            color:#0092D1;
        }
        .bodyHorizStory .swiper-slide.color-hasColorSchemaSet .StoriesMediaTextGrid .slideContainer .SlideText   a.Cta:hover:before {
            background-color:#0092D1;
        } */
        
       
        
        /*
        we have here 8 cases:
        
        1) [DCB] Dark Theme; With Color Schema; with Default BG ticked:
            .StoriesContainer:not(.color-light)     .swiper-slide.color-hasColorSchemaSet       .StoriesMediaTextGrid.defaultBackground

        2) [DCN]Dark Theme; With Color Schema; no default BG:
            .StoriesContainer:not(.color-light)     .swiper-slide.color-hasColorSchemaSet       .StoriesMediaTextGrid.noDefaultBackground
            
        3) [DNB] Dark Theme; NO color schema; with Default BG ticked:
            .StoriesContainer:not(.color-light)     .swiper-slide.color-default                 .StoriesMediaTextGrid.defaultBackground            
            
        4) [DNN] Dark Theme; NO color schema; no default BG:
            .StoriesContainer:not(.color-light)     .swiper-slide.color-default                 .StoriesMediaTextGrid.noDefaultBackground
            
        5) [LCB] Light Theme; With Color Schema; with Default BG ticked:
            .StoriesContainer.color-light           .swiper-slide.color-hasColorSchemaSet       .StoriesMediaTextGrid.defaultBackground
            
        6) [LCN] Light Theme; With Color Schema; no default BG:
            .StoriesContainer.color-light            .swiper-slide.color-hasColorSchemaSet      .StoriesMediaTextGrid.noDefaultBackground
            
        7) [LNB] Light Theme; NO color schema; with Default BG ticked:
            .StoriesContainer.color-light            .swiper-slide.color-default                .StoriesMediaTextGrid.defaultBackground
            
        8) [LNN] Light Theme; NO color schema; no default BG:
            .StoriesContainer.color-light            .swiper-slide.color-default                .StoriesMediaTextGrid.noDefaultBackground
            
        */
        
        
        /*(2)*/ .StoriesContainer:not(.color-light)     .swiper-slide.color-hasColorSchemaSet       .StoriesMediaTextGrid.noDefaultBackground   .SlideText   a.Cta:before
        /*(3)*/,.StoriesContainer:not(.color-light)     .swiper-slide.color-default                 .StoriesMediaTextGrid.defaultBackground     .SlideText   a.Cta:before
        /*(4)*/,.StoriesContainer:not(.color-light)     .swiper-slide.color-default                 .StoriesMediaTextGrid.noDefaultBackground   .SlideText   a.Cta:before
        
        /*(6)*/, .StoriesContainer.color-light            .swiper-slide.color-hasColorSchemaSet      .StoriesMediaTextGrid.noDefaultBackground  .SlideText   a.Cta:before
        /*(7)*/,.StoriesContainer.color-light            .swiper-slide.color-default                .StoriesMediaTextGrid.defaultBackground     .SlideText   a.Cta:before
        /*(8)*/,.StoriesContainer.color-light            .swiper-slide.color-default                .StoriesMediaTextGrid.noDefaultBackground   .SlideText   a.Cta:before
        {
            background-color: #0092D1;  
        }
        
        
        /*(7)*/.StoriesContainer.color-light            .swiper-slide.color-default                .StoriesMediaTextGrid.defaultBackground     .SlideText   .Card--title {
            color:#ffffff;
        }
        

/* --- /color schemas --- */

/* ===== first slide =====*/
    .bodyHorizStory .swiper-slide.slideType_first .StoriesMediaTextGrid .slideContainer .SlideText {
        width: 100%;     
    }
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_first .StoriesMediaTextGrid .slideContainer .SlideText {
            padding-left:5vw;
            padding-right:5vw;
        }
    } 
    @media (min-width: 1920px) {
        .bodyHorizStory .swiper-slide.slideType_first .StoriesMediaTextGrid .slideContainer .SlideText {
            padding-left: calc(960px - 20vw);
            padding-right: calc(960px - 20vw);
        }
    } 

    .bodyHorizStory .swiper-slide.slideType_first .StoriesMediaTextGrid .slideContainer .SlideText .StoriesSplashScreen--title {
        width:100%;
        margin-bottom:20px;
    }
    .bodyHorizStory .swiper-slide.slideType_first .ArticleHeader--footer {
        background: none;
    }
    .bodyHorizStory .swiper-slide.slideType_first .ArticleHeader--footer--inner {
        width:100%;
    }
    .bodyHorizStory .swiper-slide.slideType_first .ArticleMeta {
        position:relative;
    }
    .bodyHorizStory .swiper-slide.slideType_first .StoriesSplashScreen--preTitle {
        align-self: center;
        margin-bottom: 10px;
    }
    .bodyHorizStory .swiper-slide.slideType_first .StoriesSplashScreen--scrollIndicator {
        align-self: center;
        margin-top: 25px;
    }
    .bodyHorizStory .swiper-slide.slideType_first .StoriesSplashScreen--legend {
        align-self: center;
        padding-bottom:10px;
    }
/* ===== /first slide =====*/
/* ===== ArticleText slide =====*/       
    .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid.fullwidth.hasNoImageOrVideo::before {
        content: none;
    }
    .bodyHorizStory .swiper-slide.slideType_articleText .StoriesFullscreenVideo  {
        padding-bottom:0;
    }

    .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph--Text {
        column-gap: 3em;
    }
    
    /* --- style author block --- */
        .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid .slideContainer .SlideText  .ArticleAuthor {
            padding:0;
            margin:0;
            background: none;
            width:100%;
        }
        .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid .slideContainer .SlideText  .ArticleAuthor .ArticleAuthor--inner {
            padding:0;
            margin:0;
        }
        .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid .slideContainer .SlideText  .ArticleAuthor .ArticleAuthor--inner  .ArticleAuthor--imgWrapper .ArticleAuthor--img {
            width:40px;
            height:40px;
            filter: drop-shadow(0 0 0.2rem  #cccccc);
        }
        .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid .slideContainer .SlideText  .ArticleAuthor .ArticleAuthor--inner .ArticleAuthor--texts  {
            padding-left: 15px;
        }
        .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid .slideContainer .SlideText  .ArticleAuthor .ArticleAuthor--inner .ArticleAuthor--texts .ArticleAuthor--description{
            display: inline;
            font-size: unset;
        }
        .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid .slideContainer .SlideText  .ArticleAuthor .ArticleAuthor--inner .ArticleAuthor--texts .ArticleAuthor--name {
            font-size: unset;
            text-transform: none;
            font-family: inherit;
            letter-spacing:0;
            display: inline;
        }
        
        
        
    /* --- /style author block --- */
    
    
    /* start: CW-632 adjust image spacing within the text */
    .bodyHorizStory .swiper-slide.slideType_articleText .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph--content img {
        
    }
    /* end: CW-632 adjust image spacing within the text */
    
    /* LEFT */
    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left .StoriesMediaTextGrid .slideContainer .SlideText {    
        width: 33.33333%;
        margin-left: 10%;
        margin-right: auto;
    }
    @media (max-width: 1280px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left .StoriesMediaTextGrid .slideContainer .SlideText {  
            margin-left:calc(2% + 30px);
            width:calc(40% - 60px);
        }
    }
    
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left .StoriesMediaTextGrid .slideContainer .SlideText {  
            margin-left:calc(0% + 30px);
            width:calc(50% - 60px);
        }
    }
    
    @media (max-width: 750px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left .StoriesMediaTextGrid .slideContainer .SlideText {  
            margin-left:15px;
            margin-right:15px;
            width:auto;
        }
    }

    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText { 
        display:flex;
        flex-direction: row;
        align-items:flex-start;
        gap: 60px;

        width: 100%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText > div {
        width: 50%; 
    }
       
    .bodyHorizStory .swiper-slide.slideType_mediaCaption.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText div.StoryArticleSDGs--content { 
        display:flex;
        flex-direction: column;
        align-items:stretch;
        gap: 30px;
        justify-content: space-between;
        height:100%;
    }

    .bodyHorizStory .swiper-slide.slideType_mediaCaption.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText div.StoryArticleSDGs--content .StoriesParallax--container { 
        position: relative;
        width:100%;
    }


    .bodyHorizStory .swiper-slide.slideType_mediaCaption.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText div.StoryArticleSDGs--content .StoryArticleSDGs--block .SDGContainerHorizStory { 
        align-self: flex-end;
    }

    .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph  { 
        height:100%;
    }
    @media (min-width: 1001px) {
        .bodyHorizStory .swiper-slide.slideType_mediaCaption.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph  { 
            min-width: 250px;
        }
    }

    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid.slideContainer .SlideText .SDGContainerHorizStory 
    ,.bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs:not(.color-default) .StoriesMediaTextGrid.colorSchemaTheme.bgcolor-none .slideContainer .SlideText .SDGContainerHorizStory
    {
        padding: 20px 30px 30px 30px;
        background: rgba(255,255,255,0.1);
        width:100%;
        max-width: calc(50vw - 30px);
        position: absolute;
    }
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs:not(.color-default) .StoriesMediaTextGrid.colorSchemaTheme.bgcolor-none .slideContainer .SlideText .SDGContainerHorizStory
        {
            max-width: 100%;
            position: relative;
        }
    }
    @media (min-width: 1280px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs:not(.color-default) .StoriesMediaTextGrid.colorSchemaTheme.bgcolor-none .slideContainer .SlideText .SDGContainerHorizStory
        {
            
            width:930px;
            max-width: 930px;
        }
    }
    /* .bodyHorizStory .swiper-slide.slideType_mediaCaption.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText .SDGContainerHorizStory 
    {
        padding: 20px 0px 10px 0px;
    } */
    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid:not(.colorSchemaTheme) .slideContainer .SlideText .SDGContainerHorizStory 
    /* ,.bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid.colorSchemaTheme.bgcolor-none .slideContainer .SlideText .SDGContainerHorizStory  */
    {
        /* padding: 20px 30px 30px 30px; 
        background: rgba(0,0,0,0.2); */
        background: none;
        padding: 0px;
    }
    /* .bodyHorizStory .swiper-slide.slideType_mediaCaption.StoryArticleSDGs .StoriesMediaTextGrid:not(.colorSchemaTheme) .slideContainer .SlideText .SDGContainerHorizStory 
    { background: none;} */
        
    
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText { 
            max-width: calc(100% - 60px);
            flex-direction: column;
            gap: 30px;
        }
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_left.StoryArticleSDGs .StoriesMediaTextGrid .slideContainer .SlideText > div {
            width: 100%; 
        }
    }

    

    /* CENTER */
    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_center .StoriesMediaTextGrid.fullwidth.hasImageOrVideo:before {
        /* background: linear-gradient(to right, rgba(13,30,47,0) 0%,rgba(20,23,26,0.5) 15%,rgba(20,23,26,0.6) 19%,rgba(20,23,26,0.75) 33%,rgba(20,23,26,0.8) 51%,rgba(20,23,26,0.75) 66%,rgba(20,23,26,0.6) 81%,rgba(20,23,26,0.5) 85%,rgba(13,30,47,0) 100%); */
        background: radial-gradient(circle at 50% 120%, rgba(20,23,26,0.7) 60%, rgba(20,23,26,0) 100%)
    }
    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_center .StoriesMediaTextGrid .slideContainer .SlideText {    
        width: 100%;
        max-width: 530px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        
    }
    /* @media screen and (max-height: 610px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_center .StoriesMediaTextGrid .slideContainer .SlideText {    
            max-width:none;
        }
    } */

    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_center .StoriesMediaTextGrid.wide .slideContainer .SlideText {    
        width: 100%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        
    }
    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_center .StoriesMediaTextGrid.wide .slideContainer .SlideText .StoriesParallax--container.StoriesParagraph--Text{    
        column-count: 2;
    }
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_center .StoriesMediaTextGrid.wide .slideContainer .SlideText  {  
            max-width: calc(100% - 60px);
        }
    }
    @media (max-width: 750px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_center .StoriesMediaTextGrid.wide .slideContainer .SlideText .StoriesParallax--container.StoriesParagraph--Text{    
            column-count: 1;
        }
    }
    
    /* RIGHT */
    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_right .StoriesMediaTextGrid.fullwidth.hasImageOrVideo:before {
        background: linear-gradient(-45deg, rgba(20,23,26,0.85) 30%, rgba(13,30,47,0) 100%);
    }
    .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText {    
        width: 33.33333%;
        margin-right: 10%;
        margin-left: auto;
    }
    @media (max-width: 1280px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText {  
            margin-right:calc(2% + 30px);
            width:calc(40% - 60px);
        }
    }
    
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText {  
            margin-right:calc(0% + 30px);
            width:calc(50% - 60px);
        }
    }
    
    @media (max-width: 750px) {
        .bodyHorizStory .swiper-slide.slideType_articleText.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText {  
            margin-left:15px;
            margin-right:15px;
            width:auto;
        }
    }  

    


    
/* ===== /ArticleText slide =====*/
/* ===== MediaCaption slide =====*/
    .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer {
        align-self: flex-start;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText {  
        flex-direction: row;
        padding: 0px 120px;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image {
        /* max-height: calc(100vh - 9em); */
        /* max-height: calc(var(--vh, 1vh) * 100 - 10em); */
       
        min-height: 100%;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_left  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image {
        max-height: calc(var(--vh, 1vh) * 100 - 11em);
    }

    .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image .EmbeddedMedia--inner{
        max-height: calc(var(--vh, 1vh) * 100 - 9em);
    }
    .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image iframe {
        max-height: calc(var(--vh, 1vh) * 100 - 10em);
    }
    .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image.isVideo  {
       /* height:100%; */
       max-height:100%;
       max-height: calc(var(--vh, 1vh) * 100 - 9em);
       /* overflow: visible; */
    }

    .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image .Media.image {
        overflow:visible;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image .EmbeddedMedia {
        margin:0 auto;
        width:100%;
        overflow: visible;
        max-height: calc(var(--vh, 1vh) * 100 - 9em);
    }

    .bodyHorizStory .swiper-slide.slideType_mediaCaption .StoriesMediaTextGrid .slideContainer .SlideText .Footnotes--list * {
        color:#fff;
    }
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText {
            flex-direction: column;
            justify-content: flex-start;
            height:100%;
            width:100%;
            padding:0px 5vw;
            padding:0;
        }
        .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_left  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image {  
           order: -1;    
           margin: 0 auto;  
           min-height: unset;             
        }
        .bodyHorizStory .swiper-slide.slideType_mediaCaption  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image.isVideo  {
            height:unset;
            max-height:unset;
         }
    }


    
    
    @media (min-width: 1000px) {
        .swiper-slide.slideType_mediaCaption.slideAlign_left .StoriesMediaTextGrid .slideContainer .SlideText .StoryArticleSDGs--block  
        {
            margin-left: -150px;
            margin-right: -60px;

            padding-right:20px;
            padding-left:150px;

            padding-bottom: 10px;
            padding-top: 10px;

            height: auto;
        }

         
    }
    @media (min-width: 1000px) and (max-width: 1280px) {
        .swiper-slide.slideType_mediaCaption.slideAlign_left .StoriesMediaTextGrid .slideContainer .SlideText .StoryArticleSDGs--block  {
            margin-right: -30px;
            padding-right: 5px;
        }
        
    }
    @media (min-width: 1280px) {
        .swiper-slide.slideType_mediaCaption.slideAlign_left .StoriesMediaTextGrid .slideContainer .SlideText .StoryArticleSDGs--block  
        {
            margin-left: -240px;
            padding-left: 240px;
        }
    }

    .swiper-slide.slideType_mediaCaption:is(.color-oceanBlue, .color-sand, .color-yellow, .color-limeGreen, .color-green) .StoriesMediaTextGrid .slideContainer .SlideText .StoryArticleSDGs--block  
    {
        background: rgba(255,255,255,0.1);
    }
    .swiper-slide.slideType_mediaCaption .StoriesMediaTextGrid:not(.colorSchemaTheme) .slideContainer .SlideText .StoryArticleSDGs--block 
    ,.swiper-slide.slideType_mediaCaption.color-default .StoriesMediaTextGrid .slideContainer .SlideText .StoryArticleSDGs--block 
    {
        /* background: rgba(0,0,0,1); */
        background: none;
        margin:0;
        padding:0;
    }   

    .swiper-slide.slideType_mediaCaption .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph--title
    ,.swiper-slide.slideType_mediaCaption .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph--content 
    {
        word-wrap:break-word;
        /* word-break: break-all; */
        overflow-wrap: anywhere;
        /* min-width: 6em; */
    }
    

    /* text -right*/
    .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText {
        flex-direction:row-reverse;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {
        /* - align to bottom --*/
        position: relative;
        z-index: 2;
        align-self: flex-end;
        height: 100%;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph .StoriesParallax--container {
        align-self: flex-start;
        position: absolute;
        bottom: 0;
        max-height: 100%;
    }

    .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image{
        margin-right: 4.16667vw;
        margin-left: auto
    }

    @media (min-width: 1000px) {
        .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoryArticleSDGs--block  
        {
            margin-right: -240px;
            margin-left: -4.16667vw;

            padding-left:4.16667vw;
            padding-right:240px;

            padding-bottom: 10px;
            height: auto;
        }
    }
    @media (max-width: 1280px) and (min-width:1001px) {
        .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoryArticleSDGs--block  
        {
            margin-right: -120px;
            margin-left: -60px;
            padding-left: 60px;
            padding-right: 0px;
        }
    }

    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right  .StoriesMediaTextGrid .slideContainer .SlideText {
            flex-direction: column-reverse;
        }
        .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {
            align-self: flex-start;
            width:calc(100% - 60px);
        }
        .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph .StoriesParallax--container {
            bottom:unset;
        }
    }


    
    @media (max-width: 1280px) {
        .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image{
            margin-right:calc(0% + 30px)
        }
    }
    
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image{
            margin-right:30px;
            margin-left: 30px;
            min-height: unset;
            width:calc(100% - 60px);
        }
    }
    
    @media (max-width: 750px) {
        .bodyHorizStory .swiper-slide.slideType_mediaCaption.slideAlign_right .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image{
            margin-right:15px;
            margin-left:15px;
        }
    }

/* ===== /MediaCaption slide =====*/
/* ===== MediaText slide =====*/
    .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer {
        align-self: flex-start;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText {  
        flex-direction: row;
        align-items: center;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-height: calc(100vh - 9em);
        width: 45.83333%;
        margin-left: 8.33333vw;
        margin-right: 4.16667vw;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image  {
        align-self: center;
        overflow:visible;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image .Media.image {
        overflow:visible;
    }
    .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image .EmbeddedMedia {
        margin: 0 auto;
        overflow:visible;
    }
    /* RIGHT */
    .bodyHorizStory .swiper-slide.slideType_mediaText.slideAlign_right  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {
        margin-right: 8.33333vw;
        margin-left: 4.16667vw;
    }
    @media (min-width: 1001px) {
        .bodyHorizStory .swiper-slide.slideType_mediaText.slideAlign_right  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            order: 99;
            align-self: self-start;
        }
    }

    @media (max-width: 1280px) {
        .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            width:calc(55% - 60px);
            margin-left:calc(0% + 30px);
            margin-right:calc(0% + 30px);
        }
    }
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText {  
            flex-direction: column;
            align-items: flex-start;
            padding-top: 0;
            padding-bottom: 0;
            height:100%;
        }
        .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            margin-bottom: calc(5em + 30px);  
            width:calc(68.75% - 60px);
            margin-left:auto;
            margin-right:auto;
         }
        .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--image {  
            margin-top: -5em;  
         }
    }
    @media (max-width: 750px) {
        .bodyHorizStory .swiper-slide.slideType_mediaText  .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            width:auto;
            margin-left:15px;
            margin-right:15px;
        }
    }
/* ===== /MediaText slide =====*/
/* ===== CardSlider slide =====*/
    .bodyHorizStory .swiper-slide.slideType_cardSlider   .StoriesMediaTextGrid .slideContainer .SlideText 
    {
        padding-bottom:0;
    }
    .bodyHorizStory .swiper-slide.slideType_cardSlider   .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--title {
        /* margin-top: 40px; */
        margin-bottom: 20px;
    }
    .bodyHorizStory .swiper-slide.slideType_cardSlider   .StoriesMediaTextGrid .slideContainer .SlideText .CardSlider {
        margin-top: 0;
        margin-bottom:0;
    }
    .bodyHorizStory .swiper-slide.slideType_cardSlider   .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--title {
        margin-bottom:20px;
    }
    .bodyHorizStory .swiper-slide.slideType_cardSlider   .StoriesMediaTextGrid .slideContainer .SlideText .CardSlider  .CardSlider--slider{
        padding-top:0;
        padding-bottom:0;
    }
    .bodyHorizStory .swiper-slide.slideType_cardSlider   .StoriesMediaTextGrid .slideContainer .SlideText .CardSlider--list {
        max-height: calc(var(--vh, 1vh) * 100 - 13em);
        min-height: 300px;
    }
    .bodyHorizStory .swiper-slide.slideType_cardSlider   .StoriesMediaTextGrid .slideContainer .SlideText .CardSlider--list .Card--body {
        overflow: hidden;
    }

/* ===== /CardSlider slide =====*/
/* ===== TextCard slide =====*/
    .bodyHorizStory .swiper-slide.slideType_textAndCard   .StoriesMediaTextGrid .slideContainer {
        align-self: flex-start;
    }
    .bodyHorizStory .swiper-slide.slideType_textAndCard   .StoriesMediaTextGrid .slideContainer .SlideText {  
        flex-direction: row-reverse;
        align-items: center;
        max-width: 960px;
        margin-left:auto;
        margin-right:auto;
    }
    .bodyHorizStory .swiper-slide.slideType_textAndCard   .StoriesMediaTextGrid .slideContainer .SlideText>div {
        max-height: calc(var(--vh, 1vh) * 100 - 11em);
    }
    
        
    .bodyHorizStory .swiper-slide.slideType_textAndCard   .StoriesMediaTextGrid .slideContainer .SlideText.TextCard_CardType--socialMedia>div {
        /* CW-638 both text and card (socialmedia only) - have their own independent scrolls*/
        overflow-x: hidden;
        overflow-y: auto;
    }
    
   
    
    /*-- starts: if its twitter or facebook card -- */
    .bodyHorizStory .swiper-slide.slideType_textAndCard   .StoriesMediaTextGrid .slideContainer .SlideText .Card .Card-inner {
        border-radius:20%;
        
    }  
    /*-- ends: if its twitter or facebook card -- */
                
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_textAndCard   .StoriesMediaTextGrid .slideContainer .SlideText {  
            flex-direction: column;
            align-items: flex-start;
        }
        .bodyHorizStory .swiper-slide.slideType_textAndCard   .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            max-width: calc(100% - 60px);
            width: auto;
            align-self: center;
        }
        .bodyHorizStory .swiper-slide.slideType_textAndCard   .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--cardContainer {  
            align-self: center;
        }
    }

/* ===== /TextCard slide =====*/
/* ===== Text2Cards slide =====*/
    .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer {
        align-self: flex-start;
    }
    .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText {  
        flex-direction: row;
        align-items: center;
        margin-left:auto;
        margin-right:auto;
    }
    .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
        /* width:100%; */
        margin-right:14%;
        margin-left:5%;
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-height: calc(100vh - 9em);
    }
    .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--cardContainer {
        align-self:center;
        max-height: calc(100vh - 9em);
    }
    .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--mainCardContainer {
        align-self: center;
        display:flex;
        flex-direction: row;
        width:50%;
        max-width: 640px;
    }
    
    @media (min-width: 1001px) {
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--mainCardContainer .StoriesMediaTextGrid--cardContainer {
            align-self: flex-start;
        }
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--cardContainer:last-of-type {
            margin-right:5%;
        }
    }
    
    @media (max-width: 1280px) {
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            margin-left:calc(0% + 30px);
            margin-right:calc(0% + 30px);
        }
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            width:calc(40% - 60px)
        }
    }
    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText {  
            flex-direction: column;
            align-items: flex-start;
        }
        
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            /* width:calc(50% - 60px); */
            width:100%;
            max-width: calc(100% - 60px);
        }

        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--mainCardContainer {
            display:flex;
            flex-direction: column;
            width:100%;
        }
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesMediaTextGrid--cardContainer {
            align-self:center;
        }

    }
    @media (max-width: 750px) {
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            margin-left:15px;
            margin-right:15px;
        }
        .bodyHorizStory .swiper-slide.slideType_textAnd2Cards    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesParagraph {  
            width:auto;
        }
    }
      
/* ===== /Text2Cards slide =====*/
/* ===== Slideshow slide =====*/
    .bodyHorizStory .swiper-slide.slideType_slideshow    .StoriesMediaTextGrid .slideContainer {
        /* margin:0;
        height: calc(100vh - 10em); */
    }
    .bodyHorizStory .swiper-slide.slideType_slideshow    .StoriesMediaTextGrid .slideContainer .SlideText {  
        padding:0;
        height: 100%;;
        min-height: 100px;
    }
/* ===== /Slideshow slide =====*/
/* ===== EmbedMedia slide =====*/
    .bodyHorizStory .swiper-slide.slideType_embeddedMedia   .StoriesMediaTextGrid .slideContainer {
        
    }
    
    .bodyHorizStory .swiper-slide.slideType_embeddedMedia   .StoriesMediaTextGrid .slideContainer .SlideText {          
        padding-top:0px;
        /* height:100%; */
        max-width:960px;
    }
    .bodyHorizStory .swiper-slide.slideType_embeddedMedia   .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--title {
        margin-bottom: 20px;
    }
    
    .bodyHorizStory .swiper-slide.slideType_embeddedMedia   .StoriesMediaTextGrid .slideContainer .SlideText .EmbeddedMedia {
        margin:0 auto;
        width:95%;
        overflow: visible;
    }

    @media (min-width: 551px) {
            .bodyHorizStory .swiper-slide.slideType_embeddedMedia  .StoriesMediaTextGrid .slideContainer .SlideText .EmbeddedMedia .EmbeddedMedia--inner
            ,.bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText .EmbeddedMedia .EmbeddedMedia--inner .EmbeddedMedia--overlay 
            ,.bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText .EmbeddedMedia .EmbeddedMedia--inner .EmbeddedMedia--overlay .Media.image
            ,.bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText .EmbeddedMedia .EmbeddedMedia--inner .EmbeddedMedia--overlay .Media.image img
            ,.bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText .EmbeddedMedia .EmbeddedMedia--inner iframe
            {
                max-height: calc(var(--vh, 1vh) * 100 - 11em);
            }
            .bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText .EmbeddedMedia .EmbeddedMedia--inner {
                padding:0;
                height: calc(var(--vh, 1vh) * 100 - 11em);
            }

            .bodyHorizStory .swiper-slide.slideType_embeddedMedia  .StoriesMediaTextGrid .slideContainer .SlideText.hasTitle .EmbeddedMedia .EmbeddedMedia--inner
            ,.bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText.hasTitle .EmbeddedMedia .EmbeddedMedia--inner .EmbeddedMedia--overlay 
            ,.bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText.hasTitle .EmbeddedMedia .EmbeddedMedia--inner .EmbeddedMedia--overlay .Media.image
            ,.bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText.hasTitle .EmbeddedMedia .EmbeddedMedia--inner .EmbeddedMedia--overlay .Media.image img
            ,.bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText.hasTitle .EmbeddedMedia .EmbeddedMedia--inner iframe
            {
                max-height: calc(var(--vh, 1vh) * 100 - 12em - 20px);
            }
            .bodyHorizStory .swiper-slide.slideType_embeddedMedia .StoriesMediaTextGrid .slideContainer .SlideText.hasTitle .EmbeddedMedia .EmbeddedMedia--inner {
                padding:0;
                height: calc(var(--vh, 1vh) * 100 - 12em - 20px);
            }
    }

   
/* ===== /EmbedMedia slide =====*/
/* ===== Map slide =====*/
    .bodyHorizStory .swiper-slide.slideType_map    .StoriesMediaTextGrid .slideContainer .SlideText {          
        padding-top:0px;
        /* height:100%; */
    }

    .bodyHorizStory .swiper-slide.slideType_map    .StoriesMediaTextGrid .slideContainer .SlideText .MarkerMap {
        width:100%;
        margin-top:0;
    }
    .bodyHorizStory .swiper-slide.slideType_map    .StoriesMediaTextGrid .slideContainer .SlideText .MarkerMap .MarkerMap--map {
        max-height: calc(var(--vh, 1vh) * 100 - 11em);

    }
/* ===== /Map slide =====*/
/* ===== linkList =====*/
    .bodyHorizStory .swiper-slide.slideType_linkList   .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--title {
        margin-bottom: 20px;
    }
/* ===== /linkList =====*/
/* ===== Last slide =====*/
    .bodyHorizStory .swiper-slide.slideType_last    .StoriesMediaTextGrid .slideContainer  {  
        max-width: unset;
        justify-content: flex-start;
    }
    /* -- if we want to shrink and limit cardslider card width --*/
    .bodyHorizStory .swiper-slide.slideType_last    .StoriesMediaTextGrid  .CardSlider{  
        max-width:1340px;
    }

    .bodyHorizStory .swiper-slide.slideType_last   .StoriesMediaTextGrid .slideContainer .SlideText  {
        height: 100%;
        min-height:150px;
        justify-content: center;
        max-height: calc(var(--vh, 1vh) * 100 - 9em);
    }
    .bodyHorizStory .swiper-slide.slideType_last   .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--title {
        margin-bottom: 20px;
    }
    .bodyHorizStory .swiper-slide.slideType_last    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--cards {
        min-height:100px;
        margin-top:0px;
        margin-bottom:0px;
        
        display: block;
        /* max-height:calc(var(--vh, 1vh) * 100 - 14em); */
        max-height: 690px;
        height: 100%;
    }

    .bodyHorizStory .swiper-slide.slideType_last    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--cards .CardSlider--slider {
        width: calc(100% - 0px);
        padding-top:0px;
        padding-bottom:0px;
        /* min-height:220px; */
        max-height: calc(690px - 2em);
        height: calc(100% - 2em);
    }

    .bodyHorizStory .swiper-slide.slideType_last    .StoriesMediaTextGrid .slideContainer .SlideText .CardSlider--slide  .StoriesCard {
        min-height: 270px;
        max-height:690px;
        height:100%;
    }
    
    @media (min-width: 1001px) {
        .bodyHorizStory .swiper-slide.slideType_last    .StoriesMediaTextGrid .slideContainer .SlideText .StoriesContainer--related--cards .CardSlider--slider .StoriesCard {
            width: calc(100% + 35px);
            margin-right: -18px;
            margin-left: -17px;
            max-width: unset;
        }
    }
    

    @media (max-width: 1000px) {
        .bodyHorizStory .swiper-slide.slideType_last    .StoriesMediaTextGrid .slideContainer .SlideText {
            
        }

        .bodyHorizStory .swiper-slide.slideType_last    .StoriesMediaTextGrid .slideContainer .SlideText .CardSlider--slide  .StoriesCard {
            min-height: calc(var(--vh, 1vh) * 100 - 20em);
        }
        
    }
/* ===== /Last slide =====*/



/* for big screens, set to max width */
@media (min-width: 1920px) {
    .bodyHorizStory .swiper-slide:not(.slideType_slideshow)
    .bodyHorizStory .swiper-slide:not(.slideType_slideshow) .StoriesMediaTextGrid
    ,.bodyHorizStory .swiper-slide:not(.slideType_slideshow)  .StoriesMediaTextGrid .slideContainer
    ,.bodyHorizStory .swiper-slide:not(.slideType_slideshow)  .StoriesMediaTextGrid .slideContainer .SlideText
    ,.bodyHorizStory .swiper-slide:not(.slideType_slideshow) .StoriesFullscreenVideo
    {
        width: 1920px;
        min-width:unset;
    }  
    .bodyHorizStory .swiper-slide:not(.slideType_slideshow) .StoriesFullscreenVideo {
        width:100%;
    }
    .bodyHorizStory .swiper-slide:not(.slideType_slideshow) .StoriesMediaTextGrid {
        padding-left:  calc(50% - 960px);
        padding-right: calc(50% - 960px);
        width:100%;
    }
    .bodyHorizStory .swiper-slide .StoriesFullscreenVideo 
    /* ,.bodyHorizStory .swiper-slide  .StoriesMediaTextGrid  .slideContainer  */
    {
        /* left: calc(50% - 960px); */
    }

    .bodyHorizStory .swiper-slide.slideType_mediaCaption .StoriesMediaTextGrid .slideContainer .SlideText {
        width: 1680px;
        
    }
    
    
}


/* ----------------------  End: styles for Story Horizontal Layout ----------------------  */
/*===================================================================================================*/


/* ----- HORIZ story navigation burger menu ---------*/
.bodyHorizStory  .SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button .PopupDots--icon {
    display:none;
}
.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button .Icon {
    display:none;
}
.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button .PopupDots--icon {
    display:block;
    opacity: 1;
    transform: scale(1.3);
    margin-top: -10px;
}
.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button .PopupDots {
    height: 40px; 
    width: 40px;
}


.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button .PopupDots--icon::before {
    content: unset;
}

.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button:after {
    border:0;
}
.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button:hover::after {
    border: 1px solid currentColor; 
}
.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button:hover::after {
    border:0;
}
.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button:hover::before {
    content: unset;
}
.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button .PopupDots--icon--dot{
/* background: #94979a; */
    background: rgba(255,255,255,0.5);
}
@media (hover: hover) {
    .bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .ShareButtons--button:hover .PopupDots--icon--dot{
        background: #ffd256;
    }
}

.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .PopupDots:active .PopupDots--icon--dot:nth-child(1) 
,.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .PopupDots:active .PopupDots--icon--dot:nth-child(2) 
,.bodyHorizStory  .burgerMenuAnchorLinks.SiteHeader--metaNav.SiteHeader--metaNav--stories .PopupDots:active .PopupDots--icon--dot:nth-child(3) 
{
    opacity: 1;
    transform: none;
}

.bodyHorizStory  .color-white .ShareOverlayContainer ul.mediaIcons li a.ShareOverlay--socialLink svg g 
,.bodyHorizStory  .color-white .ShareOverlayContainer ul.mediaIcons li a.ShareOverlay--socialLink svg g * {
    stroke:#ffffff;
}



.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay--background {
z-index: -1;
background-color: rgba(36,52,57,0.85);
}
.bodyHorizStory .color-white .burgerMenuAnchorLinks .ShareOverlay--background {
background-color: rgba(64,64,64,0.85);
}
@media (min-width: 551px) {
    .bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay--background {
        opacity:0.7;
    }
    .bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer {
        
        float: right;
        width:400px;
    }
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer {
background-color: rgba(36,52,57,0.85);
height:100vh;
display:flex;
flex-direction: column;
padding-top:30px;
}

@media (max-width: 550px) {
    .bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer {
        margin-top: -47px;
    }
}
.bodyHorizStory .color-white .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer {
background-color: rgba(64, 64, 64, 0.85);
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul {
width:100%;
height: auto;
margin-top:50px;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul ul {
margin-top:0px;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul.MobileNav--categories li:after {
content: unset;
}


.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul.MobileNav--categories {
display: block;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul.MobileNav--categories li {
height: auto;
width: auto;
margin: 0px;
position: static;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul.MobileNav--categories li a {
text-transform: none;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul.MobileNav--categories li a.MobileNav--categoryLink.hasNoChildren:after {
content: unset;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul.MobileNav--categories .MobileNav--sub.is-opened {
overflow-x: auto;
}


.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul li:before {
top: 0;
left: 0;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul.MobileNav--categories li:before {
height: auto;
border:0;
}

.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul.MobileNav--sub {
display:none;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay .ShareOverlayContainer ul.MobileNav--sub.is-opened{
display: block;
}


.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul.mediaIcons {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul.mediaIcons li {
width:40px;
height:40px;
padding:10px;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul.mediaIcons li a svg {
height:20px;
}

.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay--close:after {
content: unset;
/*
background: url(../img/icons/global/2x/close-L-light.png) no-repeat 0px 0px;
width: 40px;
height: 40px;
transform: scale(0.7);
*/
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay--close .PopupDots--closeIcon
,.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay--close .PopupDots--closeIcon:before
,.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay--close .PopupDots--closeIcon:after {
opacity: 1;
}




.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul li a.MobileNav--subLink
, .bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul li a.MobileNav--categoryLink {
font-family: "Open Sans","Helvetica Neue","Helvetica",sans-serif;
font-weight: 600;
letter-spacing: normal;
}
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul li a.MobileNav--subLink {
transform: scale(1);
}
/* colors */
.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul li a.MobileNav--categoryLink:not(:hover)  {
color: #ffffff;
}

.bodyHorizStory .burgerMenuAnchorLinks .ShareOverlay ul li a.MobileNav--subLink  {
color: #808a8d;
}



.bodyHorizStory  .color-strawberry .burgerMenuAnchorLinks .ShareOverlay ul li a.slideToLink--selected {
color: #D98F8F;
}


.bodyHorizStory  .color-dune .burgerMenuAnchorLinks .ShareOverlay ul li a.slideToLink--selected {
color: #BE9677
}

.bodyHorizStory  .color-mint .burgerMenuAnchorLinks .ShareOverlay ul li a.slideToLink--selected {
color: #8CC0C3
}

.bodyHorizStory .color-light .burgerMenuAnchorLinks  .ShareOverlay ul li a.slideToLink--selected {
color: #ffffff;
}

.bodyHorizStory .color-white .burgerMenuAnchorLinks  .ShareOverlay ul li a.slideToLink--selected    {
color: #ffffff;
}

/* only for devices with hover capabilities*/
@media (hover: hover) {
.bodyHorizStory  .burgerMenuAnchorLinks .ShareOverlay ul li a.MobileNav--subLink:hover:not(:active) 
,.bodyHorizStory  .burgerMenuAnchorLinks .ShareOverlay ul li a.MobileNav--categoryLink:hover:not(:active)
{
    color: #ffd256;
}
}



/*show always 3 dots*/
@media (max-width: 710px) {
    
    .bodyHorizStory .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button:before 
    , .showAlways3dotsinSmallScreens .ShareButtons--button:after
    , .bodyHorizStory .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button .PopupDots--icon:before
    {
        content: unset;
    }
    .bodyHorizStory .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button .Icon  {
        display:none;
    }
    .bodyHorizStory .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button .PopupDots--icon {
        display:block;
        opacity: 1;
        transform: scale(1.3);
        margin-top: -10px;
    }
    .bodyHorizStory .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button .PopupDots--icon--dot {
        background: rgba(255,255,255,0.5);
    }
    
    .bodyHorizStory  .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button:hover .PopupDots--icon--dot{
        background: #ffd256;
    }
    
    .bodyHorizStory  .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button:hover
    {
        touch-action: manipulation;
    }
    
    
    .bodyHorizStory  .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button:hover .PopupDots--icon--dot:nth-child(1) {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }
    .bodyHorizStory  .SiteHeader--metaNav.SiteHeader--metaNav--stories.showAlways3dotsinSmallScreens .ShareButtons--button:hover .PopupDots--icon--dot:nth-child(3) {
        -webkit-transform: translateY(2px);
        transform: translateY(2px)
    }
}
/* ----- end: HORIZ story navigation burger menu ---------*/



/* ----- Start: Language Switch ---- */
.bodyHorizStory .MetaNav--list li:first-child .Flyout {
    position: absolute;
    top:25px;
    right:210px;
    width:80px; /*15-15px padding is added*/
    padding: 0px 10px;
    height:30px;
    
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.2);
}

.bodyHorizStory .MetaNav--list li .LanguageSelectorFlyout--link .language-globe svg {
    width:30px;
    height:30px;
    object-fit: fill;
    opacity: 0.5;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout .LanguageSelectorFlyout--link {
    line-height: normal;
    margin-bottom: 15px;
}
.bodyHorizStory .MetaNav--link.is-active::after {
    content:unset;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout.is-active .LanguageSelectorFlyout--link .language-globe svg {
    opacity: 1;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout:hover .LanguageSelectorFlyout--link .language-globe svg {
    stroke: #ffd256;
    opacity: 0.9;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout .LanguageSelectorFlyout  .Flyout--content .Flyout--item--link.active:before {
    /* background-color: #6e7882; */
    background-color: #303030;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout .LanguageSelectorFlyout  .Flyout--content .Flyout--item--link {
    padding: 10px 20px 10px 30px;
    text-transform: capitalize;
    text-align:left;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout .LanguageSelectorFlyout  .Flyout--content .Flyout--item--link.active {
    padding-left: 20px;
    color: #303030;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout .LanguageSelectorFlyout  .Flyout--content .Flyout--item--link:hover {
    background-color:#e7e8e9;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout .LanguageSelectorFlyout  .Flyout--content .Flyout--item--link:not(.active) {
    font-family: VF Sans Regular;
}
.bodyHorizStory .MetaNav--list li:first-child .Flyout .LanguageSelectorFlyout  .Flyout--content .Flyout--item {
    border-bottom:1px solid #e7e8e9;
}

.bodyHorizStory .MetaNav--list .Flyout .Flyout--container {
    min-width:120px;
}

.bodyHorizStory .LanguageSelectorFlyout.LanguageSelectorFlyout {
    margin-top:0px;
}
@media (max-width: 1000px) {
    .bodyHorizStory .MetaNav--list li:first-child .Flyout {
        top: 23px;
    }
}
@media (min-width: 711px) {
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout { 
        display:none;
    }
}
@media (max-width:710px) {
    .bodyHorizStory  .MetaNav--list .SiteHeader--metaNav .ShareOverlay button.js-ShareOverlay--close.ShareOverlay--close {
        z-index: 999999999;
    }
    .bodyHorizStory .MetaNav--list li:first-child .Flyout  {
        display:none;
    }
    
    .bodyHorizStory .MetaNav--list li:not(:first-child)      .languageSelector2 .Flyout .LanguageSelectorFlyout   {
        left: 8px;
        right: unset;
        bottom: unset;
        transform: none;
        min-width: 100px;
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child)      .languageSelector2 .Flyout button.MetaNav--link.LanguageSelectorFlyout--link {
        line-height: 40px;
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout .Flyout--container--arrow {
        left:16px;
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child)      .languageSelector2 .Flyout .LanguageSelectorFlyout   .Flyout--list  {
        width:unset;
        height:unset;
        flex-direction: column;
        align-items: flex-start;
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li {
        margin:0;
        border-bottom: 1px solid #e7e8e9;
        width: 100%;
        height: 100%;
    }
    
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li:before {
        content:none;
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li a {
        padding: 10px 15px;
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li a:before {
        background-color: #303030;
    }
    
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li a.Flyout--item--link.active {
        color: #303030;
    }
    
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li a.Flyout--item--link {
        text-align:left;
        text-transform: capitalize;
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li a.Flyout--item--link:not(.active) {
        font-family: VF Sans Regular;
        padding-left:25px;
    }
}
@media (min-width:551px) and (max-width:710px) {
    
    
    .bodyHorizStory  .MetaNav--list li:not(:first-child) .SiteHeader--metaNav--stories:not(.burgerMenuAnchorLinks) .languageSelector2 .Flyout { 
        top: 25px;
        left: 2px;
    }
    
    .bodyHorizStory .MetaNav--list li:not(:first-child) .SiteHeader--metaNav--stories.burgerMenuAnchorLinks .languageSelector2 .Flyout { 
        /* top: 25px;
        left: 2px; */
        top: 25px;
        left: unset;
        right: 340px;
        position: absolute;
        float: right;
    }
    
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout .Flyout--container--arrow {
        left:19px;
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li a {
        padding: 10px 25px;
    }   
    
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .LanguageSelectorFlyout  .Flyout--list li a.Flyout--item--link.active {
        padding-left: 14px;
    }
}
/* --- mobile version --- */
@media (max-width: 550px) {
    
    
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout {
        top: 23px;
        left: 8px;
    }
   
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .language-globe svg {
        width:20px;
        height:20px;
        opacity: 1;
        
    }
    .bodyHorizStory .MetaNav--list li:not(:first-child) .languageSelector2 .Flyout .language-globe svg path { 
        stroke-width: 2;
    }
    
    
}
/* ----- End: Language Switch ---- */

