/* Varus base styles: reset, layout wrappers, header, mega menu, mobile menu, banner, footer, simple templates. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--vr-color-bg);
	color: var(--vr-color-text);
	font: normal var(--vr-font-size) / var(--vr-line-height) var(--vr-font-text);
	word-spacing: normal;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--vr-color-accent);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--vr-color-link-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--vr-font-heading);
	color: var(--vr-color-heading);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

/* Default heading sizes of the old theme (Jura 700, uppercase). Headings made by the page converter carry their own sizes
   and win over these element rules; headings typed in the editor (core heading block) rely on them. */
h1 { font-size: var(--vr-h1-size, 44px); line-height: 49px; }
h2 { font-size: var(--vr-h2-size, 34px); line-height: 39px; }
h3 { font-size: var(--vr-h3-size, 24px); line-height: 29px; }
h4 { font-size: var(--vr-h4-size, 20px); line-height: 25px; }
h5 { font-size: var(--vr-h5-size, 16px); line-height: 21px; }
h6 { font-size: var(--vr-h6-size, 14px); line-height: 19px; }

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

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

p {
	margin: 0 0 10px;
	text-align: justify;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.screen-reader-text:focus,
.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	white-space: normal;
}

/* Skip link: same look as the old The7 link (grey box, blue bold text, soft shadow). */
.skip-link:focus {
	top: 15px;
	left: 30px;
	padding: 15px 23px 14px;
	background: #f1f1f1;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	color: #21759b;
	font: 700 14px / normal var(--vr-font-text);
	text-decoration: none;
	z-index: 100000;
}

/* Keyboard focus. The old site removed the outline on links and menu items; the new theme keeps a visible ring
   (4.6:1 contrast on white). Dark areas use white. */
:focus-visible {
	outline: 2px solid var(--vr-color-accent-dark);
	outline-offset: 2px;
}

.footer :focus-visible,
.fancy-header :focus-visible,
.varus-menu-background ~ * :focus-visible,
.vr-menu .activated > .sub-menu :focus-visible {
	outline-color: #fff;
}

[hidden] {
	display: none !important;
}

/* Layout wrappers (The7 .wf-wrap): 1300px wide, 50px side padding. Full-width pages use no wrapper. */
.wf-wrap {
	width: var(--vr-wrap-width);
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--vr-wrap-pad);
}

#page {
	background: var(--vr-color-surface);
	overflow-x: clip; /* scroll effects move columns sideways; clip keeps position: sticky working */
}

#main {
	display: block;
	padding: 70px 0;
}

@media (max-width: 778px) {
	.wf-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}
}

#main.vr-fullwidth {
	padding: 0;
}

.entry-title {
	margin-top: 0;
}

/* ---------- Header ---------- */
.masthead {
	position: sticky;
	top: 0;
	z-index: 102;
	background: var(--vr-color-surface);
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.07);
}

.admin-bar .masthead {
	top: 32px;
}

.header-bar {
	position: relative;
	display: flex;
	align-items: flex-start;
	height: var(--vr-header-height);
	padding: 0 30px 0 0;
}

.branding {
	display: flex;
	flex: 0 0 auto;
	height: var(--vr-header-height);
	padding: 0 15px;
	background: var(--vr-color-surface);
	align-items: flex-end;
}

.branding .custom-logo-link {
	display: flex;
}

.branding img {
	width: 246px;
	height: 80px;
	max-width: none;
	display: block;
}

.site-title-link {
	font: 700 22px / var(--vr-header-height) var(--vr-font-heading);
}

.vr-primary-nav {
	margin-right: auto;
}

.vr-menu,
.vr-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vr-menu {
	display: flex;
	position: relative;
	z-index: 10; /* above the gradient panel (.varus-menu-background, z-index 9) */
	padding-bottom: 10px;
}

.vr-menu > .menu-item {
	position: relative;
	padding: 10px 15px;
	margin-top: 23px;
}

.vr-menu > .menu-item > a {
	font-size: 14px;
	font-weight: 600;
	color: var(--vr-color-accent);
}

.vr-menu a {
	text-decoration: none;
}

