:root {
    --colorOrange: #f68713;
    --colorBlue: #0d89d3;
    --colorGrey: #918f90;
    --colorbgGrey: #f3f3f3;
    --firebrick1: #ff3030;
}

body {width: 100%;margin:0;padding:0;}
.orange {color: var(--colorOrange)}
.blue {color: #0d89d3;}
.grey {color: #918f90;}
.red {color: #ee0000;}
.green {color: #00ff00;}
.bold {font-weight:bold;}

.bgred {background-color: var(--firebrick1);}
.bggreen {background-color: #00ff00;}


input#hamburg {display:none}
label.hamburg {display: block;position: relative;background: #918f90;width: 75px;height: 48px;border-bottom: 0;}
.line {position: absolute;left:10px;height: 4px; width: 55px;background: #fff; border-radius: 2px;display: block;transition: 0.5s;transform-origin: center;}
.line:nth-child(1) {top: 12px; }
.line:nth-child(2) {top: 24px; }
.line:nth-child(3) {top: 36px; }
#hamburg:checked + .hamburg .line:nth-child(1){transform: translateY(12px) rotate(-45deg);}
#hamburg:checked + .hamburg .line:nth-child(2){opacity:0;}
#hamburg:checked + .hamburg .line:nth-child(3){transform: translateY(-12px) rotate(45deg);}

#wrapper {width:100%;}
#header {position:relative}
#header img {float:left;padding:0.5em;width:100%;height:auto;}
#header h1 {margin-top:5px;padding-left: 6px;XXXfont-size:1.6em;font-size:clamp(12px,5.5vw,20px)}
#header h2 {margin:0;padding-left: 10px;XXXfont-size:1.1em;font-size:clamp(12px,5.5vw,16px)}
h1 {font-size: clamp(20px,5.5vw,26px);margin:0.1em 0;} /* 32px */
h2 {font-size: clamp(16px,4vw,20px);} /* 24px */
h3 {font-size: clamp(18px,3.5vw,32px);} /* 18.72px */
h4 {font-size: clamp(16px,2.5vw,30px);} /* 16px */
h5 {font-size: clamp(13px,1.8vw,28px);} /* 13.28px */
h6 {font-size: clamp(13px,1.5vw,24px);} /* 13.28px */
/* Druck-, Erscheinungskontrolle */
.onlyprint {  display: none !important; }
.displaynone { display:none !important; }
img.image {width:100%;height:auto;}
a { color:#0d88d3;font-weight:bold;}
a:focus {}
a:visited {color:#0d88d3;}
a:active {}
a:hover {color:#555555;}

#footer {background-color:#0d88d3;opacity:0.8;bottom:0;left:0;padding:0;position:fixed;right:0;z-index:910;}
#footer ul { float:right;font-weight:bolder;list-style-type:none; XXXoverflow:hidden; color:#ffffff;height:20px;}
#footer ul li { float:left; overflow:hidden;text-align:center;} 
#footer ul li a { color:#ffffff; display:block; text-decoration:none;padding:0 16px 0 16px;}
#footer ul li p { margin:0; padding:0; text-align:center;} 
#footer ul li p a, ul.fg_lister li p a:visited { color:#ffffff; text-decoration:none; }
#footer ul li p a:hover, ul.fg_lister li p a:focus, ul.fg_lister li p a:active { text-decoration:none; background-color: #f68712; }
#footer ul li p a.selected { background-color: #f68712; }

div.menu {background-color: #0d88d3;opacity: 0.8;color: #000000;height:53px}

p.demo, p.login {
    background-color: #0d89d3;
    color: #fff;
    padding: 5px 2px;
    font-size: clamp(12px,1vw,14px);
    border-radius: 5px;
    cursor: pointer;
    margin:6px;
    text-align:right;
    opacity:0.9;
}
p.demo {
    background-color: var(--colorOrange);
}
p.login {
    background-color: #0d89d3;
}
p.demo a, p.login a { text-decoration:none;color:inherit}


/* ---- */
#breadcrumbnav {border-bottom: 1px solid #0d88d3;background-color:#918f90;opacity:0.5;margin:0 auto;}
#breadcrumbnav ul { list-style-type:none; font-weight:bolder;list-style-type:none; color:#000000;} /*height:20px;*/
#breadcrumbnav ul li {float:left;margin-right:12px; display:block;width:auto;}/*font-size:12px;*/

a.demo,a.demo:active, a.demo:visited {text-decoration:none;font-weight:bold;}

#content ul.faq {list-style-type:none;}
#content ul.faq > li {font-weight:bold;}
#content ul.faq > li > ul {list-style-type:none;}
#content ul.faq > li > ul > li {font-style:italic;font-weight:normal;}

#content ul { line-height: 1.6em;}
#content p {
    line-height: 1.6em;
    padding-bottom: 0.6em;
}
#content ul.blank {list-style-type:none;}

#content table.costs th {min-width:10em;}
#content table.costs {border:1px solid black;margin:0 auto;}
#content table.costs td{text-align:center;}
#content table.costs tr:nth-child(even) {background-color:#dddddd;}
#content table.costs a.reglink{text-decoration:none;width: 120px;height: 24px;padding: 6px 0px 0px 0px !important;display: block;text-align: center;margin-left: auto;margin-right: auto;text-shadow: 0px 1px 0px #ffffff;border: 1px solid #b5b5b5;background-color: #d8d8d8;outline: none;font-size:16px;;margin:12px auto;}
#content table.costs td.costs h2 {font-size: 30px !important;margin: 0px !important;padding: 0px !important;font-weight: normal !important;border: none !important;line-height: normal !important;letter-spacing: 0;text-transform: none;background: none;text-shadow: none !important;text-align: inherit !important;font-style: normal !important;width: auto !important;float: none !important;position: static !important;display:inline; }
#content table.costs td.costs h3 {margin: 0px !important;
padding: 0px !important;
font-weight: normal !important;
border: none !important;
line-height: normal !important;
letter-spacing: 0;
text-transform: none;
background: none;
text-shadow: none !important;
text-align: inherit !important;
font-style: normal !important;
width: auto !important;
float: none !important;
position: static !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;font-size:20px;}
#content table.costs td.costs strong{font-size: 38px !important;text-shadow: none !important;font-weight: normal !important;padding: 0 !important;background: none !important}
#content table.costs a.reglink:visited{text-decoration:none;}
#content table.costs table.subtable {margin:0 auto;width:100%;}
#content table.costs tr td:first-child {padding-top:6px;padding-bottom:6px;}
#content table.costs table.subtable tr td:first-child {padding:0;}
#content table.costs table.tsubtable tr td:first-child {padding:0;}

#content table.manufacturer {border:1px solid black;}
#content table.manufacturer td{text-align:center;}
#content table.manufacturer tr:nth-child(even) {background-color:#dddddd;}

#content table.experiments tr td:nth-child(2), #content table.experiments tr td:nth-child(3){text-align:center;}

#content img {
    border: 0 none;
}
#content a.intern,
#content a.intern:visited {
    text-decoration:underline;color:black;       
}
#content a.intern::before {content : "\2192\00A0";}

#content a.extern,
#content a.extern:visited {
    text-decoration:underline;color:black;       
}
#content a.extern::before {content : "\2197\00A0";}

#content a.download,
#content a.download:visited {
	text-decoration:underline;
	color:black;       
}
#content a.download::after {content : "\00A0\00A0\2193";}

#content a.image,
#content a.image:visited {
    text-decoration:none;font-size:0.8em;color:black;       
}
#content a.image img {
    border-radius: 4px;
    width: 14rem;
    border: 1px solid #0d88d3;
}

#content img.respl {
    float:left;
    margin:0.3em;
    width:100%;
    height:auto;
}
#content img.respr {
    float:right;
    margin:0.3em;
    width:100%;
    height:auto;
}

#licencetext > label { width: auto !important;}
div.hint {padding:0.5em; font-weight:bold; background-color: #0d89d3;border-bottom: 3px solid #f68713; border-top: 3px solid #f68713; margin: 0 auto;text-align:center;}
div.hint p {font-weight:bold; color:white;font-size:1.1em;}

div.hintorange {background-color: #f68713;margin: 0.5em auto;text-align:center;}
div.hintorange p {font-weight:bold; color:white;font-size:1.1em;padding:0.5em;}

p.error {padding:0.5em; font-weight:bold; background-color: #ffdfdf; border-bottom: 3px solid #df7d7d; border-top: 3px solid #df7d7d; margin: 0 auto;text-align:center;}
p.errorrabattcode {padding:0.5em; font-weight:bold; background-color: #ffdfdf; border-bottom: 3px solid #df7d7d; border-top: 3px solid #df7d7d; margin: 0 auto;text-align:center;}
ul.error { list-style-type: none;margin:0;margin-bottom:0.5em;;}

input[type=submit]{
    display: block;
    width: 200px;
    height: 50px;
    margin: 0 auto !important;
    background: #3498db;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding-left: 2em !important;
    padding-right: 2em !important;
    width: auto !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
     transition: all 0.4s; /* Animierte Änderung der Eigenschaft background-color */
}
input[type=submit]:disabled{opacity:0.5}
input[type=submit]:enabled:hover{   border: 5px solid #3498db;  background-color: #f68713; /* Neue Farbe */}
input[type=submit]:disabled:hover{ }

#content table.contactdata {font-weight:normal;border: 1px solid black;border-collapse: collapse;margin-bottom: 22px;}
table.contactdata td{border-top: 1px solid black;} 
table.contactdata td:nth-child(1){text-align:right;font-weight:bold;}
table.contactdata td:nth-child(2){text-align:left}

table.license {font-weight:normal;border: 1px solid black;border-collapse: collapse;width:100%}
table.license td{border-top: 1px solid black;} 
table.license td.totalpricedesc{text-align:right;font-weight:bold;}
table.license td.totalprice{font-size:22px;font-weight:bold}
table.license th{text-align:left;font-weight:normal}
table.license td:nth-child(1){text-align:right}
table.license td:nth-child(2){text-align:right}
table.license td.desctotaldiscout {font-style:italic;font-size:smaller}
table.license td strong.discountcode,table.license td small.discountcode {color:#3498db}
table.license td.totaltaxdesc {font-style:italic;font-size:smaller}
table.license tr:first-child, tr.total {background-color:#dddddd;}

    form {margin-bottom: 10em !important;}


.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /* fix other elements on the page moving (in Chrome) */
    -webkit-transform: translateZ(0);
}
/** THEME
===================================*/
.bx-wrapper {
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  border: 5px solid #fff;
  background: #fff;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('/gfx/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('/gfx/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('/gfx/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('/gfx/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('/gfx/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

.u-row::after, .u-row::before {
    content: "";
    display: table;
}
.Base-line--bold {
    border-left: 180px solid #f68712;
    border-top: 8px solid #0d88d3;
    margin: 19px 0;
}
hr {
    box-sizing: content-box;
    overflow: visible;
}
hr {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    display: block;
    height: 1px;
    padding: 0;
}

.articlebox {
border-top-left-radius: 8px;
border-bottom-right-radius: 32px;
border-left: 1px solid #0d88d3;
border-bottom: 1px solid #f68712;
padding: 0.8em;
-webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
} 
.articlebox h2 { display:block; margin:0;padding:0;line-height:1;}

#articleboxcont {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

ol.faq li { font-weight: bold; margin-top: 0.5em; }
ol.faq ul { list-style-type: none; padding-left:0;}
ol.faq ul li { font-weight:normal; }

.back-to-top {
 background:#eeeeee;
 position: fixed;
 bottom:80px;
 right:5px;
 padding:1em;
 z-index:999;
}

#header h1 {font-weight: 650;}
#header h2 {font-weight: 500;}
body {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.42857;
    color: #333;
}
.btn-success em {
    display: table-cell;
    width: 113px;
    height: 113px;
    background: #0d88d3;
    border-radius: 170px;
    margin: 0 auto;
    margin-left: auto;
    text-align: center;
    font-size: 36px;
    vertical-align: middle;
    margin-left: 10px;
    color: #fff;
    font-weight: 600;
    font-style: normal;}

div.circle-bg {
    display: block;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: var(--colorBlue);
    transition: border-color .5s linear;
    text-align: center;
    margin: 0 auto;
}
div.circle-bg p {padding-top:14px;    font-weight: 100;}
div.circle-bg p em {}

.iconBox h3 {
    text-align: center;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 1.1;
}
p {margin: 0 0 10px;		}
.bgstyle {width:100%;background:var(--colorbgGrey);}

div.slidingbox{}
div.slidingbox h1 {font-size:44px;font-weight: 100;color: #000;text-align: left;text-transform: uppercase;}
div.slidingbox ul {list-style-type: square;font-size: 20px;font-weight: 100;}
p.btn-successb {position:relative;float: right;top: -46px;}
p.btn-successb span {width: 120px;height: 120px;border-radius: 100px;background-color: #ccc;border: none;padding: 1px 0 0 3px;}
em.fal {
    width:64px;
    height:64px;
    overflow: hidden;
    background-image: url('/gfx/menu64x64_2.png');
    display:block;
    margin:0 auto;
}
.ce-bodytext p {word-wrap: break-word;hyphens: auto;-webkit-hyphens: auto;font-weight:100;}
.bg64-MeineGeraete {background-position: -1184px 0;}	    
.bg64-MeineVersuche {background-position: -1110px 0;}	    
.bg64-MeinUnterricht {background-position: -1036px 0;}	    
.bg64-Lieferung {background-position: -1258px 0;}	    
.bg64-Bestellung {background-position: -1850px 0;}	    
.bg64-Stoffverteilung {background-position: -444px 0;}	    
.bg64-Einstellungen {background-position: -1702px 0;}	    
.bg64-Mehrbenutzer {background-position: -1628px 0;	}	    
.bg64-Vorteile {background-position: -148px 0}
.bg64-Nachhaltig {background-position: 0 0}
.bg64-Service {background-position: -2361px 4px;}
.bg64-meineBuecher {background-image: url('/gfx/menu48x48.png') !important;background-position: -274px -272px;}

@media screen and (max-width: 480px) {
    div.slidingbox{ margin-top:32px;}
    div.slidingbox h1 {font-size:22px;}
    p.login{line-height:40px}
    form label.left { text-align:left !important;margin-bottom:0;padding-bottom:0;padding-left:0;}
    #content {padding-top:160px;}
    #header {background-color: #fff}
    #header h1 {XXXmargin-left:2em;font-size:clamp(8px,5vw,24px)}
    #header h2 {display:none;}
    #header a.demo {display:none;}
    .XXXmainlinks div {padding-top: 14px;text-align:right;}
    xxxdiv.articlebox {float:left; width:95% !important; }
    div.menu {height:auto;background-color:var(--mbgcolor);opacity:0.97}
    p.demo, p.login {width:40%;min-height:42px;text-align:center;float:right;display:XXXflex;XXXalign-items: center;text-align:center;text-valign:middle}
    div.mainlinks {padding-top:14px}
    div.articlebox ul { padding-left:1.1em;list-style-type: none;}
    div.articlebox ul li {text-align: justify;margin-top:0.3em;margin-bottom:0.3em;}
    #footer {position:static;}
    div#footer {margin-top: 30px;}
    div#footer ul {height:auto;float:none;padding:0;}
    div#footer li {
	margin-left:0;
	width:100%;
	height:45px;
    }
    div#footer a {
	padding: 12px 12px;
    }
    #footer ul li a { padding:16px 16px 16px 16px;}
    div#footer span {
	padding: 12px 0 !important;
    }

:root {
    --mfontsize: clamp(8px,6vw,20px);
    --mfontcolor: #000;
    --mhfontcolor: #333;
    --mhtextshadow: 2px 2px #fff;
    --mbgcolor: #eeeeee;
    --mbordercolor: #ffffff;
    --mbbackbgcolor: #ffff;
    --mfarrowbordercolor: #000000;
    --mbarrowbordercolor: #000000;
}

    
}
@media screen and (min-width: 481px) and (max-width: 767px) {
    div.mainlinks {width:25% !important;float:right;}
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    #header h1 {margin-left:2em; XXXfont-size:1.2em;}
    #header h2 {display: none;}
    #header a.demo {float:right;}

    #footer {position:static;}
    div#footer {margin-top: 30px;}
    div#footer ul {padding:0;margin:0;height:auto;float:none;}
    div#footer li {width:100%;	height:25px;    }
    div#footer a {	padding: 12px 0;    }
    div#footer span {	padding: 12px 0 !important;    }
}

@media only screen and (min-width: 768px) and (max-width:1023px) {
    /* set height so content isn't pushed down add z-index to keep drops above content */
    #header h1 {}
    #header h2 {}
    #header a.demo {float:right}
}

@media only screen and (min-width: 1100px){
    div.mnlimb {display:none !important}
    :root {
	--fontsize: clamp(16px,1vw,18px);
	--fontsizelevel2: clamp(12px,1vw,14px);
	--itemwidth:10%;
	--hovcolebene1: #f68713;
	--borbotcolebene: #fff;
	--bkground: #0d89d3;
	--fontcolor: #fff;
	--fontshadowcolor: rgba(0,0,0,0.3);
    }
    ul.sf-menu {display:block !important;}
    .anicheck,li.back,label.fwrd {display:none;}
    
    .skip-link {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
    }
    div.mnlimb {display:block;position:fixed;top:6px;right:0}
    
    .sf-menu{border-top:none;height:36px;z-index:100;width:80%;margin:0 auto;}
    
    .sf-menu {padding:0;list-style:none}
    .sf-menu * {margin:0;padding:0;list-style:none}
    .sf-menu ul {position:absolute;top:-999em}
    .sf-menu li {background:var(--bkground);background-repeat:repeat-x;XXXborder-top:1px solid var(--borbotcolebene);clear:left;float:left;position:relative;width:20%;text-align:center;}
    .XXXsf-menu > li {border-bottom:none !important;}
    .sf-menu li:hover {background-color:var(--hovcolebene1);visibility:inherit; /* fixes IE7 'sticky bug' */}
    .sf-menu a, .sf-menu span.nolink {font-size:var(--fontsize);color: var(--fontcolor);display:block;text-decoration:none;text-shadow:0 1px 1px var(--fontshadowcolor);font-weight:bold;padding:14px 0;text-overflow: ellipsis;overflow: hidden;}
    
    .sf-menu li li li a, , .sf-menu li li li span.nolink{text-indent:4px}
    .sf-menu li li li li a, .sf-menu li li li li span.nolink {text-indent:6px}
    
    .sf-menu li {clear:none;width:var(--itemwidth);XXXborder-top:1px solid var(--bkground);XXXborder-bottom:1px solid var(--borbotcolebene)}
    .sf-menu li li:last-child {border-bottom:none}
    .sf-menu li li li:last-child {border-bottom:1px solid var(--borbotcolebene)}
    .sf-menu li li:nth-of-type(2) {border-top:1px solid var(--borbotcolebene)}
    
    .sf-menu li li{background:var(--bkground);background-repeat:repeat-x;clear:left;width:100%}
    .sf-menu li li a, .sf-menu li li li a, .sf-menu li li li li a, .sf-menu li li span.nolink ,.sf-menu li li  li span.nolink ,.sf-menu li li  li li span.nolink {width:100%}
    .sf-menu li li a, .sf-menu li li span.nolink {text-indent:2px;font-size:var(--fontsizelevel2)}
    .sf-menu li li,.sf-menu li li:hover, .sf-menu li li:active{background:none;background-image:none;background-color:var(--bkground);text-align:left;text-align:center}
    
    .sf-menu li:hover ul,.sf-menu li:active ul{top:auto;position:relative;background:var(--bkground);left:auto !important;position:absolute;top:54px;width:100%;z-index:100}
    .sf-menu li:hover ul {}
    
    .sf-menu li:hover li ul {position:absolute;top:-999em}
    .sf-menu li li:hover ul {top:auto;position:relative}
    .sf-menu li li:hover li ul {position:absolute;top:-999em}
    .sf-menu li li li:hover ul {top:auto;position:relative}
    .sf-menu li li:hover ul{background:var(--bkground);position:absolute;top:-1px;left:100% !important}
    .sf-menu li li li:hover ul{background:var(--bkground);position:absolute;top:-1px;left:100%}
}

@media only screen and (max-width:1099px) {
    div.mnlimb {
	display: block;
	position: absolute;
	top: 56px;
	right: 30px;
    }
    div.menu {height:auto;opacity:1;background-color:var(--mbgcolor)}
    div.menu {position: absolute;
	      top: 48px;
	      right: 20px;
	      z-index: 10000;width: 40%;overflow:visible;}
    :root {
	--mfontsize: clamp(8px,6vw,24px);
	--mfontcolor: #000;
	--mhfontcolor: #333;
	--mhtextshadow: 2px 2px #fff;
	--mbgcolor: #eeeeee;
	--mbordercolor: #ffffff;
	--mbbackbgcolor: #ffff;
	--mfarrowbordercolor: #000000;
	--mbarrowbordercolor: #000000;
    }
    ul.sf-menu {display:none;}
    ul.sf-menu span.fwrd { display:block;}
    ul.sf-menu label.fwrd {display:block;}
    ul.sf-menu span.back { display:block;}
    ul.sf-menu label.back {display:block;}
    ul.sf-menu {}
    ul.sf-menu,ul.sf-menu ul {float:left;position: absolute;top:0}/*relative*/
    ul.sf-menu,ul.sf-menu ul {display:inline;padding:0;margin:0;width:100%}
    ul.sf-menu,ul.sf-menu ul {list-style-type:none;padding:0;}
    
    ul.sf-menu li ul {position:absolute}
    ul.sf-menu li ul {display:none;padding:0;position:absolute;top:0;left:0}
    
    ul.sf-menu li {width:100%;background-color:var(--mbgcolor)}
    ul.sf-menu li a, ul.sf-menu li span.nolink  {text-decoration:none;font-color:var(--mfontcolor);font-size: var(--mfontsize);display:block;padding:12px;XXXfloat:left;background-color:var(--mbgcolor);border-bottom:1px solid var(--mbordercolor);font-weight:bold}
    ul.sf-menu li a:visited, ul.sf-menu li a:link,ul.sf-menu li a:active{font-color:var(--mfontcolor);color:var(--mfontcolor)}
    ul.sf-menu li a:hover{color:var(--mhfontcolor);text-shadow:var(--mhtextshadow);}
    ul.sf-menu li label {display:block;float:left;padding:23px;border-bottom:1px solid var(--mbordercolor);background-color:var(--mbgcolor);border-left:2px solid var(--mbordercolor)}
    
    ul.sf-menu span.fwrd { content:''; display:block; height:var(--mfontsize);width:var(--mfontsize); border: 1px solid var(--mfarrowbordercolor);border-bottom:none;border-right:none;transform: rotate(135deg);left:-10px;position:relative;margin:-1px;}
    ul.sf-menu span.back { content:''; display:block; height:12px; width:12px; border: 1px solid var(--mbarrowbordercolor);border-bottom:none;border-right:none;transform: rotate(-45deg);position:relative}
    ul.sf-menu p.back {padding:5px}
    ul.sf-menu label.back {background-color: var(--mbgcolor);border-bottom:none}
    ul.sf-menu input.anicheck {display:none}
    ul.sf-menu input.anicheck:checked + a + label + ul {display:block}
    ul.sf-menu input.anicheck:checked + span.nolink + label + ul {display:block}
    ul.sf-menu input.anicheck + a + label + ul {display:none}
    ul.sf-menu input.anicheck + span.nolink + label + ul {display:none}
    ul.sf-menu li label.fwrd {padding:14px;}
}

@media only screen and (min-width: 481px) and (max-width:1098px) {
    /* set height so content isn't pushed down add z-index to keep drops above content */
    div.mnlimb {top:76px;}
    div.menu {top:124px}
    div#footer {position:unset;}
    #content {padding-top:22px;}
    ul.sf-menu {display:none;}

}
@media screen and (max-width: 480px) {
    div.menu {position: absolute;top: 48px;z-index: 10000; width: 100%;}
    div.menu {right:0;width:100%;overflow:visible !important;opacity:0.97}
    div#header {position:fixed !important;}
    div.mnlimb {top:0;right:0}
    ul.sf-menu {display:none;border-bottom:2px solid black}
    ul.sf-menu li a, ul.sf-menu li span.nolink {padding:20px}
    ul.sf-menu li label.fwrd {padding:22px}
}