@charset "UTF-8";
@import url('<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');


html, body, header, nav, main, footer, section, article, figure, picture,
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, input, button, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body {
	background: #557734;
	background-size: 100% 100%;
	font-family: "Open Sans", sans-serif;
	color: #557734;
	font-size: 100%;
	accent-color: #557734;
	--color: #557734;
	--checked-color: #557734;
	--bg-color: #ffffff;
}

.skip {
	height: 0;
}

.skip a {
	position: absolute;
	display: block;
	z-index: -1;
	background-color: #557734;
	color: #FFFFFF;
	font-size: 1.3rem;
	width: auto;
	height: auto;
	padding: 0.8rem;
	overflow: hidden;
}

.skip a:focus, .skip a:focus-visible {
	z-index: 100;
}

header {
	background-color: #ffffff;
	width: 96%;
	margin: 0 0;
	padding: 2%;
}

#navBar {
	text-transform: uppercase;
}

#navBar a:link, #navBar a:visited, #navBar a:active {
	display: block;
	padding: 1rem;
	color: #557734;
	text-decoration: none;
}

#navBar a:hover {
	background-color: #557734;
	color: #ffffff;
}

#navBar a:focus-visible, #navBar a:focus-visible {
	box-shadow: 0 0 0px 2px #ffffff, 0 0 0px 5px #557734;
}

main {
	background-color: #ffffff;
	width: 96%;
	margin: 0 0;
	padding: 2%;
}

main i {
	vertical-align: middle;
}

main a:link, main a:visited, main a:active {
	font-size: 1.3rem;
	color: #557734;
	text-decoration: none;
	border-bottom: 1px solid #557734;
}

main a:focus, main a:focus-visible  {
	outline: 3px solid #557734;
	outline-offset: 0.3rem;
}

main a:hover {
	border-bottom: 3px solid #557734;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100;
	opacity: 0;
	transition: .75s ease;
	background-color: #557734;
}

footer {
	background-color: #ffffff;
	width: 96%;
	margin: 0 0;
	padding: 3% 2%;
	text-align: center;
}

footer a:link, footer a:visited, footer a:active {
	font-size: 1.3rem;
	color: #557734;
	text-decoration: none;
	border-bottom: 1px solid #557734;
}

footer a:focus, footer a:focus-visible {
	outline: 3px solid #557734;
	outline-offset: 0.3rem;
}

footer a:hover {
	border-bottom: 3px solid #557734;
	text-decoration: none;
}

h1, h2, h3 {
	font-weight: 600;
}

h1 {
	font-size: 2.8rem;
	margin: 2rem 0 1rem 0;
}

h2 {
	font-size: 2.2rem;
}

h3 {
	font-size: 1.8rem;
}

h2, h3 {
	margin: 2.5rem 0 1rem 0;
}

.programlista {
	width: 100%;
	list-style: none;
	font-size: 1.3rem;
	line-height: 1.8rem;
}

.programlistaFet {
	font-weight: bolder;
}

section {
	width: 100%;
	margin: 1% 0;
}

section p {
	font-size: 1.3rem;
	line-height: 2rem;
}

section i {
	padding: 0 0 5px 0;
}

strong, address {
	font-weight: bolder;
}

address {
	font-size: 1.3rem;
}

blockquote {
	display: block;
	font-size: 1.3rem;
	line-height: 2rem;
}

blockquote::before {
	content: open-quote;
}

blockquote::after {
	content: close-quote;
}

figcaption {
	font-size: 1.3rem;
}

form {
	display: block;
}

label {
	font-size: 1.3rem;
	display: block;
	font-weight: bold;
}

fieldset label {
	font-weight: normal;
}

.labeldescription {
	display: block;
	font-weight: normal;
	margin: 5px 0 7px;
}

.errorMessage {
	display: none;
	font-weight: normal;
	color: #773434;
}

#antalPlatserDiv, #delarBilMedDiv {
	display: none;
}

input[type=text], input[type=tel], input[type=number], textarea, select {
	padding: 0.8rem;
	margin: 0.5rem 0 1.5rem;
	font-family: "Open Sans", sans-serif;
	font-size: 1.3rem;
	font-weight: normal;
	color: #557734;
	border: 2px solid #557734;
	border-radius: 10px;
}

input[type=radio] {
	height: 1.5rem;
    width: 1.5rem;
	margin: 0 1rem -0.2rem 0;
	appearance: none;
	-webkit-appearance: none;
	border: 2px solid #ffffff;
    background-color: var(--bg-color);
    border-radius: 50%;
	box-shadow: 0 0 0 2px var(--color);
	cursor: pointer;
}

fieldset {
	margin-bottom: 2rem;
}

