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

html{
	-webkit-text-size-adjust: 100%;
}

.clearfix{
	clear: both;
}

body{
	font-family: 'Ubuntu', Arial, Times New Roman, Georgia;
	font-size: 14px;
	line-height: 28px;
	color: #ffffff;
	background-color: #1d2235;
	}

#bgindex, #bglive, #bgabout, #bgcontact, #bgvarispeed{
/* 	background-image: url(images/IMG_2519.jpeg); */
	background-image: url(images/IMG_2516.jpeg);
	margin: auto;
	height: 100%;
    width: 100%;
    position: fixed;
    z-index: 0;
    background-size: cover;
    opacity: .3;

-webkit-clip-path: polygon(0 19%, 0% 100%, 25% 100%, 33% 0, 95% 0, 50% 100%, 100% 100%, 100% 56%);
clip-path: polygon(0 19%, 0% 100%, 25% 100%, 33% 0, 95% 0, 50% 100%, 100% 100%, 100% 56%);
    }
    
#bglive{
	background-image: url(images/IMG_2659.jpg);
}

#bgabout{
	background-image: url(images/IMG_2517.jpeg);
}

#bgcontact{
	background-image: url(images/IMG_2373.JPG);
}

#bgvarispeed{
	background-image: url(images/IMG_2519.jpeg);
}

#sidebar, #menu, header{
	background-color: #911c1c;
}

/* MENU */
#sidebar{
	position: fixed;
	z-index: 2;
	top: 0px;
	left: 0px;
	width: 20%;
	height: 100%;
	display: table;
	opacity: .9;
}

#sidebar-container{
	position: absolute;
	height: 100%;
}

header{
	font-size: 36px;
	padding-bottom: 20px;
	text-align: center;
	line-height: 36px;
	
	font-family: 'Permanent Marker', cursive, 'Ubuntu', arial, sans-serif;
/* 	font-weight: 900; */
	text-transform: uppercase;
	letter-spacing: 1px;	
		
	 -webkit-font-feature-settings: "liga" 0, "clig" 0;
     -moz-font-feature-settings: "liga" 0, "clig" 0;
          font-feature-settings: "liga" 0, "clig" 0;
}

#function{
	font-family: 'Ubuntu';
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 0;
	margin: 25px 0px;
}

#menu{
	width: 100%;
	z-index: 1;
	display: table-cell;
	vertical-align: middle;
}

#menu a{
	color: #ffffff;
}

a{	
	color: #ff9b9b;
	text-decoration: none;
	transition: color 0.8s;
}

p a:hover {
	font-weight: 600;
	/*color: #fca2a2;*/
	color: #909bff;
} 
	
ul li{
	display: block;
	list-style: none;
	text-align: center;
	padding: 5px 0;
}

ul li a{
	text-transform: uppercase;
	padding: 8px 10px;
	letter-spacing: 2px;
}

#menu ul li a.current{
	background-color: #6d1212;
}

@media only screen and (min-width: 1025px){
	ul li a:hover{
		background-color: #6d1212;
	}
}
	
#menu-link{
	display: none;
}

/* TILES */
	
#tiles{
	display: block;
/* 	background-color: #ebff08; */
	padding: 0 10% 10%;
	position: relative;
	z-index: 1;
}

.row{
	clear: both;
}

.row > .project:nth-child(2){
	margin: 2%;
}

.row > .project:first-child, .row > .project:nth-child(3){
	margin: 2% 0;
}


.project{
	display: inline-block;
	float: left;
	width: 32%;
	margin: 0;
	padding: 0;
}

#tiles img{
	position: relative;
    transition: opacity 0.3s;
/*    	border: 8px solid rgba(109, 18, 18, 0.75); */
	border-radius: 3px;

}

.project > .info > .title, .project > .info > .role{
	padding-bottom: 0px;
	line-height: 20px;
	text-align: center;
}

.info{
	padding: 5%;
	background-color: rgba(145, 28, 28, 0.9);
	z-index: 5;
	position: relative;
	margin: -8% 5% 0 5%;
}

