/* ~~ general layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@property --primary-fill        { syntax: '<color>';  initial-value: #000000; inherits: true; }

@property --scroll-opacity      { syntax: '<number>'; initial-value: 1.0;     inherits: true; }
@property --scroll-glow-opacity { syntax: '<number>'; initial-value: 0.0;     inherits: true; }
@property --bulb-opacity        { syntax: '<number>'; initial-value: 0.0;     inherits: true; }
@property --bulb-glow-opacity   { syntax: '<number>'; initial-value: 0.0;     inherits: true; }

@property --apps-glow-opacity   { syntax: '<number>'; initial-value: 0.0;     inherits: true; }

@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  @media (min-aspect-ratio: 1024/640) { div.frlmhome { font-size: 1.52vh; } }
  @media (max-aspect-ratio: 1024/640) { div.frlmhome { font-size: 0.86vw; } }
}

.frlmcontent { z-index: 5; }

#wrapper {
  height:100%;
  min-height:100%;
  position:relative;
  overflow-x:hidden;
  overflow-y:hidden;
}

@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  #wrapper {
    height:100%;
    width:100%;

    display: flex;
    align-items: center;
    justify-content: center;
  }
  #lobg {
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
  }
}

#lobg {
    width: 100%;
}

@media (max-resolution: 133.099dpi) and (max-width: 1023.999px),
       (min-resolution: 133.1dpi) and (orientation: portrait),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (max-width: 511.999px) {
  #wrapper {
    height: initial;
    background: #F9FEEA;
    background-image: none;
  }
  #lobg {
    background: #E6FFAB;
  }
  div.loginpanel {
    background-image: -moz-linear-gradient(top, #E6FFAB 0px, #F9FEEA 100%);
    background-image: -webkit-linear-gradient(top, #E6FFAB 0px, #F9FEEA 100);
    background-image: -ms-linear-gradient(top, #E6FFAB 0px, #F9FEEA 100);
    background-image: -o-linear-gradient(top, #E6FFAB 0px, #F9FEEA 100);
    background-image: linear-gradient(top, #E6FFAB 0px, #F9FEEA 100);
  }
  div.loginpanel input[type="text"],
  div.loginpanel input[type="password"] {
      width: 90%;
  }
  @media (min-width: 1024px) {
    #wrapper {
      width:1023px;
      margin:0 auto;
    }
  }
  @media (max-width: 1023.999px) {
    #wrapper {
        width:100%;
    }
  }
}

#locenter > a {
  cursor: default;
}

#lobottom {
  width: 100%;
  height: 5ex;
  display: flex;
  align-items: center;
  border-top: thin solid #808080;
  background-image: -moz-linear-gradient(top, #7E6E49 0%, #877C6B 100%);
  background-image: -webkit-linear-gradient(top, #7E6E49 0%, #877C6B 100%);
  background-image: -ms-linear-gradient(top, #7E6E49 0%, #877C6B 100%);
  background-image: -o-linear-gradient(top, #7E6E49 0%, #877C6B 100%);
  z-index: 4;
}

#lobottom span {
   padding: 4px 12px 4px 12px;
   display: inline-block;
}

#lobottom a {
   text-decoration: none;
   color: #C4F935;
   font-size: 120%;
}

#lobottom a:hover {
   text-decoration: none;
}

#lobottom span#technical {
   color: #C4F935;
   font-size: 120%;
   flex: 1; text-align: right; white-space: nowrap;
   padding-right: 5em;
}

/* ~~ fundamentals ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

a, a.link   { text-decoration: none; color: #537200; background: none; cursor: pointer; }
a.link      { font-weight: bold; }
a:visited   { color: #537200; }
a:active    { color: #537200; }
a:hover     { color: #537200; text-decoration: underline; }
span.productname { color:#7E6E49; font-weight: bold; }
ul        { padding-left: 0.5em; list-style-type: none; }
ul.triangle li { width: 98%; }
ul.triangle li:before { content: '\2023 '; } /* ‣ */

a.mlink       { cursor: pointer; font-weight: bold; }
a.mlink:hover { text-decoration: underline; }

/* pure CSS styled tooltip */
.tooltip:after {
  content: attr(tooltip-text);
  position: absolute; bottom: 130%; left: 20%;
  background: #FAD426; padding: 3px 12px; color: #7E6E49; border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.4s ease 1.0s;
}
.tooltip.switch:after {
  content: attr(tooltip-off);
}
.tooltip.switch.high:after {
  content: attr(tooltip-on);
}
.tooltip:before {
  content: "";
  position: absolute; left: 30%; bottom: 90%;
  width: 0; height: 0;
  border-top: 20px solid #FAD426; border-left: 20px solid transparent; border-right: 20px solid transparent;
  transition: all 0.4s ease 1.0s;
  opacity: 0;
}
.tooltip:hover:after  { bottom: 100%; }
.tooltip:hover:before { bottom: 75%; }
.tooltip:hover:after,
.tooltip:hover:before { opacity: 1; }

/* ~~ logo ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#logobig {
  width: 192px;
  height: 43px;
  background: url(/resources/images/net/venfragrid/logo.svg) no-repeat center center;
  background-size: contain;
}

#fairy {
  width: 109px;
  height: 80px;
  background: url(/resources/images/net/venfragrid/fairy.svg) no-repeat center top;
  background-size: cover;
  overflow: hidden;
}

@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  #logobig {
    position:absolute; left: 90px; top: 12px;
  }
  #fairy {
    position:absolute; right: 440px; top: 6px;
  }
}

#logo {
  width: 132px;
  height: 22px;
  padding: 2px; margin: 0px; /* deprecated property: spacing: 0px; */
  border-left: 2px solid #EAFF01;
  white-space: nowrap;
  display: table-cell;
}

#logo #left {
  width: 22px;
  height: 22px;
  background: url(/resources/images/net/venfragrid/venfraba06.png) no-repeat center center;
  padding: 0px; margin: 0px; /* deprecated property: spacing: 0px; */ border: none;
  display: inline-block;
}

#logo #right {
  width: 110px; /* image is 164 x 32 */
  height: 22px;
  background: url(/resources/images/net/venfragrid/venfraba07.png) no-repeat center center;
  padding: 0px; margin: 0px; /* deprecated property: spacing: 0px; */ border: none;
  display: inline-block;
}

