*{ margin: 0; padding: 0; }

body{ width: 100%; background: #fff url(gx/back.jpg) repeat-x; font: normal normal normal 75%/1.4 Tahoma, sans-serif; }

img{ border: none; }

img.smallimg{ margin: 0 0 10px 0; }

h1, h2, h3{ font: normal normal bold 1.25rem/1.4 Georgia, 'Times New Roman', sans-serif; color: #036; margin: 0 0 1em; }
h2{ font-size: 1rem; }
h3{ font-size: .88rem; }
h2.spoffer{ color: #630; }

#main a.tel{ text-decoration: inherit; color: inherit; }

#holder{ width: 960px; padding: 0; margin: 0 auto; }

#main{ float: right; width: 750px; margin: 125px 10px 0 0; padding: 0; }
#main p{ text-align: justify; clear: both; margin: 1em 0; }
#main ul{ margin: 1em 1em 1em 3em; }
#main p.prodpara{ width: 244px; height: 250px; margin: 1px; float: left; clear: none; border: 2px solid #600; border-color: #600 #000 #000 #600; text-align: center; }
#main p.rangeprod{ border: 1px solid #ccc; border-width: 0 0 1px 0; }
#main a{ color: #660; text-decoration: underline; }
#main a.moreinfo{ display: inline-block; border: 2px solid #000; border-color: #454 #676 #676 #454; background: #cc9; color: #520; width: 90px; font-weight: bold; text-decoration: none; float: none; margin: 0 auto; }
#main a:visited{ color: #320; }
#main a:hover{ color: #990; text-decoration: none; }
#main a.moreinfo:hover{ border-color: #8a8 #bfb #bfb #8a8; background: #dda; color: #520; }

#logo{ position: absolute; top: 10px; text-align: center; width: 960px; max-width: 100%; }
#logo a.tel{ color: #fff; position: absolute; top: 0; right: 105px; text-decoration: none; font-size: 1.5rem; background-color: rgba(0,0,0,.7); line-height: 1.5em; }
#logo p{ margin: 0; padding: 0; text-align: center; }
#logo img{ border: none; }
#title_small{ display: none; }

#menu{ float: left; margin-top: 125px; width: 184px; }
#menu p{ width: 184px; }
#menu ul, #menu li{ list-style: none; margin: 0; padding: 0; background: transparent; border: none; }
#menu ul{ margin: 15px 0; background: transparent; }
#menu li{ width: 184px; overflow: visible; text-align: center; color: #000; font-weight: bold; font-size: 11px; }
#menu li.menutitle{ margin: 0 0 10px 0; }
#menu li a, #menu p a{ display: block; width: 180px; padding: 2px; background: transparent; color: #000; text-decoration: none; font: normal normal normal .75rem/1.5 Georgia, Times New Roman, sans-serif; }
#menu li.subcat a, #menu li.menuman a{ border: 2px solid #000; border-color: #600 #000 #000 #600; background: #300; color: #996; width: 170px; padding: 2px 2px  2px 12px; text-align: left; }
#menu li.menucat a{ font-weight: bold; border: 2px solid #000; border-color: #644 #200 #200 #644; background: #533; text-align: left; color: #cc9; }
#menu p.basket a{ font-weight: bold; border: 2px solid #000; border-color: #644 #200 #200 #644; background: #533; text-align: center; color: #cc9; }
#menu p.basket a:hover{ border-color: #966; color: #ffe; }
#menu li.subcat a:hover, #menu li.menucat a:hover, #menu li.menuman a:hover{ border-color: #966; color: #ffe; }

#info{ position: absolute; top: 90px; width: 960px; }
#info ul, #info li{ list-style: none; margin: 0; padding: 0; border: none; float: left; }
#info ul{ width: 960px; }
#info a{ display: inline-block; font: normal normal bold .68rem/1.4 Georgia, Verdana, sans-serif; width: 116px; text-align: center; text-decoration: none; border: 2px solid #000; border-color: #644 #200 #200 #644; background: #533; color: #cc9; }
#info li:last-child a{ width: 116px; }
#info a:hover{ border-color: #966; color: #ffe; }

#footer{ border: 2px solid #660; border-width: 2px 0; clear: both; background: #dca; font: normal normal normal 10px/16px Verdana, sans-serif; text-align: center; }

.small{
	font-size: .68rem;
}

span.mrp{ font-weight: bold; text-decoration: line-through; }
span.rbp, span.rbpwas, span.sop{ color: #000; font-weight: bold; }
span.rbpwas{ text-decoration: line-through; }
span.soptext{ font-weight: bold; }
acronym{ cursor: help; }

input{ font: normal normal normal 12px/17px Georgia, Times New Roman, sans-serif; }
input.quantity{ width: 4em; height: 19px; vertical-align: bottom; text-align: right; border: 2px solid #000; border-color: #454 #676 #676 #454; }
input.buy{ width: 100px; height: 25px; border: 2px solid #000; border-color: #454 #676 #676 #454; background: #cc9; color: #530; font-weight: bold; cursor: pointer; vertical-align: bottom; }
input.buy:hover{ border-color: #8a8 #bfb #bfb #8a8; background: #dda; }
input.searchinput{ height: 15px; text-align: left; width: 178px; }
input.searchsubmit{ border: 2px solid #000; border-color: #454 #676 #676 #454; background: #cc9; color: #520; width: 90px; font-weight: bold; cursor: pointer; }
input.searchsubmit:hover{ border-color: #8a8 #bfb #bfb #8a8; background: #dda; }
input.showinput{ background: #fff; border: none; color: #000; width: 3em; text-align: right; }
input.shortinput{ width: 3em; }

img.imgleft{ float: left; }

.clearboth{ clear: both; }

.announce{ font: normal normal bold 18px/24px Arial, sans-serif; color: #f00; }
#main .announce a{ color: #f00; }

.clearfix:after{ display: table; content: ""; clear: both; }


#menu_icon{ display: none; }

/* Product Gallery */

p.ProductThumbs{
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    scrollbar-width: none;
    width: 700px;
    height: 106px;
    max-width: 100%;
}
p.ProductThumbs>img.Thumb{
    scroll-snap-align: center;
    border: 3px solid #ccc;
}
p.ProductThumbs>img.Thumb.Selected{
    border-color: #096;
}
p.ProductImages{
    width: 700px;
    height: auto;
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    cursor: zoom-in;
    scrollbar-width: none;
    max-width: 100%;
    aspect-ratio: 7/5;
}
p.ProductImages>img{
    scroll-snap-align: start;
}
div.ProductImagesHolder{
    width: 700px;
    height: auto;
    max-width: calc(100% - 20px);
    aspect-ratio: 7/5;
    position: relative;
    box-sizing: border-box;
    margin: 10px;
}
div.ProductThumbsHolder{
    width: 700px;
    position: relative;
    margin: 10px;
    max-width: calc(100% - 20px);
}
p.ProductImages span, p.ProductThumbs span, #GalleryDisplay span{
    position: absolute;
    top: 0;
    left: 10px;
    width: 30px;
    background-color: rgba(0,0,0,.7);
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
    transform: scaleX(0);
    opacity: 0;
    transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
}
p.ProductThumbs span{
    height: 102px;
}
p.ProductImages span.show, p.ProductThumbs span.show, #GalleryDisplay span.show{
    transform: scaleX(1);
    opacity: 1;
}
p.ProductImages span:nth-of-type(2), p.ProductThumbs span:nth-of-type(2){
    left: calc(100% - 20px);
}
#GalleryDisplay span:nth-of-type(2){
    left: calc(100% - 40px);
}

#GalleryDisplay{
    opacity: 0;
    transform: scale(0);
    transition: transform 600ms ease, opacity 600ms ease;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.9);
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    z-index: 2;
}
#GalleryDisplay.show{
    opacity: 1;
    transform: scale(1);
}
#GalleryDisplay>div{
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scrollbar-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: top;
}
#GalleryDisplay>div>img{
    max-height: 100%;
    object-fit: contain;
}

#GalleryDisplay span.close{
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    left: auto;
}

/* End of Product Gallery */

@media all and (max-width: 1023px){

#holder{ width: 100%; }
#main{ width: calc(100% - 222px); margin-top: 175px; }
#menu{ margin-top: 175px; }
#info{ float: none; margin: 0; width: 100%; text-align: center; }
#info ul{ width: 100%; }
img{ max-width: 100%; height: auto !important; }
#homepage_article{ width: auto; }
table.atoz{ width: 100%; position: static; }
table.atoz td{ display: block; }

}


@media all and (max-width: 750px){
	#logo a.tel{ font-size: 1rem; right: 10px; line-height: 2em; }
}

@media all and (max-width: 650px){

	#logo a.tel{ position: static; display: block; text-align: center; }

html{ font-size: 1em; }
#menu li, .announce, ul.sublist, input, #footer, #info a, #menu li a, #menu p a, #main p.multibuy, #main p.multi, body{ font-size: 1em; line-height: 1.4em; }
h2.spoffer, h1, h2, h3{ font-size: 1.5em; line-height: 1.2em; }
#main p.prodpara{ font-size: .85em; line-height: 1.2em; }

#search_area{ position: absolute; top: 160px; width: 100%; box-sizing: border-box; }
input.searchinput{ width: 65%; height: auto; }
input.searchsubmit{ width: 30%; display: inline-block; }
#menu p.basket, #menu p{ margin: 5px 0 0; width: 100%; }
#menu p.basket a{ width: 100%; box-sizing: border-box; }

#menu{ float: none; width: 100%; margin: 10px 0 0 0; box-sizing: border-box; }
#menu li{ width: 100%; }
#menu li.menuman a, #menu li.menucat a, #menu li.subcat a{ width: 100%; box-sizing: border-box; }

#menu_icon{ display: block; position: absolute; top: 0; right: 0; }

#main{ float: none; width: 100%; margin: 260px 0 0; box-sizing: border-box; padding: 0 .5em; }

#info{ top: 130px; }
#search_area{ top: 190px; }

#title_small{ display: inline-block; max-width: calc(100% - 52px); }
#title_large{ display: none; }

#info li.last a{ width: 118px; }

}

@media all and (max-width: 580px){
#main{ margin-top: 295px; }
#search_area{ top: 215px; }
}

@media all and (max-width: 450px){
	#logo { top: 60px; }
	#info{ top: 180px; }
#main{ margin-top: 370px; }
#search_area{ top: 290px; }
}