/* Generell styling för alla sidor*/
/* styling för index.css sidan */
/* styling menyn */
/* vissa sidor har egen styling */

.main-desktop {
	display: block;
}
.main-mobile {
	display: none;
}

@media (max-width: 1023px) {
	.main-desktop {
		display: none;
	}
	.main-mobile {
		display: block;
	}
}
/* container */
/* .container {
	width: 100%;
	height: calc(100% + 20rem);
	margin: 1rem auto 1rem auto;
	padding-top: 10rem;
	background-color: #46b6eb;
} */

/* end of container */

/* *** MAIN-DESKTOP *** */
.main-desktop {
	nav.nav-desktop {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 10;
		width: 100%;
		height: 10rem;
		padding: 0 5rem 0 5rem;
		background: linear-gradient(135deg, #0d5cdb 0%, #46b6eb 100%);

		@media (max-width: 1040px) {
			& {
				padding: 0 1rem 0 1rem;
				width: 100%;
			}
		}
		@media (300px <= width <= 767px) {
			height: 5.5rem;
		}
	}

	nav.navbar a {
		text-decoration: none;
	}

	.nav-data-desktop {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* **** STYLING AV LOGO sjötungan tyresö mm ****** */
	.logoS-desktop {
		display: flex;
		align-items: center;
	}

	.logoS-desktop img {
		width: 50px;
		height: 50px;
	}

	.logo-desktop {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		font-size: var(--p_fontZ);
		padding: 0.6rem 0.8rem 0.6rem 0;
	}

	.logo-flex-desktop {
		display: flex;
		flex-direction: column;
		height: 100px;
		justify-content: center;
		align-items: end;
		margin: 0 2rem;
		max-width: fit-content;
		color: var(--white);
	}

	/* STYLING av Sjötungan */
	.logo-flex-desktop span.four,
	.logo-flex-2-desktop span.ett {
		color: var(--white);
		font-family: "Montserrat", sans-serif;
		font-weight: 500;
		font-style: italic;
		letter-spacing: 0.1rem;

		font-size: var(--h1_fontZ);
		display: inline-block;
		line-height: 2.5rem;

		/* background-color: blue; */
	}
	@media (max-width: 1025px) {
		.logo-flex-desktop span.four {
			font-size: var(--h1_fontZ);
			color: var(--white);
		}
	}
	.logo-flex-desktop span.ett,
	.logo-flex-desktop span.two {
		font-size: var(--h1_fontZ);
		padding-bottom: 0.4rem;
		margin: 0;
		color: var(--white);
	}

	.logo-flex-desktop span.two {
		padding-right: 0.3rem;
		margin-top: 0.3rem;
	}
	@media (max-width: 320px) {
		.logo-flex-desktop span.five {
			display: none;
		}
	}
	@media (320px <= width <= 425px) {
		.logo-flex-desktop span.four {
			font-size: var(--h1_fontZ);
			line-height: 2rem;
		}
		.logo-flex-desktop span.five {
			transform: none;
			display: none;
		}
	}
	@media (min-width: 1025px) {
		.logo-flex-desktop {
			display: none;
		}
		.logo-flex-2-desktop span.ett,
		.logo-flex-2-desktop span.two {
			color: var(--white);
			font-family: "Montserrat", sans-serif;
			font-weight: 500;
			font-style: italic;
			letter-spacing: 0.1rem;
			font-size: var(--h1_fontZ);
			display: inline-block;
			line-height: 2.5rem;
			/* padding: 0; */
			/* background-color: blue; */
		}
		.logo-flex-2-desktop {
			display: flex;
			flex-direction: column;
			justify-content: center;

			/* background-color: coral; */
			height: 100px;
			max-width: fit-content;
			width: 250px;
			padding: 0 2rem;
		}
		.logo-flex-2-desktop span.three {
			display: flex;
			justify-content: flex-end;
			color: var(--white);
			padding-right: 0.3rem;
			height: 20px;
			align-items: center;
			/* padding-top: 0.5rem; */
		}
	}
	@media (max-width: 1049px) {
		.logo-flex-2-desktop {
			display: none;
		}
	}
	@media (1901px <= width <= 2600px) {
		.logo-flex-2-desktop span.ett,
		.logo-flex-2-desktop span.two {
			padding: 0.4rem 0;
		}
	}
	@media (1920px <= width <= 2600px) {
		.logo-flex-desktop span.four {
			padding-bottom: 0.5rem;
			line-height: 2.7rem;
		}

		.logo-flex-desktop span.five {
			padding-right: 2.6rem;
		}
	}

	/* MENYN CSS KOMMER IN HÄR */
	.nav-items {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		/* text-align: center; */
		/* justify-content: space-evenly; */
	}
	@media (min-width: 1920px) {
		.nav-items {
			width: min(90%, 1920px);
			margin: auto;
		}
	}
	.nav-item {
		list-style: none;
		position: relative;
		margin: 2rem auto;
	}
	/* .nav-items-background {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
	} */

	/* dropdown 1 */ /* styrelsen */
	.dropdown-0,
	.dropdown-1,
	.dropdown-2,
	.dropdown-3,
	.dropdown-4,
	.dropdown-5,
	.dropdown-6 {
		position: absolute;
		top: var(--top);
		background-color: var(--white);
		height: auto;
		border-radius: 1rem;
		box-shadow: 1rem 1rem 2rem hsla(0, 0%, 0%, 0.5);
		padding: 3rem 1rem 1rem 1rem;
		z-index: 90;
		transition-delay: 300ms;
		opacity: 0;
		visibility: hidden;
		transition: all 900ms ease;
		/* display: none; */
		/* border: 4px solid var(--blue2); */
		/* border-top: 8px solid var(--blue2); */
	}

	.dropdown-0.open,
	.dropdown-1.open,
	.dropdown-2.open,
	.dropdown-3.open,
	.dropdown-4.open,
	.dropdown-5.open,
	.dropdown-6.open {
		/* display: block; */
		opacity: 1;
		visibility: visible;
		transition: all 950ms ease;
	}

	.dropdown-0,
	.dropdown-1,
	.dropdown-2,
	.dropdown-3,
	.dropdown-4,
	.dropdown-5,
	.dropdown-6 {
		left: 50%;
		transform: translate(-50%, 0);
		width: 38rem;
		background-color: var(--white);
	}
	.dropdown-6 {
		left: -2rem;
		width: 38rem;
	}
	/* .nav-item:hover .dropdown-0,
	.nav-item:hover .dropdown-1,
	.nav-item:hover .dropdown-2,
	.nav-item:hover .dropdown-3,
	.nav-item:hover .dropdown-4,
	.nav-item:hover .dropdown-5,
	.nav-item:hover .dropdown-6 {
		opacity: 1;
		visibility: visible;
	} */
	.dropdown-0-left,
	.dropdown-1-left,
	.dropdown-2-left,
	.dropdown-3-left,
	.dropdown-4-left,
	.dropdown-5-left,
	.dropdown-6-left {
		width: 100%;
		height: auto;
		/* padding-right: 0.5rem; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center;
  row-gap: 2rem; */
	}

	.dropdown-0-left h3,
	.dropdown-1-left h3,
	.dropdown-2-left h3,
	.dropdown-3-left h3,
	.dropdown-4-left h3,
	.dropdown-5-left h3,
	.dropdown-6-left h3 {
		font-family: "Montserrat", sans-serif;
		font-weight: 700;
		letter-spacing: 0.1rem;
		font-size: 2rem;
		font-size: var(--h4_fontZ);
		border: 2px solid var(--blue2);
		padding: 1.5rem;
		border-radius: 0.8rem;
		margin-bottom: 3rem;
		/* font-size: var(--h2_fontZ); */
	}
	.dropdown-0-left h3:first-child,
	.dropdown-1-left h3:first-child,
	.dropdown-2-left h3:first-child,
	.dropdown-3-left h3:first-child,
	.dropdown-4-left h3:first-child,
	.dropdown-5-left h3:first-child,
	.dropdown-6-left h3:first-child {
		text-align: center;
	}
	.features-list-item {
		/* gör så att hela knappen är klickbar */
		display: flex;
		align-items: center;
		position: relative;
		padding: 1rem;
		border: 1px solid #ccc;
		border-radius: 0.8rem;
		/* margin: 1rem; */
		/* background-color: var(--features_list); */
		overflow: hidden;
		width: 100%;
		height: auto;
		font-size: var(--h4_fontZ);
	}

	.features-list-item .full-link {
		/* gör så att hela knappen är klickbar */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		text-decoration: none;
	}

	.features-list-item i {
		position: relative;
		z-index: 2;
	}
	.features-list-item span {
		position: relative;
		z-index: 2;
		color: #333;
	}

	.features-list-item:hover {
		background-color: #eee;
		cursor: pointer;
	}
	/* iconer i menyerna */
	.features-list-item i {
		font-size: var(--h4_fontZ);
		width: 5rem;
		text-align: center;
		transition: all 0.3s;
	}

	/* texten / rubriken */
	.features-list-item span {
		font-size: var(--p_fontZ);
		font-family: "Montserrat", sans-serif;
		font-weight: 700;
		letter-spacing: 0.1rem;
		color: var(--grey);
		transition: color 0.1s;
		margin-left: 2rem;
	}
	@media (320px <= width <= 425px) {
		.dropdown-1 {
			max-width: 30rem;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}
	/*@media (320px <= width <= 768px)*/
	@media (320px <= width <= 768px) {
		.nav-item {
			margin: 0.5rem 0;
		}
	}
	/* ******** 320 - 1024 ************ */

	@media (320px <= width <= 1024px) {
		.dropdown-0,
		.dropdown-1,
		.dropdown-2,
		.dropdown-3,
		.dropdown-4,
		.dropdown-5,
		.dropdown-6 {
			width: 38rem;
			/* width: 70vw; */
			left: 50%;
			transform: translate(-50%, 0);
			/* color: red; */
			/* left: -13rem; */
			width: auto;
		}

		/* end of dropdown 6*/
		.dropdown-0-left h3,
		.dropdown-1-left h3,
		.dropdown-2-left h3,
		.dropdown-3-left h3,
		.dropdown-4-left h3,
		.dropdown-5-left h3,
		.dropdown-6-left h3 {
			display: none;
		}
	}
	.nav-link {
		font-family: "Raleway", sans-serif;
		font-weight: bold;
		font-size: var(--h4_fontZ);
		text-transform: uppercase;
		letter-spacing: 0.3rem;
		/* color: var(--white-dimed); */
		font-size: var(--h5_fontZ);

		/* text-shadow: 0.5 0.5rem 1rem hsla(0, 0%, 0%, 0.834); */
	}
	/* Färgen som visas när man är inne på en sida i den menyn */
	.nav-link.active-menu {
		color: var(--neon_green) !important;
		font-weight: bold;
		font-size: var(--h4_fontZ);
	}
	.nav-link:hover {
		color: var(--gold_frame);
	}

	/* SLUT MENYN CSS KOMMER IN HÄR */
}

/* *** END MAIN-DESKTOP *** */

/* *** MAIN MOBILE *** */
.main-mobile {
	nav.nav-mobile {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 10;
		width: 100%;
		height: 10rem;
		padding: 0 5rem 0 5rem;
		background: linear-gradient(135deg, #0d5cdb 0%, #46b6eb 100%);

		@media (max-width: 1024px) {
			& {
				padding: 0 1rem 0 1rem;
				width: 100%;
			}
		}
		@media (300px <= width <= 767px) {
			height: 5.5rem;
		}
		@media (min-width: 768px) {
			height: 7.5rem;
		}
	}

	nav.navbar a {
		text-decoration: none;
	}

	.nav-data-mobile {
		height: 100%;
		width: 100%;
		display: flex;
		/* justify-content: space-around; */
		/* gap: 2rem; */
		align-items: center;
		/* background-color: yellow; */
	}
	.center-sun-moon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* **** STYLING AV LOGO sjötungan tyresö mm ****** */
	.logoS-mobile {
		display: flex;
		align-items: center;
	}

	.logoS-mobile img {
		width: 50px;
		height: 50px;
	}

	.logo-mobile {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		font-size: var(--p_fontZ);
		padding: 0.6rem 0.8rem 0.6rem 0;
	}

	.logo-flex-mobile {
		display: flex;
		flex-direction: column;
		/* height: 100px; */
		height: fit-content;
		justify-content: center;
		align-items: end;
		margin: 0 2rem;
		max-width: fit-content;
		color: var(--white);
		/* background-color: pink; */
	}

	/* STYLING av Sjötungan */

	.logo-flex-2-mobile span.ett {
		color: var(--white);
		font-family: "Montserrat", sans-serif;
		font-weight: 500;
		font-style: italic;
		letter-spacing: 0.1rem;
		font-size: var(--h1_fontZ);
		display: inline-block;
		line-height: 2.5rem;

		/* background-color: blue; */
	}
	.logo-flex-mobile span.four {
		color: var(--white);
		font-family: "Montserrat", sans-serif;
		font-weight: 500;
		font-style: italic;
		letter-spacing: 0.1rem;
		font-size: var(--h1_fontZ);
		display: inline-block;
		line-height: 2.5rem;

		/* background-color: blue; */
	}
	.logo-flex-mobile span.five {
		margin-top: 1rem;
	}

	@media (320px <= width <= 724px) {
		.logo-flex-mobile {
			margin: 0 1rem;
		}
		.logo-flex-mobile span.four {
			font-size: var(--h2_fontZ);
			line-height: 2rem;
			white-space: nowrap;
		}
		.logo-flex-mobile span.five {
			transform: none;
			display: none;
		}
	}
	/* @media (max-width: 1025px) {
		.logo-flex-mobile span.four {
			font-size: var(--h1_fontZ);
			color: var(--white);
		}
	} */
	.logo-flex-mobile span.ett,
	.logo-flex-mobile span.two {
		font-size: var(--h1_fontZ);
		padding-bottom: 0.4rem;
		margin: 0;
		color: var(--white);
	}

	.logo-flex-mobile span.two {
		padding-right: 0.3rem;
		margin-top: 0.3rem;
	}
	@media (max-width: 320px) {
		.logo-flex-mobile span.five {
			display: none;
		}
	}

	@media (min-width: 1025px) {
		.logo-flex-mobile {
			display: none;
		}
		.logo-flex-2-mobile span.ett,
		.logo-flex-2-mobile span.two {
			color: var(--white);
			font-family: "Montserrat", sans-serif;
			font-weight: 500;
			font-style: italic;
			letter-spacing: 0.1rem;
			font-size: var(--h1_fontZ);
			display: inline-block;
			line-height: 2.5rem;
			/* padding: 0; */
			/* background-color: blue; */
		}
		.logo-flex-2-mobile {
			display: flex;
			flex-direction: column;
			justify-content: center;

			/* background-color: coral; */
			height: 100px;
			max-width: fit-content;
			width: 250px;
			padding: 0 2rem;
		}
		.logo-flex-2-mobile span.three {
			display: flex;
			justify-content: flex-end;
			color: var(--white);
			padding-right: 0.3rem;
			height: 20px;
			align-items: center;
			/* padding-top: 0.5rem; */
		}
	}
	/* @media (max-width: 1049px) {
		.logo-flex-2-mobile {
			display: none;
		}
	} */
	/* @media (1901px <= width <= 2600px) {
		.logo-flex-2-mobile span.ett,
		.logo-flex-2-mobile span.two {
			padding: 0.4rem 0;
		}
	} */
	/* @media (1920px <= width <= 2600px) {
		.logo-flex-mobile span.four {
			padding-bottom: 0.5rem;
			line-height: 2.7rem;
		}

		.logo-flex-mobile span.five {
			padding-right: 2.6rem;
		}
	} */

	/* MENYN CSS KOMMER IN HÄR */

	/* <script för att tona in menyerna vid mobile fungerar el </script> */

	/* .nav-item-mobile {
		opacity: 0;
		transition: opacity 0.2s ease;
	} */
	/* <script för att tona in menyerna vid mobile fungerar el </script> */
	.nav-items-mobile {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 2rem;
		padding-top: 2rem;
		/* position: relative; */
		/* text-align: center; */
		/* justify-content: space-evenly; */
	}
	.nav-item-mobile {
		list-style: none;
		position: relative;
		margin: 2rem auto;
	}

	/* dropdown 1 */ /* styrelsen */
	.dropdown-0-mobile,
	.dropdown-1-mobile,
	.dropdown-2-mobile,
	.dropdown-3-mobile,
	.dropdown-4-mobile,
	.dropdown-5-mobile,
	.dropdown-6-mobile {
		position: absolute;
		top: 3rem;
		background-color: var(--white);
		height: auto;
		border-radius: 1rem;
		box-shadow: 1rem 1rem 2rem hsla(0, 0%, 0%, 0.5);
		padding: 1rem 1rem 1rem 1rem;
		opacity: 0;
		visibility: hidden;
		/* opacity: 1;
		visibility: hidden; */
		z-index: 90;
		transition: all 400ms ease;
		transition-delay: 300ms;
		border: 4px solid var(--blue2);
	}

	.dropdown-0-mobile.open,
	.dropdown-1-mobile.open,
	.dropdown-2-mobile.open,
	.dropdown-3-mobile.open,
	.dropdown-4-mobile.open,
	.dropdown-5-mobile.open,
	.dropdown-6-mobile.open {
		opacity: 1;
		visibility: visible;
		transition: all 950ms ease;
		transition-delay: 0.5s;
		/* background: rgba(86, 86, 86, 0.9); */
	}
	.dropdown-0-mobile,
	.dropdown-1-mobile,
	.dropdown-2-mobile,
	.dropdown-3-mobile,
	.dropdown-4-mobile,
	.dropdown-5-mobile,
	.dropdown-6-mobile {
		left: 50%;
		transform: translate(-50%, 0);
		width: 38rem;
		background-color: var(--white);
	}
	.dropdown-6 {
		left: -2rem;
		width: 38rem;
	}
	/* .nav-item-mobile:hover .dropdown-0-mobile,
	.nav-item-mobile:hover .dropdown-1-mobile,
	.nav-item-mobile:hover .dropdown-2-mobile,
	.nav-item-mobile:hover .dropdown-3-mobile,
	.nav-item-mobile:hover .dropdown-4-mobile,
	.nav-item-mobile:hover .dropdown-5-mobile,
	.nav-item-mobile:hover .dropdown-6-mobile {
		opacity: 1;
		visibility: visible;
		top: 3rem;
	} */

	.dropdown-0-left-mobile,
	.dropdown-1-left-mobile,
	.dropdown-2-left-mobile,
	.dropdown-3-left-mobile,
	.dropdown-4-left-mobile,
	.dropdown-5-left-mobile,
	.dropdown-6-left-mobile {
		width: 100%;
		height: auto;
		/* padding-right: 0.5rem; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center;
  row-gap: 2rem; */
	}
	.dropdown-0-left-mobile h3,
	.dropdown-1-left-mobile h3,
	.dropdown-2-left-mobile h3,
	.dropdown-3-left-mobile h3,
	.dropdown-4-left-mobile h3,
	.dropdown-5-left-mobile h3,
	.dropdown-6-left-mobile h3 {
		font-family: "Montserrat", sans-serif;
		font-weight: 700;
		letter-spacing: 0.1rem;
		font-size: 2rem;
		font-size: var(--h4_fontZ);
		border: 2px solid var(--blue2);
		padding: 1.5rem;
		border-radius: 0.8rem;
		margin-bottom: 3rem;
		/* font-size: var(--h2_fontZ); */
	}
	.dropdown-0-left h3:first-child,
	.dropdown-1-left-mobile h3:first-child,
	.dropdown-2-left-mobile h3:first-child,
	.dropdown-3-left-mobile h3:first-child,
	.dropdown-4-left-mobile h3:first-child,
	.dropdown-5-left-mobile h3:first-child,
	.dropdown-6-left-mobile h3:first-child {
		text-align: center;
	}
	.features-list-item-mobile {
		/* gör så att hela knappen är klickbar */
		display: flex;
		align-items: center;
		position: relative;
		padding: 1rem;
		border: 1px solid #ccc;
		border-radius: 0.8rem;
		/* margin: 1rem; */
		/* background-color: var(--features_list); */
		overflow: hidden;
		width: 100%;
		height: auto;
		font-size: var(--h4_fontZ);
	}
	.features-list-item-mobile .full-link {
		/* gör så att hela knappen är klickbar */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		text-decoration: none;
	}
	.features-list-item-mobile i {
		position: relative;
		z-index: 2;
	}
	.features-list-item-mobile span {
		position: relative;
		z-index: 2;
		color: #333;
	}

	.features-list-item-mobile:hover {
		background-color: #eee;
		cursor: pointer;
	}
	/* iconer i menyerna */
	.features-list-item-mobile i {
		font-size: var(--h4_fontZ);
		width: 5rem;
		text-align: center;
		transition: all 0.3s;
	}
	/* texten / rubriken */
	.features-list-item-mobile span {
		font-size: var(--p_fontZ);
		font-family: "Montserrat", sans-serif;
		font-weight: 700;
		letter-spacing: 0.1rem;
		color: var(--grey);
		transition: color 0.1s;
		margin-left: 2rem;
	}
	@media (320px <= width <= 425px) {
		.dropdown-1-mobile {
			max-width: 30rem;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}
	/*@media (320px <= width <= 768px)*/
	@media (320px <= width <= 768px) {
		.nav-item-mobile {
			margin: 0.5rem 0;
		}
	}
	@media (320px <= width <= 1024px) {
		.dropdown-0-mobile,
		.dropdown-1-mobile,
		.dropdown-2-mobile,
		.dropdown-3-mobile,
		.dropdown-4-mobile,
		.dropdown-5-mobile,
		.dropdown-6-mobile {
			width: 38rem;
			/* width: 70vw; */
			left: 50%;
			transform: translate(-50%, 0);
			/* color: red; */
			/* left: -13rem; */
			width: auto;
		}

		/* end of dropdown 6*/
		.dropdown-0-left-mobile h3,
		.dropdown-1-left-mobile h3,
		.dropdown-2-left-mobile h3,
		.dropdown-3-left-mobile h3,
		.dropdown-4-left-mobile h3,
		.dropdown-5-left- h3,
		.dropdown-6-left- h3 {
			display: none;
		}
	}

	/* From https://css.glass */
	.nav-items-background {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 200vh;
		opacity: 0;
		/* visibility: hidden; */
		transition: opacity 0.9s ease;
		background: rgba(86, 86, 86, 0.5);
		backdrop-filter: blur(3px);
		pointer-events: none;
	}
	/* background-color: red; */

	.nav-items-background.active {
		left: 0;
		top: 7.5rem;
		opacity: 1;
		/* visibility: visible; */
		transition: 0.9s ease;
		pointer-events: auto;
	}

	@media (300px <= width <= 767px) {
		.nav-items-background.active {
			left: 0;
			top: 5.5rem;
			opacity: 1;
			/* visibility: visible; */
			transition: 0.9s ease;
			pointer-events: auto;
		}
	}
	/* .nav-items {
		left: -100%;
	} */
	/* SLUT MENYN CSS KOMMER IN HÄR */
}
/* *** END MAIN MOBILE *** */

/* **** sun & moon dark mode ************* */
.darkMode {
	position: relative;
	font-size: 0.8rem;
	width: 20px;
	height: 20px;
	padding: 0 2.5rem 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	@media (max-width: 320px) {
		& {
			margin-right: 1rem;
		}
	}
}
.darkmode-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
}

#checkboxIdText {
	cursor: pointer;
}
.darkMode .tooltip {
	position: absolute;
	font-size: calc(var(--p_fontZ2) - 0.5rem);
	line-height: 1.3rem;
	color: var(--black);
	background-color: var(--white-dimed);
	padding: 0 0.3rem;
	margin: 0;
	bottom: -3.2rem;
	border-radius: 0.7rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.darkMode:hover .tooltip {
	opacity: 1;
}
@media (max-width: 1024px) {
	.darkMode .tooltip {
		display: none;
	}
}
#checkboxId {
	display: none;
	height: 0;
	width: 0;
}
.fa-solid.fa-sun,
.fa-solid.fa-moon {
	font-size: var(--h1_fontZ);
}
@media (max-width: 768px) {
	.fa-solid.fa-sun,
	.fa-solid.fa-moon {
		font-size: var(--h1_fontZ-1);
	}
}

#sun {
	display: block;
}
#moon {
	display: none;
}
i#sun.fa-regular.fa-sun,
i#moon.fa-solid.fa-moon {
	margin: 0;
}
/* sun & moon dark mode slut */