@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  #locenter {
    position:relative;
    /* width: 721px; height: 421px;  clear:left; */
    margin:0 auto;
    border: none;
  }
  #locenter .logo, #locenter .logo .logolarge { width: 100%; height: 100%; }
  #locenter div.flash {
    position: absolute; left: 348px; top: 234px;
  }
  @media (min-aspect-ratio: 1024/640) {
    #locenter { width: 99.45vh; height: 58.07vh; }
    #locenter img.logosmall { position: absolute; left: -23.67vh; top: -5.46vh; width: 47.34vh;/* display: none; */ }
  }
  @media (max-aspect-ratio: 1024/640) {
    #locenter { width: 62.15vw; height: 36.29vw; }
    #locenter img.logosmall { position: absolute; left: -14.79vw; top: -3.41vw; width: 29.59vw;/* display: none; */ }
  }
}

/* ~~ controls ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.lol2       { text-decoration:none; cursor: pointer; color:#7C6A40; }
div.lol2.high  .t0, div.lol2.high  .t1, div.lol2.high  .t2, div.lol2.high  .t3,
div.lol2:hover .t0, div.lol2:hover .t1, div.lol2:hover .t2, div.lol2:hover .t3 {
  color:#9B8B65;
  text-shadow: 3px 2px 2px #C0C0C0;
}
div.lol2.hint .t0, div.lol2.hint .t1, div.lol2.hint .t2, div.lol2.hint .t3 {
  color:#9B8B65;
}
div.lol2:hover .t0, div.lol2:hover .t1, div.lol2:hover .t2, div.lol2:hover .t3 {
  color:#7C6A40;
}

.d0 .lol4.high a .texts { opacity: 1; }
.d1 .lol4.high a .texts { opacity: 0; }

.d1 .lol2        .text    { display: none; }
.d1 .lol2        .img svg { opacity: 0.5; }

.lol4                     { z-index: 5; }
.lol4            a        { text-decoration:none; }

.lol4            a        { color:#90B000; }
.lol4.high       a .texts { color:#849D49; }
.lol4.high:hover a .texts { color:#4B650F; }
#intro .lol4            a        { color:#D4C979; }
#intro .lol4.high       a .texts { color:#827200; }
#intro .lol4.high:hover a .texts { color:#827200; }

.lol4 .t0                 { font-size:120%; }
.lol4 .t1                 { font-size:120%; }

center img { width: 80%; }

span.inline.icon           { position: relative; margin-right: 1ex; }
span.inline.icon svg       { --primary-fill:#90B000; width: 1.8em; height: 1.8em; position: relative; top: 0.7ex; }
span.inline.icon svg use   { --primary-fill:#90B000; }

span.inline.iconsm svg     { --primary-fill:#90B000; width: 1.2em; height: 1.2em; }
span.inline.iconsm svg use { --primary-fill:#90B000; }

span.inline.w12    svg,
span.inline.w15    svg,
span.inline.w25    svg     { --primary-fill:#90B000; }
span.inline.w12    svg,
span.inline.w15    svg,
span.inline.w25    svg use { --primary-fill:#90B000; }

span.inline.w12,
span.inline.w15,
span.inline.w25,
span.inline.b50,
span.inline.h4em,
span.inline.b50h80         { display: inline-flex; flex-flow: row nowrap;
                             justify-content: space-around; align-content: space-around; align-items: flex-start; }
span.inline.b50,
span.inline.b50h80         { height: 20vh; }
span.inline.b50    img,
span.inline.b50h80 img     { height: 100%; }
span.inline.b50    svg,
span.inline.b50h80 svg     { height:  80%; }
span.inline.h4em           { height:  6em; }
span.inline.h4em   svg     { height:  6em; }
span.inline.w12            { height:  6em; }
span.inline.w12    svg     { height:  6em; }
span.inline.w15            { height:  6em; }
span.inline.w15    svg     { height:  6em; }
span.inline.w25            { height:  6em; }
span.inline.w25    svg     { height:  6em; }



#details svg.icon     { --primary-fill:#90B000; width: 2.2em; height: 2.2em; }
#details svg.icon use { --primary-fill:#90B000; }

#details svg.iconsm     { --primary-fill:#90B000; width: 1.2em; height: 1.2em; }
#details svg.iconsm use { --primary-fill:#90B000; }

@media (max-resolution: 133.099dpi) and (max-width: 1023.999px),
       (min-resolution: 133.1dpi) and (orientation: portrait),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (max-width: 511.999px) {
  div.lol2,
  div.lol4           { display: none; }

  div.lol2 img,
  div.lol2 br,
  div.lol4 img,
  div.lol4 br        { display: none; }
  div.lol2 div,
  div.lol2 span,
  div.lol4 div,
  div.lol4 span      { display: inline; }
  #block div         { display: inline; }
}

#flhome { position:absolute; display:inline-block; z-index: 9; cursor: pointer; margin: 0; }
#flhome i { color:#90B000; font-weight:bold; font-size: 160%; }
#flhome svg { fill:#90B000; }
#flhome svg  use { --primary-fill:#90B000; }

span.br:after { content:" "; white-space:pre; }

@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  .lol2              { position: absolute; white-space:nowrap;
                       transition: left 0.45s ease-in-out, top 0.45s ease-in-out; }
  .lol2       .text  { position: relative; left: 0px; top: 0px;
                       transition: left 0.15s ease-in-out, top 0.15s ease-in-out; }
  .lol2.high  .text,
  .lol2:hover .text  { left: -3px; top: -2px; }
  .lol2 .t0, .lol2 .t1, .lol2 .t2, .lol2 .t3
                     { color:#E3D8C2; position: relative;
                       transition: color 0.15s ease-in-out, text-shadow 0.15s ease-in-out; }
  @media (min-aspect-ratio: 1024/640) {
    .lol2         .img { position: absolute; left:-8.20vh; top: -0.52vh; }
    .lol2#prepare .img { position: absolute; left:-5.59vh; top: -0.52vh; }
  }
  @media (max-aspect-ratio: 1024/640) {
    .lol2         .img { position: absolute; left:-5.12vw; top: -0.33vw; }
    .lol2#prepare .img { position: absolute; left:-3.49vw; top: -0.33vw; }
  }
  @keyframes path_anim_3 { 0% { opacity:0.5; } 100% { opacity:1.0; } }
  .lol2      .img svg { fill:#E2DCBD; opacity: 0.0; }
  .lol2      .img svg  use { --primary-fill:#E2DCBD; }
  .lol2.high .img svg { animation: path_anim_3 0.5s steps(1) forwards; }

  /* funktioniert, aber zu verspielt und ein wenig sinnlos
  .dwarf { position: relative; }
  .dwarf img { position: relative; transition: width 0.2s ease-in-out 0.8s, height 0.2s ease-in-out 0.8s, left 0.2s ease-in-out 0.8s, top 0.2s ease-in-out 0.8s;
                    left: 15px; top: 24px; width: 0px; height: 0px; display:block; }
  .dwarf.high img { left: 0px; top: 0px; width: 31px; height: 48px; display:block; }
  */
  .lol4           { position: absolute;
                    transition: left 0.45s ease-in-out, top 0.45s ease-in-out; }
  .lol4 a         { white-space: nowrap; display: inline-block; cursor: pointer; }
  .lol4 a .texts  { transition: opacity 0.8s ease-in-out; opacity: 0; }
  .lol4 .texts    { display:inline-block; vertical-align:middle; }
  .lol4 .img      { overflow:hidden; position: relative;
                    display:inline-block; vertical-align:middle; margin-right:1.5ex; }
  .lol4 .img svg  { position: absolute; transition: width 0.5s ease-in-out, height 0.5s ease-in-out; }

  @keyframes path_anim { 0% { fill:#DFE7B9; --primary-fill:#DFE7B9; } 100% { fill:#90B000; --primary-fill:#90B000; } }
  .lol4      .img svg use { fill:#DFE7B9; --primary-fill:#DFE7B9; }
  .lol4.high .img svg use { animation: path_anim 0.5s steps(1) forwards; }

  @keyframes path_anim_2 { 0% { fill:#C3A811; --primary-fill:#C3A811; } 100% { fill:#827200; --primary-fill:#827200; } }
  #intro .lol4      .img svg use { fill:#C3A811; --primary-fill:#C3A811; }
  #intro .lol4.high .img svg use { animation: path_anim_2 0.5s steps(1) forwards; }

  .switch .clip    { position: relative; z-index: 5; overflow: hidden; cursor: pointer; }
  .switch          { position: absolute; }
  .switch      img { position: relative; }
  .switch.high img { opacity:0.7; }

  .switch      { z-index: 5; }
  .lol2        { z-index: 4; }
  .lol3        { position: absolute; z-index: 3; padding: 0; }
  #input       { overflow: hidden; transition: left 0.45s ease-in-out, top 0.45s ease-in-out; }

  #products    { padding: 16px 32px 16px 32px; color:#7E6E49; }

  #info       , #info        a, #info        a .texts { transition-delay: 0.00s; }
  #coding     , #coding      a, #coding      a .texts { transition-delay: 0.03s; }
  #bsc        , #bsc         a, #bsc         a .texts { transition-delay: 0.06s; }
  #bb         , #bb          a, #bb          a .texts { transition-delay: 0.09s; }
  #call       , #call        a, #call        a .texts { transition-delay: 0.12s; }
  #specify    , #specify     a, #specify     a .texts { transition-delay: 0.00s; }
  #build      , #build       a, #build       a .texts { transition-delay: 0.15s; }
  #work       , #work        a, #work        a .texts { transition-delay: 0.03s; }
  #self       , #self        a, #self        a .texts { transition-delay: 0.06s; }
  #team       , #team        a, #team        a .texts { transition-delay: 0.09s; }
  #delegate   , #delegate    a, #delegate    a .texts { transition-delay: 0.12s; }
  #sites      , #sites       a, #sites       a .texts { transition-delay: 0.00s; }
  #systems    , #systems     a, #systems     a .texts { transition-delay: 0.03s; }
  #services   , #services    a, #services    a .texts { transition-delay: 0.06s; }
  #logic      , #logic       a, #logic       a .texts { transition-delay: 0.09s; }
  #enterprises, #enterprises a, #enterprises a .texts { transition-delay: 0.12s; }

  #details {
    position:absolute;
    border: 2px outset #BBFF05;
    z-index: 8;
    -moz-box-shadow:    0px 0px 6px 2px #E0E0E0;
    -webkit-box-shadow: 0px 0px 6px 2px #E0E0E0;
    box-shadow:         0px 0px 6px 2px #E0E0E0;
    overflow-y: auto;
    opacity: 1;
    box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.3);
  }

  #closedetails {
    position:absolute;
    display:inline-block;
    z-index: 9;
    cursor: pointer;
    margin: 0;
    /* deprecated property: spacing: 0px; */
  }
  #closedetails svg { fill:#90B000; }
  #closedetails svg  use { --primary-fill:#90B000; }

  #details,
  #closedetails {
    transition: opacity 0.5s ease-in-out 0.5s, height 0.5s ease-in-out 0.5s, z-index 0.1s ease-in-out 0.5s;
  }

  #details.hidden,
  #closedetails.hidden {
    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out, z-index 0.1s ease-in-out;
    z-index: -3;
    opacity: 0;
    height: 10px;
  }
}

