body {
	 background: #FFFFFF;
	 /* background: #BDBDBD;*/
	 font-family: arial, helvetica, sans-serif;
	 font-size: 12pt;
	 color: #333 ;
	 scrollbar-face-color: #585BA5;
	 scrollbar-arrow-color: #FFFFFF;
	 scrollbar-track-color: #585BA5;
	 scrollbar-3dlight-color: #FFFFFF;
	 scrollbar-highlight-color: #585BA5;
	 scrollbar-darkshadow-color: #FFFFFF;
}


a { font-family: arial, helvetica, sans-serif; color: #000000 ; text-decoration: none ;font-size: 12pt}
a:link { font-family: arial, helvetica, sans-serif; color: #000000 ; font-size: 16px; }
#a:link { font-family: arial, helvetica, sans-serif; color: #C00035 ; font-size: 10px; }
a:visited { font-family: arial, helvetica, sans-serif; color: #00000 ; font-size: 16px; }
#a:hover { font-family: arial, helvetica, sans-serif; color: #607D8B ; font-size: 18px; background: #558B2F }
#a:hover { font-family: arial, helvetica, sans-serif; color: #5D4037 ; font-size: 16px; }
a:hover { font-family: arial, helvetica, sans-serif; color: #5D4037 ; }
a.button1:link { font-family: arial, helvetica, sans-serif; color: #ffffff ; text-decoration: underline ; background: #585BA5; font-weight: bold; font-size: 20pt}
a.button1:visited { font-family: arial, helvetica, sans-serif; color: #ffffff ; text-decoration: underline ; font-weight: bold; background: #585BA5; font-size: 20pt}
a.button1:hover { font-family: arial, helvetica, sans-serif; color: #ffffff ; text-decoration: underline ; font-weight: bold; background: #DE6271; font-size: 20pt}
a.button2:link { font-family: arial, helvetica, sans-serif; color: #ffffff ; text-decoration: underline ; background: #585BA5; font-size: 20pt; }
a.button2:visited { font-family: arial, helvetica, sans-serif; color: #ffffff ; text-decoration: underline ; background: #585BA5; font-size: 20pt; }
a.button2:hover { font-family: arial, helvetica, sans-serif; color: #ffffff ; text-decoration: underline ; background: #DE6271; font-size: 20pt; }
p.qtywu {font-family: arial, helvetica, sans-serif; color: #DC143C; font-size: 25px; }
p.header1 {font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 50px; background: #353A90; padding: 5px; width: 75%; border-radius: 12px;}
p.header2 {font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 20px; font-weight: bold; background: #353A90; padding: 5px; width: 50%; border-radius: 12px;}
p.header3 {font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 20px; font-weight: bold; background: #353A90; padding: 5px; align: left; width: 350px;  border-radius: 12px;}
a.header2 {font-family: arial, helvetica, sans-serif; color: #353A90; font-size: 16px; font-weight: bold }
tr.header3 {font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 13px; background: #353A90; padding: 5px; font-weight: bold}
tr.header4 {background: #353A90; font-size: 12;}
tr.bandred {background: #FF0000; font-size: 10;}
td.cartitems { font-family: arial, helvetica, sans-serif; color: #000000 ; font-size: 16px; }
td {font-size: 10pt }
td.header1 {font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 18px; font-weight: bold; background: #353A90; paddin
g: 5px;}
tr.bandorg {background: #FF9900; font-size: 10; }
tr.band {background: #CFD0FF; font-size: 10;}
.selectRow { color: #ffffff ; background: #DE6271 }

select { 
    border: 2px solid black; 
    border-radius: 10px; 
    -webkit-box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    padding: 10px;
    background:#999;
    font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 14px;
    margin: 0 0 3px 0;
}

}
#butt {background:#585BA5; color:rgb(255,255,255);font-color: #FFFFFF;}

td.spinbox {background: #353A90;}

table, th, td {
  padding: 2px;
  border-radius: 8px;
}

td.mainstore {
  border-right: 3px solid grey;
  border-radius: 0px;
}

button {
    padding:3px 3px;
    background:#297512;
    font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 12px;
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input.normal[type=text] {
    border: 2px solid black; 
    border-radius: 10px; 
    -webkit-box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    padding: 10px;
    background:#999;
    font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 14px;
    margin: 0 0 3px 0;
}

input.bad[type=text] {
    border: 2px solid black; 
    border-radius: 10px; 
    -webkit-box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1); 
    padding: 10px;
    background:#ff0000;
    font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 14px;
    margin: 0 0 3px 0;
}

input.normal[type=email] {
    border: 2px solid black;
    border-radius: 10px;
    -webkit-box-shadow:
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1);
    padding: 10px;
    background:#999;
    font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 14px;
    margin: 0 0 3px 0;
}

input.bad[type=email] {
    border: 2px solid black;
    border-radius: 10px;
    -webkit-box-shadow:
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 6px  rgba(0,0,0,0.1),
            0 0 12px rgba(0,0,0,0.1);
    padding: 10px;
    background:#ff0000;
    font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 14px;
    margin: 0 0 3px 0;
}


/* This relates to the javascript counter element
   ================================================
*/
.countdown {
  display: flex;
  margin: 0 auto;
  max-width: 350px;
  background: #000;
  font-family: Impact, Charcoal, sans-serif;
  text-align: center;
}

/* DAY/HR/MIN/SEC */
.countdown .square {
  flex-grow: 1;
  padding: 10px;
  margin: 5px;
}
.countdown .digits {
  font-size: 24px;
  background: #fff;
  color: #000;
  padding: 20px 10px;
  border-radius: 5px;
}
.countdown .text {
  margin-top: 10px;
  color: #ddd;
}

/* IF YOU WANT TO SPECIFICALLY STYLE THE DAY/HR/MIN/SEC
.countdown .square.days .digits { }
.countdown .square.hours .digits { }
.countdown .square.minutes .digits { }
.countdown .square.seconds .digits { }
*/

input[type=submit] {
    padding:5px 15px; 
    background:#353A90; 
    font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 18px;
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}


/* This draws the email and phone icons
   ================================================
*/

.gg-phone {
   box-sizing: border-box;
   position: relative;
   display: block;
   width: 22px;
   height: 22px;
   transform: scale(var(--ggs,1))
}

.gg-phone::after,
.gg-phone::before {
   content: "";
   display: block;
   box-sizing: border-box;
   position: absolute
}

.gg-phone::after {
   width: 18px;
   height: 18px;
   border-top-left-radius: 1px;
   border-bottom-right-radius: 1px;
   border-bottom-left-radius: 12px;
   border-left: 4px solid;
   border-bottom: 4px solid;
   left: 2px;
   bottom: 2px;
   background:
      linear-gradient(
         to left,
         currentColor 10px,
         transparent 0
      ) no-repeat right 11px/6px 4px,
      linear-gradient(
         to left,
         currentColor 10px,
         transparent 0
      ) no-repeat -1px 0/4px 6px
}

.gg-phone::before {
   width: 20px;
   height: 20px;
   border: 6px double;
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-radius: 50%;
   transform: rotate(-45deg);
   bottom: 2px;
   left: 2px
}

.gg-mail-open,
.gg-mail-open::after {
    display: block;
    box-sizing: border-box;
    height: 14px;
    border: 2px solid
}

.gg-mail-open {
    border-top: 0;
    transform: scale(var(--ggs,1));
    position: relative;
    width: 18px;
    border-radius: 2px
}

.gg-mail-open::after {
    content: "";
    position: absolute;
    border-radius: 3px;
    width: 14px;
    transform: rotate(-45deg);
    bottom: 3px;
    left: 0
}

/* This relates to the learn modal
   ================================================
*/
#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#text{
  position: absolute;
  top: 20%;
  left: 20%;
  font-family: arial, helvetica, sans-serif; 
  color: #ffffff; 
  font-size: 20px;
  transform: translate(-20%,-20%);
  -ms-transform: translate(-20%,-20%);
}

/* This relates to the pic gallery modal
   ================================================
*/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* body {
  margin: 5px;
} */


.preview {
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.row > .col {
  padding: 0 8px;
}

.col {
  float: left;
  width: 25%;
}

/* Now you want to define what the lightbox will look like. Note that you have the display
   as none. You don't want it to show until the user clicks on one of the previews. 
   You will change this display property with JavaScript below. */
   
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding: 20px 5px 0px 5px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  padding: 0 0 0 0;
  width: 90%;
  max-width: 1200px;
}

/* Same with your slides, you set the display to none, because you want to choose which 
   one is shown at a time. */

.slide {
  display: none;
}

.image-slide {
  width: 95%;
}

.modal-preview {
  width: 100%;
}

.dots {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* You want the previews a little transparent to show that they are "inactive". 
   You then add an .active or :hover class to animate the selections for your user when
   they interact with your controls and clickable content.
 */

img.preview, img.modal-preview {
  opacity: 0.9;
}

img.active,
.preview:hover,
.modal-preview:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 65px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.previous,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 50px;
  transition: 0.6s ease; 
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.previous:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Cart image container */
.container {
  position: relative;
  text-align: center;
  color: black;
  font-size: 20px  ;
  font-weight: bold;
  font-family: arial, helvetica, sans-serif;
}
.centered {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}