@charset "UTF-8";
/* CSS Document */

/*****************
    CSS reset
*****************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, button, 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, input , textarea, submit {
	border: 0;
	border-radius:0;
	font-size: 100%;
	font: inherit;
	padding:0;
	margin:0;
}

a:link, a:visited, a:hover, a:active {
  text-decoration:none; 
  color:currentColor;
  border-color:currentColor;
}

img {max-width:100%;}

/*********************
Menu layout
*********************/

:root {
  --primary-color: rgba(13, 13,13,1);
  --overlay-color:rgba(242,235,196,1);
  --menu-speed: 0.75s;
}
.buttonHolder {
  position:fixed;
  top:4vh;
  display:grid;
  grid-template-columns: repeat(4, 0.5fr);  
  grid-row:2/2;
  grid-column:11/11;

}
.ne {
  grid-column: 3/3;
  justify-self: end;
  width:40px;
  height:40px;
  padding:0.5rem;
  font-family: 'Roboto Flex';
  color:rgba(13,13,13,1);
  background-color: inherit;
  border-color: rgba(166,140,5,1);
  border-style: solid;
  border-width: 4px;
  border-right:none;

}

.en {
  grid-column: 4/4;
  justify-self: start;
  width:40px;
  height:40px;
  padding:0.5rem;
  font-family: 'Roboto Flex';
  color:rgba(13,13,13,1);
  background-color: inherit;
  border-color: rgba(166,140,5,1);
  border-style: solid;
  border-width: 4px;
  border-left:none;

}

.menu-wrap {
  display:grid;
  grid-template-columns: repeat(4, 0.5fr);
  grid-template-rows: 0;  
  grid-column:12/12;
  grid-row:1/1;
  z-index: 1;
}

.menu-wrap .toggler {
  position: fixed;
  top:4vh;
  right:3rem;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position:fixed;
  top:2rem;
  right:3rem;
  z-index: 1;
  width: 50px;
  height: 50px;
  padding:1.5rem 0 0 0px;

}

/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 4px;
  background:rgba(13,13,13,1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 4px;
  background: inherit;
}

/* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}

/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition:  opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .menu > div {
  background: var(--overlay-color);
  width: 200vw;
  height: 200vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: rgba(166,140,5,1);
  font-family: 'Cormorant Garamond';
  font-style: italic;  
  font-size: 1.5rem;
  font-weight:700;
  padding: 1rem;
}

 li a .active {
  color:rgba(13,13,13,1);
}

.menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}
/*********************
Main layout grid 
*********************/
/*edited for desktop*/
#wrapper {
  display: grid;
  height:100vh;
  grid-template-columns:repeat( 12, 1fr);
  font-family: 'Roboto Flex'; 
}
#header {
  display:grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(12, 0.5fr);  
  grid-column: 1/-1;  
  min-height:80vh;
}

.logoMain {
  height:16vh;
  grid-column: 2/9;
  grid-row:10/12;
  animation: mylogo 3s ease-in;
}

@keyframes mylogo {
  0% { 
    opacity: 0%; 
    scale:200%; 
    transform:translateZ(10%);
    transform:translateY(-80%);
  }
  100% {opacity: 100%;}
}

#overMij {
  display:grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, 0.5fr);
  background-color: rgba(242, 220, 5, 1);
  grid-column: 1/-1;
  min-height:30vh;
}

#overMij .quote {
  grid-column: 4/6;
  grid-row: 2/4;
}
#overMij a  {
  grid-column: 9/10;
  grid-row:2/5
}

#squareBrown {
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: inherit;
  width:8rem;
  height:8rem;
  padding-left:0.5rem;
  border-style: solid;
  border-color: rgba(166,140,5,1);
  border-width: 0.6rem;
}

#squareBrown a:link {
  color:currentColor;
}
a:hover #squareBrown{
  color:rgba(166,140,5,1);
  border-color: rgba(242,235,196,1);
  cursor: pointer;
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.dienstenTextHeader{
  display:grid;
  grid-template-columns: subgrid;
  grid-column:1/-1;
  align-items: center;
  background-color: rgba(242,220,5,1);
}
.dienstenTextHeader h2 {
  grid-column: 4/7;
}
#diensten {
  min-height:45vh;
  padding-bottom: 5vh;
  display:grid;
  grid-template-columns:subgrid;
  grid-template-rows: repeat(3,minmax(0.5fr, 1fr)0.5fr);
  grid-column: 1/-1;
}

