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

:root {
	/** General colors **/
	--black: #242424;
	--black-light: #363636;
	--black-dark: #131313;
	--blue: #0f3d5e;
	--gray: #646464;
	--gray-light: #ededed;
	--gray-dark: #7b7b7b;
	--gray-white: #a59292;
	--red: #b61616;
	--red-contrast: #8c0000;
	--white: #FEFEFE;
	--white-contrast: #c1b4b4;

	/** website **/
	--white: #F2F2F2;
	--brown-green:#402C07;
	--brown: #40240B;
	--brown-dark: #261201;
	--brown-contrast: #736355;


	/** Fonts **/
	--font-family: 'Open Sans', sans-serif;
	--font-size-large: 40px;
	--font-size-medium: 20px;
	--font-size-normal: 18px;
	--font-size-regular: 15px;
	--font-size-small: 13px;
	--font-size-extra-small: 11px;

	--line-height-large: 44px;
	--line-height-medium: 24px;
	--line-height-normal: 18px;
	--line-height-regular: 19px;

	/** Padding for containers **/
	--padding-sides: 10%;

	/** Default radius **/
	--border-radius: 5px;

	/** ==============================================================================
		Controll the animation of images when hovering over

		- Change --image-scale-hover to 1.1 to create zooming effect
	==============================================================================	**/
	--image-opacity: 0.8;
	--image-opacity-hover: 1;
	--image-scale: 1.0;
	--image-scale-hover: 1;
	--image-aspect-ratio: 1/1; /** 1/1 - 16/10 - 16/9 - auto**/

	/** --- Body --- **/
	--body-background: var(--white);
	--body-color: var(--brown-dark);
	--body-family: var(--font-family);
	--body-font-size: var(--font-size-regular);
	--body-line-height: var(--line-height-medium);

	/** --- Header --- **/
	--header-background: var(--brown);
	--header-padding: 0 var(--padding-sides);

	--header-logo-width: 350px;

	--header-cart-width: 37px;
	--header-cart-height: 27px;
	--header-cart-icon: url(../images/icon-cart.png);
	--header-cart-background: var(--brown);
	--header-cart-color: var(--white);
	--header-cart-background-hover: var(--red-contrast);
	--header-cart-color-hover: var(--white);

	--nav-main-background: transparant;
	--nav-main-dropdown-background: var(--white);
	--nav-main-color: var(--white);
	--nav-main-color-hover: var(--red);

	--nav-secondary-background: var(--brown);
	--nav-secondary-dropdown-background: var(--red-contrast);
	--nav-secondary-color: var(--white);
	--nav-secondary-color-hover: var(--white);

	--nav-site-border-color: var(--red-contrast);

	--nav-contact-background: var(--brown-dark);
	--nav-contact-color: var(--white);
	--nav-contact-color-hover: var(--white);

	--crumbs-background: var(--gray-light);
	--crumbs-padding: 7px var(--padding-sides);
	--crumbs-font-size: var(--font-size-extra-small);
	--crumbs-color: var(--black-light);
	--crumbs-color-link: var(--gray);
	--crumbs-color-link-hover: var(--black);


	/** Banner **/
	--banner-height-full: 62vh;
	--banner-width-full: 100%;
	--banner-slim-height: 200px;
	--banner-slim-padding: 0 var(--padding-sides);

	/** Banner navigation arrows **/
	--banner-navigation-arrow-width: 27px;
	--banner-navigation-arrow-height: 27px;
	--banner-navigation-arrow-offset: 12px;
	--banner-navigation-arrow-background-prev: transparent url(../images/slider-arrows.png) no-repeat;
	--banner-navigation-arrow-background-next: transparent url(../images/slider-arrows.png) no-repeat -27px 0;

	/** Banner pagination bullets **/
	--banner-pagination-display: none;
	--banner-pagination-button-color: var(--white);
	--banner-pagination-button-radius: 15px;

	/** Banner caption h1 **/
	--banner-caption-font-size-h1: var(--font-size-h1);
	--banner-caption-font-weight-h1: var(--font-weight-h1);
	--banner-caption-line-height-h1: var(--line-height-h1);
	--banner-caption-font-color-h1: var(--white);
	--banner-caption-padding-h1: 9px 14px;
	--banner-caption-background-h1: var(--brown);

	/** Banner caption p **/
	--banner-caption-font-size-p: var(--font-size-h2);
	--banner-caption-font-weight-p: var(--font-weight-h2);
	--banner-caption-line-height-p: var(--line-height-h2);
	--banner-caption-font-color-p: var(--white);
	--banner-caption-padding-p: 7px 12px;
	--banner-caption-background-p: var(--gray);

	/** Nav sidebar **/
	--nav-sidebar-margin: 0 0 4em;
	--nav-sidebar-color: var(--black);
	--nav-sidebar-color-hover: var(--brown);
	--nav-sidebar-padding: 10px 0;
	--nav-sidebar-item-margin: 4px 0;
	--nav-sidebar-font-size: var(--font-size-normal);
	--nav-sidebar-font-weight: 400;

	/** Flex gallery defaults **/
	--flex-gallery-items: 3;
	--flex-gallery-item-opacity: var(--image-opacity);
	--flex-gallery-item-opacity-hover: var(--image-opacity-hover);
	--flex-gallery-item-scale: var(--image-scale);
	--flex-gallery-item-scale-hover: var(--image-scale-hover);
	--flex-gallery-item-offset: 1em;
	--flex-gallery-item-width: calc((100% - 2 * var(--flex-gallery-item-offset)) / var(--flex-gallery-items));/** (100% - 2 x offset) / nItems **/
	--flex-gallery-label-padding: 3px 2px;
	--flex-gallery-label-background: var(--brown);
	--flex-gallery-label-color: var(--white);

	/** Flex gallery category **/
	--flex-gallery-category-items: 3;
	--flex-gallery-category-item-offset: 1em;
	--flex-gallery-category-item-width: calc(100% / var(--flex-gallery-category-items) - var(--flex-gallery-category-item-offset));
	--flex-gallery-category-item-padding: 7px 0;
	--flex-gallery-category-item-background: transparant;
	--flex-gallery-category-item-background-hover: transparant;
	--flex-gallery-category-item-color: var(--black-light);
	--flex-gallery-category-item-color-hover: var(--brown);
	--flex-gallery-category-item-opacity: var(--image-opacity);
	--flex-gallery-category-item-opacity-hover: var(--image-opacity-hover);
	--flex-gallery-category-item-scale: var(--image-scale);
	--flex-gallery-category-item-scale-hover: var(--image-scale-hover);

	/** Flex overview **/


	/** Core activities **/
	--core-background: var(--gray-light);
	--core-padding: 25px var(--padding-sides);

	--core-items: 3;
	--core-item-offset: 1em;
	--core-item-width: calc(100% / var(--core-items) - var(--core-item-offset));
	--core-item-padding: 7px 0;
	--core-item-background: var(--red-contrast);
	--core-item-background-hover: var(--brown);
	--core-item-color: var(--white);
	--core-item-color-hover: var(--white);
	--core-item-opacity: var(--image-opacity);
	--core-item-opacity-hover: var(--image-opacity-hover);
	--core-item-scale: var(--image-scale);
	--core-item-scale-hover: var(--image-scale-hover);

	/** Headings **/
	--font-weight-h1: 300;
	--font-weight-h2: 400;
	--font-weight-h3: 400;
	--font-weight-h4: 600;
	--font-weight-h5: 600;
	--font-weight-h6: 600;

	--font-size-h1: var(--font-size-large);
	--font-size-h2: var(--font-size-medium);
	--font-size-h3: var(--font-size-medium);
	--font-size-h4: var(--font-size-normal);
	--font-size-h5: var(--font-size-normal);
	--font-size-h6: var(--font-size-regular);

	--line-height-h1: var(--line-height-large);
	--line-height-h2: var(--line-height-medium);
	--line-height-h3: var(--line-height-medium);
	--line-height-h4: var(--line-height-normal);
	--line-height-h5: var(--line-height-normal);
	--line-height-h6: var(--line-height-regular);

	--font-family-headings: var(--font-family);
	--font-family-h1: var(--font-family-headings);
	--font-family-h2: var(--font-family-headings);
	--font-family-h3: var(--font-family-headings);
	--font-family-h4: var(--font-family-headings);
	--font-family-h5: var(--font-family-headings);
	--font-family-h6: var(--font-family-headings);

	--font-color-h1: var(--brown);
	--font-color-h2: var(--red-dark);
	--font-color-h3: var(--brown);
	--font-color-h4: var(--brown);
	--font-color-h5: var(--brown);
	--font-color-h6: var(--brown);

	--article-offset: 2em;

	/** Links, buttons **/
	--a-color: var(--brown);
	--a-color-hover: var(--gray);

	--button-background: var(--brown);
	--button-background-hover: var(--gray);
	--button-color: var(--white);
	--button-color-hover: var(--white);
	--button-fontsize: --fontsize-regular;
	--button-padding: 8px 10px;
	--button-border-radius: var(--border-radius);

	/** --- Footer --- **/
	--footer-background: var(--brown) url(../images/bg-wood.jpg);
	--footer-padding: 20px var(--padding-sides);

	--footer-newsletter-background: var(--red-contrast) url(../images/icon-newsletter.png) center 32px / 128px 128px no-repeat;
	--footer-newsletter-color: var(--white);

	--footer-address-background: #40240B99;
	--footer-address-color: var(--white);

	--footer-menu-background: #40240B99;
	--footer-menu-color: var(--white);

	--footer-credits-background: #40240BDD;
	--footer-credits-padding: 10px var(--padding-sides);
	--footer-credits-color: var(--white);
	--footer-credits-color-hover: var(--white);
	--footer-credits-font-size: var(--font-size-small);

	/** --- Input --- **/
	--input-font-size:	var(--font-size-regular);
	--input-font-weight: 400;
	--input-font-family: var(--font-family);
	--input-background: var(--gray-light);
	--input-color: var(--black-dark);
	--input-padding: 7px 12px;
	--input-margin: 0 0 8px;
	--input-border-radius: var(--border-radius);
	--input-width: 100%;

	/** Cookies **/
	--cookies-background: var(--white);
	--cookies-padding: 2em var(--padding-sides);
	--cookies-border: 4px solid var(--blue);
	--cookies-opacity: 0.8;
	--cookies-opacity-hover: 1;



	/** ------------------------------------------------- **/
	--sidebar-offset: 4em;
	--transition-default: all 0.3s ease-in-out;


	--list-margin: 0 0 1em 0;
	--list-item-bullet-background: var(--brown);
	--list-item-bullet-color: var(--white);
	--list-item-margin: 7px 0 0 0;

	--time-font-size: var(--font-size-extra-small);
	--time-color: var(--gray-white);

	--error-color: #FF0000;

	/** ===============================================
						  WEBSHOP
	===============================================	**/
	--shopping-cart-padding-sides: var(--padding-sides);
	--shopping-cart-sidebar-offset: 4em;
	--shopping-cart-sidebar-width: 25%;

	--shopping-cart-nav-font-size: var(--font-size-regular);
	--shopping-cart-nav-color: var(--white);
	--shopping-cart-nav-color-hover: var(--white);

	--shopping-cart-product-color: var(--black);
	--shopping-cart-border-color: var(--brown);

	--shopping-cart-button-color: var(--black);
	--shopping-cart-button-background: var(--white);
	--shopping-cart-button-color-hover: var(--white);
	--shopping-cart-button-background-hover: var(--brown);

	--shopping-cart-controls-size: 24px;
	--shopping-cart-extended-display-headers: flex;
	--shopping-cart-extended-image: 100px;
	--shopping-cart-extended-display-price: block;
}

