/*MAIN*/

	@font-face {
		font-family: Rubik, Gafata, Arial, sans-serif;
		src: url(Gafata-Regular.ttf);
	}

	html {
  		scroll-behavior: smooth;
	}

	body {
		background-color: #EEE;
		font-family: Rubik, Gafata, Arial, sans-serif;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		text-align: left;
		color: #333;
	}

	div {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}

	div {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		user-drag: none;
	}

	img {
		pointer-events: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		user-drag: none;
	}

	strong {
		font-weight: 500;
	}

	a {
		color: #333;
		text-decoration: none;
		cursor: pointer;
		background-color: #DDD;
	}

	a:hover {
		color: #FFF;
		background-color: #333;
	}

	ul {
		list-style-type: square;
	}
	
	h1 {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		font-size: 1.5em;
		color: #999;
		font-weight: 500;
	}

	h1:not(:first-child) {
		margin-top: 2em;
	}

	.icon {
		color: #333;
	}

/*NAV*/

#nav {
	display: block;
	top: 0;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align: right;
	position: fixed;
	height: 4em;
	background-color: #EEE;
}

#nav div {
	display: inline-block;
	top: 0;
	padding: 0.8em;
	width: 7em;
	border-top: 0.8em solid #CCC;
	text-transform: uppercase;
	font-size: 0.8em;
	text-align: center;
	margin-right: 0.3em;
	filter: grayscale(100%);
}

#nav div:nth-child(4){
	width: 9em;
}

#nav div:hover {
	border-top: 0.8em solid #333;
	color: #333;
	cursor: pointer;
	font-weight: 500;
	filter: grayscale(0%);
}

#nav .current {
	border-top: 0.8em solid #333;
	color: #333;
	font-weight: 500;
	filter: grayscale(0%);
}

/*CONTENT*/

	p.copy {
		color: #333;
	}

	.item_event {
		margin: 1.1em 0 1.1em 0;
	}

	.item_event span {
		font-weight: 500;
	}
	
	.title {
		font-size: 1em;
		font-weight: 500;
	}

	.subtitle {
		color: #333;
		font-size: 1em;
	}

	.date {
		font-size: 1em;
	}

	.venue {
		font-size: 1em;
	}

	.prog {
		margin-top: 1.2em;
		font-size: 0.8em;
		color: #333;
	}

	.prog div span {
		text-transform: uppercase;
		margin-right: 0.6em;
	}
	
	#footer {
		margin-top: 8em;
		margin-bottom: 2em;
		color: #333;
		font-size: 0.8em;
	}

	#back_to_top {
		padding: 0.5em;
		
	}

	.divider {
		border: 1px solid #333;
		width: 1.2em;
	}
	.contact {
			display: inline-flex;
			color: #333;
			background-color: #FFF;
			text-align: right;
			margin: 0.2em 0 0.2em 0;
			padding: 0.5em 0.7em 0.5em 0.7em;
			height: 1.2em;
			font-size: 0.7em;
	}
	.contact:hover {
			color: #FFF;
			background-color: #333;
	}

	#vc1 {
		font-size: 2.4em;
		color: #333;
		font-weight: 500;
		margin-top: -0.2em;
	}
	#vc2 {
		font-size: 1.1em;
		color: #777;
	}
	#vc3 {
		font-size: 1.15em;
	}

	#vc0_mob {
		display: none;
	}
	#vc1_mob {
		display: none;
	}
	#vc2_mob {
		display: none;
	}

	@media screen and (min-width: 1024px) {
		#page {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		#col1 {
			position: fixed;
			margin-top: 4em;
			width: 20%;
		}
		img#photo {
			width: 100%;	
		}
		#col2 {
			width: 25%;
			margin-top: 4em;
			padding-left: 22%;
			position: fixed;
			z-index: -1;
		}
		#col3 {
			float: left;
			width: 45%;
			margin-top: 4em;
			padding-left: 50%;
			line-height: 1.3em;
		}
		#col3 p:first-child {
			padding-top: 0;
			margin-top: -0.1em;
		}
	}

	@media screen and (max-width: 1024px) {
		#page {
			padding: 2em;
			font-size: 2.5em;
		}
		h1 {
			margin-top: 1em;
		}
		#nav {
			text-align: left;
			position: fixed;
			width: 100%;
			height: 11em;
			background-color: #EEE;
			border-bottom: 1px solid #333;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			font-size: 2em;
		}
		#nav div {
			padding: 0.5em;
			width: 10%;
			font-size: 1.4em;
		}
		#nav div:nth-child(4){
			width: 14%;
		}
		#nav div span {
			display: none;
		}
		#vc0_mob {
			margin-left: 1em;
			display: block;
		}
		#vc1_mob {
			display: block;
			font-size: 1.6em;
			color: #333;
			font-weight: 500;
		}
		#vc2_mob {
			display: block;
			font-size: 1.2em;
			color: #777;
		}
		#vc3_mob {
			font-size: 1.6em;
		}
		#vc1 {
			display: none;
		}
		#vc2 {
			display: none;
		}
		#col1 img {
			margin-top: 7.5em;
			margin-bottom: -3em;
			width: 100%;
		}
		#col1 p {
			margin-top: 3em;
		}
		#col1 {
			margin-bottom: 1em;
		}
		#col1 .contact {
			font-size: 0.9em;
		}
		#col2 #vc3 {
			display: none;
		}
		#col3 {
			line-height: 1.3em;
		}
	}