/**
 * CSS CUSTOM PROPERTIES
 */
:root {
  /* Colors - Primary */
  --color-bg-body: #7d7670;
  --color-text-primary: #ffffff;
  --color-text-accent: #474640;

  /* Colors - Secondary */
  --color-text-muted: #c5c3c2;
  --color-text-subtle: #72706d;
  --color-text-dark: #393938;

  /* Colors - Components */
  --color-textbox-bg: #dcdad8;
  --color-textbox-text: #7c786e;
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-black: #000000;

  /* Typography */
  --font-family-base: arial, sans-serif;
  --font-size-base: 13px;
  --font-size-menu: 15px;
  --font-size-heading: 17px;
  --font-size-small: 12px;
  --font-size-large: 19px;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --letter-spacing-menu: 1px;

  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 6px;
  --spacing-md: 10px;
  --spacing-lg: 15px;
  --spacing-xl: 17px;

  /* Transitions */
  --transition-fast: 0.25s ease-in-out;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s ease-in-out;

  /* Component Dimensions */
  --slider-height: 365px;
  --slider-height-lg: 491px;
  --gallery-header-height: 40px;
}


/**
 * HELPERS
 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}


/**
 * BASIC
 */
body {
	background-color: var(--color-bg-body);
	color: var(--color-text-primary);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	/*min-width: 1220px;*/
	max-width: 100%;
}

a {
	color: var(--color-text-primary);
}

.nav-slider {
	width: 100%;
	max-width: 100%;
	height: var(--slider-height);
}

.owl-stage-outer {
	height: var(--slider-height);
}

.nav-slider img {
	max-height: var(--slider-height);
	width: auto !important;
}


/**
 * HEADER
 */
.site-header {
	width: 100%;
	margin-bottom: 36px;
}

/* Site branding */
.site-brand {
	width: 251px;
	max-width: 251px;
	height: auto;
	display: block;
	padding: var(--spacing-lg);
	margin: 3px 69px;
}

.site-brand img {
	width: 100%;
	max-height: 103px;
}


/**
 * NAVIGATION / MENUS
 */
.navbar-toggle {
	display: none;
	width: 39px;
	height: 43px;
	margin: 30px 0 30px 164px;
	position: relative;
	transform: rotate(0deg);
	transition: var(--transition-slow);
	cursor: pointer;
}

.navbar-toggle::after {
	content: "menu";
	font-size: var(--font-size-menu);
	font-weight: var(--font-weight-semibold);
	text-transform: lowercase;
	letter-spacing: var(--letter-spacing-menu);
	line-height: var(--spacing-sm);
	margin-left: 46px;
	vertical-align: top;
}

.navbar-toggle .icon-bar {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: var(--color-text-primary);
	opacity: 1;
	left: 0;
	transform: rotate(0deg);
	transition: var(--transition-fast);
}

.navbar-toggle .icon-bar:nth-child(1) {
	top: 0px;
	transform-origin: left center;
}

.navbar-toggle .icon-bar:nth-child(2) {
	top: 18px;
	transform-origin: left center;
}

.navbar-toggle .icon-bar:nth-child(3) {
	top: 36px;
	transform-origin: left center;
}

.navbar-toggle.open .icon-bar:nth-child(1) {
	transform: rotate(45deg);
	top: 3px;
	left: 5px;
}

.navbar-toggle.open .icon-bar:nth-child(2) {
	width: 0%;
	opacity: 0;
}

.navbar-toggle.open .icon-bar:nth-child(3) {
	transform: rotate(-45deg);
	top: 31px;
	left: 5px;
}

.nav-main {
	float: left;
	margin-left: 226px;
	padding-right: 19px;
	width: 164px;
}

.nav-main > .menu > .menu-item > a {
	padding-left: 3px;
	padding-right: 3px;
}

.menu {
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	padding-left: 0;
}

.menu li,
.menu .menu-item {
	list-style-type: none;
	padding-top: var(--spacing-xs);
	padding-bottom: var(--spacing-xs);
	padding-left: 3px;
	padding-right: 3px;
}

.menu .menu-item a {
	display: inline-block;
	padding-left: var(--spacing-md);
	text-decoration: none;
}

.menu .menu-item {
	list-style-type: none;
	transition: var(--transition-normal) all;
}

.menu .current-menu-item {
	list-style-type: none;
}

