html {font-family:Verdana, Geneva, sans-serif;}
main {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.midspan-bg {
background:#0055a5;
width:100%;
background: linear-gradient(270deg, #ffffff, #0055a5);
background-size: 400% 400%;
-webkit-animation: AnimatedMidSpanBlue 12s ease infinite;
-moz-animation: AnimatedMidSpanBlue 12s ease infinite;
-o-animation: AnimatedMidSpanBlue 12s ease infinite;
animation: AnimatedMidSpanBlue 12s ease infinite;
}
@-webkit-keyframes AnimatedMidSpanBlue {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimatedMidSpanBlue {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimatedMidSpanBlue {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimatedMidSpanBlue {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
blockquote {
width:80%;
background: #f9f9f9;
border-left: 10px solid #0055a5;
margin: 1em auto;
padding: 0.5em;
quotes: "\201C""\201D""\2018""\2019";
}
.quote:before {
font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
color: #848484;
content: open-quote;
font-size: 3em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.2em;
}
.quote:after {
font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
color: #848484;
content: close-quote;
font-size: 2em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
.multispan-bg {
background:#b6b6b6;
background: linear-gradient(270deg, #ffffff, #b6b6b6);
background-size: 400% 400%;
-webkit-animation: AnimatedMultiSpanGrey 21s ease infinite;
-moz-animation: AnimatedMultiSpanGrey 21s ease infinite;
-o-animation: AnimatedMultiSpanGrey 21s ease infinite;
animation: AnimatedMultiSpanGrey 21s ease infinite;
}
@-webkit-keyframes AnimatedMultiSpanGrey {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimatedMultiSpanGrey {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimatedMultiSpanGrey {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimatedMultiSpanGrey {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
h1 {
color:#000000;
margin:5px auto;
width:90%;
text-align: center;
}
h2 {
color:#000000;
margin-left:auto;
margin-right:auto;
margin-top:0em;
margin-bottom:1em;
}
h3 {
color:#424242;
margin-left:auto;
margin-right:auto;
margin-top:0em;
margin-bottom:1em;
}
h4 {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
.singlelist > ul > li {
	list-style-type: square;
	float: left;
	padding:0.2em;
	width:100%;
	}
.singlelist li  p{
	padding:0.2em;
	color:#000000;
	font-size:0.9em;
	}

main > blockquote >  ul > li {
	list-style-type: square;
	float: left;
	padding:0.2em 1em;
	margin:0px 1em;
	width:40%;
}
main li  p{
	padding:0.2em;
	color:#000000;
	font-size:0.9em;
}

main > blockquote {
	padding:0em 2em 1em 0em;
}

@media only screen and (max-width: 800px) {
	main > blockquote >  ul > li {
		list-style-type: square;
		float: left;
		padding:0.2em;
		width:100%;
	}
	main li  p{
	padding:0.2em;
	color:#000000;
	font-size:0.9em;
	}
}
h6,
h6 > a:link,
h6 > a:visited {
text-align:center;
font-style:italic;
font-size:1.2em;
text-align:center;
padding:1em;
margin:0em;
text-decoration:underline;
}
h6 > a:hover {
color:#000000;
}

.BackToTop {float:right;vertical-align: bottom;}
.BackToTop::after {content: "Back to top";}
.ProductPageLink::after {content: "View product page";}
.anchor {float:right;}
.DistributorDiv .read-more {
position:absolute;
bottom:0px;
left:0px;
width: 250px;
height:100px;
margin: 0;
text-align: right;
background-image: linear-gradient(to bottom, transparent, white);
}
.DistributorDiv .read-more a {
position:absolute;
width:250px;
bottom:10px;
left:0px;
}
.DistributorDiv {
position: relative;
display:inline-block;
width:250px;
height:375px;
overflow:hidden;
padding:1%;
margin:2%;
vertical-align: top;
text-align:center;
background:rgba(255,255,255,0.8);
-webkit-box-shadow: 21px 23px 9px -11px rgba(0,0,0,0.15);
-moz-box-shadow: 21px 23px 9px -11px rgba(0,0,0,0.15);
box-shadow: 21px 23px 9px -11px rgba(0,0,0,0.15);
}
.DistributorDiv img {
min-width:100%;
margin-bottom:1em;
}
.DistributorDiv p {
padding:1em;
font-size:0.7em;
margin:0px;
text-align:left;
}
.DistributorDiv a {
width:100px;
font-size:1em;
}
.clearbg {
background:none;
}
article {
background:rgba(255,255,255,0.8);
width:90%;
color:#000000;
padding:1%;
margin-top: 1%;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
border-top:1px solid #848484;
}
/* Contain for articles */
article:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
article {display: inline-block;}
* html article {height: 1%;} /* Hides from IE-mac \*/
article {display: block;} /* End hide from IE-mac */
/* End Contain for articles */
/* Article blue left flash highlight on */
article:target {
animation: highlight 1s ease;
transform: translateX(20px);
}
@keyframes highlight {
0% {
border-left-color: #0055a5;
background:rgba(0,0,0,0.2);
}
100% {
border-left-color: white;
}
}
/* Article formatting for side flash*/
article {
border-left: 5px solid rgba(255,255,5,0.0);
transition: all 0.5s ease;
}
main a:link,
main a:active,
main a:visited {
color:#0055a5;
}
main a:hover{
color:#2B8FED;
}
table tr:nth-child(even) {background-color:#E6E6E6;}
table tr:nth-child(odd) {background-color:#F2F2F2;}
article img {
float:left;
margin:1%;
width:20%;
max-width:500px;
max-height:500px;
}
article .featureimg {
margin:1%;
max-width:50%;
min-width:50%;
max-height:100%;
}
@media only screen and (max-width: 800px) {
article img {
clear:both;
margin:1%;
width:90%;
max-width:500px;
max-height:500px;
}
article .featureimg {
margin:1%;
max-width:100%;
min-width:100%;
max-height:100%;
}
}
article table {
width:80%;
margin-left:auto;
margin-right:auto;
}
th {
background:#848484;
color:#ffffff;
background: linear-gradient(270deg, #0055a5, #848484);
background-size: 400% 400%;
-webkit-animation: BgAni-Blue-Grey 12s ease infinite;
-moz-animation: BgAni-Blue-Grey 12s ease infinite;
-o-animation: BgAni-Blue-Grey 12s ease infinite;
animation: BgAni-Blue-Grey 12s ease infinite;
}
@-webkit-keyframes BgAni-Blue-Grey {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes BgAni-Blue-Grey {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes BgAni-Blue-Grey {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes BgAni-Blue-Grey {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.WhereToBuy a:hover {
font-weight:bold;
}
.WhereToBuy,
.WhereToBuy a:link,
.WhereToBuy a:visited {
font-style:italic;
text-align:right;
padding:5px;
margin:0px;
text-decoration:underline;
color:l#848484;
-webkit-animation: WhereToBuyText 6s ease infinite;
-moz-animation: WhereToBuyText 6s ease infinite;
-o-animation: WhereToBuyText 6s ease infinite;
animation: WhereToBuyText 6s ease infinite;
}
@-webkit-keyframes WhereToBuyText {
0%{color:#848484;}
50%{color:#0055a5;}
100%{color:#848484;}
}
@-moz-keyframes WhereToBuyText {
0%{color:#848484;}
50%{color:#0055a5;}
100%{color:#848484;}
}
@-o-keyframes WhereToBuyText {
0%{color:#848484;}
50%{color:#0055a5;}
100%{color:#848484;}
}
@keyframes WhereToBuyText {
0%{color:#848484;}
50%{color:#0055a5;}
100%{color:#848484;}
}
.ProductPageTop img {
width:45%;
max-height:48%;
margin:2%;
}
.ProductPageTop ul {
width:45%;
}
@media only screen and (max-width: 1100px) {
article table {
width:100%;
}
.ProductPageTop img {
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:1%;
margin-bottom:1%;
}
.ProductPageTop ul {
width:100%;
margin:0px auto;
}
}

.Youtube,
article video {
float:right;
/*max-width:50%;*/
margin-left:1%;
/*color:red;*/
font-weight:strong;
}
article ul {
width:35%;
float:right;
background:rgba(240,240,240,0.8);
color:#000000;
padding:2%;
margin:1%;
}
article li {
float: left;
clear: left;
list-style-type: square;
list-style-position: inside;
text-align:left;
padding: 2px;
margin: 2px;
}
.article-small {
text-align:center;
width:45%;
margin:1%;
display:inline-block;
-webkit-box-shadow: 21px 23px 9px -11px rgba(0,85,165,0.15);
-moz-box-shadow: 21px 23px 9px -11px rgba(0,85,165,0.15);
box-shadow: 21px 23px 9px -11px rgba(0,85,165,0.15);
}
section{
padding:0% 5%;
}
@media only screen and (max-width: 1000px) {

.Youtube,
article video {
float:right;
min-width:100%;
margin:1% auto;
}
article ul {
width:100%;
/*clear: both;*/
margin-left:auto;
margin-right:auto;
list-style-type: square;
list-style-position: inside;
background:rgba(240,240,240,0.8);
color:#000000;
padding:2%;
}
article li {
clear: both;
text-align:left;
padding: 2px;
margin: 2px;
}
.article-small {
text-align:center;
width:99%;
margin:1%;
display:inline-block;
-webkit-box-shadow: 21px 23px 9px -11px rgba(0,85,165,0.15);
-moz-box-shadow: 21px 23px 9px -11px rgba(0,85,165,0.15);
box-shadow: 21px 23px 9px -11px rgba(0,85,165,0.15);
}
.article-small img {
min-width:100%;
}
}
article iframe {
padding:20px;
}
#ContactDetails1 {
width:50%;
float:left;
}
#ContactDetails2 {
width:50%;
color:#848484;
float:right;
text-align:right;
font-style:italic;
margin-bottom:2%;
}
@media only screen and (max-width: 1026px) {
#ContactDetails1 {
width:100%;
float:left;
}
#ContactDetails2 {
width:100%;
float:left;
text-align:left;
}
}
#googlemap iframe {
float:left;
width:100%;
height:300px;
margin:0%;
}
#googlemap {
text-align:right;
overflow:hidden;
}
#googlemap a {
text-decoration:none;
padding:1%;
}
#googlemap iframe {
scrolling:no;
}
#HomeGrid {
width:90%;
max-width:800px;
margin: 2% auto;
text-align: center;
}
#HomeGrid img {
display: inline-block;
max-width:350px;
max-height:350px;
padding:1%;
}
#SpanRangeContainer {
width:100%;
display:inline-block;
text-align:center;
}
.MidSpanBox {
cursor:pointer;
display:inline-block;
text-align:center;
background:#0055a5;
width:40%;
min-width:375px;
margin: 0.5% auto;
text-align: center;
padding:0.5em;
vertical-align:top;
}
.MultiSpanBox {
cursor:pointer;
display:inline-block;
text-align:center;
background:#424242;
width:40%;
min-width:375px;
margin: 0.5% auto;
text-align: center;
padding:0.5em;
}
.SpanBoxTitle {
padding:0.2em;
text-align:left;
background:#ffffff;
vertical-align:middle;
font-size:1.5em;
font-weight:600;
}
.SpanBoxTitle img {
max-height:1em;
max-width:20%;
float:right;
margin:0.2em;
}
.SpanBoxTitleMiddle {
min-height:2.4em;
color:#ffffff;
font-size:1.2em;
font-style:italic;
}
.SpanBoxImg img {
max-width:25%;
max-height:6em;
display:inline-block;
vertical-align:middle;
padding:1.5%;
margin:auto;
}
.SpanBoxLowerText {
min-height:4em;
text-align:center;
color:#ffffff;
font-style:italic;
font-size:0.9em;
}
.GradientBox {
min-height:25%;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.contain:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.contain {display: inline-block;}
* html .contain {height: 1%;} /* Hides from IE-mac \*/
.contain {display: block;} /* End hide from IE-mac */
footer {
display:inline-block;
width:100%;
border-top:1px solid #848484;
text-align: center;
margin:0px;
}
footer ul li {display: inline;padding:10px 20px;}
footer a {
font-size:10px;
padding:5px;
color:#000000;
text-decoration:none;
}
footer a:hover {
text-decoration: underline;
}
#benchmark img {
max-width:100px;
float:right;
}
/*
#anchorlist {
width:90%;
}

#anchorlist h2 {
vertical-align: text-top;
text-align:left;
}

#anchorlist > ul {
vertical-align: text-top;
display:inline-block;
color:#0055a5;
padding:2%;
margin:1%;
}

#anchorlist > ul > li {
float: left;
clear: left;
list-style-type: square;
list-style-position: inside;
text-align:left;
padding: 2px;
margin: 2px;
}
*/