.dienstenTextBlock {
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column: 4/10;
  font-family:'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  border-top: 0.1rem;
  border-style: solid;
  border-top-color:rgba(166,140,5,1);
}
.dienstenTextBlock h2.brown {
  grid-column: 1/1;
  grid-row:1/1;
}

.dienstenTextBlock a {
  grid-column: 2/5;
}

.dienstenTextBlock h2.black {
  grid-column: 2/5;
}
.dienstenTextBlock .arrow {
  grid-column: 6/6;
}

#blockQuote {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(4,0.5fr);
  background-color: rgba(166,140,5,1);
  grid-column: 1/-1;
  height:auto;
  padding:1rem 0 1rem 0;
}

a.testi{
  grid-column: 5/9;
  grid-row:2/2;
}

.slide1, .slide2, .slide3 {
  grid-column:5/9;
  grid-row:2/2;
}

.who {
  padding-top: 2rem;
  text-wrap:nowrap;
}
#contact {
  display:grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(7,0.4fr);
  background-color: rgba(13,13,13,1);
  grid-column: 1/-1;
  height:auto;
  padding-bottom:5vh;
}

#contact h1 {
  grid-column:5/9;
  grid-row:2/3;
}

#contact .marc {
  grid-column:5/9;
  grid-row:4/4;
}
#contact .tel {
  grid-column:5/9;
  grid-row:5/5;
}
#contact .whatsapp {
  grid-column:5/9;
  grid-row:6/6;
}

#contact .kvk {
    grid-column:5/9;
    grid-row:7/7;
  }

#social {
  display:grid;
  grid-template-columns: repeat(16,0.5fr);
  grid-template-rows: repeat(4,minmax(0,0.5fr));
  grid-column: 1/-1;
  border-top: 0.1rem;
  border-style: solid;
  border-top-color:rgba(166,140,5,1);

}

#social a.fb{
  grid-row:2/2;
  grid-column: 9/9;
}

#social a.in{
  grid-row:2/2;
  grid-column: 8/8;
}

.facebook {
	width:48px; 
  height:48px;
}

.facebook:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
      transform: scale(1.2);
      -webkit-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
}

.linkedin {
	width:48px; 
	height:48px;
}

.linkedin:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
      transform: scale(1.2);
      -webkit-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
}

#footer {
  display:grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3,0.5fr);
  grid-column: 1/-1;
  background-color: rgba(242,220,5,1);
  text-wrap: nowrap;
}
#footer a {
  grid-column: 6/9;
  grid-row:2/2;
}
/********************
 layout diensten.html
********************/

#logoHeader {
  grid-column: 1/-1;
  min-height:20vh;
}
.logo {
  height:10vh;
  margin: 2rem;
}

.servicesHeader {
  display:grid;
  grid-template-columns: subgrid;
  grid-column:1/-1;
}
.servicesHeader h1 {
  grid-column: 5/10;
  padding:2vh 0 2vh 0;
}

#services {
  padding-top:10vh;
  display:grid;
  grid-template-columns:subgrid;
  grid-template-rows: repeat(3,minmax(0.5fr, 1fr)0.5fr);
  grid-column: 1/-1;
}

#dienstenHeader{
  display:grid;
  grid-template-columns:subgrid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  grid-column: 5/9;
  font-family:'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
}

#dienstenHeader h2.brown {
  grid-column: 1/1;
  grid-row:1/1;
  border-bottom: 0.1rem;
  border-style: solid;
  border-bottom-color:rgba(166,140,5,1);
  padding-bottom:1rem;

}
#dienstenHeader  h2.black {
  grid-column: 2/5;
  border-bottom: 0.1rem;
  border-style: solid;
  border-bottom-color:rgba(166,140,5,1);
  padding-bottom:1rem;

}

.description {
  padding:1rem 0 2rem 0;
  grid-column: 2/5;
  grid-row:2/4;
}

 .rectYellow {
  background-color: rgba(242,235,196,1);
  display:grid;
  grid-template-columns: subgrid;
  grid-column:1/-1;
  padding-bottom:5vh;
 }

 .rectYellow a  {
  grid-column: 6/6;
}

/********************
layout projecten.html
********************/

.projectHeader {
  display:grid;
  grid-template-columns: subgrid;
  grid-column:1/-1;
}
.projectHeader h1 {
  grid-column: 4/10;
  padding:2vh 0 2vh 0;
}

.projecten {
  padding-top:2rem;
  padding-bottom:2rem;
  display:grid;
  grid-template-columns:subgrid;
  grid-template-rows: 0.1fr 0.1fr 0.5fr;
  grid-column: 1/-1;
}

