@media only screen and (max-width: 700px) {
.modal {
	visibility: hidden;
}
}
html {
  scroll-behavior: smooth;
}


body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}
a {
	text-decoration: none;
	color: black;
}
* {
  box-sizing: border-box;
}
.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-fenster {
	color: white;
	font-size:10vh;
	padding: 0.5%;
	cursor: pointer;
	width: 8%;
}
.close-fenster:hover { 
	color: white;
}
.close-fenster: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("bilder/red-ex/europe/1.jpg");
	margin: 2%;
	background-size: contain;
	background-position:center;
	background-repeat:no-repeat;
}

.mobile-header {
	text-align: center;
	font-size: 1vw;
	
}	
.header-bg {
	height: 50vh;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;

}
.bg1 {
	background: url("gallery.jpg");
	
	background-attachment: fixed;
	background-size: auto 47vh;
	background-repeat: no-repeat;
}
.europe {
	background: url("europe.jpg");
	background-attachment: fixed;
	background-size: auto 47vh;
	background-repeat: no-repeat;
}
.asia {
	background: url("asia.jpg");
		background-attachment: fixed;
	background-repeat: no-repeat;
}
.conservation {
	background: url("conservation.jpg");
		background-attachment: fixed;
	background-repeat: no-repeat;
}
.creative {
	background: url("creative.jpg");
		background-attachment: fixed;
	background-repeat: no-repeat;
}
.header-text {
	background: white;
	margin:15vh auto;
	width: 40%;
	height:20vh;
	color: black;
    mix-blend-mode: screen;
}
.mobile-header h2{
	font-size: 3vw;
	padding-bottom: 0;
	margin-bottom: 0;
	/* color: #156131; */	
}
nav {
	margin: 0 auto;
	margin-bottom: 5%;
	width: 100%;
	text-align: center;
	background-color: ;
	
	height: 7%;
}
.nav1 {
	display: inline-block;
	margin: 0 ;
	background-color: ;
	padding: 1% 2.5%;
	height:5%;	
	font-size: 3vh;
	top: 50%;
	color: #156131;
	
	
}
.nav1:hover {
	text-decoration:underline;
}
.portfolio-menue {
	width: 80%;
	
	margin: 2% auto;
	display:flex;
	flex-direction: row;
	text-align: center;
	padding-bottom: 6vh;
	border-bottom: solid 2px;
	border-bottom-color:#156131;	
}
.sec  {
	width: 80%;
	margin: 2% auto;
	margin-bottom: 0;
	padding-bottom: 0;
	display:flex;
	flex-direction: row;
	text-align: center;	
	border-bottom: solid 2px;
	border-bottom-color:white;
}
.portfolio-m1 {
	display: flex;
	flex-direction: row;
	
	width: 50%;
	
}
.portfolio-m2 {
	display: flex;
	flex-direction: row;
	width: 50%;
}
.port-child {
	flex: 50%;
	height: 20vh;
	padding: 2%;
	font-size: 1.2vw;
	-webkit-animation: smooth-zoom-out 0.1s;
}
.port-child:hover {
	-webkit-animation: smooth-zoom-in 0.5s;
	animation-fill-mode: forwards;
}
.port-first .port-text {
	background-image: url(bilder/red-ex/europe/4.jpg);
}
.port-second .port-text{
	background-image: url(bilder/red-ex/asia/12.jpg);

	
}
.port-third .port-text{
	background-image: url(bilder/red-ex/conservation/9.jpg);

}
.port-fourth .port-text{
	background-image: url(bilder/red-ex/creative/9.jpg);
}

