/* noto-serif-regular - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-serif-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Serif'), local('NotoSerif'),
       url('fonts/noto-serif-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-serif-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-serif-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-serif-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-serif-v6-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* noto-serif-italic - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/noto-serif-v6-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Noto Serif Italic'), local('NotoSerif-Italic'),
       url('fonts/noto-serif-v6-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-serif-v6-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-serif-v6-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-serif-v6-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-serif-v6-latin-italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* noto-serif-700 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/noto-serif-v6-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'),
       url('fonts/noto-serif-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-serif-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-serif-v6-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-serif-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-serif-v6-latin-700.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* noto-serif-700italic - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/noto-serif-v6-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Noto Serif Bold Italic'), local('NotoSerif-BoldItalic'),
       url('fonts/noto-serif-v6-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-serif-v6-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-serif-v6-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-serif-v6-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-serif-v6-latin-700italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/*-------------
 	General
-------------*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	 font-family: 'Noto Serif';
	color: #000;
	font-size:15px;
	line-height:23px;
	-webkit-text-size-adjust:none;
}

p{
	font-size:15px;
	line-height:23px;
	}

h1{
	font-size:30px;
	}

h2{
	font-size:25px;
	}

h3{
	font-size:20px;
	}
	
h4{
	font-size:18px;
	font-weight:700;
	line-height:23px;
	}
	
h5{
	font-size:15px;
	font-weight:700;
	margin-bottom:20px;
	line-height:23px;
	}
	
.title, .text
{
	padding:30px 0 0 20px;
	}

.more
{
	font-style:italic;
	color:#333;
	
	}
	
	.more a:hover
{
	
	color:#000;
	}

.bold
{
	font-weight:700;
	}

ul, nav{
	list-style: none;
}

a{
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}


section{
	display: flex;
	flex-direction: column;
	align-items: center;
}


section p{
	margin: 0;
	color: #000;
	text-transform: none; 
	 font-family: 'Noto Serif';
	text-align: left;
	font-weight:normal;
	font-style:normal;
	
}

ul.grid{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	max-width:1200px;
}


/*-------------
 	Header
-------------*/

.wrapper

{
	background: url(../img/header-bg.jpg);
  	background-size:cover;
  	border-bottom: 5px solid #6f5a3f;
 	border-top:5px solid #6f5a3f;	
	width:100%;
	}

header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #000;
	padding: 12px 20px;
	margin:0 auto;
	max-width:1200px;
	
}


header nav{
	display: flex;
	 font-family: 'Noto Serif';
	font-size:18px;
	text-transform:uppercase;
	
}
header nav a:link{
	padding: 15px;
	background:none;
}

header nav a:hover
{
	color: #ffffff;
  	background-color: rgba(0, 0, 0, 0.2);
	}
	
header nav a.active
{
	color: #ffffff;
  	background-color: rgba(0, 0, 0, 0.2);
	padding: 15px;
	}

header nav li{
	margin: 0 5px;
}




#menu-icon {

	display: none;
	width: 40px;
	height: 40px;
	background: #6f5a3f url(../img/menu-icon.png) center;

}

a:hover#menu-icon {

	background-color: #444;
	

}

ul {

	list-style: none;

}

li {

	display: inline-block;
	

}




/*MEDIA QUERY*/
@media only screen and (max-width : 985px) {

	
	#menu-icon {

		display:inline-block;
		position: absolute;
    right: 15px;
    top: 20px;

	}

	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #c3ae96;
		border: 4px solid #6f5a3f;
		right: 15px;
		top: 20px;
		width: 70%;
		
		z-index:100;

	}

	nav li {

		text-align: center;
		width: 100%;
		padding: 17px 0;
		margin: 0;

	}
	

	nav:hover ul {

		display: block;

	}
}




/*----------------
 	Hero Section
----------------*/
.hero
{
	max-height:100vh;
	overflow:hidden;
	}


.background-image{
	display:block;
	width: 100%;
	background-color: #fff;
	background-repeat:no-repeat;
}


/*----------------
 	Anstehende Ausstellungen Section
----------------*/

.events
{
	background-color:#71593f;
	padding: 20px;
	}
	
	
.events h1
{
	color: #fff;
	text-transform: none; 
	 font-family: 'Noto Serif';
	text-align: center;
	font-weight:normal;
	font-size:25px;
	font-style:normal;
	line-height:35px;
	}



/*----------------------
 	Anstehende Ausstellungen Section
----------------------*/

.projects{
	background-color: #c3ae96;
	padding:30px 0;
	
}

.projects .grid li{
	padding: 0 20px;
	flex-basis: 33%;
	text-align: left;
}

.projects .grid li i{
    font-size: 50px;
    margin-bottom: 25px;
}

.projects .grid li h2{
    
    margin-bottom: 25px;
}

.projects img
{
width:40%;
height:auto;
float:left;
padding:0 10px 0 0;	
	}


@media (max-width: 1000px){

	.projects .grid li{
		flex-basis: 50%;
		margin-bottom: 65px;
	}

	.projects .grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 700px){

	.projects .grid li{
		flex-basis: 100%;
	}

}

/*----------------------
 	Werke Section
----------------------*/

.work{
	background-color: #fff;
	padding:10px 0 30px 0;
	
}

.work .grid li{
	padding: 0 20px;
	flex-basis: 25%;
	text-align: left;
}

.work .grid li i{
    font-size: 50px;
    margin-bottom: 25px;
}

.work .grid li h2{
    
    margin-bottom: 25px;
}

