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

Kanalparken 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: #4F758B;
	--grey-text: #ebebeb;
	--white-text: #E0E0E0;
	--green-title: #E0D8CE;
	--black-text: #606060;
	--blacker-text: #1D1D1B;
	--primary-color: #a7b5c1;
}

#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(--main-background);
	border: 2px solid var(--main-background);
	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;
	color: var(--main-background);
	background: #fff !important;
	border-color: var(--main-background);
}

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

.nf-field-element {
color: var(--white-text) !important; 
}

.nf-field-element input {
	color: inherit !important;
}

.nf-field-element input::placeholder {
	color: var(--white-text) !important;
}

#nf-label-field-32 {
	display: none !important;
}

.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%);
	position: unset !important;
	padding: 0 !important;
	text-align: center;
	transform: unset !important;
	top: unset;
	left: unset;
}

.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-form-content input[type="submit"] {
    border: 2px solid var(--white-text) !important; /* Replace #000 with your desired color */
}