.port-text {
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.alle-bilder {
	width: 100%;
	text-align: center;
	font-size: 1.5vw;
	font-weight: bold;
	color: #156131;	
	padding: 1%;
}


.un {
  display: inline-block;
}

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

.un:hover::after {
  width: 100%;
}




.close2 {
	position:absolute;
	right: 5px;
	top: 5px;
	background-color: ;
	font-size:4vh;
	padding: 0.5%;
	cursor: pointer;
	color: black;
}

.close2:hover {
	background-color: red;
	color: white;
	
}
.close2:hover .cl {
	-webkit-animation: in 1s;
	animation-fill-mode: forwards;
}
.cl {
	-webkit-animation: out 1s;
}


.beschreibung-innen {
	display: none;

}

.fade-in { /* //beschreibung innen */
	width:78vw;
	left: 10.5vw;
	position:absolute;
	background-color: ;
	animation: fadeIn ease 1s;
	-webkit-animation: fadeIn ease 1s;
	-moz-animation: fadeIn ease 1s;
	-o-animation: fadeIn ease 1s;
	-ms-animation: fadeIn ease 1s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
.beschreibung {
	text-align: center;
	font-size: 1vw;
}
.beschreibung-titel {
	height:7vh;
	padding: 1vh;
	font-size:3.5vh;
	
}
.beschreibung-titel-mob {
	display: none;
	}
.beschreibung-container {
	display: flex;
	flex-direction: row;
	margin-top: 1%;
	background-color: ;
}
.beschreibung-text {
	display: flex;
	width: 55%;
	justify-content: center;
	align-items: center;
}
.beschreibung-text-innen {
	height: auto;
}
.beschreibung-bild {
	width: 45%;
	height: 53vh;
	cursor: pointer;
		background-size: contain ;
	background-repeat: no-repeat;
	background-position: center;
}

.exifs {
	font-weight: bold;
}
.show-mehr {
	display:none;
}
.show-weniger {
	display:none;
}

@-webkit-keyframes down {
    from   { margin-bottom:0; }
    to { margin-bottom:53vh;}
}

@-webkit-keyframes up {
    0%   { margin-bottom:53vh; }
    100% { margin-bottom:0vh; }
}



.gallery {
	text-align: center;
	width: 90%;
	margin-left: 5%;
}

.bild img {
	width: 100%;
}

	
.container {
	width: 80vw;
	margin: 0 auto;
	background-color:;
}
 .mobile {
	 display: flex;
	 flex-direction: row;
	
 }
 .down{
	  display: flex;
	 flex-direction: row;
	
		 animation-name: down ;
	 animation-duration: 0.5s;
	 animation-fill-mode: forwards; 
 }
 .up{
	  display: flex;
	 flex-direction: row;
	 
		 animation-name: up ;
	 animation-duration: 0.5s;
	 animation-fill-mode: forwards; 
 }

.bild2 {
	width: 18vw;
	height: 18vw;
	margin: 1vw;
	
}
.bild2 img {
	display: none;
	
}
.bildnav {
	display: none;
	position: absolute;
	margin-left: 12vw;
	margin-top:15vw;
	background-color: ;
}
.bild2:hover .bildnav {
	display: block;
	animation: fadeIn ease 1s;
	-webkit-animation: fadeIn ease 1s;
	-moz-animation: fadeIn ease 1s;
	-o-animation: fadeIn ease 1s;
	-ms-animation: fadeIn ease 1s;
	filter: invert(85%) sepia(95%) saturate(0%) hue-rotate(165deg) brightness(107%) contrast(105%);
}

.bild2 .bildnav img {
	width: 3vw;
	padding: 0.5vw;
	display: inline;
}
.bild2 .bildnav img:hover {
	width: 3vw;
	padding: 0.4vw;
	display: inline;
}
.bildcont {
	height:100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
.bildcont:hover {
	
}


/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding: 10vh 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.6);
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90vw;
  height:70vh;
}
.modal-img-cont {
	height: 80vh;
	width: 57.5vw;
	background-size: contain ;
	background-repeat: no-repeat;
	background-position: center;
	background-color:  black;
	margin: auto auto;
	border-style: solid;
	border-width: 2vh;
	border-color: white;
}
/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 5vh;
  right: 10vw;
  font-size: 3vw;
  font-weight: bold;
    z-index: 2;
}

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

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 35vh;
  width: auto;
  padding: 2vh;
  color: white;
  font-weight: bold;
  font-size: 8vh;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.2);
}

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

