* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #1b1f28;
	font-size
}

#menu {
	width: 100%;
	display: flex;
	position: fixed;
	top: 0;
    background-color: #1b1f28;
    z-index: 5;
}

nav {
	width: 35%;

}

#menu nav ul {
	display: flex;
	list-style: none;
	padding-left: 2vw;
	padding-top: 2vw;
}

#menu nav ul a {
	text-decoration: none;
	color: rgb(242, 229, 220);
	font-size: 2vw;
	padding-right: 3vw;
	font-family: 'Raleway', sans-serif;
	letter-spacing: .08em;
}


#lijn {
	width: 30%;
	border-top: 3px solid rgb(52, 117, 105);
	margin-top: 3vw;
	margin-left: 4vw;
	text-align: center;
}

#social {
	display: flex;
	width: 28%;
	padding-left: 2vw;
	padding-top: 1vw;

}

#menu #social {
	text-align: right;
}

#hamburger {
	display: none;
	width: 100%;
	height: 200px;
	position: relative;
	z-index: 10;
}

#hamburger nav {
	width: 150px;
	height: 220px;
	padding-top: 10px;
	position: fixed;
	right: 80px;
	top: -220px;
	background-color: rgba(21, 28, 34, 0.6);
}


#hamburger nav ul {
	list-style: none;
	text-align: right;
}

#hamburger nav ul li a {
	text-decoration: none;
	color: rgb(242, 229, 220);
	font-size: 5vw;
	font-family: 'Raleway', sans-serif;
	letter-spacing: .08em;
	line-height: 7vw;
	padding-right: 10px;
}

#hamburger #knop {
	width: 50px;
	height: 50px;
	position: fixed;
	right: 10px;
	top: 10px;
	margin-right: 10px;
}

#knop .laag {
	width: 80%;
	height: 3px;
	background-color: rgb(52, 117, 105);
	margin: 10px auto;
}

#hamburger #sluit {
	width: 50px;
	height: 50px;
	position: fixed;
	right: 20px;
	top: 30px;
	display: none;
}


#sluit #een {
	width: 100%;
	height: 4px;
	background-color: rgb(52, 117, 105);
	transform: rotate(45deg);
	position: absolute;
}

#sluit #twee {
	width: 100%;
	height: 4px;
	background-color: rgb(52, 117, 105);
	transform: rotate(-45deg);
	position: absolute;
}


#intro {
	text-align: center;
	width: 100%;
	padding-top: 3vw;
	padding-bottom: 8vw;
}

.titel {
	font-family: 'Raleway', sans-serif;
	letter-spacing: .05em;
	font-size: 5vw;
	font-weight: 300;
	color: rgb(52, 117, 105);
	width: 50vw;
	text-align: right;
	padding-right: 2vw;
    padding-top: 1.05vw;
}

#bio {
	display: flex;
	height: 250px;
}

.beweging {
	width: 5px;
	background-color: rgb(52, 117, 105);
}


#bio p,
#contact p {
	font-family: 'Nunito', sans-serif;
	font-size: 2vw;
	color: rgb(242, 229, 220);
	width: 50%;
	padding-left: 2vw;
	padding-top: 2vw;
}

#nummers {
	display: flex;
}

.getal {
	text-align: center;
	width: 16%;
	margin: 250px auto 350px;
}

.num {
	font-family: 'Archivo', sans-serif;
	font-size: 6vw;
	font-weight: 500;
	color: rgb(52, 117, 105);
	height: 8vw;
	border-bottom: 3px solid rgb(52, 117, 105);
}

.getal p {
	color: rgb(242, 229, 220);
	font-family: 'Nunito', sans-serif;
	font-size: 1.5vw;
	padding-top: 2vh;
}



#speellijst {
	display: flex;
	position: relative;
	min-height: 1800px;
	margin-bottom: 300px;
}

#titelMobile{
    display: none;
}

#optredens {
	list-style: none;
	color: rgb(242, 229, 220);
	font-family: 'Nunito', sans-serif;
	font-size: 1.2vw;
	line-height: 2vw;
	position: absolute;
	left:42vw;
    top: 10vw;
}


#speellijst ul li a {
	text-decoration: none;
	color: rgb(242, 229, 220);
	background-color: rgb(52, 117, 105);
	padding: 0.2vh;
	padding-left: 1.5vh;
	padding-right: 1.5vh;
	margin-right: 6vw;
	text-transform: uppercase;
	font-size: 1vw;
}

#speellijst .noticket {
    background-color: #1b1f28;
    color: #1b1f28;
}


#contact {
	display: flex;
	height: 300px;
	margin-bottom: 100px;
}


#contactSocial {
	width: 48vw;
}

