@charset "utf-8";
/* CSS Document */

.footnote {
	font-size: min(max(2.5vw, 12px), 16px);
	margin-top: min(3vw, 10px);
	min-width: 100%;
	width: min-content;
}

.input_container {
	align-items: center;
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	font-family: Arial, Verdana, Geneva, Tahoma, SansSerif, sans-serif;
	margin-bottom: min(2vw, 20px);
	text-align: left;
}

.input_container input, .input_container select, .input_container textarea {
	background: none;
	border: 1px solid #C0C0C0;
	border-radius: min(1vw, 5px);
	box-sizing: border-box;
	flex: 1;
	font-size: min(max(4vw, 16px), 20px);
	padding: min(0.8vw, 5px);
}

.input_container option {
	color: #404080;
}

.input_title {
	color: #204080;
	font-size: min(max(4vw, 16px), 20px);
	margin-right: 10px;
	text-align: right;
	width: 150px;
}

.login_container {
	margin: 20px 20px min(5vw, 50px) 20px;
	max-width: 450px;
}

.section {
	background: #E8F0FF;
	border-radius: min(2vw, 20px);
	padding: min(max(2vw, 10px), 20px)
}

.section_title {
	padding: 0px min(3vw,100px);
	text-align: center;
}

.submit_button {
	background: linear-gradient(#FFF0A0, #FFC040);
	border-radius: min(1vw, 10px);
	box-shadow: 2px 2px 4px #00000040;
	color: #204080;
	font-size: min(max(2vw, 8px), 12px);
	font-weight: bold;
	margin: 0px auto;
	padding: min(2vw, 10px) min(3vw, 20px);
	text-shadow: 1px 1px #FFFFFF40, -1px -1px #00000040;
	width: min(22vw, 100px);
}

.submit_message {
	color: #FF0000;
	min-height: min(max(3vw, 20px), 30px);
	margin: min(1vw, 10px);
}

.title {
	margin: 20px;
	padding: 0px;
	text-align: center;	
}

/* IDs */

#agree_container {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	font-size: min(max(2.5vw, 12px), 16px);
	margin: 10px 0px;
	text-align: left;
}

#hero_container {
    background-image: url("/images/contact.png");
}


#hero_title h1 {
	margin-right: min(max(22vw, 80px), 300px);	
}

#login {
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
    justify-content: center;
}

#reset {
	color: #0000FF;
	cursor: pointer;
	user-select: none;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 480px) {
	.input_title {
		text-align: left;
		width: min(max(70vw, 200px), 320px);
	}
}

@media only screen and (min-width: 481px) {
	.input_container {
		flex-wrap: nowrap;
	}
	
	#agree_container {
		float: right;
	}
	
}

@media only screen and (max-width: 540px) {
}

@media only screen and (min-width: 720px) {
}

@media only screen and (min-width: 981px) {
}

@media only screen and (max-width: 1080px) {
}

@media only screen and (min-width: 1200px) {
}
