/*.....................*/
* {
  box-sizing: border-box;
  margin:0;
  padding-top: 0px;
}

body {
  height: 100%;
  margin: 0px;
  font-family: 'Overpass', sans-serif;
  font-weight: 100;
}

footer {
  white-space: pre;
  padding:0;
}


/*.....................*/
/*.....................*/

/*MAIN PAGE STRUCTURES*/
.head {
  max-width: 95%;
  margin: auto;
}

.haupt {
  max-width: 100%;
  margin: auto;
}

/*.....................*/
/*.....................*/

/*NAV BAR constist of a left (my name) and right component (the actual menu) */
/*...POSITION and colour*/
.topnav {
  margin-top: 36px;
  overflow: hidden;
  background-color: none;
}

.topnav-right {
  float: right;
}

/*...LINKS INSIDE NAVBAR*/
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 0px 12px;
  text-decoration: none;
  /*.FONT*/
  font-size: 24px;
}

/*...Change the color of links on hover */
.topnav a:hover {
  color: black;
  text-transform: uppercase;
}

.topnav-right a:hover {
  color: black;
  text-transform: uppercase;
}

/*...Add a color to the active/current link */
.topnav a.active {
  color: black;
  text-transform: uppercase;
}

.topnav-right a.active {
  color: black;
  text-transform: uppercase;
}





/* Center website */
.main {
  max-width: 100%;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  float: right;
  width: 66%;

}

.row-buttons {
  margin: 10px;
  flex-wrap: wrap;
  float: left;
  width: 33%;
  justify-content: space-around; /*displays the flex items with space before, between, and after the lines*/
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 0px;

}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  display: none; /* Hide all elements by default */
  font-size: 12px;
  padding: 6px 6px 6px 6px;

}

/* ---------------------------- */
/* BLACK and WHITE FILTER ON GRID */
.column img {
  filter: grayscale(0%);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  /*border: 1px solid red;*/
}

/*...Change image colour when hovering on it */
.column img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}

/* ---------------------------- */
/* ---------------------------- */

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 6px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
  object-fit: cover;
}

/* Style the buttons */
.btn {
  border: dotted;
  border-width: thin;
  /* outline: none; */
  padding: 4px 6px 2px 6px;
  margin: 4px;
  background-color: white;
  cursor: pointer;
  font-family: 'Overpass', sans-serif;
  font-weight: 100;
  text-align: left;
  display: block;
}

.btn:hover {
    background-color: #ddd;
}

.btn.active {
    text-transform: uppercase;
    color: black;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.column:hover .overlay {
  opacity: 1;
}

/*.....................*/


/* Responsive layout - makes a two column-layout instead of four columns */
@media only screen and (max-width: 600px) {
  .row                    {width: 95%;}
  .column                 {-ms-flex: 33.3%; flex: 33.3%; max-width: 50%;}
  .topnav a               {text-align: center; float: none;}
  .row-buttons            {display: none;}
  .topnav-right           {text-align: left; float: none; display: block; margin-top: 20px;}
  .responsive             {width: 49.99999%; margin: 6px 0;}
  .flex-container         {margin: 0px; padding: 0px; flex-direction:column;}
  .flex-container h1      {text-align:left; font-size: 24px; }
  .flex-container p       {text-align: left; font-size: 16px;}
  .flex-container-about   {flex-direction:column}
  .flex-container-about p {font-size: 16px;}
  .textsub h1             {font-size: 16px;}
  .textsub p              {font-size: 16px;}
  .collapsible            {font-size: 16px;}
  .content p              {font-size: 16px;}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media only screen and (max-width: 400px) {
  .column                 {-ms-flex: 100%; flex: 50%; max-width: 100%;}
  .column img             {margin-top: 6px;}
  .topnav a               {text-align: center; float: none;}
  .row-buttons            {display: none;}
  .topnav-right           {text-align: left; float: none; display: block; margin-top: 20px;}
  .responsive             {width: 100%;}
  .flex-container         {margin: 0px; padding: 0px; flex-direction:column;}
  .flex-container h1      {text-align: left; font-size: 18px;}
  .flex-container p       {text-align: left; font-size: 14px;}
  .flex-container-about p {font-size: 14px;}
  .textsub h1             {font-size: 14px;}
  .textsub p              {font-size: 14px;}
  .collapsible            {font-size: 14px;}
  .content p              {font-size: 14px;}
}

/*SUBPAGE SLIDESHOW*/
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}