@charset "UTF-8"; 
/* urbanist - latin-ext_latin */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 100;
  src: local(''),
       url('fonts/urbanist-v17-latin-ext-100.woff2') 
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('fonts/urbanist-v17-latin-ext-200.woff2') 
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/urbanist-v17-latin-ext-300.woff2') 
}




html {overflow-y: scroll; }
* {   margin: 0px;   padding: 0px;   scroll-behavior: smooth !important;}


body {
	font: 200 1.3rem/1.5 Urbanist;
	color: #444;
	background-color: #eadac922;
	background-color: #e3dac966;
	-webkit-text-size-adjust: none;
}
a {text-decoration:none; outline: 0; color: #000;}
a:hover {color: #666;}

.wrap {   animation: fadeInAnimation 1.5s ease-in-out;}
@keyframes fadeInAnimation {  0% {opacity: 0;}    100% {opacity: 1;} }

p {margin: 0 0 2rem 0;}
strong {	font-weight: 300;	}


/*######################### BOXES ######################*/

.wrap {	max-width: 100%;}
.content { position: relative;  margin: 100px auto 20px auto; padding:20px; text-align:center; min-height: 600px; letter-spacing:1px;}
.content ul {margin: 20px 40px; list-style:circle;}
.content li {padding: 2px 0px;}

.painting {font-size:1rem; color: #666; margin: 11rem 0 4rem 0; }
.painting:first-of-type {margin:4rem 0 4rem 0;}
.painting p {margin: 0 0 0.2rem 0;}
.painting img {max-height:75vh; width: auto; max-width: 90vw; height: auto;}

.text {max-width: 900px; padding:10px; text-align:left; margin:0 auto;}
.about .painting {margin:2rem 0 4rem 0 !important;}
.about .painting img {max-height: 55vh;}

.footer {color:#ccc;font-size: 1rem;  background-color: #eadac9bb; padding: 20px 20px 180px 20px;  text-align: center; line-height:180%; letter-spacing:1px; text-transform: uppercase;}
.footer a {color: #666; }

img.up {margin-top: 10px; width: 30px;  height: auto; filter: invert(1) brightness(0.3); transition: all 0.3s ease-in-out 0s; opacity: 0.1;}
img.up:hover {transition: all 0.3s ease-in-out 0s; opacity: 0.4; }

img.down {margin-top: 10px; width: 30px;  height: auto; transition: all 0.3s ease-in-out 0s; opacity: 0.1; rotate: 180deg;}
img.down:hover {transition: all 0.3s ease-in-out 0s; opacity:0.3;}

/*############################### NAVIGATION ###############################*/
.header { background-color: #eadac9bb; top: 0px; z-index:10; width: 100%; position: fixed; backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px); }
.home .header {position:absolute; }

.logo, .menu, .insta {width: 33%;}
.logo {text-align:left;}
.insta {text-align:right;}

.navi {text-align:center;  font-size:1.6rem; text-transform: uppercase; display:flex; margin: 20px auto; align-content: center; justify-content: center; max-width:1700px; }
.navi li {    display: inline;    list-style-type: none;    margin: 2px; line-height:1;}
.navi a {color: #777; padding: 10px; font-weight:300; letter-spacing:2px;}
.navi a:hover, .navi a.select, .footer a:hover {color:#333;    transition: all 0.3s ease-in-out 0s;  }
.navi h1, .logo  {font-size: 1.6rem;  line-height: 100%; text-transform: uppercase; display:inline; margin-top: 6px;}

.insta img {width: 20px; height: auto; filter: invert(1) brightness(0.5); margin-bottom:-2px; transition: all 0.3s ease-in-out 0s;}
.insta img:hover {filter: invert(0.2); transition: all 0.3s ease-in-out 0s;}


.navi_mobil {display:none;}

/*#########################  Schrift & Farben ######################*/

	
h1, h2, h3 {
	font-size: 3.5rem;
	line-height: 110%;
	margin: 1rem 0 2rem 0;
	font-weight: 100;
	text-transform:lowercase;
	letter-spacing:2px;
	text-align:center;
	display:block;
	}
h2 {font-size:2rem;	margin: 1rem 0; line-height: 120%; font-weight:200;}
h3 {font-size: 1.6rem; margin: 1rem 0; line-height: 120%; font-weight:200; letter-spacing:1px;}


#burger {display: none;}

	
/*############################### SLIDER ###############################*/


.bullets {display:none;}



/*############################### Media ###############################*/

@media (max-width: 1200px) {
h1, h2, h3 {letter-spacing:1px;}
h1 {font-size: 2.4rem; margin: 1rem 0 1rem 0;}
h2 {font-size: 1.8rem;}
h3 {font-size: 1.3rem;}
.content { font-size: 1.1rem; margin-top: 100px; padding:10px;}
a {hyphens: none; }
.painting {margin: 3rem 0 5rem 0 !important;}
.about .painting {margin: 1rem 0 2rem 0 !important;}

.header {display:none;}
.navi_mobil {position: fixed; top: 0px; z-index:10; width: 100%;  text-align:center; background-color: #eadac9cc; font-size:1.2rem; text-transform: uppercase; display:block; backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px);}
.home .navi_mobil {backdrop-filter: none;-webkit-backdrop-filter: none;}
.navi_mobil ul {margin: 20px auto 20px auto;}
.navi_mobil li { display: inline;    list-style-type: none;    margin: 0; line-height:1;}
.navi_mobil a {color: #666; padding: 2px; font-weight:200; letter-spacing:1px;}
.navi_mobil a:hover, .navi_mobil a.select, .navi_mobil a:hover {color:#222;    transition: all 0.3s ease-in-out 0s;  }
.navi_mobil img {width: 15px; height: auto; filter: invert(1) brightness(0.5); margin-bottom:-2px; transition: all 0.3s ease-in-out 0s;}
.navi_mobil img:hover {filter: invert(0.2); transition: all 0.3s ease-in-out 0s;}
.navi_mobil h1, .navi_mobil .logo  {font-size: 1.2rem;  line-height: 100%; text-transform: uppercase; display:block; margin-bottom: 0.5rem;}

}
@media (max-width: 320px) {
.navi li {margin: 0;}
}