.project > .info > .title{
	font-family: 'Permanent Marker';
	font-size: 16px;
	padding-bottom: 5px;
	letter-spacing: 1px;
			
	 -webkit-font-feature-settings: "liga" 0, "clig" 0;
     -moz-font-feature-settings: "liga" 0, "clig" 0;
          font-feature-settings: "liga" 0, "clig" 0;
}

.role{
	text-transform: uppercase;
	color: #ff9b9b;
	font-size: 12px;
	letter-spacing: 1px;
}

/* MAIN */

#index-wrapper{
	position: relative;
	z-index: 1;
	margin-left: 20%;
}

#main{
	padding: 10% 10% 5%;
	display: block;
}

#mainindex{
	padding: 10% 10% 0px;
	display: block;
}

img{
	width: 100%;
	margin-top: 20px;
}

.imgbox{
	padding-bottom: 25px;
}

/*
.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);  
}
*/

article{
	display: block;
}

h1{
	font-size: 25px;
	font-family: 'Permanent Marker', cursive, 'Ubuntu', arial, sans-serif;
/* 	font-weight: 900; */
	text-transform: uppercase;
	letter-spacing: 4px;
	color: #ffffff;
	padding-bottom: 15px;
		
	 -webkit-font-feature-settings: "liga" 0, "clig" 0;
     -moz-font-feature-settings: "liga" 0, "clig" 0;
          font-feature-settings: "liga" 0, "clig" 0;
}

h2{
	font-size: 14px;
    line-height: 28px;
    letter-spacing: 2px;
    color: #ff9b9b;
    text-transform: uppercase;
    padding-bottom: 40px;
}

#main > article > p{
	padding: 0 0 25px;
	width: 90%;
}

/*
#main > article > p:last-of-type{
	padding-bottom: 0px;
}
*/

#more{
	background-color: #545454;
}

#more h1{
	color: #ffffff;
	font-size: 14px;
	padding: 45px 0;
	text-align: center;
}

.screen{
	margin-bottom: 20px;
	border: 3px solid #ddd;
	border-radius: 1.5px;
}

.caption p{
	display: block;
	font-size: 12px;
	font-style: italic;
	margin: 0px 0px 3px 20px;
}

.caption-icon p{
	display: block;
	font-size: 12px;
	font-style: italic;
	text-align: center;
}

article > img{
	padding: 0px 0px 25px 0px;
}

.icon{
	width: 50%;
	float: left;
}

.half{
	width: 49%;
	float: left;
}

.half:nth-child(odd){
	margin-right: 2%;
}

#visualresume{
	margin-top: 40px;
}

.iconM{
	width: 33%;
	float: left;
}

.iconVCV{
	width: 16.5%;
	float: left;
}

#icon-container{
	overflow: hidden;
	margin: 2% 0 8% 0;
}

#poster{
	width: 70%;
	margin: 0 15% 10%;
}

.quotecontainer{
	margin: auto;
	color: white;
	margin: 40px 0px;
	font-weight: bolder;
}

#quotecontainerindex{
	padding-bottom: 22%;
}

.quote{
	font-size: 20px;
	line-height: 35px;
	text-align: center;
	margin: auto;
	width: 100%;
	font-family: 'Permanent Marker';
	letter-spacing: 4px;
		
	 -webkit-font-feature-settings: "liga" 0, "clig" 0;
     -moz-font-feature-settings: "liga" 0, "clig" 0;
          font-feature-settings: "liga" 0, "clig" 0;
}

#quoteindex{
	padding-bottom: 0px;
	font-size: 20px;
	line-height: 35px;;
	text-align: center;
	width: 77%;
	float: left;
	font-family: 'Permanent Marker';
	letter-spacing: 4px;
		
	 -webkit-font-feature-settings: "liga" 0, "clig" 0;
     -moz-font-feature-settings: "liga" 0, "clig" 0;
     font-feature-settings: "liga" 0, "clig" 0;
}

.speaker{
	text-align: center;
	margin-top: 20px;
	
}

#quotecontainerindex #portret{
	width: 18%;
	max-width: 200px;
	float: right;
	border-radius: 50%;
	margin: 0px 0px 0px 2%;
	display: inline-block;
}

.iframe-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
	margin-top: 20px;

	width: 100%;
	height: 0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

footer{
	margin-top: 4%;
	color: #d4d6e7;
}