/* 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;
}





.nextpages {
	width: 7%;
	margin: 0 auto;
	text-align: center;
	padding-top:3vh;
	display: flex;
	flex-direction: row;
	
}
.page {
	padding: 7% 0.5%;
	
	border-color: black;
	border-style: solid;
	border-width: 0.1vw;
	background-color: white;
	margin:1%;
	flex: 20%;
}
.page:hover {
	background-color: grey;
	color: white;
}

.footer {
	text-align: center;
	margin-top: 3%;
	background-color: white;
	padding-top: 2%;
	padding-right: 2%;
	padding-left: 2%;
	font-size: 1vw;
}
.footer p {
	padding-bottom: 1%;
}
.footerbox {
	width: 5%;
	display: inline-block;
	text-align: center;
	margin: 0 2%;
}
.footerbox img {
	-webkit-animation: out 1s;
	width:60%;
	max-width:100px;
}
.footerbox:hover img {
	-webkit-animation: in 1s;
	animation-fill-mode: forwards;
}
.mobile-only {
	display: none;
}
.mobile-only2 {
	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	{ padding: 2%;font-size: 1.2vw;}
	to	{ padding: 0%;font-size: 1.4vw;}
}
@-webkit-keyframes smooth-zoom-out{
	0%	{ padding: 0%;font-size: 1.4vw;}
	100%	{ padding: 2%;font-size: 1.2vw;}
}
@media only screen and (max-width: 1100px) {
.bg1 {
	background: url("gallery-mob1100.jpg");
	background-attachment: fixed;
	background-size: auto 57vh;
	background-repeat: no-repeat;
}
.bg2 {
	background: url("europe-mob1100.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
}
.bg3 {
	background: url("asia-mob1100.jpg");
		background-attachment: fixed;
	background-repeat: no-repeat;
}
.bg4 {
	background: url("conservation.jpg");
		background-attachment: fixed;
	background-repeat: no-repeat;
}
 .nav1 {
	 font-size: 5vw;
 }
 .mobile-header {
	text-align: center;
	font-size: 4vw;
	background-color: ;
}	
.mobile-header h2{
	font-size: 8vw;
	padding-top:5%;
}
 .close-fenster {
	font-size:7vh;
}

 .portfolio-menue {
	width: 95%;
	margin: 0 auto;
	display:flex;
	flex-direction: column;
	text-align: center;
	padding-bottom: 5vh;
	border-bottom: solid 2px;
	border-bottom-color:#156131;	
}

.port-child {
	width: 24.5%;
	height: 15vh;
	margin:0 0.5%;
	
}
.port-text {
	font-size: 4vw;
	display: flex;
}
.portfolio-m1 {
	width: 100%;
	margin-bottom: 2%;
	
}
.portfolio-m2 {
	width: 100%;
}

.port2 img {
	margin-left: 0;
	width: 100%;
}
.page{
	padding: 7% 2%;
	border-width:0.5vw;
	width: 30%;
}
.nextpages {
	width: 40%;
}

.modal-img-cont {
	height: 80vh;
	width: 90vw;
	border-width: 1vh;
}
.modal-content {
  width: 90vw;
  height:70vh;
}
.prev,
.next {
  padding: 2vh;
  margin: 1vh;
  color: white;
  font-weight: bold;
  font-size: 3vh;
}
.close {
  top: 10vh;
  right: 5vw;
  font-size: 8vh;
  font-weight: bold;
    z-index: 2;
}
	.page{
	padding: 7% 2%;
	border-width:0.2vw;
	width: 30%;
}
.nextpages {
	width: 15%;
}
.header-bg {
	height: 55vh;
}
.header-text {
	margin:22.5vh auto;
	width: 80%;
	height:15vh;
	color: black;
    mix-blend-mode: screen;
	font-size: 2vw;
}
.mobile-header h2{
	font-size: 5vw;
	padding-bottom: 0;
	margin-bottom: 0;
	margin-top: 0;
	/* color: #156131; */	
}
.container {
	width: 98vw;
	margin: 0 auto;
	background-color: ;
}
.bild2 {
	width: 24vw;
	height: 24vw;
}
.bild2:hover .bildnav {
	display: none;

}
.fade-in { /* //beschreibung innen */
	width:98vw;
	left: 1vw;
	background-color: ;
}
.alle-bilder {
	font-size:5vw;
}
.beschreibung {
	font-size: 2vw;
}

.beschreibung-titel {
	font-size:2vw;
}
.beschreibung-bild {
	height: 30vh;
}
.beschreibung-text {
	
}
.close2 {
	position:absolute;
	right: 1vw;
	top: 1vh;

}
.mobile-only2 {
	display: none;
}
#close2 {
	visibility: visible;
	position:absolute;
	right: 1vh;
	top: 1vh;

}
.footer {
	font-size: 2.5vw;
}
  .footerbox {
    width: 17%;
  }
@-webkit-keyframes down {
    from   { margin-bottom:0; }
    to { margin-bottom:31vh;}
}

