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

/*MEDIA QUERIES START*/
@media screen and (max-width: 1900px){
	.hero-text {
		top: 50%;
	}
}

@media screen and (max-width: 1600px){
	.hero-text {
		top: 45%;
	}
}

@media screen and (max-width: 1400px){
	.hero-text {
		top: 40%;
	}
}

@media screen and (max-width: 1200px){
	.hero-text {
		top: 30%;
	}
}

@media screen and (max-width: 900px){
	.hero-text {
		font-size: 45px;
		top: 20%;
	}
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}


@media screen and (max-width: 600px){
	.hero-text {
		font-size: 40px;
		top: 15%;
	}
}

@media screen and (max-width: 600px){
	.topnav a{
		font-size: 20px;
	}
}

@media screen and (max-width: 500px){
	.topnav a{
		font-size: 18px;
	}
	table {
		min-width: 100%;
	}
	th, td {
		font-size: 12px;
	}
	button {
		max-width: 100%;
		font-size: 12px;
		padding: 5px 8px;
	}
}

@media screen and (max-width: 350px){
.topnav a{
		font-size: 15px;
	}
	table {
		min-width: 100%;
	}
	th, td {
		font-size: 12px;
	}
	button {
		max-width: 100%;
		font-size: 10px;
		padding: 5px 5px;
	}
}

/*MEDIA QUERIES END*/