/* *************** STYLING BILDEN UNDER MENYN  ********************* */
section.index-img img {
	position: fixed;
	z-index: 5;
	left: 0;
	top: 10rem;
	width: 100%;
	height: 20rem;
	object-fit: cover;

	@media (1440px <= width <= 1939px) {
		& {
			height: 10rem;
			top: 10rem;
		}
	}
	@media (1024px <= width <= 1439px) {
		& {
			height: 7.5rem;
			top: 10rem;
		}
	}
	@media (768px <= width <= 1023px) {
		& {
			height: 7.5rem;
			top: 7.5rem;
		}
	}

	@media (426px <= width <= 767px) {
		& {
			height: 5rem;
			top: 5.5rem;
		}
	}

	@media (320px <= width <= 425px) {
		& {
			height: 5rem;
			top: 5.5rem;
		}
	}
	@media (280px <= width <= 319px) {
		& {
			display: none;
		}
	}
}
/* ************** END STYLING BILDEN UNDER MENYN  ******************** */

/* ****** STYLING nav items ****** */

.nav-items-background-mobile {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* padding-left: 2rem; */
	width: 100%;
}

.nav-link-mobile {
	font-family: "Raleway", sans-serif;
	font-weight: bold;
	font-size: var(--h4_fontZ);
	text-transform: uppercase;
	letter-spacing: 0.3rem;
	/* color: var(--white-dimed); */
	font-size: var(--h5_fontZ);

	/* text-shadow: 0.5 0.5rem 1rem hsla(0, 0%, 0%, 0.834); */
}
.nav-link-mobile.active-menu {
	color: var(--neon_green);
	letter-spacing: 0.4rem;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	border: 1px solid var(--neon_green);
}