@media (max-resolution: 133.099dpi) and (max-width: 1023.999px),
       (min-resolution: 133.1dpi) and (orientation: portrait),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (max-width: 511.999px) {
  div.lol2         { width:100%; }

  #closedetails {
    display:none;
  }
  .lointro1 {
    min-height: 200px;
  }
  @media (min-width: 600px) {
    #locenter img.fairy { width: 150px; }
  }
  @media (max-width: 599.999px) {
    #locenter img.fairy { width: 25%; }
  }
  .switch { display: none; }
  div.lol2     { font-size: 180%; padding: 2.5ex 0ex 1.5ex 2ex; border: 0.6px solid #E0E0E0; background: #EBFEBD; }
  div.lol4     { font-size: 120%; padding: 2.5ex 0ex 1.5ex 2ex; border: 0.6px solid #E0E0E0; }
  div.lol2 .t0 { font-weight: bold; }
}

.lointro1 {
  z-index: 5;
  color:#404040;
}

@media (max-resolution: 133.099dpi) and (max-width: 1023.999px),
       (min-resolution: 133.1dpi) and (orientation: portrait),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (max-width: 511.999px) {
  .lointro1 {
    background: #F9FEEA;
    padding: 16px 32px 16px 32px;
  }
  .symbol3d #block {
    padding: 8px 16px 8px 16px;
  }
}
/* @media (min-width: 1024px) and (min-height: 640px) { */
@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  .lointro1 {
    white-space: nowrap;
    /* background: rgba(196,249,53,0.1); // (rgb-hex-to-dec "C4F935") */
  }
  .lointro1 .emphasize {
    color: #827200;
    font-weight: bold;
    cursor: pointer;
  }
  .lointro1 .emphasize:hover {
    color: #C3A811;
    font-weight: bold;
  }
  /* .lointro1 .emphasize:hover {
    cursor: pointer;
    background: #DEFF47;
  } */
}

