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

/************T*O*C****************** 

1. BODY 
2. HEAD
3. TXT-styles
4. BUTTON-styles
5. NAVIGATION
6. LISTs
7. PHONE

************************************/ 




/***********
1. BODY
***********/

body{
	font-family: 'Poppins', sans-serif;
	/*font-family:ubuntu-mono;*/
	/*font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-size:13px;
	line-height:20px;
}


/**************************************************************************
2. HEAD
***************************************************************************/

/**************************************************************************
3. TXT-styles
***************************************************************************/

/**********3.1 type-styles*******/

h1{/*font exhibition*/
	font-family: 'Lusitana', serif;
	font-size: 30px;
	line-height: 5px;
}
	
h2{	font-size:20px;
	color:red;
	padding-left:0px;
	line-height:30px;
	margin-top:0px;
	text-decoration: none;
	}	

	h2 a{text-decoration: none}
	
h3{ /*font-family:ubuntu-mono; */font-size:20px; line-height:25px; color:black; padding-left:0px; margin-top:0px; }		

h4{font-family: helvetica; font-size: 25px;line-height: 29px; font-weight: normal} /* TENTOONSTELLINGEN HEAD */

h5{font-family: helvetica; font-size: 15px;line-height: 10px; color: white} /*PREV NEXT*/
	h5 a{color:white}
	h5 a:hover{text-decoration: none}

p1{font-size:15px}

p2{	color:green}
	
p3{	text-transform:uppercase;
}

p4{text-decoration:line-through}

p6{/*onderschrift foto */ font-size:10px; line-height:10px;}

p5{/*onderschrift foto */
	font-size:10px;
	line-height:10px;
	color:blue}
	
p7{/*english*/ font-style:italic}

p5 a{text-decoration:underline}

p5 a:hover{text-decoration:underline}

.nodeco a{text-decoration: none}
.nodeco a:hover{text-decoration: none}

.fontblack{color:black}
.fontblack a {color:black}

#demo{font-family: Arial, Helvetica, sans-serif; color: red; font-size: 40px;}

.permanent, .permanent a, 
.permanent.solo, .permanent.solo a, 
.permanent.art, .permanent.art a,
.permanen.design, .permanent.design a{text-transform: uppercase; color: #464646;}


.solo, .solo a {text-transform: uppercase;color:#464646;}

.groep {text-decoration: none; color:gray}
.groep a{color: gray;}

.design, .design a {font-style: italic;}

.art, .art a{font-weight:normal;}

.artlist, .artlist a{color: gray;font-size:12px; line-height:20px;}


/**************************************************************************
4. BUTTON-styles
***************************************************************************/
button.reserveer{
	background-color: white;
	border: solid black 1px;
	padding: 5px;
	margin-bottom: 7px;
	border-radius: 20%
	}
	button.reserveer:hover{
		background-color: black;
		color: white}

button.bekijk{
		background-color: black;
		color:white;
		border: solid white 1px;
		padding: 5px;
		margin-bottom: 7px;
		border-radius: 20%
		}
	button.bekijk:hover{
		background-color: white;
		color: black;
		border: solid black 1px	}
	
/***********
5. NAV
***********/

li {list-style-type: none; display: inline;margin: 02vw;}
a {text-decoration:none}
a:hover{text-decoration: underline}
nav {width: 100vw;
background-color:pink
}
ul{margin:0; padding:0; display: flex}



/* Slideshow container */
 
 
.slideshow-container {
	width:33%;
	position: relative;
	
  }
  
  /* Next & previous buttons */
  .prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: black;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
  }
  
  /* Position the "next button" to the right */
  .next {
	right: 0;
	border-radius: 3px 0 0 3px;
  }
  
  
  .mySlides {
	display:none;
  }
  .active-slide {
	display:block;
  }
  
  .dot{colour:black}


  /* Fading animation */
  .fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
  }
  
  @keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
  }

/*************
6. LISTs   
/*************/

.artlist{
	font-size:12px;
	line-height:20px;
	width: 99%;
	height: 100%;
	overflow: hidden;
	text-align: justify;}


.artlist a:hover{
	text-decoration:underline;
	color:black;}


.hide{
    display:none;
 	background-position: center center;
    background-size:cover;
}

 

#middle::-webkit-scrollbar {
    width: 1px;
}
 
/* Track */
#middle::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px white; 

}



/*****************
7. PHONE ****/
/*****************/

@media only screen and (max-width: 600px) {
	
	ul{flex-direction: column}
	li {margin:0;}
	a{display: block;}


	button.reserveer{
		
		padding: 2px;
		margin-bottom: 2px;
		border-radius: 20%
		}
		
	
	button.bekijk{
		padding: 2px;
		margin-bottom: 2px;
		border-radius: 20%
			}
	

}