@font-face {
	font-family: QuizterFont;
	src: url(fonts/OrkneyReg.ttf);
}

@font-face {
	font-family: QuizterTitleFont;
	src: url(fonts/FredokaOne-Regular.ttf);
}

.menu {
	margin: 0px;
}

.logo{
	position: absolute;
    top: 0.5vw;
    left: 1.5vw;
    width: 14vw;
    height: 4vw;
    display: block;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background-image:url("./images/logo.svg");
    background-size: contain;
    background-position: center;
	background-repeat: no-repeat;
}

.menu ul{
	padding: 0;
	list-style-type: none;
	max-width: 100vw;
    margin: 0px;
}

.menu li{
	padding: 0;
	float: left;
	width: 40%;
	height: 5vw;
	font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
	text-align: center;
	display: inline-block;
	border-bottom: 3px solid #5888d1;
}

@media (min-width: 768px){
	.menu li{
		font-size: 1.8vw;
	}
}

@media (max-width: 768px){
	.menu li{
		font-size: 3vw;
	}
}

.menu li.skip{
	width: 20%;
}

.menu li.effect:hover{
	border-bottom: 3px solid #ff7171;
}

.menu ul a{
	text-decoration: none;
	padding: 0;
	display: inline-block;
	border: 0 solid #5888d1;
	color: #5888d1;
	text-align: center;
	margin: 1vw;
	max-height: 5vw;
	font-weight: 600;
	font-family: QuizterTitleFont;
}

.menu ul a:hover {
    color: #ff7171;
	font-style: italic;
}

.content{
	min-height: 100%;
	width: 80%;
	margin: auto;
	padding-top: 3vw;
	font-family: QuizterFont;
}

@media (min-width: 768px){
	.content h1{
		font-size: 2vw;
	}

	.content h2{
		font-size: 1.5vw;
	}

	.content p{
		font-size: 1vw;
	}
	
	.dropdown{
		font-size: 1vw;
	}
	
	.inputmulti{
		font-size: 1vw;
	}
	
	.submit{
		font-size: 1vw;
	}
	
	.content .mainimg{
		width: 19%;
		float: left;
		padding: 0.6vw;
	}

	.content .text{
		width: 40%;
		float: left;
	}
}
@media (max-width: 768px){
	.content h1{
		font-size: 6vw;
	}

	.content h2{
		font-size: 4.5vw;
	}

	.content p{
		font-size: 3vw;
	}
	
	.dropdown{
		font-size: 3vw;
	}
	
	.inputmulti{
		font-size: 3vw;
	}
	.submit{
		font-size: 3vw;
	}
	
	.content .mainimg{
		width: 80%;
		float: left;
	}

	.content .text{
		width: 100%;
		float: left;
	}
}

.dropdown {
	border: none;
	border-bottom: 1px solid #5888d1;
	color: #5888d1;
	padding: 0.5vw;
	font-family: QuizterFont;
}

.inputmulti{
	padding: 9px 0;
    color: #5888d1;
    font-weight: 500;
	border: none;
	width: 50%;
	height: 10vw;
	font-family: inherit;
	border-bottom: 1px solid #5888d1;
	border-left: 1px solid #5888d1;
}

.submit{
	background-color: white;
	border: 1px solid #5888d1;
	font-family: QuizterFont;
	padding: 1vw;
	margin-top: 0.6vw;
}

.submit:hover{
	border: 1px solid #ff7171;
	box-shadow: inset 0 -3px 0 #ff7171;
	color: #ff7171;
}

.footer{
	/*border-top: 1px solid #5888d1;*/
	background-color: #CFCFCF;
	font-family: QuizterTitleFont;
	text-align: center;
	display: inline-block;
	width: 100%;
}

@media (min-width: 768px){
	.footer h2{
		font-size: 1.8vw;
	}
}

@media (max-width: 768px){
	.footer h2{
		font-size: 3vw;
	}
}