div.symbol3d #block {
  white-space: normal;
  z-index: 3;
  /*color:#7E6E49;
  background: rgba(196,249,53,0.5); (rgb-hex-to-dec "C4F935") */
}

span.fairy      { color:#ABC80C; font-weight:bold; } /* original: BFDE10 - adopted to fairyloom background for readability */
span.loom       { color:#908100; font-weight:bold; }
span.board1     { color:#B89C00; font-weight:bold; }
span.board2     { color:#827200; font-weight:bold; }
span.lore1      { color:#B5A65E; font-weight:bold; } /* original: F3E59E - adopted to fairyloom background for readability */
span.lore2      { color:#50676F; font-weight:bold; }
span.emos1      { color:#649DB4; font-weight:bold; }
span.emos2      { color:#000000; font-weight:bold; }
span.emos3      { color:#63AD8B; font-weight:bold; }
span.loom1      { color:#5792AA; font-weight:bold; }
span.loom2      { color:#358A63; font-weight:bold; }
span.boldterm   { color:#858585; font-weight:bold; }

.frlmhome .dl-note::before {
    color: #BFDE10;
    font-size: 120%;
}

/* nice, blurred border around:  box-shadow: 0px 0px 0.3em 0.1em #FCFFF5; background:#FCFFF5; */

.dark span.loom  { color:#B48F39;  }

@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  .lointro1 {
    position: absolute;
    border-left: none;
  }
  .lointro1 .action {
    margin: 0;
    border: 1px outset #BBFF05;
    /* deprecated property: spacing: 0px; */
    background: #EBFEBD;
    position: absolute;
    cursor: pointer;
  }

  .symbol3d {
    position: absolute;
    perspective: 1700px;
	perspective-origin: 0 50%;
  }

  .symbol3d#apps {
    transform: rotate(25deg);
  }

  .symbol3d #block {
    transform-style: preserve-3d;
    backface-visibility: hidden;
	transform-origin: 40px 0;
	transform: rotateX(0), rotateY(0);
	transition: transform 0.4s ease-in-out, opacity 0.3s 0.1s ease-in-out;
    opacity: 1;
  }

  .symbol3d #block div {
    white-space: nowrap;
  }

  .d1 .symbol3d#scroll #block,
  .symbol3d.high#scroll #block {
    opacity: 0;
	transform: rotateY(-90deg);
  }

  .d1 .symbol3d#apps #block,
  .symbol3d.high#apps #block {
    opacity: 0;
	transform: rotateX(-90deg);
  }
}

@media (max-resolution: 133.099dpi) and (max-width: 1023.999px),
       (min-resolution: 133.1dpi) and (orientation: portrait),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (max-width: 511.999px) {
  div.lointro1 .action {
    display:none;
  }
}

/* ~~ animations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.lointro1 .statement1 {
  font-size: 220%;
}

div.lointro1 .statement2 {
  font-size: 140%;
}

div#wheels  { z-index: 5; }
div#intro   { z-index: 6; }
div#details { z-index: 7; }

/* [WheelAnimation] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@keyframes clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes counterclockwise { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
#locenter #wheels       svg#big   { animation: counterclockwise 24s linear infinite; }
#locenter #wheels       svg#small { animation: clockwise 12s linear infinite; }
#locenter #wheels.high  svg#big   { animation: counterclockwise 1s linear infinite; }
#locenter #wheels.high  svg#small { animation: clockwise 0.5s linear infinite; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  #locenter #wheels     { position: absolute; /* overflow: hidden; */ }
  #locenter #wheelsmall { position: absolute; }
  #locenter #wheelbig   { position: absolute; }

  /* better would be: svg ... path
     but styling inside use in most browsers does not work if there
     is <use ...external...> inbetween, see
     https://css-tricks.com/svg-use-with-external-reference-take-2/
     (it *does* work in firefox already)
   */
  .switch                       svg #circle { fill:#FFFFFF; stroke:none; stroke-width:8; }
  .switch                       svg use#circle { --primary-fill:#FFFFFF; }
  .switch                       svg #button { fill:#E6FFAB; }
  .switch                       svg use#button { --primary-fill:#E6FFAB; }
  .switch.hint                  svg #circle { fill:#E6FFAB; } /* #DEFF47 */
  .switch.hint                  svg use#circle { --primary-fill:#E6FFAB; }
  .switch.hint                  svg #button { fill:#90B000; }
  .switch.hint                  svg use#button { --primary-fill:#90B000; }
  .switch.bighint               svg #circle { fill:#E6FFAB; } /* #DEFF47 */
  .switch.bighint               svg use#circle { --primary-fill:#E6FFAB; }
  .switch.bighint               svg #button { fill:#90B000; }
  .switch.bighint               svg use#button { --primary-fill:#90B000; }
  .switch#switchintro           svg #circle { fill:#DDD4A2; } /* #D4C979 */
  .switch#switchintro           svg use#circle { --primary-fill:#DDD4A2; }
  .switch#switchintro           svg #button { fill:#827200; }
  .switch#switchintro           svg use#button { --primary-fill:#827200; }
  .switch#switchintro.hint      svg #circle { fill:#C3A811; } /* #D4C979 */
  .switch#switchintro.hint      svg use#circle { --primary-fill:#C3A811; }
  .switch#switchintro.hint      svg #button { fill:#827200; }
  .switch#switchintro.hint      svg use#button { --primary-fill:#827200; }
  .switch#switchintro.bighint   svg #circle { fill:#C3A811; } /* #D4C979 */
  .switch#switchintro.bighint   svg use#circle { --primary-fill:#C3A811; }
  .switch#switchintro.bighint   svg #button { fill:#827200; }
  .switch#switchintro.bighint   svg use#button { --primary-fill:#827200; }

  .switch#switchintro.hint      svg #circle { transition: fill ease-in 0.30s, --primary-fill ease-in 0.30s; }
  .switch#switchintro.hint      svg #button { transition: fill ease-in 0.30s, --primary-fill ease-in 0.30s; }
  .switch#switchrequire.hint    svg #circle { transition: fill ease-in 0.30s, --primary-fill ease-in 0.30s; }
  .switch#switchrequire.hint    svg #button { transition: fill ease-in 0.30s, --primary-fill ease-in 0.30s; }
  .switch#switchprepare.hint    svg #circle { transition: fill ease-in 0.30s, --primary-fill ease-in 0.30s; }
  .switch#switchprepare.hint    svg #button { transition: fill ease-in 0.30s, --primary-fill ease-in 0.30s; }
  .switch#switchoperate.hint    svg #circle { transition: fill ease-in 0.30s, --primary-fill ease-in 0.30s; }
  .switch#switchoperate.hint    svg #button { transition: fill ease-in 0.30s, --primary-fill ease-in 0.30s; }
  
  /* [TrailAnimation] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .switch#switchintro.bighint   svg #circle { transition: fill 0.2s ease-in 2.05s, --primary-fill 0.2s ease-in 2.05s; }
  .switch#switchintro.bighint   svg #button { transition: fill 0.2s ease-in 2.05s, --primary-fill 0.2s ease-in 2.05s; }
  .switch#switchrequire.bighint svg #circle { transition: fill 0.2s ease-in 2.05s, --primary-fill 0.2s ease-in 2.05s; }
  .switch#switchrequire.bighint svg #button { transition: fill 0.2s ease-in 2.05s, --primary-fill 0.2s ease-in 2.05s; }
  .switch#switchprepare.bighint svg #circle { transition: fill 0.2s ease-in 2.20s, --primary-fill 0.2s ease-in 2.20s; }
  .switch#switchprepare.bighint svg #button { transition: fill 0.2s ease-in 2.20s, --primary-fill 0.2s ease-in 2.20s; }
  .switch#switchoperate.bighint svg #circle { transition: fill 0.2s ease-in 2.45s, --primary-fill 0.2s ease-in 2.45s; }
  .switch#switchoperate.bighint svg #button { transition: fill 0.2s ease-in 2.45s, --primary-fill 0.2s ease-in 2.45s; }
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

  /* [ScrollAnimation] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .symbol3d#scroll                 { opacity: 0.5; }
  .symbol3d#scroll svg #usescroll  { --scroll-opacity: 1.0; }
  .symbol3d#scroll svg #usebulb    { --bulb-opacity: 0.0; }
  .symbol3d#apps                   { opacity: 0.5; }

  @keyframes scrolllight {
        0% { --scroll-glow-opacity: 0.0; }
       20% { --scroll-glow-opacity: 0.0; }
       23% { --scroll-glow-opacity: 0.1; }
       28% { --scroll-glow-opacity: 0.3; }
       33% { --scroll-glow-opacity: 1.0; }
       40% { --scroll-glow-opacity: 0.9; }
       50% { --scroll-glow-opacity: 0.6; }
      100% { --scroll-glow-opacity: 0.0; }
  }
  @keyframes bulblight {
        0% { --bulb-glow-opacity: 0.0; }
       10% { --bulb-glow-opacity: 0.0; }
       15% { --bulb-glow-opacity: 0.3; }
       20% { --bulb-glow-opacity: 1.0; }
       30% { --bulb-glow-opacity: 0.9; }
       40% { --bulb-glow-opacity: 0.6; }
       50% { --bulb-glow-opacity: 0.4; }
       70% { --bulb-glow-opacity: 0.2; }
      100% { --bulb-glow-opacity: 0.0; }
  }
  @keyframes appslight {
        0% { --apps-glow-opacity: 0.0; }
        5% { --apps-glow-opacity: 0.3; }
       10% { --apps-glow-opacity: 1.0; }
       40% { --apps-glow-opacity: 0.9; }
       45% { --apps-glow-opacity: 0.6; }
       50% { --apps-glow-opacity: 0.4; }
       60% { --apps-glow-opacity: 0.2; }
      100% { --apps-glow-opacity: 0.0; }
  }

  .symbol3d.hint#scroll            { opacity: 1.0; }
  .symbol3d.hint#scroll #usebulb   { --bulb-opacity: 1.0; }
  .symbol3d.hint#scroll #usescroll { animation: scrolllight 5.0s linear 0s; }
  .symbol3d.hint#scroll #usebulb   { animation: bulblight   6.0s linear 0s; }

  .symbol3d.hint#apps              { opacity: 1.0; }
  .symbol3d.hint#apps   use        { animation: appslight 5.0s linear 3s; }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

  .switch.fixed                 svg #circle    { stroke-width:16; }
  .switch.high                  svg #circle,
  .switch:hover                 svg #circle    { fill:#E6FFAB; stroke:#90B000; }
  .switch.high                  svg use#circle,
  .switch:hover                 svg use#circle { --primary-fill:#E6FFAB; }
  .switch.high                  svg #button,
  .switch:hover                 svg #button    { fill:#90B000; }
  .switch.high                  svg use#button,
  .switch:hover                 svg use#button { --primary-fill:#90B000; }
  .switch#switchintro.high      svg #circle,
  .switch#switchintro:hover     svg #circle    { fill:#C3A811; stroke:#827200; }
  .switch#switchintro.high      svg use#circle,
  .switch#switchintro:hover     svg use#circle { --primary-fill:#C3A811; }
  .switch:hover                                { cursor: pointer; }

  @media (min-aspect-ratio: 1024/640) {
    .lointro1 { left: 38.37vh; top: -3.21vh; width: 74.65vh; padding: 0; /* border-radius: 2.20vh 2.20vh 2.20vh 2.20vh; */ }
    .lointro1 #ellipsis { position: absolute; left: -2.20vh; }
    .lointro1 .action { right: 2.20vh; bottom: -1.10vh; padding: 0.27vh 0.27vh 0.00vh 0.27vh; border-radius: 2.76vh; }
    .lointro1 .action img { width: 4.42vh; height: 4.42vh; }
    .symbol3d#scroll { left: -21.91vh; top: 15.00vh; }
    .symbol3d#scroll #block { padding: 1.10vh 2.20vh 1.10vh 2.20vh; border-radius: 1.10vh 1.10vh 1.10vh 1.10vh; position: relative; }
    .symbol3d#scroll #yourideas { position: relative; left: -8.00vh; top: 2.00vh; }
    .symbol3d#apps { left: 99.55vh; top: 15.41vh; }
    .symbol3d#apps #block { padding: 1.10vh 2.20vh 1.10vh 2.20vh; border-radius: 1.10vh 1.10vh 1.10vh 1.10vh; position: relative; }
    .symbol3d#apps #yourit { position: relative; left: 1.00vh; top: 12.00vh; transform: rotate(-25deg); }


        .lol4      .img,
        .lol4      .img img,
    .d1 .lol4      .img svg,
        .lol4.high .img svg  { width: 4.42vh; height: 4.42vh; }
        .lol4      .img svg  { width: 2.76vh; height: 2.76vh; left: 1.10vh; top: 1.10vh; }
    .d1 .lol4      .img svg,
        .lol4.high .img svg  { left: 0.00vh; top: 0.00vh; }

    /* [OOOhhhhh] this is horrible; all I wanted is to disable the text
       clickability after 1s; none of animation/transition/width/display/visibility etc.
       worked; solution now is: make parent "a" small enough, and disable events on "texts" */
    .d1 .lol4 a              { transition: width 0s linear 1s; width: 4.42vh; }
    .d1 .lol4 a .texts       { pointer-events: none; }

        .lol2      .img,
        .lol2      .img img,
    .d1 .lol2      .img svg,
        .lol2.high .img svg  { width: 6.42vh; height: 6.42vh; }
        .lol2      .img svg  { width: 2.76vh; height: 2.76vh; left: 1.10vh; top: 1.10vh; }
    .d1 .lol2      .img svg,
        .lol2.high .img svg  { left: 0.00vh; top: 0.00vh; }

    .d1 .lol2#prepare      .img svg,
        .lol2#prepare.high .img svg  { width: 5.42vh; height: 5.42vh; left: 0.50vh; top: 0.50vh; }

  @media (max-aspect-ratio: 1024/640) {

    .lointro1 { left: 23.98vw; top: -0.87vw; width: 46.66vw; padding: 0; /* border-radius: 1.38vw 1.38vw 1.38vw 1.38vw; */ }
    .lointro1 #ellipsis { position: absolute; left: -1.38vw; }
    .lointro1 .action { right: 1.38vw; bottom: -0.69vw; padding: 0.17vw 0.17vw 0.00vw 0.17vw; border-radius: 1.72vw; }
    .lointro1 .action img { width: 2.76vw; height: 2.76vw; }
    .symbol3d#scroll { left: -13.62vw; top: 9.22vw; }
    .symbol3d#scroll #block { padding: 0.69vw 1.38vw 0.69vw 1.38vw; border-radius: 0.69vw 0.69vw 0.69vw 0.69vw; position: relative; }
    .symbol3d#scroll #yourideas { position: relative; left: -5.00vw; top: 1.25vw; }

    /* [DELETEME]

       10.41em
       font-size: 1.52vh; = 1em
       font-size: 0.86vw; = 1em

       scroll   49.79 74.37 64.79 89.37
       (/ (*  8 64.79) 49.79)10.41 em
       (/ (*  8 15.00) 49.79) 2.41 em more width    => (* 2.41 0.86) 2.07vw  => (* 2.41 1.52) 3.66vh
       (/ (*  8  5.00) 49.79) 0.80 em to the left   => (* 0.80 0.86) 0.69vw  => (* 0.80 1.52) 1.22vh
       (/ (*  8 10.00) 49.79) 1.61 em down          => (* 1.61 0.86) 1.38vw  => (* 1.61 1.52) 2.45vh

       apps     66.86 62.04 76.86 72.04
       (/ (* 10 76.86) 66.86)11.50 em
       (/ (* 10 10.00) 66.86) 1.50 em more width    => (* 1.50 0.86) 1.29vw  => (* 1.50 1.52) 2.28vh
       (/ (* 10  5.00) 66.86) 0.75 em to the left   => (* 0.75 0.86) 0.65vw  => (* 0.75 1.52) 1.14vh
       (/ (* 10  5.00) 66.86) 0.75 em down          => (* 0.75 0.86) 0.65vw  => (* 0.75 1.52) 1.14vh
     */

    .symbol3d#apps { left: 62.28vw; top: 9.69vw; }
    .symbol3d#apps #block { padding: 0.69vw 1.38vw 0.69vw 1.38vw; border-radius: 0.69vw 0.69vw 0.69vw 0.69vw; position: relative; }
    .symbol3d#apps #yourit { position: relative; left: 0.62vw; top: 7.50vw; transform: rotate(-25deg); }

    #details           { left:-11.98vw; top:-4.86vw; width:86.21vw; height:43.59vw; border-radius:0.95vw; }
    #closedetails      { left: 70.80vw; top: -4.98vw; width: 2.76vw; height: 2.76vw; /* padding: 0.10vwvw 0.10vwvw 0.00vwvw 0.10vwvw; */ }
    #closedetails svg  { width: 2.76vw; height: 2.76vw; }
    #flhome            { left: 1vh; top: 1vh; width: 2.76vw; height: 2.76vw; }
    #flhome svg        { width: 2.76vw; height: 2.76vw; }

    #wheels                  { left: 25.83vw; top: 12.92vw; width: 12.40vw; height: 12.40vw; }
    #wheels #wheelsmall      { left:  0.00vw; top:  0.00vw;
                               transition: left 0.6s cubic-bezier(.29,0,.62,.15), top 0.6s cubic-bezier(.09,-.34,.79,-.36); }
    #wheels svg#small        { width: 5.10vw; height: 5.10vw; opacity: 1.0;
                               transition: width 0.6s ease-in, height 0.6s ease-in, opacity 1.0s  cubic-bezier(.08,.91,.18,1); }
    #wheels #wheelbig        { left:  3.33vw; top:  2.15vw;
                               transition: left 0.6s cubic-bezier(.29,0,.62,.15), top 0.6s cubic-bezier(.09,-.34,.79,-.36); }
    #wheels svg#big          { width:9.05vw; height:9.05vw; opacity: 1.0;
                               transition: width 0.6s ease-in, height 0.6s ease-in, opacity 1.0s  cubic-bezier(.08,.91,.18,1); }
        .lol4      .img,
        .lol4      .img img,
    .d1 .lol4      .img svg,
        .lol4.high .img svg  { width: 2.76vw; height: 2.76vw; }
        .lol4      .img svg  { width: 1.72vw; height: 1.72vw; left: 0.69vw; top: 0.69vw; }
    .d1 .lol4      .img svg,
        .lol4.high .img svg  { left: 0.00vw; top: 0.00vw; }

    /* [OOOhhhhh] this is horrible; all I wanted is to disable the text
       clickability after 1s; none of animation/transition/width/display/visibility etc.
       worked; solution now is: make parent "a" small enough, and disable events on "texts" */
    .d1 .lol4 a              { transition: width 0s linear 1s; width: 2.76vw; }
    .d1 .lol4 a .texts       { pointer-events: none; }

        .lol2      .img,
        .lol2      .img img,
    .d1 .lol2      .img svg,
        .lol2.high .img svg  { width: 4.01vw; height: 4.01vw; }
        .lol2      .img svg  { width: 1.72vw; height: 1.72vw; left: 0.69vw; top: 0.69vw; }
    .d1 .lol2      .img svg,
        .lol2.high .img svg  { left: 0.00vh; top: 0.00vh; }

    .d1 .lol2#prepare      .img svg,
        .lol2#prepare.high .img svg  { width: 3.39vw; height: 3.39vw; left: 0.31vw; top: 0.31vw; }
  }


  #locenter img.fairy { display: none; }
  #lobottom {
    position:fixed;
    bottom:0; left:0;
  }
  #spaces {
    /* to ensure it stays above the footer */
    padding-bottom:5ex;
    z-Index: 25;
  }
}
/* @media (max-width: 1023.999px), (max-height: 639.999px) { */
@media (max-resolution: 133.099dpi) and (max-width: 1023.999px),
       (min-resolution: 133.1dpi) and (orientation: portrait),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (max-width: 511.999px) {
  #locenter #sparkles {
      display: none;
  }
  #locenter #trail {
      display: none;
  }
  #locenter {
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #locenter a.logo {
    display: block;
    width: 100%;
    order: -3;
  }
  #locenter img.logosmall {
    display:block;
    margin: 20px auto;
    width: 80%;
    max-width: 320px;
  }
  #locenter img.logolarge { display: none; }
  #locenter div.flash { display: none; }
  #locenter img.fairy { display: block; float: right; }
  div.lointro1 { order: -1; }
  div.lointro1 .statement1,
  div.lointro1 .statement2 {
      margin-top:1.5ex;
      margin-bottom:1.5ex;
  }
  div.lointro1 .statement2 {
      display: inline;
  }
  #locenter #wheels { order: -2; position: relative;  }
}

