@charset "utf-8";
/* CSS Document */

h2 {
	padding: 0px 0px 0px min(2vw, 20px);
}

.information {
	text-align: left;
}

.information div {
	margin: min(max(2vw, 10px), 20px) 0px;
}

.section {
	background: #E8F0FF;
	border-radius: min(2vw, 20px);
	margin: 0px auto min(5vw, 50px) auto;
	max-width: 900px;
	padding: min(max(2vw, 10px), 20px);
}

.title {
	margin: 20px;
	padding: 0px;
	text-align: center;	
}

/* IDs */


#hero_container {
    background-image: url("/images/contact.png");
}


#hero_title h1 {
	margin-right: min(max(22vw, 80px), 300px);	
}

#spinner {
	box-sizing: border-box;
	display: none;
	height: min(max(12.5vw, 75px), 100px);
	margin: 0px auto;
	padding: min(max(6vw, 20px), 30px);
	position: relative;
}

#spinner img {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
	z-index: 3000;
}

#submit {
	align-content: center;
	background: linear-gradient(#80E0A0, #407050);
	border-radius: 10px;
	box-shadow: 2px 2px 5px 0px #00000080;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	font-family: Arial;
	font-size: min(max(3vw, 18px), 24px);
	font-weight: bold;
	height: min(max(12.5vw, 75px), 100px);
	justify-content: center;
	margin: 0px auto 0px auto;
	position: relative;
	text-align: center;
	text-shadow: 0px -1px 2px #00000060;
	width: min(max(25vw, 150px), 200px);
}

#submit:hover {
	background: radial-gradient(ellipse 200% 125% at top, #90F0B0, #407050);
}

/* MEDIA QUERIES */

@media only screen and (max-width: 480px) {
}

@media only screen and (min-width: 481px) {
}

@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) {
}