/*!
Theme Name: Holmejordetveien
Theme URI: http://underscores.me/
Author: Insite Media AS
Author URI: https://insitemedia.no
Description: Custom boilerplate for BE - Holmejordetveien
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: holmetjordetveien
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.

Holmejordetveien is based on Underscores https://underscores.me/, (C) 2012-2020 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/
*/

:root {
	--var-main: #001F3E;
	--var-acc: #E2D0B3;
	--var-sec: #F8F5EF;
	--var-white: #F4F4F4;
	--var-black: #404040;
}

.boligvelger .icon-wrapper i {
    color: var(--var-main) !important;
}

html {
	font-size: 100%;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3 {
	font-family: "questa-grande", serif;
	font-style: italic;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h4, h5, h6 {
	font-family: "din-2014", sans-serif;
	color: var(--var-acc);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.custom-logo {
    max-width: 100%;
}

h1 {
	font-size: 2.986rem;
}

h2 {
	font-size: 2.488rem;
}

h3 {
	font-size: 2.074rem;
}

h4 {
	font-size: 1.728rem;
}

h5 {
	font-size: 1.44rem;
}

h6 {
	font-size: 1.2rem;
}

p, label, small, button, a {
	font-family: "din-2014", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p {
	font-size: 1.25rem;
	line-height: 1.5;
}

.container-fluid {
	max-width: 90%;
	margin: 0 auto;
}

#masthead {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: transparent;
	height: 110px;
	z-index: 50;
}

#masthead nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 35px;
	justify-content: flex-end;
	align-items: center;
}

#masthead nav ul li a {
	text-decoration: none;
	color: var(--var-white);
	font-weight: 600;
	font-size: 1.25rem;
}

.button-wrapper {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: center;
}

.button-wrapper a {
	display: block;
	flex: 1;
}

.logged-in #masthead {
	top: 32px;
}



#mobOverlay {
	position: fixed;
	top: 0;
	right: -100vw;
	width: 100%;
	z-index: 90;
	height: 100vh;
	background: var(--var-main);
	transition: all 0.25s;
}

.logged-in #mobOverlay {
	top: 46px;
}

#mobOverlay ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#mobOverlay ul li {
	margin: 8px 0;
}

#mobOverlay ul li a {
	color: var(--var-white);
	font-size: 1.5rem;
	font-weight: 500;
	text-decoration: none;
}

#mobOverlay.active {
	right: 0;
}

#openMenu {
	display: none;
}

#openMenu .line {
	width: 36px;
	height: 4px;
	border-radius: 4px;
	background: var(--var-sec);
	margin: 6px 0;
}

#hero {
	position: relative;
}

#hero .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
}

#hero .container-fluid {
	position: absolute;
	z-index: 20;
	bottom: 15%;
	left: 5%;
}

.main-btn {
	display: inline-block;
	padding: 15px 40px;
	border: 2px solid var(--var-acc);
	background: var(--var-acc);
	color: var(--var-black);
	text-decoration: none;
	border-radius: 50px;
	margin-top: 15px;
	text-transform: uppercase;
	font-weight: 400;
	transition: all 0.25s;
}

.main-btn:hover {
	background: transparent;
	color: var(--var-white);
}

#hero h6 {
	text-transform: uppercase;
}

#hero h1 {
	color: var(--var-white);
}

.center {
	text-align: center;
}

#yellow {
	background: var(--var-sec);
	height: 100svh;
}

#galleryBackground {
	background: var(--var-sec);
	padding-top: 104px;
	padding-bottom: 104px;
}

.main-gallery {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 25px;
	flex-wrap: wrap;
}

#float {
	position: fixed;
	bottom: 37px;
	right: 31px;
	background: var(--var-main);
	border-radius: 15px;
	padding: 17px 28px;
	display: flex;
	gap: 35px;
	align-items: center;
	z-index: 900;
}

@media screen and (max-width: 900px) {
	#float {
		right: 0;
		max-width: 95%;
		left: 2.5%;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
		text-align: center;
	}

	#float a.floatbtn {
		flex: 1 0 100%;
		max-width: 100%;
		text-align: center;
		width: 100%;
	}
}

#float a.floatbtn {
	background: var(--var-acc);
	color: var(--var-black);
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 38px;
	font-size: 1rem;
	border-radius: 25px;
	font-weight: 500;
	font-family: "din-2014", sans-serif;
	transition: all 0.25s;
	border: 2px solid var(--var-acc);
}

#float a.floatbtn:hover {
	background: transparent;
	color: var(--var-white);
}

#float h3 {
	color: var(--var-white);
	margin: 0;
	font-size: 2rem;
}

#float span.big {
	display: block;
	text-transform: uppercase;
	color: var(--var-acc);
	font-size: 0.9rem;
}

.boligvelger .controls-row a.btn.back {
	display: none !important;
}

