:root {
--dark    :#cc3600;
--normal  :orangered;
--light   :#ff8f66;
--tintlite:#eef6ff;
--tint    :#ffece6;
--tintdark:#99ccff;
--red     :#BF1722;
--bg      :white;
--tinyf     : 0.8rem;
--smallf    : 0.9rem;
--normalf   : 1.0rem;
--largef    : 1.1rem;
--largerf   : 1.2rem;
--logof     : 2.0rem;
--sublogof  : 1.8rem;
--hdrf      : 1.5rem;
--subhdrf   : 1.3rem;
--buttonf   : 16px;
--sbuttonf  : 14px;
--hdr_height:110px;
}

.white_bg
  {background-color:var(--bg) !important}
.black_bg
  {background-color:black !important}
.dark_bg
  {background-color:var(--dark) !important}
.light_bg
  {background-color:var(--light) !important}
.red_bg
  {background-color:var(--red) !important}
.green_bg
  {background-color:green !important}
.white
  {color:white !important}
.black
  {color:black !important}
.dark
  {color:var(--dark) !important}
.light
  {color:var(--light) !important}
.red
  {color:var(--red)}
.green
  {color:green}
.navy
  {color:navy}
.dark_shadow
  {box-shadow:-1px 2px var(--light) inset}
.light_shadow
  {box-shadow:-1px 2px var(--dark) inset}
.gray_shadow
  {box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3)}
.no_box
  { }
.dark_box
  {background-color: var(--dark) !important; color: white !important}
.light_box
  {background-color: var(--light); color: var(--dark)}
.tint_box
  {background-color: var(--tint);  color: var(--dark)}
.shadow_0
  {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px}
.shadow_tint
  {box-shadow: var(--tintmed) 0px 7px 15px 0px}
.shadow_dark
  {box-shadow: var(--dark) 0px 7px 15px 0px}
.shadow_light
  {box-shadow: var(--light) 0px 7px 15px 0px}
.shadow_0:hover
  {box-shadow:var(--dark) 0px 7px 29px 0px}
.bold
  {font-weight:bold}
.print
  {display:none}

.cur_zoom
  {cursor:zoom-in}
.cur_grab
  {cursor:grab; cursor:-webkit-grab}
.cur_point
  {cursor:pointer}

.hidden
  {display:none}
.border
  {border: 1px solid var(--dark); border-radius:5px}
.rounded
  {border-radius:5px}
.indent
  {padding-left:10px !important}
.indentmore
  {padding-left:20px !important}
.padit
  {padding:5px !important}
.padmore
  {padding:10px !important}
.padbottom
  {padding-bottom:5px !important}
.auto_height
  {height:auto !important}
.auto_width
  {width:auto !important}
.left
  {float:left  !important}
.right
  {float:right !important}
.center_text
  {text-align:center}
.center_items
  {display:flex; align-items:center}
.fit_width
  {width:fit-content}
.fit_height
  {height:fit-content}
ol.nobullet, ul.nobullet
  {list-style-type:none; padding:0; margin:0}
ul.square
  {list-style-type:square}
ol.alpha
  {list-style-type:lower-alpha}
ol.alpha ol
  {list-style-type:lower-roman}
ol.alpha ol ol
  {list-style-type:circle}
i.i40
  {font-size:40px}
q.url
  {font-weight:bold; padding:0 2px 0 2px}

header
  {overflow:auto;  background-color: var(--dark); color:white; padding:10px;
   height:100px; width:100%; font-size:var(--largef)}
header img
  {float: left; padding: 10px; display:inline; width:80px; height:80px}
div.hdr-main
  {left:auto; right:auto; float:left}
div.hdr-rest
  {position:relative; float:left; height:100%; width:auto}
div.hdr-menu
  {float:right; font-size:18px; height:100px}
div.hdr-logo
  {float:left; height:100px; width:auto}
div.hdr-logo a
  {text-decoration:none; height:100px; width:auto; padding: 0px 10px 0px 10px;
   display:table-cell; vertical-align:middle;  font-size:var(--logof); font-weight:bold;
   color:white;}
div.hdr-menu div
  {height:100px; width:auto; display:table-cell; vertical-align:middle}
