/*
Theme Name: Vanylven DB
Theme URI: http://www.osberget.no/
Author: Maxim Kukulinsky at RASAMAX SIA
Author URI: http://www.osberget.no/
Description: Vanylven DB Wordpress theme
Version: 0.0.16
Tags: sebastian osberget rasamax
Text Domain: vanylvendb
*/
/**
 * Reset CSS instead of Normalize inside of Bootstrap
 */

/* Page commons */
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
}

* > p:first-child {
	margin-top: 0;
}

* > p:last-child {
	margin-bottom: 0;
}

.alignleft {
	float: left;
	margin: 0 20px 10px 0;
}

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

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

.bg-cover {
	background: center no-repeat;
	background-size: cover;
}

.bg-contain {
	background: center no-repeat;
	background-size: contain;
}

/* Typography */
/* Texts */
.text-12 {
	font-size: 12px;
}
.text-14 {
	font-size: 14px;
}
.text-16 {
	font-size: 16px;
}
.text-18 {
	font-size: 18px;
}
.text-20 {
	font-size: 20px;
}
.text-24 {
	font-size: 24px;
}
.text-26 {
	font-size: 26px;
}
.text-28 {
	font-size: 28px;
}
.text-30 {
	font-size: 30px;
}
.text-40 {
	font-size: 40px;
}
.text-46 {
	font-size: 46px;
}

@media(min-width: 768px) {
	.text-md-12 {
		font-size: 12px;
	}
	.text-md-14 {
		font-size: 14px;
	}
	.text-md-16 {
		font-size: 16px;
	}
	.text-md-18 {
		font-size: 18px;
	}
	.text-md-20 {
		font-size: 20px;
	}
	.text-md-24 {
		font-size: 24px;
	}
	.text-md-26 {
		font-size: 26px;
	}
	.text-md-28 {
		font-size: 28px;
	}
	.text-md-30 {
		font-size: 30px;
	}
	.text-md-40 {
		font-size: 40px;
	}
	.text-md-46 {
		font-size: 46px;
	}
}

@media(min-width: 1025px) {
	.text-lg-12 {
		font-size: 12px;
	}
	.text-lg-14 {
		font-size: 14px;
	}
	.text-lg-16 {
		font-size: 16px;
	}
	.text-lg-18 {
		font-size: 18px;
	}
	.text-lg-20 {
		font-size: 20px;
	}
	.text-lg-24 {
		font-size: 24px;
	}
	.text-lg-26 {
		font-size: 26px;
	}
	.text-lg-28 {
		font-size: 28px;
	}
	.text-lg-30 {
		font-size: 30px;
	}
	.text-lg-40 {
		font-size: 40px;
	}
	.text-lg-46 {
		font-size: 46px;
	}
}

@media(min-width: 1441px) {
	.text-xl-12 {
		font-size: 12px;
	}
	.text-xl-14 {
		font-size: 14px;
	}
	.text-xl-16 {
		font-size: 16px;
	}
	.text-xl-18 {
		font-size: 18px;
	}
	.text-xl-20 {
		font-size: 20px;
	}
	.text-xl-24 {
		font-size: 24px;
	}
	.text-xl-26 {
		font-size: 26px;
	}
	.text-xl-28 {
		font-size: 28px;
	}
	.text-xl-30 {
		font-size: 30px;
	}
	.text-xl-40 {
		font-size: 40px;
	}
	.text-xl-46 {
		font-size: 46px;
	}
}

/* Fixed aspect ratio images */
.fixed-aspect-ratio-image {
	display: block !important;
	padding-top: 100%;
	background: center no-repeat;
	background-size: cover;
}

.fixed-aspect-ratio-image.r-60 {
	padding-top: 60%;
}

.fixed-aspect-ratio-image.r-75 {
	padding-top: 75%;
}

.fixed-aspect-ratio-image.r-67 {
	padding-top: 67%;
}

#go-to-top {
	position: fixed;
	width: 64px;
	right: 20px;
	bottom: 20px;
	opacity: 0;
	max-width: 0;
	transition: opacity .5s, max-width .0s .5s;
	z-index: 3;
}

#go-to-top.visible {
	opacity: 1;
	max-width: 64px;
	transition: opacity .5s, max-width .0s;
}

.object-fit-cover {
	object-fit: cover;
}

.object-fit-contain {
	object-fit: contain;
}

.object-position-top-center {
	object-position: top center;
}

.accessible-hidden {
	display: inline;
	width: 0;
	height: 0;
	font-size: 0;
	overflow: hidden;
	padding: 0;
	margin: 0;
	-ms-appearance: none;
	-o-appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 0 solid transparent;
}

.font-weight-medium {
	font-weight: 500;
}

.cursor-pointer {
	cursor: pointer;
}

/* Page stretch to 100% screen height */
main {
	min-height: calc(100vh - 143px - 211px);
}

body.admin-bar main {
	min-height: calc(100vh - 143px - 211px - 32px);
}

/* Links */
a:hover .text-primary,
a:hover .text-dark {
	text-decoration: underline;
}

