/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Color defs ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

/* Win: Zahnrad > Personalization > Colors > Choose your color: User > Standard App Mode: Light/Dark */
/* Mac:  */

/* --cotxxx: text color */
/* --coixxx: invers text color */
/* --cobxxx: background color */
/* --cogxxx: gradient */
/* --cofxxx: frame/fill color */
/* --cosxxx: shadow color */

:root {
/* --------------------------- Text --------------------------- */

--coTxtBase:#444;
--coTxtInvBase:#fff;
--coTxtInpSrch:#333;
--coTxtHeaders:#333;
--coTxtSpanHeaders:#666;
--coTxtToolTips:#fff;
--coTxtSerp:#666;
--coTxtFooter:#fff;
--coTxtTrust:#fff;
--coTxtButStore:#000;

--coLnkBase:#BD320F;
--coLnkMenu:#0091d2;
--coLnkDialog:#AAD7EC;

--coH4Dialog:#666;

--coLiSpanLettings:#555;
--coLiSpanInfoBox:#555;


/* --------------------------- Background --------------------------- */

--coBGbase:#fff;

--coBGinvBase:#2c93c2;
--coBGInpSrch:#EAF4F9;

--coGradInvBaseB:#5AB1D9;
--coGradInvBaseC:#2c93c2;
--coGradInvBaseD:#206D90;
--coGradInvHovBaseB:#2E9BCC;
--coGradInvHovBaseC:#216E91;
--coGradInvHovBaseD:#184F69;

--coGradIcoLnkB:#5AB1D9;
--coGradIcoLnkC:#2c93c2;
--coGradIcoLnkD:#206D90;
--coGradHovIcoLnkB:#2E9BCC;
--coGradHovIcoLnkC:#216E91;
--coGradHovIcoLnkD:#184F69;

--coGradTopicHdB:#2c93c2;
--coGradTopicHdD:#2B8EBC;

--coGradTopTopHdB:#1297A3;
--coGradTopTopHdD:#118C96;

--coBGtoolTips:#2c93c2;

--coGradCTAb:#FBB036;
--coGradCTAc:#f78d1d;
--coGradCTAd:#F36F0E;

--coGradButStoreB:#CDFF66;
--coGradButStoreC:#B5FF1B;
--coGradButStoreD:#89CB00;

--coGradButFBikeB:#0091D0;
--coGradButFBikeC:#007CB2;
--coGradButFBikeD:#0074A7;

--coGradMenButDisB:#996C00;
--coGradMenButDisC:#755200;
--coGradMenButDisD:#4D3500;

--coGradHamB:#F04A3C;
--coGradHamC:#EE3323;
--coGradHamD:#BD1C0F;

--coBGtopSecs:#FFFFFF; /* FFFAF0 */
--coBGselTexts:#FAFCF8; /* FAFCF8 */

--coBGselectors:#F2F5EA; /* F2F5EA */
--coBGdcl:#F7EEEE; /* F7EEEE */
--coBGidx:#FFFFFF; /* FFFAF0 */

--coBGheaders:#E5ECFF;
--coBGdclHead:#E6FFFF;
--coBGidxHead:#E5ECFF;
--coBGselHead:#E8E3F2;

--coFrameInfoBox:#DCE6C9;
--coBGinfoBox:#E7EEDC;
--coBGmirella:#EAF4F9;

--coBGmaps:#FFFFFF; /* E8FBFC */
--coBGfacebook:#FFFFFF; /* EAF4F9 */
--coBGauthor:#F2F5EA; /* F2F5EA */

--coBGfooter:#544545;
--coBGtrust:#206D90;


/* --------------------------- Border --------------------------- */

--coBordTopics:#2c93c2;
--coBordTopTop:#1297A3;
--coBordBubble:#000;


/* --------------------------- Animation --------------------------- */

--coAPwhere:#ff6666;
--coAPspinRing: #ffffff;
--coAPspinTurn: #2c93c2;


/* --------------------------- Form --------------------------- */

--coFRMbutBord:#FF9D00;
--coFRMbutTick: #2c93c2;


/* --------------------------- Box Shadow --------------------------- */
/* https://rgbacolorpicker.com/rgba-to-hex */

--coBoxShadDialog:#000000;
--coBoxShadH2:#0000001a; /* = rgba 0,0,0,0.1 */
--coBoxShadH3:#00000026; /* = rgba 0,0,0,0.15 */
--coBoxShadFlags:#00000026; /* = rgba 0,0,0,0.15 */
--coBoxShadSec:#00000026; /* = rgba 0,0,0,0.1 */


/* --------------------------- Opacity --------------------------- */

--opaSea:0.1;
--opaBub:0.15;


/* --------------------------- Filter --------------------------- */

--filImg:none;
--filCOS:none;
}







/* ===================================== Dark - Fallback if Javascript does not work  ================================== */

@media (prefers-color-scheme: dark) {
:root {

/* --------------------------- Text --------------------------- */

--coTxtBase:#eee;
--coTxtInvBase:#eee;
--coTxtInpSrch:#eee;
--coTxtHeaders:#ddd;
--coTxtSpanHeaders:#bbb;
--coTxtToolTips:#eee;
--coTxtSerp:#666;
--coTxtFooter:#eee;
--coTxtTrust:#eee;
--coTxtButStore:#000;

--coLnkBase:#E06E52;
--coLnkMenu:#0091d2;
--coLnkDialog:#AAD7EC;

--coH4Dialog:#ccc;

--coLiSpanLettings:#aaa;
--coLiSpanInfoBox:#555;


/* --------------------------- Background --------------------------- */

--coBGbase:#26222A;
--coBGInpSrch:#332E38;

--coBGinvBase:#2c93c2;
--coGradInvBaseB:#5AB1D9;
--coGradInvBaseC:#2c93c2;
--coGradInvBaseD:#206D90;
--coGradInvHovBaseB:#2E9BCC;
--coGradInvHovBaseC:#216E91;
--coGradInvHovBaseD:#184F69;

--coGradIcoLnkB:#2c93c2;
--coGradIcoLnkC:#206D90;
--coGradIcoLnkD:#175069;
--coGradHovIcoLnkB:#216E91;
--coGradHovIcoLnkC:#184F69;
--coGradHovIcoLnkD:#134054;

--coGradTopicHdB:#2c93c2;
--coGradTopicHdD:#2B8EBC;

--coGradTopTopHdB:#1297A3;
--coGradTopTopHdD:#118C96;

--coBGtoolTips:#2E9BCC;

--coGradCTAb:#DA7408;
--coGradCTAc:#C4580A;
--coGradCTAd:#914208;

--coGradButStoreB:#CDFF66;
--coGradButStoreC:#B5FF1B;
--coGradButStoreD:#89CB00;

--coGradButFBikeB:#0091D0;
--coGradButFBikeC:#007CB2;
--coGradButFBikeD:#0074A7;

--coGradMenButDisB:#755200;
--coGradMenButDisC:#4D3500;
--coGradMenButDisD:#322200;

--coGradHamB:#F04A3C;
--coGradHamC:#EE3323;
--coGradHamD:#BD1C0F;

--coBGtopSecs:#4D3B33;
--coBGselTexts:#40492C;

--coBGselectors:#373F26;
--coBGdcl:#572A2A;
--coBGidx:#4D3B33;

--coBGheaders:#1C4C63;
--coBGdclHead:#2A5757;
--coBGidxHead:#1C4C63;
--coBGselHead:#2E263F;

--coFrameInfoBox:#485829;
--coBGinfoBox:#40492C;
--coBGmirella:#1C4C63;

--coBGmaps:#0A555B;
--coBGfacebook:#1C4C63;
--coBGauthor:#373F26;

--coBGfooter:#2E2933;
--coBGtrust:#175069;


/* --------------------------- Border --------------------------- */

--coBordTopics:#2c93c2;
--coBordTopTop:#1297A3;
--coBordBubble:#fff;


/* --------------------------- Animation --------------------------- */

--coAPwhere:#ffffff;
--coAPspinRing: #ffffff;
--coAPspinTurn: #2c93c2;


/* --------------------------- Form --------------------------- */

--coFRMbutBord:#FF8700;
--coFRMbutTick: #2c93c2;


/* --------------------------- Box Shadow --------------------------- */
/* https://rgbacolorpicker.com/rgba-to-hex */

--coBoxShadDialog:#000000;
--coBoxShadH2:#00000025; /* = rgba 0,0,0,0.1 */
--coBoxShadH3:#0000003a; /* = rgba 0,0,0,0.15 */
--coBoxShadFlags:#00000010; /* = rgba 0,0,0,0.15 */
--coBoxShadSec:#0000001a; /* = rgba 0,0,0,0.1 */


/* --------------------------- Opacity --------------------------- */

--opaSea:0.1;
--opaBub:0.15;


/* --------------------------- Filter --------------------------- */

--filImg:90%;
--filCOS:75%;

}}