.nav-link-mobile:hover {
	color: var(--gold_frame);
}
/* *************** HAMBURGER MENU ******* */
.hamburger {
	/* display: none; */
	cursor: pointer;
}
.bar {
	display: block;
	width: 25px;
	height: 2px;
	margin: 5px auto;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-color: var(--white);
}
/* *** 320 - 425 ********* */
/* @media (max-width: 320px) {
	.hamburger {
		padding: 0 1rem 0 2rem;
	}
} */
@media (320px <= width <= 424px) {
	.hamburger {
		display: block;
		margin-right: 0.7rem;
		margin-left: auto;
	}
}
@media (425px <= width <= 768px) {
	.hamburger {
		display: block;
		margin-left: auto;
		margin-right: 0.7rem;
	}
}
@media (769px <= width <= 1023px) {
	.hamburger {
		display: block;
		margin-left: auto;
		margin-right: 0.7rem;
	}
}

@media (max-width: 1024px) {
	.hamburger.active .bar:nth-child(2) {
		opacity: 0;
	}
	.hamburger.active .bar:nth-child(1) {
		transform: translateY(5px) rotate(45deg);
	}
	.hamburger.active .bar:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}
}

/* *************** END OF HAMBURGER MENU ******* */

/* dropdown-1 SPARAD SOM EXEMPEL */
.dropdown-1-mobile {
	/* left: -11rem; */
	width: 38rem;
}
/* end of dropdown-1 */
/* dropdown-1 SPARAD SOM EXEMPEL */

