/*
orange: #de851b
teal: #004666
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Baloo');

* {margin:0;padding:0;}

html, body{width:100%; height: 100%}
body {font-family: 'Open Sans', sans-serif;font-weight:400;font-size:14px; background-image: url(../img/bg_01.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; margin: 0px}
div{position: relative; box-sizing: border-box; background-repeat: no-repeat}
h1, h2, h3 {padding:5px 0; margin:0px; color:#004666;font-family: 'Baloo', cursive;}
h1 {font-size:32px}
h2 {font-weight:700}
h3{line-height: 28px}

a {color:#004666; text-decoration: none; box-sizing: border-box}
a:hover{color:#de851b}
a img {border:0;}
input{background-repeat: no-repeat}
pre{font-family: 'Open Sans', sans-serif; overflow: auto}
textarea{font-family: 'Open Sans', sans-serif}

#up{position: fixed; bottom:10px; right:40px; width:40px; height: 40px; cursor:pointer; opacity:0.9; display: none; background-image:url(../img/up.png); background-size: contain; background-position: center}
#up:hover{opacity:1}

.flex{display:-webkit-flex; display:flex; -webkit-align-items:stretch; align-items:stretch}
.flex > div{-webkit-flex-grow:1; flex-grow:1}
.flex > div i{font-size: 2rem; color: #004666}

.openingFlex{width:200px}
.openingFlex > div:first-of-type{width: 100px; max-width:100px; min-width:100px}
.openingFlex > div:last-of-type{text-align: right}
	
#galleryContainer{display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; border:1px solid #ccc; padding:10px; margin: 0 10px 0 0; width:400px; height:400px; -webkit-justify-content:center; justify-content:center}
#galleryContainer > div{max-height: 100%; max-width:100%}
#galleryContainer img{max-width:100%; max-height:100%}

.thumbFlex{-webkit-align-items:center; align-items:center; -webkit-flex-wrap:wrap; flex-wrap:wrap}
.thumbFlex > div{border:1px solid #ccc; padding: 5px; margin: 5px; width:100%; max-width:100px; height:100%; max-height:100px; min-height: 100px}
.thumbFlex > div{-webkit-align-items:center; align-items:center; cursor:pointer}

.thumbFlex img{max-width:100%; max-height:100%}

.center, .centre{text-align: center}
.red {color:#ff0000;}
.green {color:#008000;}
.img-right {float:right;margin:0 0 10px 10px;border:solid black 1px;}
.floatright{float:right; margin: 5px 0 15px 15px}
.clearfix{clear: both}
.price{font-weight:700; font-size:22px; color: #de851b; text-align: center}
.stock{text-align: center}
.smalltext{font-size:14px !important; padding-left: 40px !important}
.hide{}
.errorfield{border:1px solid red !important}

#footer{width:100%; background-image:url(../img/trans-white.png); background-repeat: repeat}
#footerinner{width:100%; max-width: 1000px; margin: 0 auto; background-color: #004666; color:#fff; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-size: 14px; padding: 15px 10px; text-align: center}

#subfooter{text-align: center; padding: 10px; font-size:11px; color: #666}
#footerinner a{color:#fff}

#sharebox{clear: both; position: absolute; bottom:0px; left:0px; width:100%; background-color: #fff; -webkit-align-items: center; align-items: center; border-top-left-radius: 10px; border-top-right-radius: 10px}
#sharebox > div{width:50%; padding: 8px 5px 0 0px}
#sharebox > div:first-of-type{ text-align: left}
#sharebox > div:last-of-type{ text-align: right}
#sharebox > div:last-of-type img{width:100%; max-width:70%; margin: 0 10px 0 0}

#middle{width:100%; max-width: 1000px; min-height: 600px; padding: 15px 15px 120px; margin: 0 auto; background-image: url(../img/trans-white.png); background-repeat: repeat}
#middle p{padding:5px 0 10px}
#middle ol, ul{margin:10px 0 10px 30px}
#middle li{padding:0 0 10px}

#mastheadouter{ background-color: #fff}

#masthead{width:100%; max-width:1000px; margin: 0 auto}
#masthead > div{width:50%}
#masthead > div:first-of-type{padding:5px}
#masthead > div:last-of-type{text-align: right; padding: 5px}
	
#navouter{background-color: #004666; z-index: 100;}

#nav{list-style: none; padding: 0px; margin: 0px; font-size:14px;  width:100%; max-width: 1000px; margin: 0 auto; text-align: left}
#nav > li{display:inline-block; position: relative; padding: 0px; margin: 0px}
#nav a{display:inline-block; #004666; color:#fff; padding: 10px 15px; -webkit-transition: all 300ms; transition:all 300ms}
#nav a:hover{background-color: #de851b}

#nav > li > ul{position: absolute; left:0px; top:38px; display:none; list-style: none; margin: 0px; padding: 0px; z-index: 100; background-color: #de851b}
#nav > li > ul > li:last-of-type a{border-bottom-left-radius:5px;border-bottom-right-radius:5px}
#nav > li > ul > li a{display:block; padding: 4px 10px; min-width: 180px; background-color: #de851b; color:#000}
#nav > li > ul > li a:hover{color: #fff; background-color:#004666}

#mobnavButton{width:36px; height: 36px; position: absolute; right:7px; top:0px; z-index: 1000; display:none}
#mobnavButton > div{border:2px solid #666; margin: 8px 0; border-radius: 5px}

#mobnav{background-color: #004666; color: #fff; display: none}
#mobnav > div > a{display:block; padding: 7px 5px 7px 30px; border-top:1px solid #ccc}
#mobnav a{color: #fff; background-image: url(../img/arrow.png); background-repeat: no-repeat; background-size: 10px; background-position: center left 8px}
#mobnav a:hover{color:#de851b}
#mobnav ul{list-style: none; margin: 0 0 15px; padding: 0px; display: none}
#mobnav ul > li{padding:0px; margin: 0px}
#mobnav ul > li a{display:block; padding: 4px 30px;  }

#logo{padding: 5px 0}
#logo img{max-width:240px}

#cart {padding: 8px 26px 6px 0; background-image: url(../img/basket.png); background-position: center right; background-size: 18px}
#cart a{color: #999;-webkit-transition: all 300ms; transition:all 300ms;}
#cart a:hover{color:#de851b}

#searchbar{background-color: #ccc; position: relative}

#search_box {padding:5px; max-width: 1000px; margin: 0 auto; text-align: right}
#search_box input[type=text] {padding:8px ; border-radius:3px; border:1px solid #aaa; outline: none; width:100%; max-width: 400px; background-image: url(../img/search-icon.png); background-position: center right 5px; background-size: 20px; color:#aaa; font-style: italic; font-size: 16px}
#search_box input[type=button]{border:0px; border-radius:3px; background-color: #004666; color:#fff; padding: 9px 15px}
#search_box input[type=button]:hover{opacity:0.9}

.socials{position: absolute; top:8px; left:5px}
.socials > div{background-image: url(../img/facebook-icon.png); background-size: contain; width:30px; height: 30px}
.socials a{display:block; width:100%; height: 100%}

#info{font-weight:400; font-size:28px; font-family: 'Baloo', cursive; color:#666; line-height: 26px}
#info strong{font-weight:400; color: #004666}
#info a{color:#de851b}
#info a:hover{color:#004666}

.hero{aspect-ratio:12/3}
.hero img{object-fit: cover; object-position: center; width:100%; height: 100%}

#links {width:740px;height:48px;background:url('../img/top_links.png') no-repeat 0 6px;}
#links ul {list-style-type:none;}
#links ul li {float:left;width:148px;}
#links ul li a {padding-top:19px;text-align:center;color:#ffffff;text-decoration:none;width:146px;display:block;height:23px;}

.gridFlex {display:-webkit-flex; display: flex;-webkit-flex-wrap: wrap; flex-wrap: wrap; width:100%; margin: 15px 0}
.gridFlex > div {min-width: 300px; max-width: 315px; background-color: #fff; margin: 4px; padding:0 0 60px; -webkit-flex:1; flex: 1; border:1px solid #ccc; border-radius:6px}
.gridFlex h3{text-align: center; padding: 10px 5px; font-size:22px; min-height: 50px}
.gridFlex p{padding:20px 20px 5px !important}
.gridFlex img{display:block; margin: 0 auto; max-width: 200px; max-height: 150px}
.gridFlex .detailButton{display:block; position:absolute; bottom:0px; left:0px; width:100%; padding: 10px; background-color: #de851b; color: #fff; text-align: center; -webkit-transition: all 300ms; transition:all 300ms; font-size:16px; border-bottom-left-radius:6px; border-bottom-right-radius:6px}
.gridFlex .detailButton:hover{ background-color: #004666}

ul#sections {width:213px;list-style-type:none;}
ul#sections li{height:21px;border-bottom:solid #efefef 1px;border-left:solid #efefef 1px;border-right:solid #efefef 1px;padding-top:4px;background:url('../img/tick.png') no-repeat 7px 6px;}
ul#sections li a {color:#638002;margin-left:30px;}

#right {width:740px; padding-bottom:5px;}
#bcrumbs {padding:15px 5px; float:right}


.addButton{ background-color:#017F00; width:80%; max-width: 300px; margin: 10px auto; text-align: center; color: #fff; padding: 10px 10px 10px 20px; border-radius:3px; box-shadow:1px 1px 9px #000; cursor:pointer; font-size:18px; background-image: url(../img/basket-small.png); background-position: center left 10px; background-size: 22px; -webkit-transition: all 300ms; transition:all 300ms}
.addButton:hover{ background-color: #01a300}

.subButton{ background-color:#de851b; width:80%; max-width: 220px; margin: 10px auto; text-align: center; color: #fff; padding: 10px 10px 10px 20px; border-radius:3px; box-shadow:3px 3px 5px #666; cursor:pointer; font-size:18px; -webkit-transition: all 300ms; transition:all 300ms; border:0px}
.subButton:hover{background-color: #01a300}

.box {border:solid #e5e5e5 1px; background-color:#fff; padding: 10px 20px; border-radius:6px}
.box img{max-width: 100%}
.box-add {border:solid #638002 1px;background-color:#ECFEAF;margin-bottom:5px;height:41px;}
.box-add .tick-img {margin:7px 0 0 7px;}
.box-err {border:solid #638002 1px;background-color:#ECFEAF;margin-bottom:5px;height:41px;}
.box-err .cross-img {margin:7px 0 0 7px;}

.intro{font-size:18px}

/* categories */
table.s-table-main {width:740px;}
td.s-td-main {width:33%;vertical-align:top;}
table.s-table-sub {width:100%;}
td.s-td-name {height:26px;}
td.s-td-name a {vertical-align:top;}
td.s-td-img img {border:solid #638002 1px;width:100px;height:100px;}
td.s-td-desc {vertical-align:top;padding:5px;color:#696969;}

/* products */
table.p-table-main {width:740px;}
td.p-td-main {width:33%;vertical-align:top;}
table.p-table-sub {width:100%;}
td.p-td-image {width:20%;}
td.p-td-image img {border:solid #638002 1px;width:100px;height:100px;}
div.controls {padding:5px 0}
div.controls p {width:570px;float:left;}
div.controls a{border:1px solid #ccc; padding: 4px 6px; background-color: #fff; text-align: center; border-radius:3px}
div.controls span{border:1px solid #004666; padding: 4px 6px; background-color: #de851b; color:#fff; text-align: center; border-radius:3px; border:1px solid #fff}

#selOrder {float:right; color:#004666}
#selOrder select{padding:6px; margin: 0 0 0 5px}

/* manufacturers */
table.m-table-main {width:100%;}
td.m-td-main {width:25%;}
table.m-table-sub {width:100%;}
td.m-td-image img {border:solid black 1px;}

/* product */
#product {margin-top:5px;width:740px;position:relative;}


#prod-right .boxpadd {padding:10px;margin-bottom:5px;}
#prod-right .boxpadd td.quant {width:125px;}
div.ajax-info {height:48px;display:none;clear:both;}
div.ajax-info a {float:right;padding-top:3px;padding-right:10px;}
#p-links p img {vertical-align:middle;}

#prod-right ul {
	list-style:none;
}

#prod-bott {
	padding:20px;
	clear:both;
	width:700px;
}

#prod-bott h2 {
	margin-bottom:5px;
}

#prod-bott p {
	margin-top:3px;
	margin-bottom:7px;
}

#prod-bott ul {
	margin-left:20px;
	margin-bottom:10px;
}

