@charset "utf-8";

@property --posSliderProcent {
	syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

@keyframes aniSlideshow {

    0%,
    5% {
        --posSliderProcent: 0%;
        --posSlider: 0;
    }

    5.5%,
    10.5% {
        --posSliderProcent: 10%;
        --posSlider: 1;
    }

    11%,
    16% {
        --posSliderProcent: 20%;
        --posSlider: 2;
    }

    16.5%,
    21.5% {
        --posSliderProcent: 30%;
        --posSlider: 3;
    }

    22%,
    27% {
        --posSliderProcent: 40%;
        --posSlider: 4;
    }

    27.5%,
    32.5% {
        --posSliderProcent: 50%;
        --posSlider: 5;
    }

    33%,
    38% {
        --posSliderProcent: 60%;
        --posSlider: 6;
    }

    38.5%,
    43.5% {
        --posSliderProcent: 70%;
        --posSlider: 7;
    }

    44%,
    49% {
        --posSliderProcent: 80%;
        --posSlider: 8;
    }

    49.5%,
    54.5% {
        --posSliderProcent: 90%;
        --posSlider: 9;
    }

    55%,
    60% {
        --posSliderProcent: 80%;
        --posSlider: 8;
    }

    60.5%,
    65.5% {
        --posSliderProcent: 70%;
        --posSlider: 7;
    }

    66%,
    71% {
        --posSliderProcent: 60%;
        --posSlider: 6;
    }

    71.5%,
    76.5% {
        --posSliderProcent: 50%;
        --posSlider: 5;
    }

    77%,
    82% {
        --posSliderProcent: 40%;
        --posSlider: 4;
    }

    82.5%,
    87.5% {
        --posSliderProcent: 30%;
        --posSlider: 3;
    }

    88%,
    93% {
        --posSliderProcent: 20%;
        --posSlider: 2;
    }

    93.5%,
    98.5% {
        --posSliderProcent: 10%;
        --posSlider: 1;
    }
}

#mainSlideshow {
    --setCalcFactor: var(--setCalcMinFactor, --setCalcFactor, 0.75);
    --calcContentWidth: var(--calcContentMaxWidth);
    --calcContentHeight: var(--calcContentMaxHeight);
    --calcSlideHeight: var(--calcSlideMaxHeight);
    --calcSlideWidth: var(--calcSlideMaxWidth);
    --calcLogoWidth: var(--logoWidth);
    --calcLogoHeight: var(--logoHeight);
    --calcTitleWidth: var(--calcSlideWidth);
    --calcTitleHeight: var(--titleHeight);
    --calcBG_Height: var(--calcBGMaxHeight);
    --calcBG_Width: var(--calcBGMaxWidth);
    max-height: calc(var(--factorHDVideo) * 1vw);
    max-width: var(--screenWide);
    min-height: calc(var(--screenWide) / 16 * 6);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: var(--calcSlideWidth);
    height: var(--calcSlideHeight);
    top: var(--slideTop);
    display: var(--displayBlock) !important;
    top: 0;
    left: 0;
    transform: scale(var(--setCalcFactor));
    transition: transform 0.35s ease;
    position: var(--posRelative);
    border: var(--borderLght);
    border: 0.7vmin solid var(--colorBlueDrk);
    border-radius: 2.5rem;
    background-color: rgba(0, 0, 0, 0.75);
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    box-shadow: 0em 0em 7.5em var(--colorBlueDrk);
    overflow: var(--unshow);
    background-attachment: var(--bgPosFixed);
    background-size: contain;
    background-size: cover;
    background-repeat: var(--repeateBg);
    background-origin: border-box;
    margin: var(--centerMargin);
    margin: var(--noMarginPadding);
    padding: var(--noMarginPadding);
    overflow: var(--overflowHidden) !important;
    overflow-x: var(--overflowClip) !important;
    overflow-y: var(--overflowClip) !important;
    -webkit-aspect-ratio: var(--aspectRatio) !important;
    aspect-ratio: var(--aspectRatio) !important;
    text-align: center;
    /* display: var(--displayBlock) !important; */
    position: var(--posRelative) !important;
    -webkit-overflow-scrolling: var(--overflowScrollTouch);
    -webkit-overflow-x: var(--overflowCut);
    -webkit-overflow-y: var(--overflowCut);
    user-select: var(--userSelect);
    -webkit-user-select: var(--userSelect);
    -moz-user-select: var(--userSelect);
    -webkit-animation-name: aniSlideshow;
    -webkit-animation-duration: 132s;
    -webkit-animation-iteration-count: infinite;
    animation-name: aniSlideshow;
    animation-duration: 132s;
    animation-iteration-count: infinite;
    z-index: 10;
}