body {
	background: var(--body-background);
	color: var(--body-color);
	font-family: var(--body-family);
	font-weight: 300;
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
}

/* ==================== HEADINGS ==================== **/
h1, h1 a, .heading1, .heading1 a,
h2, h2 a, .heading2, .heading2 a,
h3, h3 a, .heading3, .heading3 a,
h4, h4 a, .heading4, .heading4 a,
h5, h5 a, .heading5, .heading5 a,
h6, h6 a, .heading6, .heading6 a {
	text-decoration: none;
	display: block;
}

h1, h1 a, .heading1, .heading1 a {
	font-family: var(--font-family-h1);
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-h1);
	line-height: var(--line-height-h1);
	color: var(--font-color-h1);
	margin: 0 0 25px 0
}

h2, h2 a, .heading2, .heading2 a {
	font-family: var(--font-family-h2);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	line-height: var(--line-height-h2);
	color: var(--font-color-h2);
	margin: 0 0 20px 0;
}

h3, h3 a, .heading3, .heading3 a {
	font-family: var(--font-family-h3);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	line-height: var(--line-height-h3);
	color: var(--font-color-h3);
	text-transform: uppercase;
	margin: 0 0 16px 0;
}

h4, h4 a, .heading4, .heading4 a {
	font-family: var(--font-family-h4);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-h4);
	line-height: var(--line-height-h4);
	color: var(--font-color-h4);
	margin: 0 0 6px 0;
}

