@import url(font/font.css);

/* *********************************************************
	Basic HTML selectors
*/
html{
	width: 100%;
	height: 100%;
}
body{
	position:fixed;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: var(--textStyle), sans-serif;
	overflow: hidden;
	background-color:var(--rootBG);
	color: var(--contentFG);
}

p{
	margin-block-start:0.5em
}

h1, h2, h3, h4, h5, h6 {
    margin-block: 0 0.5em;
    color: var(--titleColor);
    font-family: var(--titleStyle);
    font-weight: 500;
}
h1 {
	font-size: 1.8em;
}
h2 {
	font-size:1.6em;
}
h3 {
	font-size:1.4em;
}
h4 {
	font-size:1.2em;
}
h5 {
	font-size:1em;
}
h6 {
	font-size:0.8em;
}

a{
	color:var(--accentColor);

	&:hover {
    	color:var(--accentColorDark);
    }
    & img {
    	border: 0;
    }
}

ul{
	list-style-type:disc;
}
ul, ol {
	padding-inline-start:3em;
}

table {
	border-collapse:collapse;

	& p {
    	margin:0;
    }
}

q:before,
q:after {
	content: "";
}

/* === START - FOCUS ======================================================== */
a:focus,
input:focus,
video:focus,
button:focus,
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
	border: none;
	outline: 2px dotted rgb(78, 188, 225);
	transition: outline .25s ease-in-out;
}
/* === STOP - FOCUS ========================================================= */

/* *********************************************************
	Utilities
*/
.hidden{
	position: absolute;
	width:1px;
	height:1px;
	visibility: hidden;
	top:-10000px;
	left:-10000px;
}

/* === START - ACCESS ========================================================= */
#accessibility{
	font-size: 60%;
	list-style-type: none;
	padding:0;
	margin:0;
	z-index:200;
	position:absolute;
	top:3px;

	& li {
    	display:inline-block;
    	margin:0 1em;
    }
    & a {
    	opacity:0;
    	color: rgb(78, 188, 225);
    	text-decoration: none;

    	&:focus {
        	opacity:1;
        }
    	& span {
        	color: rgb(78, 188, 225);
        }
    }
    &:hover a {
    	opacity:0.5;
    }
}

.tooltip {
	background-color: var(--slideBG);
	font-size: 90%;
	border-radius: 0.5em;
	overflow: hidden;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.tooltip_co {
	padding: 0.5em;

	& p {
    	margin:0.5em 0;
    }
    & ul {
    	padding-inline-start: 1.5em;
    	margin:0;
    }
}
.tooltip_ti {
	background-color: var(--accentColor);
	color: var(--invColor);
	padding-inline: 0.5em 1.5em;
	padding-block: 0.5em;
	font-family: var(--titleStyle);
}
.tooltip_x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0.35em;
    right:0.35em;
    background-color: var(--invColor);
    color: var(--accentColor);
    line-height: 20px;
    border-radius: 50%;
    font-size: 1em;
    text-decoration: none;

	&:hover{
    	opacity: 0.7;
    }
    &::before {
        font-family: "fontello";
        content: "\2716";
    }
    & > span {
        display: none;
    }
}

.showHome .ssShortcut,
.showSlideshow .homeShortcut{
	display: none;
}

/* === STOP - ACCESS ========================================================= */

/* === START - MODES ========================================================= */
.showHome #home,
.showSlideshow #altSlides,
.showSlideshow #root{
	visibility: visible;
}
.showHome #root,
.showHome #altSlides,
.showHome #zoomFrame,
.showSlideshow #home{
	visibility: hidden;
}
/* === START - MODES ========================================================= */

