@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;
}

a:link button, a:visited button, a:hover button, a:active button {
  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;
  left:-4vw;
  display:grid;
  grid-template-columns: repeat(4, 0.5fr);  
  grid-row:2/2;
  grid-column:2/2;

}
.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:8/8;
  grid-row:2/2;

  z-index: 1;
}

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

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

}

/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 80%;
  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: 200vh;
  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-weight: 700;
  font-size: 1.5rem;
  padding: 1rem;
}

.menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}
/*********************
Main layout grid 
*********************/

body {
  background-color: rgba(242,220,5,1);
}

#wrapper {
  display: grid;
  height:100vh;
  margin:0;
  grid-template-columns:repeat( 8, 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:60vh;
}

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

@keyframes mylogo {
  0% { 
    opacity: 0%; 
    scale:200%; 
    transform:translateZ(10%);
    transform:translateY(-100%);
  }
  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;
  height:auto;
  padding-bottom:5vh;
}

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

}

#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: 2/10;
}

#diensten {
  min-height:30vh;
  padding-bottom:2rem;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-column: 1/-1;

}

.dienstenTextBlock {
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column: 2/12;
  font-family:'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  text-wrap: nowrap;
  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 h2.black {
  grid-column: 2/10;
  grid-row:1/1;
  animation:diensten 3s ease in;
}


.dienstenTextBlock .arrow {
  grid-column: 5/7;
  grid-row:1/1;
}

.dienstenTextBlock a {
  grid-column: 2/10;
  grid-row:1/1;
}

#blockQuote {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3,auto);
  background-color: rgba(166,140,5,1);
  grid-column: 1/-1;
  height:auto;
  max-height:25vh;
  padding:2rem 1rem 2rem 1rem;
}

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

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

p.who {
  padding-top: 1rem;
  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:3vh;
}

#contact h1 {
  grid-column:2/9;
  grid-row:2/3;
  text-wrap: nowrap;
}
#contact .marc {
    grid-column:2/8;
    grid-row:4/4;
  }
  #contact .tel {
    grid-column:2/8;
    grid-row:5/5;
  }
  #contact .whatsapp {
    grid-column:2/8;
    grid-row:6/6;
  }

  #contact .kvk {
    grid-column:2/8;
    grid-row:7/7;
  }



#social {
  display:grid;
  grid-template-columns: repeat(8,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: 5/5;
}

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

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

.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:36px; 
	height:36px;
}

.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: repeat(3,auto);
  grid-template-rows: repeat(3,0.5fr);
  grid-column: 1/-1;
  background-color: rgba(242,220,5,1);
  text-wrap: nowrap;
  justify-items: center;
}
#footer a {
  grid-column: 2/2;
  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: 2/10;
  padding:2vh 0 2vh 0;
}


#services {
  padding-top:5vh;
  display:grid;
  grid-template-columns:repeat(8, minmax(0,0.5fr));
  grid-column: 1/-1;
  justify-content:start;
}

#dienstenHeader{
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column: 2/8;
  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:0.5rem;

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

}

.description {
  padding:2rem 0 2rem 0;
  grid-column: 2/8;
  height:auto;
}

.rectYellow {
  background-color: rgba(242,235,196,1);
  display:grid;
  grid-template-columns:repeat(8, minmax(0,0.5fr));
  grid-column:1/-1;
  padding-bottom:5vh;
 }

 .rectYellow a  {
  grid-column: 3/6;
}
/********************
layout projecten.html
********************/

.projectHeader {
  display:grid;
  grid-template-columns: subgrid;
  grid-column:1/-1;
}
.projectHeader h1 {
  grid-column: 2/10;
  padding:2vh 0 2vh 0;
}
.projecten {
  display:grid;
  grid-template-columns:repeat(8,minmax(0, 1fr));
  grid-template-rows: 0.1fr 0.1fr 0.5fr;
  grid-column: 1/-1;
  padding-bottom: 2rem;
}

#projectHeaderTop {
  font-family:'Roboto Flex';
  font-style:normal;
  font-weight: 300;
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column:2/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:2/10;
  grid-row:2/2;
  
}

.projecten figure {
  grid-column:2/8;
  grid-row:3/3
}

.mainArticle {
  grid-column:2/8;
  grid-row:4/4;
  padding-top:1rem;
}
h3.merk {
  grid-column:1/1;
}
h3.jaar {
  grid-column:6/6;
}
h3.owner {
  grid-column:1/1;
  text-wrap: nowrap;
}
h3.year {
  grid-column:6/6;
}

#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:20vh;
  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: 2/4;
  padding:2vh 0 2vh 0;
  text-wrap: nowrap;
}

.testimonials {
  padding-bottom:5vh;
  display:grid;
  grid-template-columns:repeat(8,minmax(0, 1fr));
  grid-column: 1/-1;
  justify-content: space-evenly;
}

#testHeaderTop {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight: 700;
  display:grid;
  grid-template-columns:subgrid;
  align-items: center;
  grid-column:2/8;
  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:2/8;
  grid-row:2/2;
  
}

.mainTest {
  grid-column:2/8;
  grid-row:3/3;
  padding-top:2vh;
}
h3.name {
  grid-column:1/4;
}
h3.type {
  grid-column:4/8;
}
h3.role {
  grid-column:1/4;
}
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: 2/8;
}
#aboutme h2 {
  padding-top:1rem;
  grid-column: 2/9;
}
.aboutArticle {
  padding:1rem 0 1rem 0;
  grid-column: 2/8;
}

/*********************
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:1rem;}
h1 {font-size:2rem;}
h2 {font-size:1.5rem;}
h3 {font-size:1rem;}

.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);

}
.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-size: 1.25rem;
  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);
  text-wrap: nowrap;
}

#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:250%;
  background-position: 35% 26%;
  background-repeat: no-repeat;
}

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

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

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

.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;
}