/*

	css für Artist.php

<p>Here we use media queries to re-arrange the images on different screen sizes:</p>
<ul>
  <li>If screen is larger than 768px wide - show four images side by side</li>
  <li>If screen is smaller than 768px - show two images side by side</li>
  <li>If screens is smaller than 480px - stack the images vertically (100%)</li>
</ul>


*/
body {
	margin-top: 60px;
}

#artistdesc, #headline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	text-align: center;
	margin: 5px;
	border: 1px solid #ccc;
	width: 40%;
	min-width:50vw;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 0.5em;
}

 #headline {
	background-color: #FF7F50;
	color: white;
 }

* {
  box-sizing: border-box;
}

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px 5px 1.5em 5px;
  border: 1px solid #ccc;
  width: calc(25% - 20px);
 background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.gallery-item:hover {
  border: 2px solid #777;
  cursor: pointer;
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

div.desc {
	background-color: white;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 5px;
	margin: 0px;
	text-align: center;

 }

div.bildinfo {
	position: fixed;
	right: 2.5em;
	top: 1em;
	padding:0.5em; 
	background-color: blue;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: 0.5em solid blue;
	border-radius: 15px;
	cursor: pointer;

}

#getdesc {
	display: none;
	position:fixed;
	top: 1em;
	/* display: block;*/
	align-items: top;
}


#closediv {
    position: fixed;
	 z-index: 1;
	/* min-height: 100vh; */
    height: 100vh;
    width: 100vw;
    background: white;
	top: 0px;
	left: 0px;
/*	overflow-y: scroll;
	overflow-x: scroll; */
/*    top:calc(50% - 90vh/2); 
    left:calc(50% - 90vw/2); */
	display:none;

	border: 0.5em solid #FF7F50;
	border-radius: 15px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   padding: 10px 10px;
   transition: transform 0.2s;	

	}

#gross {
	/* max-width: fit-content; 
	margin: 0 auto; */
    /*height: 100px; 90vh;
    width: 90vw;*/

    /* top:calc(50% - 90vh/2);  height divided by 2*/
    /* left:calc(50% - 90vw/2);  width divided by 2*/

	/*    height: 85vh;
    width: auto; */
   border-radius: 15px;
   /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);*/
   padding: 10px 10px;
   transition: transform 0.2s;	
	/* max-width: 100vw; */
	width: auto; /*100vw;    gesamte Bildschirmbreite */
	height: 97vh; /*100vh;   gesamte Bildschirmhöhe */
    object-fit: cover;  /* wichtig: füllt ohne Verzerrung */


	}


@media only screen and (max-width: 768px) {
  div.gallery-item, #artistdesc {
    width: calc(50% - 20px);
  }
}

@media only screen and (max-width: 480px) {
  div.gallery-item, #artistdesc {
    width: calc(100% - 20px);
  }
}

 img {
	/* max-width: 100vw; */
	vertical-align: bottom;
}

#xclose {
    position: fixed;
	 z-index: 1;
	top: 0.5em;
	right: 0.5em;
	font-size: 21px;
}

#inext, #iprev {
    position: fixed;
	 z-index: 1;
	/* top: calc(50vh/2); */
	width: 5%;
}

#inext {
	right: 2.5em;
	top: 2em;
}

#iprev {
	/* left: 2.5em;*/
	right: 2.5em;
	bottom: 1em;
}

.prevnext:hover {
  border: 1px solid #777;
  cursor: pointer;
  background-color: lightgray;
}

#txtsave {
	display: flex;
	justify-content:flex-top;
}

#askpw {
	display: none;
}

label, select, input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
}