@media (max-width: 1000px){

	.work .grid li{
		flex-basis: 33%;
		
	}

	.work .grid li:last-child{
		margin-bottom: 0;
	}

}

@media (max-width: 680px){

	.work .grid li{
		flex-basis: 50%;
		
	}

	.work .grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 400px){

	.work .grid li{
		flex-basis: 100%;
	}

}

.work img
{
width:100%;
height:auto;
padding:0 10px 0 0;	
margin-top:20px;
	}

.work h5{
	font-size:15px;
	font-weight:700;
	line-height:30px;
	margin-bottom:0px;
	}


/*----------------------
 	Werke Detail Section
----------------------*/

.work-detail{
	background-color: #fff;
	padding:30px 0;
	
}

.work-detail .grid li{
	padding: 0 20px;
	flex-basis: 100%;
	text-align: left;
}

.work-detail .grid li i{
    font-size: 50px;
    margin-bottom: 25px;
}

.work-detail .grid li h2{
    
    margin-bottom: 25px;
}



.work-detail img
{
width:39%;
height:auto;
margin:0 20px 0 0;
float:left;
	}
	

@media (max-width: 1000px){

	.work-detail img
{
width:50%;
margin-bottom:10px;
	}

}

	
@media (max-width: 600px){

	.work-detail img
{
width:100%;
margin-bottom:10px;
	}

}


.work-detail h5{
	font-size:15px;
	font-weight:700;
	line-height:30px;
	margin-bottom:0px;
	}
	
/*----------------------
 	Ausstellungen Overview Section
----------------------*/

.ausstellungen-overview{
	background-color: #fff;
	padding:30px 0;
	
}

.ausstellungen-overview .grid li{
	padding: 0 20px;
	flex-basis: 100%;
	text-align: left;
	margin-bottom:30px;
}

.ausstellungen-overview .grid li i{
    font-size: 50px;
    margin-bottom: 25px;
}

.ausstellungen-overview .grid li h2{
    
    margin-bottom: 25px;
}


.ausstellungen-overview img
{
width:17%;
height:auto;
margin:0 20px 10px 0;
float:left;
	}
	
	@media (max-width: 750px){

	.ausstellungen-overview img
{
width:33%;
margin:0 15px 10px 0;
	}
	
	.ausstellungen-overview .grid li{
	
	margin-bottom:50px;
}

}

	

@media (max-width: 500px){

	.ausstellungen-overview img
{
width:50%;
margin:0 15px 10px 0;
	}
	
	.ausstellungen-overview .grid li{
	
	margin-bottom:50px;
}

}


.ausstellungen-overview h5{
	font-size:15px;
	font-weight:700;
	line-height:30px;
	margin-bottom:0px;
	}
	
	
	/*----------------------
 	Ausstellungen Detail Section
----------------------*/

.ausstellungen-detail{
	background-color: #fff;
	padding:30px 0;
	
}

.ausstellungen-detail .grid li{
	padding: 0 20px;
	flex-basis: 100%;
	text-align: left;
}

.ausstellungen-detail .grid li i{
    font-size: 50px;
    margin-bottom: 25px;
}

.ausstellungen-detail .grid li h2{
    
    margin-bottom: 25px;
}


.ausstellungen-detail img
{
margin: 0 10px 5px 0;
	}


.ausstellungen-detail h5{
	font-size:15px;
	font-weight:700;
	line-height:30px;
	margin-bottom:0px;
	}
	

/*----------------------
 	Künstler Section
----------------------*/

.about{
	background-color: #fff;
	padding:30px 0;
	
}

.about .grid li{
	padding: 0 20px;
	flex-basis: 100%;
	text-align: left;
}

.about .grid li i{
    font-size: 50px;
    margin-bottom: 25px;
}

.about .grid li h2{
    
    margin-bottom: 25px;
}



.about img
{
width:20%;
height:auto;
margin:0 20px 0 0;
float:left;
	}
	
	
@media (max-width: 900px){

	.about img
{
width:30%;

	}

}

	
@media (max-width: 560px){

	.about img
{
width:50%;
float:none;
margin-bottom:10px;
	}

}


.about h5{
	font-size:15px;
	font-weight:700;
	line-height:30px;
	margin-bottom:0px;
	}


/*-------------
 	Footer
-------------*/

footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	background-color: #fff;
	padding: 50px 0;
	background: url(../img/header-bg-bottom.jpg);
  	background-size:cover;
	border-top: 10px solid #71593f;
}

footer .grid li{
	padding: 10px 20px;
	flex-basis: auto;
	text-align: left;
}



footer .grid li p{
    margin: 0;
	color: #000;
	text-transform: none; 
	 font-family: 'Noto Serif';
	text-align: left;
	font-weight:normal;
	font-style:normal;
}


@media (max-width: 800px){

	footer .grid li{
	
	flex-basis: 50%;
	
}

}

@media (max-width: 600px){

	footer .grid li{
	
	flex-basis: 100%;
	
}

}


.copyright{
	background-color:#71593f;
	padding: 15px;
	
	
}

.max-width

{max-width:1200px;
margin:0 auto;}

.copyright p{
	color: #fff;
	text-transform: none; 
	 font-family: 'Noto Serif';
	font-weight:normal;
	font-size:14px;
	font-style:normal;
	margin-bottom:0px;
	text-align:right;
	padding:0 20px;
	
}

.copyright a:link{
	font-weight:normal;
	font-size:14px;
}

.copyright a:hover{
	font-weight:normal;
	font-size:14px;
	color: #fdffef;
}