/* ~~ details ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#details {
  background: #F6F9EE; /* FCFFF5 */
  padding: 0px 0px 0px 0px;
  margin: 0px;
  font-size: 140%;
}

#details h1, #details h2 {
  text-align: center;
}

#details .part    { padding: 2ex 2ex 3ex 2ex; margin: 0px; }
#details .part h1 { margin-bottom: 3ex; }

b,
span.title1, h1, span.subtitle1,
span.title2, h2, span.subtitle2,
span.title3, h3, span.subtitle3 {
  color:#795811; font-weight: normal;
}

b,
span.title1, h1,
span.title2, h2,
span.title3, h3 {
  font-weight: bold;
}

@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  .dark span.title1, .dark h1, .dark span.subtitle1,
  .dark span.title2, .dark h2, .dark span.subtitle2,
  .dark span.title3, .dark h3, .dark span.subtitle3 {
    color: #BCB07D;
  }
}

span.title1, h1 { font-size: 130%; }
span.title2, h2 { font-size: 100%; }
span.title3, h3 { font-size: 100%; }
span.subtitle1  { font-size: 80%; }
span.subtitle2  { font-size: 80%; }
span.subtitle3  { font-size: 80%; }

#details .part.dark,
#details li.dark {
  background: #3D3115;
  color: #BCB07D;
  /* (rgb2hex (list 188 176 125)) */
}

