/*!
Theme Name: Hjemseng Brygge
Theme URI: http://underscores.me/
Author: Insite Media AS
Author URI: https://insitemedia.no
Description: Custom boilerplate for Hjemseng Brygge
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: im-hjemseng-brygge
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.

Hjemseng Brygge 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/
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

:root {
	--main-background: #094366;
	--grey-text: #ebebeb;
	--white-text: #E0E0E0;
	--green-title: #E0D8CE;
	--black-text: #606060;
	--blacker-text: #1D1D1B;
	--primary-color: #B7795D;
}

#page {
	background: var(--grey-text);
}

html {
	font-size: 100%;
	box-sizing: border-box;
}

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

#nf-field-35-wrap small {
    color: #fff !important;
}

#nf-label-field-32 a {
    color: inherit !important;
}

.container-fluid {
	max-width: 95%;
}

#masthead {
	background: var(--main-background);
	height: 96px;
	position: relative;
	z-index: 9999;
}

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

#masthead ul li {
	display: inline;
	margin-left: 25px;
}

#masthead ul li a {
	color: var(--grey-text);
	text-decoration: none;
	font-family: "atrament-web", sans-serif;
	font-weight: 500;
	font-size: 1.35rem;
	transition: all 0.25s;
}

#masthead ul li.current-menu-item a {
	text-decoration: underline;
}

#masthead ul li a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

#mobOverlay {
	transition: all 0.25s;
	top: -200%;
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 500;
	padding-bottom: 25px;
	background: var(--main-background);
	-webkit-box-shadow: 0px 6px 7px 0px rgba(0,0,0,0.3); 
	box-shadow: 0px 6px 7px 0px rgba(0,0,0,0.3);
}

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

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

#mobOverlay ul li a {
	color: var(--white-text);
	text-decoration: none;
}

#mobOverlay ul li.main-btn a {
	text-align: center;
	display: block;
}

#mobOverlay ul li.main-btn {
	margin-top: 25px;
}

#mobOverlay.active {
	top: 96px;
}

.logged-in #mobOverlay.active {
	top: calc(96px + 32px);
}

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

#colophon h3 {
	font-size: 1.75rem;
	color: var(--green-title);
}

#colophon label {
	display: none;
}

p.form-text {
	color: var(--white-text);
	font-size: 0.875rem;
}

p.form-text a {
	text-decoration: underline;
	color: var(--white-text);
}

.nf-form-content input[type="submit"]
{
	padding: 11px 26px !important;
	color: var(--white-text) !important;
	background: transparent !important;
	border: 2px solid var(--white-text) !important;
	border-radius: 0 !important;
}
.nf-form-content input:not([type="submit"]),
.nf-form-content input:not([type="checkbox"]),
.nf-form-content textarea {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid var(--white-text) !important;
}

.nf-form-content input:not([type="submit"])::placeholder,
.nf-form-content input:not([type="checkbox"])::placeholder,
.nf-form-content textarea::placeholder {
	color: var(--white-text);
}

.nf-form-content input[type="submit"]:hover{
	cursor: pointer;
	background: var(--white-text) !important;
	color: var(--main-background) !important;
}

#copyright {
	background: var(--white-text);
	padding: 25px 0;
}

#map {
	margin-bottom: -6px;
}


#copyright p {
	font-size: 1rem;
	color: var(--black-text);
	margin-bottom: 0;
}

#copyright p a {
	color: var(--black-text);
}

#copyright p a:hover {
	color: var(--black-text);
}

a {
	transition: all 0.25s;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "atrament-web", sans-serif;
	color: var(--main-background);
	font-weight: 500;
}

h1 {
	font-size: 3.25rem;
}

h2 {
	font-size: 3rem;
}

h3 {
	font-size: 2.75rem;
}

h4 {
	font-size: 2.5rem;
}

h5 {
	font-size: 2.25rem;
}

h6 {
	font-size: 2rem;
}

p, label, button, span, li, dd, dt, td, th {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.25rem;
}

p {
	font-size: 1.15rem;
}

.main-btn {
	background: var(--primary-color);
	border: 2px solid var(--primary-color);
	transition: all 0.25s;
	color: var(--white-text);
	border-radius: 0;
	padding: 14px 28px;
	text-decoration: none;
	font-family: "atrament-web", sans-serif;
	font-weight: 500;
	font-size: 1.25rem;
}

.main-btn:hover {
	background: transparent;
	cursor: pointer;
	text-decoration: none;
}

.main-btn.outline {
	background: transparent;
	color: var(--blacker-text);
}

.main-btn.outline:hover {
	background: var(--primary-color);
	cursor: pointer;
	text-decoration: none;
}

#hero .main-btn.outline {
	color: var(--white-text);
}

#hero .main-btn:hover {
	color: var(--white-text);
}

#hero .sale-info-banner a.main-btn {
	font-size: 1rem;
}

#hero .sale-info-banner a.main-btn:hover {
	color: var(--blacker-text);
}

.pad h2 {
	margin-bottom: 15px;
}

.subtitle {
	font-family: 'Open Sans', sans-serif;
	color: var(--primary-color);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.25rem;
}

#hero p {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--grey-text);
}

.sale-info-banner {
	position: absolute;
	bottom: 0;
	right: 5%;
	padding: 25px 55px 35px 55px;
	background: #fff;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	z-index: 20;
	text-align: center;
	min-width: 325px;
}

.sale-info-banner h3,
#hero .sale-info-banner p {
	color: var(--main-background);
}

.sale-info-banner h3 {
	font-size: 1.75rem;
	margin-top: 15px;
	margin-bottom: 0;
}

#hero .sale-info-banner a.main-btn {
	padding: 11px 28px;
}

#hero .sale-info-banner p {
	font-size: 1.15rem;
	font-family: "atrament-web", sans-serif;
}

.sale-info-banner i {
	color: var(--primary-color);
	font-size: 2rem;
}

.stages {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	margin: 35px 0;
}

.green {
	background: var(--main-background);
	padding-top: 100px;
	padding-bottom: 100px;
}

.green p {
	color: var(--white-text);
}

@media screen and (max-width: 1200px) {
	#nf-form-5-cont {
		margin-bottom: 35px;
	}
}

.stage h4 {
	color: var(--main-background);
	font-size: 2rem;
}

.circle {
	width: 20px;
	height: 20px;
	border: 2px solid var(--main-background);
	display: block;
	margin: 10px auto;
	background: transparent;
	border-radius: 100%;
}

.circle.done {
	background: var(--main-background);
}

.pad {
	padding: 0 10%;
}

.pad-r {
    padding: 0 10% 0 0;
}

.green .quote {
	color: var(--primary-color);
	font-size: 5.5rem;
	line-height: 0;
	font-family: "atrament-web", sans-serif;
	font-weight: 500;
}

#closeBanner {
	text-align: right;
    position: relative;
    top: -12px;
	right: -30px;
	float: right;
}

#closeBanner:hover {
	cursor: pointer;
}

.green h3 {
	color: var(--white-text);
}

#gallery-home {
	padding: 15px;
}

.pad p {
	margin-bottom: 35px;
}

.intro {
	color: var(--white-text);
	font-size: 1.75rem;
	line-height: 1.5;
	font-family: "atrament-web", sans-serif;
	font-weight: 500;
}

.container-fluid.space {
	margin-top: 55px;
	margin-bottom: 55px;
}

#hero {
	background: var(--main-background);
}

#hero p {
	font-size: 1.25rem;
	line-height: 1.5;
	margin-bottom: 35px;
}

#hero h1 {
	color: var(--grey-text);
	font-size: 2.75rem;
}

#openMenu {
	float: right;
	display: none;
}

#openMenu .line {
	width: 35px;
	margin: 5px 0;
	background: var(--white-text);
	border-radius: 0;
	height: 4px;
	display: block;
	transition: all 0.25s;
}

#openMenu.close #second-line {
	display: none;
}

#openMenu.close #first-line {
	position: relative;
	transform: rotate(45deg);
}

#openMenu.close #third-line {
	position: relative;
	transform: rotate(-45deg);
	top: -9px;
}

#masthead .main-btn {
	white-space: nowrap;
	font-size: 1.1rem;
	padding: 11px 26px;
}

#masthead ul li:first-child {
	margin-left: 0;
}

.people {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	flex-wrap: nowrap;
}

.people .person {
	flex: 1 0 50%;
	max-width: calc(50% - 25px);
	width: calc(50% - 25px);
}

.person p {
	color: var(--white-text);
	margin-bottom: 0;
}

.person a {
	color: var(--white-text);
	text-decoration: none;
}

.person .person-img {
	margin-bottom: 15px;
}

.logo-wrapper {
	padding: 15px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	background: var(--main-background);
	max-width: 87px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.flex-menu-left {
	text-align: right;
}

.flex-menu-right {
	text-align: left;
}

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

.footer-text {
	color: var(--green-title);
	margin-bottom: 35px;
}

#colophon .info p,
#colophon .info p a {
	color: var(--white-text);
}

#colophon .person-bubble {
	gap: 35px;
	margin-bottom: 25px;
}

#colophon .person-bubble .bubble {
	width: 125px !important;
	height: 125px !important; 
}

#minihero .container-fluid {
	position: relative;
	z-index: 100;
}

#minihero #overlay {
	z-index: 50;
	background: #D5D5D5;
	opacity: 0.55;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

h2.lined {
	overflow: hidden;
	text-align: center;
}

h2.lined > span {
	position: relative;
    display: inline-block;
	font-size: 2.5rem;
	font-family: "atrament-web", sans-serif;
	font-weight: 500;
}

h2.lined span::before,
h2.lined span::after {
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px solid var(--primary-color);
    width: 300%; /* half of limiter*/
    margin: 0 20px;
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin: 35px 0;
	justify-content: flex-start;
}