/* === START - HOME ========================================================= */
#home {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	flex-direction:column;

    & header {
    	display: flex;
    	align-items: center;
    	justify-content: flex-end;

    	& .btnMetas{
            background: transparent;
            width: 45px;
            height: 45px;
            padding: 0;
            margin: 0.5rem;
            border-radius: .5em;
            border: 2px solid #fff5e9;
            font-family: "fontello";
            font-size: 1.5rem;
            cursor: pointer;

            &::before{
                content:"\2139";
            }
            & span{
                display: none;
            }
        }
    }
	& nav {
	    body.loading & {
	        & .loadingMessage {
	            display: block;
	        }
	        & button {
            	display: none;
            }
	    }
        & .loadingMessage {
            display: none;
        }
    }
    & > div {
    	flex: 1 1 auto;
    	display:flex;
    	flex-direction:column;
    	overflow: hidden;
    	padding: 1em;
    	background-color: var(--rootBG);

    	& > div.home{
        	flex: 1 1 auto;
        	display: flex;
        	flex-direction: column;
        	justify-content: center;
        	overflow: hidden;
        	background-color: var(--slideBG);
        	border-radius: 1.2em 0;
        	padding-inline: 0.5em;
        }
        & .home_ti{
        	text-align: center;
        	color: var(--titleColor);
        	margin: 0;
        }
        & .home_co {
        	overflow: auto;
        	font-size: 80%;

        	&::-webkit-scrollbar {
            	width: 0.7rem;
            	background: var(--rootBG);
            	height: 1rem;
            	border-radius: 5em;
            }
            &::-webkit-scrollbar-corner {
            	background-color: transparent;
            }

            &::-webkit-scrollbar-thumb {
            	border-radius: 5em;
            	background: var(--accentColor);
            }
        }
        & .presData{
        	margin-block-start: 1em;
        	text-align: center;
        }
        & > nav {
        	flex: 0 0 auto;
        	align-self: flex-end;
        	margin-block-start: 0.6em;
        	height: 2em;
        }
        .zenMode & > nav{
        	display: none;
        }
        & > nav {
            & > button {
                border: 0;
                cursor: pointer;
                color: var(--invColor);
                background-color: var(--accentColor);
                padding: 0.4em 0.6em;
                border-radius: 0.2em;
                font-size: 0.9em;
                font-family: var(--titleStyle);
                position: relative;

                &::after{
                    display: inline-block;
                    content: "\203A";
                    font-family: "fontello";
                    margin-inline-start: .5em;
                    font-size: .8em;
                    vertical-align: middle;
                }
                &:hover {
                   background-color: var(--accentColorDark);
                }
            }
            & .loadingMessage{
                color: var(--accentColor);
                text-align: center;
            }
        }
    }
}

.subtitle {
	color: var(--contentFG);
}

.tooltip.metas{
	font-size: 110%;
}
/* === STOP - HOME ========================================================= */

/* === START - SLIDESHOW ========================================================= */
#root {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	flex-direction:column;
	background-color: var(--rootBG);

    & > main {
    	flex: 1 1 auto;
    	display:flex;
    	flex-direction:row;
    	position: relative;
    	overflow: hidden;
        border-radius: 0 0 3em 0;
        margin-inline: 1em;
        margin-block-start: 1em;
    }
    & > #zoomFrame {
    	position:fixed;
    }
}

/* -- TOC ---------------------------------- */
#tocFrame {
	flex: 0 0 auto;
	order:1;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 300px;
	margin-inline-end: 0.5em;

    .tocClose & {
    	display: none;
    }
    & .toc_ti{
    	display: none;
    }
}
#tocScroll {
	flex: 1 1 auto;
	order: 2;
	position: relative;
}
#toc {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--titleStyle);

    & ul {
    	list-style-image: none;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;

    	&.tocList {
        	margin-inline-start: 1em;
        }
    }
    & li{
    	position:relative;
    }
    & a{
    	padding: 0.3em 0.5em 0.3em 1.5em;
    	display:block;
    	color: var(--accentColor);

    	&:hover {
            color: var(--accentColorDark);
        }
        & span {
        	display: inline-block;
        }
        &.selected {
        	color: var(--titleColor);
        }
    }
    & button.btnToggleOpen,
    & button.btnToggleClosed {
    	border: 0;
    	position: absolute;
    	width: 20px;
    	left: 0;
    	top: 4px;
    	line-height: 20px;
    	font-family: "fontello";
    	text-align: center;
    	color: var(--accentColor);
    	background: transparent;
    	font-size: 1.5em;
    	padding: 0;
    	cursor: pointer;

    	& span{
        	display:none;
        }
    }
    & button.btnToggleOpen::before {content:"\25BE";}
    & button.btnToggleClosed::before {content:"\25B8";}
}

.tocSrlUp{
	flex: 0 0 30px;
	order: 1;
	text-align:center;
}
.tocSrlDwn{
	flex: 0 0 30px;
	order: 3;
	text-align:center;
}

.tocSrlUp.btnOff,
.tocSrlDwn.btnOff {
	opacity: 0;
}