#contactSocial p {
	font-size: 1.5vw;
	line-height: 2.5vw;
	width: 100%;
    display: none;
}

#contact #social {
	width: 30vw;
	padding-left: 3vw;
    padding-top: 1.8vw;
}

footer {
	color: rgb(52, 117, 105);
	font-family: 'Nunito', sans-serif;
	font-size: 1.2vw;
	text-align: center;
	margin: 10px auto 20px;
	padding-top: 30px;
}

footer a {
	text-decoration: none;
	color: rgb(52, 117, 105);
	cursor: pointer;
}



/*---CUTOFF POINTS---*/

@media (max-width: 1536px){
    #speellijst{
        min-height: 1500px;
    }
}

@media (max-width: 1366px) {
    #speellijst{
        min-height: 1300px;
    }
    
    #bio {
		height: 300px;
	}
}

@media (max-width: 1180px) {
	#speellijst {
		min-height: 1250px;
	}
    #optredens{
        font-size: 1.4vw;
        line-height: 2.2vw;
    }

	#contact {
		margin-bottom: 100px;
		height: 200px;
	}
}



/*---TABLET---*/

@media (max-width: 800px) {

	#menu {
		padding-top: 30px;
	}

	nav {
		width: 50%;
	}

	nav ul li a {
		font-size: 18px;
	}

	#social {
		display: block;
		width: 15%;
		text-align: right;
		padding-right: 20px;
	}

	#intro {
		margin-top: 40vw;
        margin-bottom: 30vw;
	}

	#intro h1 {
		font-size: 10vw;
		width: 55%;
		line-height: 10vw;
		margin-bottom: 200px;
	}

	.beweging {
		width: 4px;
		background-color: rgb(52, 117, 105);
        z-index: 4;
	}

	.titel {
		font-size: 6vw;
	}

	#bio {
		height: 200px;
		margin-bottom: 40vw;
	}

	#bio p {
		font-size: 3vw;
	}

	#nummers {
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 250px
	}

	.num {
		font-size: 8vw;
		height: 10vw;
	}

	.getal {
		width: 25%;
		margin: 30px 45px;
	}

	.getal p {
		font-size: 2.5vw;
	}
    
    #speellijst .titel{
        width: 45vw;
    }
    #optredens{
        width: 65vw;
        left: 32vw;
        font-size: 2.2vw;
        line-height: 3vw;
    }
    
    #speellijst ul li a{
        font-size: 1.4vw;
        line-height: 3.5vw;
    }

	#contact {
		height: 200px;
	}
    
    #contact .titel{
        width: 45vw;
    }

	#contactSocial {
		width: 55vw;
	}

	#contactSocial p {
		font-size: 2.5vw;
		line-height: 4vw;
		padding-bottom: 5vw;
	}

	#contactSocial #social {
		display: flex;
		width: 100%;
		text-align: left;
	}

	footer {
		font-size: 2.5vw;
	}
}


/*---MOBILE---*/


@media (max-width: 420px) and (orientation:portrait){

	#menu {
		display: none;
	}

	#hamburger {
		display: block;
	}

	#intro {
		margin: 0;
		padding: 0;
	}

	#intro #hoofd {
		width: 100%;
		padding-bottom: 50vw;
	}

	.beweging {
		width: 2px;
	}
    
    .titel {
        width: 45vw;
    }


	#bio {
		height: 40vw;
		margin-bottom: 25vw;
	}

	#bio p {
		font-size: 0.9em;
	}

	.num {
		font-size: 3em;
		height: 18vw;
	}

	.getal {
		width: 25vw;
	}

	.getal p {
		font-size: .9em;
	}

	#nummers {
		margin-bottom: 150px;
	}

	#speellijst {
		min-height: 800px;
		margin-bottom: 180px;
	}

	#speellijst .titel {
		display: none;
	}
    
    #titelMobile{
    display: block;
    font-family: 'Raleway', sans-serif;
	letter-spacing: .05em;
	font-size: 7vw;
	color: rgb(52, 117, 105); 
    text-align: center;
    }
    
 
    #optredens {
        width: 85vw;
        min-height: 800px;
        left: 10vw;
        font-size: 3vw;
        line-height: 5vw;
    }
    #speellijst ul li a{
        font-size: 2.5vw;
        line-height: 5vw;
    }

	#contact {
		height: 100px;
	}

	#contactSocial p {
		font-size: .80em;
		line-height: 1.5em;
	}

	#contact .titel {
		width: 42vw;
	}
    
   #contact #social {
	width: 60vw;
}

	footer p {
		font-size: 1.5em;
	}
}

@media (max-width: 390px) {

	.getal {
		width: 45vw;
	}