/* ========================= Dark - For Javascript: document.documentElement.setAttribute("data-dalimode", "dark");  ========================== */

:root[data-dalimode="dark"] {
/* --------------------------- Text --------------------------- */

--coTxtBase:#eee;
--coTxtInvBase:#eee;
--coTxtInpSrch:#eee;
--coTxtHeaders:#ddd;
--coTxtSpanHeaders:#bbb;
--coTxtToolTips:#eee;
--coTxtSerp:#666;
--coTxtFooter:#eee;
--coTxtTrust:#eee;
--coTxtButStore:#000;

--coLnkBase:#E06E52;
--coLnkMenu:#0091d2;
--coLnkDialog:#AAD7EC;

--coH4Dialog:#ccc;

--coLiSpanLettings:#bbb;
--coLiSpanInfoBox:#bbb;


/* --------------------------- Background --------------------------- */

--coBGbase:#26222A;
--coBGInpSrch:#332E38;

--coBGinvBase:#2c93c2;
--coGradInvBaseB:#5AB1D9;
--coGradInvBaseC:#2c93c2;
--coGradInvBaseD:#206D90;
--coGradInvHovBaseB:#2E9BCC;
--coGradInvHovBaseC:#216E91;
--coGradInvHovBaseD:#184F69;

--coGradIcoLnkB:#2c93c2;
--coGradIcoLnkC:#206D90;
--coGradIcoLnkD:#175069;
--coGradHovIcoLnkB:#216E91;
--coGradHovIcoLnkC:#184F69;
--coGradHovIcoLnkD:#134054;

--coGradTopicHdB:#2c93c2;
--coGradTopicHdD:#2B8EBC;

--coGradTopTopHdB:#1297A3;
--coGradTopTopHdD:#118C96;

--coBGtoolTips:#2E9BCC;

--coGradCTAb:#DA7408;
--coGradCTAc:#C4580A;
--coGradCTAd:#914208;

--coGradButStoreB:#CDFF66;
--coGradButStoreC:#B5FF1B;
--coGradButStoreD:#89CB00;

--coGradMenButDisB:#755200;
--coGradMenButDisC:#4D3500;
--coGradMenButDisD:#322200;

--coGradHamB:#F04A3C;
--coGradHamC:#EE3323;
--coGradHamD:#BD1C0F;

--coBGtopSecs:#4D3B33;
--coBGselTexts:#40492C;

--coBGselectors:#373F26;
--coBGdcl:#572A2A;
--coBGidx:#4D3B33;

--coBGheaders:#1C4C63;
--coBGdclHead:#2A5757;
--coBGidxHead:#1C4C63;
--coBGselHead:#2E263F;

--coFrameInfoBox:#485829;
--coBGinfoBox:#40492C;
--coBGmirella:#1C4C63;

--coBGmaps:#0A555B;
--coBGfacebook:#1C4C63;
--coBGauthor:#373F26;

--coBGfooter:#2E2933;
--coBGtrust:#175069;


/* --------------------------- Border --------------------------- */

--coBordTopics:#2c93c2;
--coBordTopTop:#1297A3;
--coBordBubble:#fff;


/* --------------------------- Animation --------------------------- */

--coAPwhere:#ffffff;
--coAPspinRing: #ffffff;
--coAPspinTurn: #2c93c2;


/* --------------------------- Form --------------------------- */

--coFRMbutBord:#FF8700;
--coFRMbutTick: #2c93c2;


/* --------------------------- Box Shadow --------------------------- */
/* https://rgbacolorpicker.com/rgba-to-hex */

--coBoxShadDialog:#000000;
--coBoxShadH2:#00000025; /* = rgba 0,0,0,0.1 */
--coBoxShadH3:#0000003a; /* = rgba 0,0,0,0.15 */
--coBoxShadFlags:#00000010; /* = rgba 0,0,0,0.15 */


/* --------------------------- Opacity --------------------------- */

--opaSea:0.1;
--opaBub:0.15;


/* --------------------------- Filter --------------------------- */

--filImg:90%;
--filCOS:85%;
}







/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ General ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

body { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif }
body { color:var(--coTxtBase); background:var(--coBGbase); -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; text-rendering:optimizeSpeed }

html { scroll-behavior:smooth; -webkit-touch-callout:none }
article,footer,header,figure,nav,section,body { margin:0; padding:0 }
strong { font-weight:600 }
img { border-style:none; filter:brightness(var(--filImg)) }
a { color:var(--coLnkBase); user-select:none; text-decoration:underline; transition:filter 0.2s }
.clear { clear:both; float:none }
.posRel { position:relative }

@media (hover:hover) {
	a:hover { filter:brightness(60%); transition:filter 0.2s }
	button:hover { filter:brightness(60%); transition:filter 0.2s }
}





/* ======================= Font sizing ====================== */

h1 { font-size:24px; line-height:1 }

@media screen and ( max-width:549px ){ h2 { font-size:20px; line-height:24px } h2 span { font-size:18px } }
@media screen and ( min-width:550px ){ h2 { font-size:22px; line-height:30px } h2 span { font-size:20px } }

@media screen and ( max-width:549px ){ h3 { font-size:17px; line-height:22px } }
@media screen and ( min-width:550px ){ h3 { font-size:18px; line-height:27px } }

p { font-size:16px; line-height:23px }

.fsb24 { font-size:24px!important; line-height:16px!important; font-weight:600!important }

.lh24 { line-height:24px!important }
.lh30 { line-height:30px!important }