legend {
	font-size: 1.3rem;
	display: block;
	font-weight: bold;
	margin-bottom: 1rem;
}

input[type=submit], input[type=reset] {
	font-size: 1.5rem;
	border: 2px solid #557734;
	padding: 0.5rem 1rem;
	margin: 1rem 1rem 1rem 0;
	border-radius: 7px;
	cursor: pointer;
}

input[type=submit] {
	background-color: #557734;
	color: #ffffff;
}

input[type=reset] {
	background-color: #FFFFFF;
	color: #557734;
}

input[type=text]:focus-visible, input[type=tel]:focus-visible, input[type=number]:focus-visible,  textarea:focus-visible, select:focus-visible {
	background-color: #fafff5;
	outline: 3px solid #557734;
	outline-offset: 0.3rem;
}

input[type=text]:hover, input[type=tel]:hover, input[type=number]:hover, textarea:hover, select:hover {
	background-color: #fafff5;
}

input[type=submit]:focus-visible, input[type=reset]:focus-visible {
	outline: 3px solid #557734;
	outline-offset: 0.3rem;
}

input[type=radio]:focus-visible {
	outline: 3px solid #557734;
	outline-offset: 0.3rem;
}

input[type=radio]:hover {
	border-width: 0;
	background-color: #fafff5;
}

input[type=radio]:checked {
	box-shadow: 0 0 0 2px var(--checked-color);
    background-color: var(--checked-color);
    border-width: 0.2rem;
}

.sr-only {
    position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

@media (min-width:200px) and (max-width:800px) {
	body {
		background: 0;
	}

	header, main, footer {
		width: 96%;
		margin: 0;
		padding: 2%;
	}

	footer {
		padding: 5% 2%;
	}

	header a:focus, header a:focus-visible {
		outline: 1px solid #557734;
		outline-offset: 0.1rem;
	}

	header img {
		width: 100%;
	}

	#menuBtnContainer {
		background-color: #ffffff;
		width: 94%;
		margin: 0;
		padding: 1% 3%;
	}

	#menuButton {
		width: 100%;
		border: 2px solid #557734;
		color: #557734;
		font-weight: 600;
		margin: 1% 0;
		padding: 0.7rem;
		text-transform: uppercase;
	}

	#menuBtnText, #menuButton i {
		vertical-align: middle;
		padding: 0 0.3rem;
	}

	#menuButton:focus {
		background-color: #557734;
		color: #ffffff;
		outline: 3px solid #557734;
		outline-offset: 0.3rem;
	}

	#menuButton:hover {
		background-color: #557734;
		color: #ffffff;
		cursor: pointer;
	}

	#navBar {
		width: 96%;
		margin: 0 2%;
		padding: 0 1%;
		background-color: #ffffff;
		display: none;
	}

	#navBar ul {
		background-color: #ffffff;
		width: 98%;
		border: 1px solid #557734;
		display: flex;
		flex-direction: column;
		list-style: none;
	}

	#navBar ul li {
		border-bottom: 1px solid #557734;
		font-size: 1.3rem;
		font-weight: 600;
	}

	#navBar i {
		float: right;
	}

	#navBar a:link, #navBar a:visited, #navBar a:active {
		display: block;
		padding: 3%;
	}

	#navBar a:hover {
		display: block;
		background-color: #557734;
		color: #ffffff;
	}

	#navBar a:focus-visible, #navBar a:focus-visible {
		box-shadow: 0 0 0px 2px #ffffff, 0 0 0px 5px #557734;
	}

	h1, h2, h3 {
		width: 100%;
		margin-left: 5%;
	}

	section {
		width: 90%;
	}
	
	section p, section ul, section address, section blockquote {
		width: 100%;
		margin-left: 5%;
		margin-right: 5%;
		margin-bottom: 1rem;
	}

	section ul li {
		margin-bottom: 2%;
	}

	figure {
		margin-left: 5%;
		margin-right: 5%;
		margin-bottom: 1rem;
	}
	
	figure img {
		width: 110%;
		height: auto;
	}

	figcaption {
		margin-top: 0.5rem;
		margin-bottom: 1rem;
	}
	
	.mainImageContainer {
		width: 98%;
		display: flex;
		justify-content: center;
		margin: 1% 0;
		padding: 0 1%;
	}
	
	.mainImage {
		width: 100%;
	}

	.mainImage img {
		width: 100%;
		height: auto;
	}

	form {
		width: 90%;
		margin: 0 5% 0;
	}

	input[type=text], input[type=tel], input[type=number], textarea {
		width: 95%;
	}

	select {
		width: 30%;
	}
}

