/* -------- Fonts / Skrifttyper fra Adobe -------- */

@import url("https://use.typekit.net/uqz8agc.css");
@import url("https://use.typekit.net/uqz8agc.css");
@import url("https://use.typekit.net/uqz8agc.css");
@import url("https://use.typekit.net/uqz8agc.css");

:root {
	/* farver */
	--rodbrun: #5f351f;
	--rodbrun2: #591d00;
	--brun2: #3a1300;
	--morkebrun: #311000;
	--morkebrun2: #290d00;

	--lyseebrun1: #a37157;
	--lyseebrun2: #9d6446;
	--lyseebrun3: #91583c;
	--lyseebrun5: #b9907b;
	--lyseebrun6: #d4bbac;

	--white: #ffffff;
	--white2: #fbfbfa;

	--baggrund1: #e6d6cc;

	--gron: #2f3f2d;
	--lysegron: #425040;
	--morkegron: #182716;
	
	/* fonte */
	--over: ambroise-std, serif;
	--brod: montserrat, sans-serif;
}

/* -------- reset css -------- */
*,
:after,
:before {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--baggrund1);
}

h2 {
	font-family: var(--over);
	font-size: 3.7vw;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	color: var(--brun2);
}

h4 {
	font-family: var(--over);
	font-size: 2.2vw;
	font-weight: 600;
	text-align: center;
}

p {
	font-family: var(--brod);
	font-size: 1vw;
	font-weight: 300;
	text-align: center;
}

.topnav {
	overflow: hidden;
	background-color: var(--rodbrun);

	height: 6.5vw;
	font-family: var(--over);
}

.topnav a {
	text-align: center;
	text-decoration: none;

	font-size: 1.4vw;
	font-weight: 600;

	padding: 2vw 1.6vw;
	float: left;
	display: block;
	color: var(--white2);
}

.topnav .icon {
	display: none;
}

.topnav {
	display: flex;

	justify-content: flex-end;

	text-align: right;

	padding-right: 5vw;
}

.toplogo img {
	width: auto;
	height: 4vw;
	position: absolute;
	left: 3vw;
	margin-bottom: 1vw;
	bottom: 1vw;
	top: 1.3vw;
}

.dropdown .dropbtn {
	font-size: 1.9vw;
	font-weight: 700;
	letter-spacing: 0.07vw;

	border: none;
	outline: none;
	color: white;
	padding: 1.7vw 1.7vw;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	margin-top: 0.7vw;
}

.dropdown-content {
	display: none;
	position: absolute;

	min-width: 16vw;

	z-index: 8;
	top: 6.5vw;

	background-color: var(--lyseebrun6);
}

.dropdown-content a {
	float: none;
	font-weight: 600;
	font-size: 1.8vw;
	letter-spacing: 0.07vw;

	padding: 1.4vw 1.6vw;
	text-decoration: none;
	display: block;
	text-align: left;

	color: var(--morkebrun);
}

.topnav a:hover,
.dropdown:hover .dropbtn {
	color: var(--baggrund1);
}

.dropdown-content a:hover {
	color: #290d00;
	background-color: var(--lyseebrun5);
}

.dropdown:hover .dropdown-content {
	display: block;
}

/*________ Ring i siden_________*/

.ringside{
	
	right: 0;
	margin-left: 95vw;
	background-color: var(--rodbrun2);
	width: 5vw;
	height: 20vw;
	
	z-index: 7;
	margin-top: 40vw;
	right: 0;
	
	border-radius: 1vw 0vw 0vw 1vw;

	color: var(--white2);
	
}

#teletop {
	
	transform: rotate(90deg);

	position: absolute;
	font-family: var(--brod);
	font-size: 1.6vw;
	font-weight: 400;
	text-align: center;

	
	z-index: 10;
	
	margin-left: 88.7vw;
	margin-top: 49vw;

	width: 18vw;
	color: var(--white2);

	

}

#telehref1  {	
	

	text-decoration: none;
	color: var(--white2);
	padding-left: 0.3vw;


	
}

#telehref1:hover {
	text-decoration: underline;
}

/*________ Sektion 2 ____Start_________*/

#toppic {
	width: 100vw;
	height: auto;
	z-index: 2;
	position: absolute;
}

#intro {
	line-height: 105%;
	top: 3vw;
}

.tekstbox {
	
	background-color: var(--rodbrun);
	margin-left: 31vw;
	width: 25vw;
	height: 37vw;
	padding-top: 3vw;
	padding-bottom: 2vw;

	color: var(--white2);
}