/* ======================= Buttons ====================== */
/* https://stackoverflow.com/questions/66257979/weird-blue-outline-border-search-button-ios */

button { cursor:pointer!important; border:none!important; outline:0!important; box-shadow:0 0 0 rgba(0,0,0,0)!important; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }






/* ========================= Heights ======================= */

.hei01 { height:1px!important; clear:both; float:none }
.hei02 { height:2px!important; clear:both; float:none }
.hei03 { height:3px!important; clear:both; float:none }
.hei04 { height:4px!important; clear:both; float:none }
.hei05 { height:5px!important; clear:both; float:none }
.hei06 { height:6px!important; clear:both; float:none }
.hei07 { height:7px!important; clear:both; float:none }
.hei08 { height:8px!important; clear:both; float:none }
.hei09 { height:9px!important; clear:both; float:none }
.hei10 { height:10px!important; clear:both; float:none }
.hei15 { height:15px!important; clear:both; float:none }
.hei20 { height:20px!important; clear:both; float:none }
.hei30 { height:30px!important; clear:both; float:none }
.hei40 { height:40px!important; clear:both; float:none }
.hei50 { height:50px!important; clear:both; float:none }
.hei60 { height:60px!important; clear:both; float:none }
.hei70 { height:70px!important; clear:both; float:none }
.hei80 { height:80px!important; clear:both; float:none }
.hei90 { height:90px!important; clear:both; float:none }
.hei100 { height:100px!important; clear:both; float:none }
.hei110 { height:110px!important; clear:both; float:none }
.hei120 { height:120px!important; clear:both; float:none }
.hei130 { height:130px!important; clear:both; float:none }
.hei140 { height:140px!important; clear:both; float:none }
.hei150 { height:150px!important; clear:both; float:none }




/* ========================= Heights ======================= */

.left30 { left:30px!important }





/* ========================= Event buttons ======================= */

.wrpDefBut { display:flex; justify-content:center; margin:30px 30px }
.butEVT { font-family:inherit; font-size:16px; line-height:16px; padding:8px 13px 10px 13px; border-radius:5px; user-select:none }
.butEVT { color:var(--coTxtInvBase); background:var(--coGradCTAc); background: linear-gradient(to bottom right, var(--coGradCTAb), var(--coGradCTAd)) }





/* ========================= CTA buttons ======================= */

.butCTA { display:flex; justify-content:center }
.butCTA a { font-size:16px; line-height:16px; text-align:center; border:none; text-decoration:none; padding:8px 13px 10px 13px; border-radius:5px; user-select:none }
.butCTA a { color:var(--coTxtInvBase); background:var(--coGradCTAc); background: linear-gradient(to bottom right, var(--coGradCTAb), var(--coGradCTAd)) }

@-moz-document url-prefix() { .butCTA a { padding:8px 13px 12px 13px } }

.butStore { display:flex; justify-content:center; margin-top:20px }
.butStore a { font-size:16px; line-height:16px; text-align:center; border:none; text-decoration:none; padding:8px 13px 10px 13px; border-radius:5px; user-select:none }
.butStore a { color:var(--coTxtButStore); background:var(--coGradButStoreC); background: linear-gradient(to bottom right, var(--coGradButStoreB), var(--coGradButStoreD)) }

@-moz-document url-prefix() { .butStore a { padding:8px 13px 11px 13px } }

.butFBike { display:flex; justify-content:center; margin-top:20px }
.butFBike a { font-size:16px; line-height:16px; text-align:center; border:none; text-decoration:none; padding:8px 13px 10px 13px; border-radius:5px; user-select:none }
.butFBike a { color:var(--coTxtInvBase); background:var(--coGradButFBikeC); background: linear-gradient(to bottom right, var(--coGradButFBikeB), var(--coGradButFBikeD)) }

@-moz-document url-prefix() { .butFBike a { padding:8px 13px 11px 13px } }





/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Logo / Search / Menu Button ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

header { margin-top:20px }



/* ========================= wrpLogSrchMen ======================= */

.wrpLogOnly { display:flex; flex-direction:column; align-items:center; width:100%; height:90px; overflow:hidden }
.wrpLogSrchMen { display:flex; flex-direction:column; align-items:center; width:100%; height:150px }
/*
header .wrpLogSrchMen { position:sticky; top:0; background:var(--coBGbase) }
footer .wrpLogSrchMen { position:relative }
*/


/* ========================= Logo ========================= */

.wrpLogo { display:flex; justify-content:center; width:100%; height:80px }
.wrpLogo img { width:195px; height:60px; padding:13px 0 12px 0 }




/* ====================== Search Bar + "Hamburger" ====================== */

input[type="search"]::-webkit-search-cancel-button { user-select:none; cursor:pointer; transition:filter 0.2s }

.wrpSrchMen { display:flex; justify-content:center; align-items:center; margin-top:20px }
.wrpSrchMen form { display:flex }


/* ---------------- Search input --------------- */
/* font-size at least 16px to avoid auto zoom on iphone */

.inpSrch { border:3px solid var(--coBGinvBase); color:var(--coTxtInpSrch); background:var(--coBGInpSrch); font-size:16px; padding:5px; height:36px; outline:none; border-right:none; border-radius:5px 0 0 5px; transition: 0.5s }
.inpSrch:focus { border:3px solid var(--coGradHamC); border-right:none }

button.butSrch { position:relative; width:40px; height:36px; border:1px solid var(--coBGinvBase); background:var(--coBGinvBase); border-radius:0 5px 5px 0; user-select:none; cursor:pointer; transition:filter 0.2s }
button.butSrch svg { position:absolute; top:7px; left:9px; }




/* ---------------- "Hamburger" (= Menu popup button) --------------- */

button.butHam { margin-left:30px; font-size:16px; line-height:16px; border:none; border-radius:5px; user-select:none; cursor:pointer; transition:filter 0.2s }
button.butHam { color:var(--coTxtInvBase); background:var(--coGradHamC); background: linear-gradient(to bottom right, var(--coGradHamB), var(--coGradHamD)) }





/* ---------------- Dark / Light toggle button --------------- */

.butDaLi { position:relative; display:flex; justify-content:center; align-items:center; width:40px; height:40px; padding:0; margin:0; border:none; border-radius:50%; user-select:none; cursor:pointer }
.butDaLi { background:var(--coGradInvBaseC); background: linear-gradient(to bottom right, var(--coGradInvBaseB), var(--coGradInvBaseD)) }

.icoDaLi { position:absolute; top:5px; left:5px; opacity:0; transition: opacity 0.3s }
.linkicon { fill:var(--coTxtInvBase) }	/* used in lnk.js for svg sun/moon icon */

