@font-face {
    font-family: 'NeoSansStd';
    src: url("../font/NeoSansStd-Regular.otf") format("opentype"), url("../font/NeoSansStd-Regular.woff") format("woff"), url("../font/NeoSansStd-Regular.ttf")  format("truetype");
}
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: 'NeoSansStd';
}
.hidden {
	display: none !important;
}
body {
	background: -webkit-linear-gradient(left, #4B6A8C, #fff);
	/*min-height: 100vh;*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 3px solid black !important;
	padding-top: 10px;
}
.container {
	flex: 0 1 auto;
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	background: #fff;
	border-radius: 1rem;
	padding: 20px 0 20px 0;
}
.logo-area{
	flex: 0 1 auto;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding-top: 5px;
}
.logo-area img{
	flex: 0 1 auto;
	overflow: hidden;
	max-width: 90%;
}
.result-area{
	flex: 1 1 auto;
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #4F708F;
	font-size: 1.2em;
}
.spinner-area{
	flex: 1 1 auto;
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #4F708F;
	font-size: 1.2em;
}
.spinner{
	border: 10px solid #f3f3f3;
  	border-top: 10px solid #4F708F;
  	border-radius: 50%;
	width: 80px;
	height: 80px;
	animation: spin 2s linear infinite;
}
.info-area,
.error-area{
	flex: 1 1 auto;
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #4F708F;
	font-size: 1.2em;
}
.error-area{
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.error-area span{
	text-align: center;
}
.error-area .icon-item{
	padding: 0 10px 0 10px;
}
.header,
.footer{
	flex: 0 1 auto;
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 5px 0 10px 0;
}
.flag-area{
	flex: 0 1 auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	cursor: pointer;
}
.flag-item{
	display: flex;
	border-radius: 2px;
	border: solid 1px #4F708F;
	margin-right: 5px;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
 }
@media only screen and (min-width: 1024px) {
	.logo-area img {
		max-width: 60%;
	}
	.container,
	.header,
	.footer {
		width: 60%;
	}
	.spinner{
		width: 150px;
		height: 150px;
		border: 16px solid #f3f3f3;
  		border-top: 16px solid #4F708F;
	}
	.info-area,
	.error-area{
		font-size: 2em;
	}
}



body.bike .fa-skiing,
body.bike .fa-skiing-nordic,
body.bike .fa-tram {
	display:none;
}

body:not(.bike) .fa-biking,
body:not(.bike) .fa-hiking,
body:not(.bike) .fa-shoe-prints {
	display:none;
}