@font-face {
    font-family: Funnel Sans;
    src: url('bin/FunnelSans-Regular.ttf');
}

html, body {
	font-family: Funnel Sans;
	background-color: #ebfdf0;
	color: black;
	margin: 0px;
	height: 100vh;
	overflow: hidden;
}

@media screen and (orientation: landscape) {
	
	#all_content {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		overflow-x: scroll; 
		overflow-y: hidden;
		user-select: none;
		background-color: #daf7e2;
	}

	#main_content {
		width: calc(100% - 120px);
		display: flex;
		flex-wrap: no-wrap;
		gap: 50px 150px;
		justify-content: flex-start;
		margin: 60px;
		flex-direction: row;
		align-items: flex-start;
		transform-origin: top left;
	}

	#bottom_content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 4px;
		width: 100%;
		bottom: 40px;
		position: absolute;
		z-index: 99;
	}
	
	.projekt {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.projekt_overskrift {
		font-size: 30px;
		font-weight: bold;
		color: #2bb952;
		margin-bottom: 4px;
	}
	
	.projekt_highlights {
		font-size: 18px;
		/* font-weight: bold; */
		color: #000;
		margin-bottom: 20px;
	}

	.projekt_tekstboks {
		width: 300px;
		margin-bottom: 40px;
		font-size: 14px;
		color: #000;
	}
	
	.projekt_img {
		display: block;
		margin-bottom: 10px;
		margin-right: 12px;
	}
	
	#projekt_img_stemmeseddel {
		width: 339px;
		height: auto;
		border: 2px solid #A0A0A0;
		margin-bottom: 40px;
		box-shadow: -6px 10px 6px rgb(0 0 0 / 10%);
	}
	
	#projekt_img_camlock {
		margin-bottom: 20px;
	}
	
	#projekt_img_skaereplotter {
		margin-bottom: -20px;
	}
	
	#projekt_img_rullegardin {
		margin-bottom: -40px;
	}
	
	#nav_prev::before {
		content: "< ";
		display: inline-block;
		width: 12px;
		height: 12px;
		padding-right: 6px;
		position: relative;
		margin-left: -42px;
		margin-right: 24px;
	}

	#nav_prev {
		user-select: none;
		z-index: 99;
		position: absolute;
		bottom: 0px;
		left: 30px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #2bb952;
		background-color: white;
		text-align: center;
		padding: 17px;

	}

	#nav_prev:hover {
		background-color: #E0E0E0;
		cursor: pointer;
	}


	#contactname {
		z-index: 99;
		position: relative;
		text-align: center;
		font-size: 16px;
		/* font-weight: bold; */
		color: #000000;
	}

	#contactmail {
		z-index: 99;
		display: flex;
		position: relative;
		text-align: center;
		font-size: 16px;
		/* font-weight: bold; */
		color: #2bb952;
	}

	#nav_next {
		user-select: none;
		z-index: 99;
		position: absolute;
		bottom: 0px;
		right: 30px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #2bb952;
		background-color: white;
		text-align: center;
		padding: 17px;
	}

	#nav_next:hover {
		background-color: #E0E0E0;
		cursor: pointer;
	}

	#nav_next::after {
		content: " >";
		display: inline-block;
		width: 12px;
		height: 50px;
		position: relative;
		margin-left: 30px;
		margin-right: -42px;
	}
}


@media screen and (orientation: portrait) {
	
	#all_content {
		height: 100dvh;
		width: 100vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-x: hidden; 
		overflow-y: scroll;
		user-select: none;
		background-color: #daf7e2;
	}

	#main_content {
		flex: 1;
		width: calc(100vw - 120px);
		display: flex;
		flex-wrap: nowrap;
		gap: 160px;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 60px;
		flex-direction: column;
		/* transform-origin: top left; */
	}

	#bottom_content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 12px;
		width: 100vw;
		height: 120px;
		bottom: 0px;
		position: absolute;
		z-index: 99;
		background-color: #2bb952;
	}
	
	.projekt {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		width: 94vw;
		background-color: #daf7e2;
	}
	
	.projekt_overskrift {
		font-size: 80px;
		font-weight: bold;
		color: #2bb952;
		margin-bottom: 4px;
	}
	
	.projekt_highlights {
		font-size: 44px;
		color: #000;
		margin-bottom: 20px;
	}

	.projekt_tekstboks {
		width: 84vw;
		margin-bottom: 40px;
		margin-left: 5px;
		font-size: 36px;
		color: #000;
	}

	.projekt_img {
		width: 94vw;
		display: block;
		margin-bottom: 10px;
		margin-right: 12px;
		margin-left: -40px;
	}
	
	#projekt_img_stemmeseddel {
		border: 2px solid #A0A0A0;
		margin-bottom: 40px;
		box-shadow: -6px 10px 6px rgb(0 0 0 / 10%);
	}
	
	#projekt_img_camlock {
		margin-bottom: 20px;
	}
	
	#projekt_img_skaereplotter {
		margin-bottom: -20px;
	}
	
	#projekt_img_rullegardin {
		margin-bottom: -40px;
	}
	
	#nav_prev::before {
		content: "< ";
		display: inline-block;
		width: 12px;
		height: 12px;
		padding-right: 6px;
		position: relative;
		margin-left: -42px;
		margin-right: 24px;
	}

	#nav_prev {
		user-select: none;
		z-index: 99;
		position: absolute;
		bottom: 0px;
		left: 30px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #2bb952;
		background-color: white;
		text-align: center;
		padding: 17px;

	}

	#nav_prev:hover {
		background-color: #E0E0E0;
		cursor: pointer;
	}


	#contactname {
		z-index: 99;
		position: relative;
		text-align: center;
		font-size: 36px;
		/* font-weight: bold; */
		color: #FFF;
	}

	#contactmail {
		z-index: 99;
		display: flex;
		position: relative;
		text-align: center;
		font-size: 36px;
		/* font-weight: bold; */
		color: #FFF;
	}

	#nav_next {
		user-select: none;
		z-index: 99;
		position: absolute;
		bottom: 0px;
		right: 30px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #2bb952;
		background-color: white;
		text-align: center;
		padding: 17px;
	}

	#nav_next:hover {
		background-color: #E0E0E0;
		cursor: pointer;
	}

	#nav_next::after {
		content: " >";
		display: inline-block;
		width: 12px;
		height: 50px;
		position: relative;
		margin-left: 30px;
		margin-right: -42px;
	}
}

.v_spacer {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 1px;
	min-width: 1px;
	height: 15px;
	min-height: 15px;
}