.aniPulse { position:absolute; left:0; top:0; height:33px; width:33px; border:3px solid #ffffff; border-radius:50%; animation:keyPulseDali 3s ease-out; animation-iteration-count:infinite; opacity:0 }


/* ---------------- Size + Position --------------- */

@media screen and ( max-width:359px ) {
	.butDaLi { margin-right:8px }
	.inpSrch { width:150px; font-size:13px }
	button.butHam { margin-left:10px; padding:9px 12px 9px 12px }
	@-moz-document url-prefix() { button.butHam { margin-left:10px; padding:7px 12px 11px 12px } }
}
@media screen and ( min-width:360px ) and ( max-width:399px ) {
	.butDaLi { margin-right:12px }
	.inpSrch { width:170px }
	button.butHam { margin-left:15px; padding:9px 12px 9px 12px }
	@-moz-document url-prefix() { button.butHam { margin-left:15px; padding:8px 12px 10px 12px } }
}
@media screen and ( min-width:400px ) and ( max-width:639px ) {
	.butDaLi { margin-right:14px }
	.inpSrch { width:190px }
	button.butHam { margin-left:20px; padding:9px 17px 9px 17px }
	@-moz-document url-prefix() { button.butHam { margin-left:20px; padding:8px 17px 10px 17px } }
}
@media screen and ( min-width:640px ) {
	.butDaLi { margin-right:15px }
	.inpSrch { width:400px }
	button.butHam { margin-left:20px; padding:9px 20px 9px 20px }
	@-moz-document url-prefix() { button.butHam { margin-left:20px; padding:7px 20px 9px 20px } }
}





/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Title ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

#wrpTitleOut { display:flex; justify-content:center; margin:20px 10px 10px 10px }
#wrpTitleIn { display:flex; justify-content:center; width:100%; max-width:640px; border-top-left-radius:10px; border-top-right-radius:10px }
#wrpTitleIn { background:var(--coBGinvBase) }

#wrpTitleIn h1 { text-align:center; line-height:1.3em; padding:10px 0 15px 0; color:var(--coTxtInvBase) }
#wrpTitleIn h1 span { font-weight:500 }






/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Hero Image ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

#wrpHero { position:relative; display:flex; justify-content:center; height:364px; margin:0 10px; overflow:hidden }
#wrpHero figure img, #wrpHero figure video { position:absolute; left:50%; top:182px; width:640px; height:360px; transform:translate(-50%, -50%); border-bottom-left-radius:10px; border-bottom-right-radius:10px }

#bgHero { display:none; position:absolute; width:640px; height:360px; top:2px; background-color:var(--coBGinvBase); border-bottom-left-radius:10px; border-bottom-right-radius:10px }

#butWhere, #butStart, #butPauseCont { background:none }

#butWhere:hover, #butStart:hover, #butPauseCont:hover { filter:none }
#butWhere img { position:absolute; left:calc(50% - 17px); top:20px; width:34px }

#butStart img { position:absolute; left:calc(50% - 25px); top:155px; width:50px }
#butStart .aniPlay { position:absolute; left:calc(50% - 34px); top:146px; height:60px; width:60px; border:4px solid #ffffff; border-radius:50%; animation:keyPulseStVid 2s ease-out; animation-iteration-count:infinite; opacity:0 }

#butPauseCont { opacity:0 }
#butPauseCont img { position:absolute; left:calc(50% - 20px); top:300px; width:40px }

#spinHero { display:none; position:absolute; top:152px; left:calc(50% - 28px); height:50px; width:50px }
#spinHero { border:4px solid var(--coAPspinRing); border-radius:50%; border-top-color:var(--coAPspinTurn); animation: keySpin 2s linear infinite }

#titHero { display:none; position:absolute; justify-content:center; align-items:center; text-align:center; height:360px; font-weight:600; color:#fff; opacity:0 }

@media screen and ( max-width:659px ) {
	#wrpHero p { width:88% }
	#titHero { width:90%; font-size:24px }
}

@media screen and ( min-width:660px ) {
	#wrpHero p { width:600px }
	#titHero { width:550px; font-size:30px }
}

.wrpByline { display:flex; justify-content:center; align-items:center; margin-top:30px }
.wrpByline img { width:40px; height:40px }
.wrpByline p { margin:0 0 7px 7px; font-size:16px }








/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Pad ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

#wrpPad { display:flex; flex-direction:column; align-items:center }




/* ========================= Topics ========================= */

.wrpTopics, .wrpTopTop { display:flex; flex-direction:column; justify-content:center }

.headTopics, .headTopTop { display:flex; justify-content:center }
.headTopics span, .headTopTop span { font-size:18px; font-weight:600; line-height:18px; padding:8px 18px; border-top-left-radius:5px; border-top-right-radius:5px }

.headTopics span { color:var(--coTxtInvBase); background:linear-gradient(to bottom, var(--coGradTopicHdD), var(--coGradTopicHdB)) }
.headTopTop span { color:var(--coTxtInvBase); background:linear-gradient(to bottom, var(--coGradTopTopHdD), var(--coGradTopTopHdB)) }

.wrpAllTopicButs, .wrpTopTopicButs { display:flex; justify-content:center }
.wrpAllTopicButs { border:7px solid var(--coBordTopics); border-radius:10px }
.wrpTopTopicButs { border:7px solid var(--coBordTopTop); border-radius:10px }

.wrpTopicBlk, .wrpTopTopBlk { display:flex; justify-content:center }

.butTopic { margin:0 6px }
.butTopic a { font-size:16px; line-height:16px; white-space:nowrap; padding:3px 7px 5px 7px; border:none; border-radius:5px; text-decoration:none; user-select:none }
.butTopic a { color:var(--coTxtInvBase); background:linear-gradient(to bottom right, var(--coGradCTAb), var(--coGradCTAd)) }

@-moz-document url-prefix() { .butTopic a { padding:3px 7px 6px 7px } }

@media screen and ( max-width:499px ) {
	.wrpTopics { margin-top:50px}
	.wrpTopTop { margin:5px 0 60px 0 }
	.wrpAllTopicButs, .wrpTopTopicButs { flex-direction:column; padding:10px 12px }
	.sepTopicBlks, .sepTopTopBlks { display:none }
	.wrpTopicBlk, .wrpTopTopBlk { margin:10px 0 }
}

@media screen and (min-width:500px) and ( max-width:899px ) {
	.wrpTopics { margin-top:50px}
	.wrpTopTop { margin:10px 0 80px 0 }
	.wrpAllTopicButs { flex-direction:column; padding:10px 12px }
	.wrpTopTopicButs { flex-direction:row; padding:17px 10px }
	.sepTopicBlks { display:none }
	.sepTopTopBlks { margin:0 5px; color:var(--coBordTopTop) }
	.wrpTopicBlk { margin:10px 0 }
}

@media screen and ( min-width:900px ) {
	.wrpTopics { margin-top:80px }
	.wrpTopTop { margin:20px 0 90px 0 }
	.wrpAllTopicButs, .wrpTopTopicButs { flex-direction:row; padding:17px 10px }
	.sepTopicBlks { margin:0 5px; color:var(--coBordTopics) }
	.sepTopTopBlks { margin:0 5px; color:var(--coBordTopTop) }
}


/* ========================= Colors of Sicily ========================= */
/* https://stackoverflow.com/questions/56408834/image-in-flex-container-not-centering-after-defining-width-and-height  --- Don't use images as flex items. There are lots of bugs. Instead, wrap the image in a div, and make the div the flex item. */
/*
.wrpCOS { position:relative; height:200px; margin:0 10px; align-self:stretch; overflow:hidden } * Mit align-self:stretch vermeidet man eine feste width *
.wrpCOS img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:10px; filter:brightness(var(--filCOS)) }
.wrpCOS p { position:absolute; left:50%; bottom:-13px; transform:translate(-50%, -50%); font-size:14px; padding:2px 15px 5px 15px; border-radius:5px; background:var(--coBGmirella); white-space:nowrap }
*/





/* ===================== Language Selection ( home page only) ======================= */

.wrpLbox { display:flex; justify-content:center; flex-wrap:wrap; border-radius:10px } /* ; background:var(--coFrameInfoBox) */

/*
@media screen and ( max-width:1399px ){ .wrpLbox{ flex-direction:column; align-items:center; padding:20px 0 } }
@media screen and ( min-width:1400px ){ .wrpLbox{ justify-content:center; padding:20px } }
*/

.wrpLbox .blkLang { width:300px; text-align:center; padding:25px 10px 30px 10px; margin:20px; background:var(--coBGinfoBox); border-radius:10px }
.wrpLbox .figFlag { margin-bottom:15px }
.wrpLbox .figFlag img { width:80px; height:46px; box-shadow: 0 1px 4px 0 var(--coBoxShadFlags) }
.wrpLbox .blkLang p { margin:5px }
.wrpLbox .blkLang .butCTA { margin-top:15px }

.wrpLbox .figLogo { margin-bottom:15px }
.wrpLbox .figLogo img { width:195px; height:60px }







/* ========================= Top sections ======================== */

/* --------------------------- figure ------------------------- */
.figPad { padding:0 20px }
.figPad img { max-width:640px; width:100%; height:auto; border-radius:10px }
.figPad figcaption { text-align:center }


/* ---------------------------- text ------------------------- */
.secTop, .secIDX, .secDCL { display:flex; flex-direction:column; max-width:540px; padding-top:1px; margin:0 10px; border-radius:10px } /* padding-top:1px to disable margin-collapsing */

.secTop { background:var(--coBGtopSecs); box-shadow: 1px 1px 3px 1px var(--coBoxShadSec) }
.secDCL { background:var(--coBGdcl); box-shadow: 1px 1px 3px 1px var(--coBoxShadSec) }
.secIDX { background:var(--coBGidx); box-shadow: 1px 1px 3px 1px var(--coBoxShadSec) }

.secTop .wrpH2, .secIDX .wrpH2, .secDCL .wrpH2 { display:flex; align-items:center; max-width:500px }

.secTop .wrpH2 h2, .secIDX .wrpH2 h2, .secDCL .wrpH2 h2 { display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 10px 0 0; padding:8px 20px 12px 20px; border-radius:10px; box-shadow: 1px 1px 1px 0px var(--coBoxShadH2) }
.secTop .wrpH2 h2 span, .secIDX .wrpH2 h2 span, .secDCL .wrpH2 h2 span { margin-top:4px; color:var(--coTxtSpanHeaders) }

.secTop .wrpH2 h2 { color:var(--coTxtHeaders); background:var(--coBGheaders) }
.secDCL .wrpH2 h2 { color:var(--coTxtHeaders); background:var(--coBGdclHead) }
.secIDX .wrpH2 h2 { color:var(--coTxtHeaders); background:var(--coBGidxHead) }

@media screen and ( max-width:549px ){ .secTop h3, .secIDX h3, .secDCL h3 { font-size:16px; line-height:18px } }
@media screen and ( min-width:550px ){ .secTop h3, .secIDX h3, .secDCL h3 { font-size:17px; line-height:20px } }

@media screen and ( max-width:699px ) { .secTop .wrpH2, .secIDX .wrpH2, .secDCL .wrpH2 { margin:-25px 0 0 5px } }
@media screen and ( min-width:700px ) { .secTop .wrpH2, .secIDX .wrpH2, .secDCL .wrpH2 { margin:-25px 0 0 -20px } }

.secTop .wrpP, .secIDX .wrpP, .secDCL .wrpP { padding:5px 40px 25px 40px }
.secSel .wrpP ul { margin-top:1px!important }

.secTop .intro, .secIDX .intro, .secDCL .intro { text-align:center }

.secTop ul, .secIDX ul, .secDCL ul { padding-left:50px; padding-right:60px; margin-top:-5px }
.secTop li, .secIDX li, .secDCL li { padding-bottom:8px } /*line-height:1.7*/
.secTop li span, .secIDX li span, .secDCL li span { color:var(--coLiSpanLettings) }

@media screen and ( max-width:499px ) { .secTop ul, .secIDX ul, .secDCL ul { padding-left:30px; padding-right:0 } }





/* ========================= Legal sections ======================== */

.secLeg { padding:0 20px; max-width:32em }
.secLeg li { padding:4px 0 } /*line-height:1.7*/
.secLeg .intro p { text-align:center; margin:0.6em }







/* ========================= Selectors ======================== */

.wrpSel { display:flex; flex-direction:column; margin:0 10px; background:var(--coBGselectors); box-shadow: 1px 1px 3px 1px var(--coBoxShadSec); border-radius:10px }
.wrpSel .teaSel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 20px; margin-top:-15px }
.wrpSel .teaSel p { width:100%; max-width:500px; margin:10px 0 }

