/*!
Theme Name: egregii_custom_underscores
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: egregii_custom_underscores
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

egregii_custom_underscores is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# KEYs (custom)
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# KEYs (custom)
--------------------------------------------------------------*/
/** CUSTOM *********************************************************************************************
 * Few variables are repeated throughout the theme. 
 * To find them easily, they are marked with 'KEY' comments.
 * Comments are described below:

----- highlight colors -----------------------------------------
KEY_color_highlight1_faded		#e2c0c9
KEY_color_highlight1_light		#c10234
KEY_color_highlight1_dark		#7d122a

KEY_color_highlight2			#13783c

----- text colors ----------------------------------------------
KEY_color_light_text			#777
KEY_color_mid_text				#444
KEY_color_dark_text				#111

----- grey colors ----------------------------------------------
KEY_color_white					#fff
KEY_color_lightest_grey         #f7efde
KEY_color_lighter_grey			#f0e0c0
KEY_color_light_grey			#b89d7a
KEY_color_mid_grey              #cfc4ae
KEY_color_mid_grey-E			#eee
KEY_color_mid_grey-D			#ddd
KEY_color_mid_grey-C			#ccc
KEY_color_mid_grey-B			#bbb
KEY_color_mid_grey-A			#aaa
KEY_color_mid_grey-9			#999
KEY_color_dark_grey				#4d342c
KEY_color_black					#000

----- navigation bar height ------------------------------------
KEY_navigation_bar_height		- height of navigation bar & elements on various screen sizes
KEY_navigation_bar_height-small	- used when header is resized upon scrolling
KEY_navigation_bar_height-mobi	- height of header on mobile devices
								- in "header.php", to <header id="masthead" class="site-header">
								  add class ".one_row_header" or ".two_row_header"
								- following 2 headers are used only with ".two_row_header"
KEY_navigation_bar_height-top	- height of top part (in 2-row header)
KEY_navigation_bar_height-nav	- height of bottom part (in 2-row header)
KEY_navigation_bar_height = KEY_navigation_bar_height-top + KEY_navigation_bar_height-nav

----- footer height --------------------------------------------
KEY_footer_height				- height of footer & elements

----- social icons count ---------------------------------------
KEY_social_icon_count-follow	- width of social follow icons container
KEY_social_icon_count-share		- width of social share icons container

----- SVG border properties ------------------------------------
KEY_border_svg_height_width		- height & width of the SVG border image
KEY_border_svg_url_1			- SVG border URL
KEY_border_svg_url_2
*******************************************************************************************************/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
	background:#b89d7a /*KEY_color_light_grey*/;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1{ font-family:'Optit'; font-weight:400; /*CUSTOM: header font */
	font-size:2em; margin:0.67em 0; }

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */

legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
	display: none;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #4d342c /*KEY_color_dark_grey*/;
	font-family: 'Optit', sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
/* CUSTOM: Header font ********************************************************************************/
	font-family: 'Optit';
	font-weight: 400;
/******************************************************************************************************/
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

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 https://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. */
}

hr {
	background-color: #ccc /*KEY_color_mid_grey-C*/;
	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. */
}

figure {
	margin: 1em 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	color:#fff /*KEY_color_white*/; font-size:1.5rem; font-weight:bold;
	border: 2px solid #4d342c /*KEY_color_dark_grey*/; background:#4d342c /*KEY_color_dark_grey*/; 
	transition: all 0.5s ease; }

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	color:#4d342c /*KEY_color_dark_grey*/; background:#fff /*KEY_color_white*/; }

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	color:#fff /*KEY_color_white*/; font-size:1.5rem; font-weight:bold;
	border: 2px solid #4d342c /*KEY_color_dark_grey*/; background:#4d342c /*KEY_color_dark_grey*/; 
	transition: all 0.5s ease; }