a.hdr-img
  {float:left; color:black; text-decoration:none;
   font-size:var(--logof);  font-weight:bold; top:auto; bottom:auto}
a.hdr-link
  {float:left; color:white; text-decoration:none;
   font-size:var(--logof); font-weight:bold; padding:0 10px 0 10px}
a.hdr-link svg
  {height:24px; width:24px; font-weight:bolder; stroke-width:4}
a.hdr-img:hover
  {background-color:white}
a.hdr-link:hover
  {background-color:white; color:var(--dark)}
@media screen and (max-width: 500px) {
  .hdr-rest
    {height:fit-content !important; max-width:50%}
  .hdr-logo
    {float: none !important; height:60px !important}
  .hdr-menu
    {float: none !important; display: block; text-align: left;  height:40px !important}
  .hdr-logo a
    {height:60px !important}
  .hdr-menu div
    {height:40px !important}
}

:root {
  --ham_size:40px;
  --ham_top:35px;
  --ham_spt:10px;
  --ham_spb:-10px;
}
div.menu-list
  {position:relative; top:-5px; margin:0; clear:none; max-height:none; width:100%;
   display:block; border-radius:0; overflow:hidden; background-color:var(--dark);
   color:white}
div.menu-list ul
  {margin:0; right:0; list-style:none; overflow:hidden; padding-right:20px}
div.menu-list li
  {float: left}
div.menu-list li a
  {display:block; color:white; text-decoration:none; padding: 15px 30px}
div.menu-list li a:hover, input.menu-btn:hover
  {background-color: var(--light); color:yellow}
label.menu-icon
  {cursor:pointer; display:none; position:absolute;  top:var(--ham_top);
   right:20px; height:var(--ham_size); user-select:none; z-index:101}
label.menu-icon span
  {background:white; display:block; height:4px; top:20px; position:relative;
    transition:background .2s ease-out; width:var(--ham_size)}
label.menu-icon span:before, label.menu-icon span:after
  {background: white; content: ''; display: block; height: 100%; position: absolute;
   transition: all .2s ease-out; width: 100%}
label.menu-icon span:before
  {top: var(--ham_spt)}
label.menu-icon span:after
  {top: var(--ham_spb)}
label.menu-icon:hover
  {background-color:var(--light)}
input.menu-btn
  {display: none}
input.menu-btn:checked ~ .menu-list
  {max-height: 100%}
input.menu-btn:checked ~ .menu-icon span
  {background: transparent}
input.menu-btn:checked ~ .menu-icon span:before
  {transform: rotate(-45deg)}
input.menu-btn:checked ~ .menu-icon span:after
  {transform: rotate(45deg)}
input.menu-btn:checked ~ .menu-icon:not(.steps) span:before,
input.menu-btn:checked ~ .menu-icon:not(.steps) span:after
  {top: 0}
@media only screen and (max-width: 800px) {
  :root {--ham_size:30px}
  div.menu-list
    {position:absolute; right:0; top:var(--hdr_height);  clear:both; max-height:0;
     height:auto; width:auto; transition:max-height .2s ease-out;
     border-radius:0 0 0 10px; z-index:100}
  div.menu-list ul
    {padding:0px 20px 10px 20px}
  div.menu-list li
    {float:none}
  div.menu-list li a
    {padding:10px}
  label.menu-icon
    {display:inline-block}
}

div.center
  {margin-left:auto !important; margin-right:auto !important}
div.center h2
  {text-align:center; padding:5px}
div.small
  {width:100px}
div.normal
  {width:600px; max-width:90%}
div.large
  {width:700px; max-width:90%}
div.larger
  {width:1000px; max-width:90%}
div.wide
  {max-width:100% !important}
div.full
  {width:100% !important}
div.margin
  {margin-left:10px; margin-right:10px}
div.outer
  {padding:10px}
div.scroll
  {overflow:scroll; padding-top:10px}
div.padded
  {padding:10px !important}
div.list
  {font-size:var(--normalf); padding-top:10px; padding-bottom:10px;
   min-height:150px; max-width:700px}
div.field, div.control
  {box-sizing: border-box}
div.control
  {position:relative; text-align:inherit}
div.field label
  {margin-bottom:0.5em; line-height:1.5rem; font-size:inherit; font-style:normal}