#foot {
	width:100%;
	/* background:url('../img/footbg.gif') repeat-x; */
	min-height:200px;
}

#inner-foot {
	padding-top:5px;
	clear:both;
	width:960px;
	margin:0 auto;
	border-top:dashed #c0c0c0 1px;
	height:250px;
}

#inner-foot img {float:right;}
#foot-links{margin:10px auto; max-width:1000px}
#foot-links > div{text-align: center}

/* ECT CART */
.cobtbl {background-color:#ccc; border:1px solid #666; border-radius:4px}
.cobtbl td{padding:0 3px; background-color: #fff}

.cobhl, .cobll padding:5px 5px;}
.cobhl {color:#638002}
.cobll {}

/* contact */
#shops table {width:340px; border-bottom:dashed #e5e5e5 1px;}
#shops table td {padding:4px;}
#shops table img {border:solid #c0c0c0 1px;}

#cform fieldset {
  margin-bottom: 10px;
  padding: 10px;
}
#cform ul {list-style: none;}
#cform li {position: relative;}
#cform [type=text],
#cform [type=submit],
#cform textarea {
  margin-top: 3px;
  padding: 5px;
  border: 1px solid #de851b;
  border-radius: 3px;
	width:90%
}
#cform [type=check],
#cform [type=radio],
#cform [type=submit] {cursor: pointer;}
#cform label {display: block;}
#cform [type=check] + label,
#cform [type=radio] + label {
  display: inline-block;
  cursor: pointer;
}