.main-gallery img {
	border-radius: 15px;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.main-gallery li {
	flex: 1 0 50%;
	width: calc(50% - 12.5px);
	max-width: calc(50% - 12.5px);
}

#yellow h6 {
	color: var(--var-main);
	text-transform: uppercase;
	font-size: 1rem;
}

#yellow h2 {
	color: var(--var-black);
	margin-bottom: 24px;
	font-size: 3.25rem;
}

#yellow p {
	color: var(--var-black);
}

#yellow p {
	margin-bottom: 69px;
	opacity: 0.8;
}

#blue {
	background: var(--var-main);
	height: 100svh;
}

#blue a.main-btn,
#blue a.sec-btn,
#yellow a.main-btn,
#yellow a.sec-btn {
	margin-top: 0;
}

#blue h6 {
	color: var(--var-acc);
	font-size: 1rem;
	text-transform: uppercase;
}

#blue h2 {
	color: var(--var-white);
	margin-bottom: 24px;
	font-size: 3.25rem;
}

#blue.spacing-top {
	padding-top: 104px;
	padding-bottom: 104px;
	height: auto;
}

#blue p {
	color: var(--var-white);
	margin-bottom: 69px;
	opacity: 0.8;
}

.sec-btn,
#nf-field-6 {
	display: inline-block;
	padding: 15px 40px;
	border: 2px solid var(--var-main);
	background: var(--var-main);
	color: var(--var-white);
	text-decoration: none;
	border-radius: 50px;
	margin-top: 15px;
	text-transform: uppercase;
	font-weight: 400;
	transition: all 0.25s;
}

.sec-btn:hover,
#nf-field-6:hover {
	background: transparent !important;
	color: var(--var-black);
}

#nf-field-6 {
	height: unset !important;
	border: 2px solid var(--var-acc) !important;
	background: var(--var-acc) !important;
	color: var(--var-black) !important;
	text-decoration: none !important;
	border-radius: 50px !important;
}

#nf-field-6:hover {
	color: var(--var-white) !important;
}

.people {
	display: flex;
	gap: 34px;
	margin-top: 63px;
}

.people img {
	width: 100%;
}

.people .person {
	flex: 1 0 50%;
	max-width: calc(50% - 17px);
	display: flex;
	flex-direction: column;
	text-align: left;
	align-items: flex-start;
}

.people .person h3 {
	margin-top: 26px;
	margin-bottom: 7px;
}

.person a {
	color: var(--var-black);
	text-decoration: none;
	transition: all 0.25s;
}

.person h3 {
	margin-bottom: 0;
}

.person a:hover {
	padding-left: 3px;
}


.nf-form-content label {
	display: none !important;
}

.nf-field-element input:not([type="submit"]),
.nf-field-element textarea {
	padding: 15px 0 !important;
	height: unset !important;
	color: var(--var-white) !important;
	font-size: 1.25rem !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--var-white) !important;
}

.nf-field-element input:not([type="submit"])::placeholder,
.nf-field-element textarea::placeholder {
	color: var(--var-white) !important;
}

#nf-field-5-container {
	margin-bottom: 0 !important;
}

#colophon {
	background: var(--var-main);
	padding-top: 67px;
	padding-bottom: 67px;
}

#colophon ul {
	margin: 43px 0 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 27px;
	justify-content: center;
}

#colophon ul li a {
	color: var(--var-white);
	font-weight: 600;
	text-decoration: none;
}

.image-gallery-wrapper {
	position: relative;
}

.inline-gallery {
	position: relative;
	margin-bottom: 74px;
}

.image-gallery-wrapper .arrow,
.inline-gallery .arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 67px;
	height: 67px;
	background: var(--var-main);
	border-radius: 100%;
	opacity: 0.75;
	transition: all 0.25s;
}

.arrow:hover {
	opacity: 1;
	cursor: pointer;
}


.arrow-left {
	left: 34px;
}

.arrow-right {
	right: 34px;
}

.arrow i {
	font-size: 2rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--var-acc);
}

.images {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	aspect-ratio: 16 / 9;
	justify-content: flex-start;
	overflow: scroll;
	scroll-behavior: smooth;
}

.inline-gallery .images {
	aspect-ratio: unset;
	height: 50vh;
	gap: 20px;
}

.inline-gallery .images .image {
	flex: 1 0 20%;
	max-width: calc(20% + 100px);
	width: calc(20% + 100px);
	opacity: 0.25;
	transition: all 0.25s;
}

.inline-gallery .images .image.active {
	opacity: 1;
}

@media screen and (max-width: 800px) {
	.inline-gallery .images .image {
		flex: 1 0 80%;
		max-width: 80%;
		width: 80%;
		opacity: 0.5;
		scroll-snap-align: center; /* Centers the element within the viewport when scrolled */
	}

	.inline-gallery .images {
		scroll-snap-type: x mandatory; /* Enables snapping in the horizontal direction */
		scroll-padding: 0; /* Optional: Adjusts the start position for snapping */
		-webkit-overflow-scrolling: touch; /* Enables smooth scrolling on mobile */
	}
}

