/*
Theme Name: fourqd
Theme URI: http://www.cambridgewebsolutions.co.uk
Author: Cambride Web Solutions Ltd
Author URI: http://www.cambridgewebsolutions.co.uk
Description: Custom theme for 4QD
*/

.docit-menu li a.docit-main-cat-title{background:#008C7F!important;}
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

#google_translate_element {margin-top: 20px;}
.nav-next, .nav-previous {display:none}
.docit-next-post, .docit-prev-post, .docit-icon-arrowleft, .docit-icon-arrowright {display: none;}
.kbe_breadcrum {width: 50%; float: left;}
tr:nth-child(even) {background: #cce8e5}
tr:nth-child(odd) {background: #fff}
.cart tr:nth-child(even) {background: #fff;}
.shop_table tr:nth-child(even) {background: #fff;}
td {padding: 5px!important;}
.woocommerce-message {border-top: 0px!important;}
.single_add_to_cart_button, .checkout-button, .button {background: #f5731d!important; color: #fff!important;}
.single_add_to_cart_button:hover, .checkout-button:hover, .button:hover {background: #fab990!important;}
ul.cats { width: 100%; float: left; list-style-type: none; margin: 0!important; padding: 0 !important; }
li.knowledge-category, li.cat-item { width: 48%; margin: 1% 2% 1% 0; float: left; min-height: 125px; list-style-type: none; }
li.knowledge-category a, li.cat-item a { color: #008c7f; font-weight: bold; font-size: 30px; }
.knowledgecat { width: 48%; margin: 1%; float: left; min-height: 200px; }
.woocommerce-breadcrumb a { color: #008c7f!important; text-decoration: underline; margin-right: 5px; }
.woocommerce-breadcrumb a:hover { text-decoration: none; }
.main-navigation .search-form { position: relative; float: left; margin-left: 40px; margin-top: 0; margin-bottom: -4px; }
.images { width: 30%!important; }
.summary { width: 60%!important; }
ul.products li.product { width: 45%!important; border-bottom: 1px solid #ccc; overflow: auto; min-height: 520px; }
ul.products li img { float: left; height: 380px !important; overflow: hidden; object-fit: cover; object-position: 50% 50%; width: 50% }
ul.products li h3 { width: 100%!important; float: left!important; }
ul.products li.price { width: 100%!important; float: left!important; margin-bottom: -40px!important; }
ul.products li.amount { width: 100%!important; float: left!important; }
ul.products li p { width: 100%!important; float: left!important; margin-bottom: 5px!important; }
.adamproduct { float: left!important; width: 60%!important; background: red!important; }
.controller { width: 66%; float: left; margin: 0 0 40px 0; padding: 20px; background: #efefef; }
.controller h2 { margin: 0; padding: 0; float: left; }
.controller img { width: 35%; float: left; margin: 0 3% 0 0; padding: 0; }
.cotrollersingle { width: 60%; float: left; margin: -45px 0 0 0; padding: 0; }
#footer { width: 100%; background: #324C4A; float: left; padding: 30px 0 80px 0; color: #fff; }
#footercontact { float: left; width: 30%; margin-right: 2%; margin-bottom: 15px; }
#footerform { float: left; width: 30%; }
.greytext { color: #999a9b; }
#copy { width: 100%; float: left; }
#homecopy { float: left; width: 60%; }
#homenews { float: right; width: 30%; }
.hrgreen { height: 9px; float: left; width: 100%; background: #018C7F; margin: 0 0 20px 0; }
.hrgrey {height: 3px; float: left; width: 100%; background: #ececec; margin: 0 0 20px 0;}
.moretag {background-color: #018C7F; float: left; padding: 0.5% 1%; float: right; margin: 2% 0; color: #fff;} 
.moretag a, .moretag a:visited, .moretag a:hover{color: #fff;}
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; }
.wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.logo { width: 300px; float: left; }
#socialicons { float: right; margin: 20px 0 0 0; width: 50%; }
#contactdetails { float: right; text-align: right; margin: 0 0 20px 0; width: 50%; }
.social { width: 32px; float: right; margin: 0 0 0 5px; }
#quicklinks { background: #efefef; float: left; width: 100%; }
.quicklink { width: 22%; margin: 20px 1%; float: left; }
.quicklink h2 { float: left; width: 100%; margin: 0; font-size: 17px; padding: 5px 10px; }
h2.quicklink1 { background: #324C4A; color: #fff; }
.quicklink2 { background: #4AD4C8; }
.quicklink3 { background: #85CCC5; }
.quicklink4 { background: #639994; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
body a { color: #018c7f; text-decoration: none; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
h1 { font-size: 40px; line-height: 0.9; margin: 20px 0 20px 0; letter-spacing: 1px; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
 button::-moz-focus-inner, input::-moz-focus-inner {
 border: 0;
 padding: 0;
}
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
 input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
 height: auto;
}
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body, button, input, select, textarea { color: #404040; font-size: 16px; font-size: 1rem; line-height: 1.3; }
h1, h2, h3, h4, h5, h6 { clear: both; }

dfn, cite, em, i { font-style: italic; }
blockquote { margin: 0 1.5em; }
address { margin: 0 0 1.5em; }
pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; }
code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; }
abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
mark, ins { background: #fff9c0; text-decoration: none; }
big { font-size: 125%; }
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html { box-sizing: border-box; }
*, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; }
body { background: #fff; /* Fallback for when there is no custom background color defined. */ }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; }
ul, ol { margin: 0 0 1.5em 3em; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; }
dt { font-weight: bold; }
dd { margin: 0 1.5em 1.5em; }
img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ }
table { margin: 0 0 1.5em; width: 100%; }
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, .8); font-size: 12px; font-size: 0.75rem; line-height: 1; padding: .6em 1em .4em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); }
button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; }
textarea { padding-left: 3px; width: 100%; }
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a { }
a:visited { }
a:hover, a:focus, a:active { }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#slider { float: left; margin: -20px 0 20px 0; width: 100%; }
.main-navigation { clear: both; display: block; float: left; width: 100%; background: #018c7f; margin-bottom: 20px; }
.main-navigation ul { display: block; list-style: none; margin: 0; padding-left: 0; max-width: 1200px; margin: 0 auto; }
.main-navigation li { float: left; position: relative; }
.main-navigation a { display: block; text-decoration: none; color: #fff; padding: 5px 10px; }
.main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 1.7em; left: -999em; z-index: 99999; background: #018c7f; }
.main-navigation ul ul ul { left: -999em; top: 0; }
.main-navigation ul ul a { width: 200px; }
.main-navigation ul ul li { }
.main-navigation li:hover > a, .main-navigation li.focus > a { background: orange; }
.main-navigation ul ul :hover > a, .main-navigation ul ul .focus > a { }
.main-navigation ul ul a:hover, .main-navigation ul ul a.focus { }
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; }
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; }
.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a { }


.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; }
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; }
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; }
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ }
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft { display: inline; float: left; margin-right: 1.5em; }
.alignright { display: inline; float: right; margin-left: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; }
.clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; }
.content-area { background: #ffffff; } /*EJR 21/05/18 Corrected from mint color, affected product page background in woocommerce 3.3 */ 
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget { margin: 0 0 1.5em; }
/* Make sure select elements fit in widgets. */
.widget select { max-width: 100%; }
/* Search widget. */
.widget_search .search-submit { display: none; }
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky { display: block; }
.hentry { margin: 0 0 1.5em; }
.byline, .updated:not(.published) { display: none; }
.single .byline, .group-blog .byline { display: inline; }
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }
.page-links { clear: both; margin: 0 0 1.5em; }
/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; }
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; }
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer { display: block; }
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; }
/* Make sure embeds and iframes fit their containers. */
embed, iframe, object { max-width: 100%; }
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; }
.wp-caption-text { text-align: center; }
.wp-caption .wp-caption-text { margin: 0.8075em 0; }
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery { margin-bottom: 1.5em; }
.gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; }
.gallery-columns-2 .gallery-item { max-width: 50%; }
.gallery-columns-3 .gallery-item { max-width: 33.33%; }
.gallery-columns-4 .gallery-item { max-width: 25%; }
.gallery-columns-5 .gallery-item { max-width: 20%; }
.gallery-columns-6 .gallery-item { max-width: 16.66%; }
.gallery-columns-7 .gallery-item { max-width: 14.28%; }
.gallery-columns-8 .gallery-item { max-width: 12.5%; }
.gallery-columns-9 .gallery-item { max-width: 11.11%; }
.gallery-caption { display: block; }



@media screen and (max-width: 1050px) {
.logo { width:250px; float: left; }
#socialicons { float: right; margin: 20px 0 0 0; width: 40%; }
#contactdetails { float: right; text-align: right; margin: 0 0 20px 0; width: 40%; }
.quicklink { width: 48%; margin: 20px 1%; float: left; }
.quicklink img {width: 100%;}
}

@media screen and (max-width: 640px) {
.quicklink { width: 98%; margin: 20px 1%; float: left; }

#footercontact { float: left; width: 98%;  margin: 20px 1%; float: left; }
#footerform { float: left; width: 98%;  margin: 20px 1%; float: left; }
ul.products li.product { width: 98%!important; border-bottom: 1px solid #ccc; overflow: auto; min-height: 650px; }

li.knowledge-category, li.cat-item { width: 98%; margin: 1% 1% 1% 1%; float: left; min-height: 125px; list-style-type: none; }
li.knowledge-category a, li.cat-item a { color: #008c7f; font-weight: bold; font-size: 30px; }
.knowledgecat { width: 98%; margin: 1%; float: left; min-height: 200px; }


}