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

@font-face {
    font-family: 'amaticbold';
    src: url('../fonts/amatic-bold-webfont.eot') format('embedded-opentype'),
		 url('../fonts/amatic-bold-webfont.woff2') format('woff2'),
         url('../fonts/amatic-bold-webfont.woff') format('woff'),
		 url('../fonts/amatic-bold-webfont.ttf') format('truetype'),
         url('../fonts/amatic-bold-webfont.svg#amatic-bold-webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* margins */
.top-0 { margin-top: 0px }
.top-5 { margin-top: 5px }
.top-10 { margin-top: 10px }
.top-15 { margin-top: 15px }
.top-20 { margin-top: 20px }
.top-30 { margin-top: 30px }
.top-40 { margin-top: 40px }
.top-60 { margin-top: 60px }
.top-80 { margin-top: 80px }
.top-120 { margin-top: 120px }
.top-180 { margin-top: 180px }
.top-240 { margin-top: 240px }
.top-360 { margin-top: 360px }
.bottom-0 { margin-bottom: 0 }
.bottom-5 { margin-bottom: 5px }
.bottom-10 { margin-bottom: 10px }
.bottom-20 { margin-bottom: 20px }
.bottom-30 { margin-bottom: 30px }
.bottom-40 { margin-bottom: 40px }
.bottom-50 { margin-bottom: 50px }
.bottom-60 { margin-bottom: 60px }
.bottom-80 { margin-bottom: 80px }
.bottom-360 { margin-bottom: 360px }
.pad-top-80 { padding-top: 80px }
.pad-top-60 { padding-top: 60px }
.pad-top-40 { padding-top: 40px }
.pad-top-30 { padding-top: 30px }
.pad-top-20 { padding-top: 20px }
.pad-bot-80 { padding-bottom: 80px }
.pad-bot-60 { padding-bottom: 60px }
.pad-bot-40 { padding-bottom: 40px }
.pad-bot-30 { padding-bottom: 30px }
.pad-bot-20 { padding-bottom: 20px }
.pad-left-80 { padding-left: 80px }
.pad-left-60 { padding-left: 60px }
.pad-left-40 { padding-left: 40px }
.pad-left-30 { padding-left: 30px }
.pad-left-20 { padding-left: 20px }
.pad-right-80 { padding-right: 80px }
.pad-right-60 { padding-right: 60px }
.pad-right-40 { padding-right: 40px }
.pad-right-30 { padding-right: 30px }
.pad-right-20 { padding-right: 20px }


header {
	background-image: url(../images/spreekantine_start.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

body, html {
	width: 100% !important; 
    overflow-x: hidden !important;
	padding: 0;
}

#logo {
	margin-top: 360px;
	margin-bottom: 360px;
}

#map-container {
	height: 700px;
}

#sidebar {
	padding: 0;
	z-index: 99;
}

footer {
	position: relative;
}

aside {
	position: absolute;
	float: left;
}

.btn-default {
	border: solid 2px rgb(42,164,221);
	font-family: 'amaticbold', sans-serif;
	text-transform: uppercase;
	font-size: 24px;
	color: rgb(42,164,221);
}

.btn-default:hover, .btn-default:active {
	background-color: rgb(42,164,221);
	border: solid 2px rgb(42,164,221);
	color: #fff;
}

.btn-white {
	border: solid 2px white;
	font-family: 'amaticbold', sans-serif;
	text-transform: uppercase;
	font-size: 24px;
}

.btn-white:hover, .btn-white:active {
	background-color: white;
	border: solid 2px white;
	color: rgb(42,164,221);
}

h1, h2, h3 {
	font-family: 'amaticbold', sans-serif;
	text-transform: uppercase;
	margin-top: 0;
}

h1 {
	font-size: 60px;
	text-align: left;
	margin-bottom: 40px;
}

p, h4 {
	font-family: 'fira-sans', sans-serif;
	font-size: 15px;
	line-height: 22px;
}

h4 {
	font-weight: 800;
}

a {
	font-size: 15px;
	color: rgb(42,164,221);
}

.text-blue {
	color: rgb(42,164,221);
}

.text-white, .text-white a {
	color: #fff;
}

.bg-blue {
	background-color: rgb(42,164,221);
}

.bg-white {
	background-color: rgb(255,255,255);
}

.bs-sidebar.affix {
    position: fixed;
	float: left;
    top: 0px;
}

.landscape-visible {
	display: block;
}

.portrait-visible {
	display: none;
}

/* Cookie Bar */
#cookie-bar {text-align: center; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4); z-index: 9999; }
#cookie-bar.fixed {position: fixed; top:20px; border-radius: 6px; padding: 10px 15px; font-size: 16px; line-height: 1.2; width:60%; margin-left: 20%;}
#cookie-bar.fixed.bottom {bottom:50px; top:auto; }
#cookie-bar p {color:rgb(42,164,221); margin:0; padding:0;}
#cookie-bar a {color:rgb(42,164,221); margin-left: 20px; cursor: pointer;}
#cookie-bar a:hover {font-weight: 800; text-decoration: none;}
#cookie-bar .cb-enable {}
#cookie-bar .cb-enable:hover {}
#cookie-bar .cb-disable {}
#cookie-bar .cb-disable:hover {}
#cookie-bar .cb-policy {}
#cookie-bar .cb-policy:hover {}

@media (max-width: 500px) {
#cookie-bar.fixed {font-size: 12px; line-height: 1.2;}
}

@media (max-width: 321px) {
	footer p, a {
		font-size: 9px;}	
	#logo { 
		margin-top: 240px;
		margin-bottom: 240px;}
}

@media (max-width: 376px) {
	#logo { 
		margin-top: 285px;
		margin-bottom: 285px;}
}

@media (max-width: 415px) {
	footer p, a {
		font-size: 11px;}	
	#logo { 
		margin-top: 310px;
		margin-bottom: 310px;}
}

@media (orientation: landscape) and (max-width: 737px) {
	footer p, a {
		font-size: 11px;}
	#logo { 
		margin-top: 20%;
		margin-bottom: 20%;}
}

@media (orientation: portrait) {
	.landscape-visible {
		display: none;
	}
	.portrait-visible {
		display: block;
	}
}