.wrpSel .wrpH2 { display:flex; justify-content:center; align-items:center; margin-top:-25px }

.wrpSel .wrpH2 h2 { display:inline; text-align:center; margin:0 10px 0 0; padding:7px 20px 9px 20px; border-radius:10px; box-shadow: 1px 1px 1px 0px var(--coBoxShadH2) }
.wrpSel .wrpH2 h2 span { color:var(--coTxtSpanHeaders) }

.wrpSel .wrpH2 h2 { color:var(--coTxtHeaders); background:var(--coBGselHead) }


/* ---------------------- Selector sections -------------------------- */

.secSel { display:flex; align-items:center }

.secSel img { border-radius:10px }
.secSel figcaption { text-align:center }

.secSel .txtSel { max-width:520px; border-radius:10px; background:var(--coBGselTexts) }

.secSel .txtSel .wrpH3 { display:flex; align-items:center }

.secSel .txtSel .wrpH3 h3 { display:inline; text-align:center; margin:0 10px 0 0; padding:5px 17px 5px 17px; border-radius:10px; box-shadow: 1px 1px 1px 0px var(--coBoxShadH3) }
.secSel .txtSel .wrpH3 h3 span { color:var(--coTxtSpanHeaders) }

.secSel .txtSel .wrpH3 h3 { color:var(--coTxtHeaders); background:var(--coBGselHead) }

.secSel .txtSel ul { padding-left:30px; margin-top:-8px }
.secSel .txtSel li { margin-bottom:5px }

