html {
  scroll-behavior: smooth;
}
body {
	margin: 0;
	width:100%;
	font-family: 'Montserrat', sans-serif;
    background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}
a {
	text-decoration: none;
	color: black;
}
h2{
	color: #156131;
}
.swipeup {
  text-align: center;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  
  
}

.name {
  background-color: white;
  color: black;
  font-weight: bold;
  padding: 10px;
  width: min(50%, 600px);
  height: min(15vw, 200px);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  
  
 
}
.name #titel{
	 font-size: 4.5vw;
	 
}
.name #untertitel{
	font-size: 3vw;
	top: 0%;
}
header {
	width: 100%;
	height: 92vh;
	background-image: url("header2.jpg");
	background-position: 30% 20%;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	position: center;
	margin: 0%;
}

.language-desk  {
	position: absolute;
	background-color: white;
	width:6vh;
	right:2vh;
	border-radius: 0 0 20% 20%;
	
}

.language-desk img {
	width: 100%;
	margin:auto auto;
	display: inline-block;
	padding: 20%;
	-webkit-animation: language-zoom-out 1s;
}
.language-desk img:hover {
	-webkit-animation: language-zoom-in 0.5s;
	animation-fill-mode: forwards;
}
.popup {
	display: none;
}
.popup {
	display: inline;
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 9998;
	background: rgba(0, 0, 0, 0.4)
}

nav {
	margin: 0 auto;
	margin-bottom: 5%;
	width: 100%;
	text-align: center;
	
	height: 7%;
}
.nav1 {
	display: inline-block;
	margin: 0 ;
	background-color: white;
	padding: 1% 2.5%;
	height:5%;	
	font-size: 3vh;
	top: 50%;
	color: #156131;
	
	
}
.nav1:hover {
	text-decoration:underline;
}

.un {
  display: inline-block;
}
.un::after {
  content: '';
  width: 0px;
  height: 2px;
  display: block;
  background: #156131;
  transition: 400ms;
}
.un:hover::after {
  width: 100%;
}

.inner-part {
	width: 60%;
	position: fixed;
	height: 30%;
	background-color: white;
	color: black;
	text-align: center;
	position: absolute;
	display: flex;
	flex-direction: column;
}
.fenster-headline  {
	font-size: 4vh;
	color: white;
	background-color:#156131;
	height: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}
.headline-text  {
	width: 84%;
}
.fenster-placeholder {
	background-color: red;
	width: 8%;
}
	
.inner-part p {
	font-size: 3vh;
	width: 90%;
	margin-left: 5%;
}
.close {
	color: white;
	font-size:10vh;
	padding: 0.5%;
	cursor: pointer;
	width: 8%;
}
.close:hover { 
	color: white;
}
.close:hover .cl {
	-webkit-animation: in 1s;
	animation-fill-mode: forwards;
}
.cl {
	-webkit-animation: out 1s;

}
.fenster {
	text-align: center;
	position: fixed;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.8);
	display: none;
	justify-content: center;
	align-items: center;
}

#contact {
	display:none;
}
.contact p {
		text-align: left;
}
 .contact {
	width: 60vw;
	height: 50vh;
}
.contact-flex{
	display: flex;
	flex-direction: row;
	height: 80%;
}
.contact-text {
	width: 50vw;
}
.contact-bild {
	width: 40%;
	background-image: url("ich.jpg");
	margin: 2%;
	background-size: contain;
	background-position:center;
	background-repeat:no-repeat;
}
.textfelder {
	display: flex;
	flex-direction: row;
}
 .text-left {
	width: 30%;
	font-weight: bold;
}
.contact p {
		text-align: left;
}

 .prints {
	height: 50vh;
}
.prints-flex{
	display: flex;
	flex-direction: row;
	height: 80%;
}
.prints-text {
	width: 50vw;
}
.prints-bild {
	width: 40%;
	background-image: url("gallery/bilder/red-ex/europe/11.jpg");
	margin: 2%;
	background-size: contain;
	background-position:center;
	background-repeat:no-repeat;
}

.headline {
	width: 100%;
	background-color: ;
	margin-top: 1%;
}
.headline-1  {
	background-color: white;
	margin: auto auto;
	width: 40%;
	text-align:center;
	padding: 0.5% 5% 0.5% 0%;
	font-size: calc(3.5vh);
	font-weight: bold;
	max-width: 400px;
	
	color: #156131 ;
}
.portfolios {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 2vh;
	font-weight: bold;
	
}
.kasten {
	display: inline-block;
	background-color:white;
	
	width: 24%;
	
	
}
.kasten-wrap {
	margin: 20% 3%;
	
	-webkit-animation: smooth-zoom-out 0.1s;
}
.kasten-wrap:hover {
	
	-webkit-animation: smooth-zoom-in 0.5s;
	animation-fill-mode: forwards;
	
}
.kasten img {
	width: 100%;	
}