h5, h5 a, .heading5, .heading5 a {
	font-family: var(--font-family-h5);
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-h5);
	line-height: var(--line-height-h5);
	color: var(--font-color-h5);
	margin: 0 0 6px 0;
}

h6, h6 a, .heading6, .heading6 a {
	font-family: var(--font-family-h6);
	font-size: var(--font-size-h6);
	font-weight: var(--font-weight-h6);
	line-height: var(--line-height-h6);
	color: var(--font-color-h6);
	margin: 0 0 6px 0;
}
/* ====================================================== **/

/* ==================== BUTTONS/ANCHORS ==================== **/
a {
	color: var(--a-color);
	text-decoration: underline;
	outline: none;
}

a:hover {
	color: var(--a-color-hover);
	text-decoration: none;
}
a.next {
	text-decoration: none;
	background: transparent url(../images/icon-next.png) no-repeat 0 8px;
	padding-left: 10px;
}

a.previous {
	text-decoration: none;
	background: transparent url(../images/icon-previous.png) no-repeat 0 8px;
	padding-left: 10px;
}

h1.share span a.a2a_dd {
	font-family: var(--font-family);
	font-size: var(--font-size-regular);
	text-transform: lowercase;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
	text-decoration: none;
	background: var(--button-background);
	border-radius: var(--button-border-radius);
	border: none;
	color: var(--button-color);
	display: inline-block;
	font-size: var(--button-font-size);
	cursor: pointer;
	margin: 10px 0;
	line-height: normal;
	padding: var(--button-padding);
	text-transform: uppercase;
	transition: var(--transition-default);
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
	background: var(--button-background-hover);
	color: var(--button-color-hover);
}

button.inverted, button.inverted:disabled:hover {
	background: #F0F0F0;
	color: var(--black);
}

button.inverted:hover, button.inverted.selected, button.inverted.active {
	background: var(--button-background);
	color: var(--button-color);
}


img {
	vertical-align: bottom;
}