@charset "utf-8";

/* CSS Document */



body {
  /*SCROLLBAR-BASE-COLOR: #DEE3E7; */
  scrollbar-color: #3FA630 #374085;
  background-color: #ccc;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
  font-size: 14px;
  color: #000000;
}

blockquote {
  font-size: 14px;
}

H1 {
  font-size: 20px;
  Color: #374085;
  text-align: left;
  margin-top: 0px;
}

H2 {
  font-size: 16px;
  color: #374085;
  text-align: left;
  margin: 0;
}

H3 {
  font-size: 14px;
  font-style: italic;
  color: #374085;
  text-align: left;
}

H4 {
  font-size: 14px;
  font-weight: normal;
  color: #374085;
  text-align: left;
  display: inline;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

a:link,
a:visited,
a:active {
  color: #0000FF;
}

a:hover {
  color: #FF0000;
}

a.sidemenu {
  color: #000066
}

a.sidemenu:hover {
  color: #FF0000
}

a.newbutton {
  display: inline-block;
  padding: 0.4em 1.5em;
  border: 0.2em solid #374085;
  border-radius: 0.5em;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  background-color: #7A8CAC;
  text-align: center;
  transition: all 0.25s;
  box-shadow: 5px 5px 6px 3px #999;
}

.nb12 {
  font-size: 12px !important;
  padding: 2px !important;
}

.nb12a {
  font-size: 12px !important;
  padding: 2px 10px !important;
}

a.hoverbutton {
  display: inline-block;
  padding: 0px 4px;
  border: 0.2em solid #374085;
  border-radius: 0.5em;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  background-color: #7A8CAC;
  text-align: center;
  transition: all 0.25s;
  margin:-2px;
}

a.newbutton:hover, a.hoverbutton:hover {
  text-shadow: 0 0 2em rgba(255, 255, 255, 1);
  color: #fff;
  border-color: #ff0;
  background-color: #374085;
  box-shadow: 3px 3px 4px 2px #999;
}



@media all and (max-width:30em) {
  a.newbutton {
    display: block;
    margin: 0.4em auto;
  }
}

.newbuttondisabled {
  display: inline-block;
  padding: 0.4em 1.5em;
  border: 0.2em solid #900;
  border-radius: 0.5em;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  color: #555;
  background-color: #eee;
  text-align: center;
  transition: all 0.25s;
  box-shadow: 5px 5px 6px 3px #999;
}

.frame {
  position: relative;
  width: 100vw;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0px;
}

.headblock2 {
  width: 100vw;
  height: 80px;
  background-color: #ccc;
  z-index: 4;
  position: fixed;
  top: 0px;
  left: 0px;
}

.headblock {
  position:fixed;
  display: flex;
  flex-wrap: wrap;
  width: calc(100vw - 24px);
  height: 80px;
  max-width: 976px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border: 2px solid #374085;
  border-bottom: none;
  border-radius: 20px 20px 0px 0px;
  vertical-align: top;
  z-index: 5;
}

.newswrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: calc(100vw - 24px);
  max-width: 976px;
  background-color: #fff;
  border: 2px solid #374085;
  border-radius: 20px;
  margin-left: calc(auto -10px);
  margin-right: auto;
  vertical-align: top;
}

.headbannerwrap {
  position: fixed;
  display: flex;
  justify-content: center;
  width: calc(100vw - 44px);
  max-width: 956px;
  height: 180px;
  vertical-align: top;
  z-index: 10;
  margin: 10px;
}

.headbannerleft, .headbannerright {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 180px;
  border: 2px solid #374085;
  vertical-align: top;
  z-index: 10;
  box-shadow: 0px 5px 3px #888;
  background-color: #3FA630;
}

.headbannerleft {
  left: 0px;
  display: flex;
  justify-content: space-between;
  width: 50%;
  height: 180px;
  border: 2px solid #374085;
  border-right: none;
  border-radius: 15px 0px 0px 15px;
  vertical-align: top;
  z-index: 10;
  box-shadow: 0px 5px 3px #888;
  background-color: #3FA630;
}

.headbannerright {
  right:0%;
  display: flex;
  justify-content: space-between;
  width: 50%;
  height: 180px;
  border: 2px solid #374085;
  border-left: none;
  border-radius: 0px 15px 15px 0px;
  vertical-align: top;
  z-index: 10;
  box-shadow: 0px 5px 3px #888;
  background-image: url('images/fylogo_300_175.png');
  background-position: right;
  background-color: #3FA630;
  background-repeat: no-repeat;
  background-size: contain;
}

.headbannerright-shop {
  right:0%;
  display: flex;
  justify-content: space-between;
  width: 50%;
  height: 180px;
  border: 2px solid #374085;
  border-left: none;
  border-radius: 0px 15px 15px 0px;
  vertical-align: top;
  z-index: 10;
  box-shadow: 0px 5px 3px #888;
  background-image: url('images/fylogoshop_300_175.png');
  background-position: right;
  background-color: #3FA630;
  background-repeat: no-repeat;
  background-size: contain;
}
.headlinks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  margin-bottom: 5px;
}