.mini-widgets {
	display: flex;
	align-items: center;
	height: var(--vr-header-height);
	margin-left: auto;
	padding-left: 5px;
}

/* Language switcher: two outlined boxes, same look as the old WPML list (1px #66a0b5, radius 3, scale 1.2 on hover). */
.vr-lang {
	font: 700 13px / 17px var(--vr-font-text);
}

.vr-lang .wpml-ls-item {
	padding: 5px !important;
	border: 1px solid var(--vr-color-accent);
	border-radius: 3px;
}

.vr-lang .wpml-ls-link {
	display: block;
	padding: 0 2px !important;
	font: 400 15px / 15px var(--vr-font-text);
	color: var(--vr-color-accent);
	text-decoration: none !important;
	transition: transform 0.3s;
}

.vr-lang a.wpml-ls-link:hover,
.vr-lang a.wpml-ls-link:focus-visible {
	color: var(--vr-color-accent);
	transform: scale(1.2);
}

.mini-search {
	position: relative;
	z-index: 10;
	margin-left: 20px;
	line-height: 0;
}

.mini-search .searchform {
	position: relative;
}

.vr-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vr-color-accent-dark);
	cursor: pointer;
}

.popup-search-wrap {
	position: absolute;
	right: -10px;
	top: 26px;
	width: 220px;
	height: 54px;
	padding: 10px;
	background: var(--vr-color-surface);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	line-height: 22px;
	z-index: 20;
}

.popup-search-wrap .field {
	flex: 1;
	min-width: 0;
	height: 34px;
	border: 0;
	background: transparent;
	font: 400 14px / 34px var(--vr-font-text);
	color: var(--vr-color-accent-dark);
	padding: 0 12px;
}

.popup-search-wrap .search-icon svg {
	width: 22px;
	height: 22px;
}

.popup-search-wrap .field::placeholder { color: var(--vr-color-accent-dark); opacity: 0.5; }
.popup-search-wrap .field:focus-visible { outline-offset: -2px; }

/* The icon floats over the right end of the field (live: icon x 176 inside the 220 px box, field 200 px wide). */
.popup-search-wrap .search-icon {
	position: absolute;
	right: 22px;
	top: 16px;
	border: 0;
	background: none;
	color: var(--vr-color-accent-dark);
	cursor: pointer;
	padding: 0;
	display: flex;
}

/* Mega menu: panel below the header (.varus-menu-background), sub menus drawn on top of it. */
.varus-menu-background {
	display: none;
	position: absolute;
	top: var(--vr-header-height);
	left: 0;
	width: 100vw;
	max-width: 100%;
	height: 400px;
	background: var(--vr-mega-gradient);
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	z-index: 9;
}

.varus-menu-background.is-visible {
	display: block;
}

.vr-menu .menu-item > .sub-menu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	/* No z-index here, like the old theme: a later top level item paints above the transparent top part of the previous
	   panel, so the pointer can move along the bar from one item to the next. The whole menu sits above the gradient
	   panel through .vr-menu below. */
}

.vr-menu .sub-menu li {
	position: relative;
}

.vr-menu .activated > .sub-menu {
	display: flex;
	flex-direction: column;
	padding-top: 100px;
	margin-left: 20px;
}

.vr-menu .activated > .sub-menu > li {
	width: 250px;
}

.vr-menu .activated > .sub-menu a {
	color: #fff;
}

.vr-menu .activated > .sub-menu a:hover,
.vr-menu .activated > .sub-menu a:focus-visible {
	color: var(--vr-color-link-hover);
}

.vr-menu .activated > .sub-menu > li.menu-item-has-children > a {
	font-weight: bold;
	font-size: 17px;
	display: block;
	margin-bottom: 5px;
}

.vr-menu .activated > .sub-menu > li > .sub-menu {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-height: 400px;
	padding-top: 35px;
	margin-left: 0;
}

.vr-menu .sub-menu .menu-item {
	padding: 0;
	margin: 0;
}

.vr-menu .activated > .sub-menu > li > .sub-menu > li {
	width: 250px;
}

.vr-menu .proizvodi.activated > .sub-menu {
	flex-direction: row;
	justify-content: space-between;
	width: 70vw;
}

