/* CSS applicable to ALL PAGES */


/* CSS for top navigation-menu */
/* Add a background color to the top navigation */
.topnav {
  background-color: white;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  /*padding: 14px 16px;  */
  /* gewijzigd door joachim */    padding: 0px 16px;
  text-decoration: none;
  font-size: 17px;
  /* gewijzigd door joachim */ line-height: 55px;
}

 /* gewijzigd door joachim */
.tophomelogo{
 height:55px;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: rgb(125, 199, 209);
  color: black;
}
 /* gewijzigd door joachim */ 
.topnav a.tophomelogolink:hover{background-color: transparent;
}
/* Add an active class to highlight the current page */
.active {
  background-color: white;
  color: black;
  font-weight:bold
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



/* When the screen is less than 600 pixels wide, hide all links, except for the active one. Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
  .topnav a:not(.active) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



header {
	background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("images/happy.jpg"); 
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center;
	padding:163px 0px;
	margin: 0;
	
}



@font-face {
    font-family: aaargh;
    src: url(fonts/aaargh.woff2);
	src: url(fonts/aaargh.woff);
}

@font-face {
    font-family: AmaticSC-Bold;
    src: url(fonts/AmaticSC-Bold.woff2);
	src: url(fonts/AmaticSC-Bold.woff);
}

@font-face {
    font-family: FrederickatheGreat-Regular;
    src: url(fonts/FrederickatheGreat-Regular.woff2);
	src: url(fonts/FrederickatheGreat-Regular.woff);
}




body  {background-color:white; text-align: center; font-family:calibri; font-size:110%;margin: 0px}
h1    {font-size:60px; font-family:AmaticSC-Bold; padding: 5px; color:black; text-align:center;}
h2    {font-size:35px; font-family:AmaticSC-Bold; padding: 10px; background-color: rgb(125, 199, 209); color:black; text-align:center;margin:0 auto}
h3    {font-size:205%; font-family:aaargh; padding: 5px; color:white; text-align:center; margin:0px}
h4	  {font-size:300%; font-family:AmaticSC-Bold; padding: 5px; color:white; text-align:center; margin:0px}
h5	  {font-size:20px; font-family:Courier New; padding: 40px; background-color: rgb(125, 199, 209); color:black; text-align:center; margin:0px}
h6	  {font-size:120%; font-family:aaargh; padding: 5px; color:black; text-align:center; margin:0px}
p     {color: black; padding: 10px; margin:0px;}


/*Responsive h3 hero-text*/
@media only screen and (min-width: 601px) and (max-width: 900px) {
    h3 {font-size: 270%;}
}

@media only screen and (min-width: 901px) {
    h3 {font-size: 370%;}
}


/*Responsive h4 hero-text: h4 will have a 30px font-size on small screens (max.700px wide).*/
@media only screen and (max-width: 700px) {
    h4 {font-size: 30px;}
}

@media only screen and (min-width: 701px) and (max-width: 1300px) {
    h4 {font-size: 35px;}
}

@media only screen and (min-width: 1301px) {
    h3 {font-size: 300%;}
}





/* h2    {margin-top:60px; margin-bottom:0px;} */
/* p     {margin:0px 10%;} */


.center-justified {
  text-align: justify;
  margin: 2% auto;
  width: 90%;
}

.center {text-align: center; display: block; margin: auto} 




body, html {
    height: 100%;
}



.parallax_hero-image {
    /* Full height */
	height: 100%; 
	/* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	
    max-width: 100%;
    position: relative;
	
}


/*
@media only screen and (max-device-width: 550px) { 
    .parallax_hero-image { 
		 background-size: contain;
     } 
} 
*/

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed
 @media only screen and (max-device-width: 1365px) { 
    .parallax_hero-image { 
         background-attachment: scroll; 
    } 
 } 
*/


.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}





/* CSS specific to HOME page */


@media only screen and (max-device-width: 700px) { 
    .kikoslogo { 
		 background-size: contain;
		 background-image: url('images/logo2.png');
     } 
} 

@media only screen and (min-device-width: 701px) { 
    .kikoslogo { 
		 background-image: url('images/logo1.png');
     } 
} 



.intro {
  margin: 5% 10%;
  text-align: center;
}


#mondmasker {
 
}


.hero-text_homekracht {
  text-align: center;
  position: absolute;
  top:20%;
  left:50%;
  transform: translate(-50%, -50%);
}




/* CSS specific to OVER TREES page */
/* Main column "Our story" text*/
.column-main {
  float: right;
  width: 85%;
}

/* right column for profile pic*/
.column-side {
  float: left;
  width: 15%;
}

