body     {font-family:Tahoma,Geneva,sans-serif; border:0; margin:0; height:94vh;}
.mitte   {position:relative; top:0; left:0; color:#000000; background-color:#ffffff; width:100%; height:100vh; margin:0 auto;}
.topnav  {display:block; top:0; left:0; width:100%; height:67px;
          background-color:#0000c0; color:#ffffff; font-size:0.9em; text-align:left;}
.doff    {display:none;}
.gray    {position:absolute; top:0; left:0; width:100%; height:100%; z-index:20; background-color:#000000; opacity:0.5; filter:Alpha(opacity=50);}
.spalt1  {display:block; width:35px; color:#ffffff; text-align:center;}
.spalt2  {width:calc(100% - 230px);}
.spalt3  {text-align:right; width:190px; padding-right:3px;}
.logo    {margin-top:3px; margin-left:5px; width:100%; max-width:120px; height:60px;}
.menupic {height:28px; border:1px solid white; border-radius:3px; width:calc(100% - 2px); max-width:28px;}
.baskz   {text-align:center; color:#FFDF00; font-weight:bold; float:right; margin:0 10px; width:40px; height:32px; background-image: url('basket.svg');}
.main    {padding-top:calc(100vh - 77px); width:100%; position:relative;}
iframe   {position:absolute; top:0px; left:0; width:100%; height:calc(100vh - 77px); border:0; background-color:#ffffff; float:right;}
#nav     {position:absolute; top:0px; left:0; width:140px; height:calc(100vh - 77px); overflow:auto;
          border:0; background-color:#ffffff; padding:4px; text-align:left; z-index:40;}
.navoff  {display:none;}
.navon   {display:block;}
.killnav {display:block; text-align:right; font-weight:bold;}
.small   {font-size:0.8em;}

video        {width:97%;}
video source {width:100%; height:auto;}
.prodv       {float:left; padding-right:3%; padding-bottom:20px;}

.mid1        {position:absolute; top:10px; left:1%; width:98%;}
.but2        {position:relative; display:block; width:30%; height:auto; text-align:center; margin-bottom:0.5%; margin-right:1%; float:left;}
.but2o       {display:none;}
.buttxt      {position:absolute; top:3%; left:50%; transform:translate(-50%, 0%); color:#000000; font-size:0.9em;}
.butimg      {border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border: 2px solid #0000C0;}
.butimg:hover {border: 2px solid #FDFF00;}

.but3        {background-color:#F8F8E7; color:#000000; text-align:center; margin-top:6px; margin-bottom:8px; padding:2px 6px;
              border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; float:right;}
.but3:hover  {background-color:#F9D90C; color:#000000;}
.but3a       {background-color:#F8F8E7; color:#000000; text-align:center; margin-top:3px; margin-bottom:6px; padding:3px 6px;
              border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; float:right;}
.but3a:hover {background-color:#F9D90C; color:#000000;}

a            {text-decoration:none;}

a.top        {font-size:1em; color:#000000;}

.but4        {font-size:1em; background-color:#F8F8E7; color:#000000; text-align:center; vertical-align:middle;
              display:block; width:92%; height:22px; margin-top:7px;
              border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:1px solid #000000;
              box-shadow:2px 2px 2px #000000; -moz-box-shadow:2px 2px 2px #000000; -webkit-box-shadow:2px 2px 2px #000000;}
.but4:hover  {background-color:#0000C0; color:#FFFFFF;}

.but4a       {font-size:1em; background-color:#F8F8E7; color:#000000; text-align:center; vertical-align:middle;
              display:block; width:130px; height:22px; margin-top:7px;
              border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:1px solid #000000;
              box-shadow:2px 2px 2px #000000; -moz-box-shadow:2px 2px 2px #000000; -webkit-box-shadow:2px 2px 2px #000000;}
.but4a:hover {background-color:#0000C0; color:#FFFFFF;}

a.options       {font-size:0.875em; background-color:#ffffff; color:#000000; text-align:center; vertical-align:middle;
                 display:block; width:87%; height:15px; padding:2px 0; margin-left:4px; margin-top:7px;
                 border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border:1px solid #0000c0;}
a.options:hover {background-color:#0000C0; color:#FFFFFF;}

a.nav           {color:#000000; background-color:#ffffff; font-weight:bold;}
a.nav:hover     {color:#FF0000;}

a.nav2          {color:#ffffff; background-color:#0000c0;}
a.nav2:hover    {color:#ffff00;}

.wbuy {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:40; width:290px;
       border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border:1px solid #ffffff;
       color:#FFFFFF; background-color:#0000C0; line-height:20px; padding:7px;
       font-size:0.9em; text-align:left;}
.buyw {position:relative; left:125px;}

.button       {font-size:1em; background-color:#F8F8E7; color:#000000; text-align:center; margin:5px 0; padding:2px 5px;
               border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;}
.button:hover {background-color:#F9D90C; color:#000000;}

.rtable     {font-size:0.9em; color:#000000; background-color:#ffffff; border:0; width:98%; margin-left:3px;}
.header1    {background-color:#FFDF00; color:#000000; margin:8px 0; padding:5px;}
.producttop {background-color:#FFDF00; font-weight:bold; margin-bottom:10px; padding:6px;}

.ptxt     {padding-left:0.8em; text-indent:-0.8em}
.article1 {color:#0000c0; float:left; width:calc(100% - 105px);}
.article2 {color:#0000c0; float:right; width:100px; text-align:right;}

a.footer        {font-size:1.125em; color:#FF0000; background-color:#FFFFFF; font-weight:bold;}
a.footer:hover  {color:#0000C0;}

.bline  {width:calc(100% - 6px); font-weight:bold; background-color:#e9e9e9; padding:3px;}
.blinel {width:100%; padding:3px 0 3px 3px; text-align:left;}
.blinem {width:100%; padding:3px 0 3px 3px; text-align:left;}
.blinei {width:90px; padding:3px 0 3px 0; float:left; text-align:left;}
.bliner {width:85px; padding:3px 3px 3px 0; float:right; text-align:right;}

.ibox   {font-size:0.875em;}
.ebox   {font-size:0.875em; background-color:#FFFF00;}
.iwid0  {width:100%;}
.iwid1  {width:73px;}
.iwid2  {width:205px;}

.ffeld1 {width:80px; height:30px; float:left; clear:left; margin-right:5%;}
.ffeld2 {width:calc(92% - 80px); height:30px; float:left;}
.ffeld3 {width:calc(92% - 80px); height:120px; float:left;}
.ifeld1 {width:99%;}
.ifeld2 {width:40px; margin-right:40px;}

img      {border:0; max-width:100%;}
.prod    {width:33%; height:auto; margin-left:1%; margin-right:1%; margin-bottom:15px; float:right; text-align:right;}
.sub     {position:relative; top:0.3em; font-size:75%;}
br.cb    {clear:both;}
.red     {color:#FF0000;}
.left    {float:left;}
.right   {float:right;}
h1       {font-size:1.15em; margin:0;}

@media all and (min-width:500px) {
  .but2      {width:19%;}
  .but2o     {display:block;}
  .blinel    {width:calc(100% - 269px); float:left;}
  .blinem    {width:calc(100% - 189px); float:left;}
  .iwid0     {width:50%; float:left;}
  }

@media all and (min-width:700px) {
   .topnav   {height:87px;}
  .spalt1    {display:none;}
  .spalt2    {width:calc(100% - 200px);}
  .spalt3    {text-align:right; width:210px; padding-right:3px;}
  .main      {float:right; padding-top:calc(100vh - 100px);}
  #nav       {height:calc(100vh - 100px);}
  iframe     {left:152px; width:calc(100% - 152px); height:calc(100vh - 100px);}
  .navoff    {display:block;}
  .logo      {margin-left:0px; height:80px; max-width:140px;}
  .killnav   {display:none;}
  .but2      {width:10.2%; margin-right:0.9%;}
  .but2o     {display:none;}
  .buttxt    {font-size:1.6vw;}
  .rtable    {font-size:1em;}
  a.but4     {font-size:1em; width:92%; height:22px; margin-top:5px; margin-bottom:5px;}
  .wbuy      {width:350px; line-height:25px; padding:10px 10px 0px 10px; font-size:1em;}
  .buyw      {left:175px;}
  a.button   {font-size:1em;}
  .prod      {width:25%;}
  .prodv     {float:right; padding-left:30px; padding-bottom:30px;}
  }

@media all and (min-width:990px) {
  .mbody     {background-image:url(pics/bg.svg); background-repeat:no-repeat;}
  .mitte     {width:990px;}
  .butimg    {box-shadow:3px 3px 3px #000000; -moz-box-shadow:3px 3px 3px #000000; -webkit-box-shadow:3px 3px 3px #000000;}
  .buttxt    {font-size:0.9em;}
  }