span.inline.number     { display: inline-block; width: 4ex; margin-left: auto; margin-right: 1.5ex; vertical-align: middle; }
span.inline.number svg { fill:#E6FFAB; stroke:#90B000; stroke-width: 6; --primary-fill:#90B000; }
span.inline.number use { fill:#E6FFAB; stroke:#90B000; stroke-width: 6; --primary-fill:#90B000; }

#details .part h1 svg.number    { width: 8ex; margin-left: auto; margin-right: auto; margin-bottom: 2ex; }
#details .part h2 svg.number    { width: 6ex; margin-left: auto; margin-right: auto; margin-bottom: 1ex; }
#details .part svg.number #circle { fill:#E6FFAB; stroke:#90B000; stroke-width: 6; }
#details .part svg.number use#circle { --primary-fill:#E6FFAB; }
#details .part svg.number #button { fill:#90B000; }
#details .part svg.number use#button { --primary-fill:#90B000; }

.iblock { display: inline-block; max-width: 95%; vertical-align: top; }

.lointro1 span.br:after { content:"\A"; }

/* dpi tests...
@media (max-resolution: 133.099dpi)                                { div#willi:after { content: ' (1)'; } }
@media (min-resolution: 133.1dpi) and (max-resolution: 143.999dpi) { div#willi:after { content: ' (2)'; } }
@media (min-resolution: 144.0dpi)                                  { div#willi:after { content: ' (3)'; } }
*/

@media (max-resolution: 133.099dpi) and (max-width: 1023.999px),
       (min-resolution: 133.1dpi) and (orientation: portrait),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (max-width: 511.999px) {
  .lointro1 span.br:after { content:" "; }
  .symbol3d { display:none; }
  #details { width: 100%; }
  #details p.welcometext { display: none; }
  #details .part    { border-top: 1px solid #000000; }
  #details .part h1 svg.number    { width: 3ex; margin: 0px 1ex 0px 0px; }
  #details .part h2 svg.number    { width: 3ex; margin: 0px 1ex 0px 0px; }
  #details .part h1 { position: relative; width: calc(100% - 32px - 1ex); }
  /* #details .part h1 .htext { padding-right: 40px; } */
  #details .part.folded { width: 100%; border: 0.6px solid #E0E0E0; padding: 2ex 2ex 1.5ex 4ex; }
  #details .part.folded h1 { font-size: 100%; font-weight: normal; text-align:left; margin: 0px; }
  #details .part.main.folded { background: #EBFEBD; padding: 2ex 2ex 1.5ex 2ex; }
  #details .part.main.folded h1 { font-size: 128%; }

  @media (min-aspect-ratio: 1024/640) {
    #flhome            { left: 1vh; top: 1vh; width: 4.42vh; height: 4.42vh; }
    #flhome svg        { width: 2.76vh; height: 2.76vh; }
  }
  @media (max-aspect-ratio: 1024/640) {
    #flhome            { left: 1vh; top: 1vh; width: 2.76vw; height: 2.76vw; }
    #flhome svg        { width: 1.72vw; height: 1.72vw; }
  }

  #details .part.folded p,
  #details .part.folded ul,
  #details .part.folded h2,
  #details .headpadding,
  #details .tailpadding,
  #details .separator { display:none; }
  #details .part.folded.dark {
    background: #F6F9EE;
    color: #795811;
    /* (rgb2hex (list 188 176 125)) */
  }

  #details .part { position: relative; }
  .fold     { position: absolute; left: 0px; top: 0px; width: 100%; height: 6ex;
              z-index: 5; overflow: hidden; cursor: pointer; }
  .folded .fold { height: 100%; }
  .fold svg { position: absolute; right: 2ex; top: 1.5ex; width: 32px; height: 32px; }

  .fold svg #circle         { fill:#D6E09D; stroke:none; stroke-width:8; }
  .fold svg use#circle      { --primary-fill:#D6E09D; }
  .fold svg #buttondown     { fill:#89A008; }
  .fold svg use#buttondown  { --primary-fill:#89A008; }
  .fold svg #buttonright    { fill:#89A008; }
  .fold svg use#buttonright { --primary-fill:#89A008; }

  .fold svg #buttondown          { display: inline-block; }
  .fold svg #buttonright         { display: none; }
  .folded .fold svg #buttondown  { display: none; }
  .folded .fold svg #buttonright { display: inline-block; }

  /* .part.folded .fold { right: 2ex; top: 1ex; } */
  .fold img { position: relative; left: 0px; top: -96px; }
  .folded .fold img { left: 0px; top: 0px; }
}

/* @media (min-width: 1024px) and (min-height: 640px) { */
@media (max-resolution: 133.099dpi) and (min-width: 1024.000px),
       (min-resolution: 133.1dpi) and (orientation: landscape) and (min-width: 512.000px) {
  .fold { display: none; }
}

#details .part.dark svg text { fill-opacity: 1; stroke: none; }
#details .part.dark svg text.t1 { fill: #000000; font-size: 80%; }
#details .part.dark svg use text.t1 { --primary-fill: #000000; }
#details .part.dark svg text.t2 { fill: #B48F39; font-weight: bold; font-size: 90%; }
#details .part.dark svg use text.t2 { --primary-fill: #B48F39; }
#details .part.dark svg .colored { color: #000000; fill: #BCB07D; fill-opacity: 1; stroke: none; stroke-width: 1; }
#details .part.dark svg use .colored { --primary-fill: #BCB07D; }
#details .part.dark svg .emphasize { color: #000000; fill: #B48F39; fill-opacity: 1; stroke: #000000; stroke-width: 1; }
#details .part.dark svg use .emphasize { --primary-fill: #B48F39; }
#details .part.dark svg .black { color: #000000; fill: #000000; fill-opacity: 1; stroke: none; stroke-width: 1; }
#details .part.dark svg use .black { --primary-fill: #000000; }
#details .part.light svg text { fill-opacity: 1; stroke: none; }
#details .part.light svg text.t1 { fill: #000000; font-size: 80%; }
#details .part.light svg use text.t1 { --primary-fill: #000000; }
#details .part.light svg text.t2 { fill: #506E00; font-weight: bold; font-size: 90%; }
#details .part.light svg use text.t2 { --primary-fill: #506E00; }
#details .part.light svg .colored { color: #000000; fill: #C3D78F; fill-opacity: 1; stroke: none; stroke-width: 1; }
#details .part.light svg use .colored { --primary-fill: #C3D78F; }
#details .part.light svg .emphasize { color: #000000; fill: #C4F935; fill-opacity: 1; stroke: #000000; stroke-width: 1; }
#details .part.light svg use .emphasize { --primary-fill: #C4F935; }
#details .part.light svg .black { color: #000000; fill: #000000; fill-opacity: 1; stroke: none; stroke-width: 1; }
#details .part.light svg use .black { --primary-fill: #000000; }

#details .part h2 svg { fill:#90B000; }
#details .part h2 svg  use { --primary-fill:#90B000; }

#details div.separator { width: 100%; text-align: center; margin: 0px; }
#details .headpadding { height: 20px; margin: 0px; padding: 0px; }
#details .tailpadding { height: 12ex; margin: 0px; padding: 0px; }
#details .good,
#details .bad  { margin: 0px; padding: 0px; border-radius: 50%; display: inline-block; width: 1.6em; height: 1.6em; text-align: center; }
#details .good { background: #DEFF47; border: 1px outset #BBFF05; }
#details .bad  { background: #827200; border: 1px outset #A29B70; color: #BCB07D; }

b.dl-good,
b.dl-bad   { margin: 0px; padding: 0px; border-radius: 50%; display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; }
b.dl-good  { background: #DEFF47; border: 1px outset #BBFF05; }
b.dl-bad   { background: #827200; border: 1px outset #A29B70; color: #BCB07D; }

@media (min-width: 721px) {
  span.br:after { content:"\A"; white-space:pre; }

  #details ul.boxes {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
  }

  #details ul.boxes > li {
    flex: 1 1 0;
  }

  #details p.welcometext {
    padding: 2ex 4em;
  }

  #details .boxed {
    padding: 1ex 1ex;
    margin: 1ex 4em;
    background: #E7EED3;
    border-radius: 1ex;
    box-shadow: 3px 3px 4px 1px #A0A0A0;
  }
}

