/* https://chemandy.com/themes/product.css */
/* Use the reference number series 20 to 29 */

/* align lower text box */
.altb { text-align: center
}
.altb1 { text-align: center; margin-left: 1%
}
.altb3 { text-align: center; margin-left: 23%
}
/* align upper text box */
.autb1 { text-align: center; margin: 0 0 0 23%
}
.autb2 { text-align: center; margin: 2% 0 0 1%
}
/* banner 22 is add to cart link*/
.banner22 { float: right; border: #edffa9 .5px solid; padding: .8% 1%; border-radius: 10px; background-color: #65d838; font-weight: 700; text-decoration: none; color: #000; margin: 0 2% 0 28%; white-space: nowrap
}
/* banner 23 shows the price without connectors*/
.banner23, .banner23low {position: absolute; left: 85%; margin: 8% -50% 5% 0; transform: translate(-50%, -50%); z-index:-1; border: #4cbe00 .5px solid; padding: .5% 2%; background-color: #c9ebb2; font-weight: 700; color: #000;  white-space: nowrap
}
/* banner 24 is the top link to the shopping cart*/
.banner24 {background-color: #65d838; border: #4cbe00 .5px solid; border-radius: 10px; color: #4cbe00; display:inline-block; font-weight: 700; ; padding: .2% 1.2% .2% .5%; position: absolute; right: 2%; text-decoration: none; white-space: nowrap; vertical-align: middle
}
/* banner 25 is add to cart in products page*/
.banner25 {background-color: #65d838; border: #edffa9 .5px solid; border-radius: 10px; color: #00f; float: right; font-weight: 700; ; margin: 0 3% 0 28%; padding: .8%; text-decoration: underline; white-space: nowrap
}
/* banner 26 is for shopping process "update cart"*/
.banner26 {border: #edffa9 .5px solid; margin: 1% 0 0 6%; padding: .8% 1%; 
border-radius: 10px; background-color: #65d838; font: 700 100% arial, helvetica, sans-serif; text-decoration: none; color: #000; white-space: nowrap; width: 10%
}
/* banner 27 is for shopping cart refresh*/
.banner27 {background-color: #65d838; border: #edffa9 .5px solid; border-radius: 10px; font-weight: 700; margin-left: 60%; padding: .8% 1%; text-decoration: none; text-align: center; color: #000; white-space: nowrap; width: 20%
}
/* banner 28 is for submit order*/
.banner28 {  float: right; border: #edffa9 .5px solid; padding: .8% 1%; 
border-radius: 10px; background-color: #65d838; font: 700 100% arial, helvetica, sans-serif; text-decoration: none; color: #000; margin:0 3% 0 50%; white-space: nowrap
}
.box25 {width: 25%; height: auto; text-align: center; vertical-align: middle; border: none
}
.cart {height: auto; margin: 0 5% 0 0; width: 2.5em; vertical-align: middle
}
.checkdiv { width: 99.8%; margin-top: 6%
}
.checkdivnull { width: 99.8%; margin-top: -2%
}
.connectorform { margin: 0 5%; text-align:center; vertical-align:middle; white-space: nowrap
}
.figwidth20 {width: 30%; height:auto
} 
.f20 { font: 600 100% Georgia, "DejaVu Serif", Garamond, Serif 
} 
.f21 {padding-left: 1%
} 
.graph {width: 40%; height: auto
}
h1 {position: absolute; left: 50%; margin: 10% -50% 0 0; transform: translate(-50%, -50%);  z-index:-1; border: #000 1.5px solid; padding: .5% 4%; background-color: #4cbe00; font: 700 125% "Times New Roman", Cambria, Palatino, Serif; color: #FFF; vertical-align: bottom; text-decoration: none
}
img.box {text-align: center; vertical-align: middle; border: none
}
.middle	{ font: 700 110% "Times New Roman", Cambria, Palatino, Serif; vertical-align: middle 
}
#nav > a {display: none
}
#nav li {position: relative
}
#nav li a {margin-top: 3%; padding: 5% 0; background: #66d819; display: block; text-decoration: none; text-align: center; font-weight: 600; white-space: nowrap
}
#nav li a:active { background: #88e04c
}				
#nav span:after {width: 0; height: 0; border: .5em solid transparent; border-bottom: none; border-top-color: #FFF; content: ''; vertical-align: middle; display: inline-block; position: relative; right: -0.313em
}
/* first level */
#nav > ul {margin: -9% 2% -3%; height: 2.5em; background: #66d819; list-style: none
}
#nav > ul > li {width: 17%; height: 75%; float: left
}
#nav > ul > a {font-size: 1.2em; line-height: 2.9em; padding: 0
}			
#nav > ul > li:not( :last-child ) > a {border-right: 2px solid #333
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {background: #88e04c
}
/* second level */
#nav li ul {margin: 10% 2% 3% -5%; background: #4cbe00; width: 100%; display: none; position: absolute; top: 130%; list-style: none; padding: 0 5% 5%
}
#nav li:hover ul {display: block; z-index:1
}
#nav li:not( :first-child ):hover ul {left: -1px
}
#nav li ul a {border-top: 2px solid #333; padding: .75em; margin: -1% 1% 2%
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {background-color: #88e04c
}
.normallarge	{ font-size: 160px; vertical-align: middle; text-align: center
}
.probespecification { float: left; border: #000 1pt solid; margin: 10% 1% 0; padding: 1%; background-color: #fff
}
select, input {font-size: 100%
}
.shopping-cart { border: none
}
.specificationlow { float: left; border: #000 1pt solid; margin: 8% 3% 0 1%; padding: 1%; background-color: #fff
}
.specificationwide { float: left; border: #000 1pt solid; margin: 0 3% 0 1%; padding: 1%; background-color: #fff
}
.thumbnail { margin: 0 0 0 2%
}
table.quote {width: 90%; margin: 0 5%; border: none; padding: 5%; text-align: center
}
table.product {width: 65%; margin: 3% 25%; background-color: #EEE; border: none; padding: 5%; text-align: center
}

