/* 
Theme Name:		 storefront_catalogue_v1
Theme URI:		 
Description:	 storefront_catalogue_v1 is a child theme of Storefront
Author:			 NET9
Author URI:		 
Template:		 storefront
Version:		 1.0.0
Text Domain:	 storefront_catalogue_v1
*/


/*
    Add your custom styles here
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/*  TEMP WORK  */
.woocommerce .out-of-stock{
	display:none;
}










/*  COMMON  */
#content {
min-height: 600px;
height:auto !important;
height: 500px;
} 
body {
	font-family: Open Sans;
	background-color:#fff;
}


/*  HEADER  */
.storefront-secondary-navigation .site-header .site-branding {
width:10% !important;
float:left;
margin-right:2%
}
.site-header { /* Strip right on top */
	background-color:#fff !important;
	padding-top:0px !important;
	padding-bottom:0px !important;
	color:#9aa0a7;
	background-position:center center;
	position:relative;
	z-index:999;
	border-bottom:1px solid #999 !important;
	margin-bottom:4em !important;
}
#masthead .col-full{
	max-width: 100% !important;
	background-color:#000 !important;
	margin-left:0px  !important;
	margin-right:0px !important;
	padding-left:0px !important;
	padding-right:0px !important;

}
#masthead .site-branding{
	padding-left:30px !important;
	padding-bottom:0px !important;
	padding-top:10px !important;
}
.woocommerce-MyAccount-content .col-1{
	max-width:96% !important;
}



/*  HEADER MAIN MENU   */
.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
  width: 80% !important;
  float: right;
  margin-right: 30px !important;
  padding-top:30px !important;
  text-transform:uppercase !important;
}
.secondary-navigation a{
	color:#FFF !important;
}


/*  HEADER TOOGLE MENU   */
#site-navigation .menu-toggle{
	border:0px !important;
	margin-top:20px !important;
	margin-right:20px !important;
}
.main-navigation.toggled .handheld-navigation, .main-navigation.toggled .menu>ul:not(.nav-menu), .main-navigation.toggled ul[aria-expanded=true] {
    max-height: 9999px !important;
	padding-left:20px !important;
}


/*  HEADER PRODUCT CATEGORIES MENU   */
@media (min-width: 768px){
  .woocommerce-active .site-header .main-navigation {
	width: 100%;
	margin: 0;
	text-align: center;
	background-color:#6b6b6b;
	font-size:14px !important;
  }
  .primary-navigation {
	width: 100%;
	margin: 0;
	text-align: center;
	/*background-color:#ededed;*/
	background-color:#5b5b5b;
  }
  
  .primary-navigation a{
	  color:#fff !important;
  }
  .primary-navigation .sub-menu{
	  background-color:#666!important;
  }
  
  .footer-widgets {
	  padding-top: 1em;
	  border-bottom:0 !important;
  }
  
  .woocommerce-active .site-header .site-search {
	  width: 15%;
	  float: right;
	  margin-right: 20px;
	  clear: none;

  }  
  .site-search .widget_product_search form input[type=search], .site-search .widget_product_search form input[type=text] {
	  padding-left: 2.617924em;
	  height:30px!important;
  }
  .site-search .widget_product_search form::before {
	  top: 0.5em;
	  left: 1.15em;
  }
}


/*  NUTRITION TABLE */
.Ntbl_L{
	font-size:13px;
	color:#444;
	text-align:left;
	font-weight:bold;
	padding-left:3px;
}
.Ntbl_D{
	font-size:13px;
	color:#444;
	text-align:right;
	padding-left:3px;
}



/*  SINGLE PRODUCT PAGE */
.single-product div.product .product_meta .posted_in:last-child{
	color:#000 !important;
	padding-bottom:20px !important;
	padding-right:20px !important;
	text-transform:uppercase !important;
	font-weight:700 !important;
	text-decoration:none !important;
	font-size:1em !important;
}
.single-product div.product h1{
	clear:both !important;
	font-size:24px !important;
	font-weight:700 !important;
	padding-bottom:15px !important;
	padding-top:7px !important;
	color:#444444 !important;
	text-transform:uppercase !important;
}
.single-product div.product .product_meta a {
    font-weight: 600;
    text-decoration:none !important;
}
.beta, h2 {
	color:#000 !important;
	padding-bottom:20px !important;
	padding-top:20px !important;	
	padding-right:20px !important;
	text-transform:uppercase !important;
	font-weight:700 !important;
	text-decoration:none !important;
	font-size:0.95em !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
}



/*  SIDE PRODUCT RANGE MENU COMMON  */
.widget-area .widget a:not(.button) {
    font-weight: 600;
    text-decoration:none !important;
}
.widget_product_categories ul li::before{
	content: "";
}
.widget_product_categories ul li.current-cat::before {
    content: "\f35a";
}
.widget .widget-title, .widget .widgettitle {
    font-size: 1.2em !important;
    letter-spacing: 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    padding: 0 0 0.5em !important;
    margin-bottom: 0.5em !important;
    font-weight: 700 !important;
}


/*  FOOTER  */
.footer-widgets .widget_nav_menu li {
    display: inline-block !important;
}
.footer-widgets .widget_nav_menu li a:hover {
	color:#6cf	 !important;
}
.widget_nav_menu ul li::before {
    content: "";
}

#colophon .col-full {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding-left:30px !important;
	padding-right:30px !important;
    box-sizing: content-box;
}
.site-footer {
  background-color: #000 !important;
  font-size:14px;
  color: #ffffff !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
  text-align:center !important;
}
section.footer-widgets {
    padding-top: 25px;
}
div.site-info {
    padding-top: 16px;
    padding-bottom: 25px;
}




/*The code below will simply setup the price-title area to be hidden and have a background. Please note that uou will have to change the background and height to match your website color scheme and product height  but first load it as and then adjust                 */                                                                       


.products .product .product-details {
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        top: 200px;
        left: 0;
        right: 0;
        bottom: 0;
        color: #f7f7f7;
        padding: 2em;
        text-align: left;
    opacity: 0;
    height: 180px;
    filter: alpha(opacity=@opacity * 50);  
    -webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
        -o-transition: all ease 0.4s;
        transition: all ease 0.4s; 
  }



 ul.products li.product:hover .product-details {
    filter: alpha(opacity=@opacity * 100);
    opacity: 1;
  }

  ul.products li.product a img:hover {
    opacity: 0.9;
  }

  
  /*   PRODUCT LIST PAGE STYLE */
  ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
    background-color: #fff;
    /*border: 1px solid #ddd;
    border-radius: 10px; */
	padding:5px;
}
  ul.products li.product .woocommerce-LoopProduct-link:hover {
    display: block;
    background-color: #fff;
    /*border: 1px solid #eee;
    border-radius: 10px;*/
	padding:5px;
	transform: scale(1.1);
	transition-duration: 0.5s;
}

.product-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.product-details p {
-webkit-line-clamp: 2;
}








.flip-box {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);
}

.products p{
	display:none !important;
}