/* FOOTER */
/* END OF FOOTER */

/* end of nav items */
/* end of Navigation */

.image-img {
	display: flex;
	justify-content: center;
	align-items: center;
}
div.image-img img {
	width: 100rem;
	height: auto;
	margin-top: 25rem;
	filter: blur(10px);
	opacity: 0.1;
}
div.image-img-2 img {
	width: 10rem;
	height: auto;
	position: absolute;
	top: 32rem;
	right: 10rem;
}

/* end of header */

/* end of aktive menu */
ul.footer-all-foter li a.active-menu {
	color: var(--neon_green);
}
.active-menu {
	color: var(--neon_green);
}

/* pdf-texten på varje section */
.pdf-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	font-size: var(--p_fontZ);
	font-style: italic;
	justify-content: center;
	align-items: center;
}

div.pdf-text a span i.fa-solid {
	padding: 1rem 0 1rem 0;
	margin: 0;
	width: 3rem;
}
.columns2 {
	columns: 2 auto;
}
.columns3 {
	columns: 3 auto;
}
.atagbutton {
	background-color: var(--blue2);
	color: var(--white);
	text-decoration: none;
	padding: 1rem 2rem;
	font-size: var(--p_fontZ1);
	border-radius: 0.5rem;
}
.atagbutton:hover {
	background-color: var(--dark_green);
}
/* end of pdf-texten på varje section */