.description {
	color: #d4d6e7;
}

/* ABOUT */


/* CONTACT */

#instagram{
	margin-top: 20px;
}

form{
	font-weight: normal;
	font-size: 14px;	
}

label{
	display: block;
	padding: 20px 0 20px 0;
	
}

label:first-of-type{
	padding-top: 0;
}

input, textarea{
	width: 500px;
	height: 35px;
/* 	border: 2px solid #eeeeee; */
	border: 0;
	border-radius: 4px;
	padding-left: 15px;
	background-color: #ffffff;
	
	font-family: Asap, Arial;
	font-size: 14px;
	color: #777;
	line-height: inherit;	
}

textarea{
	height: 300px;
	padding: 15px;
	resize: none;
}

input:focus, textarea:focus{
	outline: none;
}

fieldset{
	border: 0;
}

form{
	width: 100%; 
}
/* deze overwrite de toggle-button in safari op iphone
button{
	padding: 15px;
	margin-top: 25px;
	
	width: 200px;
	background: #ddd;
	font-family: Asap;
	font-size: 14px;
	font-weight: 900;
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	}
*/
/* VARISPEED html*/

.table-varispeed {
	/*border-collapse: collapse; */
	border-spacing: 0px;
	text-transform: capitalize;
	margin: 15px 0; 
	padding-top: 5px;
	font-size: 0.93em;
	max-width: 480px;
	width: 100%;
	border-radius: 3px; 
	overflow: hidden;
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.363); /* #911c1c */
	background-color: #1d2235cb;
}

.table-varispeed thead tr {
  text-align: left;
  font-weight: 600;
}

.table-varispeed th,
.table-varispeed td {
	padding: 5px 10px;
	/*max-width: 420px;*/
	min-width: 78px;
}

.table-varispeed tbody tr:nth-of-type(odd),
.cents {
	background-color: rgba(145, 28, 28, 0.4);

}

/*
.table-varispeed tbody tr.active-row {
  font-weight: bold;
  color: #911c1c;
} */
/*
.td-input {
 width: 100%;
 color: greenyellow;
}*/
.form-varispeed {
	width: 55%; 
	
	margin-right: 8px;
	padding-left: 8px;
	border-radius: 2px;
	background-color: rgba(145, 28, 28, 0.85);/*  #911c1c */
	font-weight: 500;	
	color: white;
}

.toggle-button {
	width: 100%;
	max-width: 480px;
	border-radius: 2px;
	background-color: rgba(145, 28, 28, 0.637);/*  #911c1c */
	font-weight: 500;	
	color: rgba(255, 255, 255, 0.979);
}

.toggle-button:hover {
	background-color: rgba(145, 28, 28, 0.85);
	font-weight: 600;
	color: white;
	cursor: pointer;
}


.font-weight-normal {
	font-weight: normal;
}
.alert {
	color: #ff9b9b;
	text-transform: uppercase;
}

/* MOBILE INPHONE 6 EIGEN TRY. Dit hetzelfde moment wanneer navbar van boven <-> naar zijkant gaat */
@media only screen and (max-width: 750px){
		.table-varispeed th,
		.table-varispeed td {
			padding: 4px 8px;
		}
	
		.form-varispeed {
			width: 60%; /* was 58% net te klein voor motorola Ju */
			/*min-width: fit-content;*/
			margin-right: 6px;
			padding-left: 5px;
			border-radius: 2px;
			font-size: 0.95em;
			font-weight: 500; 
		}
/* MOBILE */
@media only screen and (max-width: 480px){
/*
	.table-varispeed th,
	.table-varispeed td {
		padding: 4px 8px;
	
		min-width: 78px;
	}

	.form-varispeed {
		width: 67%;
		margin-right: 6px;
		padding-left: 5px;
		border-radius: 2px;
		font-size: 0.95em;
		font-weight: 500;
		color: rgb(107, 198, 255); 
	}
*/
	#index-wrapper{
		margin-top: 68px;
		
		transition: margin-top 0.4s;
		-webkit-transition: margin-top 0.4s;
		-moz-transition: margin-top 0.4s;
		-o-transition: margin-top 0.4s;
		-ms-transition: margin-top 0.4s;
		margin-left: 0%;
	}
	
	#index-wrapper.aan{
		margin-top: 300px;
	}
	