@media screen and ( max-width:359px ) {
	.wrpSel { padding:1px 10px 0px 10px } /* padding-top:1px to disable margin-collapsing */
	.secSel { flex-direction:column }
	.secSel img { width:280px; height:211px }
	.secSel figure { margin-bottom:30px }
	.secSel figcaption { margin-bottom:10px }
	.secSel .wrpH3 { margin:-20px 0 0 5px }
	.secSel .txtSel .wrpP { padding:5px 20px 30px 20px }
}
@media screen and (min-width:360px) and (max-width:449px) {
	.wrpSel { padding:1px 20px 0px 20px }
	.secSel { flex-direction:column }
	.secSel img { width:300px; height:225px }
	.secSel figure { margin-bottom:30px }
	.secSel figcaption { margin-bottom:10px }
	.secSel .wrpH3 { margin:-20px 0 0 5px }
	.secSel .txtSel .wrpP { padding:5px 20px 30px 20px }
}
@media screen and (min-width:450px) and (max-width:899px) {
	.wrpSel { padding:1px 30px 0px 30px }
	.secSel { flex-direction:column }
	.secSel img { width:360px; height:270px }
	.secSel figure { margin-bottom:30px }
	.secSel figcaption { margin-bottom:10px }
	.secSel .wrpH3 { margin:-20px 0 0 -16px }
	.secSel .txtSel .wrpP { padding:5px 30px 30px 30px }
}
@media screen and ( min-width:850px ) {
	.wrpSel { padding:1px 30px 0px 30px }
	.secSel img { width:360px; height:270px }
	.secSel figure { margin-right:30px }
	.secSel .wrpH3 { margin:-20px 0 0 -16px }
	.secSel .txtSel .wrpP { padding:5px 30px 30px 30px }
}






/* ========================= Anchor links + Tool tips ========================= */

.wrpIcoLnk { position:relative; display:flex; justify-content:center; align-items:center; flex:none; border-radius:50%; user-select:none; cursor:pointer } /* flex:none = flex-grow:0 + flex-shrink:0 + flex-basis:auto */
.wrpIcoLnk { background:var(--coGradIcoLnkC); background: linear-gradient(to bottom right, var(--coGradIcoLnkB), var(--coGradIcoLnkD)) } /* transition does not work on gradients */
.wrpIcoLnk:hover { background:var(--coGradHovIcoLnkC); background: linear-gradient(to bottom right, var(--coGradHovIcoLnkB), var(--coGradHovIcoLnkD)) } /* transition does not work on gradients */

.wrpIcoLnk button { display:flex; width:20px; height:12px; padding:0 }

.wrpIcoLnk .butLnkIco { background:none }
.wrpIcoLnk .butLnkIco:hover { filter:none }

.wrpIcoLnk.dimSmall { width:34px; height:34px; margin-right:8px }
.wrpIcoLnk.dimLarge { width:40px; height:40px; margin-right:10px }


/* ----------------------------- Tool tips ------------------------------ */

.wrpTT { display:flex; align-items:center; visibility:hidden; opacity:0; transform:scale(0,0); position:absolute; top:0px; max-width:250px; font-size:14px; padding:0 15px 1px 15px; color:var(--coTxtToolTips); background:var(--coBGtoolTips); border-radius:10px; white-space:nowrap; transition:all 0.3s }

.wrpIcoLnk.dimSmall .wrpTT { left:39px; height:34px } 
.wrpIcoLnk.dimLarge .wrpTT { left:45px; height:40px } 







/* ========================= Bike icon ========================= */

.wrpIcoBike { position:absolute; top:10px; left:10px; width:50px; height:50px; background-color:red }
.wrpIcoBike { display:flex; justify-content:center; align-items:center; flex:none; border-radius:50%; user-select:none; cursor:pointer }
.wrpIcoBike { background:var(--coGradIcoLnkC); background: linear-gradient(to bottom right, var(--coGradIcoLnkB), var(--coGradIcoLnkD)) }
.wrpIcoBike:hover { background:var(--coGradHovIcoLnkC); background: linear-gradient(to bottom right, var(--coGradHovIcoLnkB), var(--coGradHovIcoLnkD)) }

.wrpIcoBike .butBikeIco { background:none }
.wrpIcoBike .butBikeIco:hover { filter:none }












/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Social Boxes ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

#wrpSoc { display:flex; flex-direction:column; align-items:center }

.secMaps, .secFB, .secAut { display:flex; align-items:center; max-width:700px; border-radius:10px; margin:0 10px }

.secMaps { background:var(--coBGmaps); box-shadow: 1px 1px 3px 1px var(--coBoxShadSec) }
.secFB { background:var(--coBGfacebook); box-shadow: 1px 1px 3px 1px var(--coBoxShadSec) }
.secAut { background:var(--coBGauthor); box-shadow: 1px 1px 3px 1px var(--coBoxShadSec) }

.socImg img { width:200px; height:200px }
.socTxt h2 { text-align:center; margin:0 }

.secMaps .socTxt ul { padding-left:50px; margin-top:-10px }
.secMaps .socTxt li { padding-bottom:8px }

@media screen and (max-width:419px) {
	.secMaps, .secFB, .secAut {flex-direction:column; align-items:center; padding:20px 15px 30px 15px }
	.socImg img { margin-bottom:20px }
}
@media screen and (min-width:420px) and ( max-width:699px ) {
	.secMaps, .secFB, .secAut {flex-direction:column; align-items:center; padding:30px 20px 30px 30px }
	.socImg img { margin-bottom:20px }
}
@media screen and (min-width:700px) {
	.secMaps, .secFB, .secAut {justify-content:center; padding:20px 20px 30px 30px }
	.socImg img { margin-right:20px }
}








/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Author page ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

#wrpAut { display:flex; flex-direction:column; align-items:center }

.secAutBlk { display:flex; align-items:center; max-width:700px; border-radius:10px; margin:0 10px }

.bgAutAut { background:var(--coBGfacebook) }
.bgAutLnk { background:var(--coBGauthor) }

.autImg img { width:200px; height:200px }

.autTxt h2, .autTxt h3 { text-align:center; margin-top:10px }
.autTxt h4 { margin-bottom:0 }
.autTxt ul { padding-left:20px; margin:8px 0 12px 0 }
.autTxt li { margin-bottom:10px }

@media screen and (max-width:419px) {
	.secAutBlk { flex-direction:column; align-items:center; padding:20px 15px 30px 15px }
	.autImg img { margin-bottom:20px }
}
@media screen and (min-width:420px) and ( max-width:699px ) {
	.secAutBlk { flex-direction:column; align-items:center; padding:30px 20px 30px 30px }
	.autImg img { margin-bottom:20px }
}
@media screen and (min-width:700px) {
	.secAutBlk { justify-content:center; padding:20px 30px 30px 30px }
	.autImg img { margin-right:20px }
}









/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Footer ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

footer { display:flex; flex-direction:column; align-items:center; padding:10px 0 50px 0; margin-top:100px; color:var(--coTxtFooter); background:var(--coBGfooter); overflow:hidden }

footer img { width:195px; height:60px }

footer .legal { margin-bottom:10px }
footer .legal a { color:var(--coTxtFooter) }

footer .copyR { font-weight:600; margin:5px 0 20px 0 }




/* ============================ Trust ==============================*/
/* https://www.youtube.com/watch?app=desktop&v=2JxffkU4cEY */

.wrpTrustOut { display:flex; justify-content:center; flex-direction:column; margin:0px 0 30px 0; padding:15px 20px 20px 20px; color:var(--coTxtTrust); background:var(--coBGtrust); border-radius:20px }
.wrpTrustOut .head { text-align:center; font-size:14px }
.wrpTrustIn { display:flex; justify-content:center }
.wrpTrustLR { display:flex }
.wrpTrustBox { display:flex; flex-direction:column; justify-content:center; align-items:center; width:120px; padding:10px 0; margin:0 10px }
.wrpTrustBox p { text-align:center; font-size:14px; font-style:italic; margin:10px 0 0 0 }