.tocSrlUpBtn,
.tocSrlDwnBtn{
	padding:0;
	box-sizing: border-box;
	width: 280px;
	height: 20px;
	overflow: hidden;
	background-color: var(--accentColor);
	border:0;
	margin-block-start: 3px;
	cursor:pointer;
	border-radius: 1em;
	font-family: "fontello";
	color:#fff;
	font-size: 1.5rem;
	line-height: 20px;

	& span{
    	display: none;
    }
}
.tocSrlUpBtn::before{
	content:"\25B4";
}
.tocSrlDwnBtn::before{
	content:"\25BE";
}

/* -- SLIDE TOOLS ---------------------------------- */
#root > .tools {
	flex: 0 0 5em;
	display:flex;
	align-items: center;
	column-gap: 1em;
	z-index: 1;
	padding-inline: 0.8em;

	.zenMode & {
    	display: none;
    }
    & button {
    	color: var(--invColor);
    	background-color: var(--accentColor);
    	border-radius: 50em;
    	width:50px;
    	height:50px;
    	padding:0;
    	margin: 0;
    	border: none;
    	font-family: "fontello";
    	font-size: 1.5em;
    	cursor: pointer;

    	body:not(.tocClose) &.btnMenu,
        &.btnHelp.help_act {
        	color: var(--accentColor);
        	background-color: var(--invColor);
        	border: 2px solid var(--accentColor);
        }
        &:hover {
            background-color: var(--accentColorDark);
        }
        &.btnHome::before {
        	content: "\2302";
        }
        &.btnHelp::before {
        	content: "\003F";
        }
        &.btnMenu::before {
        	content: "\2B70";
        }
        .tocClose &.btnMenu::before {
        	content: "\2630";
        }
        &.btnPrv::before {
        	content: "\2039";
        }
        &.btnNxt::before {
        	content: "\203A";
        }
        &.btnPlay::before {
        	content: "\23F5";
        }
        &.btnPause::before {
        	content: "\23F8";
        }
        &.btnController::before {
        	content: "\e808";
        }
        & span {
        	display: none;
        }
    }
    & .progressbar {
    	flex:1 1 auto;
    	background-color: var(--slideBG);
    	border-radius: 1em;
    	position:relative;
    	height: 1.5em;
    	overflow: hidden;
    	margin-inline: 0.8em;
    }
    & .navbar {
    	display:flex;
    	align-items: center;
    	background-color: var(--accentColor);
    	border-radius: 50em;

    	& button.btnPrv {
            border-radius: 50em 0 0 50em;
        }
        & button.btnNxt {
            border-radius: 0 50em 50em 0;
        }
        & .slideCount{
            color: var(--invColor);
            margin-inline: 0.5em;
        }
    }
}

.progCount {
	background-color:var(--accentColor);
	border-radius: 50em;
	text-align: right;
	overflow: visible;
	left:0;
	color:#fff;
	position:absolute;
	height:1.5em;
	padding-inline-end:10px;
	line-height: 1.4rem;
	font-weight: bold;

    .prog_0 &{
    	width:1%
    }

    .prog_5 &{
    	right:95%
    }

    .prog_10 &{
    	right:90%
    }

    .prog_15 &{
    	right:85%
    }

    .prog_20 &{
    	right:80%
    }

    .prog_25 &{
    	right:75%
    }

    .prog_30 &{
    	right:70%
    }

    .prog_35 &{
    	right:65%
    }

    .prog_40 &{
    	right:60%
    }

    .prog_45 &{
    	right:55%
    }

    .prog_50 &{
    	right:50%
    }

    .prog_55 &{
    	right:45%
    }

    .prog_60 &{
    	right:40%
    }

    .prog_65 &{
    	right:35%
    }

    .prog_70 &{
    	right:30%
    }

    .prog_75 &{
    	right:25%
    }

    .prog_80 &{
    	right:20%
    }

    .prog_85 &{
    	right:15%
    }

    .prog_90 &{
    	right:10%
    }

    .prog_95 &{
    	right:5%
    }

    .prog_100 &{
    	right:0
		}
}

