* {
  box-sizing: border-box;
}

    /* Achtergrondkleur van pagina is wit en de padding is 0 pixels*/
    /* De content komt nu mooi tegen de rand van de browser*/
    /* De info over de header staat in de stylesheet*/
    /* Ik probeer nog een navbar toe te voegen met de include functie*/
    body {

    }

   .whiteBox { /* Dit witte vlak leg ik over de hamburger navigation om m onzichtbaar te maken*/
  position:absolute;
  height: 60px;
  width: 60px;      
  background-color:white;
  z-index:2;
}

.menuToggle {
  visibility: hidden;
}

.header_logo {

    display: flex;
  justify-content: center;
  background-color: white; 
margin: 0px -10px -0px -10px;
  
}

 .heading_home{  
  font-size: 14px;
    line-height: normal;
  text-align: center;
margin: 30px 10px 10px 10px; 
    
}
  .gradient {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100%;
    min-width: 100vw;
    max-height: 100vw;
    top: 0px;
	position: relative;
	right: 50%;
	width: 100vw;
} 



/* Layout Large Screens (default for older browsers) */
  .full-width {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100%;
    min-width: 100vw;
    max-height: 100vw;
    top: 0px;
	position: relative;
	right: 50%;
	width: 100vw;
    z-index: -1;/* afbeelding wordt naar achteren geplaatst*/
} 
       
 /* simpel hover effect for specific images*/   
 .image {
  background-color: #000000;
  display: block;
  width: 100%;
  height: 100%;
}         
.image:hover {
  opacity: 0.25;
} 
/* ---------------------- */  
     
  .overlay {
  position: relative;
  width: 100%;
  opacity: 0;
  color: black;
    top: -40px;  
  font-size: 20px;
  text-align: center;
}
    
    .myContainer:hover .overlay {
       opacity: 50%;
}  
      
/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
  overflow: hidden;
    margin-top: 10px;/* hiermee kan ik de main over de onderliggende hero image leggen */ 
}

.main_home {
  max-width: 700px;
  margin: auto;
  overflow: hidden;
    margin-top: 10px;/* hiermee kan ik de main over de onderliggende hero image leggen */ 
}

/* Deze main tag zet main div op 500 pixels breed in plaats van 1000 
Hierdoor worden de Gifs niet te groot getoond en onder elkaar gezet */
.main_gifs {
  max-width: 500px;
  margin: auto;
  overflow: hidden;
    margin-top: 10px;
}


.main_contact {
  max-width: 500px;
  margin: auto;
  overflow: hidden;
}

.row {
  margin: 0px 0px;
}

.row_illustration{
  margin: 0px 0px;
  padding: 0px;
}

.row contact {
  margin: 0px 0px;
}

/* Add padding BETWEEN each column */
.myRow,
.myRow > .myColumn {
  padding: 0px;
    margin-top: -5px;
}

/* Create four equal columns that floats next to each other */
.myColumn {
  float: left;
  width: 25%;
}
/* This is a column for the gif animations that shows them at the full width of the main */
.myColumn_gifs {
  float: left;
margin-top: 5px;
  width: 100%;
}

.myColumn_concept {
  float: left;
  width: 50%;
margin: 10px 0px 0px 0px;    
}


.myColumn_home { /* This column on the homepage shows two images side by side  */
  float: left;
  width: 50%;
margin: 5px 0px 0px 0px;
    padding: 0px 10px 0px 0px;
}


.myColumn_contact {
  float: left;
  width: 33%;
}

.myColumn_rowofsix {
  float: left;
  width: 16.66%;
}

/* voor gif animatie heb ik twee columns van 49% en een small wit balkje er tussenin van 2%*/

.myColumn_gif_49 {
  float: left;
  width: 49.5%;
}

.myColumn_gif_2 {
  float: left;
  width: 1%;
}


/* voor portfolio illustraties breedte is 1200 pixels. Deze wordt opgedeeld in een veelvoud
van 120 pixels. Telkens 10%. Op die manier kun je per rij variaties maken van verschillende
formaten. Als je maar op 1200 pixels totaal uit komt. De illustraties dan aanmaken op het 
juiste formaat. De hoogte maak je dan altijd 400 Pixels*/ 



.myColumn_illu120_10 {
  float: left;
  width: 10%;
}
.myColumn_illu180_15 {
  float: left;
  width: 15%;
 }   