@-webkit-keyframes up {
    0%   { margin-bottom:31vh; }
    100% { margin-bottom:0vh; }
}
}
@media only screen and (max-width: 700px) {
 .mobile {
	 display: flex;
	 flex-direction: column;
	 height: auto;
	 
	 
 }

 .mobile-header h2{
	font-size: 8vw;
}
.header-text {
	font-size: 4vw;
}
 .bild2 {
	height: 100%;
	width: 100%;
	padding: 2%;
	margin-bottom: 0;
	margin-left: 0;
}
.bild2 img {
	display: block;
	width: 100%;
}
.bildcont {
	display: none;
}
.beschreibung-titel {
	display:none;
}
.beschreibung {
	font-size: 4.5vw;
	padding-top: 2vh;
	font-weight: bold;
}
.beschreibung-innen{
display: none;
margin-top: 0vh;
position: absolute;
padding: 0;
}

.fade-in2{
width:95vw;
left: 2.5vw;
animation: fadeIn ease 1s;
-webkit-animation: fadeIn ease 1s;
-moz-animation: fadeIn ease 1s;
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
display: none;
margin-top: 0vh;
position: absolute;
padding: 0;
}
.beschreibung-bild{
	display: none;
}
.beschreibung-text{
	width: 100%;
	height: auto;
	font-weight: normal;
	padding:0;
	margin:0;
	
}
.show-mehr {
	display: block;
	font-weight: normal;
	text-decoration: underline;
}
.show-weniger {
	text-decoration: underline;
	font-weight: normal;
}

.an {
	display: block;
	width: 100%;
	animation-name: runter;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
}
.an2 {
	display: block;
	width: 100%;
	animation-name: hoch;
	animation-duration:0.5s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes runter {
    from   {margin-top: 0vh; }
    to { margin-top: 30vh;}
}

@-webkit-keyframes hoch {
    0%   { margin-top: 30vh;  }
    100% { margin-top: 0vh;  }
}
.close2 {
	visibility: hidden;
}
#close2 {
	visibility: visible;
	position:absolute;
	right: 1vh;
	top: 1vh;

}
.exifs {
	font-weight: normal;
}
.beschreibung-text-innen {
	display:block;
}
.alle-bilder {
	font-size:6vw;
}
	.page{
	padding: 7% 2%;
	border-width:0.5vw;
	width: 40%;
}
.nextpages {
	width: 25%;
}
.mobile-only2 {
	display: block;
}
}


.sec-img-1 {
	background-image: url(bilder/red-ex/europe/4.jpg);
}
/* .sec-1:hover .sec-img-1 {
	background-image: url(europe/11.jpg);
} */
.sec-img-2 {
	background-image: url(bilder/red-ex/asia/12.jpg);
}
/* .sec-2:hover .sec-img-2 {
	background-image: url(asia/4.jpg);
} */
.sec-img-3 {
	background-image: url(bilder/red-ex/conservation/9.jpg);
}
.sec-img-4 {
	background-image: url(bilder/red-ex/creative/9.jpg);
}
/* .sec-3:hover .sec-img-3 {
	background-image: url(conservation/5.jpg);
} */

.gal-sec-container {
	display: flex;
	flex-direction:row;
	width: 80vw;
	margin: 0 auto;
	margin-bottom:-3vh;
	height: 60vh;
}

.gal-sec {
	width: 22%;
	margin: 0 auto;
	text-align: center;
	border-bottom: solid 10px;
	border-bottom-color:#156131;
}


.alle-bilder-sec {
	width: 100%;
	text-align: center;
	font-size: 2vw;
	padding: 2%;
	font-weight: bold;
	color: #156131;	
	text-align: center;
}

.sec-title {
	text-align: center;
	font-size: 1.5vw;
	padding: 7%;
	height: 20%;
	background-color: #156131;
	color: white;
	font-weight: bold;
}
.sec-images {
	height: 45%;
	background-size: 100%;
	background-repeat: no-repeat;
}
.sec-desc {
	text-align: center;
	font-size: 1vw;
	padding: 3%;
	height: 20%;
}
@media only screen and (max-width: 1100px) {
.alle-bilder-sec {
	width: 100%;
	text-align: center;
	font-size: 5vw;
	padding: 2%;
	font-weight: bold;
	color: #156131;	
	text-align: center;
}
	
.gal-sec-container {
	flex-direction:column;
	width: 100%;
	margin-bottom: 5vh;
	height: auto;
}
.gal-sec {
	width: 80%;
	height: auto;
	margin: 2% auto;
	background-color: lightgrey ;
	text-align: center;
}
.sec-title {
	text-align: center;
	font-size: 4vw;
	padding: 2%;
	height: auto;
	background-color: #156131;
	color: white;
	font-weight: bold;
}
.sec-images {
	height: 30vh;
	background-size:  100%;
	background-position: center;
	background-repeat: no-repeat;
}
.sec-desc {
	text-align: center;
	font-size: 3vw;
	padding: 3%;
	height: 20%;
}
}
@media only screen and (max-width: 700px) {}