.icon-list {
	display: flex;
	align-items: flex-start;
	gap: 68px;
	justify-content: center;
}

.icon {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.icon i {
	color: var(--var-white);
	font-size: 4rem;
	margin-bottom: 23px;
}

.icon-list strong {
	color: var(--var-white);
	font-size: 1.25rem;
}

.icon-list p {
	margin-bottom: 0;
	font-size: 1.25rem;
	opacity: 0.8;
}

.images::-webkit-scrollbar {
	display: none;
}

.image {
	flex: 1 0 100%;
	max-width: 100%;
	width: 100%;
	border-radius: 15px;
	overflow: hidden;
}

#colophon p {
	color: var(--var-acc);
}

#colophon p a {
	color: inherit;
}

.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr; /* Two equal columns */
	grid-template-rows: 1fr 1fr; /* Two equal rows */
	gap: 18px; /* 18px gap between grid items */
	margin-bottom: 57px;
}

.grid-container img {
	border-radius: 15px;
	max-width: 100%;
}

.whitespace {
	padding-top: 50px;
	padding-bottom: 50px;
}

.col-sm-12.yellow {
	background: var(--var-sec);
	border-radius: 15px;
}

.flex-progress {
	display: flex;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 45px;
	padding-right: 45px;
	gap: 40px;
}

.flex-progress h6 {
	font-size: 1rem;
	color: var(--var-black);
}

.flex-progress h3 {
	font-weight: 700;
	font-size: 1.85rem;
	color: var(--var-black);
}

.progress-step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}

.progress-step .line {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0;
}

.progress-line {
	width: 100%;
	height: 3px;
	background: var(--var-main);
	position: relative;
    z-index: 10;
	border-radius: 5px;
}

.progress-circle {
	width: 19px;
	height: 19px;
	background: var(--var-main);
	border: 4px solid #7B8996;
	border-radius: 100%;
	box-sizing: content-box;
	margin-left: -20px;
}

#closeMenu {
	position: absolute;
	top: 6%;
	right: 8%;
}

#closeMenu .line {
	width: 36px;
	height: 4px;
	border-radius: 4px;
	background: var(--var-white);
}

.custom-logo {
	min-width: 100px;
	max-width: 100px;
	height: auto;
}

#closeMenu .line.left {
	transform: rotate(45deg);
}

#mobOverlay .container-fluid {
	padding-top: 31px;
}

#closeMenu .line.right {
	transform: rotate(-45deg);
	position: relative;
	top: -4px;
}

.inactive {
	opacity: 0.25;
}

.grid-item.a {
	grid-column: 1; /* First column */
	grid-row: 1; /* First row */
}

.grid-item.b {
	grid-column: 2; /* Second column */
	grid-row: 1 / span 2; /* Span across both rows in the second column */
	margin-top: 20%;
}

.grid-item.c {
	grid-column: 1; /* First column */
	grid-row: 2; /* Second row */
}

.grid-item {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
}

#map iframe {
	margin-bottom: -6px !important;
}

body:not(.home) #masthead {
	position: unset;
	background: var(--var-main);
}

table {
	width: 100%;
}

.boligvelger .container-fluid.space, .boligvelger .container.space, .boligvelger .container-fluid {
	max-width: 90% !important;
}

@media screen and (max-width: 900px) {
	.logged-in #masthead {
		top: 46px;
	}
}

@media screen and (max-width: 1320px) {
	.col-sm-1,
	.col-sm-2,
	.col-sm-3,
	.col-sm-4,
	.col-sm-5,
	.col-sm-6,
	.col-sm-7,
	.col-sm-8,
	.col-sm-9,
	.col-sm-10,
	.col-sm-11,
	.col-sm-12 {
		flex: 1 0 100%;
		max-width: 100%;
		width: 100%;
	}

	#masthead .col-sm-6 {
		flex: 1 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}

	#openMenu {
		float: right;
	}

	#masthead nav {
		display: none;
	}

	#openMenu {
		display: block;
	}

	.flex-progress,
	.icon-list {
		flex-wrap: wrap;
	}

	.icon-list {
		gap: 20px;
	}

	.flex-progress .progress-step {
		flex: 1 0 100%;
		max-width: 100%;
		width: 100%;
	}

	.icon-list .icon {
		flex: 1 0 50%;
		max-width: calc(50% - 10px);
		width: calc(50% - 10px);
	}

	.people {
		flex-wrap: wrap;
	}

	.people .person {
		flex: 1 0 100%;
		max-width: 100%;
		width: 100%;
	}

	#yellow,
	#blue {
		height: auto;
		padding-top: 104px;
		padding-bottom: 104px;
	}

	#colophon ul {
		flex-wrap: wrap;
	}

	#colophon ul li {
		flex: 1 0 100%;
		max-width: 100%;
		width: 100%;
	}

	#yellow .person p {
		margin-bottom: 0;
	}
}