.headlink {
  display: block;
  width: inherit;
  height: auto;
  background-color: #7A8CAC;
  border: 2px solid #374085;
  border-radius: 10px;
  padding: 5px 25px;
  text-align: center;
  margin: 5px 5px 0px 5px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.hlshop {

  margin: 1px 10px;

  padding: 2px 10px;

}

.headlink:hover {

  background-color: #374085;

  border: 2px solid #516151;

  cursor: pointer;

}

.headlink a:link,

.headlink a:visited,

.headlink a:active {

  color: #fff;

  text-decoration: none;

}

.headlink a:hover {

  color: #ff0;

}

.sitelogo {

  position: relative;

  width: auto;

  height: inherit;

  max-width: 50vw;

  max-height: 100%;

  border-radius: 15px;

}



.searchbar {

  position: fixed;

  top:167px;

  z-index: 12000;

  left:50%;

  margin-left:-175px;

  width:60vw;

  max-width: 350px;

}

@media screen and (max-width: 599px) {

  .searchbar {

    width:70vw;

    max-width: 250px;

    margin-left: -125px;  

  }

}

@media screen and (max-width:349px) {

  .searchbar {

    width:75vw;

    max-width: 250px;

    margin-left: -125px;  

  }

}



@media only screen and (max-width: 990px) and (orientation: landscape) {
  .headblock, .headblock2 {
    height: 40px  ;
  }

  .headbannerleft {
    height: 48px;
    width: 70%;
  }

  .headbannerright {
    background-image: url('images/fylogo_400_100.png');
    height: 48px;
    width: 30%;
  }

  .headbannerright-shop {
    background-image: url('images/fylogoshop_400_100.png');
    height: 48px;
    width: 30%;
  }

  .headbannerwrap {
    height: 50px;
  }

  .headlinks {
    flex-direction: row;
  }

  .headlink {
    padding: 5px 15px;
    height: fit-content;
  }

  .sitelogo {
    max-height: 80px;
  }

  .searchbar {

    border:1px solid #374085;

    border-radius: 5px;

    background-color: #ddd;

    padding: 2px 0px;

    top:88px;

  }

}



.activeh1 {

  border: 2px solid #374085;

  border-bottom: none;

  border-radius: 10px 10px 0px 0px;

  background-color: #374085;

  color: #fff;

  padding: 5px 10px 5px 10px;

  margin: 2px 2px 0px 2px;

  cursor: pointer;

}

.inactiveh1 {

  border: 2px solid #374085;

  border-radius: 10px 10px 0px 0px;

  background-color: #7A8CAC;

  color: #fff;

  padding: 5px 10px 1px 10px;

  margin: 4px 2px -2px 2px;

  cursor: pointer;

}

.inactiveh1:hover {

  padding: 5px 10px 5px 10px;

  margin: 2px 2px 0px 2px;

  background-color: #374085;

}

@media screen and (max-width: 400px) {

  .activeh1, .inactiveh1 {

    font-size: 18px;

  }

}

@media screen and (max-width: 360px) {

  .activeh1, .inactiveh1 {

    font-size: 16px;

  }

}

@media screen and (max-width: 350px) and (orientation: portrait) {

  .activeh1, .inactiveh1 {

    font-size: 15px;

  }

}



.activetab {

  display: block;

  visibility: visible;

  padding: 10px 0px 0px 0px;

  margin: 0px 10px 10px 10px;

  width: calc(100vw -48px);

  max-width: 952px;

  border: 2px solid #374085;

  background-color: #ccc;

  border-radius: 15px;

}

.inactivetab {

  display: none;

  visibility: hidden;

}

.infobanner {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  width: calc(100vw - 68px);

  max-width: 932px;

  background-color: #ddd;

  border: 2px solid #374085;

  border-radius: 15px;

  margin: 0px 10px 10px 10px;

  vertical-align: top;

  padding: 10px;

  text-align: left;

}

.slim {

  padding: 2px;

  margin-bottom: 2px;

  width: 100%;

}

.t14 {

  font-size: 15px;;

}

.ibtop {

  margin-top: 205px;

}

.ibtop155 {

  margin-top: 170px;

}

.ibhalf {

  width: 443px;

  max-width: 80vw;

  margin: 5px 10px 10px 10px;

  min-height: 35px;

  max-height: 35px;

}

.ibthird {

  width: fit-content;

  max-width: 30vw;

  margin: 5px 10px 10px 10px;

  min-height: 35px;

  max-height: 35px;

}

.shophead {

  display: flex;

  align-items:flex-start;

  flex-wrap: wrap;

  width: 100%;

}

@media only screen and (min-width: 600px) {

  .shophead {

    flex-wrap: nowrap;

    align-content: stretch;

  }

}

  



@media only screen and (max-width: 990px) and (orientation: landscape) {

  .ibtop {

    margin-top: 75px;

  }

}



.pagebanner {

  position: relative;

  display: block;

  width: 100%;

  max-width: 1000px;

  border-radius: 15px;

  margin: 180px 10px 10px 10px;

  padding: 0px;

}

@media only screen and (max-width: 990px) and (orientation: landscape) {

  .pagebanner {

    margin-top: 45px;

  }

}

.newsbanner, .eventbanner, .testbanner {

  position: relative;

  display: block;

  width: calc(100vw - 68px);

  max-width: 932px;

  background-color: #eee;

  border: 2px solid #374085;

  border-radius: 15px;

  margin: 0px 10px 10px 10px;

  padding: 10px;

}

.eventbanner {

  width: calc(100vw - 92px);

  max-width: 908px;

}

.testbanner {

  width: calc(100% - 44px);

}

.newseditbanner {

  position: relative;

  display: block;

  width: 90vw;

  max-width: 1000px;

  background-color: #eee;

  border: 2px solid #374085;

  border-radius: 15px;

  margin: 0px 10px 10px 0px;

  padding: 10px;

}

.newsheader {

  display: flex;

  flex-wrap:nowrap;

  justify-content: space-between;

  width: 100%;

}

.newsh1 {

  background-color: #374085;

  color: #fff;

  border: 1px solid #3FA630;

  border-radius: 13px 0px 25px 0px;

  padding: 5px 40px 5px 20px;

  margin-top: -10px;

  margin-left: -10px;

}

.newsdate {

  right: 10px;

  top: 20px;

  color: #374085;

  font-size: 14px;

  font-weight: bold;

  text-align: right;

}

.newsevent {

  margin:0px 10px;

  border:1px solid #374085;

  border-radius:10px;

  padding:2px 10px;

  background-color: #fff;

  font-size: 16px;

}

.newsevent:hover {

  background-color: #3FA630;

  cursor: pointer;

}

.evtabs {

  padding-left:20px;

  margin-top: 205px;

  width:calc(100vw -20px);

  display:flex;

  justify-content: flex-start;

  align-items:flex-end;

}

@media only screen and (max-width: 990px) and (orientation: landscape) {

  .evtabs {

    margin-top: 75px;

  }

}

.eventh1 {

  background-color: #374085;

  color: #fff;

  border: 1px solid #3FA630;

  border-radius: 13px 0px 25px 0px;

  padding: 5px 40px 5px 20px;

  margin-top: -10px;

  margin-left: -10px;

  margin-bottom: 2px;

}

.fulltimes {

  margin-left: -10px;

  margin-bottom: 3px;

  padding: 0px 10px 0px 20px;

  width: fit-content;

  color: #374085;

  background-color: #fff;

  font-size: 14px;

  font-weight: bold;

  text-align: left;

  border: 1px solid #374085;

  border-left: none;

  border-radius: 0px 10px 10px 0px;

}

.newsitem {

  position: relative;

  width: calc(90vw - 68px);

  max-width: 932px;

  text-align:left;

}

.newsurl {

  position: absolute;

  width: fit-content;

  font-size: 16px;

  background-color: #374085;

  color: #fff;

  border: 1px solid #3FA630;

  border-radius: 20px 0px 13px 0px;

  padding: 5px 20px;

  bottom: -10px;

  right: 12px;

}

.evurl {

  right:36px;

}

a.newslink:link,

a.newslink:visited,

a.newslink:active {

  color: #fff;

}



a.newslink:hover {

  color: #ff0;

}



.content {

  min-height: 250px !important;

  width: 100%;

}

.addbutton {

  cursor: pointer;

  background-color: #eee;

  border: 2px solid #374085;

  border-radius: 15px;

  margin: 0px 10px 0px 0px;

  padding: 10px 10px 0px 10px;

  width: fit-content;

  visibility: visible;

  display: block;

}

.addbuttonhide {

  visibility: hidden;

  display: none;

}



.uploadwrap {

  display: flex;

  justify-content:space-between;

}

.uploadfile {

  background-color: #eee;

  border: 2px solid #374085;

  border-radius: 15px;

  margin: 0px -20px 0px 0px;

  padding: 12px 10px 0px 10px;

  width: fit-content;

  min-height: 40px;

  visibility: visible;

  display: block;

  font-size: 18px;

  color: #374085;

  text-align: left;

}

.uploadfileprod {

  background-color: #eee;

/*  border: 2px solid #374085; */

  border-radius: 15px;

  margin: 0px -20px 0px 0px;

  padding: 12px 10px 0px 10px;

  width: fit-content;

  min-height: 40px;

  visibility: visible;

  display: block;

  font-size: 18px;

  color: #374085;

  text-align: center;

}

.adminframe {

  border: 2px solid #3FA630;

  border-radius: 20px;

  margin: auto;

  padding:0px;

  padding-right: 20px;

  max-width: 1044px;

}

.adminhead {

  width: auto;

  margin: auto;

  border-radius: 18px 18px 0px 0px;

  margin-right: -20px;

  display: flex;

  align-items: center;

  background-color: #3FA630;

}

.adminwrap {

  position: relative;

  width: 95vw;

  max-width: 1000px;

  margin: auto;

}

.catline {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  border-bottom:1px dotted #3FA630;

  padding: 5px 10px;

  gap: 10px;

}

.cl1 {

  font-weight: bold;

  min-width: 25%;

  text-align: right;

}

.navlinks {

  border: 1px solid #374085;

  border-radius: 10px;

  padding: 10px;

  margin: 10px;

  background-color: #fff;

}

@media only screen and (max-width: 990px) {

  .uploadwrap {

    flex-wrap: wrap;

    justify-content:center;

  }

  .addbutton {

    margin-left: auto;

    margin-right: auto;

  }

  .uploadfile {

    max-width: 90vw;

    margin: 10px;

    padding-bottom: 10px;

  }

  .adminframe {

    margin:0px -5px 0px -5px;

    padding:2px 3px 2px 1px;

  }

  .adminhead {

    margin-right: 0px;

  }

}



/* post tools */

.body-wrap {

  display: flex;

  flex-wrap: nowrap;

  justify-content: flex-start;

  gap: 10px;

  align-items: center;

}

.post-tools {

  position: relative;

  display: flex;

}

.img_sel {

  display: none;

  visibility: hidden;

  position: fixed;

  top:10px;

  margin-left: 20px;

  width: 90vw;

  max-width: 960px;

  border: 2px solid #374085;

  border-radius: 15px;

  padding: 10px;

  z-index: 50;

  background-color: #ddd;

  box-shadow: 5px 5px 3px #888;

}

.im_show {

  display: block;

  visibility: visible;

}

.close {

  float:right;

}

.img_sel_scroll {

  width: 85vw;

  max-width: 920px;

  max-height: 225px;

  margin: 10px;

  display: flex;

  gap: 5px;

  overflow-x: scroll;

}

.img_btn {

  cursor: pointer;

  margin: 0px 4px;

}



.addtable {

  width: 90vw;

  max-width: 980px;

  border-collapse: separate;

  border-spacing: 0px;

  display: none;

  visibility: hidden;

  background-color: #eee;

  border: 2px solid #374085;

  border-radius: 15px;

  margin: 10px 10px 10px 10px;

  vertical-align: top;

  padding: 10px;

}

.addtablediv {

  display: flex;

  flex-wrap: nowrap;

  justify-content: flex-start;

  margin-top: 10px;

}

.textbodyedit {

  display: block;

  box-sizing: border-box;

  width: 90vw;

  max-width:950px;

  height:300px;

}

.infotable {

  position: relative;

  width: 90vw;

  max-width: 980px;

  border-collapse: separate;

  border-spacing: 0px;

  display: none;

  visibility: hidden;

  background-color: #eee;

  border: 2px solid #374085;

  border-radius: 15px;

  margin: 10px 10px 10px 10px;

  vertical-align: top;

  padding: 10px;

}

.infoclose {

  position: absolute;

  top:0;

  right:0;

  z-index: 6;

  border: 2px solid #374085;

  border-radius: 10px;

  margin: 10px 10px 10px 0px;

  padding: 5px;

  background-color: #f00;

  color: #fff;

  cursor: pointer;

}

.infoclose h2 {

  color: #fff;

}

.tdlabel {

  text-align: right;

  padding: 0px 5px 5px 0px;

  width: fit-content;

  max-width: 30vw;

  font-size: 14px;

  font-weight: bold;

  vertical-align: top;

}

.tdinfo {

  padding: 0px 0px 5px 5px;

  text-align: left;

  font-size: 14px;

  vertical-align: top;  

}

.tdbreak {

  flex-basis: 100%;

  height: 0;

}



.footer {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 11px;

  color: #000000;

  text-align: right;

  border-top: 1px solid #900;

  padding: 2px 10px;

}





.itemhead {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 16px;

  font-weight: bold;

  color: #000000;

}



.itemtext {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  color: #000000;

}



.pageheader {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  color: #000000;

}



select {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  HEIGHT: 20px;

}



span .fleft {

  float: left;

}



.fright {

  float: right;

}



li {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  line-height: 1.4;

  color: #000000;

}



table,

td {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  color: #000000;

}





/* --- FORM FIELDS --- */



select {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 14px;

  HEIGHT: 22px;

}



input {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 14px;

  HEIGHT: 22px;

/*  width: 100%; */

}



textarea {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 14px;

  SCROLLBAR-BASE-COLOR: #C0C0C0;

  SCROLLBAR-TRACK-COLOR: #E5E5E5;

}



.catdescript {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 12px;

  color: #000099;

}



button,

button a,

button a:link,

button a:hover,

button a:visited,

button a:active {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 14px;

  font-weight: bold;

  color: #000000;

  text-decoration: none;

}



button img {

  vertical-align: middle;

}



  /* --- BREADCRUMB NAV BAR --- */



  .bcnavbar {

    border-collapse: separate;

    border-spacing: 0px;

    margin: 10px 0px 10px -3px;

    position: sticky;

    top:180px;

    transition-duration: 0.5s;

  }

  a.bcnavlink,

  a.bcnavlink:visited {

    color: rgba(0, 0, 255, 1);

  }

  a.bcnavlink:hover,

  a.bcnavlink:active {

    color: rgba(255, 0, 0, 1);

  }

  .bcnavimg, .bcnav1, .bcnav2, .bcnav3 {

    width: fit-content;

    padding: 2px 12px;

    text-align: center;

    vertical-align: middle;

    font-size: 16px;

    color: rgba(0, 0, 102, 1);

    border: 1px solid #900;

    box-shadow: 4px 4px 3px #999;

    transition-delay: 0.5s;

    transition-duration: 0.5s;

  }

  .bcnavimg {

    display: table-cell;

    padding: 2px 12px;

    font-size: 16px;

    border-left: none;

    border-right: none;

    background: url('images/here_arrow_new.gif') #fff no-repeat -5px center;

  }

  .bcnav1 {

    padding: 2px 20px 2px 5px;

    font-size: 12px;

    border-left: none;

    border-right: none;

    background: url('images/navdivider.png') #fff no-repeat right center;

  }

  .bcnav2 {

    padding: 2px 18px 2px 5px;

    font-size: 12px;

    border-left: none;

    border-right: none;

    background: url('images/navdivider.png') #fff no-repeat right center;

  }

  .bcnav3 {

    padding: 2px 10px 2px 5px;

    font-size: 12px;

    background-color: #fff;

    border-left: none;

    border-radius: 0px 15px 15px 0px;

  }



  .bcnavbarsm {

    border-collapse: separate;

    border-spacing: 0px;

    position: fixed;

    top: 100px;

    left: 50%;

    margin-left: -487px;

    z-index: 1;

    transition-duration: 0.25s;

    opacity: 0.8;

  }

  .bcnavbarsm:hover {

    opacity: 1;

  }

  .bcnavimgsm, .bcnav1sm, .bcnav2sm, .bcnav3sm {

    width: fit-content;

    text-align: center;

    vertical-align: middle;

    font-size: 12px;

    color: rgba(0, 0, 102, 1);

    border: 1px solid rgba(153, 0, 0, 1);

    border-left: none;

    border-right: none;

    background: url('images/here_arrow_new_sm.gif') #fff no-repeat -5px center;

    box-shadow: 4px 4px 3px #999;

    transition-delay: 0.5s;

    transition-duration: 0.5s;

  }

  .bcnavimgsm {

    padding: 1px 12px 1px 5px;

    color: rgba(0, 0, 102, 1);

    border-right: none;

    background: url('images/here_arrow_new_sm.gif') #fff no-repeat -5px center;

    transition-delay: 0.5s;

    transition-duration: 0.5s;

  }

  .bcnav1sm {

    padding: 1px 20px 1px 5px;

    color: rgba(0, 0, 102, 1);

    border-right: none;

    background: url('images/navdivider.png') #fff no-repeat right center;

  }



  .bcnav2sm {

    padding: 1px 18px 1px 5px;

    color: rgba(0, 0, 102, 1);

    border-right: none;

    background: url('images/navdivider.png') #fff no-repeat right center;

  }



  .bcnav3sm {

    padding: 1px 10px 1px 5px;

    color: rgba(0, 0, 102, 1);

    background-color: #fff;

    border-radius: 0px 15px 15px 0px;

  }



  .catflex {

    display: flex;

    width: 100%;

    flex-wrap: wrap;

    justify-content: space-around;

    align-items: flex-start;

    gap: 40px 10px;

  }

  .cat_wrapper {

    width:100%;

    margin-top:10px;

  }

  .cat_block {

    width:250px;

    height:150px;

    padding: 0px 5px 10px 5px;

    vertical-align:top;

  }

  .cat_block2 {

    width:25%;

    padding-left:5px;

    padding-right:5px;

    vertical-align:top;

  }

  .cat_box {

    border:2px solid #374085;

    border-radius: 10px;

    padding: 5px;

    height:100%;

    cursor:pointer;

    background-color:#EEE;

  }

  .cbflex {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 5px;

  }

  .cat_box2 {

    height:145px;

    cursor:pointer;

  }

  .cat_catimage {

    font-size:12px;

    width:90px;

    text-align:center;

    vertical-align:top;

    border-radius: 5px;

  }

  .cat_prodimage {

    font-size:12px;

    width:90px;

    text-align:center;

    vertical-align:top;

    border-radius:10px;

  }

  img.cat_thumb {

    width: 90px;

    height: 90px;

    border: 1px solid #900;

    border-radius: 8px;

  }

  img.cat_thumb_discon {

    width: 90px;

    height: 90px;

    border: 1px solid #900;

    border-radius: 8px;

    opacity:0.5;

  }

  .cat_title {

    width: 140px;

    font-size:12px;

    text-align:center;

    vertical-align:middle;

  }

  .cat_text {

    font-size:14px;

    width:100%;

    text-align:center;

  }

/*  .cat_box, .shadow {

    position: relative;

    bottom: 4px;

    right: 4px;

  }*/

  .shadow {

    background-color: #AAA;

    height:100%;

  }

  

  .maintable, .maintable2 {

    width:100%;

    border-collapse: separate;

    border-spacing: 0px;

  }

  .maintd {

    padding: 0px 10px;

    width: 100%;

  }

  .maintd2 {

    padding: 0px 10px;

  }



  .cat_refine_mask {

    display: none;

    visibility: hidden;

  }

  .cat_refine_mask_show {

    display: block;

    visibility: visible;

    position: fixed;

    width: 100%;

    height: 100%;

    background-color: #006;

    opacity: 0.4;

    top:0px;

    left: 0px;

    z-index: 9998;

  }

  .cat_refine_wrap {

    display: none;

    visibility: hidden;

  }

  .cat_refine_wrap_show {

    display: block;

    visibility: visible;

    position: absolute;

    width: 320px;

    height: auto;

    margin: auto;

    top: 200px;

    left: 50%;

    margin-left: -170px;

    background-color: #eee;

    border: 2px solid #374085;

    border-radius: 15px;

    box-shadow: 5px 5px 3px #888;

    padding: 20px 10px;

    z-index: 9999;

  }

  .cat_refine_wrap_show h1 {

    margin: 0px;

    text-align:left;

    font-size: 14px;

  }

  .refinetit {

    position: absolute;

    display: block;

    top: 0px;

    left: 0px;

    width: 290px;

    height: 20px;

    background-color: #7A8CAC;

    color: #fff;

    border-radius: 13px 0px 15px 0px;

    padding: 5px;

    text-wrap: nowrap;

    overflow-x: hidden;

  }

  .refinetit h2 {

    color: #fff;

    text-align: left;

    font-weight: normal;

  }

  .cat_refine_type {

    margin: 0px auto 5px auto;

    background-color: #fff;

    border: 1px solid #374085;

    border-radius: 10px;

  }

  .cat_refine_type h2 {

    color: #fff;

    background-color: #7A8CAC;

    width: 100%;

    margin: -2px 0px 2px 0px;

    border-radius: 9px 9px 0px 0px;

    font-weight: normal;

  }

  .crdouter {

    border: 1px solid #900;

    border-radius: 15px;

    padding: 10px;

    box-shadow: 5px 5px 3px #888;

  }

  .crdwrap {

    display: flex;

    align-items: center;

  }

  .cat_refine_desc {

    padding: 2px 10px;

    text-align: right;

    width: 225px;

  }

  .cat_refine_select {

    padding: 0px 10px;

    text-align: left;

    width: 25px;

  }

  .refinebutts {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    gap:40px;

  }

  .rfselector, .rfselected, .rfselhover {

    position:relative;

    width:27%;

    text-align:left;

    padding:3px 10px;

    background-color: #eee;

    border:1px solid #900; 

    border-left:none;

    border-radius:0px 15px 15px 0px;

    margin-left:-20px !important;

    cursor: pointer

  }

  .rfselected {

    background-color: #ff0;

  }

  .rfselhover, .rfselector:hover, .rfselected:hover {

    background-color: #0f0;

  }

  .catgobackwrap {

    display: flex;

    justify-content: center;

    margin-top: 10px;

    margin-left: auto;

    margin-right: auto;

    width: 100%;

    cursor: pointer;

  }

  .catgobackarrow {

    display: block;

    width: 45px;

    background: url('images/there_arrow_new.gif') #fff;

    background-position: right;

    background-repeat: no-repeat;

    border: 1px solid #900;

    border-right: none;

    border-radius: 15px 0px 0px 15px;

    box-shadow: 5px 5px 3px#888;

  }

  .catgoback {

    vertical-align: middle;

    width: fit-content;

    height: 18px;

    background-color: #fff;

    color: #00f;

    padding: 2px 12px;

    text-align: center;

    font-size: 13px;

    border: 1px solid #900;

    margin-left: -2px;

    border-left: none;

    border-radius:15px;

    box-shadow: 5px 5px 3px#888;

  }

  .fpcategory {

    display: flex;

    justify-content:flex-start;

    align-items: flex-start;

    padding:15px;

    gap:20px 20px;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:12px;

    color:#fff;

    background-color:#7A8CAC;

    border:2px solid #374085;

    border-radius:20px; 

    width:400px;

    height:100px;

    margin: 5px auto;

    cursor:pointer;

    overflow:hidden;

    box-shadow: 2px 2px 2px 1px #999;

    transition: all 0.25s;

  }

  .fpcategory:hover {

    background-color:#374085;

    border: 2px solid #ff0;

    box-shadow: 1px 1px 1px 1px #999;

  }

  .fpcatheader, fpcatheader a, fpcatheader a:active, fpcatheader a:visited {

    font-size:16px;

    font-weight:bold;

    color:#fff;

    height:30px;

    margin: 0px;

  }

  .fpcatdesc {

    font-size:14px;

    font-weight:normal;

    margin-top: 5px;

    text-align:left;

    color: #fff;

    float:right;padding: 0px 5px 5px 5px;

  }

  .fpcatimg {

    width: 110px !important;

    vertical-align: middle;

    align-self: center;

  }

  .fpcatimg img {

    border-radius: 5px;

  }

  .fpcategory h1 {

    margin: 0px;

  }





table.orderprocwrapper, table.orderprocwrapperpc {

  margin-top:10px;

  border:2px solid #900;

  border-radius:15px;

  padding:none;

}

table.orderprocwrapper

{

  width:98%;

  margin-left:10px;

  margin-right:auto;

}

table.orderprocwrapperpc

{

  margin-left:auto;

  margin-right:10px;

}

@media only screen and (max-width: 599px) {

  table.orderprocwrapper, table.orderprocwrapperpc {

    display: none;

    visibility: hidden;

  }

}

td.orderproc {

  text-align:center;

  background-color:#CCC;

  color:#666;

  font-size:11px;

}

td.orderproc_ok {

  text-align:center;

  background-color:#993;

  color:#FFF;

  font-size:11px;

}

td.orderproc_fail {

  text-align:center;

  background-color:#F00;

  color:#FFF;

  font-size:11px;

}

td.orderprocleft {

  background-color:#006;

  color:#FFF;

  border-top-left-radius:13px;

  border-bottom-left-radius:13px;

  border-right:1px solid #900;

  text-align:center;

  font-size:11px;

}

td.orderprocright {

  border-top-right-radius:13px;

  border-bottom-right-radius:13px;

  text-align:center;

  background-color:#CCC;

  color:#666;

  font-size:11px;

}

td.orderprocright_ok {

  border-top-right-radius:13px;

  border-bottom-right-radius:13px;

  text-align:center;

  background-color:#993;

  color:#FFF;

  font-size:11px;

}

td.orderprocright_fail {

  border-top-right-radius:13px;

  border-bottom-right-radius:13px;

  text-align:center;

  background-color:#F00;

  color:#FFF;

  font-size:11px;

}

td.orderprocpc {

  border-radius:13px;

  width:50px;

  text-align:center;

  background-color:#CCC;

  background-repeat:no-repeat;

  background-image:url("images/progressbar.png");

  color:#000;

  font-size:11px;

}

td.orderprocpc_ok {

  border-radius:13px;

  width:50px;

  text-align:center;

  background-color:#993;

  color:#FFF;

  font-size:11px;

}

td.orderprocpc_fail {

  border-radius:13px;

  width:50px;

  text-align:center;

  background-color:#F00;

  color:#FFF;

  font-size:11px;

}

  /* --- BASKET --- */



  table.basket, table.mobbasket {

    width:100%;

    margin-left:auto; 

    margin-right:auto;

    text-align:center;

    border-spacing:0;

    border-collapse:separate;

    border:1px solid #900;

    border-radius:10px;

    box-shadow:5px 5px 3px #999; 

  }

  table.mobbasket {

    display: none;

    visibility: hidden;

  }

  .basketbutton, .basketbuttonsm {

    background-image: url("images/basket_white.gif");

    background-repeat: no-repeat;

    background-color:#006;

    border:2px solid #ff0;

    border-radius:12px;

    box-shadow: 5px 5px 6px 3px #999;

    text-align:right;

    cursor:pointer;

    transition-duration: 0.33s;

  }

  .basketbutton {

    width:350px;

    height: 66px;

    background-size: 60px;

    background-position: 30px 5px;

    margin:5px 15px 5px 5px;

  }

  .basketbuttonsm {

    width:100%;

    height: 44px;

    background-size: 38px;

    background-position: 15px 3px;

    margin: 2px;

  }

  .basketbutton:hover, .basketbuttonsm:hover {

    text-shadow: 0 0 2em rgba(255, 255, 255, 1);

    color: #fff;

    border-color: #006;

    background-color: #900;

    box-shadow: 3px 3px 4px 2px #999;

  }

  a.basketlink, a.basketlink:visited, a.basketlink:hover, a.basketlink:active,

  a.basketlinksm, a.basketlinksm:visited, a.basketlinksm:hover, a.basketlinksm:active {

    display: block;

    text-align: center;

    color:#FFF;

    text-decoration: none;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    font-weight:bold;

    transition-duration: 0.25s;

  }

  a.basketlink, a.basketlink:visited, a.basketlink:hover, a.basketlink:active {

    margin-left: 60px;

    margin-top:15px;

    font-size:16px;

  }

  a.basketlinksm, a.basketlinksm:visited, a.basketlinksm:hover, a.basketlinksm:active {

    margin-left: 50px;

    margin-top:5px;

    font-size:14px;

  }

  a.basketlink:hover, a.basketlinksm:hover {

    color:#FFF;

  }

  .basketlines, .basketlinessm {

    margin-left: 60px;

    text-align: center;

    color: #fff;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    transition-duration: 0.25s;

  }

  .basketlines {

    margin-top: 5px;

    font-size:14px;

  }

  .basketlinessm {

    margin-top: 3px;

    font-size:11px;

  }



  @media only screen and (max-width: 599px) {

    table.basket {

      display: none;

      visibility: hidden;

    }

    table.mobbasket {

      display: table;

      visibility: visible;

    }

  }



/* --- CART & CHECKOUT --- */

.cartitem

{

  font-size:10px;

  color:#000;

  line-height:1.2;

  padding-bottom:5px;

}



.checkouttable {

  width:90%;

  max-width:90vw;

  border-spacing:0;

  border-collapse:separate;

  border:1px solid #990000;

  margin:auto; 

  box-shadow:5px 5px 3px #999; 

  background-color:#eee;

  border-radius: 10px 10px;

}



.checkoutheader

{

  font-size:12px;

  font-weight:bold;

  color:#7A8CAC ;

  background-color:#eee;

  border-bottom:1px solid #990000;

  padding:0px 10px;

}

.checkoutdesc

{

  font-size:12px;

  padding: 5px;

}

.checkoutitem

{

  font-size:12px;

  padding: 5px;

}

.checkoutitemr

{

  font-size:12px;

  text-align: right;

  padding: 5px 10px;

}

.basketitem

{

  font-size:12px;

  padding: 5px 10px;

  border-bottom: 1px dashed #900;

  border-right: 1px dotted #900;

}

.basketitemr

{

  font-size:12px;

  text-align: right;

  padding: 5px 10px;

  border-bottom: 1px dashed #900;

  border-right: 1px dotted #900;

}

.checkoutspacer

{

  font-size:10px;

  line-height:0.6;

}

.checkoutalert

{

  font-size:10px;

  color:#900;

  background-color:#FF9;

  text-align:center;

}

.checkouttermsheader

{

  font-size:10px;

  font-weight:bold;

  color:#900;

  background-color:#eee;

}

.checkoutterms

{

  font-size:10px;

}

.checkoutstar

{

  font-weight:bold;

  color:#F00;

}

.ppbutton

{

  font-size:16px;

  font-weight:bold;

  background-color:#F29116;

  height:auto;

  padding:2px;

}





.catmenu {

  position: relative;

/*  top:205px;*/

  left:25px;

  display: block;

  padding: 5px;

  border: 0.2em solid #374085;

  border-radius: 0.5em;

  box-sizing: border-box;

  text-decoration: none;

  font-weight: bold;

  font-size: 14px;

  color: #fff;

  background-color: #3FA630;

  text-align: center;

  transition: all 0.25s;

  box-shadow: 5px 5px 6px 3px #999;

  z-index: 9999;

}

.cm2 {

  top:0px;

  left:10px;

  z-index: 10000;

}

.cm_item {

  position: relative;

  display: flex;

  /*flex-direction: column;*/

  justify-content: space-between;

  align-items: center;

  gap:20px;

  padding: 5px 10px;

  font-size: 16px;

  border: 2px solid #374085;

  background-color: #7A8CAC;

  color:#fff;

  border-radius: 5px;

}

.cm_item a {

  color: #fff;

  text-decoration: none;

}

.cm_item a:hover {

  color:#ff0;

}

.hx {

  display: none;

  visibility: hidden;

}

.catmenu_mask {

  display: none;

  visibility: hidden;

  position: fixed;

  width: 100%;

  height: 100%;

  top:0px;

  left: 0px;

  z-index: 9998;

  background-color: #000099;

  opacity: 0.2;

}

.sx {

  display: block;

  visibility: visible;

}

.navback {

	display: none;

	visibility: hidden;

}

.navbackshow {

	position: fixed;

	top: 0px;

	left: 0px;

	display: block;

	visibility: visible;

	cursor: pointer;

	width: 100%;

	height: 100%;

	z-index: 9000;

}

.navpanel {

  position: absolute;

  display: none;

  visibility: hidden;

  left: 20px;

  top: -300px;

  height: 0px;

	margin-top: 50px;

	transition: ease-in-out 500ms;

}

.navpanelshow {

  display: block;

  visibility: visible;

  text-align: left;

	left: 20px;

  top:195px;

	margin-top: 50px;

  background-color: #7A8CAC;

	border: 1px solid #374085;

	border-left: none;

	border-radius: 0px 10px 10px 0px;

  width: calc(max-content + 240px);

  max-width: 80vw;

  padding: 5px;

	z-index: 10000;

	transition: ease-in-out 500ms;

}

.nvpwrap {

  width: 100%;

  margin: auto;

  background-color: #374085;

  border: 2px solid #374085;

  border-radius: 5px;

  height: fit-content;

}

.nvphead {

	width: fit-content;

	background-color: #374085;

	color:#fff;

	font-size: 16px;

	font-weight: bold;

	padding: 5px 10px;

	border-top-right-radius: 3px;

}

.nvpclose {

	cursor: pointer;

	float: right;

	margin-top: -7px;

	margin-right: 10px;

}

a.nvplink,

a.nvplink:hover,

a.nvplink:active,

a.nvplink:visited {

	color: #fff;

	font-weight: bold;

	text-decoration: none;

	font-size: 15px;

}



.navpanelx {

	display: none;

	visibility: hidden;

}

.navpshow {

	display: block;

	visibility: visible;

}

.nvp {

	width: 100%;

	background-color: #7A8CAC;

	color: #fff;

	font-weight: bold;

	font-size: 15px;

	padding: 5px 10px;

	margin: 5px;

	border-bottom: 1px solid #006;

}

.nvpimg {

  width: 32px;

  height: 32px;

  margin: -5px 0px -8px -10px;

  border: 1px solid #fff;

  border-radius: 5px;

}

.nvpx {

	display: block;

	visibility: visible;

	cursor: pointer;

	width:85%;

	background: url('images/np-arrow-yps.png') #7A8CAC no-repeat right center;

	color: #fff;

	font-weight: bold;

	font-size: 15px;

	padding: 5px 10px;

	margin: 5px;

	/*border: 2px solid #eee;*/

	border-right: none;

	text-wrap:nowrap;

	overflow-x: hidden;

	overflow-y: hidden;

}

.nvpz {

	display: block;

	visibility: visible;

	cursor: pointer;

	width: 85%;

	background: url('images/np-arrow-neg-yps.png') #7A8CAC no-repeat left center;

	color: #fff;

	font-size: 15px;

	padding: 5px 10px;

	margin: 5px;

	/*border: 2px solid #eee;*/

	border-right: none;

	text-wrap:nowrap;

	overflow: hidden;

  border-radius: 0px 15px 15px 0px;

}



.nvpactive {

	width: 85%;

	background: url('images/np-arrow-diag-yps.png') #eee no-repeat right bottom;

  cursor: pointer;

	color: #374085;

	font-weight: bold;

	font-size: 15px;

	padding: 5px 10px;

	margin: 5px;

	border-bottom: 1px solid #006;

}

.bbprice {

  display: flex;

  justify-content: center;

  align-items: baseline;

  gap: 5px;

  margin-bottom: 15px;

}

.bbprice1 {

  color:#000;

}

.bbprice2 {

  color:#900;

  font-size:16px;

  font-weight:bold;

}

.bbprice3 {

  color:#F00;

  font-size:20px;

  font-weight:bold;

}

.bbprice3sm {

  flex-grow: 10;

  color:#F00;

  font-size:14px;

  font-weight:bold;

  padding: 0px 10px;

}

.bboldprice {

  font-size:16px;

  text-decoration:line-through;

}

.bbvat {

  font-size: 10px;

  margin: 5px;

}

.bbdeal {

  margin: 10px;

}

.bbavail {

  margin-bottom: 10px;

}

.bbbreak {

  flex-basis: 100%;

  height: 0;

}

.bbavailinline {

  flex-basis: 100%;

  display: none;

}

.bbavailinlineshow {

  text-align: right;

  font-size: 11px;

  padding: 4px 20px 0px 0px;

}

.bbavail1 {

  color: #000;

}

.bbavailimg {

  border:none;

}

.bbavailgreen {

  color: #008000;

}

.bbavailblack {

  color: #000;

}

.bbavailmail {

  margin: 5px;

}

.bbbutton {

  text-align:center;

  margin: 5px auto;

}

.bbbuttonsm {

  text-align:center;

}

.prodimgwrap {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: center;

	width: 100vw;

	margin: 0px -15px;

	top:0px;

	left: 0px;

}

.prodimg {

	display: none;

	visibility: hidden;

	transition: ease-in-out 500ms;

}

.prodimgpop {

	display: block;

	visibility: visible;

	position: absolute;

	z-index: 500;

	width: fit-content;

	max-width: 100%;

	top: 200px;

	background-color: #fef;

	border: 2px solid #006;

	border-radius: 15px;

	padding: 5px;

	transition: ease-in-out 500ms;

	box-shadow: 5px 5px 3px #888;

}

.pipback {

	display: none;

	visibility: hidden;

}

.pipbackshow {

	position: fixed;

	top: 0px;

	left: 0px;

	display: block;

	visibility: visible;

	cursor: pointer;

	width: 100%;

	height: 100%;

	z-index: 101  ;

}



.pipwrap {

  position: relative;

  display: flex;

  flex-wrap: nowrap;

  align-items: stretch;

  visibility: visible;

	width: fit-content;

  max-width:90vw;

	margin: auto;

  height: fit-content;

	padding: 0px;

}

.pipwraphide {

  display: none;

  visibility: hidden;

}

.pipleft {

  position: relative;

	display: block;

  z-index: 600;

  left: 5px;

  top: 5px;

  height: auto;

}

.pipright {

  position: relative;

  z-index: 600;

  right: 5px;

  top: 5px;

  height: auto;

}

.pipmiddle {

  position: relative;

  z-index: 500;

  margin: 2px -70px;

	width: fit-content;

}

.pipimg {

  display: block;

  visibility: visible;

	width: auto;

	max-width: 85vw !important;

  margin: auto;

	border-radius: 10px;

	border: 1px solid #900;

}

.pipimghide {

  display: none;

  visibility: hidden;

}

.pipclose {

	position: absolute;

	top: 2px;

	right: 2px;

	z-index: 501;

}

.pipnext, .pipprev {

  position: relative;

  top: 35%;

  width: 75px;

}

.prodpic200 {

	width: 200px;

	height: 200px;

	border: 1px solid #900;

	border-radius: 15px;

	box-shadow: 5px 5px 3px #888;

}

/* --- PRODUCT OPTIONS PAGE --- */

table.opttable {

  border:2px solid #374085;

  border-collapse:separate;

  border-spacing: 0px;

  border-radius: 10px;

  box-shadow:5px 5px 3px #999;

  background-color:#FFF;

  width:85%;

  margin-left:auto; 

  margin-right:auto;

}

.optrowheader {

  font-size:14px;

  font-weight:bold;

  color:#FFF;

  background-color:#7A8CAC;

  border-radius: 8px 8px 0px 0px;

  padding-left:10px;

  padding-right:10px;

}

.buybox {

  border:1px solid #374085;

  border-radius:15px;

  width:fit-content;

  text-align:center;

  margin:auto;

  margin-bottom:5px;

  padding:10px 20px 10px 20px;

  box-shadow:5px 5px 3px #999;

  transition: 1s;

}

.buyboxinline {

  display: none;

  transition: all 1s;

}

.buyboxinlineshow {

  position:fixed;

  right: 50%;

  margin-right: -488px;

  z-index: 10;

  display: flex;

  flex-wrap: wrap;

  flex-basis: content;

  align-items:center;

  justify-content: flex-end;

  opacity: 0.8;

  top: 100px;

  background: url('images/buy_arrow.gif') #fff no-repeat right;

  background-color: #fff;

  border:1px solid #900;

  border-right: 2px solid #900;

  border-radius:13px 0px 0px 13px;

  width:fit-content;

  min-width: 120px;

  max-width: 310px;

  text-align:right;

  padding: 3px 5px 5px 5px;

  box-shadow:-5px 5px 3px #999;

  transition: all 1s;

}

.buyboxinlineshow:hover {

  opacity: 1;

}

.bbprice {

  display: flex;

  justify-content: center;

  align-items: baseline;

  gap: 5px;

  margin-bottom: 15px;

}

.bbprice1 {

  color:#000;

}

.bbprice2 {

  color:#900;

  font-size:16px;

  font-weight:bold;

}

.bbprice3 {

  color:#F00;

  font-size:20px;

  font-weight:bold;

}

.bbprice3sm {
  flex-grow: 10;
  color:#F00;
  font-size:14px;
  font-weight:bold;
  padding: 0px 10px;
}

.bboldprice {
  font-size:16px;
  text-decoration:line-through;
}

.bbvat {
  font-size: 10px;
  margin: 5px;
}

.bbdeal {
  margin: 10px;
}

.bbavail {
  margin-bottom: 10px;
}

.bbbreak {
  flex-basis: 100%;
  height: 0;
}

.bbavailinline {
  flex-basis: 100%;
  display: none;
}

.bbavailinlineshow {
  text-align: right;
  font-size: 11px;
  padding: 4px 20px 0px 0px;
}

.bbavail1 {
  color: #000;
}

.bbavailimg {
  border:none;
}

.bbavailgreen {
  color: #008000;
}

.bbavailblack {
  color: #000;
}

.bbavailmail {
  margin: 5px;
}

.bbbutton {
  text-align:center;
  margin: 5px auto;
}

.bbbuttonsm {
  text-align:center;
}

div.cookiebg
{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #006;
  z-index: 9998;
  opacity: 0.5;
}

table.cookiewarning
{
  border:2px solid #900;
  border-radius:10px;
  background-color:#FF6;
  width:700px;
  margin-left:auto; 
  margin-right:auto;
  position: fixed;
  top:25vh;
  left:50%;
  margin-left: -350px;
  z-index: 9999;
}

table.cookies
{
  border:2px solid #CCC;
  border-collapse:collapse;
  background-color:#FFF;
  width:90%;
  margin-left:auto; 
  margin-right:auto;
  text-align:center;
}