html, body {
	padding: 0;
	margin: 0;
}

body {
	width: 100vw;
	color: 	rgb(0, 170, 115);
	background-color: rgba(17, 17, 17,1.0);
	font-family: system-ui;
	overflow-x: hidden;
	font-size: 16px;
}

.icon {
	max-height: 20vmin;
	max-width: 20vmin;
}

menu {
	position: fixed;
	z-index: 10;
	height: 100vh;
	top: 0;
	display: flex;
	right: 0;
	margin: 0;
	padding: 0;
	min-width: 30vw;
	max-width: 80vw;
	background-color: rgba(17, 17, 17, 1);
	box-shadow: 0 0 3vw black;
}

menu ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow-y: auto;
	overflow-x: hidden;
	width: 100%;
}

menu ul a {
	display: block;
	padding: 3vmin 3vmax;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	width: 100%;
}



main {
	padding-top: 15vh;

	min-height: 100vh;
	background-color: inherit;
	overflow-x: hidden;
}


h1::first-letter, h2::first-letter {
	color: #00aa73;
}

.clickable-dark {
	background-color: #111;
}

.clickable-dark:hover {
	background-color: #222;
}

.clickable-dark:active {
	background-color: #333;
}

main h2 {
	padding: 5vmin;
	margin: 3vmin 0;

}

main > h2 {
	border-bottom: 2px solid white;
	display: inline-block;
	padding-left: 12vw;
}

main > span {
	max-width: 60vw;
	margin: auto;
}

hr {
	margin: 5vh auto;
	width: 80vw;
	border: 1px solid #333;
	padding: 0;
}

.app-container {
	width: 94vw;
	display: flex;
	flex-direction: column;
	align-items: center;

}

.app-content {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	gap: 10%;
}

.app-text {
	display: flex;
	flex-direction: column;
	
	align-items: center;
	justify-content: space-evenly;
}

.app-content > * {
	max-width: 80%;
}

.app-content img {
	border-radius: 5vmin;

}

.app-content p:last-child {
	text-align: right;
}

.video-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 0;
/*	background-color: #aaa;*/
}

.video-container iframe {
	width: 62vw;
	height: 36vw;
	border: 1vmin solid black;
	box-shadow: 0 0 5vmin 1vmin black;
	margin: 10vmin;
}

.team-container {
	width: 90vw;
	padding: 5vw;
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
/*	background-color: purple;*/
}

.team-container > * {
	padding: 4vmin 8vmin;
}

.team-container > span {
	text-align: justify;
}

.member-container {
	display: flex;
	justify-content: space-evenly;
	gap: 3vmin;
	padding-bottom: 0;
}

.member-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 3vh;

	
	
}

.member-item span {
	text-align: center;
	padding: 5vmin;
	font-size: 90%;
/*	max-width: 80%;*/
}

.member-item span b {
	color: white;
	font-size: 110%;
}

.member-item img {
	border-radius: 50%;
	width: 80%;
}

.placeholder {
	background-color: purple;
	color: orange;
	font-size: 62px;
	height: 90vh;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}


.time {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: 5vmin 13vmin;
	gap: 12vmin;
}

.time-list {
	list-style-type: none;
	padding: 0;
}

.time-list li {
	padding: 1vmax 0;
}

.time-list li b {
	color: white;
	font-size: 100%;
	font-weight: 400;
}

.time-list i {
	color: white;
}

.time h2 {
	padding: 5vh 0;
	
}

.time span {	
	text-align: justify;
}

.time img {
	border: 2px solid white;
}

.company-container {
	padding: 3vw;

	background-image: url('/assets/parking1.jpeg');
	background-size: cover;
	background-position: center;
	padding: 10vmin 5vmin;
}

.company-container p {
	padding: 5vw;
	color: white;
/*	text-shadow: .1em .1em rgba(0, 0, 0, .5);*/
	background-color: rgba(17, 17, 17, .5);
	
	text-align: justify;
}

.company-container img {
	display: block;
	background-color: rgba(17, 17, 17, 1);
	border: 10px solid rgba(17, 17, 17, 1);
	border-radius: 5vmin;

    margin-bottom: 4.5vmin;
}



.contacts {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 5vmin;
	min-height: 10vh;
	color: white;

}

.contacts * {
	border: none;
}

