/* ========================================================================
   Base
 ========================================================================== */

:root {
--rood: #ec211f;
--lichtgrijs: #e3e3e3;
}


@font-face {
  font-family: "Inter Regular";
  src: url("font/Inter-Regular-slnt=0.ttf"); 
  url("font/Inter-Regular-slnt=0.ttf");
}
@font-face {
  font-family: "Inter Light";
  src: url("font/Inter-Light-slnt=0.ttf"); 
  url("font/Inter-Light-slnt=0.ttf");
}
/* 
@font-face {
  font-family: "Inter Extra Light";
  src: url("font/Inter-ExtraLight-slnt=0.ttf"); 
  url("font/Inter-Light-slnt=0.ttf");
}
@font-face {
  font-family: "Inter Bold";
  src: url("font/Inter-Bold-slnt=0.ttf"); 
  url("font/Inter-Bold-slnt=0.ttf");
}
 */
@font-face {
  font-family: "Inter Medium";
  src: url("font/Inter-Medium-slnt=0.ttf"); 
  url("font/Inter-Medium-slnt=0.ttf");
}
@font-face {
  font-family: "Inter Semibold";
  src: url("font/Inter-SemiBold-slnt=0.ttf"); 
  url("font/Inter-SemiBold-slnt=0.ttf");
}


/* 
@font-face {
  font-family: "Inter Italic";
  src: url("font/Inter-Italic.otf"); 
  url("font/Inter-Italic.otf");
  font-style: normal;
}

@font-face {
  font-family: "Inter Light Italic";
  src: url("font/Inter-LightItalic.otf"); 
  url("font/Inter-LightItalic.otf");
  font-style: normal;
}

@font-face {
  font-family: "Inter Semibold Italic";
  src: url("font/Inter-SemiboldItalic.otf"); 
  url("font/Inter-SemiboldItalic.otf");
  font-style: normal;
}
 */



* {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }


html,body { width: 100%; height: 100%; -webkit-overflow-scrolling: touch; }
html { -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%; overscroll-behavior-y: none; scroll-behavior: smooth;  }

body { font-family: "Inter Regular", Arial, sans-serif; font-size: 1rem; color: var(--rood);  }

table { border-collapse: collapse; border-spacing: 0; }

