.btn {
	min-width: 0;
	width: 350px;
	margin-bottom: 0.5em;
	border: 2px solid white;
	padding: 6px 12px;
	font-size: 1.25vw;
	letter-spacing: 1px;
	text-transform: none;
	color: var(--tmn-darkblue);
	background-color: var(--tmn-yellow);
	transition: all 0.25s ease-in-out;
}

.container {
	/* border: 2px solid white; */
	max-width: 100%;
}

.btn.selbtn {
	width: 200px;
	height: 60px;
	padding: 0;
	margin: 0;
	margin-bottom: 1.0em;
	margin-left: 2.0em;
	margin-right: 2.0em;
	border: 2px solid white;
	vertical-align: middle;
	font-size: 0.75em;
	line-height: auto;
	letter-spacing: 1px;
	color: var(--tmn-darkblue);
	background-color: var(--tmn-yellow);
	white-space: normal;
}

.btn.selbtn-menupage {
	width: 400px;
	height: 100px;
	padding: 0;
	margin: auto;
	border: 2px solid white;
	vertical-align: middle;
	font-size: 1.0em;
	line-height: 100px;
	letter-spacing: 1px;
	color: var(--tmn-darkblue);
	background-color: var(--tmn-yellow);
	white-space: normal;
}

.btn.loginbtn {
	width: 15vw;
	height: 3vw;
	padding: 0;
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.5em;
	margin-right: 0;
	border: 2px solid white;
	border-radius: 0;
	vertical-align: middle;
	font-size: 1.2vw;
	line-height: 2.8vw;
	letter-spacing: 1px;
	color: var(--tmn-darkblue);
	background-color: var(--tmn-yellow);
}

.btn.loginbtn-lg {
	width: 24vw;
}

.btn.loginbtn:hover {
	color: var(--tmn-yellow);
	background-color: var(--tmn-darkblue);
}

.btn.loginbtn:active {
	background-color: var(--tmn-yellow-dark);
	color: var(--tmn-yellow);
	box-shadow: none;
}

.btn.loginbtn:focus, .btn.loginbtn:active:focus {
	border-color: white;
	color: var(--tmn-yellow);
	outline: 5px auto white;
}

.btn.loginbtn-disabled {
	color: gray !important;
	background-color: transparent !important;
	transition: none !important;
	border: 2px solid gray !important;
	outline: none !important;
	pointer-events: none !important;
}

@media screen and (max-width: 800px) {
	.btn.loginbtn {
		width: 55%;
		height: 32px;
		line-height: 28px;
		font-size: 16px;
	}
}

@media screen and (max-width: 720px) {
	.btn.loginbtn-lg {
		width: 75% !important;
	}
}

@media screen and (max-width: 640px) {
	.btn.loginbtn {
		width: 55%;
		height: 26px;
		line-height: 22px;
		font-size: 14px;
	}
	.btn.selbtn-menupage {
		width: 300px;
		height: 64px;
		padding: 0;
		margin: auto;
		border: 2px solid white;
		vertical-align: middle;
		font-size: 1.0em;
		line-height: 64px;
		letter-spacing: 1px;
		color: var(--tmn-darkblue);
		background-color: var(--tmn-yellow);
		white-space: normal;
		/* box-sizing: border-box; */
	}
}

@media screen and (min-width: 320px) {
	.btn.selbtn {
		width: 31%;
		min-width: 31%;
		height: 40px;
		font-size: 0.6em;
		/* line-height: 40px; */
		margin-left: 4px;
		margin-right: 4px;
	}
	h2 {
		font-size: 24px !important;
	}
}

@media screen and (min-width: 800px) {
	.btn.selbtn {
		min-width: 0;
		width: 180px;
		height: 60px;
		font-size: 0.5em;
		/* line-height: 60px; */
		/* display: none; */
		margin-left: 8px;
		margin-right: 8px;
	}
	h2 {
		font-size: 1.2em;
	}
}

@media screen and (min-width: 1024px) {
	.btn.selbtn {
		width: 220px;
		height: 70px;
		font-size: 0.5em;
		/* line-height: 70px; */
		/* display:none; */
		margin-left: 12px;
		margin-right: 12px;
	}
	h2 {
		font-size: 1.0em;
	}
}

@media screen and (min-width: 1280px) {
	.btn.selbtn {
		width: 280px;
		height: 70px;
		font-size: 0.6em;
		/* line-height: 70px; */
		/* display:none; */
	}
	h2 {
		font-size: 1.2em;
	}
}

@media screen and (min-width: 1440px) {
	.btn.selbtn {
		width: 320px;
		height: 80px;
		font-size: 0.7em;
		/* line-height: 80px; */
		/* display:none; */
	}
	h2 {
		font-size: 1.4em;
	}
}

@media screen and (min-width: 1680px) {
	.btn.selbtn {
		width: 400px;
		height: 80px;
		font-size: 0.8em;
		/* line-height: 80px; */
		/* display:none; */
		margin-left: 16px;
		margin-right: 16px;
	}
	h2 {
		font-size: 1.6em;
	}
}

@media screen and (min-width: 1920px) {
	.btn.selbtn {
		width: 450px;
		height: 80px;
		font-size: 1.0em;
		/* line-height: 80px; */
		/* display:none; */
	}
	h2 {
		font-size: 2.0em;
	}
}


.btn.selbtn1 {
	color: var(--tmn-yellow);
	background-color: var(--tmn-darkblue);
}

.btn.selbtn2 {
	color: var(--tmn-darkblue);
	background-color: var(--tmn-yellow);
}

.btn.selbtn2:hover {
	background-color: var(--tmn-yellow-light);
}

.btn.selbtn2:active {
	background-color: var(--tmn-yellow-dark);
	color: var(--tmn-yellow);
	box-shadow: none;
}

.btn.selbtn2:focus, .btn.selbtn2:active:focus {
	border-color: white;
	color: var(--tmn-yellow);
	outline: 5px auto white;
}

.btn.selbtn3 {
	color: var(--tmn-yellow);
	background-color: var(--tmn-darkblue);
}

.btn.selbtn4 {
	color: var(--tmn-white);
	background-color: var(--tmn-darkblue2);
}

.btn.selbtn5 {
	color: var(--tmn-yellow);
	background-color: var(--tmn-darkblue3);
}

.btn.selbtn6 {
	color: var(--tmn-white);
	background-color: #0a4d15;
}

.btn.selbtn7 {
	color: var(--tmn-white);
	background-color: #380655;
}

.btn.selbtn8 {
	color: var(--tmn-white);
	background-color: #3d0303;
}

.btn.selbtn1:hover,
.btn.selbtn3:hover,
.btn.selbtn4:hover,
.btn.selbtn5:hover {
	background-color: #003a91;
}

.btn.selbtn6:hover {
	background-color: #0b691b;
}

.btn.selbtn7:hover {
	background-color: #5a078a;
}

.btn.selbtn8:hover {
	background-color: #5e0404;
}

.btn:active {
	background-color: var(--tmn-darkblue);
	border-color: white;
	color: var(--tmn-yellow);
	box-shadow: none;
}

.btn:focus, .btn:active:focus {
	background-color: var(--tmn-darkblue);
	border-color: white;
	color: var(--tmn-yellow);
	outline: 5px auto white;
}

div.login-btn-container {
	position: absolute;
	right: 0;
	margin-top: 1.5em;
	margin-right: 2.5%;
}

div.btn-container-center {
	text-align: center;
}