/* -- ALT SLIDE ---------------------------------- */
#altSlides {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(256,256,256,0.4);
	z-index: 3;

    & .altSlideRoot {
        position: absolute;
        top: 1em;
        left: 1em;
        right: 1em;
        bottom: 1em;
        background-color: var(--slideBG);
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        border-radius: 0.8em;
        overflow: hidden;
    }
    & .ssSlide section.slideBk {
        border: none;
        margin: 0;
        background-color: transparent;
    }
    & .slideBk_ti {
        margin: 0.5em 2em 0.5em 0.5em;
    }
    & .tools {
        flex: 0;
        display:flex;
        z-index: 1;

        & .navbar {
            flex: 1;
            display:flex;
        }
        & button.btnPrv {
            border-radius: 0 1em 0 0.5em;

            &::before{content: "\2039";}
        }
        & button.btnNxt {
            border-radius: 1em 0 0.5em 0;

            &::before{content: "\203A";}
        }
        & .blockCount {
            flex: 1;
            align-self: center;
            text-align: center;
        }
    }
    & .btnAltSldCls {
    	position: absolute;
    	top: 1em;
    	right: 1em;
    	z-index: 4;
        border-radius: 50em;

        &::before {content: "\2716";}
    }
    & .tools button,
    & .btnAltSldCls {
    	width:45px;
    	height:45px;
    	padding:0;
    	margin: 0;
    	background-color: var(--accentColor);
    	color: var(--invColor);
    	border: none;
    	font-family: "fontello";
    	font-size: 1.5rem;
    	cursor: pointer;

    	&:hover {
            background-color: var(--accentColorDark);
        }
        & span {
        	display: none;
        }
    }
    &.sldAltSlide.sldAltFirstStep .navbar > .btnPrv::before,
    &.sldAltSlide.sldAltLastStep .navbar > .btnNxt::before {
    	content: "\2716";
    }
    &.sldAltSlide.sldAltFirstStep.sldAltLastStep .navbar > .btnPrv {
    	display: none;
    }
}

#altSlideFrame{
	flex: 1 1 auto;
	position: relative;
}

/* -- SLIDES ---------------------------------- */
.ssBkRoot {
	position: relative;
}
.ssBkRootAlt {
	position: relative;
}
.ssBk,
.ssContainer {
	position: absolute;
	left:0;
	right:0;
}
.slSteps .ssContainer {
	position: static;
}
.ssBkCoParent {
	position: relative;
}

.ssAltSldLnk {
    &.doc::before,
    &.ref::before {
        font-family: "fontello";
        font-style: normal;
        font-weight: normal;
        margin-inline-end: 0.1em;
    }
    &.doc::before {content: "\E823";}
    &.ref::before {content: "\E81D";}
}

.bkGlos > .bkBase_ti::before,
.bkRef > .bkBase_ti::before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    margin-inline-end: 0.1em;
}
.bkGlos > .bkBase_ti::before {content: "\E81C";}
.bkRef > .bkBase_ti::before {content: "\E823";}

#slideFrame {
	flex: 1 1 auto;
	order:2;
	position: relative;
}

.ssSlide{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;

	& section.slideBk{
    	flex: 1 1 auto;
    }
    & .slideBk_co {
        background-color: var(--slideBG);
        border-radius: var(--slideRadius);
    }
}

h2.slideBk_ti {
	color: var(--titleColor);
	background-color: var(--rootBG);
	margin: 0;
	padding: 0 0.4em 0.4em 0.4em;

	.part &,
	.slideContact & {
    	color: var(--accentColor);
    	background-color: transparent;
    	margin: 0;
    	font-size: 2em;
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	left: 1em;
    }
}

.part,
.slideContact {
	text-align: center;
}


.slideContact .slideBk_co {
	text-align: center;
	font-size: 0.9em;
	color:gray;
}

a.zoom {
    text-decoration: none!important;
    background-color: var(--accentColor);
    color: var(--slideBG);
    font-size: 1.5em;
    width: 2em;
    height: 2em;
    border-radius: 50em;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    cursor: pointer;
	position: absolute;
	top:-5px;
	right:-20px;
	box-shadow: 0 5px 10px -2px rgba(0,0,0,0.25);

	&:hover {
    	background-color: var(--accentColorDark);
    	text-decoration: none;
    }
    &::before {
        font-family: "fontello";
        content: "\E818";
        font-style: normal;
        font-weight: normal;
    }
    & span {
    	display: none;
    }
}

