@import url('fonts/fonts.css');


.nonce,
.nf-before-form-content,
.ninja-forms-req-symbol
{display:none !important}

.nf-form-content,#ninja_forms_required_items, .nf-field-container{
	margin: 0 !important;
	padding: 0 !important;
}
nf-fields-wrap{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .2rem;
}
nf-field{
	display: contents;
}
nf-field>:not(.half){
	grid-column: 1 / 3;
}

.label-above .nf-field-element, .label-below .nf-field-element,
.nf-error-msg{
	text-align: center;
}
.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit]{
	text-transform: uppercase !important;
	background: var(--c-green) !important;
	color: var(--c-blue) !important;
}
.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type=button]), .nf-form-content textarea{
	border-color: var(--c-blue) !important;
	background: var(--c-white) !important;
	font-family: inherit !important;
}

:root{
	font-family: 'text', serif;
	font-size: 100px;
	font-weight: 400;
	--c-green-base: 182 227 173;
	--c-green: rgb( var(--c-green-base) / 1);
	--c-blue-base: 143 171 220;
	--c-blue: rgb( var(--c-blue-base) / 1);
	--c-white-base: 255 255 255;
	--c-white: rgb( var(--c-white-base) / 1);
	--c-white-trans: rgb( var(--c-white-base) / .5);
}
body{
	margin: 1.25rem 0 0;
	background: var(--c-white);
	font-size: .22rem;
}


img{
	display: block;
	margin: 0;
	padding: 0;
	max-width: 100%;
	height: auto;
	border: none;
}
h1, h2, h3, h4, h5, h6{
	margin: 0 auto .2rem;
	text-align: center;
}
h1{
	font-size: .4rem;
	font-weight: 400;
}
h2{
	font-size: .4rem;
	font-weight: 400;
	max-width: 5rem;
}


.content{
	display: block;
	max-width: 15rem;
	padding: 0 .25rem;
	margin: auto;
	width: 100%;
	box-sizing: border-box;
}

header{
	position: fixed;
	inset: 0 0 auto;
	height: 1.25rem;
	background: var(--c-white);
	z-index: 9;
}


:is(header,footer) .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

header a{
	height: .64rem;
	width: 1.64rem;
	background: url(img/olavius.svg) left top no-repeat;
	background-size: contain;
}

header span{
	color: var(--c-green);
    display: flex;
    justify-content: space-between;
    align-items: center;
	cursor: pointer;
}

header span:before{
	content: "";
	float: left;
	width: .24rem;
	height: .24rem;
	background: url(img/ico_login.svg) left center no-repeat;
	background-size: contain;
	margin-right: .1rem;
}

footer{
	position: fixed;
	inset: auto 0 0;
	height: 1.4rem;
	--c-alpha: .5;
	background: var(--c-white-trans);
	backdrop-filter: blur(.04rem) brightness(120%);
	-webkit-backdrop-filter: blur(.04rem) brightness(120%);
	color: var(--c-blue);
	font-size: .16rem;
	font-weight: 600;
}

footer img{
	width: 1.96rem;
	margin-top: .1rem;
}

footer span:last-child{
	text-align: right;
}

section{
	min-height: calc(100vh - 1.25rem);
	box-sizing: border-box;
	padding: .5rem 0 calc(1.4rem + .5rem);
	display: flex;
    align-items: center;
	color: var(--c-green);
}

section.green{
	background: var(--c-green);
	color: var(--c-white);
}
section.blue{
	background: var(--c-blue);
	color: var(--c-white);
}

dialog{
	background: var(--c-white);
	color: var(--c-green);
	border: none;
	padding: 0;
	width: 100%;
	max-width: 4.9rem;
	opacity: 0;
	filter: blur(.1rem);
	transform: translateY(1rem);
	transition: filter ease .5s, 
				opacity ease .5s, 
				transform ease .5s;
}
dialog>close{
	position: absolute;
	right: .4rem;
	top: .4rem;
	height: .32rem;
	width: .32rem;
	background: url(img/ico_close.svg) center no-repeat;
	background-size: contain;
	cursor: pointer;
}
dialog>:not(close){
	padding: .4rem;
	display: none;
}
dialog.contact>.contact,
dialog.login>.login{
	display: block;
}

dialog::backdrop{
	background: rgb( 0 0 0 / .25);
	backdrop-filter: blur(.04rem) brightness(80%);
	-webkit-backdrop-filter: blur(.04rem) brightness(80%);

	opacity: 0;
	filter: blur(.1rem);
	transition: filter ease .5s, opacity ease .5s;
}
dialog.show,
dialog.show::backdrop{
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

.desktop{
	display: block;
}
.mobile{
	display: none;
}
@media screen and (max-width: 800px){
	:root{
		font-size: calc(100vw / 8)
	}
	section{
		min-height: auto;
	}
	.desktop{
		display: none;
	}
	.mobile{
		display: block;
	}
}