/* 	MENU */

.br span{
	display: none;
}
	
.br:first-child::after{
	content: " "
}

.row > .project:nth-child(2){
	margin: 2%;
}

	#sidebar{
		position: relative;
		width: 100%;
		display: block;
	}
	
	#menu{
		position: fixed;
		top: 0;
	}
	
	#menu-link{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 40px;
		margin-left: 14px;
/* 		opacity: 0.2; */
	}
	
	#menu-link img{
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	
		-webkit-transition: 0.4s ease-in-out;
		-moz-transition: 0.4s ease-in-out;
		-o-transition: 0.4s ease-in-out;
	}
	
	#menu-link img.aan{
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	
	-webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
	}
	
	header{
		display: block;
		text-align: center;
		padding: 10px 0;
		margin: auto;
		font-size: 20px;
	}
	
	#function{
		letter-spacing: 2px;
		font-size: 10px;
		margin: 5px 0px 15px;
	}

	nav{
		display: block;
		width: 100%;
		overflow: hidden;

		height: 0px;
		transition-delay:0s;	
		transition: height 0.4s;
		-webkit-transition: height 0.4s;
		-moz-transition: height 0.4s;
		-o-transition: height 0.4s;
		-ms-transition: height 0.4s;

	}
	
	nav.aan{
		height: 232px;
		transition-delay:0s;
		transition: height 0.4s;
		-webkit-transition: height 0.4s;
		-moz-transition: height 0.4s;
		-o-transition: height 0.4s;
		-ms-transition: height 0.4s;
	}
	
	nav ul li{	
		width: 100%;
		text-align: center;
		margin: auto;
		padding: 15px 0px;
		float: left;
		visibility:visible;
		opacity: 1;
		height: 58px;
	}
	
	nav ul{
		display: block;
		width: 100%;
		background-color: #a52c2c;	
		visibility:visible;
		opacity: 1;	
		height: 232px;
	}

	
/* 	TILES */

	#tiles{
		margin: 0;
	}

	.active{
		display: none;
		}
	
/* 	MAIN */
	
	#main{
		margin: 0;
		margin-top: 68px;
		padding: 10%;
		position: relative;
		
		transition: margin-top 0.4s;
		-webkit-transition: margin-top 0.4s;
		-moz-transition: margin-top 0.4s;
		-o-transition: margin-top 0.4s;
		-ms-transition: margin-top 0.4s;
	}
	
	#mainindex  #quoteindex{
		font-size: 15px;
		line-height: 25px;
		width: 100%;
		float: none;
		display: block;
		margin: auto;
	}
	
	#main.aan{
		margin-top: 1260px;
	}
	
	h1{
		font-size: 16px;
		padding-bottom: 15px;
	}
	
	h2 {
		padding: 0% 0% 7%;
	}
	
	#main > article > p {
		width: 100%;
	}
	
	article > p:last-of-type{
		padding-bottom: 35px;
	}
	
	.resume > p:first-of-type{
		padding-bottom: 5%;
	}

	.screen{
		margin-bottom: 5px;
	}
	
	.caption p{
		display: block;
		margin-left: 10px;
	}
	
	.icon, .iconM, .half{
		width: 100%;
	}
	
	.half{
	margin-bottom: 5%;
	}
	
	.iconVCV{
		width: 50%;
	}
	
	.project{
		width: 100%;
	}
	
	.info{
	}
	
	.title p{
		margin: 0;
		padding: 0;
	}
	
	.role p{
		padding: 0;
	}
	
/* 	ABOUT */

	#mainindex #portret{
		width: 60%;
		float: none;
		display: block;
		margin: auto;
		margin-top: 30px;
	}
	
	#quotecontainerindex{
		margin: 10% 0px;
		padding-bottom: 0px;
	}
	
/* 	CONTACT */
	fieldset{
		padding: 5%;
	}
	
	button{
		margin: 5%;
	}
	
	label{
		font-size: 14px;
	}
	
	input, textarea{
		width: 100%;
	}	

}

/* TABLET */