#cform .validation-failed {border-color: #ff0000;background-color: #ffdddd;}
#cform .validation-advice {
  padding-bottom: 5px;
  font-weight: bold;
  color: #ff0000;
}
#myResult {
	margin-top: 10px;
	padding: 30px 10px;
	border: 1px solid #76B832;
	background-color: #F6FFF1;
	font-weight:bold;
	text-align: center;
	display:none;
	margin:0 15px 0 0
}

#cform #myResult:empty {border-width: 0;padding: 0;}
#cform .spinner {border-radius: 3px;background-color: #f0f0f0;}
#cform .overTxtLabel {color: #888888;}

.thumbsGallery{-webkit-flex-wrap: wrap; flex-wrap: wrap; }
.thumbsGallery > div{width:200px !important; height: 140px !important; background-position: center; background-size: cover; margin: 5px; border:2px solid #fff; box-shadow:0px 0px 10px #ccc; display: block; cursor:zoom-in; transition-timing-function: ease}
.thumbsGallery > div:hover{border-color:#004666}

#dark{background-color: #000; opacity: 0.7; position: fixed; left:0px; top:0px; z-index: 999; width:100%; height: 100%; display:none}

/* MAPS */
.shopFlex{width:100%}
.shopFlex > div:last-of-type{width:60%}
.shopFlex iframe{width:100%; height: 400px}

.shop-img {width:100%;}
.shop-img td {text-align:center;}
.shop-img td img {border:solid #c0c0c0 1px;}


#galleryBox{width:100%; max-width: 640px; height: 400px; border:10px solid #fff; box-shadow:0px 0px 20px #000; display:none; position: fixed; top:100px; left:100px; z-index: 1000; cursor:zoom-out}

/* ADD THIS */
.addthis_toolbox {
	margin:6px 15px;
}

#recommended{-webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; text-align: center; box-sizing: border-box; width:100%; max-width: 100%}
#recommended > div{border:1px solid #ccc; border-radius:3px; margin:5px; min-width: 230px; max-width: 230px; text-align: center; padding: 15px; background-color: #fff}
#recommended > div h3{min-height: 80px}

.contFlex{}
.contFlex > div{width:50%}
label{color:#666; display:block}

.prodDetFlex{margin: 0 0 20px}
.prodDetFlex > div{}
.prodDetFlex > div:first-of-type{text-align: center}
.prodDetFlex > div:last-of-type{width:65%}

.addFlex{max-width:380px}
.addFlex > div{}
.addFlex > div:first-of-type{max-width: 90px}
.addFlex > div:last-of-type{text-align: left}
.addFlex input{max-width:40px}

#updateButton{text-align: right}
#updateButton a{background: linear-gradient(green, DarkGreen); color:#fff; padding:5px 15px; border-radius:6px; margin: 10px 10px 10px 0; display:inline-block; box-shadow:1px 1px 5px #ccc}
#updateButton a:hover{background: linear-gradient(SeaGreen, DarkGreen)}

.footersocials{display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; column-gap: 15px; margin: 10px auto 0}
.footersocials > div{transition:all 300ms ease}
.footersocials > div:hover{opacity:0.6}
.footersocials i{font-size:1.2rem}

.headersocials{display: flex; justify-content:flex-end; align-items: center; flex-wrap: nowrap; column-gap: 15px; margin: 10px auto 5px}
.headersocials > div{transition:all 300ms ease}
.headersocials > div:hover{opacity:0.6}
.headersocials i{font-size:1.2rem !important}

.contactsocials{display: flex; justify-content:flex-start; align-items: center; flex-wrap: nowrap; column-gap: 15px; margin: 10px auto 5px}
.contactsocials > div{transition:all 300ms ease}
.contactsocials > div:hover{opacity:0.6}
.contactsocials i{font-size:1.4rem !important}

/* Loyalty scheme */
#loyaltycontainer{color: #fff}
.flex2col{display: flex; justify-content: flex-start; align-items: stretch; grid-gap: 15px; margin: 30px auto}
.flex2col > div{width:100%; max-width: 50%; border-radius:15px}
.flex2col > div:last-of-type{background-color: #004666; padding: 15px 30px 30px; color: 'fff'}
.flex2col > div:last-of-type h2{color: #fff; font-size:2rem; text-align: center; padding: 0; margin: 0 0 10px}
.flex2col > div:last-of-type form{background-color: transparent !important}
.flex2col label{color: #fff; font-weight: 700; margin: 4px 0; font-size:0.8rem}
.flex2col input{padding: 10px; border:0; border-radius: 6px; width:100%; margin: 0 0 10px; box-sizing: border-box}
.flex2col input[type=submit]{background: #de851b; color: #fff; font-weight:700; max-width:120px; cursor:pointer; margin: 15px 0 0; transition:all 300ms ease; font-size:1.2rem}
.flex2col input[type=submit]:hover{background-color:orange}
.flex2col #pw, .flex2col #pwc{max-width: 200px}

#formerror{color: red; display: none; background: #fff; padding: 10px; border-radius:10px; margin: 10px 0; font-size: 0.8rem; line-height: 0.9rem}
.pwhint{color: #fff; font-size:0.8rem; line-height: 0.9rem}



@media (max-width: 800px) {
	.addFlex{width:100%; max-width:100%;  flex-direction: column}
	.addFlex > div{width:100% !important; max-width: 100%; text-align: center}
	.addFlex > div:first-of-type{max-width: 100%}
	.addFlex > div:last-of-type{text-align: center}
	.flex2col{flex-direction: column}
	.flex2col > div{max-width: 100%}
}

@media (max-width: 700px) {
	h1{text-align: center}
	#masthead{width:100%; max-width:100%; margin: 0 auto; -webkit-flex-direction: column; flex-direction: column}
	#masthead > div{width:100%}
	#masthead > div:first-of-type{padding:5px; text-align: center}
	#masthead > div:last-of-type{text-align: center}
	#info{font-size:16px; line-height: 22px}
	#cart{padding: 4px 0 4px 25px; max-width: 260px; margin: 5px auto; text-align: left; background-position: center left}
	#nav{display: none}
	#mobnavButton{display:block}
	#sharebox{-webkit-flex-direction: column; flex-direction: column}
	#sharebox > div{text-align: center !important}
	#sharebox > div:last-of-type{width:100%; padding: 5px 0 10px}
	.addthis_toolbox{margin:0px auto}
	#bcrumbs {float:none; text-align: center; padding: 0px; font-size:11px}
}

@media (max-width: 500px) {
	#recommended > div{min-width: 100%; max-width: 100%}
	#footerinner{-webkit-flex-direction: column; flex-direction: column}
	#footerinner > div{text-align: center !important; width:100%; max-width: 100%; padding: 10px 20px !important}
	.shopFlex{-webkit-flex-direction: column; flex-direction: column}
	.shopFlex > div:last-of-type{width:100%}
	.shopFlex iframe{width:100%; height: 200px}
	.contFlex{-webkit-flex-direction: column; flex-direction: column}
	.contFlex > div{width:100%; max-width: 100%; text-align: center}
	.prodDetFlex{-webkit-flex-direction: column; flex-direction: column}
	.prodDetFlex > div{width:100%}
	.prodDetFlex > div:first-of-type{}
	.prodDetFlex > div:last-of-type{width:100%}
	.gridFlex {display: block;}
	.gridFlex > div {min-width: 100%; max-width: 100%; margin: 6px auto;}
	.cobtbl{font-size:10px}
	.cobtbl td{padding: 1px}
	.hide{display:none}
	#search_box input[type=text]{max-width: 220px}
	#info{display:none}
	#cart{font-size:12px}
}

@media (max-width: 400px) {
	h1{line-height: 28px}
	#logo img{max-height: 90px}
	#up{right:10px; width:28px; height: 28px; opacity:0.6}
	#search_box input[type=text]{max-width: 180px}
	#foot-links{-webkit-flex-direction: column; flex-direction: column}
	#middle{min-height: auto; padding: 15px 5px 120px}
	#recommended > div{margin:5px auto}
	
}