/*basic settings*/
*, html {box-sizing: border-box; text-decoration:none; list-style:none; margin:0; padding:0px; outline:none; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif" ; font-size: 18px; line-height: 1.6; scroll-behavior: smooth; text-align: left; font-weight:400; --grey: #000; --light: #444; --white: #fedefe; --orange: #FF5204; --knop: #DD3200;}

/*sections lay-out van de header*/
header {display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 25vh; /* row height */}
#bigvideo {grid-row: 1 / 5; grid-column: 1 / 13; overflow: hidden;}
#top {grid-column: 6 / 8; z-index: 999;   grid-row-start: 2;
  grid-row-end: 3; min-width: 500px;
    min-height: 500px;}

/*images*/
img, video {width: 100%;}

/*De inhoud van de secties zetten we in flex 
en maken classes 
12 = volledige breedte van de rij, 6 = de helft van de rij 4 = 33.33% ...*/
section {}
.row {display: flex; flex-flow: row wrap; max-width: 90vw; margin: 0 auto;}

.column-12 {flex: 100%; padding: 30px;}
.column-6 {flex: 0 0 50%; padding: 20px;}
.column-4 {flex: 0 0 33.33%; padding: 30px;}
.column-3 {flex: 0 0 25%; padding: 30px;}
.column-1 {flex: 0 0 2%; padding: 30px;}

/*enkele kleine classes als voorbeeld*/
.p-5 {padding: 5rem 0;}
.center {display: flex; margin: 0 auto; justify-content: center;}

/*navigatie*/
nav ul {display: flex; justify-content: space-evenly;}
.orange-big a i, .orange-big h2 i {line-height: 100px; width: 100px; text-align: center; font-size: 200%;}
.orange a i {line-height: 50px; width: 50px; text-align: center; font-size: 160%;}

/* Comment */
.formrow  input, form select {width: 69%;}
.formrow input[type=checkbox], .formrow input[type=radio] {width: initial;}
.formrow {display: flex; flex-flow: row wrap; padding: 10px;}
.formrow label {flex: none; display: block; width: 30%;}
button a {text-align: center; font-size: 120%; font-weight: 600; height: 50px; line-height: 50px; display: block;}

/*font stuff*/
h1 {font-size: 3rem; line-height: 1; }
h2 {font-size: 150%; font-weight: 400; line-height: 1;}
h3, .highlight {font-size: 110%; font-weight: 600;}
.small {font-size: 80%;}
.bigtext {font-size: 250%; text-align: center; line-height: 1.3;}

/*colorstuff & deco*/
body, #menubox, #top {background-color: var(--grey);}
#products, #contact {background-color: var(--light);}


h1, h2, h3, p, a, i, label {
  background-image: linear-gradient(
    35deg,
    #f7e7b4 0%,   /* light gold highlight */
    #e6c978 15%,  /* warm gold */
    #c9a64d 30%,  /* mid gold */
    #b58b2b 45%,  /* deeper gold */
    #f2d68b 60%,  /* highlight */
    #e0b95c 75%,  /* warm midtone */
    #a67c2d 90%,  /* shadow gold */
    #f5e3a1 100%  /* final highlight */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.orange a i, .orange-big a i, .orange h2 i, .orange-big h2 i {background-color: var(--orange); color: var(--grey);}
.orange a i:hover, .orange-big a i:hover {background-color: var(--knop);}
.highlight {background-color: var(--orange); color: var(--grey);}

form {border: 2px solid var(--orange);}
form input, form select, form button {border: 2px solid var(--orange); }
form input, form select {color: var(--grey);}
form button a {border: 2px solid var(--orange); color: var(--grey); background-color: var(--orange);}
form button a:hover {background-color: var(--knop);}

#pro {background-image: url("../img/3.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */}



/*verberg mobile navigatie: verberg checkbox, verberg burger label, zet deze rechts*/
#menubox input[type=checkbox], label.toggle-menu {display:none; position:absolute; right: 0px; top: 10px; padding:20px;}
.toggle-menu i {font-size: 150%;}






/* mobile */
@media only screen and (max-width : 700px){
/*haal alles uit de body uit grid en zet onder elkaar */ 
body, section, header {display: block; height: initial; min-height: initial; }
.column-12, .column-6, .column-4, .column-3 {flex: 1 100%; padding: 20px;}
.row {max-width: 100vw;}
	
#bigvideo {display: none;}	
.m-5 {margin: auto;}
	
/*verberg navigatie op smartphone en zet deze op een andere plaats*/
nav {display:none;}

/*fix menu blok items en pas aan*/ 
nav ul li a {height: 30px; line-height: 30px; margin: 1em 0; width: 80vw;}

/*als verborgen checkbox is aangetikt: toon navigatie en toon burger label*/
#menubox input[type=checkbox]:checked ~ nav {display:block;}
label.toggle-menu, nav ul {display: block;}
}