@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel');
@charset "UTF-8";

/* CSS Document */

html, body,p,h1,h2,h3,h4 {
	padding: 0;
	margin: 0;
}

h1 {font-size: 36px; color: #B9140E; font-family: 'Cinzel', serif;}

.kolom {
	max-width: 960px;
	margin: 0 auto;
	/*background: #dddddd;*/
	min-height: 200px;
}
.kolomleeg {
	max-width: 960px;
	margin: 0 auto;
}
/*#video {
	background-image: url("video/Winter - 14966.mp4");
	background-position: center center;
	background-repeat: no-repeat;
	height: 50vh;
	object-fit: cover;
	width: 100%;
		background-size: cover;
	margin-top: 20px;

	
}
video {
	width: 100%;
	object-fit: cover;
	object-position: center center;
	overflow: hidden;
}
*/

.video-container {
    height: 600px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#tb {
	position: absolute; 
	top: 30%; 
	right: 0px; 
	z-index: 9999;
	background-color: white;
	height: auto;
}
#phone {
	position: absolute; 
	top: 0px; 
	right: -225px; 
	display: block;
	z-index: 9999;
	-webkit-transition: right 1s ease-out;
	-o-transition: right 1s ease-out;
	transition: right 1s ease-out;
}
#phone:hover {
	right: 0px;
}

#mail {
	position: absolute; 
	top: 46px;
	right: -225px; 
	display: block;
	z-index: 9999;
	-webkit-transition: right 1s ease-out;
	-o-transition: right 1s ease-out;
	transition: right 1s ease-out;
}
#mail:hover {
	right: 0px;
}

#locatie {
	position: absolute; 
	top: 92px;
	right: -225px; 
	display: block;
	z-index: 9999;
	-webkit-transition: right 1s ease-out;
	-o-transition: right 1s ease-out;
	transition: right 1s ease-out;
}
#locatie:hover {
	right: 0px;
}
#instagram {
	position: absolute; 
	top: 138px;
	right: -225px; 
	display: block;
	z-index: 9999;
	-webkit-transition: right 1s ease-out;
	-o-transition: right 1s ease-out;
	transition: right 1s ease-out;
}
#instagram:hover {
	right: 0px;
}


video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#videotext {
	position: absolute;
	/*max-width: 600px;*/
	left: 50%;
	top: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	z-index: 400;
}
#videotext p{
	font-size: 48px;
	line-height: 48px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	color: white;
	font-weight: 400;
}
#vidoverlay {
	background-color: #000000;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	z-index: 10;
	
}
#pageimg{
	height: 300px;
	background-image: url("img/menukaart.jpg");
	background-position: bottom center;
	/*background-attachment: fixed;*/
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
}
#pageimg-index{
	height: 300px;
	background-image: url("img/menukaart.jpg");
	background-position: bottom center;
	/*background-attachment: fixed;*/
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
}
#pageimg-contact{
	height: 300px;
	overflow:hidden;
	background-image: url("img/Contact2.png");
	background-position: center center;
	/*background-attachment: fixed;*/
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
}
#pageimg-bezorg{
	height: 300px;
	padding: -50px;
	background-image: url("img/food.jpg");
	background-position: top center;
	/*background-attachment: fixed;*/
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
}
#pageimg-group{
	height: 300px;
	padding: -50px;
	background-image: url("img/group.jpg");
	background-position: top center;
	/*background-attachment: fixed;*/
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
}
#pageimg-overons{
	height: 300px;
	padding: -50px;
	background-image: url("img/overons.jpg");
	background-position: center center;
	/*background-attachment: fixed;*/
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
}
#pageimg2{
	height: 300px;
	position: relative;
}
p, #formulier p{
	font-size: 16px;
	line-height: 20px;
	font-family: 'Roboto', sans-serif;
	color: #444444;
	font-weight: 400;
	/*margin-left: 10px;*/
	margin-right: 0px;
}
#formulier iframe{
	margin-left: 0px;
	
}
.pagetekst {
	width: 90%;
	font-family: Catamaran, sans-serif;
	line-height: 130%;
	padding: 0px 40px 0px 20px !important;
	color: #444444;
"
}
.pagetekst p {
	font-family: 'Catamaran', sans-serif !important; font-size: 16px !important; line-height: 26px !important; color: #111111 !important;
}
.pagetekst p strong{
	font-family: 'Catamaran', sans-serif !important; font-size: 20px !important; line-height: 34px !important; color: #B9140E !important;
}
#strange p {color: #999999; !important; font-size: 40px; line-height: 60px; padding: 0 40px;}
.t-padding{
	padding-left: 5px; font-size: 14px;
}
hr {height: 0px; border: 0px; border-top: 1px solid red; width: 100%;}
@media all and (max-width: 1400px) and (min-width: 300px) {
	.video-container {
    height: 400px;
    top: 80%;
}
	video {top: 50%;}
}
@media all and (max-width: 600px) {
	#kut, p, #formulier p {
	/*	margin: 0 20px !important;*/
	}
	h1 {font-size: 14px; color: #B9140E; font-family: 'Cinzel', serif;}
	.video-container {
		height: 350px;
	}
	#tb {display: none;}
	
	video {top: 50%}
	#videotext p {font-size: 36px;}
	
	#strange p {color: #777777; !important; font-size: 30px; line-height: 40px; padding: 0 10px;}
	.pagetekst {
	 width: 90%; font-family: Helvetica, sans-serif; line-height: 130%; padding: 10px; color: #444444;"
}
}


@media all and (max-width: 425px) {
	#strange p {color: #777777; !important; font-size: 20px; line-height: 30px; padding: 0 40px;}
		#videotext img {width: 110px; height: auto;}
h1 {font-size: 20px; color: #B9140E; font-family: 'Cinzel', serif;}
	#videotext p {font-size: 20px;}
}