#pic1,
#pic2,
.tekstbox {
	filter: drop-shadow(0 0 0.75rem #b9907b);
}

#tekst {
	margin-top: 1.5vw;
	line-height: 180%;
	font-size: 1.33vw;
	width: 20vw;
	margin-left: 2.5vw;
	font-weight: 400;
}

#pic1 {
	width: 35vw;
	height: auto;
	position: absolute;
	margin-left: 21vw;
	margin-top: 6vw;
}

#pic2 {
	height: 35vw;
	width: auto;
	position: absolute;
	margin-left: 61vw;
	margin-top: 11vw;
}

#hosmig {
	font-family: lindsey-signature, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 5vw;

	position: absolute;
	transform: rotate(270deg);

	margin-left: 14vw;
	margin-top: 18vw;
	color: var(--brun2);
}

#opdagknap {
	background-color: var(--gron);
	color: var(--white2);
	padding: 1vw;
	padding-left: 3.5vw;
	padding-right: 3.5vw;
	position: absolute;

	margin-left: 48vw;
	margin-top: 16vw;

	font-family: var(--brod);
	font-size: 1.5vw;
	font-weight: 400;
	text-decoration: none;
}

#opdagknap:hover {
	cursor: pointer;
	color: var(--white);
	filter: drop-shadow(0 0 0.75rem #b9907b);
}

/*________ Sektion 2 ____Slut_________*/

/*________ Sektion 3 ____Start_________*/

.sektiontre {
	position: relative;
}

#picbanner {
	width: 100%;
	height: auto;

	margin-top: 40vw;
	position: absolute;
	z-index: 2;
}

.tekstindhold {
	position: absolute;

	display: flex;
	justify-content: space-around;
	gap: 6vw;
	z-index: 5;
	margin-left: 5vw;
	margin-right: 5vw;
	text-align: center;

	margin-top: 47vw;
}

.bannerdiament {
	margin-top: 2vw;
	margin-bottom: 2vw;
	width: 4vw;
	height: auto;
}

.tekstindhold h3 {
	color: var(--white2);
	font-family: var(--brod);
	font-weight: 600;
	font-size: 1.7vw;
}

.tekstindhold p {
	color: var(--white2);
	font-family: var(--brod);
	font-weight: 300;
	font-size: 1.45vw;
	margin-top: 1.6vw;
	line-height: 170%;
}

.tekst1,
.tekst2,
.tekst3 {
	width: 26vw;
}
/*________ Sektion 3 ____Slut_________*/

/*________ Sektion 4 ____Start_________*/

.infotop {
	text-align: center;
	margin-top: 80vw;
}

.infotop p {
	color: var(--lyseebrun3);
	font-weight: 400;
	line-height: 160%;
	font-size: 1.5vw;
}

.servicesimg {
	width: 20vw;
	height: auto;
	margin-top: 4vw;
	filter: drop-shadow(0 0 0.75rem #b9907b);
}

#midderimg {
	margin-left: 3vw;
	margin-right: 3vw;
}

.informationerne {
	display: flex;
	justify-content: space-evenly;

	text-align: center;
	margin-left: 15vw;
	margin-right: 15vw;
	margin-top: 3vw;
}

.informationerne h4 {
	color: var(--brun2);
	text-transform: uppercase;
}

.informationerne p {
	line-height: 160%;
	margin-top: 1vw;
	margin-bottom: 1vw;
	color: var(--lyseebrun3);
	font-size: 1.35vw;
}

.box1,
.box2,
.box3 {
	width: 20vw;
}

#midderbox {
	margin-left: 3vw;
	margin-right: 3vw;
	width: 18vw;
}

.merebtn {
	width: 14vw;
	height: 2.5vw;
	text-align: center;

	background-color: var(--gron);
	color: var(--white2);

	font-family: var(--brod);
	font-weight: 400;
	font-size: 1.4vw;
}

/*________ Sektion 4 ____Slut_________*/

/*________ Sektion 5 ____Start_________*/

.sektionfem {
	position: relative;
}

#blomsterbanner {
	width: 100%;
	height: auto;
	margin-top: 10vw;
	position: absolute;
}

.sektionfemtop {
	position: absolute;
	margin-top: 14vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 60vw;
	margin-left: 20vw;
}

.sektionfemtop h2 {
	color: var(--white2);
	text-align: center;
}

.sektionfemtop p {
	color: var(--baggrund1);
	font-size: 1.7vw;
	margin-top: 1vw;
}

#ramme {
	position: absolute;
	text-align: center;
	width: 60vw;
	margin-top: 30vw;
	margin-left: 20vw;
}

/* Kode lånt fra: https://www.youtube.com/watch?v=9HcxHDS2w1s&ab_channel=WebDevSimplified  med små rettelser start */

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

