/*
 Theme Name:     Fourqd Child Theme
 Theme URI:      
 Description:    Fourqd Child Theme
 Author:         Erica Richardson
 Author URI:     
 Template:       fourqd
 Version:        1.3
 Modified:	 18/5/17 Gallery style block for woocommerce 3 added
 		 12/09/17 Hyperlinks on product pages were not in green or underlined when active
 		          This changed when mobile changes implemented, and corrected in this version	
 		 24/03/2018 All hyperlinks underlined - customers are missing the fact that they are clickable
 		 30/05/18 Added smaller mobile screens with reduced logo width
*/

@import url("../fourqd/style.css");

/* =Theme customization starts here
------------------------------------------------------- */

.clearfix {
  overflow: auto;
}

ul,
ol {
  margin: 0 0 16px 16px;
  padding-left: 16px;
}

ul li,
ol li {
  margin-bottom: 16px;
}


/* default tweaks */

h1,
h2 {
  font-weight: 500;
  line-height: 1.2;
}

p {
  line-height: 1.5;
}

div.entry-content,
div.entry-content p {
  margin-top: 0;
}


/* make links react in content 
*/

/* EJR Change hyperlinks to underlined */
body a { color: #018c7f; text-decoration: underline; }


/* main content links hover and active
*/

#page p a:hover,
#content p a:hover,
#page p a:active,
#content p a:active {
  text-decoration: underline;
}


/* heatsinks page is mess 
*/

mark {
  background: none;
}

/* EJR Changed product hyperlinks back to green, and underlined on hover and click
24/3/18 Changed to always underlined
*/

.product p a {
  text-decoration: underline;
  color: #018c7f;
}

#content .product p a:hover,
#content .product p a:active {
  text-decoration: underline;
}

#content a.moretag {
  color: white;
}


/* NEWS */

#homecopy {
  float: none;
  width: 90%;
  margin: auto;
}


/* heatsinks */


/* fix rule under more info buttons */

#content a.add_to_cart_button {
  margin-bottom: 8px;
}


/* fix catalog */


/* image borders experimental 

.upsells img,
.size-shop_single {
  border: 1px solid rgb(50, 76, 74);
}
*/


/* ECOMMERCE IMPROVEMENTS
*/

.woocommerce-variation-price {
  margin-bottom: 16px;
}

.woocommerce ul.products li.product .price {
  font-size: 16px;
  font-weight: 500;
}


/* Setting standard height for product display area on product category page, so that products
line up better */

.woocommerce ul.products li.product h3 {
  margin: 0;
  text-align: center;
  min-height: 40px;
}


/* link fixes for product list / upsell 
*/

.product a h3,
.product a p,
.product a div,

/* accessories page is mess uses div not p */

.upsells a h3,
.upsells a p {
  color: #404040;
}


/* nav brand color 
*/

.main-navigation li:hover > a,
.main-navigation li.focus > a {
  background: #F47320;
}


/* header */

#masthead {
  /* padding-top: 8px; */
}

.main-navigation {
  height: 46px;
  padding-top: 8px;
}

#contactdetails {
  /* min-width: 50%; */
  text-align: left;
  width: auto;
  margin: 0;
}

#contactdetails img {
  position: relative;
  top: 5px;
  margin-right: 16px;
  display: inline;
}


/* Do not display tags e.g. golf cart on the product page */

.tagged_as {
  display: none;
}


/* Do not display category e.g. controller on the product page */

.posted_in {
  display: none;
}

h2.quicklink1,
.quicklink2,
.quicklink3,
.quicklink4 {
  background: #018C7F;
  color: #fff;
}

.hrgreen {
  background: #F47320;
  height: 1px;
}

.hrgrey {
  height: 1px;
}

#socialicons {
  float: right;
  min-width: 60%;
  margin: 0 0 8px 0;
}

#socialicons .social {
  margin-left: 8px;
}

#footer .menu_title {
  margin-top: 8px;
  float: left;
}

#footercontact a {
  color: rgb(0, 180, 167);
}

#footercontact p {
  margin: 0 0 16px 0;
}

#footercontact .sub_title {
  color: rgba(255, 255, 255, .9);
}

.logo {
  width: 200px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.logobar {
  display: none;
}

#footer {
  padding: 16px 0;
}

#footerform button,
#footerform input[type="button"],
#footerform input[type="reset"],
#footerform input[type="submit"] {
  font-size: 14px;
  background: #F47320;
  box-shadow: none;
  border: none;
  text-transform: uppercase;
}

#footer h3 {
  margin: 0 0 8px 0;
  font-weight: 500;
}

#footer .copyright {
  color: rgba(255, 255, 255, 1);
  width: 100%;
  font-size: 14px;
  text-align: center;
  padding-top: 24px;
  margin: 0 auto 0 auto 0;
}


/* media queries */


/* desktop */

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

@media screen and (max-width: 1020px) {
  .logobar {
    display: block;
    width: 100%;
    height: 23px;
    background: #018C7F;
    margin-bottom: 16px;
    -webkit-box-shadow: inset 0px 5px 23px -8px rgba(0, 0, 0, 1);
    -moz-box-shadow: inset 0px 5px 23px -8px rgba(0, 0, 0, 1);
    box-shadow: inset 0px 5px 23px -8px rgba(0, 0, 0, 1);
  }
}


/* mobile */

@media screen and (max-width: 960px) {
  #footercontact {
    float: left;
    width: 98%;
    margin: 0 0 16px 0;
  }
  #footerform {
    float: left;
    width: 98%;
    margin: 0 0 16px 0;
  }
  ul.products li.product {
    width: 98%!important;
    border-bottom: 1px solid #ccc;
    overflow: auto;
    min-height: 650px;
  }
}

@media screen and (max-width: 640px) {
  .logo {
    width: 125px;
  }
  .quicklink {
    width: 98%;
    margin: 0 0 16px 0;
    float: left;
  }
  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;
  }
  .summary {
    width: 100%!important;
  }
  h1 {
    font-size: 28px;
    letter-spacing: 0;
    line-height: 1.2;
  }
  ul,
  ol {
    margin-left: 0;
  }
  #socialicons .social {
    margin: 0 0 16px 16px;
  }
}

/* EJR 30/05/18 Added smaller screen sizes
*  Seem to be quite common now */
@media screen and (max-width: 500px) {
  .logo {
    width: 100px;
  }
  
@media screen and (max-width: 320px) {
  .logo {
    width: 50px;
  }

/* WooCommerce 3.0 Gallery = added 18/5/17 EJR*/

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}

.woocommerce-product-gallery figure {
margin: 0
}

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}

.woocommerce-product-gallery img {
display: block
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}

.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}