/* -- ZOOM ---------------------------------- */
#zoomFrame {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(256,256,256,0.4);
	z-index: 4;

	& div.sldZmFrg,
    & div.sldZmSld {
    	position: absolute;
    	left: 0;
    	right: 0;
    	top: 0;
    	bottom: 0;
    	overflow: hidden;
    	text-align: center;
    	background-color: white;
    }
    & div.sldZmSld iframe {
    	overflow: auto;
    	width: 100%;
    	height: 100%;
    }
    & .btnZmCls{
    	background-color: var(--accentColor);
    	color: var(--invColor);
    	width:45px;
    	height:45px;
    	padding:0;
    	margin: 0 0.5rem;
    	border-radius: 50em;
    	border: none;
    	font-family: "fontello";
    	font-size: 1.5rem;
    	cursor: pointer;
    	position: absolute;
    	bottom: 17px;
    	right: 11px;
    	z-index: 4;

    	&::before {content: "\2716";}
        & span {
            display: none;
        }
    }
}
#zoomContent{
	position: absolute;
	top: 1em;
	left: 1em;
	right: 1em;
	bottom: 1em;
	background-color: white;
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border-radius: 0.8em;
    overflow: hidden;
}

a.htmlZmLnk {
    margin: 0.5em;

    &::before {
        font-family: "fontello";
        content: "\E818";
        margin-inline-end: 0.2em;
    }
}

/* -- ANIMATION ---------------------------------- */
*[style*="opacity: 1"] {
	opacity: 1;
	transition: opacity 0.5s ease 0.2s;
}
*[style*="visibility: hidden"],
*[style*="opacity: 0"] {
	opacity: 0;
	transition: opacity 0.4s ease;
}
.ssBkCo.animate {
	transition: top 1.5s ease;
}
.ssMask[style*="opacity: 0"] {
	transition: opacity 0.4s ease 0.4s;
}

.bkEmphasis .ssMask {
    background-color: var(--emphasisBG)!important;
}

/* *********************************************************
	Slideshow slide page styles
*/

#tplFootBanner {
	position: absolute;
	font-size: 0.9em;
	cursor:default;
	bottom: 0;
	right:0;
	background-color:#f2f2f2;
	height:20px;

	& .copyright {
    	font-style: italic;
    }
    & .version {
    	color: #6A9662;
    }
    & img {
    	vertical-align: middle;
    }
}
.legalInfo {
	margin-inline-start: 5px;
}

/* *********************************************************
	Content styles
*/
.bkBase_ti {
    .ssContainer > .bkBase > & {
        margin-block:0.5em;
        margin-inline-start: 0.5em;
    }
    .bkBase & {
    	margin-block-end: 0.5em;
    }
    .bkEvt & {
    	color: var(--extraFG);

    	&::before {
    	    font-family: "fontello";
    	    content: "\E829";
            margin-inline-end: 0.3em;
    	}
    }
}

.bkExtra{
	border: 2px solid var(--extraFG);
    border-radius: var(--borderRadius);
    padding: 1em;

    &::before {
        font-family: "fontello";
        content:"\002B";
        display: inline-block;
        text-align: center;
        border-radius: 50em;
        background-color: var(--extraBG);
        color: var(--extraFG);
        font-size: 0.8em;
        width: 2em;
        line-height: 2em;
        font-weight: normal;
        position: absolute;
        right: 1.5em;
    }
    & .bkBase_ti {
        color: var(--extraFG);
        padding-inline-end: 1em;
    }
}

.bkEmphasis {
	position: relative;
	background: var(--emphasisBG);
	color: var(--emphasisFG);
	border-radius: var(--borderRadius);
	padding: 1em;

	& .bkBase_ti {
        color: var(--emphasisTitle);
    }
	& .bkBase_co {
        font-weight: lighter;
    }

    & a {
        text-decoration: underline;
        color: var(--emphasisFG);
    }
}

/* bkTyped */
.bkTyped {
    padding: 1em;
    border: 2px solid var(--extraFG);
    border-radius: var(--borderRadius);

    & .bkBase_ti {
    	margin-block-start: 0;
    	display: flex;
    	align-items: center;
    	flex-wrap: wrap;
    }
    & i.type {
        font-size: 0.8em;
        font-style: normal;
        font-family: var(--textStyle);
        display: inline-flex;
        align-items: center;
        gap: 0.2em;
        padding: 0.2em 0.5em;
        background-color: var(--extraBG);
    }
}