@media (max-width: 1480px) {
	.vr-menu .proizvodi.activated > .sub-menu {
		width: 76vw;
		left: -100px;
	}
}

@media (max-width: 1280px) {
	.vr-menu .proizvodi.activated > .sub-menu {
		width: 70vw;
	}
}

.vr-menu .proizvodi.activated > .sub-menu > li.menu-vertical-line,
.vr-menu .menu-vertical-line {
	height: 180px;
	width: 1px;
	padding: 0;
	background: rgba(255, 255, 255, 0.4);
	align-self: center;
}

.vr-menu .labware > .sub-menu {
	padding-top: 55px;
}

/* Mobile header (1050 px and below): 80 px bar, logo, language boxes (above 778 px), search, hamburger.
   Off-canvas menu slides in from the left, 300 px wide, like the old The7 mobile header. */
.vr-menu-toggle,
.vr-mobile-panel,
.vr-mobile-overlay {
	display: none;
}

@media (max-width: 1050px) {
	.vr-primary-nav,
	.varus-menu-background {
		display: none;
	}

	.header-bar {
		height: 80px;
		align-items: center;
		padding: 0 20px;
	}

	.branding {
		height: 80px;
		min-width: 0;
		padding: 0;
		align-items: center;
	}

	.branding img {
		max-width: 100%;
		height: auto;
	}

	.header-bar .mini-widgets {
		height: 80px;
		margin-left: auto;
	}

	.mini-search {
		margin-left: 20px;
	}

	.mini-search .vr-search-toggle {
		color: #333;
	}

	.vr-menu-toggle {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		height: 30px;
		margin-left: 20px;
		padding: 5px 2px;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.lines-button {
		display: block;
		width: 35px;
	}

	.menu-line {
		display: block;
		height: 4px;
		margin: 0 0 4px;
		background: #333;
	}

	.menu-line:last-child {
		margin-bottom: 0;
	}

	.vr-mobile-panel {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 300px;
		max-width: 100%;
		height: 100%;
		overflow-y: auto;
		padding: 45px 28px 30px 30px;
		background: #fff;
		z-index: 9602;
		visibility: hidden;
		transform: translateX(-300px);
		transition: transform 0.5s, visibility 0s 0.5s;
	}

	.vr-mobile-panel.is-open {
		visibility: visible;
		transform: none;
		transition: transform 0.5s;
	}

	.vr-mobile-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(85, 118, 140, 0.84);
		z-index: 9601;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.5s, visibility 0s 0.5s;
	}

	.vr-mobile-overlay.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.5s;
	}

	.vr-menu-close {
		position: absolute;
		top: 15px;
		left: 261px;
		width: 26px;
		height: 26px;
		padding: 5px;
		border: 0;
		background: none;
		color: #333;
		cursor: pointer;
	}

	.close-line-wrap {
		display: block;
		width: 16px;
		height: 16px;
		position: relative;
	}

	.close-line {
		position: absolute;
		left: 0;
		top: 7px;
		width: 16px;
		height: 2px;
		background: currentColor;
	}

	.close-line:nth-child(1) {
		transform: rotate(45deg);
	}

	.close-line:nth-child(2) {
		display: none;
	}

	.close-line:nth-child(3) {
		transform: rotate(-45deg);
	}

	.vr-mobile-menu,
	.vr-mobile-menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.vr-mobile-menu .sub-menu {
		display: none;
		padding-left: 20px;
	}

	.vr-mobile-menu .is-open > .sub-menu {
		display: block;
		padding-bottom: 15px;
	}

	.vr-mobile-menu li {
		position: relative;
	}

	.vr-mobile-menu > li > a {
		display: block;
		padding: 10.4px 25px 10.4px 0;
		color: #333;
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
	}

	.vr-mobile-menu .menu-item-has-children > a {
		margin-right: 30px;
	}

	.vr-mobile-menu .sub-menu li {
		padding: 5px 10px;
	}

	.vr-mobile-menu .sub-menu a {
		display: block;
		min-height: 61px;
		padding: 5.6px 30px 5.6px 0;
		color: #333;
		font-size: 17px;
		font-weight: 500;
		line-height: 20px;
	}

	.vr-mobile-menu .sub-menu .menu-item-has-children > a {
		font-weight: 600;
	}

	.vr-mobile-menu .current-menu-ancestor > a,
	.vr-mobile-menu .current-menu-parent > a,
	.vr-mobile-menu .current-menu-item > a {
		color: #1ebbf0;
	}

	.vr-mobile-menu .menu-vertical-line {
		display: none;
	}

	.vr-submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 30px;
		height: 41px;
		border: 0;
		background: none;
		color: rgba(51, 51, 51, 0.17);
		cursor: pointer;
	}

	.sub-menu .vr-submenu-toggle {
		top: 14px;
		height: 32px;
	}

	/* Thin plus (minus when open) drawn with two gradient bars. */
	.vr-submenu-toggle::before {
		content: "";
		display: block;
		width: 16px;
		height: 16px;
		margin: auto;
		background:
			linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	}

	.sub-menu .vr-submenu-toggle::before {
		width: 10px;
		height: 10px;
	}

	.is-open > .vr-submenu-toggle::before {
		background-size: 100% 2px, 0 0;
	}

	.vr-mobile-tools {
		padding: 35px 0 30px;
	}
}