@media screen and ( max-width:599px ) { .wrpTrustIn { flex-direction:column; } }
@media screen and ( min-width:600px ) { .wrpTrustIn { flex-direction:row; } }

@media (hover:hover) { .wrpTrustBox:hover { filter:brightness(60%); user-select:none; cursor:pointer; transition:0.2s } }









/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Dialogs ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter */
/* https://codepen.io/fmontes/pen/yLveywJ */
/* https://web.dev/articles/building/a-dialog-component */
/* https://blog.mayank.co/is-dialog-enough */

dialog { display:block; inset:0; position:fixed; top:30px; overflow:hidden; transition:opacity 0.5s }
dialog:not([open]) { pointer-events:none; opacity:0 }	/* Important: without pointer-events:none links inside the dialog are enabled and create confusion */
dialog::backdrop { -webkit-backdrop-filter:blur(3px) brightness(70%); backdrop-filter:blur(3px) brightness(70%) }

html:has(dialog[open]) { overflow:hidden }		/* Disables scrolling the page behind the dialog popup */
.scrollable { overflow-y:auto }					/* Inner div has to be scrollable */
/*
Customizing scrollbars on mobile devices is not directly supported by standard CSS.
Mobile browsers typically use the default scroll behavior provided by the operating system, making it difficult to style the scrollbars.
*/



/* ========================= Dialogs - Close button ========================= */

button.butClose { position:absolute; top:5px; right:15px; width:40px; height:40px; padding:0 0 10px 10px; background:none; border:none; cursor:pointer; transition:filter 0.2s }
button.butClose img { width:40px; height:40px }



/* ============================= Dialog - Wait ========================== */

#diaWait { max-height:75vh; max-width:350px; padding:30px 80px 30px 60px; background:var(--coBGbase); border:none; border-radius:5px; box-shadow:0 0 20px 0 var(--coBoxShadDialog) }
#diaWait p { text-align: center; color:var(--coTxtBase)}



/* ============================= Dialog - Serp ========================== */

#diaSerp { max-height:75vh; width:80vw; max-width:500px; background:var(--coBGbase); border:none; border-radius:5px; box-shadow:0 0 20px 0 var(--coBoxShadDialog) }
#diaSerp h3 { text-align: center; margin:0; color:var(--coH4Dialog); overflow:hidden }
#diaSerpMsg { text-align: center; margin-top:15px; color:var(--coTxtBase) }

#diaSerp .scrollable { height:31vh }

#diaSerp ul { list-style-type:none; padding:0 5px 0 10px }
#diaSerp ul:first-of-type { margin-top:0 }
#diaSerp li { margin-top:10px; color:var(--coTxtSerp) }
#diaSerp a { color:var(--coLnkMenu); text-decoration:none }



/* ============================= Dialog - Menu  =========================== */


#diaMenu { max-height:75vh; max-width:350px; width:80vw; background:var(--coBGbase); border:none; border-radius:5px; box-shadow:0 0 20px 0 var(--coBoxShadDialog) }
#diaMenu h3 { text-align:center; margin:0; color:var(--coH4Dialog); overflow:hidden }
#diaMenu p { text-align:center; margin-top:5px; color:var(--coTxtBase) }
#diaMenu .scrollable { height:60vh; margin-top:20px }
#diaMenu ul { display:flex; flex-direction:column; list-style-type:none; padding-left:30px }
#diaMenu ul:first-of-type { margin-top:0 }
#diaMenu li { margin-top:20px; white-space:nowrap }
#diaMenu li:first-of-type { margin-top:5px }
#diaMenu li li { margin-top:7px }
#diaMenu .lnkDis { color:var(--coLnkDialog) }
#diaMenu span { color:var(--coLnkDialog) }
#diaMenu a { color:var(--coLnkMenu); text-decoration:none }
#diaMenu .butCTA a { color:var(--coTxtInvBase)!important; margin-bottom:20px }



/* ============================= Dialog - Where  =========================== */

#diaWhere { display:flex; justify-content:center; flex-direction:column } 
#diaWhere, #diaVidInf { width:80vw; max-width:500px; background:var(--coBGbase); border:none; border-radius:5px; box-shadow:0 0 20px 0 var(--coBoxShadDialog) }
#diaWhere h3, #diaVidInf h3 { text-align:center; margin:10px 0 0 0; color:var(--coH4Dialog); overflow:hidden }
#diaWhere p, #diaVidInf p { text-align:center; color:var(--coTxtBase) }

@media screen and (max-height:699px) {
	#diaWhere, #diaVidInf { margin-top:0px }
}
@media screen and (min-height:700px) {
	#diaWhere, #diaVidInf { margin-top:20vh }
}

#butStartWhere { position:relative; background:none; height:80px }

#butStartWhere img { position:absolute; top:37px; left:50%; transform:translate(-50%, -50%); width:50px }
#butStartWhere .aniStartWhere { position:absolute; left:calc(50% - 31px); top:6px; transform:translate(-50%, -50%); height:54px; width:54px; border:4px solid var(--coAPwhere); border-radius:50%; animation:keyPulseStVid 2s ease-out; animation-iteration-count:infinite; opacity:0 }










/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Text Handling ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */



/* ============================= Button - Copy to Clipboard  =========================== */


#txtSBacc { white-space:pre-wrap; font-size:14px }

.butCen { display:flex; justify-content:center }

button.butClip { margin-top:5px; font-size:16px; line-height:16px; border:none; padding:8px 13px 10px 13px; border-radius:5px; user-select:none; cursor:pointer; transition:filter 0.2s }
button.butClip { color:var(--coTxtInvBase); background:var(--coGradCTAc); background: linear-gradient(to bottom right, var(--coGradCTAb), var(--coGradCTAd)) }

@-moz-document url-prefix() { .butClip { padding:8px 13px 12px 13px } }











/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Lettings - Filter ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */




/* ============================== Question ============================== */

.filQuest { text-align:center }
.filQuest span { font-size:14px; font-style:italic }



/* ============================== Forms ============================== */

