* {
	box-sizing: border-box;
}

html, body, #container {
    height: 100%;
}

body {
	background: url('../img/bg.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

a {
	text-decoration: none;
}

#logo {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 50px;
}

#fouteparty {
	max-width: 100%;
}

#container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    top: -30px;
}
	#container p#aftel {
		text-align: center;
		color: #b01e6f;
		display: block;
		font-family: "Cervo", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 50px;
		letter-spacing: -0.03em;
		line-height: 1;
		margin-bottom: 18px;
		padding: 14px 0 0;
		position: relative;
		text-align: center;
		text-transform: uppercase;
	}
	#container #fouteuur {
		font-size: 18px;
		font-family: "Qarla", "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-transform: none;
		color: black;
		letter-spacing: 0em;
		background: #00a5c8;
		padding: 5px 10px;
		color: white;
		line-height: 1.5;
		display: block;
	}
	#container #fouteuurnu {
		font-size: 18px;
		font-family: "Qarla", "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-transform: none;
		color: black;
		letter-spacing: 0em;
		background: #00a5c8;
		padding: 5px 10px;
		color: white;
		line-height: 1.5;
		display: block;
	}
	#container #proudtobefout {
		font-size: 32px;
		float: right;
		margin-top: -40px;
	}
		#container #proudtobefout a {
			color: #b01e6f;
		}

	#container #tickets {
		font-size: 18px;
		font-family: "Qarla", "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-transform: none;
		color: black;
		letter-spacing: 0em;
		padding: 5px 10px;
		color: black;
	}
		#container #tickets #kooptickets {
			color: white;
			background: #b01e6f;
			float: left;
			border-radius: 3px;
			padding: 5px;
			margin-top: 10px;
		}

		#container #tickets #fouteradio {
			color: white;
			background: #b01e6f;
			float: left;
			border-radius: 3px;
			padding: 5px;
			margin-top: 10px;
			margin-left: 10px;
		}

		#container #tickets #foute128 {
			color: white;
			background: #b01e6f;
			float: left;
			border-radius: 3px;
			padding: 5px;
		}


@media screen and ( max-height: 490px ){
	#container p {
		font-size: 40px;
	}
	#fouteparty {
		width: 300px;
	}
}

@media screen and (max-width: 440px) {
	#container {
		position: relative;
		top: -40px;
	}
		#container #tickets {
			position: relative;
			top: 20px;
		}

		#container #tickets #kooptickets, #container #tickets #fouteradio {
			float: none;
		}
		#container #tickets #foute128 {
			float: none;
			text-align: center;
			margin: -20px auto 0;
			display: block;
			width: 190px;
		}

		#container #proudtobefout {
			float: none;
			position: relative;
			top: 70px;
		}
}

@media screen and (max-width: 345px) {
	#container p#aftel {
		font-size: 40px;
	}
}






@font-face {
	font-family:'Cervo';
	src: url("../fonts/Cervo-Medium.eot");
	src: url("../fonts/Cervo-Medium.eot?#iefix") format("embedded-opentype"),
			url("../fonts/Cervo-Medium.woff") format("woff"),
			url("../fonts/Cervo-Medium.ttf") format("truetype"),
			url("../fonts/Cervo-Medium.svg#555430cc655c5ddffdc26ad0e7b64ca6") format("svg");
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family:'Qarla';
	src: url("../fonts/Qarla-Regular.eot");
	src: url("../fonts/Qarla-Regular.eot?#iefix") format("embedded-opentype"),
			url("../fonts/Qarla-Regular.woff") format("woff"),
			url("../fonts/Qarla-Regular.ttf") format("truetype"),
			url("../fonts/Qarla-Regular.svg#555430cc655c5ddffdc26ad0e7b64ca6") format("svg");
	font-style: normal;
	font-weight: normal;
}