.contacts-row {
	display: flex;
	justify-content: space-between;
}

.contacts-row input {
	width: 100%;
}

.contacts textarea {
	resize: vertical;
}

.contacts textarea, .contact-input {
	background-color: #3b3b3b;
	padding: 2vmin;
	color: white;
	font-size: 120%;
	resize: none;
	width: 100%;
}

.contacts input[type="button"] {
	background-color: #3b3b3b;
	padding: 2vh 10vw;	
	margin: 0 auto;
	border-radius: 5vmin;
	font-size: 150%;
	color: white;
	max-width: 60%;
}


.contacts input[type="button"]:hover {
	background-color: #555;
}

.contacts input[type="button"]:active {
	background-color: #777;
	color: rgb(0, 170, 115);
}


.sponsor-container {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	padding: 10vmin 10vmin;
	margin-bottom: 15vh;
	gap: 10vmin;
}

.sponsor-container img {
	max-height: 20vh;
	max-width: 40vw;
/*	box-shadow: 0 0 1vmin black;*/
}

footer {
	background-color: #000;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5vmin 10vw;

}

footer a {
	text-decoration: none;
	color: inherit;
}

footer a:hover {
	color: white;
}

footer h2, footer span {
    margin: 1vmax;
    align-self: start;
    padding: 5px 0;
}

footer .hint {
	font-size: 12px;
}

footer .footer-row {
	display: flex;
	
	justify-content: space-between;
	
	width: 100%;
	padding: 3vmin;
}

.social-media {
	background-color: black;
	padding: 5vh 0;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

footer img {
	filter: invert(100%);
	height: 12vmin;
}

footer > span {
	font-size: 90%;
}

footer > span b {
	font-size: 300%;
	margin-right: 5vmin;
	font-weight: 300;
}

.footer-row + .footer-row {
	border-top: 1px solid rgb(0, 170, 115);
}

span + .footer-row {
	border-top: 1px solid rgb(0, 170, 115);
}

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

.footer-row b {
	
}

@media (orientation: portrait) {
	
	switch-content img {
		max-width: 38vw;
	}		

	#top-header h1 {
		font-size: 7vw;
	}

	#top-header > a > img {
		height: 38%;
	}
	
	main > h2 {
		padding: 1vw 10vw;
		text-align: center;
		border: none;
		display: block;
	}

	.switch-content img {
		max-width: 80vw;
	}

	.member-container {
		flex-direction: column;
		align-items: center;
	}

	.team-container h2 {
		text-align: center;
	}

	.team-container > span {
		text-align: justify;
	}

	.member-item {
		width: 100%;
	}

	.time img{
		width: 80%;
	}

	.company-container img {
		max-width: 62%;
	}
	
	menu {
		width: 80vw;
	}

	.sponsor-container img {
		max-height: 50vh;
		max-width: 80vw;
		
	}

	.contact-input {
		max-width: 80vw;
	}

	.footer-row span {
		max-width: 60%;
	}

	.switch-text {
		text-align: center;
	}

	.switch-text h2 {
		margin: 5vmin;
	}

}

@media (orientation: landscape) {
	.member-item {
		width: 25%;
	}

	.app-content {
		flex-direction: row;
		padding: 0 12vw;
	}

	.app-content img {
		max-height: 80vh;
	}

	.time {
		flex-direction: row;
	}
	.time img {
		width: auto;
		height: 80vh;
	}

	.contacts {
		padding: 5vmin;
	}

	.contact-input {
		max-width: 80vw;
	}
}

@media (max-height: 700px) and (orientation: landscape) {
	

	main hr {
		margin: 15vh auto;
	}


	menu {
		font-size: 5vh;
	}
}

@media (min-height: 701px) and (orientation: landscape) {
	hr {
		margin: 10vh auto;
	}

	.switch-content img {
		max-width: 38vw;
	}

	.switch-text {
		align-items: center;
	}

	.right {
		text-align: right;
	}

	.team-container > span {
		max-width: 80%;
		align-self: center;
	}

	.company-container img {
		max-width: 32%;
	}

	.contact-input {
		width: 100%;
	}
}



/*fonts*/

.green-white {
	color: white;
}

.green-white::first-letter {
	color: #00aa73;
}

.green {
	color: #00aa73;
}

.white {
	color: white;
}



.switch-text p {
	text-align: justify;
}