.buttons a {
	flex: 1 0 33%;
	max-width: calc(33% - 5px);
	width: calc(33% - 5px);
	text-align: left;
	font-size: 1.5rem;
	font-family: "atrament-web", sans-serif;
	font-weight: 500;
}

.icons {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	margin: 25px 0;
}

.icons .icon {
	text-align: center;
	flex: 1 0 33%;
	max-width: calc(33% - 15px);
	width: calc(33% - 15px);
	margin-bottom: 35px;
}

.icons .icon i {
	color: var(--primary-color);
	font-size: 3.5rem;
	margin-bottom: 10px;
	display: block;
}

.icons .icon label {
	color: var(--white-text);
	display: block;
	font-size: 1.15rem;
	font-weight: 600;
	font-family: "atrament-web", sans-serif;
	font-weight: 500;
}

.buttons a span {
    float: right;
    font-size: 1.15rem;
    text-decoration: underline;
    font-weight: 400;
    line-height: 2;
}

h2.lined > span:before{
    right: 100%;
}
h2.lined > span:after{
    left: 100%;
}

.stage i {
	color: var(--main-background);
	font-size: 20px;
}

.gallery-list {
	display: none;
}

.person-bubble {
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: flex-start;
	margin-bottom: 15px;
}

.person-bubble .bubble {
	border-radius: 100%;
	width: 100px !important;
	height: 100px !important;
}