.footer {
	text-align: center;
	margin-top: 0%;
	background-color: white;
	padding-top: 0%;
	padding-right: 2%;
	padding-left: 2%;
	font-size: 1vw;
	
	
	font-weight: ;
}
.footer p {
	padding-bottom: 1%;
}
.footerbox {
	width: 5%;
	display: inline-block;
	text-align: center;
	margin: 0 2%;
}

.comingsoon p {
	margin-top:12vh;
	font-weight: bold;
		/* -webkit-transform: skewY(10deg);
	-moz-transform: skewY(10deg);
	-ms-transform: skewY(10deg);
	-o-transform: skew(10deg);
	transform: skewY(10deg); */
}

.footerbox img {
	-webkit-animation: out 1s;
	width:60%;
	max-width:100px;
}
.footerbox:hover img {
	-webkit-animation: in 1s;
	animation-fill-mode: forwards;
}


* {box-sizing:border-box}

.slideshow { 
	 background-color: white;
	 width: 50%;
	 min-width: 320px;
	 margin: auto auto;
	 flex: 50%;
	
}

.slideshow-container {
  padding :1% 0;
  width:98%;
  position: relative;
  margin: auto;
 
}


.mySlides ~ .mySlides {
  display: none;
}


.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0%;
  width: auto;
  color: rgba(255,255,255,0.2);
  padding: 1%;
  font-weight: bold;
  font-size: 7vh;
  transition: 0.6s ease;
  user-select: none;
  height: 100%;
  display: flex;
  justify-content: center;
	align-items: center;
  
}


.next {
  right: 0;
}
.prev {
  left: 0;
}

.prev:hover, .next:hover {
  color: rgba(255,255,255,1);
}


.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


.numbertext {
  color: #f2f2f2;
  font-size: 2vh;
  padding: 8px 12px;
  position: absolute;
  top: 2%;
}
.slideshow-title {
	width: 100%;
	text-align: center;
}

.dot {
  cursor: pointer;
  height: 3vh;
  width: 3vh;
  padding: 2%;
  margin: 0 2vh;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


.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}
}

.flex-container {
	display: flex;
	flex-direction: row;
	background-color:;
	height: auto;
	text-align: center;
	width: 97%;
	margin: 0 auto;
}
.neben-slideshow {
	flex: 50%;
	display: flex;
	flex-direction: column;
	
}
.uebermich {
	width: 85%;
	min-width:320px;
	margin: auto auto;
	display: flex;
	flex-direction: row;
	text-align:center;
	vertical-align: center;
	margin-top:2%;
	
}
.uebermich2 {
	width: 85%;
	min-width:320px;
	margin: auto auto;
	text-align:center;
	vertical-align: center;
	margin-bottom:2%;
}
.bild-ich {
	flex:30%;
	
	margin: auto auto;
}
.bild-ich img {
	width:80%;
	padding: 2%;
	padding-bottom: 5%;
}
.text-ich {
	flex:70%;
}
.text-ich h2 {
	margin-top:5%;
	margin-left: 37%;
	padding:0;
	margin-bottom: 0;
	font-size: 2vw;
}
.text-ich p {
	margin-top:5%;
	font-size:1vw;
	
}
.blog {
	width: 85%;
	min-width:320px;
	margin: auto auto;
	
	
}





 /* Slideshow container */
.slideshow-container2 {
  position: relative;
  background-color: white;
  
}
.slideshow-container2 {
	
}
/* Slides */
.mySlides2 ~ .mySlides2 {
  display: none;
  text-align: center;
}
.mySlides2 {
  text-align: center;
}
/* Next & previous buttons */
.prev2, .next2 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

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

.prev2:hover, .next2:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}




.author {color: ;} 

.blog h2 {
	margin-top:5%;
	padding:0;
	margin-bottom: 0;
	font-size: 2vw;
}
.blog p {
	padding: 0;
	font-size: 1vw;
	
}
.blogpost {
	width: 80%;
	margin: auto auto;
	display: flex;
}
.blog-bild {
	width:40%;
	background-image: url("birdlate.png");
	background-size: 120%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.blog-text {
	padding: 5%;
	text-align: center;
	width: 100%;
}

#blogpost-h1{
	margin-top:5%;
	margin-bottom: -2%;
	font-weight:bold;
}
.read {
	background-color: #156131;
	color: white;
	padding: 2%;
	width: 60%;
	margin-left:20%;
	
}
.read:hover {
	background-color: grey;
}


.mobile-only {
	display: none;
}


@-webkit-keyframes in {
    from   { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(180deg);}
}

@-webkit-keyframes out {
    0%   { -webkit-transform: rotate(180deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes smooth-zoom-in{
	from	{ margin: 15% 3%; font-size:2vh;}
	to	{ margin: 5% 1%; font-size:2.2vh;}
}
@-webkit-keyframes smooth-zoom-out{
	0%	{ margin: 5% 1%; font-size:2.2vh;}
	100%	{ margin: 15% 3%; font-size:2vh;}
}
@-webkit-keyframes language-zoom-in{
	from	{ padding: 20%;}
	to	{ padding: 10%;}
}
@-webkit-keyframes language-zoom-out{
	0%	{padding: 10%;}
	100%	{padding: 20%;}
}