/*
 Theme Name:   BFI WooCommerce Theme for Storefront 1.6
 Description:  BFI WooCommerce theme, a structure for BFI sites, which extends Storefront 1.6
 Author:       BFI
 Author URI:   http://www.wearebfi.co.uk
 Template:     storefront
 Version:      $Id: style.css 2905 2016-05-16 15:43:48Z chrisbfinternet $
 Text Domain:  bfi-woocommerce-theme
*/


/*
	Your comments should say WHY the code does what it does, not WHAT it does.
*/


/* Layout ========== */

/* 24 column responsive grid system v3.0 | responsive.gs */
.col { display: block;float: left;width: 100%;}@media ( min-width : 769px ) {.gutters .col {margin-left: 2%;}.gutters .col:first-child { margin-left: 0; }}@media ( min-width : 769px ) {.span_1 { width: 4.16666666667%; }.span_2 { width: 8.33333333333%; }.span_3 { width:12.5%; }.span_4 { width: 16.6666666667%; }.span_5 { width: 20.8333333333%; }.span_6 { width: 25%; }.span_7 { width: 29.1666666667%; }.span_8 { width: 33.3333333333%; }.span_9 { width: 37.5%; }.span_10 { width: 41.6666666667%; }.span_11 { width: 45.8333333333%; }.span_12 { width: 50%; }.span_13 { width: 54.1666666667%; }.span_14 { width: 58.3333333333%; }.span_15 { width: 62.5%; }.span_16 { width: 66.6666666667%; }.span_17 { width: 70.8333333333%; }.span_18 { width: 75%; }.span_19 { width: 79.1666666667%; }.span_20 { width: 83.3333333333%; }.span_21 { width: 87.5%; }.span_22 { width: 91.6666666667%; }.span_23 { width: 95.8333333333%; }.span_24 { width: 100%; }.gutters .span_1 { width: 2.25%; }.gutters .span_2 { width: 6.5%; }.gutters .span_3 { width: 10.75%; }.gutters .span_4 { width: 15.0%; }.gutters .span_5 { width: 19.25%; }.gutters .span_6 { width: 23.5%; }.gutters .span_7 { width: 27.75%; }.gutters .span_8 { width: 32.0%; }.gutters .span_9 { width: 36.25%; }.gutters .span_10 { width: 40.5%; }.gutters .span_11 { width: 44.75%; }.gutters .span_12 { width: 49.0%; }.gutters .span_13 { width: 53.25%; }.gutters .span_14 { width: 57.5%; }.gutters .span_15 { width: 61.75%; }.gutters .span_16 { width: 66.0%; }.gutters .span_17 { width: 70.25%; }.gutters .span_18 { width: 74.5%; }.gutters .span_19 { width: 78.75%; }.gutters .span_20 { width: 83.0%; }.gutters .span_21 { width: 87.25%; }.gutters .span_22 { width: 91.5%; }.gutters .span_23 { width: 95.75%; }.gutters .span_24 { width: 100%; }}
.row {padding-bottom: 5px;} /* set according to preference*/


#primary.content-area {
    margin-right: 0;
}

.archive #primary.content-area{    
	margin-left: 4%;
    margin-right: 0;
    width: 74%;
}

.storefront-full-width-content .woocommerce-products-header{
	padding: 0 0 3em;
}

/* General, Site-wide ========== */

a:active,
a:focus,
button:active,
button:focus {
	border: none;
	outline: none;
}

/* Micro Clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */
/* Blended with classes from responsive.gs v3.0 */
.container:after, .row:after, .col:after, .group:after, .cf:before,.cf:after{content:"";display:table;}
.container:after, .row:after, .col:after, .group:after, .cf:after{clear:both;}
.container, .row, .col, .group, .cf{*zoom:1;}

.col-full {
	padding: 0 3%;
	margin: 0 auto;
	max-width: 1440px;
}

@media only screen and (max-width: 768px) {
	.col-full {
		padding: 0 3%;
	}
	.archive #primary.content-area{
		margin-left: 0;
		width: 100%;
	}
}

/* Main Navigation ========== */


#site-navigation {
    padding-top: 0px;
    clear: both;
	margin-left: 6em;
}

#site-navigation ul {
    margin: 0;
    width: 100%;
	max-height: none;
	clear: none;
}

#site-navigation li {
	list-style: none;
	display: inline-block;
}

.main-navigation ul.menu > li:first-child, .main-navigation ul.nav-menu > li:first-child {
    margin-left: 0;
}

#nav-control, .mobile-icons {
    display: none;
}

#site-navigation li#sale a {
    color: #ae1b22 ;
}

#site-navigation li#sale a:hover {
    color: #fff;
    background: #ae1b22;
}