.pad h4 {
	font-size: 1.75rem;
}

h4 i {
	color: var(--primary-color);
}

.person-bubble a {
	color: var(--blacker-text);
}

.person-bubble p {
	margin-bottom: 0;
}

.rightfooter {
	text-align: right;
}

.green ul li {
	color: var(--green-title);
	margin-bottom: 6px;
}

#nf-form-3-cont .nf-form-content input:not([type=button]) {
	border-bottom: 2px solid var(--main-background) !important;
	color: var(--blacker-text) !important;
}

#nf-form-3-cont #nf-field-17 {
	background: var(--main-background) !important;
	color: var(--grey-text) !important;
	border: 2px solid var(--main-background) !important;
}

#nf-form-3-cont #nf-field-17:hover {
	cursor: pointer;
	opacity: 0.9 !important;
}

#meld-interesse {
	z-index: 3;
	position: relative;
}

#map iframe {
	position: relative;
	top: -60px;
	margin-bottom: -60px;
}

#nf-form-3-cont .nf-form-content input:not([type=button])::placeholder {
	color: var(--blacker-text) !important;
}

#nf-form-3-cont label {
	font-size: 1rem;
	margin-bottom: 3px;
}

#nf-form-4-cont .nf-form-content input:not([type=button]) {
	border-bottom: 2px solid var(--main-background) !important;
	color: var(--blacker-text) !important;
}

#nf-form-4-cont #nf-field-24 {
	background: var(--main-background) !important;
	color: var(--grey-text) !important;
	border: 2px solid var(--main-background) !important;
}