.Slideshow {
    aspect-ratio: var(--aspectRatio) !important;
    -webkit-aspect-ratio: var(--aspectRatio) !important;
    touch-action: var(--touchActionX), var(--touchActionY);
    width: calc(var(--calcSlideWidth) * 10);
    height: var(--calcSlideHeight);
    max-height: var(--screenHeight) !important;
    position: var(--posAbsolute);
    transform: translateX(calc(0px - var(--posSliderProcent)));
    overflow-y: var(--overflowHidden);
    left: var(--topLeft);
    top: var(--topLeft);
    margin: var(--noMarginPadding);
    padding: var(--noMarginPadding);
    
    display: var(--displayInlineFlex);
}

nav#topMenu:is(:hover, :active, :focus, :target, :focus-visible, :focus-within)~#Main :is(.containerSlider .Slideshow) {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

nav#topMenu:is(:hover, :active, :focus, :target, :focus-visible, :focus-within)~#Main :is(.containerSlider) {
    --setCalcFactor: var(--setCalcMaxFactor, 1);
    transform: scale(var(--setCalcFactor));
}

#mainSlideshow:is(:hover, :active, :focus, :focus-visible, :focus-within, :has(:target)) {
    --setCalcFactor: var(--setCalcMaxFactor, 1);
    transform: scale(var(--setCalcFactor));
}

#mainSlideshow:is(:hover, :active, :focus, :focus-visible, :focus-within, :has(:target)) {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.containerSlider:is(:hover, :active, :focus, :focus-visible, :focus-within) {
    --setCalcFactor: var(--setCalcMaxFactor, 1);
    transform: scale(var(--setCalcFactor));
    top: 0;
    left: 0;
    z-index: 200 !important;
}

.containerSlider:is(:hover, :active, :focus, :target, :focus-visible, :focus-within),
.containerSlider:has(.Slideshow:has(:hover, :active, :focus, :target, :focus-visible, :focus-within)) {
    transform: scale(1);
}

.containerSlider .x.mandatory-snap {}

#mainSlideshow:is(:hover, :active, :focus, :target, :focus-visible, :focus-within),
#mainSlideshow:has(:hover, :active, :focus, :target, :focus-visible, :focus-within) {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.containerSlider>.Slideshow>.SlideshowContent {
    overflow: var(--overflowHidden);
    width: var(--calcSlideWidth) !important;
    height: var(--calcSlideHeight) !important;
    max-height: var(--screenHeight) !important;
    display: var(--displayInlineBlock);
    display: var(--displayBlock) !important;
    aspect-ratio: var(--aspectRatio) !important;
    -webkit-aspect-ratio: var(--aspectRatio) !important;
    margin: var(--noMarginPadding);
    padding: var(--noMarginPadding);
    scroll-snap-align: start;
    float: left;
    position: var(--posStatic);
}

.Slide {
    opacity: var(--noTransparent);
    margin: var(--noMarginPadding);
    padding: var(--noMarginPadding);
    width: var(--calcSlideWidth) !important;
    height: var(--calcSlideHeight) !important;
    /*max-height:  var(--factorHDVideo) * 1vw !important;*/
    -webkit-: var(--aspectRatio);
    aspect-ratio: var(--aspectRatio);
    display: var(--displayInlineBlock);
    -webkit-overflow-scrolling: var(--overflowAuto);
    -webkit-overflow-x: var(--overflowCut) !important;
    -webkit-overflow-y: var(--overflowCut) !important;
    overflow: var(--overflowHidden) !important;
    overflow-x: var(--overflowCut) !important;
    overflow-y: var(--overflowCut) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    content-visibility: var(--unshow) !important;
    transform: translateX(-50%);
    top: var(--topLeft);
    float: left;
    position: var(--posAbsolute);

}

.containerSlider:is(:hover, :active, :focus) div.Slide {
    content-visibility: visible !important;
    /* top: calc(0 - var(--screenHeight) * var(--setCalcFactor) + 38vh) !important; */
    top: calc(0 - var(--screenHeight) + 38vh) !important;
}