@media screen and (-webkit-min-device-pixel-ratio:0){
a:visited {fill:inherit; stroke:inherit
}
}

/* large screens/TV */
@media only screen and (max-width: 2001px) {
.banner24 {margin: -1% 3% 0 0
}
body { font-size: 120%
}
h1 {margin: 10% 0
}
#nav li ul {margin: 6% 2% 3% -5%; width: 101%
}
#nav li ul li {line-height: 1.5em
}
.specificationlow {margin: 2% 3% 0 1%
}
}
/* large laptops */
@media only screen and (max-width: 1601px) {
body { font-size: 100%
}
select, input {font-size: 100%
}
}
/* laptops */
@media only screen and (max-width: 1299px) {
body {font-size: 80%
}
.banner24 {margin-top: 2%; border-radius: 8px
}
#nav {position: static; margin-top: -9%
}
#nav li ul {margin: 0 2% 3% -6%; width: 100%
}
#nav li ul {position: absolute; top: 200%
}
#nav li ul li {width: 100%; line-height: .9em; margin: -1.5% 0 0 1%
}
.specificationlow {margin: 4% 3% 0 1%
}
}

/* large tablets */
@media only screen and (max-width: 1001px) {
body {font-size: 90%
}
.banner24 {margin-top: -6%; font-size: 90%
}
.banner26 {font-size: 90%; margin: 0; width: 14%
}
.banner27 {font-size: 90%; margin: 5% 0 0 60%; width: 30%
}
.specificationlow {margin: 12% 3% 0 1%
}
.specificationwide {margin: 5% 3% 0 1%; font-size: 80%
}
.thumbnail {width: 10%; height: auto
}
}
/* tablets */
@media only screen and (max-width: 801px) {
.banner24 {font-size: 75%; margin: -4% 3% 0 0
}
body {font-size: 75%
}
.banner20 {font-size: 33.3%
}
.banner23 {font-size: 90%; padding: .5% 1.5%
}
.connectorform {margin: 3% 0 0 10%
}
.graph {width: 50%
}
h1 {margin: 10% -50% 0 0
}
#nav > ul > li {width: 19%; height: 75%
}
#nav li ul {margin: 1% 2% 3% -6%; width: 125%
}
}
/*small tablets */
@media only screen and (max-width: 655px) {
.banner24 {font-size: 90%; margin: -8% 3% 0 0
}
.banner25 {font-size: 150%
}
body {font-size: 66.6%
}
.box25 {width: 33.3%
}
.cart {width: 1.8em
}
.connectorform {margin: 1% 0 0; font-size: 75%
}
.footer, .specificationlow, .probespecification {font-size: 90%
}
.graph {width: 55%; height: auto
}
#nav {position: relative; top: auto; left: auto
}
#nav > a {width: 3.125em; height: 3.125em; text-align: left; text-indent: -9999px; background: #00F; position: relative
}
#nav > a:before, #nav > a:after { position: absolute; border: 2px solid #FFF; top: 35%; left: 25%; right: 25%; content: ''
}
#nav > a:after {top: 60%
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type	{display: block
}
/* first level */
#nav > ul {width: 25%; height: auto; margin: -3% 0 0 65%; background: #4cbe00; display: none;	position: absolute;	left: 0; right: 0
}
#nav:target > ul {display: block; line-height: 2.4em; z-index:1
}
#nav > ul > li {width: 80%; height: auto; margin: -2% 0 0 -10%; float: none
}
#nav > ul > li > a {padding: 0 .83em; font-size: 100%
}
#nav > ul > li:not( :last-child ) > a {border-right: none; border-bottom: 1px solid #333
}
/* second level */
#nav li ul { margin: 0 0 0 -20%; position: static; padding: 1.25em; padding-top: 0; width: 130%
}
#nav li ul li {font-size: 100%; margin: 0 0 -2% 6%
}
#nav li ul a {border-top: 1px solid #333
}
select, input {font-size: 90%
}
.specificationwide {margin: 12% 3% 0 1%; font-size: 80%
}
} 
/* mobile phones */
@media only screen and (max-width: 505px) {
.autb1 {margin: 0 0 0 -5%
}
.banner20 {font-size: 50%
}
.banner23 {margin: 9% 0 0 -15%
}
.banner24 {font-size: 75%; margin: -13% 1% 0 0
}
.banner26 {font-size: 90%; margin-left: -3%; width: 22%
}
.box33 {width: 50%
}
.graph {width: 75%
}
h1 {margin: 8% 1% 0; width: 50%
}
/* first level */
#nav > ul {width: 39%; margin: -6% 0 0 45%
}
#nav > ul > li {margin: -2% 0 0 -15%
}
/* second level */
#nav li ul {font-size: 100%; margin: 2% 0; width: 80%
}
#nav li ul li {width: 170%; margin: 2% 0 2% -17%
}
.probespecification { width: 40%; margin: 30% 1% 0
}
select, input {font-size: 90%
}
.specification {margin: 25% 3% 0 1%
}
.specificationlow {margin: 25% 3% 0 1%; white-space: nowrap; width: 65%
}
.specificationwide {margin: 10% 3% 0 1%
}
table.product {margin: 3% 0
}
}
/* small mobile phones */
@media only screen and (max-width: 350px) {
.banner23 {font-size: 80%
}
.banner23low {margin: 18% -50% 5% 0
}
.banner24 {border-radius: 7px; margin: -18% 5% 0 0
}
.banner27 {margin: 5% 0 0 40%; width: 50%
}
.box33 {width: 30%
}
.connectorform {margin: 8% 0 0 -3%
}
.graph {width: 100%
}
h1 {margin: 9% 1% 0; width: 60%
}
/* first level */
#nav > ul {width: 45%; margin: -8% 0 0 45%
}
#nav > ul > li > a {font-size: 90%
}
/* second level */
#nav li ul li {font-size: 90%; margin: 0 0 -2% -17%
}
.probespecification {font-size: 100%
}
select {width: 20%
}
.specificationlow {font-size: 100%; margin: 30% 13% -20% 1%; width: 90%
}
.specificationwide {margin: 15% 1% 0
}
}
/* smallest mobile phones */
@media only screen and (max-width: 300px) {
.banner20 {font-size: 75%
}
.banner24 {border-radius: 4px; margin-top: -23%
}
.banner26 {font-size: 75%; margin-left: -3%; width: 28%
}
.f21 {margin: 55% 3% 4% 0
}
h1 {padding: 0; font-size: 90%
}
.probespecification {width: 50%; font-size: 90%; margin: 35% 1% 0
}
input {font-size: 90%
}
.specificationlow {width: 90%; font-size: 90%; margin: 35% 3% 0 1%
}
}