@media (max-width: 778px) {
	.header-bar .vr-lang {
		display: none;
	}

	.header-bar .popup-search-wrap {
		top: 48px;
	}
}

/* ---------- Banner (old "fancy header") ---------- */
.fancy-header {
	position: relative;
	display: flex;
	background-color: var(--vr-color-accent);
	background-repeat: no-repeat;
	background-position: right !important;
	background-size: 205px !important;
}

.fancy-header .wf-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 250px;
	margin: 0 auto;
	padding-top: 5px;
}

.fancy-header .fancy-title {
	margin: 5px 0;
	font-family: var(--vr-font-heading);
	font-size: 45px !important; /* the old child theme forces 45 px over the per page 30 px setting */
	font-weight: 700;
	line-height: 36px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}

.fancy-header .fancy-title span {
	display: inline-block;
}

/* Beats the per page rule (padding 0) that The7 stored; centers the title block like the old band (5 px lower). */
#fancy-header > .wf-wrap {
	padding-top: 5px;
}

.fancy-header .fancy-title-head {
	margin-bottom: 5px;
}

.fancy-header .breadcrumbs {
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 23px;
	color: #fff;
}

.fancy-header .breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fancy-header .breadcrumbs li + li::before {
	content: "/";
	padding: 0 8px;
	opacity: 0.7;
}

.fancy-header .breadcrumbs a,
.fancy-header .breadcrumbs span {
	color: #fff;
}

.fancy-header-curve-shape {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 26%;
	background-image: url("../img/shape-divider.png");
}

/* Old behaviour: 70 px band from 778 px down, 300 px band from 768 px down; the title keeps 45 px. */
@media (max-width: 778px) {
	#fancy-header > .wf-wrap {
		min-height: 70px;
		padding-top: 10px;
	}

	.fancy-header .fancy-title {
		line-height: 38px;
	}

	.fancy-header .breadcrumbs {
		display: none;
	}
}

@media (max-width: 768px) {
	#fancy-header > .wf-wrap {
		min-height: 300px;
		padding-top: 10px;
	}
}

@media (max-width: 670px) {
	.fancy-header-curve-shape {
		display: none;
	}
}

/* Plain title bar for posts, archives, search, 404 (old The7 "page-title": solid grey, centered). */
.vr-page-title {
	background: var(--vr-color-bg);
}

.vr-page-title .wf-wrap {
	padding-top: 25px;
	padding-bottom: 32px;
}

.vr-page-title .page-title-head {
	margin-bottom: 12px;
}

.vr-page-title .entry-title {
	margin: 0;
	font-size: 30px;
	line-height: 40px;
	color: var(--vr-color-text-heading-dark, #333);
	text-align: center;
	text-transform: uppercase;
}

.vr-page-title .page-title-breadcrumbs {
	margin-top: 0;
	text-align: center;
}

.vr-page-title .breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
	font-size: 13px;
	line-height: 23px;
	color: #b4b5bb;
}

