@font-face {
	font-family: Cantarell;
	src: url(../fonts/cantarell/Cantarell-Regular.otf) format(opentype);
	font-weight: normal;
}
@font-face {
	font-family: Cantarell;
	src: url(../fonts/cantarell/Cantarell-Bold.otf) format(opentype);
	font-weight: bold;
}
@font-face {
	font-family: Founder;
	src: url(../fonts/founder/Founder-Regular-BF64d30a7d71317.otf) format(opentype);
	font-weight: normal;
}
@font-face {
	font-face: Founder;
	src: url(../fonts/founder/Founder-Bold-BF64d30a7d4bf9b.otf) format(opentype);
	font-weight: bold;
}
body {
	font-family: Founder;
}
#noscript {
	color: red;
	background: #ffffff;
	font-size: 200%;
	font-weight: bold;
	padding: 0.5%;
}
.background {
	background: url(../img/background.png) repeat;
	position: absolute;
	width: 100%;
}
h1 {
	vertical-align: top;
	padding-top: 3%;
}
h1, h2 {
	font-family: Cantarell;
	font-weight: bold;
}
.header {
	margin: 1% 0;
}
.header, .main, .footer {
	padding: 1% 2%;
}
.logo, .logo h1 {
	display: inline-block;
}
.logo {
	width: 48%;
}
.logo img {
	margin: 2% 5%;
}
.mobile_menu {
	float: right;
}
body, .header, .main {
	background: #ffffff;
}
h2 {
	text-align: center;
}
p {
	text-align: justify;
}
h2, p {
	margin: 2% 0;
}
.main b {
	font-weight: bold;
}
.footer {
	color: #ffffff;
}
@media screen and (max-width: 375px) {
	h1, h2 {
		font-size: 8pt;
	}
	.menu li a, .footer {
		font-size: 3pt;
	}
	p, input, label, button {
		font-size: 5pt;
	}
	.logo img {
		width: 13px;
	}
}
@media screen and (min-width: 375px) and (max-width: 959px){
	h1, h2 {
		font-size: 15pt;
	}
	.menu li a, .footer {
		font-size: 6pt;
	}
	p, input, label, button {
		font-size: 9pt;
	}
	.logo img {
		width: 23px;
	}
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
	h1, h2 {
		font-size: 38pt;
	}
	.menu li a, .footer {
		font-size: 17pt;
	}
	p, input, label, button {
		font-size: 23pt;
	}
	.logo img {
		width: 60px;
	}
}
@media screen and (max-width: 960px) {
	.menu {
		position: absolute;
		display: block;
		width: 96%;
		text-align: center;
		background: #ffffff;
		padding: 0 2%;
		float: left;
		margin-top: 3%;
		margin-left: -2%;
		box-shadow: 0 5px 5px rgba(0,0,0,0.75);
	}
	.menu li {
		margin: 1.5% 0;
	}
	.menu li a {
		border: 1px solid;
		color: #060605;
		width: 100%;
		display: inline-block;
		text-decoration: none;
		padding: 2% 0;
	}
	button {
		border: 1px solid;
		color: #060605;
		display: inline-block;
		padding: 2% 0;
	}
	.mobile_menu {
		margin-top: 1%;
	}
}
@media screen and (min-width: 961px) {
	.mobile_menu {
		display: none;
	}
	.menu {
		width: 50%;
		display: inline-block;
		float: right;
	}
	.menu li {
		margin: 5% 1.5%;
		list-style-type: none;
		display: inline-block;
		width: 30%;
		float: left;
	}
	button {
		padding: 2% 2% 2% 2%;
		display: inline-block;
		text-decoration: none;
		border-style: solid;
		border-width: 3px;
		color: #060605;
		text-align: center;
	}
	.menu li a {
		padding: 2% 2% 2% 2%;
		display: inline-block;
		text-decoration: none;
		border-style: solid;
		border-width: 3px;
		width: 100%;
		float: left;
		color: #060605;
		text-align: center;
	}
	.menu li a:hover, button:hover {
		background-color: #3993b0;
		color: #ffffff;
		border-style: solid;
		border-width: 3px;
		border-color: #060605;
	}
	.menu ul {
		display: block;
		width: 70%;
		position: absolute;
		float: right;
	}
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
	h1, h2 {
		font-size: 47pt;
	}
	.menu li a, .footer {
		font-size: 21pt;
	}
	p, input, label, button {
		font-size: 28pt;
	}
	.logo img {
		width: 75px;
	}
}
@media screen and (min-width: 1600px) and (max-width: 1919px) {
	h1, h2 {
		font-size: 62pt;
	}
	.menu li a, .footer {
		font-size: 28pt;
	}
	p, input, label, button {
		font-size: 37px;
	}
	.logo img {
		width: 100px;
	}
}
@media screen and (min-width: 1920px) {
	h1, h2 {
		font-size: 75pt;
	}
	.menu li a, .footer {
		font-size: 33pt;
	}
	p, input, label, button {
		font-size: 45pt;
	}
	.logo img {
		width: 120px;
	}
}