/**
 background-color: #262626;
 */
 :root{
    --darkbg: #262626;
    --lightbg: #fcfbfb;
    --darkblue: rgba(0,61,114, .6);
    --red: #E2001A;
    --base-font-size:1em;
    
}
*{margin: 0;padding: 0;font-size: var(--base-font-size);box-sizing: border-box;font-family: Helvetica, Arial,"sans-serif";}
body{background-color: var(--darkbg);color: var(--lightbg);font-size: var(--base-font-size);}
.header {padding: 32px;background-color: var(--lightbg);border-bottom: solid 7px var(--red);display: flow-root;color:var(--darkbg)}
.header p, .header h1 {background-color: var(--lightbg);}

/* Style the top navigation bar */
nav {overflow: hidden;background-color: var(--lightbg);}
/* Style the topnav links */
nav ul {list-style-type: none;margin: 0;padding: 0;}
nav ul li { float: left; }
nav ul li a {float: left;display: block; background-color: var(--red); color:var(--lightbg);text-align: center;padding: 14px 16px;text-decoration: none;}
/* Change color on hover */
nav ul li a:hover {background-color: var(--darkblue);color: var(--lightbg);}
header nav {float: right;}

::placeholder {color:var(--darkblue);opacity:1;transition: opacity 1s;}
:focus::placeholder { opacity:0  }

section {background-color:var(--darkbg);padding:1em 2em;}
section.nobg{background-color:transparent;}

.caption {color: var(--darkbg);font-size: 14px;padding: 5px 0;text-align: center;}

[contenteditable="true"]:active, [contenteditable="true"]:focus{color:var(--darkbg);border:none;outline:none;}
[contenteditable="true"]:focus{color:var(--darkbg); font-size: 1em; line-height: 1.2; padding: 12px; background: #ececec; }

.line{margin-bottom:0.5em;display:block;width:100%;overflow: hidden;}
.pull-right { float:right }
.pull-left { float:left }

.row {display: flex;flex-wrap: wrap;}
/* Create four equal columns that sits next to each other */
.column {flex: 25%;max-width: 25%;padding: 0 4px;}
.column_large{flex: 50%;max-width: 50%;padding: 0 4px;background-color: var(--darkbg);}
.column_small{flex: 50%;max-width: 50%;padding: 0 2em;color: var(--lightbg);background-color: var(--darkbg);}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {.column {flex: 100%;max-width: 100%;}
  .column_large{flex: 100%;max-width: 100%;padding: 0 4px;}
  .column_small{flex: 100%;max-width: 100%;padding: 0 2em;}}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {flex: 100%;max-width: 100%;}
  .column_large{flex: 100%;max-width: 100%;padding: 0 4px;}
  .column_small{flex: 100%;max-width: 100%;padding: 0 2em;}
}

#imgcontainer{text-align: center;}
#imgcontainer img{width: auto;height : auto;max-height: 100%;max-width: 100%; object-fit: contain;}

input[type=text] {padding: 12px 20px;margin: 8px 0;box-sizing: border-box;}
select {padding: 12px 20px;margin: 8px 0;box-sizing: border-box;color: rgba(0,61,114, 1);}
div.filter {margin-top:1em;display:block;clear:both;width: 100%;/*border-top: 2px solid var(--lightbg);*/color: var(--lightbg);}
div.static div.index{background: var(--darkblue);color:var(--lightbg);padding: 1em;}
div.static div.info{background: var(--lightbg);color:var(--darkbg);padding: 1em;}
div.static div.index p, div.static div.info p{margin: 0 0 .75em 0;}


/* creating css loader */

#loading {
  width: 2rem;
  height: 2rem;
  border: 5px solid #f3f3f3;
  border-top: 6px solid #9c41f2;
  border-radius: 100%;
  margin: auto;
  /*visibility: hidden;*/
  animation: spin 1s infinite linear;
}
#loading.display {
  visibility: visible;
}
@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}



/*******************/
/*******************/
/*******************/
/*******************/
/* Responsives Layout */
@media (max-width: 1427px) {#gallery {grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));}}
@media (max-width: 786px) {#gallery {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}}
#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 10px;
  /*max-width: 1000px;*/
  width: 100%;
}
#gallery .imgbox{
    max-height: 250px;
}
#gallery .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

#gallery .imgbox img:hover {
  transform: scale(1.05);
}

.pagination {
	list-style-type: none;
	padding: 10px 0;
	display: inline-flex;
	justify-content: space-between;
	box-sizing: border-box;
}
.pagination li {
	box-sizing: border-box;
	padding-right: 10px;
}
.pagination li a {
	box-sizing: border-box;
	background-color: #e2e6e6;
	padding: 8px;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #616872;
	border-radius: 4px;
}
.pagination li a:hover {background-color: var(--darkblue)}
.pagination .next a, .pagination .prev a {text-transform: uppercase;font-size: 12px;}
.pagination .currentpage a {background-color: var(--red);color: var(--lightbg);}
.pagination .currentpage a:hover {background-color: #518acb;}

.btn {
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  opacity: 0.6;
}
.btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  opacity: 1
}
.greenbtn {background-color: #04AA6D;color: white;} /* Green */
.bluebtn {background-color: var(--darkblue);color: white;} /* Blue */
.redbtn {background-color: var(--red);color: white;} /* Red */
.whitebtn {background-color: var(--lightbg); color: black;} /* Gray */
.darkbtn {background-color: #555555;color: white;} /* Black */
.nextlink, .prevlink{ font-size: 2em;font-weight: bold; color: var(--red);text-decoration: none; }

.alert {padding: 20px;background-color: #f44336;color: white;opacity: 1;transition: opacity 0.6s; display: none;}
.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}


.form-container {
  background-color: rgba(41, 40, 40, 0.6);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
}
.form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.form-group button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.form-group button:hover {
  background-color: var(--darkblue);
}

fieldset {
  /*background-color: #eeeeee;*/
  padding:2em;
}

form p {
  margin-bottom: 1.2em;
}

legend {
  background-color: var(--darkblue);
  color: white;
  padding: 5px 10px;
}
/*
#uploadform label {
  display: block;clear:both;
}
.custom-file-input {
  width:auto;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Auswählen';
  color: black;
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active {
  outline: 0;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); 
}
*/
@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
  .form-container{
    grid-column-start: 1;
    grid-column-end: 12;
    margin-top: 5em;
    margin-bottom: 5em;
  }
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
.form-container{
    grid-column-start: 1;
    grid-column-end: 12;
    margin-top: 5em;
    margin-bottom: 5em;
  }
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
.form-container{
    grid-column-start: 1;
    grid-column-end: 10;
    margin-top: 5em;
    margin-bottom: 5em;
  }}
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
  div.static {display: flex;flex-flow: row wrap;width: 100%;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;margin: 2em auto;}
  div.static div.index,div.static div.info {flex: 0 1 50%;padding: 1em;}
}
@media (min-width:1281px) { /* hi-res laptops and desktops */ 
  .form-container{
    grid-column-start: 6;
    grid-column-end: 8;
    margin-top: 5em;
    margin-bottom: 5em;
  }
}



@media screen and (max-width: 600px) {
  div.static {flex-direction: column;}
  div.static div.index,div.static div.info {flex: 0 12 100%;}
}