@media (min-width:801px) and (max-width:1480px) {
	header a:focus, header a:focus-visible {
		outline: 1px solid #557734;
		outline-offset: 0.2rem;
	}

	header img {
		width: 100%;
		height: auto;
	}
	
	#menuBtnContainer {
		background-color: #ffffff;
		width: 94%;
		margin: 0 0;
		padding: 1% 3% 0;
	}

	#menuButton {
		width: 100%;
		border: 2px solid #557734;
		color: #557734;
		font-weight: 600;
		margin: 1% 0;
		padding: 0.7rem;
		text-transform: uppercase;
	}
	
	#menuBtnText, #menuButton i {
		vertical-align: middle;
		padding: 0 0.3rem;
	}

	#menuButton:focus {
		background-color: #557734;
		color: #ffffff;
		outline: 3px solid #557734;
		outline-offset: 0.3rem;
	}

	#menuButton:hover {
		background-color: #557734;
		color: #ffffff;
		cursor: pointer;
	}

	#navBar {
		width: 100%;
		margin: 0 0;
		padding: 0 0;
		background-color: #ffffff;
		display: none;
	}

	#navBar ul {
		width: 94%;
		margin: 0 3%;
		background-color: #ffffff;
		border: 1px solid #557734;
		display: flex;
		flex-direction: column;
		list-style: none;
	}

	#navBar ul li {
		border-bottom: 1px solid #557734;
		font-size: 1.3rem;
		font-weight: 600;
	}

	#navBar i {
		float: right;
	}

	#navBar a:link, #navBar a:visited, #navBar a:active {
		display: block;
		padding: 3%;
	}

	#navBar a:hover {
		display: block;
		background-color: #557734;
		color: #ffffff;
	}

	#navBar a:focus-visible, #navBar a:focus-visible {
		box-shadow: 0 0 0px 2px #ffffff, 0 0 0px 5px #557734;
	}

	h1, h2, h3 {
		width: 80%;
		margin-left: 10%;
	}

	section p, section ul, section address, section blockquote  {
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		margin-bottom: 1.5rem;
	}

	section ul li {
		margin-bottom: 1.5%;
	}

	figure {
		margin-left: 10%;
		margin-right: 10%;
		margin-bottom: 1rem;
	}
	
	figure img {
		width: 100%;
		height: auto;
		box-shadow: 0 0 15px #557734;
	}

	figcaption {
		margin-top: 0.5rem;
		margin-bottom: 1.5rem;
	}
	
	.mainImageContainer {
		width: 100%;
		margin: 1% 0;
		display: flex;
		justify-content: center;
	}
	
	.mainImage {
		width: 98%;
	}

	.mainImage img {
		width: 100%;
		height: auto;
		box-shadow: 0 0 15px #557734;
	}

	form {
		width: 80%;
		margin: 0 10% 0;
	}

	input[type=text], input[type=tel], input[type=number], textarea {
		width: 80%;
	}

	select {
		width: 30%;
	}
}

@media (min-width:1481px) and (max-width:2560px) {
	header a:focus, header a:focus-visible {
		outline: 1px solid #557734;
		outline-offset: 0.9rem;
	}
	
	header img {
		width: 100%;
		height: auto;
	}

	#menuButton {
		display: none;
	}

	#navBar {
		display: block;
		width: 98%;
		margin: 0 0;
		padding: 0 1%;
		background-color: #ffffff;
		border-bottom: 3px solid #557734;
	}
	
	#navBar ul {
		display: flex;
		flex-direction: row;
		justify-content: center;
		list-style: none;
	}
	
	#navBar li {
		font-size: 1.2rem;
		font-weight: 600;
	}
	
	#navBar i {
		display: none;
	}
	
	#navBar span {
		vertical-align: middle;
	}

	h1, h2, h3 {
		width: 70%;
		margin-left: 15%;
	}

	section p, section ul, section address, section blockquote {
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
		margin-bottom: 1.5rem;
	}

	section ul li {
		margin-bottom: 1.5%;
	}

	.mainImageContainer {
		width: 100%;
		margin: 1% 0;
		display: flex;
		justify-content: center;
	}

	.mainImage {
		width: 80%;
	}
	
	.mainImage img {
		width: 100%;
		height: auto;
		box-shadow: 0 0 20px #557734;
	}

	figure {
		margin-left: 15%;
		margin-right: 15%;
		margin-bottom: 1rem;
	}
	
	figure img {
		width: 100%;
		height: auto;
		box-shadow: 0 0 20px #557734;
	}

	figcaption {
		margin-top: 0.5rem;
		margin-bottom: 1.5rem;
	}

	form {
		width: 70%;
		margin: 0 15% 0;
	}

	input[type=text], input[type=tel], input[type=number], textarea {
		width: 80%;
	}

	select {
		width: 30%;
	}
}