#nf-form-4-cont #nf-field-24:hover {
	cursor: pointer;
	opacity: 0.9 !important;
}
#nf-form-4-cont .nf-form-content input:not([type=button])::placeholder {
	color: var(--blacker-text) !important;
}

#nf-form-4-cont label {
	font-size: 1rem;
	margin-bottom: 3px;
}
ul.benefits {
	display: flex;
	gap: 0 35px;
	flex-wrap: wrap;
	list-style: none;
	justify-content: flex-start;
}

ul li.benefit {
	border-bottom: 1px solid #E0D8CE75;
	padding: 8px 0;
	flex: 1 0 50%;
	max-width: calc(50% - 17.5px);
	width: calc(50% - 17.5px);
	margin-bottom: 0;
	margin-top: 0;
	font-size: 1.15rem;
}

@media screen and (max-width: 1434px) {
	#masthead .col-sm-4 {
		flex: 1 0 20%;
		max-width: 20%;
		width: 20%;
	}

	#masthead .col-sm-8 {
		flex: 1 0 80%;
		max-width: 80%;
		width: 80%;
	}
}

@media screen and (max-width: 1266px) {
	#masthead ul li {
		margin-left: 15px;
	}
}

@media screen and (min-width: 1921px) {
	.container-fluid {
		max-width: 1880px;
	}
}

@media screen and (max-width: 1200px) {
	.order-md-2,
	.order-md-1 {
		order: 0 !important;
	}

	.leftmenu {
		display: none;
	}

	#copyright .col-sm-6 {
		flex: 1 0 100%;
		max-width: 100%;
		width: 100%;
		text-align: center;
	}

	#copyright img {
		margin-top: 15px;
	}

	#masthead .col-sm-2,
	#masthead .col-sm-5 {
		flex: 1 0 50%;
		max-width: 50%;
		width: 50%;
	}

	.stages,
	.icons {
		flex-wrap: wrap;
	}

	.gallery-list {
		display: block;
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.desk-img {
		display: none;
	}

	.gallery-list img {
		width: 100%;
		height: auto;
		margin-bottom: 15px;
	}

	.icons {
		gap: 0;
		margin-top: 35px;
	}

	.stage, .icons .icon {
		flex: 1 0 50%;
		max-width: 50%;
		width: 50%;
	}

	.stage h4 {
		font-size: 1.75rem;
	}

	.stage h5.subtitle {
		font-size: 1rem;
	}

	#hero {
		height: auto !important;
	}

	.pad {
		padding: 15px 0;
	}
	
	.pad-r {
	    padding: 15px 0;
	}

	#hero a {
		display: inline-block;
		margin-bottom: 25px;
	}

	#hero img {
		margin-bottom: 25px;
	}

	#hero h1 {
		font-size: 2.25rem;
	}

	.sale-info-banner {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	#hero h2.subtitle {
		font-size: 1.25rem;
	}

	#masthead ul {
		display: none;
	}

	#openMenu {
		display: block;
	}

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

	.people {
		flex-wrap: wrap;
		margin-bottom: 35px;
	}

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

	#masthead .col-sm-4,
	#masthead .col-sm-8 {
		flex: 1 0 50%;
		max-width: 50%;
		width: 50%;
	}

	.buttons {
		flex-wrap: wrap;
	}

	#colophon .person-bubble {
		flex-wrap: wrap;
	}

	.person-bubble {
		margin-bottom: 35px;
	}

	.buttons a {
		flex: 1 0 100%;
		max-width: 100%;
		width: 100%;
	}
}

@media screen and (max-width: 783px) {
	.logged-in #mobOverlay.active {
		top: calc(96px + 46px);
	}

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

	.sale-info-banner {
		padding: 25px 55px 25px 55px;
	}

	.pad .main-btn {
		display: inline-block;
		margin-bottom: 10px;
	}

	#hero {
		min-height: 650px !important;
	}

	ul li.benefit {
		flex: 1 0 100%;
		max-width: 100%;
		width: 100%;
	}
}
#nf-label-field-32{
	display: inline-block !important;
	box-shadow: none !important;
    color: var(--white-text) !important;
	
}
.nf-form-content input[type="submit"] {
    border: 2px solid var(--white-text) !important; /* Replace #000 with your desired color */
}