.vr-page-title .breadcrumbs a,
.vr-page-title .breadcrumbs span {
	color: #b4b5bb;
}

.vr-page-title .breadcrumbs li + li::before {
	content: "/";
	padding: 0 8px 0 7px;
}

/* ---------- Posts, cards, pagination, forms ---------- */
.vr-single .post-thumbnail {
	position: relative;
}

.vr-single .post-thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.vr-single .fancy-date {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

.vr-single .fancy-date a {
	display: block;
	padding: 2px 0;
	background: #fff;
	text-align: center;
	line-height: 0;
	width: 42px;
}

.vr-single .fancy-date span {
	display: block;
	padding: 1px 2px;
	font: 700 12px / 22px Arial, Helvetica, sans-serif;
	color: #222;
}

.vr-single .fancy-date .entry-month {
	margin-bottom: 2px;
}

.vr-single .fancy-date .entry-date {
	margin-bottom: 3px;
	font-size: 22px;
	line-height: 28px;
	padding: 2px;
}

.vr-single .fancy-date .entry-month,
.vr-single .fancy-date .entry-date {
	position: relative;
}

/* Short cyan rules below the month and the day, as in the old badge. */
.vr-single .fancy-date .entry-month::after,
.vr-single .fancy-date .entry-date::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 14px;
	height: 2px;
	margin-left: -7px;
	background: #1ebbf0;
}

.vr-single .fancy-date .entry-month::after {
	top: 24px;
}

.vr-single .fancy-date .entry-date::after {
	top: 32px;
}

.vr-single .post-thumbnail {
	margin-bottom: 45px;
}

.vr-single .entry-content {
	margin: 0 0 50px;
}

/* The old content had no wrapper, so the margin of its last paragraph merged into the 50 px below. */
.vr-single .vr-body > :last-child {
	margin-bottom: 0;
}

.vr-single .entry-content ol,
.vr-single .entry-content ul:not(.vb-iconlist) {
	margin: 0 0 10px 20px;
	padding: 0;
}

.single-related-posts {
	padding-bottom: 35px;
}

.single-related-posts {
	border-bottom: 1px solid rgba(51, 51, 51, 0.12);
}

.single-related-posts h3 {
	position: relative;
	margin: 0 0 35px;
	padding-bottom: 10px;
	font-size: 24px;
	line-height: 29px;
	text-align: center;
	text-transform: uppercase;
}

/* Short gradient rule below the heading, as on the old site. */
.single-related-posts h3::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 60px;
	height: 3px;
	margin-left: -30px;
	background: linear-gradient(to right, #1ebbf0 30%, #39dfaa 100%);
}

.single-related-posts .items-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 -25px;
}

.vr-layout--sidebar .single-related-posts .items-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 990px) {
	.single-related-posts .items-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.related-item {
	padding: 0 25px 25px;
}

.related-item article {
	display: flex;
	gap: 20px;
	min-height: 90px;
}

.related-item .mini-post-img {
	flex: 0 0 110px;
	padding-top: 5px;
}

.related-item .mini-post-img img {
	display: block;
	width: 110px;
	height: 80px;
	object-fit: cover;
}

.related-item .post-content a {
	color: #333;
	text-transform: none;
}

.related-item .post-content a:hover {
	color: var(--vr-color-accent);
}

.related-item time {
	font-size: 13px;
	color: #b4b5bb;
}

@media (max-width: 778px) {
	.single-related-posts .items-grid {
		grid-template-columns: 1fr;
	}

	.vr-page-title .entry-title {
		font-size: 24px;
		line-height: 34px;
	}

	.vr-page-title .page-title-breadcrumbs {
		display: none;
	}

	.vr-page-title .page-title-head {
		margin-bottom: 0;
	}
}


/* Title bar of posts (old The7 page title): at least 180 px, 25 px above and 20 px below, title and breadcrumbs centred in between.
   It grows when the title wraps to many lines. On a phone it is just the title (breadcrumbs hidden). */
.vr-page-title--post .wf-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 180px;
	padding-top: 25px;
	padding-bottom: 20px;
}