/* Tables */
.txt_tb {
	margin: auto;
	border: 1px solid var(--borderColor);

	& caption {
    	font-style: italic;
    }
    & td,
    & th {
    	border: 1px solid var(--borderColor);
    	padding: 0.5em
    }
    & th {
    	background-color: #0000002e;
    }
    & thead {
    	border-block-end: 1px solid var(--borderColor);
    }
    & tfoot {
    	border-block-start: 1px solid var(--borderColor);
    }
    & p {
    	margin: 1px 0;
    }
    & .row_tbtr td,
    & .row_tbtr th {
        background-color: #0000002e;
    }
}

.layout_tb {
    & td {
        padding: 0.3em;
    }
}

.col_tbcl,
.txt_t_tbcl,
.txt_t_tbtr {
	background-color: #0000002e;
}
.txt_n_tbtd p {
	text-align: right;
}
.txt_w_tbtd p {
	text-align: center;
}
.txt_emphasis_is,
.txt_quote_ph,
.txt_special_ph {
	font-weight: bolder;
}
.resInFlow,
.molInFlow,
.stlInFlow {
	text-align: center;
}
.caption,
.resInFlow_ti,
.webCap_ti {
	color: var(--contentFG);
	font-style: italic;
	text-align: center;
	font-weight: lighter;
}
.webCap_co {
	text-align: center;
}

.quoteBk {
	background-color: #F3F3F3;
	padding: 1em;
	font-family: Georgia, dejavu serif condensed, serif;
}

.eWeb {
	margin:0 auto;
}

.resFra {
	margin:0 auto;
	position: relative;
	padding-block-start: 15px;
	font-size: 12pt !important;

	.imgInFlow & {
	    padding: 0;
	}
	.txtResResLft & {
    	margin-inline-end: 15px;
    }
    .txtResResRgt & {
    	margin-inline-start: 5px;
    }
}

.objInFlow {
	text-align:center;
}
.imgInFlow {
	text-align:center;
}
.imgInline img,
.objInline object {
	vertical-align: middle;
}

/* External links */
a.op_txt_ul::after,
a.txt_url_ul::after,
a.extUrl::after,
div.docUrl a::after {
	content: "\2b77";
	font-family: "fontello";
	margin-inline-start: 0.2em;
	display: inline-block;
	vertical-align: super;
	font-size: 0.5em;
	font-weight: normal;
}

/* FOOTER */
footer {
	display: flex;
	justify-content: space-between;
	padding: .2em .5em;
	background-color: var(--footerBG);
	color: var(--footerFG);
	font-size: .9em;

	.zenMode & {
    	display: none;
    }
}

/* ---------- animations ---------- */
div.sldAnmStart {
	position:absolute;
	width:100%;
	height:100%;
	cursor:pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.4);

	&::before {
        font-family: "fontello";
        content: "\23F5";
        font-size: 4lh;
        color: #fff;
    }
    &:hover::before {
        filter: brightness(0.8);
    }
}

div.sldAnmCtrl {
	background-color: var(--accentColor);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    border-radius: 50em;
    padding: 0.2em;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    bottom: -1em;
    box-shadow: 0 5px 10px -2px rgba(0,0,0,0.25);

    & span {
    	display: none;
    	position: absolute;
    }
    & button {
        text-transform: none;
        background-color: var(--slideBG);
        color: var(--accentColor);
        font-size: 1em;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50em;
        text-align: center;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        padding: 0;
        cursor: pointer;

        &:hover {
            background-color: color-mix(in oklab, var(--slideBG), #000 10%);
        }
        &::before {
            font-family: "fontello";
            font-style: normal;
            font-weight: normal;
        }
    }
}

button.sldAnmBtnPrv::before {content: "\2039";}
button.sldAnmBtnNxt::before {content: "\203A";}
button.sldAnmBtnPse::before {content: "\23F8";}
button.sldAnmBtnPly::before {content: "\23F5";}

/* === START - POINTER ====================================================== */
#pointer {
	display: none;
	content: " ";
	position: absolute;
	width: 3em;
	height: 3em;
	border-radius: 2em;
	background-color: var(--accentColor);
	opacity: 0.8;
	z-index: 100;

    .showPointer & {
    	display: block;
    }
    &::before {
        content: "";
        position: absolute;
        width: 3em;
        height: 3em;
    	border-radius: 2em;
    }
    &.clicked::before {
    	animation: pulse-animation 1s;
    }
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0 var(--accentColor);
		opacity: 50%;
	}
	100% {
		box-shadow: 0 0 0 35px var(--accentColor);
		opacity: 0;
	}
}
/* === STOP - POINTER ======================================================= */