.carousel {
	width: 100vw;
	height: auto;
	position: relative;
}

.carousel > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: 200ms opacity ease-in-out;
	transition-delay: 200ms;
	margin-left: 26vw;
	height: 10vw;
}

.slide > p {
	display: block;
	position: absolute;
	color: var(--white2);
	font-size: 1.5vw;
	line-height: 180%;
	margin-top: 33vw;
	width: 46vw;

	text-align: center;
}

#p2 {
	margin-top: 35vw;
}

#p3 {
	margin-top: 37vw;
}

.slide[data-active] {
	opacity: 1;
	z-index: 1;
	transition-delay: 0ms;
}

.carousel-button {
	position: absolute;
	z-index: 2;
	background: none;
	border: none;
	font-size: 3rem;

	color: #fbfbfaaa;
	font-size: 4vw;
	margin-top: 35vw;
	cursor: pointer;
}

.carousel-button:hover,
.carousel-button:focus {
	color: var(--baggrund1);
	filter: drop-shadow(0 0 1rem var(--gron));
	cursor: pointer;
}

.carousel-button.prev {
	left: 5vw;
	transform: rotate(180deg);
}

.carousel-button.next {
	right: 5vw;
}
/* Kode lånt slut*/

/*________ Sektion 5 ____Slut_________*/

/*________ Sektion 6 ____Start_________*/

.sektionseks {
	background-color: var(--lyseebrun5);
	width: 100%;
	height: 45vw;
	margin-top: 59vw;
}

.sektionseks a {
	color: var(--white2);
	margin-top: 6vw;
	font-family: var(--over);
	font-size: 3.7vw;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.sektionseks a:hover {
	text-decoration: underline 0.1vw;
	text-underline-offset: 0.6vw;
}

#linkinsta {
	padding-top: 6vw;
	padding-left: 29vw;
	display: flex;
	text-align: center;
}

.instaposts img {
	width: 20vw;
	height: auto;
}

.instaposts {
	display: flex;
	justify-content: space-evenly;
	filter: drop-shadow(0 0 0.75rem #cdb9af9c);
	margin-top: 5vw;
}

/*________ Sektion 6 ____Slut_________*/

/*________ Futter ____Start_________*/

footer {
	background-color: var(--rodbrun);

	color: var(--baggrund1);
	width: 100%;
	height: 50vw;
	top: 0;
}

.futter {
	position: relative;
}

#forstehr1,
#forstehr2 {
	position: absolute;
	z-index: 10;
	color: var(--baggrund1);
	height: 0vw;
	margin-top: 12vw;
	border: solid 0.01vh var(--lyseebrun6);
}

#forstehr1 {
	width: 8vw;
	left: 30vw;
}

#forstehr2 {
	width: 17vw;
	left: 40.5vw;
}

.dage hr {
	position: absolute;
	z-index: 10;
	width: 27vw;
	color: var(--baggrund1);
	height: 0vw;

	margin-top: 0.5vw;
	border: dashed 0.01vh var(--lyseebrun6);
}

.aabningstider h3 {
	font-family: var(--over);
	font-weight: 700;
	font-size: 3.3vw;
	color: var(--baggrund1);
	text-align: left;
	position: absolute;

	margin-left: 30vw;
	padding-top: 8vw;
}

.dage p {
	font-size: 1.7vw;
	font-family: var(--brod);
	font-weight: 300;
	font-style: normal;

	text-align: left;
	padding-top: 1vw;
}

.dage {
	position: absolute;
	width: 20vw;
	margin-left: 30vw;
	padding-top: 14vw;
}

.tider p {
	font-size: 1.7vw;
	font-family: var(--brod);
	font-weight: 300;
	font-style: normal;

	text-align: left;
	padding-top: 1vw;
}

.tider {
	position: absolute;
	width: 20vw;
	margin-left: 48vw;
	padding-top: 14vw;
}

#clockDisplay {
	position: absolute;
	color: var(--baggrund1);
	width: 30vw;

	bottom: 2vw;
	margin-left: 2vw;
	text-align: left;

	font-size: 1.5vw;
	font-family: var(--brod);
	font-weight: 300;
	font-style: normal;
}

#navn {
	position: absolute;
	color: var(--baggrund1);
	width: 27vw;

	/*border: none;*/

	bottom: 2vw;
	right: 2vw;

	text-align: right;

	font-size: 1.5vw;
	font-family: var(--brod);
	font-weight: 300;
	font-style: normal;
	z-index: 6;
}

