/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none)  {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}
/* prevent pull-to-refresh for Safari 9~15 */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none))  {
    html {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0px;
      max-height: 100%; /* or `height: calc(100% - 16px);` if body has default margin */
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* in this case to disable pinch-zoom, set `touch-action: pan-x pan-y;` on `body` instead of `html` */
  }
}

/* prevent pull-to-refresh for Chrome 63+ */
body{
  overscroll-behavior-y: none;
}

body {background-color:#000000; color:white}

#header {width:1800px; text-align:center; float:left;  position:relative; left:10px; margin-bottom:5px; }
#logo {float:left;}
#nav1 {float:left; text-align:center; position:relative; left:30px; top:5px;}

#nav1 ul
 {list-style-type:none; margin:0px; padding:0px; } 

#nav1 li
 {list-style-type:none; display:inline; margin-right:10px;}

#nav1 li a
 {text-decoration:none; padding:7px 10px; color:white; font:18px Georgia, "Times New Roman", Times, serif; }

#nav1 li a.active, #nav1 li a.active:hover {background-color:yellow; color:black;}

#nav1 li a.non_active, #nav1 li a.non_active:hover {background-color:gray; color:black;}

.prod-title {color:green; font:28px Georgia, "Times New Roman", Times, serif; }


#container {width:1800px; clear:both; padding-top:5px; }
#menu {height:315px; width:250px; float:left;}
#pics {margin-left:25px; padding-left:15px; height:475px; width:1480px; float:left;}

#pics2 {margin-left:240px; height:475px; width:470px; float:left; }

#pics3 {margin-left:398px; height:475px; width:470px; float:left; } 

#pics4 {margin-left:180px; height:475px; width:600px; float:left; } 

#info {width:343px;float:left;}

#thumbs {height:315px; width:324px; float:left; text-align:right; }

#end {background-color:#FFA500;clear:both;text-align:center;font-family:Helvetica,Ariel,Serif;}
.marginzero {margin-bottom:0;}

.menu {margin:0; padding:0; width:250px; list-style:none; }
.menu li {padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li.more {padding:0; margin:0 0 1px 0; height:55px; display:block; }
.menu li a {text-align:right;height:40px; padding:0px 10px; font:18px "Palatino Linotype", "Book Antiqua", Palatino, serif; color:white; display:block; text-decoration:none;border-style:none;}
.menu li a:hover {border-style:solid;border-width:1px;color:white;}
.menu li a.active, .menu li a.active:hover {background-color:gray; color:black;}
.menu li a span {line-height:40px; color:black}
.category {background-color:white !important; color:black !important; }

#top {height:125px; width:350px; position:relative; top:20px;}
#bottom {height:125px;width:350px;}

.innerthumbs {height:150;width:110;float:left;padding:10px;}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  min-width: 420px;
  max-width: 25%;
  padding: 0 4px;
  background: black;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  border-radius:30px;
  opacity: 0.7;
}

.column img:hover {
opacity: 1;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}