.menu .menu-item:hover > a, .menu .menu-item:hover::before,
.menu .current-menu-item > a, .menu .current-menu-item::before,
.menu .current-menu-parent > a, .menu .current-menu-parent::before,
.menu .current-menu-ancestor > a, .menu .current-menu-ancestor::before {
	color: var(--color-text-accent);
}

.menu > .menu-item > a {
	font-size: var(--font-size-menu);
	font-weight: var(--font-weight-semibold);
	text-transform: lowercase;
	letter-spacing: var(--letter-spacing-menu);
}

.menu > .menu-item > .sub-menu {
	/*border-top: 1px solid #474640;*/
	margin-top: 14px;
}

.menu > .menu-item > .sub-menu:before {
	content: "";
	width: 120px;
	height: 1px;
	display: block;
	background: var(--color-text-accent);
	/*margin-top: 14px;*/
	margin-bottom: 12px;
}

.sub-menu {
	display: none;
}

.current-menu-item > .sub-menu,
.current-menu-parent > .sub-menu,
.current-menu-ancestor > .sub-menu {
	display: block;
}

.menu > li > .sub-menu {
	padding-left: 0;
}

.menu > li > .sub-menu > li > .sub-menu {
	padding-left: 8px;
	padding-top: var(--spacing-sm);
	padding-bottom: var(--spacing-sm);
}

.sub-menu li {
	position: relative;
}

.sub-menu li:before {
	content: "> ";
	display: inline-block;
	font-size: var(--font-size-small);
	position: absolute;
	top: var(--spacing-sm);
}

.menu > li > .sub-menu > li > .sub-menu li {
	padding-top: 3px;
	padding-bottom: 3px;
	position: relative;
}

.menu-horizontal {
	margin: 0 0 8px -6px;
	padding: 0;
}

.menu-horizontal .menu-item {
	display: inline-block;
	padding: 0;
	margin: 0;
}

.menu-horizontal .menu-item:not(:first-child):before {
  content: "-";
  vertical-align: sub;
}

.menu-horizontal .menu-item a {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	padding: var(--spacing-xs) var(--spacing-sm);
	margin: 0;
}

.lang-switcher {
	margin: 0 -6px;
}

.lang-switcher li {
	display: inline-block;
	padding: 0;
	margin-right: -4px;
}

.lang-switcher li:before {
	content: "-";
	vertical-align: sub;
}

.lang-switcher li:first-child:before {
	content: "";
}

.lang-switcher li a {
	padding: var(--spacing-xs) var(--spacing-sm);
	text-decoration: none;
	text-transform: uppercase;
}

.lang-switcher a:hover,
.lang-switcher .current-lang a {
	color: var(--color-text-dark);
}

/**
* MAIN
*/
#site-content {
	float: left;
	margin-top: var(--spacing-lg);
	max-width: 100%;
	width: 800px;
}

.post-type-archive-natheme_realization #site-content,
.tax-natheme_realizations #site-content,
.single-natheme_realization #site-content {
	max-width: 100%;
	width: 1120px;
}

.gallery-header {
	position: relative;
}

.gallery-header .title {
	display: inline-block;
	width: auto;
	position: absolute;
	bottom: 0;
	left: 44px;
	box-sizing: border-box;
	z-index: 100;
}

.gallery-header.nav-slider .title {
	background-color: var(--color-black);
	background-color: var(--color-overlay);
	left: 0;
	padding-left: 44px;
	width: 100%;
	height: var(--gallery-header-height);
	overflow: hidden;
}

.gallery-header .title h1 {
	color: var(--color-text-muted);
	height: 30px;
	line-height: 38px;
	font-size: var(--font-size-heading);
	display: inline;
	margin: 0;
	padding: 0;
	transition: var(--transition-normal) color;
}

.gallery-header .title .realization-link h1 {
	line-height: 42px;
}

.gallery-header .title a {
	color: var(--color-text-subtle);
	font-weight: var(--font-weight-normal);
	text-decoration: none;
}

.gallery-header .title a:hover h1 {
	color: var(--color-text-primary);
}

.gallery-header .owl-nav {
	background-color: var(--color-black);
	background-color: var(--color-overlay);
	width: 100%;
	height: var(--gallery-header-height);
	position: absolute;
	bottom: 0;
	left: 0;
}

.gallery-header.nav-slider .owl-nav {
	background-color: transparent;
	bottom: -30px;
}

.home .gallery-header .owl-nav {
	display: none;
}

.gallery-header .owl-carousel .owl-nav.disabled {
	display: block;
}