a, a:hover { outline: 0; text-decoration: none; color: #e30613; }
a.txtlink { border-bottom: 1px solid #e30613; }

hr { border: 0; border-top: 1px solid #ddd; margin-top: 16px; padding-bottom: 16px; }



/* ========================================================================
   Blocks
 ========================================================================== */


#heroSTATIC { width: 100vw; height: 50vh; background: #e3e3e3 url('../img/hero.jpg') center center no-repeat; background-size: cover; }
#hero { position: relative; width: 100vw; max-width: 100%; height: 100vh; overflow: hidden; background: rgba(0,0,0,.15); }
#hero-inner { width: 900px; height: 100vh; margin: 0px auto; }
video#bgvideo {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('../img/hero.jpg') no-repeat;
background-size: cover;
}

#logo { width: 100%; height: calc(100vh - 6rem); display: flex; align-items: center; justify-content: center; }
#logo img { width: 100%; height: auto; }

#herophone { position: relative; width: 100%; height: calc(100vw / 1.5); overflow: hidden; background: rgba(0,0,0,.15); }
#herophone-inner { width: 90%; height: 100%; margin: 0px auto; }

#logophone { width: 100%; height: calc(100% - 2rem); display: flex; align-items: center; justify-content: center; }
#logophone img { width: 100%; height: auto; }

video#phonevideo {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('../img/hero.jpg') no-repeat;
background-size: cover;
}

.container { width:600px; margin: 0px auto; padding: 3rem 0 1rem 0; }
#uw-museumgids .container { width: 750px; }

.ti-block { display: grid; grid-gap: 2rem; margin-bottom: 3rem; }
.i-left { grid-template-columns: 260px auto; }
.i-right { grid-template-columns: auto 260px; }
.ti-i { margin-top: .3rem; }
.ti-i img { width: 100%; height: auto; }

.ti-block-phone { display: block; width: 92%; margin: 1rem auto; }
.ti-block-phone img{ width: 100%; height: auto; }


.mogelijkheden { display: grid; grid-template-columns: auto auto auto auto; background-color: #fff; } 
.mogelijkheden > div { text-align: center; margin-bottom: 4rem; }
.mogelijkheden .ph { width: 100px; height: 100px; border-radius: 15px; background-color: var(--rood); margin: 0px auto 1rem auto; }
.mogelijkheden h4 { width: 100%; font-size: 1.1rem; text-align: center; }

#uw-museumgids, #hoe-werkt-het { background-color: #fff; }
#gebruikt-door { background-color: var(--lichtgrijs); }
#meer-weten { padding-bottom: 4rem; background-color: #fff; }



#footer { background-color: var(--rood); padding-bottom: 4rem; }
#footerlogo { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; }
#footer_inner { display: grid;  grid-template-columns: auto auto auto; grid-gap: 2rem; margin: 3rem 0; color: #fff; }

#footerphonelogo { width: 100%; padding: 2rem 2rem 1rem 2rem; }
#footerphone_inner { display: block; width: 80%; margin: 0px auto; color: #fff; }
#footerphone_inner div { margin-top: 24px; }
#footerphone_inner h3 { font-size: 1.2rem; margin: 0; }
#footerphone_inner a, footerphone_inner a:hover { display: block; width: 100%; color: #fff; margin: 8px 0; }


@media screen and (max-width: 1023px) {
  	#hero, #hero-inner { width: 100%; height: 60vh;  }
 	#logo { width: 90%; height: calc(60vh - 6rem); margin: 0px auto; }
}

@media screen and (max-width: 750px) {
	.container, #uw-museumgids .container { width: 92%; margin: 0px auto;  }
	.container { padding: 1rem 0 1rem 0; }
	.ti-block { display: block; }
	.i-left, .i-right { width: 100%; }
}





/* ========================================================================
   Navigation
 ========================================================================== */


#topnav { width: 100%; height: 2.5rem; }
#topnav ul { list-style: none; margin: 0; padding: 0; }
#topnav ul li { display: inline-block; width: 33%; height: 2rem; padding-top: 1rem; margin: 0; }
#topnav ul li a { display: block; text-align: center; font-size: 1.2rem; font-family: "Inter Light", Arial, sans-serif;  }
#topnav ul li a, #topnav ul li a:hover { color: #fff; }

#lvnav { width: 100%; height: 3.5rem; }
#lvnav { display: flex; align-items: center; justify-content: center;  }
#lvnav a { font-size: .9rem; font-family: "Inter Medium", Arial, sans-serif; text-align: center;  }
#lvnav a, #lvnav a:hover { color: #fff; }

#gebruikt-door ul { width: 500px; margin: 2rem auto 3rem auto; list-style: none; }
#gebruikt-door li  { font-size: 1.2rem; line-height: 1.7; }

@media screen and (max-width: 1023px) {
	#topnav ul { width: 90%; }
	#topnav ul li { max-width: 32%;  }
	#topnav ul li a { font-size: 1rem;   }
	#lvnav { display: none; }
}

#phonenav { width: 100%; height: 1.5rem; }
#phonenav ul { list-style: none; margin: 0; padding: 0; }
#phonenav ul li { display: inline-block; width: 49%; margin: 0; padding-top: 1rem; }
#phonenav ul li a { display: block; text-align: center; font-size: .9rem; font-family: "Inter Semibold", Arial, sans-serif;  }
#phonenav ul li a, #phonenav ul li a:hover { color: #fff; }

@media screen and (max-width: 725px) {
	#gebruikt-door ul { width: 92%; margin: 2rem auto; list-style: none; }
	#gebruikt-door li  { font-size: 1.1rem; line-height: 1.3; margin-bottom: .5rem; }
}


/* ========================================================================
   Typography
 ========================================================================== */

h1 { width: 100%; text-align: center; font-family: "Inter Light", Arial, sans-serif; font-size: 1.2rem; line-height: 1;  }

h2 { width: 100%; text-align: center; font-family: "Inter Semibold"; font-size: 2.3rem; line-height: 1.2;  }

h3 { font-family: "Inter Semibold", Arial, sans-serif; font-size: 1.5rem; line-height: 1.2; margin-bottom: 1.5rem;  }

p { font-size: 1.2rem; line-height: 1.7; }

#uw-museumgids p { width: 600px; margin: 3rem auto 0 auto; }
#meer-weten p { text-align: center;  }

#footer_inner h3 { font-size: 1.1rem; line-height: 1.2; margin-bottom: .3rem; width: 100%; text-align: center; }
#footer_inner a { display: block;  width: 100%; text-align: center; color: #fff; font-size: .9rem; margin-bottom: .3rem; text-decoration: none; }

h1 + h2 { margin-top: 8px; }
h2 + div, h2 + ul { margin-top: 2rem; }
p + h2, ul + h2, ol + h2 { margin-top: 24px; }

strong { font-family: "Inter Semibold", Arial, sans-serif;  }
/* 
em { font-family: "Inter Italic", Arial, sans-serif;  }
h1 em { font-family: "Inter Light Italic", Arial, sans-serif;  }
strong em, em strong { font-family: "Inter Semibold Italic", Arial, sans-serif;  }
 */
 em { font-style: italic; }

.alert { color:#e30613; }

.comment { font-size: .74rem; color: #777;   }
.comment_block { display: inline-block; margin-bottom: 6px;   }


@media screen and (max-width: 725px) {
	h1 { font-size: 1rem;  }
 	h2 { font-size: 1.75rem;  }
 	h3 { font-size: 1.2rem; }

 	p, #uw-museumgids p { width: 92%; font-size: 1.1rem; line-height: 1.5; margin: 0 auto; }
	#uw-museumgids p {  margin: 1.5rem auto 0 auto; }
	#meer-weten p { text-align: left;  }
	.ti-block-phone p { width: 100%; font-size: .95rem; line-height: 1.6; margin-bottom: 1 rem; }

}



/* ========================================================================
   Form
 ========================================================================== */
 
#formlogo { width: 100%; height: 20vh; background-color: #e30613; display: flex; align-items: center; justify-content: center; }
#formlogo img {  width: 50%; max-width: 350px; height: auto; }

#infoform { width: 80%; max-width: 700px; margin: 0px auto; }
#infoform_form h1 { font-family: "Inter Semibold"; font-size: 1.6rem; line-height: 1.2; width: 80%; margin: 0px auto; }

#infoform_form { padding-top: 50px; }
#infoform_form, #infoform_form h1 { padding-bottom: 40px; }

#infoform form label { display: block; width: 100%; font-size: .95rem; margin-bottom: 1px; }

#infoform form textarea { width: 90%; height: 130px; border: 1px solid #ddd; background-color: #f0f0f0; padding: 8px; font-size: 15px; margin-bottom: 24px; }

#infoform form input.formveld { width: 90%; border: 1px solid #ddd; background-color: #f0f0f0; padding: 8px 12px; font-size: 15px; margin-bottom: 24px; }

#infoform form input.formsubmit { display: block; width: 130px; height: 40px; font-size: 16px; background-color: #e30613; color: #fff; border: 0; border-radius: 17px; text-align: center; margin: 12px auto; cursor: pointer;  }

#infoform.infoform_bedankt { padding-top: 150px; }

#infoform div.logo { width: 300px; margin: 0px auto; }
#infoform div.logo img { width: 100%; height: auto; }

p.back { font-size: 1.1rem; margin-bottom: 14px; }

@media screen and (orientation:landscape) and (max-width: 1023px) {
	#formlogo { height: 40vh; }
}


@media screen and (max-width: 1023px) {
	#infoform.infoform_bedankt { padding-top: 30px; }
}
@media screen and (max-width: 736px) {
	#infoform { grid-template-rows: 90px 1fr; grid-template-columns: 100%; }
	#formlogo { height: 25vh; }
	#formlogo img { width: 70%; }
	#infoform h1 { width: 92%; font-size: 1.2rem; }
}