div.field input, div.field select, div.field textarea
  {border-radius:3px; font-size:inherit; font-style:normal}
div.field:not(:last-child)
  {margin-bottom: 0.75rem}

h2.il, h3.il
  {display:inline !important}
h2.plain, h3.plain
  {font-weight:normal !important; font-size:1rem !important}
h2.button, h3.button
  {color:white !important; background-color:var(--dark);
   text-align:center; border-radius:5px; padding:5px}
h2.invert, h2.invert_red, h3.invert, h3.invert_red
  {color:white !important; padding:2px 4px 2px 4px;
   border-radius:4px; font-weight:normal !important}
h2.invert, h3.invert
  {background-color:var(--dark) !important; border:1px solid var(--dark)}
h2.invert_red, h3.invert_red
  {background-color:var(--red) !important; border:1px solid red}

body
  {margin:0px; border-style:none; height:100%;  background-color:var(--bg); font:
   15px Arial, sans-serif; padding-bottom:100px; z-index:0;
   font-family: "Arial", "sans-serif", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica"}
.underline
  {border-bottom: 2px var(--dark) solid}
.overline
  {border-top: 2px var(--dark) solid}
.box
  {background-color:var(--tintlite); border:1px solid var(--tintmed);
   border-radius:5px; padding:5px}

div.error
  {width:auto; padding:10px; margin:10px; color:white; background-color:var(--red)}
div.error2
  {width:auto; padding:10px; margin:10px 0 10px 0; color:var(--red)}
div.error2:before
  {content:'* '}

div.content
  {height:auto; max-width:90%; margin-top:10px; margin-bottom:10px; margin-left:auto;
   margin-right:auto; padding:10px; font-size:var(--normalf); color:var(--dark)}
div.content h1
  {margin:0px 10px 0px 10px; text-align:center; font-size:var(--subhdrf)}
div.content h2
  {font-size:var(--subhdrf)}

.info
  {font-size:var(--hdrf)}
.sub_info
  {font-size:var(--subhdrf)}
.limited
  {max-width:600px}
.very_limited
  {max-width:400px}
.version, .kudos, .links
  {margin-left:10px}

.title
  {font-size:var(--hdrf); color:var(--dark); padding-top:10px; padding-left:10px;
   line-height:24px}
.title h1
  {font-size:var(--hdrf); color:var(--dark)}
.title h2
  {font-size:var(--subhdrf); color:var(--dark)}

footer.footer
  {font-size:var(--normalf); display:flex; position:absolute;
   width:100%; height:100px; background-color:#fcfcfc; color:var(--dark)}
div.footer
  {margin-top:10px}
div.footer_item
  {padding-left:10px; width:60px; float:left}
svg.footer_seal, img.footer_seal
  {background-color:white; height:60px; width:60px}
img.footer_w3c
  {background-color:white; border:0; width:88px; height:31px; margin-top:13px}
a.footer_link
  {padding-left:10px; color:var(--dark); float:left}

img.QR
  {height:50px; width:50px}

textarea
  {vertical-align:top}
select.small, button.small, input.small, textarea.small
  {font-size:var(--normalf)}
select.large, button.large, input.large, textarea.large
{font-size:var(--largerf)}
textarea, select, input[type=text], input[type=password],
input[type=email], input[type=tel], input[type=url]
  {background-color:white; color:black; margin-bottom:5px; border: solid 1px var(--light)}
textarea:read-only, input:read-only
  {background-color:#f2f2f2; color:gray}
input[type=checkbox].small
  {margin-right:10px}
input[type=checkbox].large
  {}
input[type=checkbox].small:checked, input[type=checkbox].large:checked
  {background-color:var(--dark)}
label.auto, label.tiny, label.small
  {height: 24px; font-size:var(--normalf); padding-right:5px}
label.large
  {height: 40px; font-size:var(--largerf); padding-right:10px}
label.bold
  {font-weight:bold}
select.small, button.small, input[type=button].small,
input[type=radio].small, input[type=submit].small, input[type=color].small
  {height: 24px; width: 103px}
select.large, button.large, input[type=button].large,
input[type=radio].large, input[type=submit].large, input[type=color].large
  {height: 40px; width: 150px}
button, input[type=button], input[type=radio],
input[type=submit], input[type=checkbox], label
  {border: 0; border-radius:5px}
input[type=color]
  {border-radius:5px}
input[type=text].button
  {width:103px; border-radius:5px}
input[type=password].wide, input[type=text].wide,
input[type=email].wide, input[type=tel].wide, input[type=url].wide
  {width:300px}
input[type=password].wider, input[type=text].wider,
input[type=email].wider, input[type=tel].wider, input[type=url].wider
  {width:400px; max-width:90%}
select.wider, button.wider, input[type=button].wider, input[type=radio].wider,
input[type=submit].wider, input[type=color].wider, input[type=checkbox].wider,
label.wider
  {width: 140px !important}
div.full_width, input.full_width, select.full_width, textarea.full_width,
button.full_width
  {width:90%}
select
  {cursor:pointer; padding-top:1px; padding-bottom:1px}
input[type=submit]
  {cursor:grab}
label.required::after
  {content:' *'; color:var(--red)}

table.center
  {margin-left:auto; margin-right:auto}
img.flip
  {}
img.flip:hover
  {transform: scaleX(-1)}
img.rotate
  {}
img.rotate:hover
  {transform: rotate(180deg)}

table.wide
  {width:100%}

button
  {height:40px; width:100px; border: solid var(--dark) 1px; border-radius:12px;
    margin:10px; color:white; background-color:var(--dark);
    font-size:var(--buttonf); vertical-align:middle; text-align:center}
button:hover
  {background-color:var(--light); border-color:var(--light)}
button.active
  {background-color:var(--dark); border-color:var(--dark); color:white}
button.inactive
  {background-color:#ddd; border-color:gray; color:black}
button.private
  {background:transparent; border:none !important; font-size:0; height:40px}
button.show:hover
  {background:var(--tintlite); border:solid 1px var(--light); width:100px}

a.plain
  {text-decoration: none; cursor:pointer}
a.plain:hover, a.plain:visited
  {color:inherit; }

label.button,
a.button
  {display: inline-block; line-height:20px; height:auto; width:auto; margin:10px;
   padding: 5px 10px 5px 10px; border: 1px solid var(--dark); border-radius: 8px;
   background-color: var(--dark); color:white; text-decoration:none; text-align:center;
   font-size:var(--largerf)}
a.button.inactive
  {background-color:gray; border-color:gray}
a.button.bigger
  {padding: 10px 15px 10px 20px}
a.button_lite
  {display: inline-block; line-height:20px; height:auto; width:auto; margin:10px;
   padding: 5px 10px 5px 10px; border: 1px solid var(--dark); border-radius: 8px;
   background-color: white; color:var(--dark); text-decoration:none; text-align:center;
   font-size:var(--largef)}
a.button:hover
  {background-color:var(--light); border-color:var(--light)}
a.button_lite:hover
  {background-color:var(--dark); color:white}
a.compact
  {padding:5px; line-height:10px; border-radius: 5px; margin:5px}
a.asmenu
  {font-size:var(--buttonf); padding:5px; line-height:10px;
   border-radius: 5px; margin:5px; background-color:var(--tintlite); color:black}
a.asmenu:hover
  {background-color:var(--tintmed)}

h2.credits
  {font-size:var(--largerf); background-color:var(--dark); color:white;
   border-radius:5px; padding:3px}
ul.credits
  {width:auto; padding-left:30px; padding-top:10px; text-indent:-20px;
   line-height:30px; font-size:var(--normalf)}
ul.credits.section
  {padding-top:0 !important; padding-bottom:5px}
ul.credits a
  {text-decoration:none; color:var(--dark); font-weight:bold }
ul.credits b
  {padding-right:10px}
ul.credits span
  {padding-left:10px; vertical-align:top }
ul.list
  {text-indent:0 !important}

.red_list
 {text-indent:0 !important}
.red_list li::marker
 {color:var(--red)}
ul.airy, ol.airy
  {line-height:1.5rem}
ol.contract
  {list-style-type: lower-roman}
ol.contract ol
  {list-style-type: lower-alpha}

div.vert_cards
  {width:100%; overflow:scroll; padding:10px 5px 10px 5px}
div.vert_card
  {position: relative; min-height:60px; max-width:90%; width:800px; background-color:white;
   color:var(--dark); margin: 20px auto 40px auto; padding:5px; transition: 0.4s all}
div.vert_card.wbtn
  {padding:10px 10px 0px 10px}
div.vert_card:hover
  {background-color:var(--tintlite)}
div.vert_card h3
  {font-size:1.2em; color:var(--dark); margin:2px; display:inline}
div.vert_card h4
  {font-size:1.0em; color:var(--dark); display:inline}
div.vert_card p
  {color:var(--dark); margin-block-start:0}
div.vert_card a
  {text-decoration: none; cursor:pointer; height:auto}
div.vert_card img.fav
  {max-width:32px; max-height:32px; margin: 0 5px 5px 0}
div.vert_card img.logo
  {max-width:80px; max-height:80px; margin: 0 5px 5px 0}

div.images
  {width:100%; min-height:350px; height:fit-content;}
img.object         
  {width:auto; height:auto; max-width:300px; min-height:300px}

table.grid
  {width:auto; margin-left:10px; border: 1px solid black;
   border-collapse:collapse; font-size:var(--normalf)}
table.grid thead, table.grid tfoot
  {border: 1px solid var(--dark); font-weight:bold; color:var(--dark)}
table.grid td
  {border: 1px solid var(--dark); padding:5px}
table.grid sub
  {color:var(--red); margin-left:1px}

.overlay_bg
  {background-repeat: no-repeat; background-position: center; height:auto; width:auto}
.overlay_const
  {background-image: url('../img/construction0.jpg')}

span.mob_nl
  {}
.fade_on_mobile
  {opacity:1.0}
span.desktop
  {display:inline}
span.mobile
  {display:none}
.open
  {display:none}
@media (hover:none), (pointer:coarse){
  .open
    {font-weight:bold; display:inline}
  div.accordion.hidden.nu {display:flex !important; content:"always opens hidden blocks"}
}

@media (prefers-reduced-motion:reduce)
{
  div.vert_card:hover, li.hover, img.flip:hover, img.rotate:hover {animation: none}
}

@media only screen and not (max-width:640px)
{
}

@media only screen and (max-width:640px)
{:root {
  --smallf  : 1rem;
  --normalf : 1rem;
  --largef  : 1.1rem;
  --largerf : 1.2rem;
  --logof   : 1.4rem;
  --sublogof: 1.3rem;
  --hdrf    : 1.25rem;
  --subhdrf : 1.2rem;
  --buttonf : 20px;
  --sbuttonf: 18px;
  }

  .title
    {font-size:var(--largerf); font-weight:bold}

  div.normal
    {margin-left:10px; margin-right:10px}
  div.normal, div.large, div.larger, div.content
    {max-width:90%}

  .info
    {font-size:var(--largerf); margin-top:10px}
  .sub_info
    {font-size:var(--normalf)}

  .nobullet
    {padding-left:0px}

  button
    {height:30px; width:80px; font-size:var(--sbuttonf)}
  textarea
    {max-width:90%}

  a.asmenu
    {padding:10px; margin:10px; line-height:20px}

  span.mob_nl
    {display:table; text-indent:4px}
  .fade_on_mobile
    {opacity:0.5}
  span.desktop
    {display:none}
  span.mobile
    {display:inline}
}
@media only screen and (max-width:400px)
{ol, ul {padding-left:1em}
}

@media print {
html, body {width:210mm; max-height:290mm}
body {margin:0; padding:0; background-color:#FAFAFA; font:12pt "Tahoma"}
*    {box-sizing: border-box; -moz-box-sizing: border-box}

.page
 {width:210mm; max-height:296mm; padding:2cm; margin:1cm auto;
         border: 1px #D3D3D3 solid; border-radius: 5px; background: white;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)}
.subpage
 {padding:1cm; border:5px red solid; height:256mm; outline:2cm #FFEAEA solid}

table, img, svg {break-inside:avoid}

header, footer, aside, nav, form, iframe, .menu, .hero, .adslot
    {display: none !important}

div.content {width:90% !important}
.plainprint {border:none !important; box-shadow:none !important}
.noprint {display:none !important}
span.print  {display:inline !important}
div.print   {display:block !important}
h1, h2, h3  {color:black !important; background-color:white !important}
  @page {size: A4; margin: 1cm auto}
}