.myColumn_illu240_20 {
  float: left;
  width: 20%;
}
.myColumn_illu300_25 {
  float: left;
  width: 25%;
}
.myColumn_illu360_30 {
  float: left;
  width: 30%;
}
.myColumn_illu400_33 {
  float: left;
  width: 33.33%;
  margin-right: 0px;
  margin-left: 0px;
}
.myColumn_illu420_35 {
  float: left;
  width: 35%;
  margin-right: 0px;
  margin-left: 0px;
}
.myColumn_illu480_40 {
  float: left;
  width: 40%;
  margin-right: 0px;
  margin-left: 0px;
}
.myColumn_illu540_45 {
  float: left;
  width: 45%;
  margin-right: 0px;
  margin-left: 0px;
}
.myColumn_illu600_50 {
  float: left;
  width: 50%;
}
.myColumn_illu660_55 {
  float: left;
  width: 55%;
}
.myColumn_illu720_60 {
  float: left;
  width: 60%;
}
.myColumn_illu780_65 {
  float: left;
  width: 65%;
}
.myColumn_illu840_70 {
  float: left;
  width: 70%;
}
.myColumn_illu900_75 {
  float: left;
  width: 75%;
}
.myColumn_illu960_80 {
  float: left;
  width: 80%;
}
.myColumn_illu1020_85 {
  float: left;
  width: 85%;
}
.myColumn_illu1080_90 {
  float: left;
  width: 90%;    
}
.myColumn_illu1140_95 {
  float: left;
  width: 95%;
}
.myColumn_illu1200_100 {
  float: left;
  width: 100%;
}
/* ---------------------------------*/ 


.myColumn_feature {
  float: left;
  width: 100%;
    
}

/* Clear floats after rows */ 
.myRow:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.myContent {
  background-color: white;
  padding: 0px 10px 0px 0px;
}
    
/* Content social media icons */
.content_socials {
  background-color: 000;
  float: left;
    width: 100%;
}

/* Below is the setup for the responsive styling voor de colums */

/* Responsive layout - sets a margin left and right for the .row div */
@media screen and (max-width: 1200px) {
    .row {
  margin: 0px 10px;
}
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    width: 50%;
  }
    
  /*     .heading {  
  font-size: 14px;
  text-align: center;
  line-height: normal;
margin: -30px 30px 10px; 
    
}*/
 
}



   
/* Responsive layout - for mobile makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    
    
      .heading {  
  font-size: 14px;
  text-align: center;
  line-height: normal;
margin: -30px 30px 10px; 
    
}
    
   
         h3 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
     margin-top: 40px;
}
   
    
    html,
body {
width: 100%;
  height: 100%;
  margin: 0;
}
    
    
/* verschuif de whiteBox 60 pixels omhoog bij mobile zodat hamburgermenu zichtbaar wordt*/
  .whiteBox { 
  margin-top: -60px;
}
    
    
    .body { 
    overflow-y: hidden; /* Hide vertical scrollbar */
    }
    
    .menuToggle {
  visibility: visible;
}

  /*     .header_logo{ 
        visibility: hidden;  This hides the logo mobile phone. But it still takes up space
             margin-top: -20px; This shifts the hero-image pixels up on mobile
  }*/
    
    
    
    
    .flex-container { 
     visibility: hidden; /* This hides the navbar-menu on mobile phone. But it still takes up space*/
  }
    
    .full-width{ 
        margin-top: -30px; /* This shifts the hero-image 30 pixels up on mobile*/
  }
    
    
  .main {
  float: left;
  width: 100%;
  overflow: hidden; /* Hide scrollbars */
}
    
  .main_contact {
  float: left;
  width: 100%;
  overflow: hidden; /* Hide scrollbars */
}
  .column {
    width: 100%;
  }
    
    .myColumn_concept  {
    width: 100%;
  }
    
      
       .row_contact {
  margin: 0px 75px;
}   
    .row {
  margin: 0px 10px;
}
    
    
     .heading_home{  
  font-size: 10px;
    line-height: normal;
  text-align: center;
margin: 0px 10px 10px 10px; 
    
}  
    
        .span {  
  font-size: 6px;
    line-height: normal;
  text-align: center;
margin: 0px 0px; 
    
}
}