#cvr {
	position: absolute;
	color: var(--baggrund1);
	width: 30vw;

	text-align: center;
	bottom: 2vw;
	left: 35vw;

	font-size: 1.5vw;
	font-family: var(--brod);
	font-weight: 300;
	font-style: normal;
	z-index: 6;
}

.adresse {
	position: absolute;
	color: var(--baggrund1);
	width: 33vw;
	/*border: solid 0.3vw orange; */

	bottom: 30vw;
	right: 3vw;
	text-align: left;
	z-index: 5;

	font-size: 2.5vw;
	font-family: var(--brod);
	font-weight: 300;
	font-style: normal;
}

.adresse h2 {
	font-family: var(--over);
	font-weight: 700;
	font-size: 3.3vw;
	color: var(--baggrund1);
	text-align: left;
	text-transform: inherit;
}

.adresse h3 {
	font-size: 1.9vw;
	font-family: var(--brod);
	font-weight: 500;
	font-style: normal;

	text-align: left;
	padding-left: 3vw;
	padding-top: 1vw;
}

#adressep {
	font-size: 1.7vw;
	font-family: var(--brod);
	font-weight: 300;
	font-style: normal;

	text-align: left;
	padding-left: 3vw;
	padding-top: 0.1vw;
}

#rutevej {
	position: absolute;
	color: var(--baggrund1);
	font-size: 1.7vw;
	font-family: var(--brod);
	font-weight: 400;
	font-style: normal;
	text-decoration: underline 0.15vw;
	text-underline-offset: 0.2vw;
	text-align: left;
	padding-left: 3vw;
	padding-top: 1vw;
	z-index: 10;
}

#rutevej:hover {
	text-decoration: underline;
	color: var(--white);
	cursor: pointer;
}


#email {
	position: absolute;
	font-size: 1.7vw;
	font-family: var(--brod);
	font-weight: 500;
	font-style: normal;

	text-align: left;
	padding-left: 1vw;
	padding-top: 6vw;

	width: 25vw;
	z-index: 9;
}

#emailhref {
	position: absolute;
	color: var(--baggrund1);
	font-size: 1.7vw;
	font-family: var(--brod);
	font-weight: 400;
	font-style: normal;
	text-decoration: underline 0.15vw;
	text-underline-offset: 0.2vw;
	text-align: left;
	padding-left: 0.7vw;
	z-index: 9;
	width: 25vw;
}

#emailhref:hover {
	text-decoration: underline;
	color: var(--white);
	cursor: pointer;
}



#tele {
	position: absolute;
	font-size: 1.7vw;
	font-family: var(--brod);
	font-weight: 500;
	font-style: normal;

	text-align: left;
	padding-left: 1vw;
	padding-top: 8.3vw;
}

#telehref {
	color: var(--baggrund1);
	font-size: 1.7vw;
	font-family: var(--brod);
	font-weight: 400;
	font-style: normal;
	text-decoration: underline 0.15vw;
	text-underline-offset: 0.2vw;
	text-align: left;
	padding-left: 0.2vw;
	z-index: 8;
}

#telehref:hover {
	text-decoration: underline;
	color: var(--white);
}


#hrnederste {
	position: absolute;
	z-index: 10;
	width: 98vw;
	text-align: center;
	color: var(--baggrund1);
	height: 0vw;
	top: 44vw;
	left: 1vw;
	border: solid 0.01vh var(--lyseebrun6);
}

#logofutter {
	position: absolute;
	width: 20vw;
	height: auto;

	top: 10vw;
	left: 5vw;
}

.somefutterlogo {
	position: absolute;
	width: 5vw;
	height: auto;
	top: 22vw;
}

.somefutterlogo img {
	position: absolute;
	width: 5vw;
	height: auto;
	
}

#somelogo1 {
	left: 16vw;
}

#somelogo2 {
	left: 8vw;
	
}

.billedetekst {
	position: absolute;
	margin-top: 41vw;
	margin-left: 2.3vw;
	
}

.billedetekst p{
	font-size: 1.3vw;
}
/*________ Futter ____Slut_________*/

@media screen and (max-width: 600px) {
	.topnav a:not(:first-child),
	.dropdown .dropbtn {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
	}

	.dropdown-content {
		top: 0px;
		width: 100%;
	}

	.topnav {
		overflow: hidden;
		background-color: var(--rodbrun);
		font-family: var(--over);
		height: auto;

		display: block;
		padding-right: 0;
	}
	/*
#button1 {
	padding-left: 1.7vw;
}*/
}

@media screen and (max-width: 600px) {
	.topnav.responsive {
		position: relative;
	}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.topnav.responsive .dropdown {
		float: none;
	}
	.topnav.responsive .dropdown-content {
		position: relative;
	}
	.topnav.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	}
}