.containerSlider:has(#Pos1:target),
.containerSlider:has(#Pos2:target),
.containerSlider:has(#Pos3:target),
.containerSlider:has(#Pos4:target),
.containerSlider:has(#Pos5:target),
.containerSlider:has(#Pos6:target),
.containerSlider:has(#Pos7:target),
.containerSlider:has(#Pos8:target),
.containerSlider:has(#Pos9:target),
.containerSlider:has(#Pos10:target) {
    transform: scale(1);
}


.SlideshowContent:nth-child(1) .Slide {
    background-image: var(--urlYTDirJpg1);
}

.SlideshowContent:nth-child(2) .Slide {
    background-image: var(--urlYTDirJpg2);
}

.SlideshowContent:nth-child(3) .Slide {
    background-image: var(--urlYTDirJpg3);
}

.SlideshowContent:nth-child(4) .Slide {
    background-image: var(--urlYTDirJpg4);
}

.SlideshowContent:nth-child(5) .Slide {
    background-image: var(--urlYTDirJpg5);
}

.SlideshowContent:nth-child(6) .Slide {
    background-image: var(--urlYTDirJpg6);
}

.SlideshowContent:nth-child(7) .Slide {
    background-image: var(--urlYTDirJpg7);
}

.SlideshowContent:nth-child(8) .Slide {
    background-image: var(--urlYTDirJpg8);
}

.SlideshowContent:nth-child(9) .Slide {
    background-image: var(--urlYTDirJpg9);
}

.SlideshowContent:nth-child(10) .Slide {
    background-image: var(--urlYTDirJpg10);
}

#mainSlideshow:has(.Slideshow:has(#Pos1:target)) {

    transform: translateX(0%);
    -webkit-animation-name: aniSlideshow !important;
    -webkit-animation-duration: 132s !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-play-state: unset !important;
    -webkit-animation-delay: 20s;
    animation-name: aniSlideshow !important;
    animation-duration: 132s !important;
    animation-iteration-count: infinite !important;
    animation-play-state: unset !important;
    animation-delay: 20s;
}

#mainSlideshow:has(.Slideshow:has(#Pos2:target)) {

    transform: translateX(-10%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#mainSlideshow:has(.Slideshow:has(#Pos3:target)) {

    transform: translateX(-20%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#mainSlideshow:has(.Slideshow:has(#Pos4:target)) {

    transform: translateX(-30%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#mainSlideshow:has(.Slideshow:has(#Pos5:target)) {

    transform: translateX(-40%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#mainSlideshow:has(.Slideshow:has(#Pos6:target)) {

    transform: translateX(-50%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#mainSlideshow:has(.Slideshow:has(#Pos7:target)) {

    transform: translateX(-60%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#mainSlideshow:has(.Slideshow:has(#Pos8:target)) {

    transform: translateX(-70%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#mainSlideshow:has(.Slideshow:has(#Pos9:target)) {

    transform: translateX(-80%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#mainSlideshow:has(.Slideshow:has(#Pos10:target)) {

    transform: translateX(-90%);
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}


.containerSlider .Title {
    backdrop-filter: var(--bgBlur);
    -webkit-backdrop-filter: var(--bgBlur);
    /* top: calc(-100vh - 14px); */
    /*top: unset;*/
    /* bottom: calc( var(--showPreview) * var(--calcSlideHeight) + var(--calcLogoHeight))  !important; */
    height: var(--calcTitleHeight);
    width: var(--calcTitleWidth);
    bottom: 0px;
    transform: translateX(calc(-50% + 0px));
    position: var(--posAbsolute);
    font-size: calc(var(--titleFontSize) * var(--setCalcFactor));
    display: var(--displayInlineBlock) !important;
    float: left;
    z-index: 30;
}

.containerSlider .Title a {
    color: var(--parentValue) !important;
    position: var(--posAbsolute);
    padding: var(--noMarginPadding);
    left: 0px;
    padding-left: var(--titleLeft);
    text-align: var(--titleAlign);
    line-height: 1em;
    width: var(--calcTitleWidth);
    display: var(--displayFlex);
    align-items: center;
    height: var(--calcTitleHeight);
    background-image: var(--blueGradientTitle);
}

.containerSlider .Title::before {
    display: var(--displayBlock);
    border: var(--borderLght);
    background-color: #444;
    height: 1em;
    color: #eee;
    content: '' + attr(data-err) + '';
}

.containerSlider:is(:hover, :active, :focus) .Title {
    /*top: calc(-100vh * 1.5);*/
    font-size: var(--titleFontSize) !important;
}

.containerSlider:is(:hover, :active, :focus) .Slideshow .Title a {
    padding-left: var(--titleLeft) !important;
}

.containerSlider a.Navi[style*="display: none"]~.Title {
    top: calc(75vh - 100px) !important;
}

.containerSlider:is(:hover, :active, :focus) a.Navi[style*="display: none"]~.Title {
    top: calc(var(--screenHeight) - 91px - 1em) !important
}

.containerSlider a.Navi {
    border-radius: 50%;
    position: var(--posAbsolute);
    margin: var(--centerMargin);
    font-size: 2.6rem;
    padding: 1vw;
    display: var(--displayInlineBlock);
    opacity: 1;
    bottom: calc(var(--calcSlideHeight) * .5 - 40px) !important;
    /* left: calc( var(--calcSlideWidth) * .5 - 40px) !important; 
            transform: translateX(calc(-50% + 51px)); */
    transform: translateX(calc(-50%));
    text-decoration: none !important;
    box-shadow: var(--boxShadow);
    backdrop-filter: var(--bgBlur);
    -webkit-backdrop-filter: var(--bgBlur);
    background-color: var(--colorBlue);
    background-image: var(--imagePlay);
    background-size: 50%;
    width: 80px;
    height: 80px;
    aspect-ratio: var(--aspectRatioCircle) !important;
    -webkit-aspect-ratio: var(--aspectRatioCircle) !important;
    background-repeat: no-repeat;
    background-position: center;
    border: var(--borderLght);
    text-shadow: none;
    color: transparent;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: background, opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 0.5s;
    transition-property: background, opacity;
    overflow: var(--overflowHidden);
    float: left;
    z-index: 30;
}

.containerSlider a.Navi:is(:hover, :active, :focus) {
    background-color: var(--colorBlueLgth);
    border: solid 3px var(--whiteColor);
}

.containerSlider:is(:hover, :active, :focus) a.Navi {}

.containerSlider:is(:hover, :active, :focus) .PlayerOverlay {
    left: var(--logoPosLeft);
    top: var(--logoPosTop);
    position: var(--posFixed);
    height: calc(var(--logoHeight) - 1em);
    width: var(--screenWide);
}

.containerSlider:is(:hover, :active, :focus) .channelLogo,
:is(.Slideshow .SlideshowContent :is(#Pos1, #Pos2, #Pos3, #Pos4, #Pos5, #Pos6, #Pos7, #Pos8, #Pos9, #Pos10):target)~.channelLogo {
    height: var(--calcLogoHeight);
    width: var(--calcLogoWidth);
    border: var(--borderLght);
}

@keyframes aniButton {

    0%,
    33.3% {
        background-image: var(--blueGradientPlayButton);
        background-color: var(--blackColor);
        color: var(--buttonColorLight);
        border: solid 1px #ccc;
        color: #fff;
    }

    33.4%,
    66.6% {
        background-image: var(--blueGradientPauseButton);
        background-color: var(--blackColor);
        border: solid 3px #fff;
        color: #000;
        text-shadow: #cccccc 0.2em 0.2em 0.5em;
    }

    66.7%,
    100% {
        background-image: var(--blueGradientPlayButton);
        background-color: var(--blackColor);
        color: var(--buttonColorLight);
        border: solid 1px #ccc;
        color: #fff;
    }
}

.containerSlider .Slide[style*="display: none"]~.Navi {
    --setCalcPlayTop: 0.5;
}

.channelLogo {
    box-shadow: var(--logoShadow);
    height: var(--calcLogoHeight);
    width: var(--calcLogoWidth);
    top: unset !important;
    bottom: -0.7vmin;
    position: var(--posAbsolute);
    left: 0px;
    background-image: var(--logoPic);
    background-size: var(--logoSize);
    background-repeat: var(--logoRepeate);
    border: var(--borderLghtSmall);
    display: var(--displayBlock) !important;
    z-index: 31;
}

.Slideshow:has(#Pos1:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos1{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos2:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos2{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos3:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos3{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos4:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos4{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos5:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos5{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos6:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos6{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos7:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos7{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos8:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos8{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos9:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos9{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.Slideshow:has(#Pos10:is(:hover, :target, :visited, :active, :focus, :focus-visible, :focus-within)) ~ .dotContainer .dotBackground #dotPos10{
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}