.wrpFS { display:flex; justify-content:center }
fieldset { display:inline-block; border-radius:10px; border:1px solid #ccc }



/* ==================== radio buttons + check boxes =================== */

fieldset.fsVer{padding:10px 35px 15px 25px}
fieldset.fsVer .inRad{margin:20px 0}
fieldset.fsVer .inChk{margin:20px 0}

/* https://stackoverflow.com/questions/23167637/is-it-possible-to-change-the-color-of-selected-radio-buttons-center-circle */
input[type="radio"], input[type="checkbox"] { -webkit-appearance:none; margin:0 8px -7px 0; width:25px; height:25px; box-shadow:0 0 5px 0px #aaa inset }
input[type="radio"] { border-radius:50% }
input[type="checkbox"] { border-radius:5px }
input[type="radio"]:hover, input[type="checkbox"]:hover { box-shadow:0 0 5px 2px var(--coFRMbutBord) inset }
input[type="radio"]:before, input[type="checkbox"]:before { content:""; display:block; width:60%; height:60%; margin:20% auto; border-radius:50% }
input[type='radio']:checked:before, input[type="checkbox"]:checked:before { background:var(--coFRMbutTick) }



/* ============================= slider =============================== */

/*
input[type=range]{-webkit-appearance:none;-moz-appearance:none}

input[type=range]:focus{outline:none}

input[type=range]::-webkit-slider-runnable-track{width:95%;height:10px;cursor:pointer;background:#eee;border-radius:5px}
input[type=range]::-moz-range-track{width:95%;height:10px;cursor:pointer;background:#eee;border-radius:5px}

input[type=range]::-webkit-slider-thumb:hover{background:#fa0}
input[type=range]::-moz-range-thumb:hover{background:#fa0}

input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;transition:0.3s;border:8px solid #888;margin-top:-10px;height:30px;width:30px;border-radius:50%;background:#fff;cursor:pointer}
input[type=range]::-moz-range-thumb{-moz-appearance:none;transition:0.3s;border:8px solid #888;height:15px;width:15px;border-radius:50%;background:#fff;cursor:pointer}

#hb-wrpApp fieldset.fsSli{padding:7px 20px 17px 15px}
#hb-wrpApp fieldset.fsSli .inSli{display:flex;align-items:center}
#hb-wrpApp fieldset.fsSli input{display:inline-block;width:calc(100% - 70px);margin-right:14px}
#hb-wrpApp fieldset.fsSli span{display:inline-block;height:50px;width:50px;border-radius:50%;background:#aaa;color:#fff;text-align:center;line-height:47px}
*/

/* does not work in Chrome
input[type="range"]::-moz-range-progress{background-color:#43e5f7}
*/



/* ==================== Show result =================== */

.wrpShowRes { display:flex; justify-content:center; margin-bottom:40px }
.wrpShowRes .resInt { padding:0 13px 0 7px}









/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Under construction ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

/*
.wrpUC { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-30deg); text-align:center; font-size:calc(30px + 2vw + 2vh); font-weight:bold; color:red; opacity:0.5}
*/






/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Flicker protection ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

body { display:block!important }







/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ Background animation ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

.bgSeaHorse, .bgShell, .wrpBubL, .wrpBubR { display:none }

/*
@media screen and (max-width:599px) {
	.bgSeaHorse, .bgShell, .wrpBubL, .wrpBubR { display:none }
}
@media screen and (min-width:600px) {
	.bgSeaHorse, .bgShell { position:fixed; top:150px; transform:rotate(0deg); opacity:var(--opaSea); overflow:hidden; user-select:none; z-index:-10 }
	.bgSeaHorse { left:calc(30vw - 300px); width:200px; height:300px; background-size:200px 300px; background-repeat:no-repeat; background-image:url("/images/bgs/seahorse.webp"); animation: floatSeaHorse 30s linear infinite alternate }
	.bgShell { right:calc(31vw - 340px); width:247px; height:300px; background-size:247px 300px; background-repeat:no-repeat; background-image:url("/images/bgs/shell.webp"); animation: floatShell 30s linear infinite alternate }

	.wrpBubL, .wrpBubR { position:fixed; bottom:0; width:20vw; height:100%; opacity:var(--opaBub); z-index:-10 }
	.wrpBubL { left:0 }
	.wrpBubR { right:0 }

	.wrpBub svg{ position:absolute; width:30px; height:30px }
	.wrpBub .b1 { margin-left:-100px; animation:keyBub 2s ease-in-out infinite }
	.wrpBub .b2 { margin-left:-20px; animation:keyBub 3s ease-in-out infinite }
	.wrpBub .b3 { margin-left:60px; animation:keyBub 3.5s ease-in-out infinite }
	.wrpBub .b4 { margin-left:-50px; animation:keyBub 6s ease-in-out infinite }
	.wrpBub .b5 { margin-left:30px; animation:keyBub 7s ease-in-out infinite }
	.wrpBub .b6 { margin-left:0px; animation:keyBub 8.5s ease-in-out infinite }
	.wrpBub .b7 { margin-left:0px; animation:keyBub 9s ease-in-out infinite }
	.wrpBub .b8 { margin-left:0px; animation:keyBub 9.5s ease-in-out infinite }
	.wrpBub .b9 { margin-left:0px; animation:keyBub 10s ease-in-out infinite }
	.wrpBub circle { fill:none; stroke-width:1; stroke:var(--coBordBubble) }
}
*/






/* ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡  Keyframes ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ */

@keyframes keyKenBurns {
	100% { opacity:1; scale:2 }
}

@keyframes floatSeaHorse {
	10% { top:200px; transform:rotate(5deg); left:calc(30vw - 350px) }
	20% { top:250px; transform:rotate(-3deg); left:calc(30vw - 330px) }
	30% { top:300px; transform:rotate(2deg); left:calc(30vw - 350px) }
	40% { top:350px; transform:rotate(-5deg); left:calc(30vw - 310px) }
	50% { top:400px; transform:rotate(1deg); left:calc(30vw - 350px) }
	60% { top:450px; transform:rotate(-1deg); left:calc(30vw - 320px) }
	70% { top:500px; transform:rotate(2deg); left:calc(30vw - 350px) }
	80% { top:550px; transform:rotate(-5deg); left:calc(30vw - 340px) }
	90% { top:600px; transform:rotate(1deg); left:calc(30vw - 350px) }
	100% { top:650px; transform:rotate(0deg); left:calc(30vw - 310px) }
}

@keyframes floatShell {
	10% { top:200px; transform:rotate(-2deg); right:calc(31vw - 390px) }
	20% { top:250px; transform:rotate(3deg); right:calc(31vw - 370px) }
	30% { top:300px; transform:rotate(-1deg); right:calc(31vw - 390px) }
	40% { top:350px; transform:rotate(5deg); right:calc(31vw - 350px) }
	50% { top:400px; transform:rotate(-3deg); right:calc(31vw - 390px) }
	60% { top:450px; transform:rotate(2deg); right:calc(31vw - 360px) }
	70% { top:500px; transform:rotate(-3deg); right:calc(31vw - 390px) }
	80% { top:550px; transform:rotate(1deg); right:calc(31vw - 370px) }
	90% { top:600px; transform:rotate(-4deg); right:calc(31vw - 390px) }
	100% { top:650px; transform:rotate(0deg); right:calc(31vw - 370px) }
}

@keyframes keyBub {
	0%  { top:100%;left:50%;transform:scale(.5,.5) translateX(0) }
	20% { transform:scale(.6,.6) translateX(-20px) }
	40% { transform:scale(.8,.8) translateX(30px) }
	60% { transform:scale(1,1) translateX(-10px) }
	80% { transform:scale(.7,.7) translateX(20px) }
	100%{ top:-50px;left:50%;transform:scale(.5,.5) translateX(0) }
}

@keyframes keyPulseDali {
	0% {transform: scale(0.1, 0.1); opacity:0}
	50% {opacity:0.5}
	100% {transform: scale(1.2, 1.2); opacity:0}
}

@keyframes keyPulseStVid {
	0% {transform: scale(0.7, 0.7); opacity:1}
	30% {opacity:1}
	100% {transform: scale(1.1, 1.1); opacity:0}
}

@keyframes keySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}