/* om man vill ha en bild i aktuelltTexter.html
  start aktuelltTexter.html */

.wrapper_bild_i_aktuellt {
	display: flex;
	height: auto;
	width: 100%;
}
.wrapper2_bild_i_aktuellt {
	display: flex;
	flex-direction: column;
	height: auto;
	justify-content: space-evenly;
}

.wrapper_bild_i_aktuellt img {
	height: 100px;
	margin: 10px 20px;
	width: 80px;
	box-shadow: 3px 3px 7px var(--grey);
	transform: rotateZ(7deg);
	transition: 0.9s ease-out;
}
.wrapper_bild_i_aktuellt img:hover {
	scale: 105%;
	box-shadow: 4px 4px 10px var(--grey);
	transform: rotateZ(12deg);
}

/* fotnot för varje section */
.fotNot {
	display: flex;
	justify-content: flex-end;
	font-weight: bold;
	padding-right: 2rem;
	font-size: var(--p_fontZ1);
	transition: all 1s ease;
}
.fotNot:hover {
	color: var(--dark_green);
	font-size: var(--p_fontZ);
}

/* end of fotnot för varje section */
.fotNot_bild_i_aktuellt {
	display: flex;
	justify-content: flex-start;
	font-size: 0.9rem;
	font-weight: bold;
	padding-right: 2rem;
}

/* ********** SLUT bild i aktuellt ********** */

/* ***********  @MEDIA **************** */

/* ****** 320 - 425 ************* */
@media (320px <= width <= 425px) {
	.dropdown-1 {
		max-width: 30rem;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.index-img img {
		top: 5rem;
		height: 5rem;
	}
	.wrapper_bild_i_aktuellt img:hover {
		scale: none;
		box-shadow: 3px 3px 7px var(--grey);
		transform: rotateZ(7deg);
		cursor: none;
	}
}

/* ****************** 1024 ************** */
@media (max-width: 1024px) {
	/* nav.navbar {
		padding: 0 1rem 0 1rem;
		width: 100%;
	} */
	/* .hamburger {
		display: block;
		padding-right: 1rem;
	}
	.hamburger.active .bar:nth-child(2) {
		opacity: 0;
	}
	.hamburger.active .bar:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.hamburger.active .bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	} */

	.dropdown-6 {
		left: 4rem;
	}
}