a.left-arrow {
	padding-left: 27px;
	background: url('images/link_arrow.svg') no-repeat;
	background-position: left center;
	background-size: 6px 12px;
}

a.right-arrow {
	padding-right: 40px;
	background-image: url('images/link_arrow.svg');
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 6px 12px;
}

a.right-arrow.right-external-arrow {
	padding-right: 50px;
	background-image: url('images/external_link_arrow.svg');
	background-size: 17px 18px;
}

/* Search */
.page-numbers.current > span {
	background: #0b7773 !important;
	color: white;
}

/* Breadcrumbs */
#breadcrumbs a {
	color: #0B7773;
}

.breadcrumbs-separator {
	display: inline-block;
	margin: 0 15px;
	background-image: url(images/link_arrow.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 6px 12px;
	color: transparent;
}

/* Logo */
.header-logo img {
	max-width: 100%;
}


/* Header links */
.header-link-button {
	display: flex;
}
.header-link-button:after {
	content: "";
	display: inline-block;
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: 30px;
}
@media(max-width: 1199px) {
	.header-link-button {
		font-size: 0;
	}
	.header-link-button:after {
		margin-left: 15px;
	}
}
#change-text-size-button.header-link-button:after {
	width: 27px;
	height: 18px;
	background-image: url(images/text-size-icon.svg);
}
#change-contrast-button.header-link-button:after {
	width: 24px;
	height: 24px;
	background-image: url(images/contrast-icon.svg);
}
#open-search-button.header-link-button:after {
	width: 25px;
	height: 25px;
	background-image: url(images/search-icon.svg);
}
#search-bar-checkbox:checked ~ div #open-search-button.header-link-button:after {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><line x1="1" y1="1" x2="17" y2="17" stroke="rgb(21,89,181)" stroke-width="3"/><line x1="1" y1="17" x2="17" y2="1" stroke="rgb(21,89,181)" stroke-width="3"/></svg>');
}

/* Menu */
.primary-menu,
.primary-menu ul,
.secondary-menu,
.secondary-menu ul,
.side-menu,
.side-menu ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

#menu-button {
	display: flex;
	align-items: center;
	color: #0B7773;
	font-size: 20px;
	text-transform: uppercase;
	cursor: pointer;
	padding: 10px 15px;
	border: 1px solid #D3D3D3;
	transition: color 0.3s;
}
#menu-button:before {
	content: "Lukk";
	position: absolute;
	opacity: 0;
	transition: opacity 0.3s;
}
#menu-button > div {
	display: inline-block;
	width: 20px;
	margin-left: 15px;
}
#menu-button > div > div {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 1000px;
	background-color: #0B7773;
	margin-top: 4px;
	transition: transform 0.3s;
}
#menu-button > div > div:first-child {
	margin-top: 0;
}

#menu-checkbox:checked ~ #menu-button {
	color: transparent;
}
#menu-checkbox:checked ~ #menu-button:before {
	color: #0B7773;
	opacity: 1;
}
#menu-checkbox:checked ~ #menu-button > div > div:nth-child(1) {
	-moz-transform: translateX(0px) translateY(7px) rotate(45deg);
	-webkit-transform: translateX(0px) translateY(7px) rotate(45deg);
	-o-transform: translateX(0px) translateY(7px) rotate(45deg);
	-ms-transform: translateX(0px) translateY(7px) rotate(45deg);
	transform: translate(0,7px) rotate(45deg);
}
#menu-checkbox:checked ~ #menu-button > div > div:nth-child(2) {
	-moz-transform: scale(0,0);
	-webkit-transform: scale(0,0);
	-o-transform: scale(0,0);
	-ms-transform: scale(0,0);
	transform: scale(0,0);
}
#menu-checkbox:checked ~ #menu-button > div > div:nth-child(3) {
	-moz-transform: translateX(0px) translateY(-7px) rotate(-45deg);
	-webkit-transform: translateX(0px) translateY(-7px) rotate(-45deg);
	-o-transform: translateX(0px) translateY(-7px) rotate(-45deg);
	-ms-transform: translateX(0px) translateY(-7px) rotate(-45deg);
	transform: translate(0,-7px) rotate(-45deg);
}
@media(max-width: 768px) {
	#menu-button {
		font-size: 0;
	}
	#menu-button > div {
		margin-left: 0;
	}

}

#main-navigation-container {
	position: absolute;
	top: 100%;
	left: 0;
	width: calc(100% + 40px);
	margin: 0 -20px;
	max-height: 0;
	background-color: #ECF0F0;
	overflow: hidden;
	z-index: 1000;
	-webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
	-moz-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
	-ms-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
	transition: max-height .3s cubic-bezier(0, 1, 0, 1);
	z-index: 100;
}

#menu-checkbox:checked ~ #main-navigation-container {
	max-height: 3000px;
	-webkit-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
	-moz-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
	-ms-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
	transition: max-height .3s cubic-bezier(1, 0, 1, 0);
}


#menu-primary,
#menu-primary > li > .sub-menu {
	list-style: none;
	padding: 0;
}

#menu-primary > li > a {
	font-size: 20px;
	font-weight: 500;
	color: #000000;
}