.gallery-header .owl-prev,
.gallery-header .owl-next {
	color: var(--color-text-primary);
	font-size: 45px;
	line-height: 37px;
	position: absolute;
	bottom: 0;
	z-index: 150;
}

.gallery-header.nav-slider .owl-prev,
.gallery-header.nav-slider .owl-next {
	bottom: 30px;
}

.gallery-header .owl-prev {
	left: var(--spacing-md);
}

.gallery-header .owl-next {
	right: var(--spacing-md);
}

.gallery-layout .content {
	width: 575px;
}

.fancybox-title-inside-wrap {
	padding-top: var(--spacing-xs);
	padding-bottom: var(--spacing-xs);
}

.fancybox-close {
	top: var(--spacing-lg);
	right: var(--spacing-lg);
	padding: var(--spacing-xs) 0;
	height: auto;
	width: auto;
	background: none;
	color: var(--color-black);
	text-decoration: none;
	z-index: 9999 !important;
}

.fancybox-nav span {
	visibility: visible;
	background: none;
	text-align: center;
	font-size: 36px;
}

.fancybox-skin {
	border-radius: 0;
}

.fancybox-prev {
	left: -70px;

}

.fancybox-next {
	right: -70px;
}

.textbox {
	background-color: var(--color-textbox-bg);
	color: var(--color-textbox-text);
	min-height: var(--slider-height);
	padding: var(--spacing-xl);
}

.archive .textbox {
	margin-bottom: var(--spacing-xl);
	min-height: auto;
}

.textbox .post-title {
	font-size: var(--font-size-base);
	font-weight: bold;
	margin-top: 0;
}

.textbox a {
	color: var(--color-textbox-text);
}

/**
 * FOOTER
 */
#site-footer {
	width: 100%;
	padding-bottom: 39px;
	padding-top: 16px;
	padding-bottom: 60px;
	overflow: hidden;
}

.footer-bg {
	background-image: url(../images/footer-bg.png);
	background-position: top right;
	background-repeat: no-repeat;
	float: left;
	min-height: 104px;
	width: 271px;
}

.footer-content {
	box-sizing: border-box;
	max-width: 100%;
	width: 924px;
	float: left;
	padding-left: var(--spacing-lg);
	padding-right: var(--spacing-lg);
	padding-top: 33px;
}

.social-links {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.social-links-item {
	display: inline-block;
	margin-right: .7em;
	margin-top: .7em;
}

.social-links-item .social-link {
	display: inline-block;
	font-size: 1.4em;
}

.footer-content p {
	margin: 0;
	margin-bottom: 8px;
}

/**
 * COMPLIANZ
 */
#cmplz-document p, #cmplz-document li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode p, .editor-styles-wrapper .cmplz-unlinked-mode li, .editor-styles-wrapper .cmplz-unlinked-mode td {
	font-size: var(--font-size-base);
}

/**
 * RESPONSIVE
 */
@media screen and (max-width:480px) {
	.gallery-header .title h1 {
		font-size: var(--font-size-large);
	}
}

@media screen and (max-width: 1024px) {
	.site-brand {
		margin-left: 0;
	}
	.nav-main {
		width: 100%;
	}
	.navbar-toggle {
		display: block;
	}
	.collapsed {
		display: none;
	}
	.content-container .content {
		padding-left: var(--spacing-lg);
		padding-right: var(--spacing-lg);
	}
	#site-content {
		width: 100% !important;
	}
	.footer-bg {
		width: 204px;
	}
}

@media screen and (max-width: 1280px) {
	.site-brand {
		margin-left: 0;
	}
	.nav-main {
		margin-left: 157px;
	}
	#site-content {
		width: calc(100% - 340px);
	}
	.content-container .content {
		padding-right: var(--spacing-lg);
	}
	.footer-bg {
		width: 204px;
	}
}

@media screen and (min-width: 1140px) {
	.post-type-archive-natheme_realization #site-content,
	.tax-natheme_realizations #site-content,
	.single-natheme_realization #site-content {
		max-width: 1120px;
		width: calc(100vw - 574px);
	}
	.nav-slider {
		max-width: 100%;
		width: 1120px;
		height: var(--slider-height-lg);
	}
	.nav-slider img {
		max-height: var(--slider-height-lg);
		width: auto !important;
	}
	.owl-stage-outer {
		height: var(--slider-height-lg);
	}

	.footer-content {
		padding-top: 0;
	}
}

/**
 * CLEARFIX
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}