html{
	background-color: #151515;
}
body{
	font-family: "Roboto Condensed", sans-serif;
	background-color:#faecdc;
	background-image:url('../img/bg.jpg');
}
body::-webkit-scrollbar {
    display: none;
}
body.freeze{
	overflow:hidden;
}
@font-face {
    font-family: 'mad_hackerregular';
    src: url('../fonts/mad-hacker-webfont.eot');
    src: url('../fonts/mad-hacker-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mad-hacker-webfont.woff2') format('woff2'),
         url('../fonts/mad-hacker-webfont.woff') format('woff'),
         url('../fonts/mad-hacker-webfont.ttf') format('truetype'),
         url('../fonts/mad-hacker-webfont.svg#mad_hackerregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'arty_signatureregular';
    src: url('../fonts/arty-signature-webfont.eot');
    src: url('../fonts/arty-signature-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/arty-signature-webfont.woff2') format('woff2'),
         url('../fonts/arty-signature-webfont.woff') format('woff'),
         url('../fonts/arty-signature-webfont.ttf') format('truetype'),
         url('../fonts/arty-signature-webfont.svg#arty_signatureregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
:root {
  --vh: 100%; /* Default fallback */
}
.bg-center{
	background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.bg-left{
    background-position:center left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.bg-contain{
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    -o-background-size: contain;
    background-repeat: no-repeat;
}
.bg-top{
	background-position: top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.bg-bottom{
    background-position: bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.container-fluid{
	max-width: 1600px;
}
a, button{
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
p{
	font-size:1.1rem;
	line-height: 1.4;
}
p a{
	color:#151515;
	text-decoration: none;
}
h3{
	font-family: 'mad_hackerregular', sans-serif;
	text-transform: uppercase;
	letter-spacing: -2px;
	color:#f9eea1;
}
img{
	outline:none;
}
.hidden-scrollbar {
  overflow: scroll; /* Enable scrolling */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}
@supports (-ms-overflow-style: none) {
  .hidden-scrollbar {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }
}
@supports (scrollbar-width: none) {
  .hidden-scrollbar {
    scrollbar-width: none; /* Firefox */
  }
}
.animo{
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.wow{
	visibility: hidden;
}
.wrapper{
	overflow-x:hidden;
}
.scroll-container {
    height: 100%;
    overflow: auto; /* Enable scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for touch devices */
}

.scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbars in Chrome, Safari, and Opera */
}

.btn-open-nav{
	position: fixed;
	top:1.2rem;
	left:1.2rem;
	font-size:1.2rem;
	color:#000;
	line-height: 1;
	z-index: 9;
	background-color:#FCEEA1;
	width:40px;
	height:40px;
	border-radius: 50%;
	line-height: 42px;
	text-align:center;
}
.nav-custom{
	position: fixed;
	top:0;
	left:-300px;
	bottom:0;
	background-image:url('../img/bg.jpg');
	width:300px;
	z-index: 10;
	overflow-y:scroll;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.nav-custom.open{
	left:0;
}
.btn-close-nav{
	position: absolute;
	top:1rem;
	right:1.5rem;
	font-size:1.5rem;
	color:#000;
	background-color:#FCEEA1;
	width:40px;
	height:40px;
	border-radius: 50%;
	line-height: 42px;
	text-align:center;
}
.nav-custom .items{
	padding:3rem 2rem;
}
.nav-custom .items a{
	display:block;
	color:#151515;
	text-decoration:none;
	font-size:1.2rem;
	padding:1rem 0;
	border-bottom:solid 1px rgba(0,0,0,.1);
	text-transform: uppercase;
}
.nav-custom .items a:last-child{
	border:none;
}
.darken{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,0.3);
	z-index: 9;
	display: none;
	backdrop-filter: blur(10px);
}

.section-1{
	padding:4rem 0;
	min-height: calc(var(--vh, 1vh) * 100);;
	position: relative;
	display:table;
	width:100%;
}
.section-1 .container-fluid{
	display:table-cell;
	vertical-align: middle;
}
.section-1 .hartje{
	position: absolute;
	width:30px;
	top:30px;
	right: 30px;
}
.scroll-down{
	position: absolute;
	display: block;
	left:0;
	right:0;
	bottom:0;
	text-align:center;
	padding:1rem;
	font-size:1.5rem;
	color:#151515;
}
.main-title{
	position: relative;
	width: 350px;
	margin:0 auto 3rem auto;
}
.roman{
	font-family: 'mad_hackerregular', sans-serif;
	font-size:4.5rem;
	letter-spacing: -0.5rem;
	text-align:center;
	color:#f9eea1;
	margin-left:-1rem;
}
.delameilleure{
	font-family: 'arty_signatureregular', sans-serif;
	font-size:6rem;
	letter-spacing: 0.5rem;
	position: absolute;
	right:1rem;
	bottom:-60px;
	line-height: 1;
	color:#f9eea1;
}
.rotate-5 {
    -webkit-transform: rotate(-5deg); /* Safari and Chrome */
    -moz-transform: rotate(-5deg);    /* Firefox */
    -ms-transform: rotate(-5deg);     /* Internet Explorer */
    -o-transform: rotate(-5deg);      /* Opera */
    transform: rotate(-5deg);         /* Standard syntax */
}
@media(min-width:768px){
	.main-title{
		width:480px;
		margin-bottom:6rem;
	}
	.roman{
		font-size:8rem;
		letter-spacing: -1rem;
		margin-left:-2.5rem;
	}
	.delameilleure{
		font-size:12rem;
		letter-spacing: 0.5rem;
		bottom:-130px;
		right:-1rem;
	}
	.section-1 .hartje{
		width:40px;
		right:100px;
		top:50px;
	}
}

.details{
	font-size:1.2rem;
	line-height: 1.5;
	margin-top:1rem;
	font-weight: 500;
}
.details span{
	display: block;
}
.date{
	font-size:2rem;
	padding:2rem 0 1rem 0;
	font-family: 'mad_hackerregular', sans-serif;
	text-transform: uppercase;
	color:#f9eea1;
	letter-spacing: -0.2rem;
}
@media(min-width:768px){
	.date{
		padding-top:3rem;
	}
}

.stats{
	font-size:1.5rem;
	font-weight:500;
}
.stats i{
	font-size:1.5rem;
}

.section-2{
	padding:2rem 1rem;
	position: relative;
	/*background-color: rgba(0,0,0,0.1);*/
}
.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}
.responsive-iframe-container a{
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index: 1;
}
.responsive-iframe-container a span{
	display: block;
	width: 40px;
	height:40px;
	background-color:#f9eea1;
	line-height: 40px;
	border-radius: 50%;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-20px;
	margin-left:-20px;
	text-align:center;
	color:#000;
	-webkit-box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.35);
	-moz-box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.35);
	box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.35);
}

.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  background-color:rgba(0,0,0,0.5);
}
.pic{
	display: block;
	height:130px;
	border-radius: 10px;
	background-color:rgba(0,0,0,0.5);
}
.pic:hover{
	-webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
    filter: grayscale(50%);
}
@media(min-width:768px){
	.pic{
		height:210px;
	}
	.responsive-iframe-container a span{
		width:80px;
		height:80px;
		line-height: 80px;
		margin-top:-40px;
		margin-left:-40px;
	}
}
@media(min-width:992px){
	.section-2{
		padding:4rem;
	}
	.pic{
		height:250px;
	}
}
@media(min-width:1200px){
	.pic{
		height:200px;
	}
}

.section-3{
	padding:4rem 1rem;
	position: relative;
}
.info .title{
	font-size:1.1rem;
	line-height: 1;
	text-transform: uppercase;
	font-weight: 500;
}
.info .names{
	font-family: 'mad_hackerregular', sans-serif;
	text-transform: uppercase;
	color:#f9eea1;
	letter-spacing: -1px;
	font-size:2rem;
}
.section-3 .hartje{
	width:30px;
}

.icon{
	font-size:2rem;
}

form input,
form textarea{
	font-size:1rem;
	padding:0 1rem 0.5rem 1rem;
	background-color: transparent;
	border:none;
	border-bottom:solid 1px #000;
	border-radius:0;
	width:100%;
	outline:0;
}
form textarea{
	border-left:solid 1px #000;
	height:150px;
	margin-top:2rem;
}
form input:focus{
	outline:0;
}
form button{
	padding:1rem 1.5rem;
	border:none;
	border-radius: 5px;
	background-color: #f9eea1;
	font-weight:bold;
	margin-top:15px;
	text-transform: uppercase;
	color:#000;
}
form button i{
	margin-left:5px;
}
form button:hover{
	opacity: 0.8;
}

.roman-number{
	padding:3rem 0 0 0;
	font-weight:bold;
}

/*

    PLACEHOLDER

--------------- */

/* Chrome, Safari, newer versions of Opera and Edge */
::-webkit-input-placeholder {
    color: #000;
}

/* Firefox 19+ */
::-moz-placeholder {
    color: #000;
    opacity: 1;  /* Firefox lowers the opacity of the placeholder by default */
}

/* Internet Explorer 10+ */
:-ms-input-placeholder {
    color: #000;
}

/* Standard syntax for most modern browsers */
::placeholder {
    color: #000;
}

/*

	MESSAGE

----------- */
.message-container{
	background-color:rgba(0,0,0,0.3);
	z-index: 9999;
	backdrop-filter: blur(10px);
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.message{
	background-image:url('../img/bg.jpg');
	padding:30px 50px;
	text-align:center;
	position: absolute;
	top:30px;
	left:30px;
	right:30px;
	font-size:16px;
	line-height: 1.4;
	border-radius: 10px;
}
.btn-close-message{
	position: absolute;
	top:-15px;
	right:-15px;
	display: block;
	color:#000;
	background-color:#FCEEA1;
	width:40px;
	height:40px;
	border-radius: 50%;
	line-height: 42px;
	text-align:center;
}
@media(min-width:768px){
	.message{
		top:60px;
		width:500px;
		padding:45px 60px;
		left:50%;
		right:auto;
		margin-left:-250px;
		font-size:18px;
	}
	.btn-close-message{
		width:40px;
		height:40px;
		line-height: 40px;
	}
}