#details ul.boxes > li {
  display: block;
  margin: 4px;
  padding: 4px;
}

#details ul.boxes > li > img {
  margin-left: 2%;
  width: 96%;
}

#details ul.boxes > li > div.b50 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-content: space-around;
    align-items: flex-start;
}

#details ul.boxes > li > div.b50 > img {
    height: 100%;
}

@media (min-width: 721px) {
  @media (min-aspect-ratio: 1024/640) {
    #details ul.boxes > li > div.b50 {
      height: 20vh;
    }
  }
  @media (max-aspect-ratio: 1024/640) {
    #details ul.boxes > li > div.b50 {
      height: 12.50vw;
    }
  }
}
@media (max-width: 720px) {
  #details {
    font-size: medium;
    /* width: 100%; */
  }
  @media (min-aspect-ratio: 1024/640) {
    #details ul.boxes > li > div.b50 {
      height: 60vh;
    }
  }
  @media (max-aspect-ratio: 1024/640) {
    #details ul.boxes > li > div.b50 {
      height: 37.50vw;
    }
  }
}

#details ul.border > li,
#details li.border {
  border: thin solid #85A236; /* 795811 */
}

#details li h2 { text-align:center; }

.scrollbulb { --scroll-opacity: 1.0; --bulb-opacity: 1.0; --scroll-glow-opacity: 0.0; --bulb-glow-opacity: 1.0; }