#menu-main-navigation > li.menu-item-210 >.sub-menu > .col-full > li:last-of-type::after {
	content: "";
	position: absolute;
	display: inline-block;
	right: 0;
	top: 0;
	width: 90px;
	height: 70px;
	background: url('images/rya-white.svg') no-repeat;
	background-size: contain;
	z-index: 1000;
}

/* dropdown */

#site-navigation li ul {
	position: absolute;
	width: 100%;
	left: -999em;
	z-index:999;
}

#site-navigation li:hover ul { left: 0; }

#site-navigation li ul li {
    position: relative;
}
#menu-main-navigation > li >.sub-menu > .col-full > li{
	margin-top: 3em;
}

#site-navigation li.hover ul a {
	border: none;
	margin: 0px;
}

/* 2nd level dropdown */
#site-navigation li ul li ul {
	position: relative;
	width: 100%;
	z-index: 999;
	display: block;
	padding: 0;
}
#site-navigation li ul li ul .col-full {
	padding: 0;
}
#site-navigation li ul li ul li a {
	background: transparent;
}

/* Product Category Filters */

.archive #secondary {
	float: left;
}

#banner .item {
	position: relative;
}

.banner-image{
	background-size: cover;
	background-position: 65% 50%;
	height: 800px;
}

	#banner .owl-dots{
		position: absolute;
		bottom: 1em;
		width: 100%;
		text-align: center;
	}
	#banner .owl-dots .owl-dot{
		width: 12px;
		height: 12px;
		display: inline-block;
		box-sizing: content-box;
		border-radius: 50%;
		background: #ccc;
		margin: 0 5px;
	}
		#banner .owl-dots .owl-dot.active{
			background: #ea7f24;
		}

.banner-caption {
	position: absolute;
    top: 16em;
    background-color: rgba(68, 68, 68, 0.4);
    width: 38%;
    padding: 32px 370px 32px 52px;
}

.banner-caption h3 {
	color: #fff;
    font-size: 36px;
	font-weight: 700;
	line-height: 1.2em;
}

.banner-caption h4{
    color: #fff;
    font-size: 20px;
	font-weight: 400;
	line-height: 1.3em;
	margin-bottom: 20px;
}

.banner-caption a{
	color: #fff;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}

/* 1850 */
@media only screen and (max-width: 1850px) {
	.banner-caption {
		padding: 32px 180px 32px 52px;
	}
}

/* 1379 */
@media only screen and (max-width: 1380px) {
	.banner-caption {
		padding: 32px 52px 32px 52px;
	}
}

/* 1084 -> 960 */
@media only screen and (max-width: 1084px) {
	#site-navigation {
		margin-left: 0;
	}
	/* #navigation-container {
		float: left;
	} */
}

@media only screen and (max-width: 768px) {	
	#banner .banner-caption {
		padding: 24px;
		width: auto;
		top: 10em;
	}
	.banner-image{
		height: 500px;
	}
	
	#menu-main-navigation > li >.sub-menu > .col-full > li{
		margin-top: 1em;
	}
}

@media only screen and (max-width: 500px) {	
	#banner .col-full{
		padding: 0;
	}
	#banner .banner-caption {
		margin: 0 14px;
		text-align: center;
	}
	.banner-caption a{
		background-color: #ea7f24;
		padding: 11px 26px;
	}
}
/* Stock Notifications ========== */

p.stock.in-stock {
	color: green;
}

p.stock.out-of-stock {
	color: red;
}

p.stock::before,
p.stock.out-of-stock::before,
.single-product div.product p.stock.out-of-stock::before {
    content: normal ;
}


/* Force product pages to go full width ========== */
body.single-product #primary {
	width: 100%;
	margin-left: 0;
}


/* BF Layered Nav Filters ========== */

#secondary .dropdown_layered_nav_title,
#secondary .widget_price_filter h3,
#content .widget_price_filter h3,
#content .widget_layered_nav h3 {
    border-bottom: 1px solid #E1E1E1;
    padding: 0 0 1em 0px;
    font-size: 16px;
    color: #999;
    margin-bottom: 1em;
    display: block;
    font-weight: 700;
}

#secondary .bfi-woocommerce-iris-filters-class h3.widget-title {
	display: none;
}

/* For collapsible-filters.js */
#secondary .dropdown_layered_nav_title i,
#secondary .widget_price_filter h3 i {
	font-family: "FontAwesome";
	font-style: normal;
	float: right;
	margin-right: 5px;
}

#secondary .dropdown_layered_nav_title.expanded i:before,
#secondary .widget_price_filter h3.expanded i:before {
	content:"\f106"
}

#secondary .dropdown_layered_nav_title.collapsed i:before,
#secondary .widget_price_filter h3.collapsed i:before {
	content:"\f107"
}
/* END for collapsible-filters.js */