#menu-primary .sub-menu {
	margin-top: 10px;
	line-height: 2;
	text-decoration: underline;
}

.primary-menu {
	display: flex;
	flex-wrap: wrap;
}

.primary-menu li {
	margin-right: 30px;
}

.primary-menu .sub-menu {
	display: none;
}

.primary-menu a,
.primary-menu a:hover {
	text-decoration: none;
}

.primary-menu > li.current-menu-ancestor > a,
.primary-menu > li.current-menu-item > a {
	position: relative;
}

.primary-menu > li.current-menu-ancestor > a:after,
.primary-menu > li.current-menu-item > a:after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	border-bottom: 1px solid #656564;
}

@media (max-width: 767px) {
	
	/*#main-navigation-container {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		color: white;
		background-color: #e84b37;
		-webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
		-moz-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
		-ms-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
		transition: max-height .3s cubic-bezier(0, 1, 0, 1);
		z-index: 100;
	}

	#menu-checkbox:checked ~ #main-navigation-container {
		max-height: 3000px;
		-webkit-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
		-moz-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
		-ms-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
		transition: max-height .3s cubic-bezier(1, 0, 1, 0);
	}*/

	.primary-menu .sub-menu-checkbox,
	.primary-menu .sub-menu-checkbox + label {
		display: none;
		outline: none;
	}

	.primary-menu .menu-item-has-children {
		position: relative;
	}

	.primary-menu .menu-item-has-children > .sub-menu-checkbox,
	.primary-menu .menu-item-has-children > .sub-menu-checkbox + label {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 12px;
		height: 12px;
		padding: 0;
		margin: 0;
		background-color: transparent;
		border: 0 solid transparent;
		-ms-appearance: none;
		-moz-appearance: none;
		-o-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}

	.primary-menu .menu-item-has-children > .sub-menu-checkbox + label {
		pointer-events: none;
	}

	.primary-menu .menu-item-has-children > .sub-menu-checkbox + label:before,
	.primary-menu .menu-item-has-children > .sub-menu-checkbox + label:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 8px;
		height: 2px;
		background-color: white;
		transform: translate(-50%, -50%);
		transition: transform 0.3s;
	}

	.primary-menu .menu-item-has-children > .sub-menu-checkbox + label:after {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.primary-menu .menu-item-has-children > .sub-menu-checkbox:checked + label:after {
		transform: translate(-50%, -50%);
	}

	.primary-menu .sub-menu {
		padding-left: 20px;
		overflow: hidden;
		max-height: 0;
		-webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
		-moz-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
		-ms-transition: max-height .3s cubic-bezier(0, 1, 0, 1);
		transition: max-height .3s cubic-bezier(0, 1, 0, 1);
	}

	.primary-menu .menu-item-has-children > .sub-menu-checkbox:checked ~ .sub-menu {
		max-height: 3000px;
		-webkit-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
		-moz-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
		-ms-transition: max-height .3s cubic-bezier(1, 0, 1, 0);
		transition: max-height .3s cubic-bezier(1, 0, 1, 0);
	}

	.primary-menu li {
		margin: 20px 0;
	}
}

.menu-item a[href="#"] {
	pointer-events: none;
}

/* Search bar */
#search-bar {
	position: absolute;
	top: 100%;
	left: 0;
	background: #ECF0F0;
	z-index: 1;
	width: calc(100% + 40px);
	margin: 0 -20px;
	padding: 20px 0;
}

#search-bar-checkbox:not(:checked) + #search-bar {
	display: none;
}

.search #search-bar {
	position: static;
}


/* Bootstrap popover */
.popover {
	max-width: 500px;
}

@media disabled {
	/* High contrast (simple) - BODY */
	/* body.high-contrast header, */ /* Header is inside of main */
	body.high-contrast main,
	body.high-contrast footer {
		filter: invert(1);
	}

	/* Invert back all informative images */
	/* body.high-contrast header .avatar, */ /* Header is inside of main */
	/* body.high-contrast header .wp-post-image, */
	/* body.high-contrast header .no-invert */
	body.high-contrast main .avatar,
	body.high-contrast main .wp-post-image,
	body.high-contrast main .no-invert,
	body.high-contrast footer .avatar,
	body.high-contrast footer .wp-post-image,
	body.high-contrast footer .no-invert {
		filter: invert(1);
	}

	body.high-contrast header {
		z-index: 1;
	}
}

/* High contrast (simple) - HTML */
/* body.high-contrast header, */ /* Header is inside of main */
html.high-contrast {
	filter: invert(1);
}

/* Invert back all informative images */
html.high-contrast #wpadminbar,
html.high-contrast .avatar,
html.high-contrast .wp-post-image,
html.high-contrast .no-invert {
	filter: invert(1);
}

html.high-contrast header {
	z-index: 1;
}

/* Login form */
.button.button-primary {
	display: inline-block;
	font-weight: 400;
	color: #414141;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	transition: none;
	color: #fff;
	background-color: #22b7a0;
	border-color: #22b7a0;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
}

#loginform input[type="text"],
#loginform input[type="password"] {
	border: 2px solid #22b7a0;
	border-radius: 0;
	padding: 10px 20px;
}