.vr-page-title--post .page-title-head {
	margin-bottom: 0;
}

@media (max-width: 778px) {
	.vr-page-title--post .wf-wrap {
		display: block;
		min-height: 0;
	}
}

/* Post with the sidebar layout: 825 px column, 50 px gap, 325 px sidebar with the old divider line. Stacks under 990 px. */
.vr-layout--sidebar {
	display: flex;
	gap: 50px;
	align-items: stretch;
}

.vr-layout--sidebar > .content {
	flex: 1 1 0;
	min-width: 0;
}

.sidebar {
	flex: 0 0 325px;
	border-left: 1px solid rgba(51, 51, 51, 0.12);
}

.sidebar-content {
	padding-left: 50px;
}

.sidebar .widget {
	margin: 0 0 -10px;
	padding: 30px 0;
	font-size: 14px;
	line-height: 25px;
}

.sidebar .widget:first-child {
	padding-top: 0;
}

.sidebar .widget:last-child {
	padding-bottom: 30px;
}

.sidebar .widget-title {
	margin: 0 0 15px;
	font-family: var(--vr-font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 21px;
	color: #333;
	text-transform: uppercase;
}

.sidebar .widget ul {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.sidebar .widget li + li {
	margin-top: 10px;
}

.sidebar .widget a {
	color: var(--vr-color-text, #85868c);
}

.sidebar .widget a:hover {
	color: var(--vr-color-accent);
}

.sidebar .widget_search .vr-searchform {
	position: relative;
	margin: 5px 0 15px;
}

.sidebar .widget_search input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	height: 38px;
	padding: 5px 40px 5px 15px;
	border: 1px solid rgba(51, 51, 51, 0.12);
	background: #fdfdfd;
	font: 400 14px / 25px var(--vr-font-body, inherit);
	color: #8b8d94;
}

.sidebar .widget_search button {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0;
	cursor: pointer;
}

.sidebar .widget_search button::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 auto;
	background: rgba(139, 141, 148, 0.7);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10.3 10.3L15 15' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10.3 10.3L15 15' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 990px) {
	.vr-layout--sidebar {
		display: block;
	}

	.sidebar {
		margin-top: 60px;
		border-left: 0;
	}

	.sidebar-content {
		padding-left: 0;
	}
}


.vr-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 30px 0;
}

@media (max-width: 1050px) {
	.vr-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 778px) {
	.vr-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vr-card {
	background: #f7f7f7;
}

.vr-card-thumb img {
	display: block;
	width: 100%;
}

.vr-card-body {
	padding: 19px 25px 20px;
}

.vr-card-title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 25px;
	text-transform: uppercase;
}

.vr-card-title a {
	color: #333;
}

.vr-card-meta {
	font-size: 13px;
	line-height: 23px;
	color: #b4b5bb;
}

.vr-card-meta a {
	color: #b4b5bb;
}

.vr-card-cats,
.vr-card-by {
	display: block;
}

.vr-card-excerpt {
	margin: 0;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.pagination .page-numbers {
	min-width: 36px;
	padding: 6px 10px;
	text-align: center;
	background: #fff;
}

.pagination .current {
	background: var(--vr-color-accent);
	color: #fff;
}

.vr-searchform {
	display: flex;
	max-width: 500px;
	margin: 20px 0;
}

.vr-searchform input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ddd;
	font: inherit;
}

.vr-searchform button {
	padding: 10px 20px;
	border: 0;
	background: var(--vr-color-accent);
	color: #fff;
	font: inherit;
	cursor: pointer;
}

/* ---------- Footer ---------- */
.footer {
	background: var(--vr-color-footer-bg);
}

.vr-footer-pending {
	padding: 20px;
	color: #fff;
	text-align: center;
}

.scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vr-color-accent);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

.scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.scroll-top:hover,
.scroll-top:focus-visible {
	color: #fff;
	background: var(--vr-color-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* Editor alignment classes used inside post content. */
.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 20px 20px;
}

.aligncenter {
	display: block;
	margin: 0 auto 20px;
}

.entry-content::after {
	content: "";
	display: block;
	clear: both;
}