#projectHeaderTop {
  font-family:'Roboto Flex';
  font-style:normal;
  font-weight: 300;
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column:4/10;
  grid-row:1/1;
}

#projectHeaderBottom {
  font-family:'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  color:rgba(166,140,5,1);
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column:4/10;
  grid-row:2/2;
  
}

.projecten figure {
  grid-column:4/10;
  grid-row:3/3
}

.mainArticle {
  grid-column:4/10;
  grid-row:4/4;
}
h3.merk {
  grid-column:1/1;
}
h3.jaar {
  grid-column:7/7;
}
h3.owner {
  grid-column:1/1;
}
h3.year {
  grid-column:7/7;
}

#projectHeaderTop h3 {
  padding-bottom:0.5rem;
}

#projectHeaderBottom h3 {
  border-top: 0.1rem;
  border-style: solid;
  border-bottom-color:rgba(166,140,5,1);
  padding-top:0.5rem;
}
.image1,.image2,.image3 {
  height:50vh;
  margin:1rem 0 1rem 0;
}



/****************
layout testimonials.html
****************/
.testHeader {
  display:grid;
  grid-template-columns: subgrid;
  grid-column:1/-1;
  background-color: rgba(242,235,196,1);
}
.testHeader h1 {
  grid-column: 4/10;
  padding:2vh 0 2vh 0;
  text-wrap: nowrap;
}
.testimonials {
  padding:5vh 0 5vh 0;
  display:grid;
  grid-template-columns:subgrid;
  grid-template-rows: repeat (4, minmax (0, 0.5fr));
  grid-column: 1/-1;
}

#testHeaderTop {
  font-family:'Roboto Flex';
  font-style:normal;
  font-weight: 300;
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column:4/10;
  grid-row:1/1;
  padding-bottom:0.5rem;
}

#testHeaderBottom {
  font-family:'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  color:rgba(166,140,5,1);
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column:4/10;
  grid-row:2/2;
  
}

.mainTest {
  grid-column:4/10;
  grid-row:4/4;
  padding-top:5vh;
}

h3.name {
  grid-column:1/6;
}
h3.type {
  grid-column:4/8;
}
h3.role {
  grid-column:1/6;
}
h3.bureau {
  grid-column:4/8;
}

#testHeaderBottom h3 {
  border-top: 0.1rem;
  border-style: solid;
  border-bottom-color:rgba(166,140,5,1);
  padding-top:0.5rem;
}


/*****************
layout overmij.html
******************/


#aboutme {
  display:grid;
  grid-template-columns:subgrid;
  background-color: rgba(242,235,196,1);
  grid-column: 1/-1;
}
#aboutme h1 {
  padding-top:1rem;
  grid-column: 4/9;
}
#aboutme h2 {
  padding-top:1rem;
  grid-column: 4/9;

}
.aboutArticle {
  padding:1rem 0 3rem 0;
  grid-column: 4/10;
}

.pitch {
  grid-column: 4/6;
  padding-top:1rem;
}


.socialHolderBrown {
  display:grid;
  grid-template-columns: repeat(16,0.5fr);
  grid-template-rows: repeat(3,0.5fr);
  border-top: 0.1rem;
  border-style: solid;
  border-top-color:rgba(242,220,5,1);
}

/*********************
Styling menu/taalkeuze
*********************/

button#active {
  background-color: rgba(166,140,5,1);
  color: rgba(242,235,196,1);
}

.ne:visited    {
  background-color: rgba(13,13,13,1);
  color: rgba(242,235,196,1);
}

.ne:hover {
  background-color: rgba(166,140,5,1);
  color: rgba(242,235,196,1);
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;

} 

.ne:active    {
  background-color: rgba(166,140,5,1);
  color: rgba(242,235,196,1);
}

.en:visited    {
  background-color: rgba(13, 13,13,1);
  color: rgba(242,235,196,1);
}

.en:hover {
  background-color: rgba(166,140,5,1);
  color: rgba(242,235,196,1);
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;

} 

.en:active    {
  background-color: rgba(166,140,5,1);
  color: rgba(242,235,196,1);
}


/*****************
Styling index.html
*****************/

p {font-size:1.5rem;}
h1 {font-size:3rem;}
h2 {font-size:2rem;}
h3 {font-size:1.5rem;}

.slide1, .slide2, .slide3 {
  font-weight: 500;
}