@media only screen and (min-width: 481px) and (max-width: 667px){

	.project > .info > .title {
		font-size: 14px;
	}
	
	.project > .info > .role {
		font-size: 10px;
		line-height: 12px;
	}
	
	.info{
		padding: 10px;
	}
	
	#mainindex #portret{
	width: 30%;
	float: none;
	display: block;
	margin: auto;
	margin-top: 30px;
	}
	
	#mainindex  #quoteindex{
		font-size: 15px;
		line-height: 25px;
		width: 100%;
		float: none;
		display: block;
		margin: auto;
	}
	
	#quotecontainerindex{
		padding-bottom: 6%;
	}

}

@media only screen and (min-width: 667px) and (max-width: 864px){
	#quotecontainerindex{
		padding-bottom: 180px;
	}
}

@media only screen and (min-width: 481px) and (max-width: 1024px){
	
	#index-wrapper{
		margin-top: 68px;
		
		transition: margin-top 0.4s;
		-webkit-transition: margin-top 0.4s;
		-moz-transition: margin-top 0.4s;
		-o-transition: margin-top 0.4s;
		-ms-transition: margin-top 0.4s;
		margin-left: 0%;
	}
	
	#index-wrapper.aan{
		margin-top: 126px;
	}
	
/* 	MENU */
	
	#sidebar-container,
	#main,
	#tiles, 
	#menu{
		position: relative;
		width: 100%;
		display: block;
		margin: 0;
	}
	
	#sidebar{
		position: relative;
		width: 100%;
		display: block;
	}
	
	#menu{
		position: fixed;
		top: 0;
	}
	
	#menu-link{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 40px;
		margin-left: 14px;
/* 		opacity: 0.2; */
	}
	
	#menu-link img{
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	
		-webkit-transition: 0.4s ease-in-out;
		-moz-transition: 0.4s ease-in-out;
		-o-transition: 0.4s ease-in-out;
	}
	
	#menu-link img.aan{
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	
	-webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
	}

	header{
		display: block;
		text-align: center;
		padding: 10px 0;
		margin: auto;
		font-size: 20px;
	}
	
	#function{
		letter-spacing: 2px;
		font-size: 10px;
		margin: 5px 0px 15px;
	}
	
	nav{
		display: block;
		width: 100%;
		overflow: hidden;

		height: 0px;
		transition-delay:0s;	
		transition: height 0.4s;
		-webkit-transition: height 0.4s;
		-moz-transition: height 0.4s;
		-o-transition: height 0.4s;
		-ms-transition: height 0.4s;

	}
	
	nav.aan{
		height: 58px;
		transition-delay:0s;
		transition: height 0.4s;
		-webkit-transition: height 0.4s;
		-moz-transition: height 0.4s;
		-o-transition: height 0.4s;
		-ms-transition: height 0.4s;
	}
	
	nav ul li{	
		width: 25%;
		text-align: center;
		margin: auto;
		padding: 15px 5px;
		float: left;
		visibility:visible;
		opacity: 1;
		height: 58px;
	}
	
	nav ul{
		display: block;
		width: 100%;
		background-color: #a52c2c;	
		visibility:visible;
		height: 58px;
	}
	
.br span{
	display: none;
}
	
.br:first-child::after{
	content: " "
}

/* 	MAIN */
	#main{
		margin-top: 68px;
		padding: 10%;
		position: relative;
		
		transition: margin-top 0.4s;
		-webkit-transition: margin-top 0.4s;
		-moz-transition: margin-top 0.4s;
		-o-transition: margin-top 0.4s;
		-ms-transition: margin-top 0.4s;
	}
	
	#main.aan{
		margin-top: 126px;
	}
	
	.screen{
		margin-bottom: 10px;
	}
	
	.caption p{
		margin: 0px 0px -5px 20px;
	}
	
	#mainindex  #quoteindex{
		font-size: 18px;
		line-height: 30px;

	}
	
}

@media only screen and (min-width: 1500px){
	#quoteindex{
		padding-bottom: 0px;
		font-size: 28px;
		line-height: 42px;
		width: 80%;
	}

	#quotecontainerindex #portret{
		margin: 0px 0px 0px 0px;
	}
	
	#quotecontainerindex{
		padding-bottom: 18%;
	}	
}