/* WC Checkout - for overriding position:fixed styling added by WC js ====== added by Yee */

#content .woocommerce-checkout .payment-fixed {
    position: absolute;
    margin-left: 0 ;
    width: 41.2% ;
    top: 0 ;
    right: 0
}

form.woocommerce-checkout {position:relative}

/* Form Elements ========== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea, .input-text {
    padding: 0.5em 1em;
    background-color: #fff;
}

button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart {
    padding: 0.7em 1em;
    background: #ea7f24;
	color: #fff;
	font-family: 'Lato', sans-serif;
}

.button a {
    padding: 0.7em 1em;
    color: #fff;
}

input[type="checkbox"], input[type="radio"] {
    width: 15px ;
    margin: 0 10px 0 0 ;
	cursor: pointer;
}

button:hover, .button:hover {
    background:#ea7f24;
    color: #fff;
}

button.alt, input.alt[type="button"], input.alt[type="reset"], input.alt[type="submit"], .button.alt, .added_to_cart.alt, .widget-area .widget a.button.alt, .added_to_cart {
	 background-color: #ea7f24;
    border-color: #ea7f24;
}

.site-header-cart .widget_shopping_cart,
a.wc-backward,
.site-header-cart .widget_shopping_cart a.button {
    color: #FFF;
}



/* Media Queries ========== */



/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	/* Footer */
	.footer-resp-left{
		width: 49.99%;
		float: left;
	}
	.footer-resp-right{
		width: 49.99%;
		float: left;
		margin-top: -25px;
		padding-left: 30px
	}
	.footer-main .span_6 {
		width: 100%;
	}
	.footer-main .span_4 {
		width: 100%;
	}

	.footer-resp-right ul{
		margin-bottom: 0px;
		margin-top: 0px;
	}
}

/* Product Grid Adjustment - 2x column */
@media only screen and (min-width: 560px) and (max-width: 980px) {

	#primary .site-main ul.products li.product {
		width: 47%;
		float: left;
		margin-right: 6% ;
		clear: none ;
	}
	
	#primary .site-main ul.products li:nth-of-type(even) {
		margin-right: 0 ;
	}
}

@media only screen and (max-width: 560px) {
	#primary .site-main ul.products li.product{
		float: left;
		clear: none;
		width: 100%;
	}
}