input[type="text"],
input[type="email"],
input[type="confirm_email"], /*CUSTOM: included "confirm_email" field */
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea{
	color:#4d342c /*KEY_color_dark_grey*/; font-weight:bold;
	padding:3px; background:#f7efde /*KEY_color_lightest_grey*/;
	border:0px solid #ccc /*KEY_color_mid_grey-C*/; border-radius:0; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="confirm_email"]:focus, /*CUSTOM: included "confirm_email" field */
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus{
	color:#4d342c /*KEY_color_dark_grey*/; }

select {
    color: #4d342c /*KEY_color_dark_grey*/;
    font-weight: bold;
    border: 2px solid #4d342c /*KEY_color_dark_grey*/;
    background: rgba(0,0,0,0); }
option {
    font-weight: bold;
    background: #f0e0c0 /*KEY_color_lighter_grey*/; }
textarea{ width:100%; }

/** CUSTOM *********************************************************************************************
 * Lightbox
 * Recommend: put Lightbox CSS before Contact Form CSS, because CF7 may override lightbox CSS
 */
.lightbox{ position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:999; display:table; 
	background: rgba(255,255,255,0.7); }
.lightbox_close{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }
.lightbox .content_container{ display:table-cell; vertical-align:middle; text-align:center; }

.lightbox .content_container .content_block{ position:relative; display:inline-block; 
	text-align:left; margin:1rem; padding:1rem 1rem 0; border:1px solid #bbb /*KEY_color_mid_grey-B*/; 
	box-shadow:0 0 3rem rgba(0,0,0,0.3); background:#f7f7f7 /*KEY_color_light_grey*/; }
.lightbox .content_container .content_block h2{ margin:0; }

.lightbox .content_container .content_block .close_button{ 
	position:absolute; top:1rem; right:1rem; cursor:pointer; }
.lightbox .content_container .content_block .close_button::after{ 
	position:absolute; top:0; right:0; content:"\2716"; font-size:1.5rem; }

/** CUSTOM *********************************************************************************************
 * Contact form - CF7
 * Lightbox CSS must be placed before, because 'normal' overrides it
 */
/***** normal Contact Form 7 *****/
#cf7 .cf7_title{ position:relative; top:3px; left:1rem; display:inline-block; z-index:1; 
	margin:0; padding:0 0.5rem; font-size:0.85rem; color:#4d342c /*KEY_color_dark_grey*/; 
	background:#f0e0c0 /*KEY_color_lighter_grey*/; }
#cf7 .cf7_field, #cf7 .cf7_submit{ margin:0; }
#cf7 .cf7_field input[type="text"], 
#cf7 .cf7_field input[type="email"], 
#cf7 .cf7_field input[type="tel"], 
#cf7 .cf7_field input[type="date"], 
#cf7 .cf7_field input[type="confirm_email"], 
#cf7 .cf7_field textarea, #cf7 .cf7_field select {
	width:100%; min-width:100%; max-width:100%; padding:0.3rem 0.6rem; color:#444 /*KEY_color_mid_text*/; 
	border:1px solid #4d342c /*KEY_color_dark_grey*/; border-radius: 3px; 
	background:#f0e0c0 /*KEY_color_lighter_grey*/; }
#cf7 .cf7_field textarea{ height:9rem; min-height:2rem; }
#cf7 .cf7_field.cf7_multiple_choice > span::after{ position:absolute; right:0.5rem; top:-0.4rem; 
	content:">"; font-size:1.2rem; transform:rotate(90deg) scaleX(0.4); }
#cf7 .cf7_field select{ cursor:pointer; padding:0.25rem 0.3rem; 
	-webkit-appearance:none; /* Safari and Chrome */
	-moz-appearance:none; /* Firefox */
	appearance:none;}
#cf7 .cf7_submit input[type="submit"] { width:100%; margin:1rem 0 0 0; cursor:pointer; }

/***** rating stars *****/
#cf7 .cf7_rating .rating{ margin-top:1rem; }

/** CUSTOM *********************************************************************************************
 * Custom colored button: https://www.bestcssbuttongenerator.com/#/15
 * upute - ako koristim 'facebook' template:
 * sve u vrhu kôda (do display: inline-block;) kopirati u prvi dio dolje
 * sve uz :hover kopirati u drugi dio dolje
 * ostalo, uz :active ne koristim ovdje
 */
body input.custom_button[type="button"], body .custom_button input[type="button"],
body input.custom_button[type="submit"], body .custom_button input[type="submit"],
body a.custom_button, body .custom_button a{
	display:inline-block; margin:0; width:100%; padding:0.5rem;
	color: white; font-size: 1rem; font-weight: 600; cursor:pointer; text-decoration:none;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);

	-moz-box-shadow:inset 0px 1px 0px 0px #e2c0c9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #e2c0c9;
	box-shadow:inset 0px 1px 0px 0px #e2c0c9;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c10235), color-stop(1, #7d1229));
	background:-moz-linear-gradient(top, #c10235 5%, #7d1229 100%);
	background:-webkit-linear-gradient(top, #c10235 5%, #7d1229 100%);
	background:-o-linear-gradient(top, #c10235 5%, #7d1229 100%);
	background:-ms-linear-gradient(top, #c10235 5%, #7d1229 100%);
	background:linear-gradient(to bottom, #c10235 5%, #7d1229 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c10235', endColorstr='#7d1229',GradientType=0);
	background-color:#c10235;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #7d1229; }
body input.custom_button[type="button"]:hover, body .custom_button input[type="button"]:hover,
body input.custom_button[type="submit"]:hover, body .custom_button input[type="submit"]:hover,
body a.custom_button:hover, body .custom_button a:hover{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7d1229), color-stop(1, #c10235));
	background:-moz-linear-gradient(top, #7d1229 5%, #c10235 100%);
	background:-webkit-linear-gradient(top, #7d1229 5%, #c10235 100%);
	background:-o-linear-gradient(top, #7d1229 5%, #c10235 100%);
	background:-ms-linear-gradient(top, #7d1229 5%, #c10235 100%);
	background:linear-gradient(to bottom, #7d1229 5%, #c10235 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d1229', endColorstr='#c10235',GradientType=0);
	background-color:#7d1229; }
/******************************************************************************************************/

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
/** CUSTOM *********************************************************************************************
 * Links colors
 */
a, a:visited, a:hover, a:focus, a:active,
a:focus, a:hover, a:active{
	outline:0; color:#4d342c /*KEY_color_dark_grey*/; }
/* removed code ****************************************************************************************
a{ color: royalblue; }
a:visited{ color:purple; }
a:hover, a:focus, a:active{ color:midnightblue; }
a:focus{ outline:thin dotted; }
a:hover, a:active{ outline:0; }
*******************************************************************************************************/

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/*.main-navigation{} /*CUSTOM: removed this line */

.main-navigation ul{ list-style:none; margin:0; padding-left:0; }
.main-navigation ul ul{	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	/*float:left;*/ position:absolute; top:100%; /*left:-999em;*/ z-index:99999; }
/*.main-navigation ul ul ul{ left:-999em; top:0; } /*CUSTOM: removed this line */

/*.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {left:100%;} /*CUSTOM: removed this line */

/*.main-navigation ul ul a{ width:200px; } /*CUSTOM: removed this line */

/*.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {left:auto;} /*CUSTOM: removed this line */

.main-navigation li{ float:left; position:relative; }

.main-navigation a{	text-decoration:none; }

/** CUSTOM *********************************************************************************************
 * Header customization; doesn't include Navigation Menu customization
 *
 * In file 'header.php' classes 'one_row_header' or 'two_row_header' can be added to the Header
 * The following code styles those classes
 */
.site-header{ width:100%; background-color:#fff /*KEY_color_white*/; }
.site-header .site-branding{ height:100%; padding-top:0.55rem; padding-bottom:0.55rem; text-align:center; }
.site-header .site-branding img{ height:100%; width:auto; }
.site-header .site-branding a.custom-logo-link{ height:100%; }

@media only screen and (max-width: 800px) {
	.site-header{ position:unset; height:unset; }
	.site-header .site-branding{ /*float:left; padding-left:2rem;*/
		height:auto; max-height:100%; /*max-width:calc(100% - 6rem - 35px);*/ }
	/* on mobile: disable main logo scaling */
	.site-header .site-branding img{ max-height:3.45rem /*KEY_navigation_bar_height-mobi*/; }
	.site-header .main-navigation{ position:absolute; right:0; height:100%; width:100%; } }
@media only screen and (min-width: 801px) {
	.site-header{ z-index:99999; height:6.5rem /*KEY_navigation_bar_height*/;
		position: -webkit-sticky; /*Safari*/
		position:sticky; }
	.site-header.one_row_header{ top:0; }
	.site-header.one_row_header .site-branding{ text-align:left; padding:1rem; }
	.site-header.one_row_header .main-navigation{ float:right; height:100%; }
	.site-header.two_row_header{ text-align:center; top:-6rem /*KEY_navigation_bar_height-top*/; }
	.site-header.two_row_header .site-branding{ height:6rem /*KEY_navigation_bar_height-top*/; }
	.site-header.two_row_header .main-navigation{ display:inline-block; height:3.5rem /*KEY_navigation_bar_height-bottom*/; } }

/** CUSTOM *********************************************************************************************
 * Header (navigation panel) responsiveness on scroll to top
 */
header.site-header, .site-branding img {
	-webkit-transition: all 0.5s; 
	-moz-transition: all 0.5s; 
	-ms-transition: all 0.5s; 
	-o-transition: all 0.5s; 
	transition: all 0.5s; }
@media only screen and (min-width: 801px) {
	header.site-header.one_row_header.small-navbar{ height:5rem /*KEY_navigation_bar_height-small*/; 
		/* following line prevents window from twitching, while scrolling for small steps */
		margin-bottom:calc(6.5rem - 5rem) /*KEY_navigation_bar_height - KEY_navigation_bar_height-small*/;
		box-shadow:0 4px 4px rgba(0,0,0,0.15); } }

/** CUSTOM *********************************************************************************************
 * Navigation Menu is separated in following DIV elements 
 * (used to referece elements with CSS):
 *
 *	<nav .main-navigation>
 *		<div>
 *			<ul .menu .nav-menu>
 *				<li .menu-item>
 *				<li .menu-item .current-menu-item>
 *				<li .menu-item .menu-item-has-children>
 *					<ul .sub-menu>
 *						<li .menu-item>
 *						<li .menu-item .menu-item-has-children>
 *							<ul .sub-menu>
 *								...
 */
/* Style for displaying sub-menu on hover/click */
.main-navigation ul li ul{ display:none; }
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {display:block;}

/* Style navigation menu size & position */
.main-navigation li{ padding: 0 1rem; }
@media only screen and (max-width: 800px) {
	.main-navigation{ z-index:99999; }
	.main-navigation ul ul{ width:100%; position:relative; }
	.main-navigation ul li{ width:100%; text-align:right; font-size:1.2rem; }
	.main-navigation li a{ padding: 0.4rem 3rem; width:100%;
		float:right; /*CUSTOM: align all navigation links to the right */ } }
@media only screen and (min-width: 801px) {
	.main-navigation ul ul{ min-width:250px; }
	.main-navigation ul ul li{ width:100%; text-align:left; }
	.main-navigation ul li > ul {   left:0;          } /* desktop: 1st sub-menu is beneath parent link */
	.main-navigation ul ul li > ul {left:100%; top:0;} /* desktop: 2nd sub-menu is to the right of the parent link */
	/* This is moved from "Menus" (this) section */
	.menu-toggle{ display:none; }
	.main-navigation > div,
	.main-navigation > div > ul.nav-menu{ height:100%; } }

/* Vertically align navigation menu links */
.main-navigation li{ display:table; height:100%; }
.main-navigation a{	display:table-cell; vertical-align:middle; }

/* Style link with children */
.main-navigation ul li.menu-item-has-children > a::after {content:'⮟'; margin-left:5px; float:right; }

/** CUSTOM *********************************************************************************************
 * Navigation Menu colors customization; doesn't include Header customization
 */
/* Style navigation menu colors */
.main-navigation a{ color:#7d122a /*KEY_color_highlight1_dark*/; }
.main-navigation ul ul{ background:#fff /*KEY_color_white*/; }
@media only screen and (max-width: 800px) {
	.main-navigation ul li{ background:#F7F7F7; }
	.main-navigation ul ul li{ background:#fff /*KEY_color_white*/; } }

/* Style for currently active navigation link */
.current-menu-item, .current_page_item, .current_page_ancestor{
	/*background-color:#e2c0c9 /*KEY_color_highlight1_faded*/; 
	/*border-bottom:3px solid #7d122a /*KEY_color_highlight1_dark*/; }
.current-menu-item > a, .current_page_item a, .current_page_ancestor > a{
	color:#e8e2d5 !important; }
    
/* Specific for navigation menu on: Antony-Store.com */
ul#primary-menu li,
.sidenav .dropdown-collection .dropdown-content ul{ list-style-type:none; }
ul#primary-menu, 
.sidenav .dropdown-collection .dropdown-content ul{ padding-left:0; margin-left:0; margin-bottom:0; }
/*.sidenav .dropdown-collection ul{ margin-bottom:0; }
.sidenav .dropdown-collection ul li a{ padding-left:4px; }*/

/* Style for hovered navigation menus; but not currently active link */
@media screen and (min-width:801px){
	.main-navigation a:hover, .main-navigation a:active{
		border-bottom:3px solid #7d122a /*KEY_color_highlight1_dark*/;
		border-top:3px solid rgba(0,0,0,0); }
	.current-menu-item > a:hover, .current_page_item > a:hover, .current_page_ancestor > a:hover{ 
		border:0; } }

/** CUSTOM *********************************************************************************************
 * Icon on mobile Navigation Menu: styling & animation (3bars <-> X)
 */
.menu-toggle{ position:relative; left:calc(100% - 6rem - 35px); height:100%;
	padding: 0 3rem; background:none; border:none; outline:none;}
.menu-toggle-bar1, .menu-toggle-bar2, .menu-toggle-bar3{
	width:35px; height:4px; background-color:#4d342c /*KEY_color_dark_grey*/; margin: 7px 0; 
	border-radius:2px; transition:0.4s; }
.change .menu-toggle-bar1{
	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
	transform: rotate(-45deg) translate(-9px, 6px);}
.change .menu-toggle-bar2{ opacity:0; }
.change .menu-toggle-bar3{
	-webkit-transform: rotate(45deg) translate(-9px, -8px);
	transform: rotate(45deg) translate(-9px, -8px);}

/** CUSTOM *********************************************************************************************
 * Navigation Menu Responsive behavior 
 * Main responsive code is in "Responsive design" section
 *
 * When navigation is open on mobile, then ".toggled" is added to: 
 * <nav id="site-navigation" class="main-navigation">
 */
@media only screen and (max-width: 800px) {
	.main-navigation > div{ position:relative; left:100vw;
		-webkit-transition: all 0.5s; 
		-moz-transition: all 0.5s; 
		-ms-transition: all 0.5s; 
		-o-transition: all 0.5s; 
		transition: all 0.5s; }
	.main-navigation.toggled > div {left:0;} }
/******************************************************************************************************/

.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%; }

/** CUSTOM *********************************************************************************************
 * Style "previous" & "next" buttons on blog posts
 * This code must be below the above code, because it overrides it
 */
.posts-navigation .nav-next, .posts-navigation .nav-previous,
.post-navigation .nav-next, .post-navigation .nav-previous {
	margin: 0.5rem 0;
	padding: 0 0.5rem; }
.blog_single_post .post-navigation .nav-next, 
.blog_single_post .post-navigation .nav-previous {
	float: unset;
	width: 100%;
	text-align: center; }
.posts-navigation a, .post-navigation a{ text-decoration: none; }

@media screen and (max-width: 800px){
.posts-navigation .nav-next, .posts-navigation .nav-previous,
.post-navigation .nav-next, .post-navigation .nav-previous {
	width: 100%;
	text-align: center; } }
/******************************************************************************************************/

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee /*KEY_color_mid_grey-E*/;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	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. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus{ outline:0; }

/*--------------------------------------------------------------
# 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; }

/** CUSTOM *********************************************************************************************
 * Alignment
 */
/* Horizontal */
.align-left{    text-align:left;    }
.align-center{  text-align:center;  }
.align-right{   text-align:right;   }
.align-justify{ text-align:justify; }

/* Vertical */
[class*="valign"][class*="-top"] {    vertical-align:top;    justify-content:flex-start; }
[class*="valign"][class*="-middle"] { vertical-align:middle; justify-content:center;     }
[class*="valign"][class*="-bottom"] { vertical-align:bottom; justify-content:flex-end;   }

/** Vertical
 * use "display:flex;" to vertically align an object
 * use this on parent
 */
[class*="valign_flex-"] { display:flex; flex-direction:column; height:100%; }
[class*="flex"] > [class*="valign_flex-"] { height:unset; }	/* Don't set 'height:100%;' for children of FlexBox */

/** Vertical
 * use "display:table;" to vertically align an object
 * use this on parent
 */
[class*="valign_table-"] { display:table; }
[class*="valign_table-"] > *{ display:table-cell; }

/** CUSTOM *********************************************************************************************
 * Top & Bottom properties
 */
/***** Top *****/
[class*="top_head-big"] {   top:6.5rem /*KEY_navigation_bar_height*/; }
[class*="top_head-small"] { top:5rem /*KEY_navigation_bar_height-small*/; }
[class*="top_0rem"] { top:0;    }
[class*="top_1rem"] { top:1rem; }
[class*="top_2rem"] { top:2rem; }
[class*="top_3rem"] { top:3rem; }
[class*="top_4rem"] { top:4rem; }
[class*="top_5rem"] { top:5rem; }
[class*="top_6rem"] { top:6rem; }
[class*="top_7rem"] { top:7rem; }
[class*="top_8rem"] { top:8rem; }
[class*="top_9rem"] { top:9rem; }
[class*="top_10rem"]{ top:10rem;}
/***** Bottom *****/
[class*="bottom_0rem"] { bottom:0;    }
[class*="bottom_1rem"] { bottom:1rem; }
[class*="bottom_2rem"] { bottom:2rem; }
[class*="bottom_3rem"] { bottom:3rem; }
[class*="bottom_4rem"] { bottom:4rem; }
[class*="bottom_5rem"] { bottom:5rem; }
[class*="bottom_6rem"] { bottom:6rem; }
[class*="bottom_7rem"] { bottom:7rem; }
[class*="bottom_8rem"] { bottom:8rem; }
[class*="bottom_9rem"] { bottom:9rem; }
[class*="bottom_10rem"]{ bottom:10rem;}
/***** Responsiveness *****/
@media only screen and (max-width:1200px){
	[class*="-top_"   ][class*="rd_1200"],
	[class*="-bottom_"][class*="rd_1200"] { 
		top:unset; } }
@media only screen and (max-width:800px ){
	[class*="-top_"   ][class*="rd_800" ],
	[class*="-bottom_"][class*="rd_800" ] { 
		top:unset; } }

/** CUSTOM *********************************************************************************************
 * Position (sticky, fixed, etc.)
 */
/***** Sticky *****/
[class*="position_sticky"] { position:sticky; }
/***** Fixed *****/
[class*="position_fixed"] { position:fixed; }
/***** Responsiveness *****/
@media only screen and (max-width:1200px){
	[class*="-position_"][class*="rd_1200"] { position:unset; } }
@media only screen and (max-width:800px ){
	[class*="-position_"][class*="rd_800" ] { position:unset; } }
/******************************************************************************************************/

/*--------------------------------------------------------------
# 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; table-layout:fixed; }

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear:both; }

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget{ margin: 0 0 1.5em; }	/* Make sure select elements fit in widgets. */
.widget select{ max-width:100%; }

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky{ display:block; }
.post, .page{ margin:0; } /*CUSTOM: removed space at the bottom of the page */ 
.updated:not(.published){ display:none; }
.page-content, .entry-content, .entry-summary{ margin:0; } /*CUSTOM: removed space at the top of the page */
.page-links{ clear:both; margin: 0 0 1.5em; }

/*--------------------------------------------------------------
## 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,
.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%; }

/* Make sure logo link wraps around logo image. */
.custom-logo-link{ display:inline-block; }

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption{ margin-bottom:1.5em; max-width:100%; }
.wp-caption img[class*="wp-image-"] { display:block;	margin-left:auto; margin-right:auto; }
.wp-caption .wp-caption-text{ margin:0.8075em 0; }
.wp-caption-text{ text-align:center; }

/*--------------------------------------------------------------
## 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; }





/** CUSTOM *********************************************************************************************
 * Responsive design basics, Responsive columns
 */
.rd_main{ margin:0 auto; max-width:1200px; }

/** FlexBox instructions: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * FlexBox is used to make a row with multiple columns.
 * Add: class="rd_all-width_100pc" to each child -> make children same width.
 * Add: class="flex_grow_1" to any child -> extend children to 100% width of parent.
 *
 * WARNING: Don't combine with classes that set "display:inline-block;"
 */
[class*="flex_row"] { display:flex; flex-direction:row; }
[class*="flex_col"] { display:flex; flex-direction:column; }
/***** Responsiveness *****/
@media only screen and (max-width:1200px){
	[class*="-flex_row"][class*="rd_1200"] { display:unset; } }
@media only screen and (max-width:800px ){
	[class*="-flex_row"][class*="rd_800" ] { display:unset; } }
/**  .rd_1200-flex_row			@ screen>1200px - display:flex
 *   .rd_800-flex_row			@ screen>800px - display:flex
 *   .rd_all-flex_row			@ all screen sizes - display:flex
 *   .rd_all-flex_col			@ all screen sizes - display:flex; flex-direction:col
 */
.flex_justify_center{ justify-content:center; }		/* Center the FlexBox content */ 
.flex_wrap{ flex-wrap:wrap; }						/* Wrap the FlexBox content */
.flex_grow_1{ flex-grow:1; }
.flex_grow_2{ flex-grow:2; }
.flex_grow_3{ flex-grow:3; }
.flex_grow_4{ flex-grow:4; }
.flex_grow_5{ flex-grow:5; }
.flex_grow_6{ flex-grow:6; }

/** Margin between columns
 * These classes are added to parent element, that holds several children columns
 */
[class*="children_margin_h_05"] > *{ margin-left:0.5rem; margin-right:0.5rem; }
[class*="children_margin_h_1" ] > *{ margin-left:1rem;   margin-right:1rem;   }
[class*="children_margin_h_2" ] > *{ margin-left:2rem;   margin-right:2rem;   }
[class*="children_margin_h_"] > *:first-child{ margin-left:0; }
[class*="children_margin_h_"] > *:last-child{  margin-right:0; }
/***** Responsiveness *****/
@media only screen and (max-width:1200px){
	[class*="rd_1200-children_margin_h_"] > *{ margin-left:unset; margin-right:unset; } }
@media only screen and (max-width:800px){
	[class*="rd_800-children_margin_h_" ] > *{ margin-left:unset; margin-right:unset; } }
/**		.rd_1200-children_margin_h_1		@ screen>1200px - margin between children columns is 1rem
 *		.rd_800-children_margin_h_2		 	@ screen>800px - margin between children columns is 2rem
 *		.rd_all-children_margin_h_05		@ all screen sizes - margin between columns is 0.5rem
 */

/** Responsive column width / height (without FlexBox):
 * .rd_1200-width_50pc   @ screen>1200px - width:50%
 * .rd_800-width_50px    @ screen>800px - width:50px
 * .rd_all-width_50pc    @ all screen sizes - width:50%
 */
[class*="-width_"] { display:inline-block; }
/***** Percent width *****/
[class*="-width_100pc"]{width:100%;}
[class*="-width_90pc"] {width:90%;}
[class*="-width_80pc"] {width:80%;}
[class*="-width_75pc"] {width:75%;}
[class*="-width_66pc"] {width:66.66%;}
[class*="-width_60pc"] {width:60%;}
[class*="-width_55pc"] {width:55%;}
[class*="-width_50pc"] {width:50%;}
[class*="-width_45pc"] {width:45%;}
[class*="-width_40pc"] {width:40%;}
[class*="-width_33pc"] {width:33.33%;}
[class*="-width_30pc"] {width:30%;}
[class*="-width_25pc"] {width:25%;}
[class*="-width_20pc"] {width:20%;}
[class*="-width_10pc"] {width:10%;}
/***** Pixel width *****/
[class*="-width_1200px"] {width:1200px;}
/***** Percent height *****/
[class*="-height_100pc"]{height:100%;}
[class*="-height_75pc"] {height:75%;}
[class*="-height_66pc"] {height:66.66%;}
[class*="-height_50pc"] {height:50%;}
[class*="-height_33pc"] {height:33.33%;}
[class*="-height_25pc"] {height:25%;}
/***** Responsiveness *****/
@media only screen and (max-width:1200px){
	[class*="-width_"  ][class*="rd_1200"] { display:block; width:100%;  }
	[class*="-height_" ][class*="rd_1200"] { display:block; height:100%; } }
@media only screen and (max-width:800px ){
	[class*="-width_"  ][class*="rd_800" ] { display:block; width:100%;  }
	[class*="-height_" ][class*="rd_800" ] { display:block; height:100%; } }

/** Other responsive stuff
 */
@media only screen and (max-width:800px){
	.rd_desktop{ display:none !important; } }
	
@media only screen and (min-width:801px){ 
  .rd_mobile{ display:none !important; } }
	
@media only screen and (max-width:1200px) and (min-width:801px){}

@media screen and (max-width:1200px){
	.rd_main{ margin:0 1rem; } }

@media screen and (min-width:1201px){}

/*******************************************************************************************************
 * CUSTOM: Site Content container size
 */
.site-content{ width:100%; }

/*******************************************************************************************************
 * CUSTOM: <img> as background, instead ordinary CSS background
 * WARNING: parent must have class ".has_background_img"
 */
.has_background_img{ position:relative; }
.has_background_img img.background_img{ 
	position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; 
	object-fit:cover; object-position:center center; }

/*******************************************************************************************************
 * CUSTOM: SVG border on the top/bottom of the <div>
 *
 * SVG border:
 * .container_border-top-padding_1-white_border   	@ white border on top of the element
 * .container_border-bottom-padding_1-blue_border	@ blue border on the bottom of the element
 *
 * .container_border-top-white_border   			@ white border on top, but no padding is set 
 *													  (content will overlap the SVG border)
 */
[class*="container_border-"]{ position:relative; }
[class*="container_border-top"]:before, [class*="container_border-bottom"]:after{ 
	content:""; position:absolute; left:0; z-index:-1;
	width:calc(100vw + 1rem); height:calc((100vw * 143 / 2560) + 0.1rem) /*KEY_border_svg_height_width_ratio*/; min-height:67px /*KEY_border_svg_min_height*/; }
[class*="container_border-top"]:before{ top:0;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg); }
[class*="container_border-bottom"]:after{ bottom:0; }

[class*="-blue_border"]:before,  [class*="-blue_border"]:after{
	background:url(https://apartmentrosa.com/wp-content/uploads/images/separator/wave-blue.svg)  no-repeat center /*KEY_border_svg_url_1*/;
	background-size:cover; }
[class*="-white_border"]:before, [class*="-white_border"]:after{
	background:url(https://apartmentrosa.com/wp-content/uploads/images/separator/wave-light.svg) no-repeat center /*KEY_border_svg_url_2*/;
	background-size:cover; }

	body [class*="container_border-top-padding_1"]{    padding-top:   calc((100vw * 143 / 2560) + 1rem); }
	body [class*="container_border-top-padding_2"]{    padding-top:   calc((100vw * 143 / 2560) + 2rem); }
	body [class*="container_border-top-padding_3"]{    padding-top:   calc((100vw * 143 / 2560) + 3rem); }
	body [class*="container_border-top-padding_4"]{    padding-top:   calc((100vw * 143 / 2560) + 4rem); }
	body [class*="container_border-top-padding_5"]{    padding-top:   calc((100vw * 143 / 2560) + 5rem); }
	body [class*="container_border-top-padding_6"]{    padding-top:   calc((100vw * 143 / 2560) + 6rem); }
	body [class*="container_border-top-padding_7"]{    padding-top:   calc((100vw * 143 / 2560) + 7rem); }
	body [class*="container_border-top-padding_8"]{    padding-top:   calc((100vw * 143 / 2560) + 8rem); }
	body [class*="container_border-top-padding_9"]{    padding-top:   calc((100vw * 143 / 2560) + 9rem); }
	body [class*="container_border-bottom-padding_1"]{ padding-bottom:calc((100vw * 143 / 2560) + 1rem); }
	body [class*="container_border-bottom-padding_2"]{ padding-bottom:calc((100vw * 143 / 2560) + 2rem); }
	body [class*="container_border-bottom-padding_3"]{ padding-bottom:calc((100vw * 143 / 2560) + 3rem); }
	body [class*="container_border-bottom-padding_4"]{ padding-bottom:calc((100vw * 143 / 2560) + 4rem); }
	body [class*="container_border-bottom-padding_5"]{ padding-bottom:calc((100vw * 143 / 2560) + 5rem); }
	body [class*="container_border-bottom-padding_6"]{ padding-bottom:calc((100vw * 143 / 2560) + 6rem); }
	body [class*="container_border-bottom-padding_7"]{ padding-bottom:calc((100vw * 143 / 2560) + 7rem); }
	body [class*="container_border-bottom-padding_8"]{ padding-bottom:calc((100vw * 143 / 2560) + 8rem); }
	body [class*="container_border-bottom-padding_9"]{ padding-bottom:calc((100vw * 143 / 2560) + 9rem); }
@media screen and (max-width: 800px){
	body [class*="container_border-top-padding_"]{     padding-top:   calc(67px + 1rem) /*KEY_border_svg_min_height*/; }
	body [class*="container_border-bottom-padding_"]{  padding-bottom:calc(67px + 1rem) /*KEY_border_svg_min_height*/; } }

/*******************************************************************************************************
 * CUSTOM: Copyright area
 */
.responsive-copyright-left, .responsive-copyright-right{
	display: inline-block;
	width: 50%;
	padding: 0 20px; }
.site-info a, .site-info p {display: inline;}
.responsive-copyright-right{
	text-align: right;
	float: right; }
.responsive-copyright-right a{
	color: #444 /*KEY_color_mid_text*/;
	text-decoration:none;
	font-size: 1.5rem;
	margin-right: 1rem; }

@media screen and (max-width: 800px){
	.responsive-copyright-left, .responsive-copyright-right{
		width: 100%;
		text-align: center;
		margin-bottom: 1rem; }
		/* on mobile: don't push site content down */
	.site-content{ margin-top:0 /*KEY_navigation_bar_height*/; } }

.button-socicon [class^="socicon-"], .button-socicon [class*=" socicon-"] {vertical-align: middle;}
/*******************************************************************************************************
 * CUSTOM: "Socicon" je font za social icons: http://www.socicon.com/how.php
 */
@font-face {
	font-family: 'Socicon';
	src:url('../eot/socicon397f.eot?87visu');
	src:url('../eot/socicon397f.eot?87visu#iefix') format('embedded-opentype'),
		url('../woff2/socicon397f.woff2?87visu') format('woff2'),
		url('../ttf/socicon397f.ttf?87visu') format('truetype'),
		url('../woff/socicon397f.woff?87visu') format('woff'),
		url('../svg/socicon397f.svg?87visu#Socicon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;}

[class^="socicon-"], [class*=" socicon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Socicon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;}

.socicon-facebook:before{content: "\e028";}
.socicon-facebook{ background:#3b5998; }
.socicon-google:before{content: "\e034";}
.socicon-googleplus:before{content: "\e038";}
.socicon-instagram:before{content: "\e044";}
.socicon-instagram{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fbb040+0,f69c44+5,ea654e+19,e13d56+31,dc255a+41,da1c5c+47,a01f57+60,692152+73,41234f+85,29254d+94,20254c+100 */
	background: #fbb040; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #fbb040 0%, #f69c44 5%, #ea654e 19%, #e13d56 31%, #dc255a 41%, #da1c5c 47%, #a01f57 60%, #692152 73%, #41234f 85%, #29254d 94%, #20254c 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #fbb040 0%,#f69c44 5%,#ea654e 19%,#e13d56 31%,#dc255a 41%,#da1c5c 47%,#a01f57 60%,#692152 73%,#41234f 85%,#29254d 94%,#20254c 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #fbb040 0%,#f69c44 5%,#ea654e 19%,#e13d56 31%,#dc255a 41%,#da1c5c 47%,#a01f57 60%,#692152 73%,#41234f 85%,#29254d 94%,#20254c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbb040', endColorstr='#20254c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.socicon-mail:before{content: "\e050";}
.socicon-pinterest:before{content: "\e063";}
.socicon-youtube:before{content: "\e0a5";}
.socicon-youtube{ background:#ff0000; }
.socicon-linkedin:before{content: "\e04c";}
.socicon-linkedin{ background:#0077B5; }

.no_bg-dark a[class*="socicon-"] { background:none; color:#4d342c /*KEY_color_dark_grey*/; }
.no_bg-light a[class*="socicon-"] { background:none; color:#b89d7a /*KEY_color_light_grey*/; }
.social_inline a[class*="socicon-"]::before { padding-top:1rem; vertical-align:middle; }

.social_icons-follow{ min-width:100px /*KEY_social_icon_count-follow*/; }

.button_facebook_color, .button_facebook_color a::before, a.button_facebook_color::before{ color:white; background:#365899; }
.button_google_color, .button_google_color a::before, a.button_google_color::before{ color:white; background:#DD4B39; }
body a.button-socicon, body a.socicon{ text-decoration:none; color:white; font-size:1.5rem; padding:0.5rem; }
.round a.button-socicon, .round a.socicon{ border-radius:50%; }
/*******************************************************************************************************
 * CUSTOM: "Socicon" font koristim i za contact icons
 */
.socicon_custom_mail:before{content: "\e050";}
.socicon_custom_viber:before{content: "\e091";}
.socicon_custom_whatsapp:before{content: "\e099";}
.socicon_custom_mail:before, .socicon_custom_viber:before, .socicon_custom_whatsapp:before{
	margin:0 0.3rem;
	font-family: 'Socicon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1; }
/*******************************************************************************************************
 * CUSTOM: Social Review buttons
 */
.soc_btn_inline{ display:inline-block; vertical-align:bottom; margin-left:0.1rem; }
.soc_btn_table{ display:table; width:42px; height:42px; }
.soc_btn_table > a{ display:table-cell; vertical-align:middle; text-align:center; font-size:1.5rem; }
.social_review_button_line .inline_button{ width:auto; }
/*******************************************************************************************************
 * CUSTOM: Social Share buttons (added by Vedran)
 */
.social_share_buttons{ width:100%; text-align:center; }
.social_share_buttons .center_content{ display:inline-block; width:auto; }
.social_share_buttons .center_content p{ margin-bottom:0.1rem; }
.social_share_buttons .center_content .separator{ width:calc(100% - 0.8rem); height:1px; margin:0.4rem auto; background:#777; }
/*******************************************************************************************************
 * CUSTOM: Social Share buttons (copied from https://sharingbuttons.io )
 */
body.xl .btn, .btn{ border-radius:0; }
.twitter-share-button, .pinterest-share-button a{ vertical-align:top; border-radius:0; }

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff /*KEY_color_white*/;
  margin: 0.1rem;
}

.resp-sharing-button {
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.1em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter { background-color: #55acee}
.resp-sharing-button--twitter:hover { background-color: #2795e9}
.resp-sharing-button--pinterest { background-color: #bd081c}
.resp-sharing-button--pinterest:hover { background-color: #8c0615}
.resp-sharing-button--facebook { background-color: #3b5998}
.resp-sharing-button--facebook:hover { background-color: #2d4373}
.resp-sharing-button--tumblr { background-color: #35465C}
.resp-sharing-button--tumblr:hover { background-color: #222d3c}
.resp-sharing-button--reddit { background-color: #5f99cf}
.resp-sharing-button--reddit:hover { background-color: #3a80c1}
.resp-sharing-button--google { background-color: #dd4b39}
.resp-sharing-button--google:hover { background-color: #c23321}
.resp-sharing-button--linkedin { background-color: #0077b5}
.resp-sharing-button--linkedin:hover { background-color: #046293}
.resp-sharing-button--email { background-color: #777}
.resp-sharing-button--email:hover { background-color: #5e5e5e}
.resp-sharing-button--xing { background-color: #1a7576}
.resp-sharing-button--xing:hover { background-color: #114c4c}
.resp-sharing-button--whatsapp { background-color: #25D366}
.resp-sharing-button--whatsapp:hover { background-color: #1da851}
.resp-sharing-button--hackernews { background-color: #FF6600}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus { background-color: #FB6200 }
.resp-sharing-button--vk { background-color: #507299}
.resp-sharing-button--vk:hover { background-color: #43648c}
.resp-sharing-button--facebook {
  background-color: #3b5998; 
  border-color: #3b5998;}
.resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;}
.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;}
.resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;}
.resp-sharing-button--google {
  background-color: #dd4b39;
  border-color: #dd4b39;}
.resp-sharing-button--google:hover, .resp-sharing-button--google:active {
  background-color: #c23321;
  border-color: #c23321;}
.resp-sharing-button--tumblr {
  background-color: #35465C;
  border-color: #35465C;}
.resp-sharing-button--tumblr:hover, .resp-sharing-button--tumblr:active {
  background-color: #222d3c;
  border-color: #222d3c;}
.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;}
.resp-sharing-button--email:hover, .resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;}
.resp-sharing-button--pinterest {
  background-color: #bd081c;
  border-color: #bd081c;}
.resp-sharing-button--pinterest:hover, .resp-sharing-button--pinterest:active {
  background-color: #8c0615;
  border-color: #8c0615;}

/*******************************************************************************************************
 * CUSTOM: Contact buttons in the footer
 */
.contact_line .contact-button{ text-decoration:none; padding:0 0.5rem; }
@media only screen and (max-width:800px) {
	footer .contact_line .contact-button{ display:block; margin:0.5rem 0; }
}

/*******************************************************************************************************
 * CUSTOM: Page title styling
 */
.page-title{
	font-family: 'times new roman', times;
	font-weight: 400;
	margin: 0 0 1rem 0;}
.page-header{margin: 3rem 0;}
.archive-description{text-align: justify;}

/*******************************************************************************************************
 * CUSTOM: Footer always on bottom of the page
 */
html{height: 100%;}
body{
	position: relative;
	margin: 0;
	padding-bottom: 13rem /*KEY_footer_height*/;
	min-height: calc(100% - 6.5rem) /*KEY_navigation_bar_height*/;}
.site-footer{
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	padding:0;
	height:13rem /*KEY_footer_height*/; 
	background:#b89d7a /*KEY_color_light_grey*/; }
@media only screen and (max-width:800px) {
	body{ padding-bottom:33rem /*KEY_footer_height*/; }
	.site-footer{ height:33rem /*KEY_footer_height*/; } }
/*******************************************************************************************************
 * CUSTOM: Footer styling
 */
footer.site-footer{ color:#4d342c /*KEY_color_dark_grey*/; }
.footer_content{ height:7rem /*KEY_footer_height*/; margin:1rem auto 1rem; }
.footer_col{ float:left; margin:0 1rem 0; }
.footer_col[class*="social_icons"] { float:right; padding-top:3rem; }

footer .footer_logo .custom-logo, 
footer .footer_logo img{ 
	object-fit:contain; width:auto; max-height:7rem /*KEY_footer_height*/; }

ul.footer_col.sitemap{ list-style:none; text-align:center; padding:0; }
.footer_col.sitemap li{ display:block; }
.footer_col.sitemap a{ padding-top:0.3rem; color:#4d342c /*KEY_color_dark_grey*/; text-decoration:none; font-family:'Optit'; font-weight:bold; letter-spacing:0.5px; }
.footer_col.sitemap h3{ margin:1rem 0 0; font-size:1.2rem; }

footer .social_icons-follow{ text-align:center; padding:1.5rem 0 1rem; }
.footer_copyright{ text-align:center; margin:1rem; }
.footer_copyright a{ color:#4d342c /*KEY_color_dark_grey*/; }

@media only screen and (max-width:800px) {
	.footer_content{ margin-top:3rem; height:29rem /*KEY_footer_height*/; width:100%; }
	.footer_col[class*="social_icons"] { float:unset; padding-top:1rem; text-align:center; }
	.footer_col{ float:unset; } }
	 
/** CUSTOM *********************************************************************************************
 * Smooth scroll: https://css-tricks.com/snippets/jquery/smooth-scrolling/
 */
html{ scroll-behavior:smooth; }

/** CUSTOM *********************************************************************************************
 * Disable horizontal scrollbar: https://stackoverflow.com/questions/4192277/disable-horizontal-scroll-on-mobile-web
 * html{overflow-x:hidden;} - applied ONLY for mobile, because this disables {position:sticky;}
 */
body{ overflow-x:hidden; /*CUSTOM: disable horizontal scrollbar */ }
@media only screen and (max-width:800px) { html{overflow-x:hidden;} } /*CUSTOM: only on mobile */
body{ position:relative; /*CUSTOM: make sure that horizontal scrollbar is disabled on mobile */ }

/** CUSTOM *********************************************************************************************
 * Correct anchor targets (compensate the navigation bar height)
 * Usage example:
 *   <div id="example-target"></div>			add corrected target above the existing target
 *   <div id="example"></div>					existing anchor target
 */
[id*="-target"] { position:relative; top:-5rem /*KEY_navigation_bar_height-small*/; }

/** CUSTOM *********************************************************************************************
 * "No scroll" & "Hide"
 */
.no-scroll{ overflow:hidden; }
.hide{ display:none !important; }
/******************************************************************************************************/





/** CUSTOM *********************************************************************************************
 * Custom font
 */
@font-face {
	font-family: 'Optit';
	src:url('../ttf/optit.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;}

.optit{
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Optit' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;}
/******************************************************************************************************/





/** CUSTOM *********************************************************************************************
 * Navigation bar
 */

/* Icons in the navigation menu (always displayed) */
svg{ fill:#4d342c /*KEY_color_dark_grey*/; }

.header-top{ height:100%; }
.header-top > .header-row{ background:#b89d7a /*KEY_color_light_grey*/; }
.header-top > .header-row > .btn-sidenav{ 
	position: relative;
	padding:2.35rem 0; cursor:pointer; transition: all 0.5s ease;
	font-size:3rem; font-weight:bold; color:#4d342c /*KEY_color_dark_grey*/; }
.small-navbar .header-top > .header-row > .btn-sidenav{ padding:1.75rem 0; font-size:2.5rem; }
.header-top > .header-row > .btn-sidenav:nth-child(1), .sidenav:nth-child(1){ background:#B09571; }
.header-top > .header-row > .btn-sidenav:nth-child(2), .sidenav:nth-child(2){ background:#A88D68; }
.header-top > .header-row > .btn-sidenav:nth-child(3), .sidenav:nth-child(3){ background:#A18560; }
.header-top > .header-row > .btn-sidenav:nth-child(4), .sidenav:nth-child(4){ background:#997D59; }

.header-top > .header-row > .btn-sidenav{ width:25%; }
.header-top > .header-row{ width:50%; }
@media only screen and (max-width:800px ){
    .header-top > .header-row:first-child{ width:50%; }
    .header-top > .header-row:last-child{ width:50%; }
	.header-top > .header-row > .btn-sidenav,
	.small-navbar .header-top > .header-row > .btn-sidenav{ 
        padding:1.9rem 0; max-height:5rem; font-size:2rem; }
    #navButton_cart svg.icon{ padding-right: 1rem; }
    #navButton_cart .navButton-cart-count{ left: calc(50% + 0.2rem) !important; } }
		
#navButton_cart .navButton-cart-count{
	position:absolute; left:calc(50% + 1rem); top:calc(50% - 0.6rem);
	height:1.4rem; width:1.4rem; line-height:1.4rem;
	border-radius:50%; background:#4d342c /*KEY_color_dark_grey*/; }
#navButton_cart .navButton-cart-count p{
	margin:0; font-size:1rem; font-weight:bold; color:#b89d7a /*KEY_color_light_grey*/; }

		
		
/* The side navigation menu (opens when user clicks on the icon in the navigation bar) */
.sidenav {
	max-height: 0;
	/*height: 100%; /* 100% Full-height */
	width: 50%; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 1; /* Stay on top */
	/*top: 0; /* Stay at the top */
	right: 0;
	/*background-color: #88f; /* Black*/
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* CUSTOM */
.sidenav .content h2{ font-size:1.5rem; font-weight:bold; color:#4d342c /*KEY_color_dark_grey*/; margin-top:1.4rem; margin-bottom:0.4rem; }
.sidenav .content p{ color:#4d342c /*KEY_color_dark_grey*/; }
.sidenav .content table.currency_table td:first-child{ width:4rem; padding-top:0.5rem; }
.sidenav .content table.currency_table td:first-child svg.icon{ width:4rem; max-height:1.4rem; transition:0.3s; }
.sidenav .content table.currency_table td:not(:first-child){ padding-top:0.2rem; font-size:1rem; font-weight:bold; }
.sidenav .content table.currency_table td:nth-child(2){ width:3rem; }
.sidenav .content table.currency_table tr{ cursor:pointer; transition:0.3s; }
.sidenav .content table tr{ font-weight:bold; color:#4d342c /*KEY_color_dark_grey*/; }

.sidenav .content .product-search-filter-price .ui-state-default, 
.sidenav .content .product-search-filter-price .ui-state-focus, 
.sidenav .content .product-search-filter-price .ui-state-hover, 
.sidenav .content .product-search-filter-price .ui-widget-content .ui-state-default, 
.sidenav .content .product-search-filter-price .ui-widget-content .ui-state-focus, 
.sidenav .content .product-search-filter-price .ui-widget-content .ui-state-hover, 
.sidenav .content .product-search-filter-price .ui-widget-header, 
.sidenav .content .product-search-filter-price .ui-widget-header .ui-state-default, 
.sidenav .content .product-search-filter-price .ui-widget-header .ui-state-focus, 
.sidenav .content .product-search-filter-price .ui-widget-header .ui-state-hover {
	background: #4d342c /*KEY_color_dark_grey*/;
	color: #4d342c /*KEY_color_dark_grey*/;
}
.sidenav .content .product-search-filter-price .ui-widget-content{ 
	border: 1px solid #cfc4ae /*KEY_color_mid_grey*/;
	background: #cfc4ae /*KEY_color_mid_grey*/;
	color: #4d342c /*KEY_color_dark_grey*/;
}


.sidenav .content .filter { margin:3rem 0; }
.sidenav .content .term-name, 
.sidenav .content .cat-item {
	font-size: 1.2rem;
	font-weight: bold;
	color: #4d342c /*KEY_color_dark_grey*/;
}
.sidenav .content h3,
.sidenav .content .product-search-filter-price-heading,
.sidenav .content .product-search-filter-terms-heading, 
.sidenav .content .product-search-filter-category-heading {
	font-size:1.5rem; font-weight:bold; color:#4d342c /*KEY_color_dark_grey*/;
}
.sidenav .content .product-search-filter-price-slider span.slider-limit-min,
.sidenav .content .product-search-filter-price-slider span.slider-limit-max {
	padding: 0;
	opacity: 1;
	font-size: 1rem;
}
.sidenav .content .product-search-filter-search .product-search-filter-search-clear, 
.sidenav .content .product-search-filter-price .product-search-filter-price-clear,
.sidenav .content input[type="text"].product-search-filter-price-field {
	font-size: 1.2rem;
	color: #4d342c /*KEY_color_dark_grey*/;
	font-weight: bold;
}
.sidenav .content input[type="text"].product-search-filter-price-field {
	width: 40%;
	text-align: center;
	background: #cfc4ae /*KEY_color_mid_grey*/;
	border: 0;
	border-bottom: 2px solid #4d342c /*KEY_color_dark_grey*/ !important;
	border-radius:0;
}
.sidenav .content .min-max-fields, 
.sidenav .content .product-search-filter-price-slider {
	display: inline-block;
}
.sidenav .content .min-max-fields {
	width: 8rem;
	text-align: left;
	vertical-align: top;
	padding-top: 0.66rem;
}
.sidenav .content .min-max-fields .product-search-filter-price-currency-symbol {
	display: none;
}
.sidenav .content .product-search-filter-price-slider {
	width: calc(100% - 9rem);
}

.sidenav .content .filter .product-search-filter-terms {
	display: inline-block;
	vertical-align: top;
	padding-right: 1rem;
}
.sidenav .content .filter ul.product-categories li.cat-item ul.children { 
	padding-left: 0;
}
.sidenav .content .filter ul.product-categories li.cat-item a,
.sidenav .content .filter ul.product-categories li.cat-item a span {
	padding-top: 0;
	padding-bottom: 0;
	transition: all .3s;
}
.sidenav .content .filter ul.product-categories li.cat-item > a:hover, 
.sidenav .content .filter ul.product-categories li.cat-item > a:hover > span {
	color: #fff !important;
}

.sidenav .contact_line a {
	font-size: 1rem;
	font-weight: unset;
	margin-bottom: 0.25rem;
}
.sidenav .contact_line {
	margin-top: 2rem;
}

.cart-page .woocommerce-cart-form, 
.cart-page .woocommerce-cart-form a, 
.cart-page .woocommerce-cart-form span, 
.cart-page .cart_totals .shop_table td, 
.cart-page .cart_totals .shop_table th, 
.cart-page .woocommerce .cart_totals .shipping-calculator-button,
.sidenav .cart .woocommerce-cart-form, 
.sidenav .cart .woocommerce-cart-form a, 
.sidenav .cart .woocommerce-cart-form span, 
.sidenav .cart .cart_totals .shop_table td, 
.sidenav .cart .cart_totals .shop_table th, 
.sidenav .cart .woocommerce .cart_totals .shipping-calculator-button {
	font-size: 1rem;
}
.cart-page .woocommerce-cart-form .cart_totals,
.sidenav .cart .woocommerce-cart-form .cart_totals {
	margin-top: 3rem;
}
.cart-page .woocommerce table.shop_table td,
.sidenav .cart .woocommerce table.shop_table td {
	line-height: 1 !important;
}
.cart-page a,
.sidenav .cart a {
	padding: 0;
}
.cart-page .woocommerce table.shop_table td.product-thumbnail, 
.cart-page .woocommerce table.shop_table td.product-thumbnail a,
.sidenav .cart .woocommerce table.shop_table td.product-thumbnail, 
.sidenav .cart .woocommerce table.shop_table td.product-thumbnail a {
	padding: 0;
	line-height: 1;
}
.cart-page .woocommerce table.shop_table td.product-remove a.remove,
.sidenav .cart .woocommerce table.shop_table td.product-remove a.remove {
	font-family: arial;
	font-size: 2.5rem;
	color: #4d342c /*KEY_color_dark_grey*/ !important;
}
.cart-page .woocommerce table.shop_table td.product-remove a.remove:hover,
.sidenav .cart .woocommerce table.shop_table td.product-remove a.remove:hover {
	background: #cfc4ae /*KEY_color_mid_grey*/;
}
.cart-page .woocommerce table.shop_table th.product-remove, 
.cart-page .woocommerce table.shop_table th.product-thumbnail,
.sidenav .cart .woocommerce table.shop_table th.product-remove, 
.sidenav .cart .woocommerce table.shop_table th.product-thumbnail {
	opacity: 0;
}
table.cart img, 
.cart-page .woocommerce-cart table.cart img, 
.sidenav .cart .woocommerce-checkout table.cart img {
	width: 100% !important;
}

#add_payment_method table.cart td.actions .coupon .input-text, 
.cart-page .woocommerce table.cart td.actions .coupon .input-text,
.sidenav .cart .woocommerce table.cart td.actions .coupon .input-text {
	width: 8rem !important;
	padding: 0.55rem 0.5rem !important;
	margin: 0 0.5rem 0 0 !important;
	text-align: center;
}
.cart-page .woocommerce table.shop_table,
.sidenav .cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table {
    border: none;
	border-collapse: collapse;
	border-radius: 0;
    font-size: 1rem;
    margin-bottom: .5em;
}
.cart-page .woocommerce table.shop_table td,
.cart-page .woocommerce table.shop_table th,
.sidenav .cart .woocommerce table.shop_table td,
.sidenav .cart .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table th{
	border-top: 2px solid #4d342c /*KEY_color_dark_grey*/ !important;
}

.woocommerce table.shop_table tr.woocommerce-shipping-totals.shipping td > p.woocommerce-shipping-destination, 
.woocommerce table.shop_table tr.woocommerce-shipping-totals.shipping td > a.shipping-calculator-button {
    display: none; }
.woocommerce ul#shipping_method li {
    margin: .5em 0; }
.woocommerce ul#shipping_method li:first-child {
    margin-top: 0; }
.woocommerce ul#shipping_method li:last-child {
    margin-bottom: 0; }

.cart-page .woocommerce .return-to-shop,
.cart-page .woocommerce .wcppec-checkout-buttons__separator,
.sidenav .cart .woocommerce .return-to-shop,
.sidenav .cart .woocommerce .wcppec-checkout-buttons__separator {
	display: none;
}

@media screen and (min-width: 801px) {
	.sidenav{              top:104px; height:calc(100% - 104px); }
	.sidenav.small-navbar{ top:80px;  height:calc(100% - 80px);  }
	.cart-page .woocommerce table.shop_table th.product-remove,
	.cart-page .woocommerce table.shop_table td.product-remove,
	.sidenav .cart .woocommerce table.shop_table th.product-remove,
	.sidenav .cart .woocommerce table.shop_table td.product-remove{ width:2rem; }
	.cart-page .woocommerce table.shop_table th.product-thumbnail,
	.cart-page .woocommerce table.shop_table td.product-thumbnail,
	.sidenav .cart .woocommerce table.shop_table th.product-thumbnail,
	.sidenav .cart .woocommerce table.shop_table td.product-thumbnail{ max-width:4rem; } }
@media screen and (max-width: 800px) {
	.sidenav{ width:100%; /*position:absolute;*/ top:80px; height:calc(100% - 80px); } }
@media screen and (max-width: 1280px) {
	.sidenav .woocommerce .cart-collaterals .cart_totals,
	.sidenav .woocommerce-page .cart-collaterals .cart_totals{ width:100%; } }

/* The side navigation menu */
.sidenav > .content {
	/*padding-top: 60px; /* Place content 60px from the top */
	padding: 2rem;
}

/* The navigation menu links */
.sidenav a {
	padding: 4px 4px 4px 32px;
	text-decoration: none;
	/*font-size: 25px;
	color: #818181;*/
	display: block;
	transition: 0.3s;
	font-size: 1rem;
	color: #4d342c /*KEY_color_dark_grey*/;
	font-weight: bold;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.sidenav .content table.currency_table tr:hover {
	color: #e8e2d5;
}
.sidenav .content tr:hover svg.icon {
	fill: #e8e2d5;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
/*#main {
	transition: margin-left .5s;
	padding: 20px;
}*/

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}
/******************************************************************************************************/





/** CUSTOM *********************************************************************************************
 * WooCommerce
 */

/* WooCommerce page max width = 1200px */
.entry-content .woocommerce,
body.woocommerce-page.single-product article {
	max-width:1200px;
	margin: 3rem auto;
	padding: 0 1rem;
	color:#4d342c /*KEY_color_dark_grey*/; }
body.woocommerce-page.single-product article .entry-content .woocommerce {
    margin-top: 0; }
body.woocommerce-page.single-product article header.entry-header {
    padding: 0 2rem; }
	
/* WooCommerce page background */
body.woocommerce-page .entry-content,
body.woocommerce-page.single-product{
	background:#f0e0c0 /*KEY_color_lighter_grey*/; }
	
body.woocommerce-page.single-product p.stock{
	color:#4d342c /*KEY_color_dark_grey*/;
	font-size:unset; }
	
body.woocommerce-page.single-product table.shop_attributes,
body.woocommerce-page.single-product table.shop_attributes th,
body.woocommerce-page.single-product table.shop_attributes td{
	border: none; }
	
@media only screen and (min-width: 769px) {
	body.woocommerce-page.single-product ul.products li.product,
	body.woocommerce-page.single-product ul.products li.product {
		margin-right:4px;
		width:calc(25% - 4px); } }
@media only screen and (max-width: 768px) {
	body.woocommerce-page.single-product ul.products li.product,
	body.woocommerce-page.single-product ul.products li.product {
		width:calc(50% - 0.5rem); } }
	
body.woocommerce-page h1,
body.woocommerce-page h2{
	font-weight:bold;
	color:#4d342c /*KEY_color_dark_grey*/; }
	
/* WooCommerce related products - same height; price at the bottom 
   https://stackoverflow.com/a/36874330 */
@media only screen and (min-width:801px) {
    .woocommerce section.related.products ul.products {
        display: flex; }
    .woocommerce section.related.products ul.products li.product,
    .woocommerce section.related.products ul.products li.product a.woocommerce-LoopProduct-link {
        display: flex;
        flex-direction: column;
        flex-grow: 1; }
    .woocommerce section.related.products ul.products li.product a.woocommerce-LoopProduct-link span.price {
        margin-top: auto; }
}
	
/* WooCommerce products */
.woocommerce ul.products li.product { /* flex pushes "Add to Cart" button to bottom of product container  */
    display: flex;
    flex-direction: column; }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    flex-grow: 1; }

.woocommerce ul.products li.product {
    background: #faf2ef;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3); }
.woocommerce ul.products li.product a img {
	margin: 0; }
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
	font-size: 1rem;
	font-weight: bold;
	color: #4d342c;
	padding: .5em .5em 0 .5em;
	padding-bottom: 0;
	line-height: 1.5rem;
	width: max-content;
	max-width: 100%;
	transition: all 0.5s ease; }
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span.amount,
.woocommerce ul.products li.product .price span.woocommerce-Price-amount amount,
.woocommerce ul.products li.product .price span.woocommerce-Price-currencySymbol {
	font-size: 1.5rem;
	font-weight: bold;
    color: #4d342c /*KEY_color_dark_grey*/;
    transition: all 0.5s ease; }
.woocommerce ul.products li.product .price {
    max-width: 100%;
    width: 100%;
    text-align: center;
    margin: 0; }

/* WooCommerce onsale styling */
.woocommerce span.onsale {
    font-size: 1em;
    line-height: 2.5em;
    height: 3em;
    width: 3em;
    background-color: #4d342c /*KEY_color_dark_grey*/; }
    
/* WooCommerce form */
.woocommerce form .form-row .required{
	color:#4d342c /*KEY_color_dark_grey*/; }
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	padding: 1em 2em 1em 3.5em;
	margin: 0 0 2em;
	position: relative;
	background-color: #cfc4ae /*KEY_color_mid_grey*/;
	color: #4d342c /*KEY_color_dark_grey*/;
	border-top: 3px solid #4d342c /*KEY_color_dark_grey*/;
	list-style: none outside;
	width: auto;
    word-wrap: break-word; }
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    color: #4d342c /*KEY_color_dark_grey*/; }
.woocommerce-error a.button.wc-forward,
.woocommerce-info a.button.wc-forward,
.woocommerce-message a.button.wc-forward {
    display: none; }
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: #f0e0c0 /*KEY_color_lighter_grey*/;
	border-radius: 5px; }
@media only screen and (max-width: 800px) {
	.woocommerce form .form-row-first, .woocommerce form .form-row-last, 
	.woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last{
		width: 100% !important;	}
}

/* WooCommerce buttons */
.woocommerce ul.products li.product .button,
.woocommerce #respond input#submit,     .woocommerce a.button,     .woocommerce button.button,     .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce a.button.add_to_cart_button {
	padding: 0.7em;
	font-size: 1rem;
	border-radius: unset;
	text-align: center;
	border: 2px solid #4d342c /*KEY_color_dark_grey*/;
	color: #fff;
	background: #4d342c /*KEY_color_dark_grey*/;
	transition: all 0.5s ease; }
.woocommerce ul.products li.product .button:hover,
.woocommerce #respond input#submit:hover,     .woocommerce a.button:hover,     .woocommerce button.button:hover,     .woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce a.button.add_to_cart_button:hover {
	background: #fff;
	color: #4d342c /*KEY_color_dark_grey*/; }
.woocommerce a.added_to_cart.wc-forward {
    display: none; }
    
/* WooCommerce pagination numbers */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
    border: unset; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    font-size: 1rem;
    font-weight: bold;
    min-width: 2em; }
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    border-radius: 50%;
    color: #f0e0c0 /*KEY_color_lighter_grey*/;
    background: #4d342c /*KEY_color_dark_grey*/; }

/* WooCommerce links */
body.woocommerce-page a{
	text-decoration:none; }
	
/* WooCommerce strikethrough price */
.woocommerce div.product p.price, .woocommerce div.product span.price{
	color:#4d342c /*KEY_color_dark_grey*/; }
	
/* WooCommerce quantity */
body.woocommerce-page .quantity .text{
	padding: 0.58rem; }
	
/* WooCommerce categories */
body.woocommerce-page .product_meta .posted_in a{
	font-weight:bold; }

/* WooCommerce info - on "Checkout" page */
.woocommerce-info{
	border-top-color:#4d342c /*KEY_color_dark_grey*/; }
.woocommerce-info::before{
    color:#4d342c /*KEY_color_dark_grey*/; }
    
/* WooCommerce Checkout buttons (PayPal buttons) */
div#woo_pp_ec_button_checkout {
    text-align: center; }

/* WooCommerce Checkout messages */
#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: none; }
#add_payment_method #payment ul.payment_methods li,
.woocommerce-cart #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li {
    font-weight: bold; }
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
    width: fit-content;
    color: #4d342c /*KEY_color_dark_grey*/;
    font-weight: bold;
    background: #b89d7a /*KEY_color_light_grey*/; }
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: #b89d7a /*KEY_color_light_grey*/; }

/* WooCommerce Checkout Coupon / Login / Register */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    padding: 0.5rem;
    border: 2px solid  #4d342c /*KEY_color_dark_grey*/; }
.woocommerce form.checkout_coupon p,
.woocommerce form.login p,
.woocommerce form.register p {
    font-weight: bold;
    margin: 0.5rem 1rem; }

/* WooCommerce Checkout - successful */
.woocommerce ul.order_details li {
    border-color: #4d342c; }
.woocommerce .woocommerce-customer-details address {
    background: #fff2d6;
    border-color: #4d342c /*KEY_color_dark_grey*/; }

/* WooCommerce Checkout - BACS direct bank transfer - bank details */
.woocommerce section.woocommerce-bacs-bank-details h3.wc-bacs-bank-details-account-name {
	font-size: 1.25rem;
	margin-left: 2.5rem; }
	
/* Single product page */
.woocommerce div.product .woocommerce-Price-amount.amount{
	color:#4d342c /*KEY_color_dark_grey*/;
	font-weight:600;
	font-size:1.5rem; }

.woocommerce div.product form.cart{
	display:inline-block;
	text-align:center; }

.woocommerce div.product form.cart table.variations{
	width:auto; }
.woocommerce div.product form.cart table.variations td.label{
	padding-right:0.5rem; }
.woocommerce div.product form.cart table.variations td.value select{
	border:0;
	border-bottom: 1px solid #999; }
.woocommerce div.product form.cart table.variations td.value a.reset_variations{
	text-decoration:none; }
	
.woocommerce div.product form.cart .single_variation_wrap{
	display:inline-block; }
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart{
	position:relative;
	overflow:hidden;
	border: 3px solid #4d342c /*KEY_color_dark_grey*/;
	border-radius:10px;
	display:inline-block; }
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart .quantity{ 
	margin-right:0 !important; }
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart .quantity input.input-text.qty.text{
	font-weight:600;
	color:#4d342c /*KEY_color_dark_grey*/;
	border:0; }
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button.alt {
	background-color:#4d342c /*KEY_color_dark_grey*/;
	color:white;
	border-radius:0;
	padding:0.5rem; }
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button.alt.disabled {
	background-color:#4d342c /*KEY_color_dark_grey*/; }
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button.alt:hover {
	background-color:#4d342c /*KEY_color_dark_grey*/; }

.woocommerce div.product .sku_wrapper{
	margin-right:1.5rem; }
	
/* Tabs in description of Single product page */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before{
	border-color:#4d342c /*KEY_color_dark_grey*/; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{
	border-color:#4d342c /*KEY_color_dark_grey*/; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
	background:#f0e0c0 /*KEY_color_lighter_grey*/;
	border-bottom-color:#f0e0c0 /*KEY_color_lighter_grey*/; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after{
	box-shadow: -2px 2px 0 #f0e0c0 /*KEY_color_lighter_grey*/; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before{
    box-shadow: 2px 2px 0 #f0e0c0 /*KEY_color_lighter_grey*/; }
    
/* WooCommerce - display product thumbnails on sidenav.cart */
/* https://www.mystyleplatform.com/css-tip-show-your-woocommerce-product-thumbnails-in-the-cart-on-desktop-and-mobile/ */
@media(max-width:800px) {
    /* Show thumbnail row in cart on mobile */
    .woocommerce #content table.cart .product-thumbnail, 
    .woocommerce table.cart .product-thumbnail, 
    .woocommerce-page #content table.cart .product-thumbnail, 
    .woocommerce-page table.cart .product-thumbnail {
        display: inline-block !important; }
    /* hide colon above thumbnail for mobile */
    .woocommerce #content table.cart .product-thumbnail:before, 
    .woocommerce table.cart .product-thumbnail:before, 
    .woocommerce-page #content table.cart .product-thumbnail:before, 
    .woocommerce-page table.cart .product-thumbnail:before {
        display: none; }
}

/* WooCommerce - sidenav cart - on desktop */
/* layout for 'Proceed to Checkout' button */
.wc-proceed-to-checkout {
    padding: 1rem;
    padding-top: 0;
    text-align: right; }
/* WooCommerce - sidenav cart - on mobile */
@media(max-width:800px) {
    /* place the 'Remove (X)' icon over product thumbnail */
    tr.woocommerce-cart-form__cart-item.cart_item {
        position: relative; }
    td.product-remove {
        position: absolute;
        top: 0;
        left: 0; }

    /* Don't grey out every second row */
    .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
    .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
        background-color: unset; }

    /* add space between products */
    tr.woocommerce-cart-form__cart-item.cart_item {
        margin-bottom: 1.5rem; }
    table.woocommerce-cart-form__contents tr:last-child {
        border-top: none; }

    /* style for coupon input field */
    #add_payment_method table.cart td.actions .coupon .input-text, 
    .cart-page .woocommerce table.cart td.actions .coupon .input-text,
    .sidenav .cart .woocommerce table.cart td.actions .coupon .input-text {
        width: 48% !important;
        float: left; }

    /* width for 'Proceed to Checkout' button */
    a.checkout-button.button.alt.wc-forward {
        width: 100%; }
}
/******************************************************************************************************/





/** CUSTOM *********************************************************************************************
 * info pages 
 */
.info-page {
    background: #f0e0c0 /*KEY_color_lighter_grey*/; }
.info-page .info-page-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem; }
.info-page .info-page-content h1,
.info-page .info-page-content h2,
.info-page .info-page-content h3 {
    font-weight: bold; }





/** CUSTOM *********************************************************************************************
 * OneTrust 
 */
/* button that is displayed after accepting GDPR consent */
a.skip-link.screen-reader-text {
    display: none; }

/* Cookie Policy - font */
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-description,
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-cookie-policy-group-desc,
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-table-header,
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a,
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy span,
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td {
    font-size: 1rem; }
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a,
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a:hover {
    background: none; }

/* Cookie Policy page - tables */
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table {
    border-radius: 0;
    border: 2px solid #4d342c /*KEY_color_dark_grey*/; }
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table th {
    color: #fff /*KEY_color_white*/;
    border: none;
    background-color: #4d342c /*KEY_color_dark_grey*/; }
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table th,
.info-page #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table td {
    border-right: none;
    border-bottom: 2px solid #4d342c /*KEY_color_dark_grey*/; }
    
/* Cookie Policy page - "Settings" button */
.info-page #ot-sdk-btn.ot-sdk-show-settings,
.info-page #ot-sdk-btn.optanon-show-settings {
    color: #fff /*KEY_color_white*/;
    border: none; }