.slide1 {
  
  animation:fade1 30s infinite;
-webkit-animation:fade1 30s infinite;

} 
.slide2 {

  animation:fade2 30s infinite;
-webkit-animation:fade2 30s infinite;
}
.slide3 {
 
  animation:fade3 30s infinite;
-webkit-animation:fade3 30s infinite;
}
@keyframes fade1
{
  0%   {opacity:0}
  25% { opacity: 1}
  50% { opacity: 0}
  75% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade2
{
  0%   {opacity:0}
  25% { opacity: 0}
  50% { opacity: 1}
  75% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  25% { opacity: 0}
  50% { opacity: 0}
  75% { opacity: 1}
  100% { opacity: 0}
}

#squareBrown {
  font-family: 'Cormorant Garamond';
  font-weight: 700;
}
#diensten h2 {
  font-family: 'Cormorant Garamond';
  font-style: italic;
}
.brown {color:rgba(166,140,5,1);}
.yellow {color:rgba(242, 220, 5, 1);}
.cream {color:rgba(242,235,196,1);}
.black {color:rgba(13,13,13,1);}

.brownFill {background-color: rgba(166,140,5,1);}
.yellowFill {background-color: rgba(242,220,5,1);}
.creamFill {background-color: rgba(242,235,196,1);}
.blackFill {background-color: rgba(13,13,13,1);}

.dienstenTextBlock a :hover {
  color:rgba(13,13,13,1);
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#blockQuote h2 {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
}
#blockQuote p {
  font-family: 'Roboto Flex';
  font-style: italic;
  font-weight: 300;
  color:rgba(242,235,196,1);
}

#contact h1 {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  color:rgba(242,235,196,1); 
}

#contact h2 {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  color:rgba(166,140,5,1); 
}

h2 a:hover {
  color:rgba(242,235,196,1);
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#footer h3 {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
}

/***************
styling diensten.html
********************/

.servicesHeader {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  background-color: rgba(242,235,196,1);
}

.dienstenTextBlock a:hover h2{
  color: rgba(166,140,5,1);
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.description p {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 300;
  color:rgba(13, 13,13,1);
}

.rectYellow a button {
  background-color: rgba(166,140,5,1);
  padding:0.6rem;
  font-family: 'Cormorant Garamond';
    font-style: italic;
    font-size: 1.25rem;
    text-wrap:nowrap;
    font-weight: 500;
    color:rgba(13, 13,13,1);
  }

  .rectYellow a:hover button{
    background-color: rgba(13, 13,13,1);
    color:rgba(242,235,196,1);
    cursor: pointer;
    -webkit-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
  }

/*********************
styling projecten.html
*********************/
.projectHeader {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  background-color: rgba(242,235,196,1);

}

.projecten {
  background-color: rgba(242,235,196,1);
}
.mainArticle {
  font-weight: 200;
}

.mainArticle h2 {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight:500;
  padding-bottom:1rem;
}

.mainArticle a{
  color:rgba(166,140,5,1);
}

/************************
styling testimonials.html
************************/
.testHeader {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
}
.testimonials {
  background-color: rgba(242,235,196,1);
}

.mainTest {
  font-style: italic;
}

/*******************
styling overmij.html
*******************/

#aboutme h1{
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  color:rgba(166,140,5,1)
}

#aboutme h2{
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  color:rgba(166,140,5,1)
}

.aboutArticle {
  font-weight: 300;
}
#contactForm h1{
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  color:rgba(242,235,196,1);
  padding-top:2rem;
}
.pitch p {
  font-family: 'Cormorant Garamond';
  font-size: 2rem;
  font-style: italic;
  font-weight: 300;
  color:rgba(242,235,196,1);
}


/***********
images
***********/

#header {
  background-color: rgba(13,13,13,0.2);
  background-blend-mode:overlay;
  background-image:url(../Images/marc_profiel.jpg);
  background-size:cover;
  background-position: 25% 35%;
  background-repeat: no-repeat;
}

.facebook {
  background-image: url(../Images/facebook_yellow.svg); 
  background-size: contain;
  background-repeat: no-repeat;
}
.linkedin {
  background-image: url(../Images/linkedin_yellow.svg); 
  background-size: contain;
  background-repeat: no-repeat;
}

.logoMain {
  background-image: url(../Images/logo.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.logo {
  background-image: url(../Images/logo.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.image1 {
  background-image: url(../Images/texels.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
}

.image2 {
  background-image: url(../Images/beerwulf.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.image3 {
  background-image: url(../Images/brand.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}