/* Mobile menu */
@media only screen and (max-width: 899px) {
	.mobile-icons {
		display: block;
	}
	/* NAvicon transform */
	#nav-control {
	    display: block;
	    float: left;
		padding: 0;
		background-color: #fff0;
	}

	#site-navigation {
    	width: 100%;
	}

	#site-navigation a.toggleMenu {
    	display: inline-block;
	}
	

	#site-navigation, #site-navigation li {
	 	float: none;
	}
	
	#site-navigation {
    	text-align: right;
    	width: 100%;
    	position: absolute;
    	top: 6em;
    	right: 0;
    	margin: 0;
	}

	#site-navigation ul {
		padding: 16px 0;
	}
	
	.nav {
		margin-bottom:10px;
		text-align:left;
		/* Prevent the flash of mobile nav on load */
		display: none;
		background-color: #ea7f24;
	}
	
	#site-navigation a {
  		margin-right:0;
	}
	
	#site-navigation li {
    	width: 100%;
	}
	
	#site-navigation ul ul a {
    	color: #fff ;
    	width: 100%;
		border: none;
		padding: 8px 16px;
	}
	#site-navigation ul .sub-menu a {
		background-color: #ee9950;
		font-weight: 600;
	}
	
	#site-navigation li:hover a{
		border: none;
	}
	
	#site-navigation li ul li{
		width: 100%;
		border: none;
	}
	#site-navigation li ul li:first-child{
		width: 100%;
		border: none;
	}
	
	#site-navigation ul .sub-menu {
	 	display: block;
		width: 100%;
		background-color: #ee9950;
	}

	#site-navigation ul .sub-menu .col-full {
		padding: 0;
	}
		
	#site-navigation li:hover ul,
	#site-navigation li li:hover ul {
	 	position: static;
		display: none;
	}
	
	#site-navigation li.hover > ul,
	#site-navigation li li.hover > ul {
	 	position: static;
		display: block;
	}
	
	#site-navigation ul ul{
		padding: 0;
	}
	
	/* Style dropdowns */
	#site-navigation li > .parent {
		background-image: url(/wp-content/themes/woocommerce-theme/images/icons/plus-white.svg);
		background-repeat: no-repeat;
		background-position: 92% 50%;
		background-size: 19px;
	}

	#site-navigation li.hover > .parent {
		background-image: url(/wp-content/themes/woocommerce-theme/images/icons/minus-white.svg);
		background-size: 18px;
	}
	/* /Style dropdowns */

	.site-header-cart {
		display: none;
	}

	/* NAvicon transform */
	#nav-control {
	    display: block;
	    float: left;
		padding: 0;
		background-color: #fff0;
	}

	.lines-button {
		display: inline-block;
		cursor: pointer;
		user-select: none;
		margin-right: 3%;
		background: transparent;
		box-shadow: none;
	}

	.lines-button:hover {
		opacity: 1;
		background: transparent;
	}

	.lines-button:active {
		transition: .2s;
		background: rgba(0, 0, 0, 0.1);
	}

	.lines {
		display: inline-block;
		width: 25px;
		height: 3px;
		background: #eee;
		transition: 0.2s;
		position: relative;
		border-radius: 10px;/*create the upper and lower lines as pseudo-elements of the middle line*/
		top: -3px;
	}

	.lines:before, .lines:after {
		display: inline-block;
		width: 25px;
		height: 3px;
		background: #eee;
		transition: 0.2s;
		position: absolute;
		left: 0;
		content: '';
		-ms-transform-origin: 0.09286rem center;
		/* IE 9 */
		-webkit-transform-origin: 0.09286rem center;
		/* Chrome, Safari, Opera */
		transform-origin: 0.09286rem center;
		border-radius: 10px;
	}

	.lines:before {
		top: 6px;
	}

	.lines:after {
		top: -6px;
	}

	.lines-button.x .lines {
		transition: background 0.2s ease 0.3s;
	}

	.lines-button.x .lines:before, .lines-button.x .lines:after {
		-ms-transform-origin: 50% 50% 0;
		/* IE 9 */
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		transition: top 0.2s 0.3s ease, -webkit-transform 0.3s ease;
		transition: top 0.2s 0.3s ease, transform 0.2s ease;
	}

	.lines-button.x.active .lines {
		background: none repeat scroll 0 0 transparent;
		transition: background 0.2s ease 0s;
	}

	.lines-button.x.active .lines:before, .lines-button.x.active .lines:after {
		top: 0;
		transition: top 0.2s ease, -webkit-transform 0.2s 0.3s ease;
		transition: top 0.2s ease, transform 0.2s 0.3s ease;
		width: 25px;
	}

	.lines-button.x.active .lines:before {
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
	}

	.lines-button.x.active .lines:after {
		-webkit-transform: rotate3d(0, 0, 1, -45deg);
		transform: rotate3d(0, 0, 1, -45deg);
		transform: rotate(-45deg);
	}

	.mobile-icons {
		display: block;
	}

	#site-navigation a.mobile-icon {
		color: #eee;
	}

	#mobile-login {
		text-decoration: none ;
		border-bottom:  none ;
		color: #444;
		padding: 10px;
		display: block;
		float: right;
	}

	.mobile-logo {
		display: block;
		width: 130px;
		float: left;
		padding: 10px 0;
	}

	.search-toggle, #mobile-basket {
		float: right;
		display: block;
	}
	
	/* Hide the collapsible filters with CSS, so the page doesn't jump around when targetting #main with filtering (see collapsible-filters.js). */
	.dropdown_layered_nav_ul, .widget_price_filter form {
		display: none;
	}
	
	/* Product Category Filters */
	.archive #secondary {
		float: none;
		width: 100%;
	}

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 768px) {
	
	.woocommerce-active .site-branding {
    	width: 50%;
    	z-index: 1;
    	position: relative;
 }
	
	.woocommerce-active .site-header .site-search {
    	display: none;
	}
	
	.menu-toggle {
    	margin: 0 auto;
	}

	.site-header {
		padding-top: 0;
		position: relative;
	}
	
}

@media only screen and (max-width: 600px) {

	section.footer-widgets, #ft-mailing{
		width: 100%;
	}

}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 467px) {

	.footer-resp-left {
		width: 100%;
	}

	.footer-resp-right {
		width: 100%;
		margin-top: 0px;
		padding-left: 0px;
	}

	footer .contact-details{
		margin-top: 1em;
		padding-left: 0px;
	}

	footer h4{
		padding-left: 0px;
	}

	.footer-resp-right .span_4{
		width: 49.99%;
		float: left;
	}
}


/** Cookie Policy */
#cookie-overlay {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(33,41,52,.85);
	z-index: 2000;
}
#cookie-message {
	position: absolute;
	bottom: 0;
	padding: 4em 5em;
	background-color: #fff;
	width: 100%;
	margin: 0;
	z-index: 100;
	box-sizing: border-box;
}
#cookie-message .accept {
	text-align: right;
}
#cookie-message p:last-of-type {
	margin-bottom: 0;
}