/* Needed to delete white space under the profile pic and the next parallax_hero-image. 
(5px is the difference between the height of the pic and the height of the side column.*/
.row-ourstory {
  margin-bottom: -5px;
}


/* Clear floats after the columns */ 

.row-ourstory:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the 2 columns stack on top of each other instead of next to each other on small screens */
@media screen and (max-width: 900px) {
  .column-side, .column-main {
    width: 100%;
	margin-bottom: 4%;
  }
}


@media only screen and (min-width: 901px) and (max-width: 1839px) {
  .column-side{
    width: 40%;
  }
  .column-main {
    width: 60%;
  }
}




#profilepic {
	height:100%;
	width: 100%;
	margin-right: 0px;
}

@media only screen and (max-width: 900px) {
    #profilepic {
       width: 50%;
    }
}


/*@media only screen and (min-width: 1450px) {
	.column-side {
		padding-left: 4%;
	}
}


@media only screen and (min-width: 1650px) {
	.column-side {
		padding-left: 8%;
	}
}

*/


 #minus-margin {margin-bottom: -0%;}
 
 
 
.hero-text_bubbles {
  text-align: center;
  position: absolute;
  top:80%;
  left:35%;
  transform: translate(-50%, -50%);
}



/* CSS specific to AANBOD & TARIEVEN page */
.hero-text_paintfun {
  text-align: center;
  position: absolute;
  top:40%;
  left:80.5%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
    .hero-text_paintfun {top:80%;
						left:50%;}
}


table {
	width: 500px;
	margin: 10px 0px;
}

@media only screen and (max-width: 499px) {
    table {width: calc(100% - 1px);}
}

@media only screen and (max-width: 1600px) {
    table {margin-bottom: 20px;}
}


table, th, td {
  border: 1px solid rgb(125, 199, 209);
  border-collapse: collapse;
}


tr:hover {background-color: rgba(125, 199, 209,0.3);}

th, td {
  padding: 10px;
}





/* CSS specific to WERKWIJZE page */
.hero-text_blowingdandelions {
  text-align: center;
  position: absolute;
  top:27%;
  left:65%;
  transform: translate(-50%, -50%);
}





/* CSS specific to CONTACT page */

.contactgegevens {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

ul {
  text-align: left;
}


@media only screen and (max-width: 599px) {
    iframe {width:80%;
			height: 50%}
}


.hero-text_meisjemetkat {
  text-align: center;
  position: absolute;
  top:25%;
  left:34%;
  transform: translate(-50%, -50%);
}





/*  
.hero-text_contact {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 51.5%;
  transform: translate(-50%, -50%);
  color: black;
  background-color: #c0faf3;
  padding: 75px 178px;
  border: 2px solid black;
}

.outer{
	background-image: url('images/locatie.jpg');
    width:420px;
    height:365px;
}
.inner{
 position: relative;
    background-color:;
    left: 67px;
	top: 109px;
    width:277px;
    height:150px;
}
*/
.floatimage {
  float: left;
}




/* CSS specific to OUR STORY page */

@media only screen and (max-device-width: 600px) { 
    .invite-tekening { 
		 margin: -100px auto;
		 z-index: -100;
     } 
} 
	


/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides .mySlides2{
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */ 
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}


/*On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */ 
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/*img {
  margin-bottom: -4px;
}
*/ 

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  color: white;
  padding: 6px;
  margin-top: -4px;
}

#caption, #caption2 {color: white;}

.demo .demo2 {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

.active,
.demo2:hover {
  opacity: 1;
}



img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}




/* CSS specific to WHEN & WHERE page */

/* Main column for when & where info */
.column1 {
  float: left;
  width: 55%;
}

/* right column for voortuin pic*/
.column2 {
  float: left;
  width: 45%;
  margin-top: 80px;
  margin-bottom: 40px;
}

/* Clear floats after the columns */
.row_whenwhere:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes the 2 columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column2, .column1 {
    width: 100%;
  }
}


/*Lay-out for the directions paragraphs on small screens (tot en met screen width 600px).*/
.directions {
  width: 90%;
  margin: 0 auto;
  text-align: justify;
}

/*Lay-out for the directions paragraphs on screens between 601 and 900px wide*/
@media only screen and (min-width: 601px) and (max-width: 900px) {
    .directions {
		width: 80%;
	}
}

/*Lay-out for the directions paragraphs on screens of 901px wide and up*/
@media only screen and (min-width: 901px) {
     .directions {
		width: 50%;
	}
}





.footer {
	text-align: center;
	color: black;
    background-color: white;
    padding: 0.5%;
	margin: 0px;
    clear: left;
}

.footer p{
	margin: 0px;
}